HTML 5, Sebuah Upgrade & Perbaikan

Disini saya akan bercerita sedikit tentang bahasa (dlm web programing) yg sering kita gunakan dalam web development, yang kini sudah diperbarui atau dalam kata lain upgrade.

HTML 5, yah bahasa ini akan menjadi sebuah bahasa baru, upgrade & perbaikan dari generasi bahasa web sebelumya. Tentuya HTML 5 akan banyak mengalami upgrade pada spesifikasi web presentation, dan tidak menutup kemungkinan kalau bahasa ini juga akan menjadi pengganti game untuk web application developmet, walaupun sebelumnya sudah mendukung sistem plug-in-dengan Internet application (RIA) yang kaya akan teknologi seperti Adobe Flash, Microsoft Silverlight, dan Sun JavaFX.

World Wide Web Consortium (W3C) baru baru ini membuat proposal mengenai spesifikasi HTML 5 hal ini dipicu dari pengembangan akan aplikasi web yang terus berkembang sesuatu yang tidak dapat di penuhi oleh HTML pada masa saat ini. Dengan kata lain HTML 5 nantinya akan menghilangkan gap antara Flash, Silverlight, dan JavaFX yang sedang mengisi pangsa pasar web application. HTML 5 ini dipublikasikan oleh HTML Working Group di tanggal 23 April 2010, yang membebaskan developer ketika akan menulis aplikasi untuk system operasi yang spesifik. Sumber: http://hendynoize.net

Sebagaimana yang kami ketahui InfoWorld Test Center telah melakukan penelitian mengenai teknologi baru pada Microsoft Silverlight 3 dan Adobe Flex 4, Flash 4, dan juga Catalyst rich Internet application. HTML 5 juga nantinya akan menyandang posisi yang sama misalnya nantinya spesifikasi HTML 5 mampu mendongkrak kemampuan web untuk menangani video dan graphic di Web. Teknologi HTML 5 yang disebut sebut dengan Canvas, digunakan untuk 2-D drawing pada sebuah Web page akan menjadi andalan bagi pengguna web yang suka mendesain web kelas berat hal ini telah di coba oleh Apple, Google, dan Mozilla. “Beberapa fitur dari HTML 5 seperti Canvas, local storage, dan Web Worker akan mengizinkan kita untuk melakukan hal yang lebih banyak melalui browser” ungkap Ben Galbraith, yang merupakan co-founder dari Ajaxian Web site dan co-director dari developer tools di Mozilla. Local storage akan mengizinkan anda untuk bekerja dengan menggunakan walaupun koneksi internet anda ngedrop anda masih dapat bekerja, ini akibat dari the “next generation” applications yang mampu menjalankan task lewat background, ungkapnya.

Web applications tentu saja akan lebih menarik, kata Ian Fette, project manager dari Google untuk Chrome browser: “Web application akan bekerja lebih cepat dan akan memberikan user experience yang lebih baik dan menghilangkan batasan antara online apps dan desktop apps”. http://hendynoize.net

Kelebihan HTML 5:

• Dapat ditulis dalam sintaks HTML (dengan tipe media teks/html) dan XML.

• Integrasi yang lebih baik dengan aplikasi web dan pemrosesannya.

• Integrasi (’inline’) MathML dan SVG dengan doctype yang lebih sederhana.

• Penulisan kode yang lebih efisien.

• Dapat dimengerti oleh peramban lawas (backwards compatible). Sehingga istilah ‘deprecated’ tidak akan diperlukan lagi.

Elemen Baru di HTML 5:

Demi mewujudkan struktur halaman web yang lebih baik semantik dan aksesibilitasnya, dikenalkanlah beberapa elemen baru, diantaranya:

• section serupa seperti h1-h6.

• article bisa berupa entri blog atau tulisan konten.

• aside menyajikan konten pelengkap.

• header bisa menyajikan judul, deskripsi, bahkan nav untuk navigasi.

• footer berisi catatan kaki seperti informasi hak cipta, penulis, kontak, dan sebagainya.

• Dialog yang dikombinasikan dengan dt dan dd (seperti pada halaman FAQ) dapat digunakan untuk menyajikan percakapan.

• yang fenomenal adalah penggunaan elemen figure, video, audio, source, embed, canvas dan elemen terkait berkas multimedia lainnya.

Dikenalkan pula beberapa atribut baru, seperti:

• atribut media, ping pada elemen pranala,

• autofocus, placeholder, required, autocomplete dan sebagainya, terkait elemen input dan form

• reversed pada elemen ol untuk urutan besar ke kecil.

Ada beberapa elemen yang berubah makna, diantaranya:

• Elemen b dilegalkan sebagai tipografi penegas, seperti pada kata kunci yang ingin ditonjolkan, tidak ‘deprecated’ (bukan fitur yang dianggap usang). Tidak lebih dari itu. Jadi tetap tidak bermakna semantik tertentu. Hal yang sama berlaku pula untuk elemen i.

• Elemen strong menegaskan level kepentingan, bukan sekadar penekanan emphasis lagi.

• Elemen hr dapat digunakan untuk memisahkan level paragraf sesuai pokok pikirannya.

Berikut ini beberapa elemen dan atribut yang tidak lagi muncul pada HTML 5:

• center,

• font

• strike, u, big

• frame, frameset, noframes

• acronym

• longdesc

• scope pada td

Sebagai gambaran saya punya kode HTML yang akan kita ubah dengan HTML5. Contohnya seperti berikut. Ketika saya ingin membuat sebuah template biasanya saya akan membuat struktur seperti ini

<script type="text/javascript" src="http://cruzenaldo.com/jquery.js"></script></pre>
<h1>Welcome To My <a title="Blog" href="http://budiridwin.web.id/home/category/blog-2/">Blog</a></h1>
<pre>
Bagian Artikel

sekarang lihat pada baris awal

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
    "http://www.w3.org/TR/html4/strict.dtd">

pada html5 tidak perlu lagi mengetik panjang-panjang, dengan html5dapat di persingkat atau di perbaharui seperti ini

<!DOCTYPE html>

Simple kan? sekarang lihat bagian berikut…

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />

Kita bisa menggantinya dengan kode berikut.

<meta charset="utf-8" />

Kemudian pada bagian style, kita sudah gak membutuhkan lagi type=”text/css” nya untuk HTML5 jadi ubah saja menjadi seperti berikut.

<style>
        * { margin:0px; padding:0px;}
</style>

Tentunya hal tersebut juga berlaku pada tag script…

<script type="text/javascript" src="http://html5.com/jquery.js"></script>

Nah sekarang tinggal kita lakukan penambahan–penambahan saja misalkan kita tambahkan tag HEADER, NAV, ASIDE, dan FOOTER.

Penjelasan sedikit:

• HEADER biasanya digunakan untuk logo atau judul web kita.
• NAV digunakan untuk menu utama, berbeda dengan menu yang ada di sidebar dan NAV ini biasanya digunakan di dalam tag HEADER.
• ASIDE untuk bagian sidebar
• FOOTER untuk bagian bawah tempat Copyright, dll. Dan jadinya seperti berikut.

<script type="text/javascript" src="http://html5.com/jquery.js"></script>
<header>

<h1>Welcome To My <a title="Blog" href="http://budiridwin.web.id/home/category/blog-2/">Blog</a></h1>

Bagian Artikel

	<li><a href="#">Home</a></li>
</header>
<header>
	<li><a href="http://budiridwin.web.id/home/contact/">Contact</a><a href="#"> Me</a></li>
</header>
<header><nav>
 </nav> </header>

<aside>

<h2>Kategori</h2>

	<li><a href="#">Menu 1</a></li>
</aside>
<aside>
	<li><a href="#">Menu 2</a></li>
</aside>
<aside>
 </aside>

<footer>Copyright by Gue Keren Banget™</footer>

Nah sekarang pertanyaannya adalah TIDAK SEMUA browser bisa mengerti arti dari tag – tag tersebut (Apalagi Internet Explorer) atau gak semua browser tau cara menghandle element atau tag – tag tersebut. Ada beberapa cara yang bisa kita gunakan yaitu… Tips dan triknya: Kita menggunakan CSS untuk membuat display dari setiap elementnya Block. Contoh kodenya sebagai berikut.

<style>
header, nav, aside, footer{
display: block;
}
</style>

Jadi kita tuliskan terlebih dahulu tag – tag HTML5 apa saja yang kita gunakan. Nah kadang IE pun gak bisa menghandlenya walaupun kita sudah menggunakan teknik diatas… Sekarang coba kita gunakan tehnik berikut.

<script type="text/javascript">// <![CDATA[
document.createElement('header','nav','aside','footer');
// ]]></script>

Kedua cara diatas memang agak sedikit ribet, nah cara terakhir yang paling gampang adalah seperti berikut.

<script type="text/javascript" src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>

Jadi script tersebut akan menghandle semuanya jadi kalian gak perlu menggunakan kedua tehnik sebelumnya… Oke mungkin tutorial ini membantu kalian. Berikut adalah beberapa Resources yang bisa kalian gunakan untuk mempelajari tehnik – tehnik dasar HTML5. Sumber: http://budiridwin.web.id

Jadi bagi anda para web developer, programmer, bersiap siaplah untuk mengupgrade pengetahuan anda karena pemrograman HTML akan ber evolusi di waktu dekat ini. Tentu saja, kehadiran HTML 5 ini menimbulkan ketakutan bagi para developer flash, silverlight dan JavaFX, karena sebagian fitur utama yang mereka miliki telah sanggup di adopsi oleh HTML 5.