HTML5

A. PENGERTIAN HTML5

HTML5 adalah Generasi selanjutnya dari HTML sebelumnya. HTML5 diciptakan dalam pengembangan bahasa HTML untuk memperbaiki konten dan memperbarui teknologi multimedia yang sudah ada pada HTML 4 dan versi sebelumnya agar mudah dijalankan olehbrowser dan mudah dimengerti. HTML5 merupakan kerjasama antara World Wide Web Consortium (W3C) dan Web Hypertext Application Teknologi Working Group (WHATWG).WHATWG bekerja dengan bentuk web dan aplikasi, dan W3C bekerja dengan XHTML 2.0. Pada tahun 2006, mereka memutuskan untuk bekerja sama dan membuat versi baru dariHTML yaitu HTML5.

Struktur HTML5 adalah sebagai berkut :

<!DOCTYPE html>

<html>

<head>

<title>Judul</title>

</head>

<body> Isi dan Konten </body>

</html>

B. Fitur Baru Pada HTML5

Dengan versi terbaru dari HTML ini, pasti juga memiliki beberapa fitur baru yang belum ada pada versi-versi sebelumnya. Berikut fitur-fitur baru yang dimilki HTML5, yaitu:

1) Canvas

Fitur yang satu ini memungkinkan kita untuk memasukkan objek 2D atau 3D kedalam halaman web. Dengan canvas dapat membuat render grafik, diagram, gambar dan animasi secara dinamis. Awal mulanya konsep dari teknologi canvas ini diperkenalkan oleh Apple Inc. untuk digunakan dalam Mac OS X WebKit untuk membuat dashboard widgets. Sebelum canvas muncul, kita hanya bisa membuat gambar dalam browser melalui plug-ins seperti Adobe plug-ins for Flash and Scalable Vector Graphics (SVG), Vector Markup Language (VML) only in Internet Explorer, or other clever JavaScript hacks.

Namun cara kerja canvas tidak bisa bekerja sendiri. Dibutuhkan javascript untuk membuat objek di dalamnya, baik 2D maupun 3D. Saat akan menambahkan elemen canvas ke halaman web Anda, Anda bisa memanipulasinya dengan berbagai macam cara.

Untuk membuat objek di dalam canvas kita dapat mengunakan kode berikut :

<!DOCTYPE html>

<html>

<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #c3c3c3;">Your browser does not support the HTML5 canvas tag.

</canvas>

var c=document.getElementById("myCanvas");

var ctx=c.getContext("2d");

ctx.fillStyle="#FF0000";

ctx.fillRect(0,0,150,75);

</script>

</body>

</html>

Sehingga dapat dihasilkan objek seperti berikut ini:

Pada Mozilla 9.0.1

Pada Google chrome

Pada Opera 12.10 beta RC

2) Doctype baru

HTML lama yang biasanya memiliki Doctype yang panjang, HTML5 datang dengan membawa doctype yang lebih singkat sehingga kita tak perlu menghapal doctype lama yang panjang. Hal ini dapat dibuktikan dengan contoh berikut ini:

Dalam HTML 4 penulisan doctype seperti ini:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"

"http://www.wwe.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Namun dengan HTML5 penulisannya hanya seperti ini

<!DOCTYPE html>

3) HTML5 Audio

Salah satu fitur baru HTML5 yang paling fenomenal adalah disediakannya tag baru yang memungkinkan kita untuk memutar audio sesuai yang kita inginkan tanpa menggunakan plugin tambahan seperti flash player. Dengan menggunakan tag <audio> kita sudah bisa memasukkan file mp3 dan ogg ke dalam halaman web kita.

Untuk menambahkan audio ke dalam web kita, cukup ketikkan kode berikut:

<!DOCTYPE html>

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

Maka hasilnya akan seperti berikut:

Di coba pada Google chrome Versi 22.0.1229.94

Keterangan dari tags diatas:

- <audio>, tag audio utama, digunakan untuk memasukkan audio ke dalam HTML.

- <source>, digunakan untuk mengambil source file yang akan dimainkan audionya.

Atribut pada audio

- Autoplay, atribut ini digunakan untuk member opsi kepada tag audio apakah langsung dimainkan secara otomatis atau tidak.

- Controls, atribut ini memberikan pilihan untuk menampilkan kontrol audio (volume, seeker, play/pause button).

- Type, digunakan untuk mendefinisikan tipe audio yang dimainkan.

- Src, digunakan untuk mendefinisikan source audio yang dimainkan.

Saat ini, ada tiga tipe file audio yang sudah didukung HTML5 yaitu MP3, WAV, dan OGG. Berikut adalah data dukungan browser terhadap audio.

Browser	MP3	Wav	Ogg
Internet Explorer 9	Ya	Tidak	Tidak
Firefox 4.0	Tidak	Ya	Ya
Google Chrome 6	Ya	Ya	Ya
Apple Safari 5	Ya	Ya	Tidak
Opera 10.6	Tidak	Ya	Ya

4) HTML5 Video

Fitur multimedia lainnya yang didukung oleh HTML5 adalah video. Jika selama ini kita harus menggunakan flash player untuk memasukkan konten video, pada HTML5 kita tidak perlu lagi menggunakannya.

Untuk menambahkan elemen video kita gunakan kode berikut

<!DOCTYPE html>

<html>

<body>

Your browser does not support the video tag.

</video>

</body>

</html>

Sehingga didapat hasil seperti berikut:

Di tes pada Google chrome Versi 22.0.1229.94

5) Geolocation

Sebuah API (Aplication Programming Interface) yang menarik, yang memungkinkan pengguna untuk berbagi lokasi mereka dengan aplikasi web. Menggunakan API Geolocation cukup mudah. Cukup meminta sebuah posisi (lokasi) dan jika pengguna menyetujui permintaan tersebut browser akan memberikan informasi lokasi tersebut. Posisi disediakan untuk browser oleh perangkat yang mendasari (misalnya, laptop atau ponsel) di mana Geolocation – enabled pada browser sedang berjalan. Informasi lokasi yang disediakan sebagai satu set koordinat lintang dan bujur bersama dengan metadata tambahan.

6) Media Penyimpanan (Storage)

Dengan HTML5, halaman web dapat menyimpan data secara lokal dalam browser pengguna. Sebelumnya, hal ini dilakukan dengan cookie. Namun, Penyimpanan Web lebih aman dan lebih cepat. Data ini tidak disertakan dengan setiap permintaan server, tetapi digunakan hanya ketika meminta. Hal ini juga memungkinkan untuk menyimpan data dalam jumlah besar, tanpa mempengaruhi kinerja website. Data disimpan dalam kunci / nilai pasangan, dan halaman web hanya dapat mengakses data yang disimpan dengan sendirinya.

Dengan HTML5, web buatan kita dapat menyimpan data secara lokal didalam browser user, sebelumnya hal ini dekerjakan dengan cookies.

Penyimpanan web menjadi lebih aman dan lebih cepat, karena data tidak disertakan dengan setiap permintaan ke server, tetapi hanya ketika meminta data.

Fitur ini juga memungkinkan penyimpanan data dengan jumlah besar, tanpa mempengaruhi kinerja website.

Seperti pada konsep Offline fitur, HTML5 mendukung beberapa jenis media penyimpanan baru yaitu Web Storage (name/value pairs), Indexed DB, dan Web SQL Database. Keuntungan dari adanya berbagai macam media penyimpanan ini adalah peningkatan kecepatan dari aplikasi.

7) Cross Document Messaging

Sampai saat ini, komunikasi antara frame, tab, dan jendela di browser yang berjalan sepenuhnya dibatasi karena masalah keamanan. Dapat berkomunikasi antar frame mungkin berguna untuk situs tertentu untuk berbagi Informasi dari dalam browser, tetapi juga akan membuka kemungkinan untuk serangan berbahaya. Jika browser diberikan kemampuan untuk pemrograman mengakses konten dimuat ke frame lain dan tab, situs akan dapat mencuri informasi apapun yang mereka bisa dapatkan dari konten situs lain yang menggunakan scripting. Contoh klasik adalah "mashup", kombinasi dari aplikasi yang berbeda seperti pemetaan, chatting, dan berita dari berbagai situs, semua dikombinasikan bersama untuk membentuk sebuah meta-aplikasi baru. Di kasus ini, satu set yang terkoordinasi dengan baik dari aplikasi akan dilayani oleh saluran komunikasi langsung dalam browser itu sendiri. Untuk memenuhi kebutuhan ini, vendor browser dan badan standar sepakat untuk memperkenalkan fitur baru: Cross Document Messaging.

8) WebSocket API

Fitur komunikasi yang paling powerfull di spesifikasi HTML5: WebSocket, yang mendefinisikan saluran komunikasi full-duplex yang beroperasi melalui soket tunggal dalam web. WebSocket tidak hanya peningkatan tambahan untuk konvensional HTTP komunikasi, melainkan merupakan kemajuan yang besar, terutama untuk real-time, event-driven aplikasi web.

9) Semantic/Struktur Element Yang Baru

Para web designer yang suka sekali memainkan elemen div, nav, dan lainnya, akan di-stop oleh fitur Semantics dalam HTML5. Semantics akan menjadi masa depan bagi para tetua tag layout dan format. Pastinya web akan menjadi lebih dinamis dan menarik akibat fitur ini. Fitur ini menjadikan web site yang menggunakan teknologi HTML 5 lebih mudah dikenali oleh Google Search Engine. Akibatnya, web aplikasi akan sering muncul pada mesin pencari google sehingga akan lebih sering diakses dan cepat diketahui oleh orang lain.

10) Web Workers

Seringkali ditemukan jika halaman web yang memiliki banyak Javascript yang berakibat pada browser melambat dan komputer nge-hang. Tetapi dengan adanya Web Workers memungkinkan halaman web untuk memproses Javascript yang mereka miliki dengan respon yang lebih cepat dan multitasking.

Dengan semua fitur yang telah disebutkan di atas dapat dilihat bahwa HTML5 akan merajai dunia aplikasi kedepannya. Meskipun belum seluruh web browser mendukung teknologi ini, tetapi kemudahan dalam pengembangan maupun penggunaan diyakini akan menjadi nilai dari teknologi ini.

HTML5 memang belum menjadi standar resmi, dan belum ada browser yang memiliki dukungan HTML5 secara penuh. Namun pada beberapa browser sudah menambahkan HTML5 pada versi terbaru mereka, misalnya (Safari, Chrome, Firefox, Opera, dan Internet Explorer)

C. Kelebihan dan Kelemahan HTML5

1. Kelebihan HTML5

Kelebihan yang paling mencolok dari HTML5 adalah kemudahan akses yang lebih baik. Tag Baru seperti header, footer, nav, section, dll memungkinkan browser untuk mengakses konten dengan lebih mudah. Sebelumnya, kita hanya menentukan hal tersebut dengan tag dan menggunakan atribut id ataupun class. Dengan tag html5 yang baru, browser mampu menjelajah dokumen HTML dengan lebih baik lagi. Selain itu dukungan yang lebih baik terhadap video dan audio. Kelebihan HTML5 yang lainnya antara lain:

v Greater consistency, HTML5 telah melakukan banyak sekali penambahan sintaks yang dibuat dalam struktur lebih baik dan lebih sederhana daripada sintaks-sintaks sebelumnya. Hal ini membuat developer terbantu dalam meningkatkan konsistensi dalam membangun sebuah web.

v Cleaner code, karena sebagian besar kode telah termasuk di dalam sintaks html5, maka kode nampak terlihat lebih sederhana daripada penggabungan antara html, css dan java script.

v Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.

v Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Hal ini berarti bahwa bagian-bagian dari web seperti header, nav, footer dan beberapa bagian lainnya terdefinisi dengan jelas maksud serta tujuannya selain itu juga terbentuk dalam sebuah “machine readible format”.

v Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.

v Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.

v Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.

v Sharper focus on Web Application Requiments, HTML5 membuat sebuah mekanisme yang lebih mudah dalam hal pembuatan front end, aplikasi chat, tools drag and drop, video player, pengolah grafis dan masih banyak lagi.

v Smarter Forms, terdapat semacam reguler expression (regex) yang membuat form mampu mengenali secara lebih baik tentang input, validasi data dan interaksi dengan elemen lain (misal : format email, password dll).

v Dukungan yang lebih baik untuk penyimpanan secara offline

v Unsur kanvas untuk menggambar

v Video dan elemen audio untuk media pemutaran file multimedia

v Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section

v Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search

v Dapat ditulis dalam sintaks HTML (dengan tipe media text/HTML) danXML.

v Integrasi yang lebih baik dengan aplikasi situs dan pemrosesannya.

v Integrasi ('inline') dengan doctype yang lebih sederhana.

v Penulisan kode yang lebih efisien.

v Konten yang ada di situs lebih mudah terindeks oleh search engine.

v HTML5 merupakan perangkat mandiri

v Penanganan kesalahan yang lebih baik

v Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )

v Lebih markup untuk menggantikan scripting

2. Kelemahan HTML5

Seperti halnya teknologi-teknologi lain yang dimana mempunyai banyak kelebihan pasti juga ada kekurangannya. Hal ini pun terjadi pada teknologi HTML5. Kekurangan HTML5 yaitu masih dalam pengembangan, sehingga hanya beberapa browser yang sudah mendukung HTML5, akibatnya fitur-fitur pada HTML 5 tidak semuanya bisa berfungsi dengan baik pada beberapa browser.

3. Implementasi HTML5

Seperti yang telah banyak dijelaskan diatas, HTML5 merupakan salah satu teknologi yang sangat ditunggu-tunggu oleh para web developer maupun para pengguna Internet. Banyak hal yang dijanjikan akan hadir di HTML 5 yang dapat mengubah sebuah website menjadi lebih interaktif serta lebih kaya konten dan fungsinya. Tetapi sayangnya implementasinya masih belum sempurna. Masalah kompatibilitas/pendukung dari browser dan juga belum matangnya HTML 5, telah menjadi sedikit kendala. Walupun begitu, sudah banyak para developer web yang mencoba membuat aplikasi web berbasiskan HTML 5. Berikut 5 contoh website yang sudah mengimplementasikan fitur yang diberikan HTML 5 dengan tepat dan menarik.

1. DeviantART muro

Sebuah aplikasi web “drawing” yang memiliki efek menarik di brush toolnya. DeviantART muro juga mendukung fitur layering serta fitur “save on the fly” yang tentunya menggunakan konsep cloud computing.

2. Bert’s Breakdown

Contoh penggunaan HTML 5 untuk membuat game bisa kita lihat disini. Grafis yang disuguhkan cukup halus di game ini. Bert’s Breakdown mampu menunjukan bagaimana keunggulan HTML 5 di dunia web based game development.

3. Canvas + SoundManager Audio Player dengan Efek Waveform

Pemutar audio berbasis HTML 5 ini cukup menarik. Dengan didukung UI yang mempercantik tampilan player nya, serta implementasi animasi yang cukup rumit, membuat website ini menunjukan kekuatan HTML 5 di segi multimedia. Khususnya untuk konten audio.

4. Pendeteksi Wajah dengan JavaScript melalui HTML5 Canvas

Kita mungkin sudah sering melihat fitur pendeteksi wajah di berbagai aplikasi seperti iPhoto dan juga Picasa. Bahkan Facebook juga sudah mengeluarkan fitur seperti ini. Uniknya face detection ini dibuat dengan hanya memanfaatkan JavaScript + HTML 5 saja.

5. Wikipedia Knowledge Map

Wikipedia Knowledge Map adalah salah satu implementasi dari penggunaan HTML 5 yang cukup unik. Fitur utama yang disuguhkan adalah pembuatan Knowledge Map menggunakan HTML 5, yang menghubungkan artikel-artikel yang ada di Wikipedia.

SYAIFUL BAHRI BENO

Kamis, 09 April 2015

HTML5

0 komentar:

Stats

Category

About Me

Blog Archive

Followers