Senin, 17 September 2012

Cara Membuat Layout Dinamis (jQuery Masonry)

jQuery adalah alat yang ampuh untuk membuat galeri gambar animasi,tooltips, dynamic forms, update real time dan berbagai teknik lain.

Coba Anda lihat situs ini. Galeri gambar tersebut tersusun dengan rapi dan otomatis menempatkan gambar sesuai dengan tinggi dan lebar gambar pada area yang sesuai. Galeri tersebut dibuat dengan jQuery Masonry.

Membuat layout yang dinamis dengan jQuery Masonry gambarannya seperti ini:

Teknik ini menggabungkan plugin jQuery Masonry dan struktur css tepat. Anda bisa menggabungkan jQuery Masonry dengan kode JavaScript lainnya, seperti infinite ajax scroll ataupun skrip transisi.

Cara membuat layout dinamis dengan jQuery Masonry dikembangkan oleh  David DeSandro. Anda bisa mempelajarinya lebih lanjut dari sana.

Membuat website dengan HTML5 Boilerplate

HTML5 Boilerplate adalah template front-end profesional untuk membangun aplikasi web/situs yang cepat, kuat, dan mudah diadaptasi.

Proyek ini merupakan hasil dari pengembangan bertahun-tahun dan gabungan pengetahuan komunitas developer. Ia tidak memaksakan filosofi pembangunan tertentu atau kerangka kerja, sehingga Anda bebas untuk arsitek kode Anda dengan cara yang Anda inginkan.

Dengan template HTML mobile yang friendly , optimasi Google Analytics, dan berbagai puluhan tips dan trik tambahan, website HTML5 Boilerplate cukup banyak diminati para web developer.

Fitur HTML5 Boilerplate 
  • HTML5 ready. Use the new elements with confidence.
  • Cross-browser compatible (Chrome, Opera, Safari, Firefox 3.6+, IE6+).
  • Designed with progressive enhancement in mind.
  • Includes Normalize.css for CSS normalizations and common bug fixes.
  • The latest jQuery via CDN, with a local fallback.
  • The latest Modernizr build for feature detection.
  • IE-specific classes for easier cross-browser control.
  • Placeholder CSS Media Queries.
  • Useful CSS helpers.
  • Default print CSS, performance optimized.
  • Protection against any stray console.log causing JavaScript errors in IE6/7.
  • An optimized Google Analytics snippet.
  • Apache server caching, compression, and other configuration defaults for Grade-A performance.
  • Cross-domain Ajax and Flash.
  • Delete-key friendly." Easy to strip out parts you don't need.
  • Extensive inline and accompanying documentation.

Download aplikasinya di sini.