Sekarang Anda menyadari bahwa teknologi yang dibawa dengan HTML5, mari kita melihat beberapa perubahan individual core.
DOCTYPE
Doctype memberitahukan browser bagaimana harus mengurai dokumen Anda, maka dari itu ini merupakan bagian penting dari dokumen dan harus dimasukkan ke dalam baris pertama dokumen HTML Anda. Doctype sebelumnya tidak hanya mendefinisikan dokumen sebagai HTML4, tetapi juga memberikan URL ke dokumen spesifikas, seperti ditampilkan berikut :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Doctype HTML5 baru jauh lebih sederhana, dan Anda tidak perlu lagi menentukan versi HTML, atau spesifikasi dokumen, seperti ditunjukkan dalam contoh berikut:
<!DOCTYPE html>
Alasan untuk perubahan adalah bahwa HTML hidup dalam dalam spesifikasi dimana browser akan terus bagian baru dari spesifikasi dimana mereka melalui proses standarisasi. Idenya adalah bahwa di masa depan fitur fitur baru dapat ditambahkan tanpa perlu perubahan lebih lanjut untuk doctype.
New Semantic HTML Tags
Ketika Anda pertama kali membuka dokumen HTML5, hal pertama yang Anda perhatikan adalah bahwa ada banyak tag semantic yang digunakan di seluruh dokumen, dan yang paling menonjol adalah:
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<div class="content">
</div>
<footer>
</footer>
</body>
</html>
New Meta Tags
Selain tag semantik yang baru adalah bahwa HMTL5 juga memperkenalkan beberapa meta tag baru:
Viewport Meta Tag
Yang paling penting dari meta tag baru adalah viewport meta tag. Meta tag ini awalnya diperkenalkan oleh Mobile Safari dan digunakan sebagai cara untuk memungkinkan developer untuk mendefinisikan lebar dan skala dari viewport. Ketika digunakan secara tidak benar, viewport meta tag dapat menyebabkan pengalaman yang tidak enak bagi pengguna.
Isi dari meta tag viewport terdiri dari sebuah daftar comma-separated dari key value yang berpasangan, value yang digunakan adalah:
<meta name="viewport" content="width=1024, initial-scale=1">
Untuk Desain Responsif, Anda ingin lebar viewport untuk menjadi sama dengan lebar dari perangkat yang Anda gunakan, Hal ini karena dua alasan utama ; pertama, Anda akan membangun CSS Anda untuk menargetkan lebar viewport sehingga Anda ingin lebar viewport agar sesuai dengan lebar perangkat. Kedua, ia memberitahu perangkat bahwa situs mobile optimized, dan karena itu tidak perlu meload halaman dengan viewport default besar zoomed out.
Untuk membuat viewport sama dengan lebar dari perangkat yang Anda gunakan, Anda menetapkan nilai dari lebar viewport ke device-width bukan menentukan ukuran tertentu. Anda juga ingin situs Anda untuk memulai dengan tingkat zoom standar, sehingga Anda memiliki untuk mengeset initial-scale 1, seperti yang ditunjukkan contoh berikut:
<meta name="viewport" content="width=device-width, initial-scale=1">
Web Forms
Input form fields telah diupgrade menggunakan spesifikasi HTML5. Sebelumnya, ktia terbatas pada radio, check box, and text fields. Namun kita sekarang memiliki jauh lebih besar berbagai macam input type:
<input type="date" id="field" name="field" />
Ketika Anda mengakses ini pada ponsel, dalam hal ini Apple iPhone yang berjalan pada iOS7, maka yang tampil dalam broswser sebagai berikut :
Ketika Anda memuat kontrol yang sama dalam browser desktop, Anda kemudian mendapatkan kontrol asli untuk desktop
HTML5 memungkinkan Anda untuk menambahkan placeholders ke field input, Ini artinya bahwa Anda dapat memberikan pengguna contoh untuk jenis data apa yang dapat dimasukkan. Contoh menambahkan atribut placeholder untuk sebuah field input adalah:
<input type="input" placeholder="Sample placeholder" id="field" name="field" />
Ketika dimuat ke browser, maka Anda dapat melihat text box berwarna abu abu untuk placeholder
Dalam HTML5, Anda dengan mudah dapat menambahkan form validation, untuk mendemonstrasikan bagaimana ini bekerja, mari kita lihat beberapa contoh sederhana :
Validation Form sederhana, untuk membuat field required. Anda akan melakukan ini dengan menambahkan attribut required ke dalam input field, sebagaimana ditampilkan dalam contoh berikut :
<input type="text" placeholder="e.g example@example.com" required />
Ketika Anda melakukan klik tombol Submit pada browser, kemudian ditampilkan pesan kesalahan untuk mengingatkan user mengisi field.
Ketika Anda ingin memvalidasi email address, Anda akan membutuhkan set input type dengan sederhana untuk email, seperti ditampilkan contoh berikut :
<input type="email" placeholder="e.g example@example.com" required id="email" name="email" />
Ketika Anda melakukan klik tombol Submit di browser, user kemudian ditampilkan pesan error untuk memberitahukan bahwa email address invalid.
Polyfilling
Dengan semua feature baru yang fantastik ini pada HTML5, ini dapat mengecewakan untuk menemukan browser yang baik dan mendukung karena ada browser yang tidak mendukung. Untungnya, ada polyfills datang untuknya. polyfill pertama kali diciptakan oleh Remy Sharp pada tahun 2009 ketka dia menulis “Introducing HTML.”
Remy menyatakan "Shim, bagi saya, berarti sepotong kode bahwa Anda dapat menambahkan yang akan memperbaiki beberapa fungsi, tapi yang paling sering memliki API sendiri. Saya ingin sesuatu yang Anda dapat drop in dan akan bekerja secara diam-diam. ” http://remysharp.com/2010/10/08/what-is-a-polyfill/.
Jadi sesuai definisi Remy, polyfill adalah sedikit kode yang hanya menambahkan fungsi yang hilang ke browser, yang biasanya dapat dicapai dengan JavaScript. Istilah ini tidak dimaksudkan untuk melibatkan browser lama seperti browser baru juga perlu polyfilled dengan fitur-fitur terbaru.
Ada sejumlah besar polyfills yang tersedia untuk teknologi HTML5 , beberapa yang popular adalah :
Validating the HTML5 Page
Anda mungkin sebelumnya telah menggunakan W3C validator untuk validasi HTML Anda, Namun Anda mungkin tidak menyadari bahwa ini telah di update untuk memiliki dukungan eksperimental untuk draft spesifikasi HTML5.
Untuk validasi HTML Anda, kunjungi W3C validator (validator.w3.org) dan validasi dengan memasukkan langsung URL situs Anda atau paste HTML dari situs Anda ke dalam teks area yang disediakan.
Validasi HTML dapat digunakan:
DOCTYPE
Doctype memberitahukan browser bagaimana harus mengurai dokumen Anda, maka dari itu ini merupakan bagian penting dari dokumen dan harus dimasukkan ke dalam baris pertama dokumen HTML Anda. Doctype sebelumnya tidak hanya mendefinisikan dokumen sebagai HTML4, tetapi juga memberikan URL ke dokumen spesifikas, seperti ditampilkan berikut :
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
Doctype HTML5 baru jauh lebih sederhana, dan Anda tidak perlu lagi menentukan versi HTML, atau spesifikasi dokumen, seperti ditunjukkan dalam contoh berikut:
<!DOCTYPE html>
Alasan untuk perubahan adalah bahwa HTML hidup dalam dalam spesifikasi dimana browser akan terus bagian baru dari spesifikasi dimana mereka melalui proses standarisasi. Idenya adalah bahwa di masa depan fitur fitur baru dapat ditambahkan tanpa perlu perubahan lebih lanjut untuk doctype.
New Semantic HTML Tags
Ketika Anda pertama kali membuka dokumen HTML5, hal pertama yang Anda perhatikan adalah bahwa ada banyak tag semantic yang digunakan di seluruh dokumen, dan yang paling menonjol adalah:
- <article> : Mendefinisikan artikel.
- <aside> : Mendefinisikan konten disamping konten utama.
- <figure> : Mendefinisikan konten terkait, sebagai contoh dari penggunaan ini adalah photo atau daftar kode.
- <figcaption> : Mendefinisikan caption/judul dari elemen <figure> Anda.
- <header> : Mendefinisikan header untuk dokumen atau section.
- <footer> : Mendefinisikan footer untuk dokumen atau section.
- <nav> : Mendefinisikan serangkaian link yang digunakan untuk navigasi di seluruh situs.
- <section> : Mendefinisikan section dari konten.
<!DOCTYPE html>
<html>
<head>
<title>Title</title>
</head>
<body>
<header>
<h1>Hello World</h1>
</header>
<div class="content">
</div>
<footer>
</footer>
</body>
</html>
New Meta Tags
Selain tag semantik yang baru adalah bahwa HMTL5 juga memperkenalkan beberapa meta tag baru:
Viewport Meta Tag
Yang paling penting dari meta tag baru adalah viewport meta tag. Meta tag ini awalnya diperkenalkan oleh Mobile Safari dan digunakan sebagai cara untuk memungkinkan developer untuk mendefinisikan lebar dan skala dari viewport. Ketika digunakan secara tidak benar, viewport meta tag dapat menyebabkan pengalaman yang tidak enak bagi pengguna.
Isi dari meta tag viewport terdiri dari sebuah daftar comma-separated dari key value yang berpasangan, value yang digunakan adalah:
- width : - Lebar dari viewport.
- initial-scale : Skala situs ketika loading awal.
- user-scalable : Secara default : pengguna dapat memperbesar ukuran situs, pengaturan “user-scalable” untuk "no" menonaktifkan ini. Tapi ini buruk untuk accessability dari sebuah situs sehingga tidak dianjurkan.
- maximum-scale : Memungkinkan Anda untuk menentukan level maksimum yang pengguna dapat melakukan zoom site. Meskipun tidak seburuk user-scalable.Ini masih berbaya untuk accessability.
<meta name="viewport" content="width=1024, initial-scale=1">
Untuk Desain Responsif, Anda ingin lebar viewport untuk menjadi sama dengan lebar dari perangkat yang Anda gunakan, Hal ini karena dua alasan utama ; pertama, Anda akan membangun CSS Anda untuk menargetkan lebar viewport sehingga Anda ingin lebar viewport agar sesuai dengan lebar perangkat. Kedua, ia memberitahu perangkat bahwa situs mobile optimized, dan karena itu tidak perlu meload halaman dengan viewport default besar zoomed out.
Untuk membuat viewport sama dengan lebar dari perangkat yang Anda gunakan, Anda menetapkan nilai dari lebar viewport ke device-width bukan menentukan ukuran tertentu. Anda juga ingin situs Anda untuk memulai dengan tingkat zoom standar, sehingga Anda memiliki untuk mengeset initial-scale 1, seperti yang ditunjukkan contoh berikut:
<meta name="viewport" content="width=device-width, initial-scale=1">
Web Forms
Input form fields telah diupgrade menggunakan spesifikasi HTML5. Sebelumnya, ktia terbatas pada radio, check box, and text fields. Namun kita sekarang memiliki jauh lebih besar berbagai macam input type:
- search
- url
- tel
- number
- range
- date
- month
- week
- time
- datetime
- datetime-local
- color
<input type="date" id="field" name="field" />
Ketika Anda mengakses ini pada ponsel, dalam hal ini Apple iPhone yang berjalan pada iOS7, maka yang tampil dalam broswser sebagai berikut :
 |
| <input type="date" id="field" name="field" /> seperti yang ditampilkan pada iPhone yang berjalan pada iOS7 |
 |
| Kontrol Input date ditampilkan pada broawser Chrome |
<input type="input" placeholder="Sample placeholder" id="field" name="field" />
Ketika dimuat ke browser, maka Anda dapat melihat text box berwarna abu abu untuk placeholder
 |
| Elemen input dengan placeholder |
Validation Form sederhana, untuk membuat field required. Anda akan melakukan ini dengan menambahkan attribut required ke dalam input field, sebagaimana ditampilkan dalam contoh berikut :
<input type="text" placeholder="e.g example@example.com" required />
Ketika Anda melakukan klik tombol Submit pada browser, kemudian ditampilkan pesan kesalahan untuk mengingatkan user mengisi field.
 |
| Pesan kesalahan browser ditampilkan ketika user mencoba submit form tanpa mengisi nilai yang diminta |
<input type="email" placeholder="e.g example@example.com" required id="email" name="email" />
Ketika Anda melakukan klik tombol Submit di browser, user kemudian ditampilkan pesan error untuk memberitahukan bahwa email address invalid.
 |
| Pesan browser error ditampilkan ketika user mencoba untuk submit form dengan invalid email address. |
Dengan semua feature baru yang fantastik ini pada HTML5, ini dapat mengecewakan untuk menemukan browser yang baik dan mendukung karena ada browser yang tidak mendukung. Untungnya, ada polyfills datang untuknya. polyfill pertama kali diciptakan oleh Remy Sharp pada tahun 2009 ketka dia menulis “Introducing HTML.”
Remy menyatakan "Shim, bagi saya, berarti sepotong kode bahwa Anda dapat menambahkan yang akan memperbaiki beberapa fungsi, tapi yang paling sering memliki API sendiri. Saya ingin sesuatu yang Anda dapat drop in dan akan bekerja secara diam-diam. ” http://remysharp.com/2010/10/08/what-is-a-polyfill/.
Jadi sesuai definisi Remy, polyfill adalah sedikit kode yang hanya menambahkan fungsi yang hilang ke browser, yang biasanya dapat dicapai dengan JavaScript. Istilah ini tidak dimaksudkan untuk melibatkan browser lama seperti browser baru juga perlu polyfilled dengan fitur-fitur terbaru.
Ada sejumlah besar polyfills yang tersedia untuk teknologi HTML5 , beberapa yang popular adalah :
- Respond.js: https://github.com/scottjehl/Respond Respond.js menambahkan dukungan untuk min/max-width CSS3 Media Queries untuk Internet Explorer (IE6-8) versi lama. Jika Anda berencana untuk membuat situs responsif ponsel pertama, Anda membutuhkan support IE lama, ini diperlukan.
- HTML5 Shiv: https://github.com/aFarkas/html5shiv HTML5 Shiv memungkinkan dukungan untuk elemen semantik styling HTML5 pada Internet Eksplorer versi lama.
- CupCake.js: http://www.rivindu.com/p/cupcakejs.html CupCake.js menambahkan dukungan localStorage dan sessionStorage dengan sebuah generic API.
- FlashCanvas: http://flashcanvas.net/ HTML5 Canvas Polyfill berdasarkan penggunaan Adobe Flash.
Validating the HTML5 Page
Anda mungkin sebelumnya telah menggunakan W3C validator untuk validasi HTML Anda, Namun Anda mungkin tidak menyadari bahwa ini telah di update untuk memiliki dukungan eksperimental untuk draft spesifikasi HTML5.
Untuk validasi HTML Anda, kunjungi W3C validator (validator.w3.org) dan validasi dengan memasukkan langsung URL situs Anda atau paste HTML dari situs Anda ke dalam teks area yang disediakan.
Validasi HTML dapat digunakan:
- Sebagai alat debugging, bug sederhana untuk memperbaiki HTML adalah mereka yang disebabkan oleh menulis kode yang tidak valid. Validasi sederhana akan memberikan highlight untuk masalah pada HTML Anda, sehingga Anda dapat memperbaikinya segera.
- Untuk menjaga kualitas kode, Dengan memastikan kode selalu melewati validasi W3C, akan mnejaga tingkat kualitas kode.
- Memastikan kemudahan pemeliharaan, Meskipun kode tidak valid mungkin tidak merusak situs Anda dalam waktu dekat. bug tak terduga dapat muncul ketika Anda nanti merubah kode tersebut, dan validasi membantu meminimalisasi ini.
No comments:
Post a Comment