HTML Timeline

Sebelum memulai tutorial tidak ada salahnya untuk melihat kebelakang bagaimana HTML/Web berevolusi :

1. 1991 : HTML
2. 1994 : HTML2
3. 1996 : CSS 1 + Javascript
4. 1997 : HTML4 (12 tahun sebelum HTML5)
5. 1998 : CSS2
6. 2000 : XHTML
7. 2005 : Ajax
8. 2009 : HTML5 (mulai spesifikasi HTML5)

Versi interaktif lengkap dengan sejarah browser dapat dilihat di :

evolution of web

Sekilas HTML5 (3)

Input Form

Salah satu keunggulan HTML5 adalah ditambahnya beberapa type dalam input dan dikenalkannya beberapa attributes terbaru. Semua fasilitas terbaru ini didapatkan berdasarkan pengalaman-pengalaman dalam penggunaan HTML4. Bedanya untuk menghasilkan hal yang sama dengan HTML4 dibutuhkan coding tambahan baik berupa code HTML maupun javascript. 

Intinya input form HTML5 adalah hal yang baru tapi tidak baru.

Daftar type tambahan dalam HTML5 adalah :

• search : tipe pencarian
• tel : tipe telephone
• url : tipe url
• email : tipe email
• password: tipe password
• datetime : tipe tanggal dan waktu
• date : tipe tanggal
• month : tipe bulan
• week : tipe minggu
• time : tipe waktu
• datetime-local : tipe tanggal dan waktu lokal
• number : tipe nomor
• range : tipe range
• color : tipe warna

Sedangkan daftar attribute tbaru dalam HTML5 :

• autocomplete attribute : form pelengkap automatis
• dirname attribute : -
• list attribute : daftar 
• readonly attribute : form hanya untuk dibaca
• size attribute : ukuran
• required attribute : form wajib diisi
• multiple attribute : form dengan banyak pilihan
• maxlength attribute : ukuran maksimal form
• pattern attribute : pattern form
• min and max attributes : minimal dan maksimal form (untuk tipe angka)
• step attribute : step default (untuk tipe angka)
• placeholder attribute : form dengan background tulisan

Draft spesifikasi HTML5 dapat dilihat di :

http://dev.w3.org/html5/spec/Overview.html#the-input-element

Contoh penggunaannya dapat dilihat di :

http://www.html5bydemo.com/#!TYPE_EMAIL

Semantik HTML5

Semantik HTML,  idenya adalah memberikan arti pada sebuah dokumen. Bagi mata manusia, penggunaan semantik tidak terlihat secara langsung. Otak kita bisa mengerti bagian mana yang merupakan artikel, menu, sisi, kutipan dan lain sebagainya dengan melihat dan membaca. Tapi bagaimana dengan mesin. Misalnya sebuah crawler (contoh Google Bots) untuk mengetahui hal tersebut. Selain itu semantik yang jelas juga akan sangat membantu web designer untuk memelihara dan membuat design dokumen, karena penggunaan semantik yang standar akan memudahkan pemakaian template untuk bermacam dokumen. Contoh : sebuah template yang mengandung style untuk artikel, menu, sisi dapat diaplikasikan langsung ke semua dokumen yang memiliki artikel, menu dan sisi.

HTML5 memperkaya semantik HTML yang sudah ada, antara lain : article, aside, header, hgroup, nav, section, summary. Dapat dilihat langsung di :

http://www.html5bydemo.com/#!SECTION_ARTICLE

Sekilas HTML5 (2)

Meneruskan pembahasan mengenai fitur-fitur HTML5 yang baru, artikel ini mencakup 3 subject, yaitu : Worker, Webstorage dan Microdata. 

Worker

Worker atau pekerja adalah sebuah fitur yang memungkinkan browser untuk mengeksekusi sebuah proses dibelakang layar (background treatment). Idenya adalah pengguna tetap dapat berinteraksi menggunakan website yang pada saat bersamaan melakukan proses lain entah perhitungan kompleks, input ouput dengan server dan lain sebagainya. Worker dapat disamakan dengan Thread dalam bahasa pemogramman java.

Yang harus diingat dalam penggunaan Worker adalah : jangan berlebihan. Worker tetap berada dalam lingkupan sebuah browser yang tidak didesign untuk melakukan proses yang berat dan memakan waktu yang lama. Penulis pernah mencoba menjalankan Worker yang dicontohkan di website w3c, yaitu untuk mencari deret angka prima. Penggunaan yang seperti ini ternyata memakan ressource yang sangat tinggi sehingga browser tidak lagi reponsif dan harus di shutdown.

Contoh W3C dapat dilihat di :

 http://dev.w3.org/html5/workers/#a-background-number-crunching-worker 

Sekali lagi penulis mengingatkan menjalankan demo di contoh ini dapat membuat browser menjadi hang (terutama apabila komputernya tidak cepat). Contoh lain yang lebih moderat dapat dilihat di :

http://www.html5bydemo.com/#!WORKER_DEDICATED_COMPUT

Webstorage

Bila anda pernah melihat pesan cookies active, sebenarnya anda tengah menggunakan storage data. Cookies digunakan untuk menyimpan data yang kemudian dapat digunakan oleh server dan client (dalam hal ini browser). Hingga saat ini cookies masih tetap digunakan. Namun karena implementasinya yang membutuhkan seluruh data cookies untuk dikirimkan bolak balik client server, maka penggunaan cookies dapat memberatkan trafik. Maka dari itu besar cookies sangat terbatas. Contoh untuk microsoft IE 1 cookies tidak boleh melebihi 4 kb.

Webstorage HTML5 memiliki konsep yang berbeda dengan cookies, Webstorage tidak dibutuhkan untuk dikirimkan ke server. Ia tetap dalam client browser. Ada beberapa perbedaan dalam implementasi Webstorage, Google misalnya, ingin memasukan system SQLite dalam browser. SQLite memungkinkan penggunaan data relational di browser. Pada akhirnya yang digunakan adalah system mapping key-value. Setiap data disimpan dalam format key-value. Kapasitas Webstorage juga lebih besar : 5 Mb untuk setiap sumber origin. Draft spesifikasi Webstorage dapat dilihat di :

http://dev.w3.org/html5/webstorage/

Untuk melihat langsung demo html5 webstorage, silahkan tengok :

http://www.html5bydemo.com/#!STORAGE_LOCAL

Microdata

Apabila fitur-fitur sebelumnya berbicara mengenai kegunnaan HTML5 di  browser . Maka fitur kali ini lebih berguna untuk aktor penting lain internet : mesin pencari (Google, Yahoo, Bing dan lain sebagainya).  Prinsip mesin pencari pada saat ini adalah pencarian berdasarkan kata kunci. Kita memasukkan kata kunci dalam sebuah formulir, mesin mencari dalam database dan kemudian memberikan link yang sesuai dengan kata kunci. Tidak ada intelegent dalam teknik pencarian. Misalnya kita mencari Mr A, mesin pencari tidak bisa memberikan profil dari individu tersebut.

Microdata bertujuan untuk memberikan jalan kepada mesin pencari untuk mengenali sebuah data dan mengolahnya kemudian. Sehingga mesin pencari tidak hanya memberikan link belaka namun mampu memberikan info terkait langsung dengan kata kunci. Dalam contoh kita, pencarian akan kata 'Mr A' akan memberikan profil dari 'Mr A'. 

Draft spesifikasi microdata dapat ditemukan di :

http://dev.w3.org/html5/webstorage/

Seperti biasa demo Microdata dapat dilihat di :

http://www.html5bydemo.com/#!MICRODATA_PERSON

Pada artikel berikut akan dibahas mengenai input form HTML5 yang menawarkan kegunaan yang lebih kaya dibandingkan HTML4 dan semantik-semantik HTML5 yang terbaru.

Sekilas HTML5 (1)

Dari HTML4 ke HTML5 terdapat sebuah perbedaan besar. HTML5 mengabsorbsi aspirasi-aspirasi web mengenai apa itu sebuah applikasi web di era ini. Berikut ini adalah sekilas fitur-fitur utama terbaru HTML5. 

Canvas

Seperti namanya Canvas adalah sebuah tempat dimana kita dapat menggambar. HTML5 Canvas memberikan kita sebuah wadah untuk membuat gambar. Konsep inilah yang harus ditekankan apabila hendak mengerti Canvas.

Wadah karena pada prateknya untuk membuat sebuah Canvas kita harus membuat wadah itu terlebih dahulu. Setelah wadah itu didefinisikan kita dapat menggunakannya untuk mencoret, mewarnai, menulis dan hal-hal yang dapat kita lakukan terhadap sebuah Kanvas dalam dunia nyata (bukan maya). Bagaimana mendifiniskan Canvas : dengan membuat tag canvas di html, kemudian sebagai alat tulis adalah API javascript yang disediakan oleh browser.

Spesifikasi lengkap Canvas dapat dilihat di : http://dev.w3.org/html5/spec/Overview.html#the-canvas-element sedangkan demo dapat dilihat di http://www.html5bydemo.com/#!CANVAS_BASIC.

Media 

Betapa buramnya dunia maya tanpa media. Pada saat ini media sudah berubah menjadi konsumsi pokok para netters. Situs seperti Youtube kabarnya diakses lebih milyaran kali setiap bulannya (tahun 2011). Ini memberikan gambaran betapa pentingnya media yang dalam hal ini adalah video.  Maka wajarlah kalau video/audio harus menjadi bagian dari standard HTML.

Sebelum HTML5 dimulai, telah ada format video yang digunakan sebelumnya. Format ini menggunakan plugin adobe flash. Solusi ini tidaklah standar, karena masih menggunakan plugin dalam implementasinya. Karena posisinya yang diluar standar maka editor browser dapat saja menolak untuk menggunakannya, seperti yang terlihat pada kasus Iphone dan Ipad dimana kedua alat komunikasi ini tidak mengimplementasikan flash. Dengan alasan penggunaan resource yang berat (harus diakui flash memakan resource yang berat) walau sebenarnya lebih di karenakan politik apple yang memastikan agar semua aplikasi harus melalui Appstore.

Diluar itu banyak kekurangan plugin. Flash yang menggunakan ActionScript merupakan bahasa script yang licensenya tidak open. Untuk menggunakan flash dalam banyak kasus harus lebih dahulu membeli licensenya. Selain itu karena sifatnya yang plugin maka interaksi antara video dan javascript menjadi susah bahkan tidak ada. Kita tidak dapat mengontrol secara programasi element flash tersebut.

Dari kekurangan inilah muncul standar HTML5 video dan audio. Dengan memasukkan elemen ini dalam standar HTML kita dapat lebih leluasa mengontrol penggunaan video. Untuk melihat secara langsung penggunaan video/audio dapat dilihat di : http://www.html5bydemo.com/#!VIDEO_CONTROLS.

Geolocation

Internet semakin mobile, dari saat mulainya laptop dan wifi, netbook hingga saat ini dengan maraknya smartphone. Internet tidak lagi hanya diakses melalui rumah atau kantor. Maka dari itu informasi mengenai dimana pengguna berada menjadi sesuatu yang menarik. Untuk pengguna sendiri yang misalnya pada saat itu hendak mencari sebuah fasilitas yang paling mudah dijangkau atau pengguna lain yang ingin melacak keberadaan temannya.

Hal ini tentu membuat kita khawatir, bagaimana kalau kita tidak ingin dilacak ? Jangan khawatir karena  secara default sebelum penggunaan Geolokasi. Browser harus secara eksplisit meminta izin pengguna untuk mengaktifkan fitur ini.

Contoh geolokasi dapat dilihat di : http://www.html5bydemo.com/#!GEOLOCATION.

Fitur-fitur HTML lain akan dibahas dalam artikel berikut.

HTML5 ?

HTML5 logo

Apa

Jadi sebenarnya apa itu HTML5 ? Begitu banyak buzz sekitar kata HTML5. Secara sederhana, sebenarnya HTML5 adalah sebuah standar terbaru dari HTML. Saat ini (red 2012) sedang di godok oleh organisme W3C untuk menggantikan standar saat ini yaitu HTML 4. Standar ini masih belum mencapai draft final, yang memungkinkan masih pergantian disana sini. Bila anda tertarik dengan draft itu sendiri, bisa ditengok di link berikut ini :

http://dev.w3.org/html5/spec/

Prefix dev menunjukan kalau spesifikasi masih dalam tahap pembangunan masih dalam bentuk draft.

Mengapa

Mengapa HTML5 dibuat ? Ada beberapa tendensi disekitar teknologi web saat ini. Semakin berkembangnya dunia maya yang ditandai oleh banyaknya : pengguna web, programmer web, applikasi web, hosting web ... dan lain sebagainya terlihat sebuah kebutuhan akan penggunaan web yang semakin canggih dan modern. Web tidak lagi hanya sebuah applikasi yang digunakan secara eksklusif untuk melihat konten (isi) secara pasif. Web menjadi sebuah applikasi yang interaktif, dinamis, real time ... singkat kata sebuah applikasi yang kaya.

Kebutuhan ini tidak dapat lagi dipenuhi oleh standar aktual HTML, sehingga pada awalnya untuk mengakali keterbatasan tersebut munculah plugin yang sayangnya terkadang hanya spesifik pada sebuah browser saja. Tentu ini sangat merepotkan orang untuk membuat applikasi yang bisa dijalankan di web. Sebuah website apabila tidak dapat dijalankan oleh semua browser (paling enggak major browser) tentu menjadi tidak menarik. Contoh klasik : browser 1 mempunyai solusi A, browser 2 mempunyai solusi B browser 3 memiliki solusi C. Sebuah applikasi agar dapat dijalankan di ketiga browser tersebut harus mengimplementasikan ketiga solusi (A, B, C) ini sama saja membuat ongkos sebuah applikasi naik menjadi 3 kali. Hal inilah yang akan menghambat perkembangan dari web.

Melihat kenyataan inilah para aktor (vendor) yang memiliki kepentingan terhadap web memutuskan untuk bekerja sama dan membentuk sebuah spesifikasi/standar baru yaitu HTML5.

Siapa

Siapa aktor-aktor tersebut, bermacam-macam backgroundnya : vendor, peneliti, programmer, pemilik applikasi web ... Untuk singkatnya mereka tergabung dalam sebuah kelompok kerja untuk mendefinisikan standar HTML5 yang bergerak dibawah naungan W3C.

W3C merupakan singkatan dari World Wide Web Consortium, sebuah organisasi non profit yang bertujuan untuk mendefinisikan standar-standar web : HTML, XHTML, XML dan lain sebagainya. Berasal dari organisasi inilah HTML5 akan dikeluarkan.

Kapan

Versi final HTML5 direncanakan selesai pada tahun 2014. Tapi walau begitu sejak proyek HTML5 mulai digaungkan browser sudah mulai untuk mengimplementasikan sedikit demi sedikit standar HTML5.  Mengapa begitu ?

Standar dahulu sebelum implementasi membuat standar yang tidak terimplementasiImplementasi sebelum standar membuat program menjadi tidak standar

Seperti siapa yang terlebih dahulu Ayam atau telur ? Jawabannya disini adalah jalan kedua-duanya. Ingat ini adalah sebuah standar dengan kepentingan yang sangat besar. Kesalahan konsep pada standar dapat membuat sebuah standar tidak dapat diimplementasikan. Solusinya adalah jalan bersamaan : sedikit demi sedikit dilengkapi dan di test secara reel karena sudah di implementasikan. Dari implementasi ini lah dapat ditarik feedback masukan untuk HTML5.

Bagaimana

Untuk mengetahui bagaimana mengimplementasikan HTML5 silahkan ditunggu posting-posting berikutnya. Yang ingin mengintip secara langsung HTML5 silahkan melihat :

www.html5bydemo.com