Sabtu, 19 November 2011

HTML5 & CSS3: For Future Web

Selama ini, kalo kita nemu video atau game di sebuah website atau blog, pasti dalam bentuk Flash. Di website-website video sejenis YouTube atau Vimeo juga pake Flash. Game-game online atau gadget-gadget game kecil di blog-blog juga masih pake Flash. Lagu-lagu di blog-blog juga masih banyak yang pake Flash. Kalo bukan Flash ya Shockwave atau Silverlight.

Tapi sekarang udah ada teknologi baru yang bisa ngegantiin plugin-plugin itu.

Ya, HTML5 dan CSS3. Apa itu? Gampangnya, HTML5 itu HTML (Hypertext Markup Language) versi 5. HTML itu bahasa dasar yang dipake buat bikin sebuah halaman website. Sementara CSS3 itu CSS (Cascading Style Sheet) versi 3. CSS itu ngelengkapin HTML, buat ngehias halaman websitenya. Kalo halaman website ada warnanya atau efek-efek transparan, biasanya pake CSS. Info lengkapnya baca disini aja deh: HTML5CSS3

HTML5 ini baru dikenal banyak orang sejak tahun 2010, walaupun sebetulnya udah dikenal para developer sejak lama. Yang bikin dikenal banyak orang adalah kebijakan Apple Inc. buat nggak masukin Flash ke iOS versi barunya waktu itu. Steve jobs bilang, Flash udah nggak diperluin lagi. Jadi Apple lebih mendukung HTML5. Dan akhirnya, Adobe berhenti ngembangin Flash buat perangkat jinjing (mobile device maksudnya) dan ikut ngembangin HTML5.

Sebetulnya apa sih yang bikin HTML5 segitu istimewanya, sampe Steve Jobs aja berani bilang gitu?

Banyak. Dengan HTML5 ini, kita bisa masang video atau lagu di website atau blog tanpa Flash, soalnya ada <video> sama <audio>. Kalo ngerti bahasanya (Javascript atau sejenisnya), kita juga bisa bikin gambar, animasi, atau malah game langsung di websitenya dengan <canvas>. Masih banyak lagi elemen-elemen baru di HTML5. Hampir semua browser besar mendukung HTML5, walau mungkin belom secara menyeluruh..

Tapi ada beberapa elemen yang dari HTML4.01 yang nggak ada di HTML5 kayak <font>, <basefont>, sama <frame>. Elemen-elemen ini dihilangin mungkin karena bisa digantiin pake CSS atau diganti elemen baru. Kayak <font> yang emang bisa diganti pake CSS, atau <frame> yang diganti <iframe>.

Beda sama CSS3 yang sifatnya cuma tambahan. Nggak ada yang diganti atau dikurangin dari CSS2, cuma ditambah aja.

Nah, CSS3 nih yang seru. Kalo di CSS versi sebelum-sebelumnya kan kita cuma bisa ngatur warna, huruf sama gambar, kalo di CSS3 bisa bikin animasi. Jadi bener-bener bisa ngegantiin animasi Flash.

Fitur animasi baru sebagian kecil dari banyak fitur baru di CSS3. Ada fitur font eksternal, transisi, transformasi 2/3D, efek-efek tulisan, hias-hias kotak <div>, dan masih banyak lagi.

Kalo di CSS2, mungkin cuma bisa pake font yang web-safe kayak Arial, Verdana, dkk. Tapi di CSS3 bisa pake font eksternal. Syaratnya, file font-nya (*.ttf, *eot, dll.) harus disimpen di Internet. Itu aja.

Fitur transisi ini maksudnya kayak transisi warna dari merah ke biru. Dari berwarna jadi transparan. Contoh gampangnya, navbar blog ini. Arahin kursor ke bagian atas halaman, dan navbar yang tadinya transparan jadi keliatan. Itu pake fitur transisi.

Fitur transformasi 2D, bisa muter-muter kotak <div>, gambar, atau yang sejenisnya. Transformasi 3D bisa miring-miringin elemen tersebut kayak benda 3D.

Efek-efek tulisan bisa bikin tulisan berbayang, word-wrap, outline, dll.

Fitur buat hias-hias kotak <div> di CSS3 lebih banyak. Kalo di CSS2 cuma bisa ngasih warna border, motif, sama lebarnya, kalo di CSS3 bisa bikin ujung-ujung bordernya tumpul. Selain itu bisa juga bikin kotak <div>-nya berbayang, sama border bergambar.

Sebetulnya masih banyak lagi fitur-fitur baru dari CSS3, tapi nggak mungkin dijelasin disini. Kalo dijelasin satu-satu, panjaaang...

Soal dukungan terhadap CSS3, browser-browser besar juga udah mendukung CSS3. Tapi belom secara menyeluruh, soalnya masih banyak fitur yang belom didukung. Buat beberapa fitur juga, beberapa script fiturnya beda buat tiap browser. Misalnya, beberapa elemen harus ditambahin -o- buat Opera dan -moz- buat Firefox.

Oke, balik ke HTML5 dan CSS3 sebagai pengganti plugin. Dari sedikit ulasan diatas, HTML5 dan CSS3 bener-bener (hampir) bisa dipake sebagai pengganti plugin. Kenapa hampir? Soalnya ya itu tadi, dukungan terhadap HTML5 dan CSS3 belum menyeluruh.

Selain itu, <audio> HTML5 juga masih gampang dibajak. Mungkin harus diakalin pake script, biar nggak bisa atau paling enggak susah dibajak. Jadi kalo mau masang lagu di website pake <audio>, sebaiknya izin dulu atau pasang lagu-lagu yang emang disediain gratis sama penyanyinya. Jadi nggak bajakan namanya. :)

Buat animasi sama game CSS3 juga pemrosesannya masih agak lambat. Soalnya kan diproses browsernya langsung, nggak pake bantuan plugin.

Mungkin penggunaan HTML5 dan CSS3 sebagai pengganti plugin masih perlu pengembangan biar jadi lebih baik di masa depan. Tapi apa salahnya juga mencoba sesuatu yang baru?

Sekian ulasan dari saya, semoga berguna buat siapapun yang baca postingan ini.


NB: oh iya, buat yang mau belajar HTML5-CSS3, belajar aja di W3Schools, tempat belajar pengembangan web resmi W3C.

4 komentar:

  1. Thank you untuk ulasannya.
    Memberikan info yang berguna.

    BalasHapus
  2. Terimakasih banyak gan, penjelasannya lengkap banget.

    BalasHapus
  3. Gan, ada postingan coding html 5 ga?

    BalasHapus
  4. Owh, ternyata HTML 5 seperti itu ya.
    Baru ngudeng gan, artikel ini sangat mencerahkan.

    BalasHapus