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 oleh browser 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 dari
HTML yaitu HTML5.
Struktur HTML5 adalah sebagai
berkut :
<!DOCTYPE
html>
<html>
<head>
<title>Judul</title>
</head>
<body>
Isi dan Konten </body>
</html>
Kelebihan dan Kekurangan HTML5
Kelebihan :
- 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.
- 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.
- Improve Semantics, dengan berbagai elemen kode di dalam html5 yang telah distandarisasi, maka nilai semantik dari sebuah web dapat lebih ditingkatkan. Itu 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”
- Improved Accessibility, dengan teknologi HTML5 yang memudahkan struktur pembangunan sebuah web, maka developer dapat membangun pemahaman yang lebih detil mengenaik halaman web.
- Client-side Database, HTML5 menyediakan model database SQL yang baru dengan API yang dapat dibangun dalam konsep lokal, dalam hal ini di sisi client.
- Geolocation, HTML5 mempunyai API yang terintegrasi terhadap geolocation, fasilitas tersebut dapat diakses melalui GPS atau fasilitas lain seperti Google Latitude pada iphone.
- Offline Aplication Cache, pengguna dapat terus melakukan interaksi dengan aplikasi meskipun mereka terputus dari jaringan internet.
- 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)
- 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.
Kekurangan :
- Kekurangan utama yang dimiliki oleh HTML5 ini adalah versi ini hanya support untuk browser modern/terbaru
- Karena bahasa HTML5 ini masih dalam perkembangan, jadi beberapa elemen yang ada bisa saja berubah
- Fitur keamanan yang ditawarkan HTML5 masih terbatas
JENIS - JENIS FRAMEWORK HTML 5 :
1.
ImpactJS adalah engine
HTML5 yang berbayar. Cukup mahal memang biaya yang harus dikeluarkan untuk
menggunakan engine ini, yaitu sebesar $99. Impactjs sendiri fokus bagi
pengembangan aplikasi game 2D. ImpactJS juga bekerja sama dengan AppMobi XDK untuk
memudahkan para pengembang dalam urusan environment pengembangan.
ImpactJS juga memiliki fitur multiplayer. Berikut adalah beberapa demo
aplikasi game yang dibuat menggunakan ImpactJS : Biolab Disaster,
Z-Type ,
Creatures
and Castles, Steamclash dan Private Joe
2.
Construct 2 hadir dengan tagline
nya yaitu “Drag and drop game maker“. Saya rasa Construct 2 ini cukup
cocok bagi para pemula yang ingin belajar membuat game dalam HTML5.
Proses yang mudah dan sangat simpel, memungkinkan pengembangan game
HTML5 yang simpel dapat dikerjakan dalam waktu yang cepat. Constuct 2 ini juga
cocok untuk digunakan dalam membuat game HTML5 di Facebook. Kabar
bagusnya Consturct 2 memiliki versi gratis.
3.
RPG JS fokus untuk
pengembangan game HTML5 bergenre RPG. Fitur fitur seperti interaction event,
save/load, action event, dan lain sebaginya, cukup dibantu jika
anda menggunakan RPG JS. RPG JS ini jika digabungkan pengunaannya dengan RPG
Creator, maka pengembang game dapat membuat MMOPRG game berbasis
HTML5 dengan lebih mudah.
4.
Limejs
adalah framework HTML5 yang memiliki keunggulan di perangkat layar
sentuh. Mereka fokus untuk membantu para pengembang memaksimalkan layar sentuh
untuk sebuah game. Limejs sendiri saat ini tersedia gratis. Berikut
adalah beberapa contoh dari game HTML5 yang dibuat menggunakan limeJS : Roundball dan Zlizer.
5.
Crafty menawarkan kemudahan
bagi para pengembang game HTML5 dalam urusan animasi. Crafty juga
memberikan kemudahan untuk diimplementasikan di perangkat layar sentuh seperti
iPad, Android tablet, hingga BlackBerry Playbook. Sampai saat ini Crafty masih
tersedia gratis dan masih terus dalam tahap pengembangan. Berikut beberapa
contoh game HTML5 menggunakan Crafty : Cron dan Code Commander.
Aplikasi framework yang menggunakan HTML5 :
1. Twitter Bootstrap
Bootstrap adalah populer, pengembangan kerangka
front-end/UI modern. Ini fitur penuh dan akan memiliki sebagian besar hal-hal
yang Anda perlukan untuk mengembangkan situs responsif dan aplikasi.
Bootstrap memiliki tata letak yang responsif 12-grid, 13 plugin jQuery kustom untuk UIS umum seperti komidi putar dan modal windows, customizer Bootstrap, dan banyak lagi.
Bootstrap terdokumentasi dengan baik, dan ini proyek open source memiliki banyak liputan di blog dan situs tutorial.
Bootstrap memiliki tata letak yang responsif 12-grid, 13 plugin jQuery kustom untuk UIS umum seperti komidi putar dan modal windows, customizer Bootstrap, dan banyak lagi.
Bootstrap terdokumentasi dengan baik, dan ini proyek open source memiliki banyak liputan di blog dan situs tutorial.
2. Foundation
Yayasan populer kerangka front-end lain responsif. Dengan
kerangka HTML5 modern, Anda bisa mendekati desain web baik mobile pertama, atau
dari layar yang besar ke ukuran mobile.
Ini memiliki kemampuan cepat-prototyping, sistem grid responsif dan banyak lagi.
Yayasan adalah dengan ZURB, sebuah perusahaan desainer produk difokuskan pada penyediaan solusi berbasis web.
Ini memiliki kemampuan cepat-prototyping, sistem grid responsif dan banyak lagi.
Yayasan adalah dengan ZURB, sebuah perusahaan desainer produk difokuskan pada penyediaan solusi berbasis web.
3. Skeleton
Skeleton adalah responsif boilerplate CSS sederhana dan
bersih untuk HTML5 website dan aplikasi. Itu punya hanya hal yang Anda
butuhkan, dan tidak lebih.
Beberapa fitur utama: a grid layout responsif, pertanyaan media standar untuk perangkat-spesifik gaya properti CSS, kelas CSS untuk elemen gambar responsif yang skala dengan grid layout, template PSD untuk mengejek desain web Anda, dan HTML5 belati untuk old web browser.
Beberapa fitur utama: a grid layout responsif, pertanyaan media standar untuk perangkat-spesifik gaya properti CSS, kelas CSS untuk elemen gambar responsif yang skala dengan grid layout, template PSD untuk mengejek desain web Anda, dan HTML5 belati untuk old web browser.
4. HTML
Boilerplate
Pada tahun 2010, HTML5 Boilerplate menjadi salah satu
yang pertama, dan front-end kemudian, paling populer alat pengembangan web open
source untuk mendapatkan HTML5 website dan aplikasi web dan berjalan dalam
waktu singkat. Ini adalah solusi pengembangan web kompilasi yang memungkinkan
situs kami untuk mendukung web browser modern.
Termasuk dalam HTML5 Boilerplate adalah HTML template seluler-anak, ikon placeholder, CSS reset untuk normalisasi / standarisasi nilai properti stylesheet Anda, pertanyaan media standar untuk layar populer melihat, sebuah belati HTML5 untuk web browser non-modern
Termasuk dalam HTML5 Boilerplate adalah HTML template seluler-anak, ikon placeholder, CSS reset untuk normalisasi / standarisasi nilai properti stylesheet Anda, pertanyaan media standar untuk layar populer melihat, sebuah belati HTML5 untuk web browser non-modern
5. HTML kickstar
Salah satu anak terbaru di blok, HTML5 Kickstart adalah
paket ramping dan rata-rata HTML, CSS, dan file JavaScript yang menjanjikan
untuk menyelamatkan pengembang UI jam kerja.
Pada sekitar 300KB, HTML Kickstart paket cukup pukulan: komponen UI seperti tombol bergaya dan bar navigasi, ikon scalable (menggunakan Font mengagumkan), tata letak jaringan responsif, slideshow komponen sentuhan-enabled dan sebagainya.
Pada sekitar 300KB, HTML Kickstart paket cukup pukulan: komponen UI seperti tombol bergaya dan bar navigasi, ikon scalable (menggunakan Font mengagumkan), tata letak jaringan responsif, slideshow komponen sentuhan-enabled dan sebagainya.
6. Montage HTML
framework
Montage adalah kerangka HTML5 open source untuk membangun
aplikasi modern. JavaScript perpustakaan ini menggunakan mengikat deklaratif
yang dengan mudah membantu Anda menyimpan data aplikasi Anda dan UI di sync.
Montase juga memiliki fitur yang disebut Blueprints untuk metadata associatively mengikat ke objek app - fungsi yang cukup bagus untuk menangani dengan banyak elemen halaman dinamis.
Montase juga memiliki fitur yang disebut Blueprints untuk metadata associatively mengikat ke objek app - fungsi yang cukup bagus untuk menangani dengan banyak elemen halaman dinamis.
7. Sproutcore
SproutCore adalah kerangka front-end untuk membangun
aplikasi HTML5 cepat.
Ini mengikuti pola arsitektur MVC dan menjanjikan penggunanya kemampuan untuk kerajinan pengalaman pengguna asli seperti untuk Web.
Ini mengikuti pola arsitektur MVC dan menjanjikan penggunanya kemampuan untuk kerajinan pengalaman pengguna asli seperti untuk Web.
Zebra
Zebra adalah UI framework open source yang kaya yang
memanfaatkan HTML5 kanvas sebagai tulang punggung kemampuan render.
Zebra mengatakan bahwa menggunakannya "bukan ilmu roket" dan bahwa Anda bisa memulai dalam 5 menit.
Zebra mengatakan bahwa menggunakannya "bukan ilmu roket" dan bahwa Anda bisa memulai dalam 5 menit.
9. Createjs
CreateJS adalah suite perpustakaan JavaScript open source
dan alat untuk membuat kaya, konten interaktif HTML5. Ini terdiri dari 5
perpustakaan JavaScript modular. Ini akan membantu Anda dengan menerapkan efek
animasi, mendukung HTML5 audio dalam situs Anda, dan banyak lagi.
1 Less Framework
Kurang Framework adalah kerangka front-end
yang modern untuk membangun desain responsif. Mirip dengan Skeleton (dibahas di
atas), Kurang Kerangka berfokus pada menjadi hanya kerangka grid layout polos
dan sederhana.
Ini memiliki 4 layout pre-built: Default, Tablet, Handphone dan Luas Mobile.
Ini memiliki 4 layout pre-built: Default, Tablet, Handphone dan Luas Mobile.
