0 komentar

Perkembangan (teknologi) Website 2012

Senin, 12 Maret 2012

Website dan Blog terus berkembang teknologi dan designnya di tahun lalu yang baru Booming di tahun ini. Terus menjadi pembicaraan di tahun ini mulai dari forum, social media network, portal sampai Milis. Dan Interface dengan pengguna semakin interaktif, Design yang menggagumkan, dll.  

Mari kita lihat Design Web yang trend di sekitar tahun 2012 ini, Cikidot :

1.  Web Design yang Atraktif                6.  Touchscreen-oriented website designs
2.  Parallax Scrolling                            7.  CSS3 & jQuery 
3.  HTML5 + PHP framework               8.  Social Media Sharing
4.  Flash yang survive                           9.  Native support for plug-in features
5.  Mobile Device Compatibility             10. Big Images & Photo Backgrounds, Dan lain-lain

Saya akan jelaskan beberapa Trend tersebut :

1. Responsive Web Design (RWD)

     Pada dasarnya Web Design yang responsive menunjukkan bahwa dibuat menggunakan W3C CSS3 media queries + HML5.
     Pada akhirnya kita (Web Development apalagi User) meninggalkan website yang bergaya pasif. Web Design yang tanggap atas permintaan pengguna, bisa di berbagai platform dan

Bisa dijalankan di berbagai browser : 
Dahulunya beberapa website hanya bisa dijalankan/lebih optimal di 1-3 browser bahkan harus di versi tertentu dengan RWD bisa diakses oleh semua browser. Contoh : Web Sitrawimax lebi optimal jika menggunakan Mozilla Firefox 3.

Fiture pada RWD  :      
-  Whiteboard Framework 3.1.2    - Flexible Images    - Filament Group’s Responsive Images
Custom Layout Structure  - dll   lebih lengkapnya di http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/


Example :
 
2. Parallax Scrolling

       Parallax Scrolling merupakan salah satu trend desain web yang mucul sejak 2011 bahkan paling efektif untuk menarik visitor ke website kita daripada tren yang lain. Parallax Scrolling menciptakan rasa kedalaman dari desain website tersebut.
      Diadopsi dari teknik video game yang dituangkan dalam website, Dalam efek paralaks designer web menggabungkan beberapa lapisan untuk menciptakan ilusi 2D maupun 3D dimana latar belakang bergerak lebih lambat daripada latar depan gambar. Hal ini dapat dilakukan dengan bantuan plugin spritely jQuery.       
      Parallax Scrolling ini dapat membuat web bergerak horizontal maupun vertical dan composited satu sama lain, dengan memencet 1 tombol maupun hanya menggerakkan mouse. 


Contoh :             Vertikal                           Horisontal : http://rastapecasadeforro.com.br
      

3. Mobile Device Compability

    Kompabilitas web yang dapat terlihat di handphone, Tab, dan gadget lainnya itu tidak terlepas dari teknologi RWD salah satunya Flexible Images. Flexible Images disini diartikan bentuk/ukuran website tersebut akan menyesuaikan dengan platform atau tempat web tersebut dibuka, dan sangat responsif  terhadap viewports ganda. 
       Bisa dibuka di mobile karena ada aplikasi yang terdapat di gadget tersebut yang mendukung.


Contoh : http://www.mobileawesomeness.com/listings/gallery/twitter/ 
               http://www.taptu.mobi

4. HTML5  + PHP Framework


HTML5 adalah versi terbaru dari HTML (kepanjangan Hypertext Markup Language), kode yang berperan sangat penting pada halaman web. HTML adalah salah satu bahasa pemrograman untuk web selain PHP.


Sebenarnya ada 3 macam kode: HTML, yang menyediakan struktur; Cascading Style Sheets(CSS) yang mengurus presentasi, dan JavaScript yang membuat itu terjadi. 
HTML tercipta pada tahun 1980 IBM berniat membuat website. Sejak tahun  1996, bahasa ini mengalami perkembangan yang cukup pesat. Apalagi setelah W3C (World Wide Web Consortium) dan WHATWG (Web Hypertext Application Technology Working Group) sebagai pengembang utama untuk HTML5 ini.

PHP Framework

   PHP Framework adalah bentuk efisiensi pemrograman PHP pada perkembangan scriptingnya, sehingga memungkinkan bagi programmer untuk bisa mengefisiensikan kinerja mereka, serta mengarah pada efisiensi, efektifitas dan reliabilitas.
      Sebuah Framework dirancang untuk memberikan struktur untuk elemen-elemen umum (database interaksi, logika aplikasi) sehingga kita menghabiskan sedikit waktu penulisan database kode antarmuka atau presentasi lapisan antarmuka dan lebih banyak waktu menulis aplikasi itu sendiri.
      Terdapat banyak framework yang diciptakan oleh berbagai pihak.  

Contoh website yang menggunakan HTML5 :
http://spaghettiphp.org/,   www.kevadamson.com 

5. Native support for plug-in features

Native support for plug-in features sebagai dukungan untuk berbagai aspek 'HTML5 dan teman' meningkatkan dan datang ke browser yang lebih dan platform, kita akan melihat tekanan yang lebih besar untuk dukungan browser asli fitur yang kita digunakan untuk menggunakan plug-in untuk:. akses kamera dan mikrofon dengan HTML5 getUserMedia, dan hal-hal lain lebih jauh, seperti dukungan untuk streaming adaptif multimedia.


Native support ini dapat membuat animasi yang kita buat menjadi menajubkan. Salah satu fiturenya adalah ketika kita maupun user mengklik animasi itu akan melebur menjadi seperti pecahan - pecahan puzzle dan akan kembali secara automatis menjadi semula. Salah satu contoh :           awal       ----->     Ketika sudah di klik 


Hasilnya  
 
Bisa dicoba di : http://craftymind.com/factory/html5video/CanvasVideo.html


Referensi  ------>
Secara Umum :
http://webdesignledger.com/tips/web-design-trends-in-2012
http://www.webgranth.com/current-web-design-trends-2011-2012
http://webpagebynumbers.com/web-design-trends-2011-2012

Sumber Responsive Web Design :
http://coding.smashingmagazine.com/2011/01/12/guidelines-for-responsive-web-design/
http://www.netmagazine.com/features/21-top-tools-responsive-web-design
Sumber Parralax Scrolling :
http://en.wikipedia.org/wiki/Parallax_scrolling
http://www.webdesignersblog.net/inspiration/30-mind-blowing-parallax-scrolling-effect-websites/ 

Sumber Mobile Device Compatibility & Native support for plug-in features :
http://www.practicalecommerce.com/articles/2495-Mobile-Compatibility-How-to-Test-a-Website-for-Mobile-Browsers 
http://dev.khairul-syahir.com/wordpress/graphene/features-and-functionalities/native-plugin-support/
 
Sumber Perkembangan HTML5 + PHP Framework :
http://www.techradar.com/news/internet/web/html5-what-is-it--1047393
http://id.wikipedia.org/wiki/HTML5
http://www.phpframeworks.com/news/p/24132/what-is-php-framework