Thursday, 16 July 2015

Melihat Teknologi HTML5

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:
  1. <article> : Mendefinisikan artikel.
  2. <aside> : Mendefinisikan konten disamping konten utama.
  3. <figure> : Mendefinisikan konten terkait, sebagai contoh dari penggunaan ini adalah photo atau daftar kode.
  4. <figcaption> : Mendefinisikan caption/judul dari elemen <figure> Anda.
  5. <header> : Mendefinisikan header untuk dokumen atau section.
  6. <footer> : Mendefinisikan footer untuk dokumen atau section.
  7. <nav> : Mendefinisikan serangkaian link yang digunakan untuk navigasi di seluruh situs.
  8. <section> : Mendefinisikan section dari konten.
 Contoh sederhana bagaimana dokumen HTML5 dapat ditata sebagai berikut:

<!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:
  1. width : - Lebar dari viewport.
  2. initial-scale : Skala situs ketika loading awal.
  3. 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.
  4. maximum-scale : Memungkinkan Anda untuk menentukan level maksimum yang pengguna dapat melakukan zoom site. Meskipun tidak seburuk user-scalable.Ini masih berbaya untuk accessability.
Jika Anda menambahkan meta tag ini ke situs nonresponsive, Anda akan mengatur meta tag viewport untuk memiliki lebar yang masuk akal untuk menampilkan situs lebih nyaman. Jika Anda mengambil contoh dari sebuah situs 980px, yang centrally aligned, Anda akan ingin memasukkan sedikit jarak di sekitar tepi, sehingga Anda mungkin mengatur lebar viewport ke 1024px,seperti yang ditunjukkan dalam contoh ini:

<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:
  1. search
  2. email
  3. url
  4. tel
  5. number
  6. range
  7. date
  8. month
  9. week
  10. time
  11. datetime
  12. datetime-local
  13. color
Salah satu manfaat menggunakan input type yang baru adalah bahwa memungkinkan browser untuk membuat kontrol yang relevan. Misalnya, pada perangkat mobile jika input type kita set untuk email,  maka keyboard tertentu untuk memasukkan alamat email ditampilkan,  atau jika input type kita set untuk date, maka date selector akan ditampilkan. Ini memberikan pengalaman kepada user yang benar-benar bagus dan membuat form entry lebih mudah. Contoh sederhana disediakan dari kontrol kostum yang ditampilkan untuk field tanggal :

<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
Ketika Anda memuat kontrol yang sama dalam browser desktop, Anda kemudian mendapatkan kontrol asli untuk desktop

Kontrol Input date ditampilkan pada broawser Chrome
 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


Elemen input dengan 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.


Pesan kesalahan browser ditampilkan ketika user mencoba submit form tanpa mengisi nilai yang diminta
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.


Pesan browser error ditampilkan ketika user mencoba untuk submit form dengan invalid email address.
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 :
  1. 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.
  2. HTML5 Shiv: https://github.com/aFarkas/html5shiv HTML5 Shiv memungkinkan dukungan untuk elemen semantik styling HTML5 pada Internet Eksplorer versi lama.
  3. CupCake.js: http://www.rivindu.com/p/cupcakejs.html CupCake.js menambahkan dukungan localStorage dan sessionStorage dengan sebuah generic API.
  4. 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:
  1. 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.
  2. Untuk menjaga kualitas kode, Dengan memastikan kode selalu melewati validasi W3C, akan mnejaga tingkat kualitas kode.
  3. 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