HTML5

HTML5 adalah sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari Waring Wera Wanua, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML (yang pertama kali diciptakan pada tahun 1990 dan versi keempatnya, HTML4, pada tahun 1997 dan hingga bulan Juni 2011 masih dalam pengembangan. Tujuan utama pengembangan HTML5 adalah untuk memperbaiki teknologi HTML agar mendukung teknologi multimedia terbaru, mudah dibaca oleh manusia dan juga mudah dimengerti oleh mesin.

HTML5 merupakan salah satu karya Konsortium Waring Wera Wanua (World Wide Web Consortium, W3C) untuk mendefinisikan sebuah bahasa markah tunggal yang dapat ditulis dengan cara HTML ataupun XHTML. HTML5 merupakan jawaban atas pengembangan HTML 4.01 dan XHTML 1.1 yang selama ini berjalan terpisah, dan diimplementasikan secara berbeda-beda oleh banyak perangkat lunak pembuat web.

HTML5
(HyperText Markup Language)

Ekstensi berkas	.html, .htm
Jenis MIME	text/html
Type code	TEXT
Uniform Type Identifier	public.html
Dikembangkan oleh	Konsortium Waring Wera Wanua danWHATWG
Jenis format	Bahasa markah
Pengembangan dari	SGML
Dikembangkan menjadi	XHTML5
Situs web	whatwg.org/html www.w3.org/TR/html5/

XHTML5

Ekstensi berkas	.xhtml, .xht, .xml, .html, .htm
Jenis MIME	application/xml, application/xhtml+xml
Dikembangkan oleh	Konsortium Waring Wera Wanua dan WHATWG
Jenis format	Bahasa markah
Pengembangan dari	XML, HTML5
Situs web	www.whatwg.org/specs/web-apps/current-work/multipage/the-xhtml-syntax.html

Sejarah

Kelompok Kerja Teknologi Aplikasi Web Hyperteks (Web Hypertext Application Technology Working Group, WHATWG) mulai membuat standar baru ini pada tahun 2004 ketika Konsortium W3C sedang fokus pada pengembangan XHTML 2.0 di masa depan, sementara HTML 4.01 belum pernah diperbarui sejak tahun 2000. Sejak tahun 2009, W3C dan WHATWG bekerja sama dalam pengembangan HTML5 setelah W3C mengakhiri Kelompok Kerja Pengembangan XHTML 2.0.

Meskipun HTML5 telah dikenal luas oleh para pengembang web sejak lama, HTML5 baru mencuat pada April 2010 setelah CEOApple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."

Proses standardisasi W3C

Kelompok kerja untuk teknologi aplikasi web hypertext (WHATWG) mulai menspesifikasikan HTML5 pada bulan juni 2004 dengan nama Web Applications 1.0., hingga pada bulan maret 2010 spesifikasi ini masuk ke bagian draft standar di WHATWG, dan ke dalam bagian pengurusan draft di W3C. Ian Hickson mewakili Google ,Inc menjadi editor HTML5.

Pada tahun 2007 Spesifikasi HTML5 diadopsi sebagai pekerjaan permulaan untuk grup baru yang mengurus HTML di World Wide Web Consorsium (W3C). Grup ini pertama kali mempublikasikan hasil draft pekerjaan pertama mereka pada tanggal 22 januari 2008. Spesifikasi ini berstatus dalam tahap pengerjaan, dan diperkirakan akan tetap demikian selama bertahun-tahun, meskipun sebagian dari HTML5 sudah dalam tahap penyelesaian dan diimplementasikan pada penjelajah web sebelum keseluruhan spesifikasinya mencapai status rekomendasi final.

Berdasarkan pada jadwal kerja W3C, HTML5 diperkirakan menjadi kandidat rekomendasi pada akhir tahun 2010. Namun, publikasi pertama draft HTML 5 meleset selama 8 bulan. Permintaan dokumen terakhir dan tahap kandidat rekomendasi diharapkan dapat dicapai pada tahun 2008, tetapi hingga bulan Juli 2010 HTML 5 masih dalam tahapan draft pengerjaan di W3C. WHATWG telah meminta penyelesaian terakhir untuk HTML5 sejak bulan oktober tahun 2009.

Editor HTML5, Ian Hickson, berharap spesifikasi HTML5 dapat mencapai tahap kandidat rekomendasi pada tahun 2012. Kriteria di W3C agar sebuah spesifikasi dapat berstatus - Direkomendasikan - adalah "yang kedua: 100% selesai dan penerapannya dapat dilakukan pada dua atau lebih sistem yang berbeda" . Pada wawancaranya dengan TechRepublic, Hickson memperkirakan hal ini baru akan terjadi pada tahun 2022 atau setelahnya. Meski demikian, banyak bagian dari spesifikasi sudah stabil dan telah dapat diterapkan pada produk:

Beberapa bab secara relatif telah stabil, maka dari itu implementasinya juga sudah hampir mendekati penyelesaian, dan fitur tersebut sudah dapat digunakan hari ini (misalnya: tag <canvas>).

Markup

Pada HTML 5 diperkenalkan beberapa elemen baru dan atribut yang merefleksikan tipikal penggunaan website modern. Beberapa diantaranya adalah pergantian yang bersifatsemantik pada blok yang umum digunakan: yaitu elemen (<div>) dan inline (<span>), sebagai contoh (<span>) (sebagai blok navigasi website) dan <footer> (biasanya dikaitkan pada bagian bawah suatu website atau baris terakhir dari kode html). Banyak elemen lain yang memberikan kegunaan baru melalui antar muka yang telah distandarkan, seperti elemen multimedia <audio> dan <video>.Beberapa elemen yang telah ditinggalkan juga ditiadakan, termasuk elemen presentasi semata seperti <font> dan<center>, yang sebenarnya dapat dikerjakan menggunakan Cascading Style Sheet (CSS).

API baru

Untuk menambah keluwesan pemformatan, pada HTML5 telah dispesifikasikan pengkodean application programming interfaces (APIs).  antarmuka document object model (DOM) yang ada dikembangkan dan fitur de facto didokumentasikan. Beberapa APIs terbaru pada HTML5 antara lain :

·         Elemen canvas, sebagai mode untuk menggambar object dua dimensi (2D). Lihat spesifikasi 1.0 untuk canvas 2D.

·         Timed media playback

·         Media penyimpanan luring (aplikasi web luring). Lihat Web Storage

·         Penyuntingan dokumen

·         Drag and Drop

·         Cross-document messaging

·         Manajemen sejarah kunjungan penjelajah web

·         Tipe MIME dan penanggung jawab protokol registrasi.

Tidak semua teknologi di atas dimasukkan pada spesifikasi HTML5 W3C, meski teknologi tersebut telah termaktub dalam spesifikasi milik WHATWG HTML. Beberapa teknologi yang juga terkait namun tidak dijadikan bagian dalam spesifikasi HTML5 W3C dan WHATWG HTML5 adalah :

·         Geolocation

·         Web SQL Database, media penyimpanan database lokal.

·         API Database terindeks, mode penyimpanan hierarkis key-value (WebSimpleDB).

·         Web Speech API

Perbedaan dengan HTML 4.01 dan XHTML 1.x

Berikut disajikan beberapa contoh perbedaan yang spesifik.

·         Aturan baru saat melakukan parsing berorientasi pada towards dan kompatibilitas; tidak berbasis pada SGML

·         Kemampuan untuk mendukung format SVG dan MathML pada text/html

·       Elemenbaru: article, aside, audio, canvas, command, datalist, details, embed, figcaption, figure, footer, header, hgroup, keygen, mark, meter, nav, output,progress, rp, rt, ruby, section, source, summary, time, video, wbr

·         Tipe baru pada kontrol form : dates and times, email, url, search, color

·         Atribut baru: ping (pada elemen a and area), charset (pada meta), async (pada script)

·         Atribut global (atribut berikut dapat diterapkan pada setiap elemen html) : id, tabindex, hidden, data-* (atribut data kustom)

·         Selain dapat bernilai GET atau POST, elemen attribut <form> kini telah mendukung nilai PUT dan DELETE. (Sebagai contoh kasus lihat Representational State Transfer)

·         Elemen yang telah deprecated secara bersamaan akan dihapus : acronym, applet, basefont, big, center, dir, font, frame, frameset, isindex, noframes, s, strike,tt, u

Kunjungi dev.w3.org untuk melihat pembaharuan draft terkini antara HTML5 dan HTML4, tautan ini menyediakan secara lengkap berbagai daftar tambahan, penghapusan, dan perubahan yang terjadi di dalam spesifikasi HTML5.

Logo HTML5

Pada 18 Januari 2011, W3C memperkenalkan sebuah logo untuk representasi penggunaan dan tujuan HTML5. Tidak seperti logo lain yang sebelumnya telah diperkenalkan W3C, logo ini tidak mengisyaratkan validitas atau kesesuaian terhadap standar tertentu. Logo ini menjadi logo resmi sejak 1 April 2011.

Logo resmi HTML5 oleh W3

Saat logo ini pertama kali diperkenalkan ke muka publik, W3C menyatakan logo HTML5 ini sebagai sebuah "identitas visual secara umum bagi kumpulan berbagai teknologi open web, termasuk HTML5 CSS, SVG, WOFF, dan lainnya." Beberapa pendukung standar web, termasuk Proyek Standar Web (The Web Standards Project), mengkritik definisi "HTML5" sebagai istilah umum, terutama bahwa terjadi pengaburan terminologi dan potensi munculnya miskomunikasi. Tiga hari kemudian, W3C menanggapi umpan balik komunitas dengan mengubah definisi logo ini, yakni dengan menghapus bagian kesertaan berbagai teknologi terkait W3C lantas menyatakan logo ini "representasi HTML5, si batu penjuru dari berbagai Aplikasi Web modern."

Membuat Animasi Lingkaran Dengan Canvas HTML5 – Javascript

SAY HELLO TO CANVAS!

Canvas adalah sebuah tag dalam HTML5 yang digunakan untuk menggambar dengan bantuan javascript. Sesuai namanya “canvas”, di dalam canvas ini seorang web developer bisa menggambar menggambar isi dokumen HTML dengan sintaks-sintaks javascipt, bahkan bisa membuat animasi.

Pertanyaan besar kenapa harus pakai canvas kalau kita bisa membuat animasi dengan CSS? Alasannya karena lingkup manipulasi pembuatan animasi dengan canvas jauh lebih besar. Jika di dalam CSS anda hanya bisa memanipulasi elemen yang terbatas, di javascript anda bisa memanipulasi seluruh dokumen HTML.

Sebelum membaca lebih jauh, saya ingatkan kembali tutorial ini hanya akan membatasi pembuatan animasi dengan canvas HTML5. Let’s begin.

HTML

<head>

<style>

<!-- Memanggil font dari google font -->

<link href='http://fonts.googleapis.com/css?family=Carme' rel='stylesheet' type='text/css'>

</style>

<body>

<!-- Tag untuk memanggil canvas, atribut height dan width harus diletakkan dalam tag ini -->

<canvas id="mycanvas" height="300px" width="300px"></canvas>

<div class="container-button">

<!-- Tag button ini akan digunakan untuk menghentikan animasi -->

<button class="stop">Stop!</button>

</div>

</body>

Perhatikan baris ke-15, itu adalah tag yang digunakan untuk membuat canvas. Di dalam tag canvas tidak perlu dimasukkan apa-apa, karena kita akan membuat gambarnya dengan javascript.

CSS

 * {

  margin:0px;

  padding:0px;

  font-family: 'Carme', sans-serif;

}

#mycanvas {

  border: 2px solid #eee;

  border-radius: 5px;

  margin: 10px auto 10px;

  display: block;

}

.container-button {

  text-align: center;

  margin: 0 auto;

}

.stop {

   padding: 3px; 

}

Jika sintaks yang telah kita buat dicompile browser, hasilnya terlihat sebagai berikut. Hasilnya belum ada apa-apa karena kita belum menyisipkan javascript untuk menggambar canvas.

JAVASCRIPT

// Memanggil selektor DOM dari HTML yaitu id mycanvas

var mainCanvas = document.querySelector("#mycanvas");

        // Membuat canvas sebagai konten dua dimensi

        var mainContext = mainCanvas.getContext("2d");

        var canvasWidth = mainCanvas.width; // Lebar canvas

        var canvasHeight = mainCanvas.height; // Tinggi canvas

        // Memulai animation frame javascript

        var requestAnimationFrame = window.requestAnimationFrame || window.webkitRequestAnimationFrame || window.mozRequestAnimationFrame || window.msRequestAnimationFrame;

        // Menghentikan animation frame javascript

        var cancelAnimationFrame = window.cancelAnimationFrame || window.webkitCancelAnimationFrame || window.mozCancelAnimationFrame || window.msCancelAnimationFrame;

        // Variable angle digunakan untuk me-reset lebar lingkaran

        var angle = 0;

        function draw() {

            // Membersihkan canvas

            mainContext.clearRect(0, 0, canvasWidth, canvasHeight);

            // Mengisi background canvas dengan warna putih

            mainContext.fillStyle = "white";

            // Memasukkan background ke canvas yang sudah dibersihkan

            mainContext.fillRect(0, 0, canvasWidth, canvasHeight);

            // Memulai fungsi menggambar

            mainContext.beginPath();

            // Radius ini akan mengembalikan nilai yang berbeda setiap frame

            // Sehingga lingkaran ukurannya bisa berubah-rubah

            var radius = 10 + 60 * Math.abs(Math.cos(angle));

            mainContext.arc(150, 150, radius, 0, Math.PI * 2, false);

            mainContext.closePath();

            // Mengisi warna lingkaran

            mainContext.fillStyle = "#3498db";

            mainContext.fill();

            // Nilai angle akan berubah-ubah seiring perulangan frame

            angle += Math.PI / 32;

            var start = requestAnimationFrame(draw);

            // Memanggil selektor stop di tag button

            var stop = document.querySelector(".stop");                                

           // Fungsi untuk menghentikan animasi

           stop.addEventListener('click', berhenti, false);

           function berhenti(e) {

            cancelAnimationFrame(start);

        }

        }

        // Mulai menggambar / animasi

        draw();

PENJELASAN

Setelah membaca kode yang panjang dan membingungkan, pasti membingungkan bagi anda yang belum kenalan sama javascript yang keren ini. Saya akan coba menjelaskan tentang kode yang baru saja kita buat.

1. Pertama, kita membuat variabel baru yaitu mainCanvas. Di dalam variabel ini kita masukkan selekor DOM dari id #mycanvas. mainCanvas adalah elemen canvas yang kita buat.

2. Lalu, kita membuat variabel baru yaitu mainContext. Di main context ini kita masukkan dari variabel mainCanvas. Fungsi getContext(“2D”) digunakan agar variabel mainCanvas bisa dirender (secara dua dimensi) oleh javascript.

3. Variabel mainWidth dan mainHeight untuk mengambil nilai lebar dan tinggi canvas.

4. Setelah itu, selanjutnya adalah membuat fungsi draw() dimana kita akan menggambar lingkaran dengan canvas.

5. Perhatikan di dalam fungsi draw() terdapat fungsi fillRect(0, 0, canvasWidth, canvasHeight). Nilai 0 pertama mengosongkan nilai canvas dari kiri dan 0 kedua mengosongkan nilai canvas dari arah atas.

6. Setelah canvas dibersihkan dengan fungsi fillRect selanjutnya adalah memulai menggambar dengan fungsi beginPath(). Jangan lupa untuk mengakhiri fungsi menggambar ini ditutup dengan closePath().

7. Selanjutnya adalah membuat variabel radius, kita sengaja membuat radius ini sebagai variabel agar nilainya bisa kita modifikasi. Perhatikan operasi perkalian dan pertambahannya.

8. Sebelumnya kita sudah membuat variabel angle yang bernilai 0. Di dalam variabel radius terdapat operasi 1 + 60 * Math.abs(Math.cos(angle)). Fungsi Math.abs berguna untuk mengembalikan nilai di dalamnya menjadi positif (Masih ingat fungsi absolute di SMA?). Lalu fungsi Math.cos(angle) berguna untuk meng-cosinuskan nilai angle. Jika tadi nilai angle-nya = 0, maka setelah di-cosinus-kan nilainya berubah menjadi satu. Artinya fungsi radius ini akan mengembalikan nilai total 10 + 60 * 1 = 70. Semakin besar nilai radius semakin besar lingkaran yang dibuat. Tapi nilai radius ini hanya sementara karena requestAnimationFrame akan merender animasi 60 kali / detik. Jadi nilai radius 70 akan bertahan selama 1 detik.

9. Setelah membuat nilai radius kita akan memasukkan nilai radius ini ke dalam fungsi arc yang akan menggambar sang lingkaran. Perhatikan mainContext.arc(150, 150, radius, 0, Math.pi * 2 ,false). Dalam matematika, lingakaran bernilai 360 derajat atau 2 * phi , tapi karena di javascript kita tidak bisa menggunakan nilai derajat untuk operasi, maka kita menggunakan operasi phi. Lihat kembali ke fungsi. Pertama nilai 150 digunakan untuk menempatkan posisi lingkaran ke tengah dari kiri (width), dan 150 ke-dua untuk menempatkan posisi lingkaran ke tengah dari atas (height), lalu variabel radius yang telah dibuat, nilai ke empat adalah nilai 0 (artinya gambar lingkaran dimulai dari sudut 0 belum ada apa-apa), lalu Math.pi * 2 = 360 derajat yang akan membuat sebuah lingkaran.

10. Untuk urusan gambar menggambar sudah selesai di tahap ini, ditutup dengan closePath().

11. Lalu bagaimana dengan animasinya? Untuk melakukan animasi tersebut, kita harus merubah nilai lingkaran yang tadinya ber-radius 70 dengan merubah angle-nya. Angle += Math.Pi / 32, di fungsi ini kita akan memasukkan nilai baru ke variabel angle (Angle = 1 + 0.09 = 1.09). Di fungsi draw akan terus terjadi perulangan animasi yang akan merubah nilai radius setiap detik. Jadi nilai 1.09 akan kembali (secara bertahap) sampai ke nilai 70 yang akan membentuk animasi.

12. Setelah itu, untuk memulai animasinya buat variabel start, di dalam variabel start dimasukkan fungsi membuat animasi yaitu requestAnimationFrame dengan parameter draw yang tadi dibuat.

13. Setelah selesai membuat animasinya, berarti tinggal satu fungsi lagi yaitu untuk membatalkan animasi. aitu dengan memanggil selektor tombol stop (.stop), tambahkan dengan eventListener. Jadi saat stop di-klik, maka akan menmbatalkan animasi yang ada di variabel start.

Sekian Tentang HTML 5 dan sedikit tentang cara pembuatan lingkaran menggunakan HTML 5 :) semoga bermanfaat kawan :) ^_^

Sumber : 

http://id.wikipedia.org/wiki/HTML5

http://www.tutorial-webdesign.com/membuat-animasi-lingkaran-dengan-canvas-html5-javascript/