5 Javascript Library untuk Mempermudah Webdesign

Beberapa javascript library di bawah ini bukan merupakan library javascript yg besar seperti jQuery, tetapi lebih kecil dan lebih spesifik.

1. Memperbaiki PNG di IE6 dengan DD_BelatedPNG

DD_belatedPNG diciptakan untuk tujuan tunggal memungkinkan PNGs alpha-transparan untuk digunakan dalam IE6 tanpa menggunakan filter AlphaImageLoader milik Microsoft.

Penggunaan :

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>  
<![endif]--> 

ditambah

<script type="text/javascript">  
  DD_belatedPNG.fix(".linkButton");  
</script>

Download

2. Gunakan font dengan Cufon

Script ini semacam script yg berguna untuk melakukan perubahan font di element yg dapat kita tentukan, seperti CSS. Namun, kelebihannya yaitu browser akan dapat langsung menampilkan jenis font Cufon😀.

Penggunaan :

<script type="text/javascript" src="cufon.js"></script>  
<script type="text/javascript" src="Breip_500.font.js"></script>  

cara memanggilnya :

<script type="text/javascript">  
  Cufon.replace('h1.replacedFont');  
</script> 

dengan Cufon kita juga bisa menggunakan multiple font:mrgreen:.

Download

3. Gunakan Firebug di Browser apapun

Firebug merupakan plugin yang sangat bermanfaat bagi pengembang web. Plugin ini bisa membuat penyelesaian masalah tentang CSS bug menjadi sia-sia. Penyelesaian masalah tentang compatibility browser pun menjadi mudah. Plugin ini bisa diinstall di browser, bisa jg versi Lite yg tidak harus didownload dan diinstall.

Penggunaan :

<script type="text/javascript" src="http://getfirebug.com/releases/lite/1.2/firebug-lite-compressed.js"></script>  
firebug

Download

4. Render Interactive 3d Shapes dengan Raphael JS

Menggunakan elemen SVG, jadi kita bisa langsung membuat rounded corner tanpa gambar, create faded reflections for any images, rotate the images dynamically, dll. Selain itu, kita juga bisa attach JavaScript events to them so that people can interact with the images on mouseover or click (or any other JS events).

Penggunaan :

<script type="text/javascript" src="raphael.js"/>  

Contoh :

<script type="text/javascript">  
  var canvas = Raphael(50, 50, 620, 100);  
  var shape = canvas.rect(0, 0, 500, 100, 10);  
  shape.attr("fill", "#fff");  
  canvas.text(250, 50, "Using Raphael to create custom shapes\ndrawn on the fly is extremely easy").attr("font", "20px 'Arial'");  
 </script>  
raphaeljs

Download

5. Modernizr

Modernizr digunakan untuk membantu browser yang tidak mendukung fitur HTML5  & CSS3 menjadi bisa menerjemahkannya. Sehingga, apabila seorang web developer sudah menggunakan HTML 5 & CSS3, tetapi browsernya belum support, maka dengan library Modernizr masalah akan teratasi.

Penggunaan :

<script type="text/javascript" src="modernizr-1.0.min.js"></script> 

tambahkan CSS :

.no-audio #audioContainer { display:none; }

coba tambahkan elemen audio di elemen web.

<div id="audioContainer">  
      <audio id="audio" src="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg" controls"true"></audio>  
 </div>  
<a id="linkToAudio" href="http://upload.wikimedia.org/wikipedia/en/7/77/Jamiroquai_-_Snooze_You_Lose.ogg">Link to the audio</a>  

di browser yg tidak support, elemen itu tidak bisa ditampilkan.  cara mengatasi :

if (Modernizr.audio) {

var audioLink = document.getElementById("linkToAudio");

audioLink.style.display = "none";

}
modernizr

Download

That’s all. Selamat Mencoba:mrgreen:

sumber : http://net.tutsplus.com/articles/web-roundups/5-lesser-known-javascript-libraries-that-make-web-design-easier/

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s