HTML 5 & CSS

Salah satu bentuk revolusi dari versi terbaru iznyndotcom adalah penggunaan HTML 5 dan CSS 3.0. Dua standard teknologi web yang sampai saat artikel ini ditulis masih dalam bentuk draft dan terus dikembangkan oleh W3C dan sangat ditunggu kehadirannya oleh web designer diseluruh dunia.

Karena belum berbentuk rekomendasi, maka HTML 5 dan CSS 3.0 masih cukup minim penggunaannya dan dukungan dari browser juga masih rendah. Sebagai contoh untuk dapat memasukkan attribute CSS ke dalam HTML 5, kita sebelumnya masih harus memperjelas level blok dari element tersebut dengan menggunakan attribute CSS display.

Contoh lainnya adalah di dalam penggunaan CSS 3.0. Untuk dapat menggunakan attribute baru dalam CSS 3.0 kita masih harus menggunakan attribute tambahan yang dikembangkan oelh browser. Sehingga ketersediaan style akan sangat tergantung pada dukungan browser yang menampilkan halaman dengan attribute CSS 3.0.

Walapun dengan segala kekurangan diatas, namun kita tetap harus membuat sebuah persiapan karena suatu saat nanti pasti akan mengunakan kedua standard ini. Inilah alasan utama penggunaan HTML 5 dan CSS 3.0 dalam website ini. Di sisi lain, ada harapan bahwa dengan adanya penggunaan HTML 5 dan CSS 3.0 dapat memberikan kesempatan kepada kami untuk berpartisipasi dalam perkembangan kedua standard tersebut.

Penggunaan HTML 5

Dalam mengembangkan website ini kami mencoba untuk menerapkan hampir seluruh tag HTML baru seperti header, footer, article, hgroup, time, aside, nav. Selain berdasarkan standard yang dikembangkan oleh W3C, penerapan HTML 5 banyak terbantu oleh beberapa tutorial dari website seperti alistapart dan html5doctor.

Salah satu contoh penggunaan HTML 5 pada website ini adalah di dalam data post. Kami menyusun setiap post dengan struktur HTML sebagai berikut :

<article>
  <header>
    <h1>Title Here</h1>
    <p>
      <time pubdate datetime="machine date">Post date</time>
    </p>
  </header>
  <div>
    Content Here ....
  </div>
  <div id="entry-metadata">
    <section>
      Category List
    </section>
    <section>
      Tag List
    </section>
  </div>
  <section id="entry-related">
    Related Post
  </section>
</article>

Artikel ini tidak akan membahas teknis dari penggunaan HTML 5 secara mendetail, namun disini kami akan menjelaskan sedikit tentang struktur HTML diatas. Satu hal yang dapat disimpulkan setelah menggunakan HTML 5 adalah bahwa adanya tag baru tersebut memberikan kita peluang yang lebih luas dalam mendeskripsikan content. Sebelumnya content hanya dapat dideskripisikan sebagai paragraph, title dan beberapa konteks lain melalui tag inline seperti emphasis, abbreative dsb.

Dengan HTML 5, kita dapat menambahkan arti dari suatu content sebagai header, footer ataupun memecah content menjadi beberapa bab. Namun semua manfaat ini tidak akan kita dapatkan apabila tidak memiliki pemahaman yang kuat terhadap fungsi dari setiap tag. Di sisi lain kurangnya pemahaman dari setiap fungsi tag dapat menyulitkan kita dalam membuat keputusan terhadap pembentukan konteks dari content.

Ada satu kenyataan lain berkaitan dengan penggunaan HTML 5 yaitu kembalinya fungsi tag div sebagai kontainer murni yang tidak memberikan arti apapun terhadap content yang dikandungnya. Penggunaan div lebih sebagai pengait di dalam CSS dan Javascript.

Microformat

Inilah salah satu yang sedikit membingungkan dalam pembentukan HTML 5. Microformat pada dasarnya digunakan untuk menambahkan informasi sematic ke sebuah halaman web menggunakan HTML classes. Ia muncul sebagai akibat kurang mampunya tag HTML dalam menyediakan fungsi tersebut. Dengan semakin banyaknya tag baru yang dapat mengartikan content dalam berbagai konteks, masih bergunakah Microformat di dalam HTML 5 ?

Memang benar beberapa microformat dapat digantikan dengan tag HTML 5, sebagai contoh Microformat datetime-design-pattern dapat diganti dengan element time. Namun demikian selama stadard HTML 5 belum diterapkan secara luas maka microformat masih sangat diperlukan. Cara yang paling bijaksana adalah mencampur keduanya sampai ada standard yang pasti dan pengunaan yang luas dari HTML 5.

Secara prinsip Penambahan Microformat dalam HTML 5 (seperti yang diterapkan pada website ini) adalah sesuatu yang legal karena penambahan micordata dilakukan melalui HTML class tanpa terpengaruh oleh jenis tag yang digunakan. Terlebih lagi jika microdata HTML 5 kurang dapat memenuhi keinginan kita, maka microformat masih tetap diperlukan.

Penggunaan CSS 3.0

Penggunaan CSS 3.0 pada website ini masih belum terlalu signifikan. Hanya beberapa attribute yang kami gunakan untuk memperkuat style dokumen. Attribute tersebut antara lain font-face, text-shadow dan border-radius.

Namun karena attribute ini masih belum disupport oleh semua browser maka efeknya tidak akan dirasakan pada beberapa browser. Saya merekomendasikan untuk menggunakan firefox untuk mendapatkan hasil maksimal dari website ini.

Penutup

Pada dasarnya artikel ini bukan menjelaskan teknis penggunaan HTML 5 maupun CSS 3 namun lebih untuk memperkenalkan penggunaan dua stadard ini di dalam struktur website.

Terakhir, karena masih bersifat percobaan, maka kami sangat mengharapkan kritik dan saran terhadap penggunaan HTML 5 dan CSS 3 ini demi kemajuan bersama.

Advertisements
Post a comment or leave a trackback: Trackback URL.

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

%d bloggers like this: