SCRIPT SHARE: Fitur Baru HTML5

Bismillah...

Beberapa waktu yang lalu kita udah ngebahas Latar Belakang munculnya HTML5 dan CSS3 #yakan? dengan menyinggung beberapa dari fiturnya, nah., disini sekarang kita akan bahas share secara khusus fitur-fitur HTML5 itu apaan aja,

Apaan aja sih fitur HTML5? kok bisa gitu jd booming?

seperti dijelaskan dipostingan sebelumnya, HTML5 didesain secara khusus untuk mengurangi ketergantungan pada plug-in, kemandirian bahasa, kemudahan akses, penulisan yang sederhana dan
lain-lain oleh pengembangnya, dari pengembangan tersebut lahirlah beberapa fitur-fitur HTML5 yang belum ada pada HTML sebelumnya, berikut ane sebutin beberapa fiturnya yang paling menarik, monggoohh...

<!DOCTYPE>

Eneg liat Doctype HTML lama yang panjang banget? HTML5 datang dengan doctype yang lebih singkat #sangat sehingga kita tak perlu menghapal doctype lama yang panjang.

Canvas

dari namanya aja pasti udah dapat ditebak canvas itu buat apa, ya, HTML5 sekarang menyediakan fitur untuk menggambar didalam halaman web via javascript, didalam canvas dengan memakai <canvas></canvas>

contoh script :

<!DOCTYPE html>
<html>
<body>

<canvas id="myCanvas" width="200" height="100" style="border:1px solid #d3d3d3;">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>

var c=document.getElementById("myCanvas");
var ctx=c.getContext("2d");
ctx.beginPath();
ctx.arc(95,50,40,0,2*Math.PI);
ctx.stroke();

</script>

</body>
</html>

hasilnya :

Video

pernah ga, waktu kita pengen nonton video dalam sebuah halaman web (entah video apaan), kita diminta untuk mengupdate Adobe Flash? pasti bikin eneg dan males kan? apalagi updatenya lamaaaaaaa banget, dan setelah kita update, buffering videonya juga sompret lamanya, bawaannya pengen nabok monitor aja.

untuk mengurangi ketergantungan plug-in yang merepotkan, maka W3C mengembangkan sebuah fitur untuk standarisasi penampilan video dalam website, lahirlah tag video (<video></video>), selain mengurangi ketergantungan plug-in, penggunaan tag ini juga lebih cepat, dan juga efisien, karena alamat video yang dibundel jadi satu dengan dokumen HTML, seperti penempatan CSS dan Javascript.

contoh script :

<!DOCTYPE html>

<html>

<body>

<source src="movie.mp4" type="video/mp4"><source src="movie.ogg" type="video/ogg">Your browser does not support the video tag.

</video>

</body>

</html>

Audio

sama halnya seperti penampilan video, embedded suara pada web juga dipermudah dengan adanya tag audio (<audio></audio>), dengan prinsip yang sama, dan kemudahan yang sama, W3C memberikan standarisasi penyisipan suara dalam halaman web dengan fitur ini

contoh script :

<!DOCTYPE html>

<html>

<body>

Your browser does not support the audio element.

</audio>

</body>

</html>

Semantik/Struktur Element yang baru

selain sudah support dengan multimedia, HTML5 juga hadir dengan kemudahan semantiknya, untuk mengurangi scripting yang ribet bagi sebagian programmer, HTML5 menyediakan lebih banyak mark-up, contohnya, kita tidak perlu lagi membuat sebuah ID/class untuk membuat header, cukup dengan tag header (<header></header>), begitu juga dengan tag aside (<aside></aside>) tag footer (<footer></footer>) dan banyak mark-up lainnya untuk menyederhanakan dokumen HTML.

beberapa semantik elemen baru HTML5

Tag	Description
<article>	Defines an article
<aside>	Defines content aside from the page content
<bdi>	Isolates a part of text that might be formatted in a different direction from other text outside it
<command>	Defines a command button that a user can invoke
<details>	Defines additional details that the user can view or hide
<summary>	Defines a visible heading for a <details> element
<figure>	Specifies self-contained content, like illustrations, diagrams, photos, code listings, etc.
<figcaption>	Defines a caption for a <figure> element
<footer>	Defines a footer for a document or section
<header>	Defines a header for a document or section
<hgroup>	Groups a set of <h1> to <h6> elements when a heading has multiple levels
<mark>	Defines marked/highlighted text
<meter>	Defines a scalar measurement within a known range (a gauge)
<nav>	Defines navigation links
<progress>	Represents the progress of a task
<ruby>	Defines a ruby annotation (for East Asian typography)
<rt>	Defines an explanation/pronunciation of characters (for East Asian typography)
<rp>	Defines what to show in browsers that do not support ruby annotations
<section>	Defines a section in a document
<time>	Defines a date/time
<wbr>	Defines a possible line-break

Local Storage (Penyimpanan Lokal)

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 menajdi 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.

EHEM...

Itulah beberapa fitur yang paling menarik dari HTML5, meski ada beberapa fitur yang tidak disebutkan disini, jika anda ingin mempelajari lebih dalam, anda dapat berkunjung di w3schools

CMIIW

Sumber :
http://css-weaver.com/10-alasan-untuk-menggunakan-html-5/
http://w3schools.com/html/html5_intro.asp

SCRIPT SHARE

Minggu, 18 November 2012

Fitur Baru HTML5