Ada banyak artikel tentang HTML5, seperti "Apa yang diharapkan dari HTML5?" ” dan “Bagaimana HTML5 akan mengubah web?” dan seterusnya, namun bagi pengembang web, hal utama yang perlu diketahui adalah: Apa yang dapat saya lakukan dengan HTML5 sekarang, dan bagaimana cara mulai menggunakannya? Kabar baiknya adalah sudah banyak hal dalam HTML5 yang tersedia.
Namun, ada satu hal yang harus Anda pahami di awal. Anda perlu mengetahui audiens Anda, jika tidak, sebaiknya Anda tidak menggunakan HTML5. Jika sebagian besar orang yang mengunjungi situs Anda menggunakan IE6, maka sama sekali tidak ada alasan bagi Anda untuk menggunakan HTML5. Di sisi lain, jika pengunjung situs Anda semuanya menggunakan browser seluler, seperti iPhone dan iPad, tunggu apa lagi? Anda bisa memulainya sekarang! Tunggu, ini beberapa panduannya, belum terlambat untuk memulai setelah membacanya.
Fitur HTML5 apa yang dapat Anda gunakan sekarang?
Meskipun standar HTML5 masih berupa rancangan dan masih dibahas di tangan organisasi standar, bagian penting telah diterapkan oleh banyak browser modern. Apple Safari, Google Chrome, Mozilla Firefox, Opera dan Microsoft IE9 semuanya sudah mendukung beberapa fitur HTML5.
Pertama mari kita lihat bagaimana skor setiap browser di situs web HTML5 TEST:
*Apple Safari 5.0: 208
* Google Chrome 5.03: 197
*Microsoft IE7: 12
*Microsoft IE8: 27
*Mozila Firefox 3.66:139
*Opera 10.6:159
Tampak jelas bahwa sebagian besar browser utama yang bukan inti IE memiliki dukungan yang baik untuk HTML5, dan mereka dapat membuat "situs web yang menggunakan draf HTML5" berfungsi dengan sangat baik.
Kembali ke awal, Anda sekarang dapat menggunakan doctype HTML5, tidak ada alasan untuk tidak menggunakannya, Anda bahkan dapat melakukan query dan mengganti di seluruh situs web:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Ketat//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> <html xmlns=”http://www.w3.org/1999/xhtml”> |
menjadi:
<!DOCTYPEhtml> <html> |
Kode berikut terlihat lebih bersih dan lugas, bukan? Jika browser merender halaman web Anda dengan cara yang sesuai standar, mereka akan tetap melakukannya.
Mari kita bicara tentang videonya. Banyak publikasi tentang HTML5 akan menyebutkan pesaing saat ini, totalnya ada empat: Flash, H.264, OGG dan WebM. Semua ini mungkin akan menjadi format standar di masa mendatang, dan tidak ada satu pun yang dapat diputar dengan benar di semua browser di semua platform. Sayangnya, tampaknya sponsor browser belum menyiapkan format publik untuk fitur ini.
Jadi, jelas bahwa tag Video belum mencapai tahap penerapannya. Tapi tunggu dulu, tag video HTML5 seharusnya tidak bergantung pada format. Faktanya, karena sebuah video dapat berisi beberapa tag Sumber, maka cara kerjanya harus seperti ini. Jika browser Anda tidak mendukung opsi pertama, ia akan mencoba opsi kedua, lalu opsi ketiga, keempat, kelima...
HTML untuk menangani situasi seperti ini adalah proyek sumber terbuka yang mendukung video berbasis web tanpa menggunakan skrip dan sniffing browser apa pun dan dapat ditemukan di sini .
Secara semantik, perubahan besar dalam HTML5 adalah tag dengan semantik yang jelas. Perubahan yang dapat Anda lihat adalah situs Anda kini diisi dengan kode seperti ini:
<div id=”header”> <span class=”nav”> |
Dalam HTML5, Anda dapat mengekspresikannya seperti ini:
<tajuk> <nav> |
Apakah semantiknya lebih jelas? Tentu saja kita masih harus menggunakan CSS [Cascading Style Sheets] untuk memformat elemen tersebut. Tapi tunggu dulu, tidak ada versi IE yang mendukung tag ini! Ini adalah masalah besar bagi manusia! Apakah kita benar-benar tidak beruntung? Untungnya, kami punya solusinya: yang perlu Anda lakukan hanyalah menempelkan kode berikut ke tag HEAD halaman Anda:
<!–[jika lt IE 9]> |
HTML5 Shiv adalah proyek sumber terbuka berdasarkan penemuan sederhana: jika Anda membuat elemen DOM di IE, maka Anda dapat menggunakan nama itu dalam gaya. Misalnya saja jika Anda menggunakan
dokumen.createElement(“foo”) |
Buat elemen DOM, lalu Anda dapat menambahkan sejumlah tag foo ke halaman saat ini, dan IE akan memformatnya. HTML5 Shiv berisi beberapa elemen HTML5 yang tidak dapat dikenali oleh IE, dan kemudian membuatnya satu per satu. Dengan cara ini Anda dapat menggunakan tag HTML5 ini, misalnya:
| Artikel, Bagian, Header, Footer, Nav |
Smart Forms, fitur lain yang membuat HTML5 lebih pintar. Jika Anda bosan menulis skrip yang sama setiap saat untuk memeriksa validitas alamat email atau sesuatu seperti nomor telepon, alamat Internet, dll., Anda tidak sendirian! Ada alasan untuk membiarkan browser melakukan semua pekerjaan yang mengganggu ini, bukan? Benar sekali.
Berikut sintaksnya:
| <masukan tipe="email"> <tipe masukan="url"> <masukan tipe = "angka"> <masukan tipe="telp"> |
Apa yang akan dilakukan oleh browser lama tersebut? Bagian yang lebih cerdas: jika mereka melihat atribut TYPE dengan nilai yang tidak mereka kenali, mereka akan merender elemen tersebut dengan nilai default Teks, yang merupakan hasil kompatibilitas mundur yang kami harapkan. Browser yang mendukung HTML5 akan secara otomatis memverifikasi jenis kolom ini, namun sebaiknya Anda tidak membuang skrip sebelumnya, setidaknya sampai IE9 menjadi populer.
Jika Anda bertanya-tanya browser apa yang mendukung tindakan semacam ini yang melakukan lebih dari sekadar validasi, Anda dapat mencoba formulir ini di iPhone Anda. Anda akan melihat bahwa jenis keyboard yang terkait dengan formulir berubah. Terkadang numerik, terkadang alfanumerik dengan tambahan simbol @, dan beberapa bahkan memiliki key.com secara langsung. Yang perlu Anda lakukan hanyalah mengubah nilai atribut type.
Ini juga bisa menjadi sedikit lebih pintar, berikut adalah atribut barunya:
placehoder |
Nilai ini hanya dapat menentukan sepotong teks, efek yang sering Anda lihat di Internet. Teks ini ditampilkan ketika tidak ada nilai. Ketika Anda mengklik, nilainya menjadi kosong, dan kembali ke teks ketika Anda meninggalkannya dulu, Javascript digunakan untuk memprosesnya, tapi sekarang browser akan melakukan ini untuk Anda.
<input type="email" placeholder="Alamat email Anda"> |
Fitur HTML5 apa yang dapat langsung Anda gunakan?
Belum semua elemen HTML5 siap digunakan, karena berbagai alasan (tidak ada satupun yang disingkat IE), dukungan browser akan segera hadir, dan dalam waktu yang tidak lama lagi, Anda akan langsung memiliki dua elemen yang siap digunakan.
Font ajaib, setiap desainer memiliki impian, berharap semua pengunjung situs akan menginstal font yang mereka perlukan saat mendesain. Untuk melakukan ini, dulu ada berbagai metode, termasuk gambar, Flash, dll., tetapi sekarang, mereka miliki hak ini, dan Anda dapat memaksa pengunjung Anda untuk memasang font yang Anda tentukan. Inilah yang didukung CSS3: atribut @font-face. Firefox versi sebelum 3.5 dan Safari versi seluler (sebelum iOS 4) tidak mendukung atribut ini. Jika situs Anda memiliki banyak kunjungan serupa, Anda mungkin harus menunggu.
Apapun itu, tidak ada alasan nyata bagi semua browser untuk menggunakan font yang sama. Jika Anda ingin menyediakan font khusus untuk browser yang mendukung atribut ini, dan kemudian memberikan font alternatif untuk browser yang tidak mendukung atribut ini, ini juga merupakan solusi yang baik. fontface/generator adalah tempat yang bagus untuk dikunjungi.
Bayangan dan sudut membulat adalah hal yang membuat banyak desainer senang. Bayangan teks, bayangan blok, sudut membulat, dll. kini menjadi standar yang didukung oleh CSS3. Sekali lagi, jika Anda tidak ingin mengukur rendering di browser yang berbeda berdasarkan kesempurnaan piksel, Anda dapat mulai menggunakan fitur ini sekarang. Generator CSS3 akan membantu Anda melakukan ini.
Sudut membulat (Firefox 3+, Safari 3.1+, Opera 10.5+, Chrome 4+, IE 9+) |
-radius-perbatasan-webkit: 10 piksel; |
Bayangan teks (Firefox 3.5+, Safari 1.1+, Opera 9.6+, Chrome 4+) |
bayangan teks: 5px 5px 3px #CCC; |
Blokir Bayangan (Firefox 3.5+, Safari 3+, Opera 10.5+, Chrome 4+): |
-webkit-kotak-bayangan: 10px 10px 5px #666; |
Fitur apa yang mungkin Anda gunakan suatu saat nanti?
Katalog ini berisi fitur-fitur yang telah dipikirkan oleh pengembang dan desainer selama bertahun-tahun. Sayangnya, mungkin diperlukan beberapa tahun lagi sebelum dapat digunakan di dunia nyata.
Bentuk cerdas telah disebutkan sebelumnya, namun sebenarnya masih banyak lagi elemen berguna yang belum disebutkan, namun sebelum dukungan yang lebih luas, tidak ada cara untuk menggunakannya.
Pemilih geser:
<masukan tipe='rentang' min=0' max='100' langkah='2' nilai='50'> |
Pemilih warna:
| <tipe masukan="warna"> |
Pemilih tanggal:
| <masukan tipe="tanggal"> |
Kotak masukan dengan validasi reguler:
| <input type="text" pattern="[0-9]{13,16}"> |
Kotak masukan yang diperlukan:
<input type="teks" diperlukan> |
Tak satu pun dari tag ini memiliki dukungan lintas browser atau lintas platform, tetapi ketika saatnya tiba, Anda pasti akan bersemangat untuk menggunakan tag ini.
Tata letak tercetak, fitur CSS3 lainnya, masih membutuhkan waktu bertahun-tahun untuk diterapkan sepenuhnya. Memberi desainer fitur tata letak multi-kolom. Saat ini hanya dapat diterapkan pada uji kasus Firefox dan Safari.
| -moz-kolom-hitungan: 3; -moz-kolom-celah: 20px; -jumlah-kolom-webkit: 3; -celah-kolom-webkit: 20px; |
Deteksi geolokasi, dengan berkembangnya layanan berbasis lokasi seperti Gowalla dan Foursquare, berguna bagi browser untuk mengetahui keberadaan pengguna. Maka tidak heran jika browser seluler berbasis ponsel menjadi yang pertama mengimplementasikan fitur ini. Firefxo 3.5 dan Safari 5 sudah mulai memberikan dukungan geolokasi. (Layanan serupa Chrome diimplementasikan melalui Gears, namun secara bertahap berpindah ke HTML5).
Bekerja secara offline dan menyimpan secara lokal. Menyimpan data di cloud adalah ide bagus ketika Anda tidak menyadari bahwa Anda tidak memiliki koneksi internet; atau Anda memiliki aplikasi yang perlu memproses data dalam jumlah besar dan harus sering dijalankan di server. Komunikasi dengan klien lebih mudah dari yang Anda kira Seperti Anda mendapatkan lebih banyak; atau mungkin data seluler Anda terbatas dan Anda ingin menyimpan lebih banyak data di ponsel Anda untuk menghindari terlalu banyak kehilangan data. Jawabannya saat ini adalah menggunakan penyimpanan lokal untuk membuat aplikasi berfungsi secara offline ke cloud saat terhubung.
Browser yang mendukung fitur ini adalah: Firefox 3.5+, Safari Mobile 3.1+, Safari 4+, Chrome 4+.
Artboard, animasi, dan efek transformasi, salah satu janji HTML5 dapat dicapai dengan menggunakan elemen Canvas dan beberapa properti CSS3 untuk mencapai situs web yang sepenuhnya diilustrasikan dan dianimasikan sepenuhnya. Ini dari standar per 12 Juli 2010.
Hijau = Tercapai, Merah = Tidak direncanakan
Pintasan ke HTML5 mutakhir
Jika Anda tidak sabar menunggu IE8 mati, ada banyak cara untuk melewatinya dan melanjutkan - sekali lagi, semuanya tergantung pengunjung Anda. Lihatlah log akses situs Anda untuk melihat header browser apa yang paling banyak dikunjungi. Salah satu cara untuk melakukannya adalah, misalnya, menggunakan Chrome Frame Google untuk menyematkan instance Chrome ke IE. Jika Anda memahami bahwa pengunjung situs Anda mungkin telah menginstal GCF [Google Chrome Frame], maka Anda dapat menambahkannya ke HEAD Anda. Tag META pada baris sebelumnya memaksa IE menggunakan GCF untuk menampilkan situs web Anda:
| <meta http-equiv="Kompatibel dengan X-UA" content="chrome=1"> |
[Editor: Namun saya ingin mengingatkan Anda bahwa melakukan ini akan membatalkan mode kompatibilitas IE7 asli dari IE=7. ]
Ditambah dengan skrip pendek yang disediakan oleh Google, yang memungkinkan pengguna yang belum menginstal GCF untuk melompat ke halaman instalasi GCF, Anda mungkin dapat melewati batasan IE. [Editor: Saya gila, sepertinya iklan gratis GCF mendatangkan traffic gratis...]
Elemen yang tercantum dalam artikel ini hanyalah sebagian kecil dari draf HTML5 dan CSS3 saat ini. Jika Anda harus menggunakan beberapa fitur baru, Anda perlu memeriksa proyek sumber terbuka yang ada sehingga Anda dapat menelusuri masalah kompatibilitas Server diminimalkan. .
Saat memberitakan HTML, banyak media yang fokus pada pendiriannya, seperti "tidak sampai 2022" dan "Flash killer". Kenyataannya adalah bahwa HTML5 adalah peningkatan yang benar-benar baru dan telah lama ditunggu-tunggu dari HTML4 yang sudah lama tertunda - sehingga Anda dapat mulai menggunakannya sekarang.