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>
<script>
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>
<audio
controls="controls">
<source src="music/FromHere.ogg"
type="audio/ogg">
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>
<video
width="320" height="240" controls="controls">
<source
src="video/movie.ogg" type="video/ogg">
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.
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>
<script>
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>
<audio
controls="controls">
<source src="music/FromHere.ogg"
type="audio/ogg">
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>
<video
width="320" height="240" controls="controls">
<source
src="video/movie.ogg" type="video/ogg">
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.
0 komentar: