Elemen - Elemen HTML 5

Pada artikel serial html5 kali ini kita akan membahas tentang elemen – elemen yang ada pada html5.

Elemen Markup

Tag	Penjelasan
<article>	Untuk konten eksternal, seperti teks dari artikel-berita, blog, forum, atau konten lain dari sumber eksternal
<aside>	Untuk konten selain konten itu ditempatkan di samping konten yang masuk harus berkaitan dengan isi sekitarnya
<command>	Sebuah tombol, atau radiobutton, atau sebuah kotak centang
<details>	Untuk rincian menggambarkan tentang sebuah dokumen, atau bagian dari dokumen
<summary>	Sebuah keterangan, atau ringkasan, dalam rincian elemen
<figure>	Untuk pengelompokan bagian dari konten berdiri sendiri, bisa video
<figcaption>	Keterangan dari tokoh bagian
<footer>	Untuk footer dari dokumen atau bagian, dapat meliputi nama penulis, tanggal dokumen, informasi kontak, atau informasi hak cipta
<header>	Untuk penerapan suatu dokumen atau bagian, dapat mencakup navigasi
<hgroup>	Untuk bagian dari pos, menggunakan <h1> untuk <h6>, di mana yang terbesar adalah pos utama bagian tersebut, dan yang lainnya sub-judul
<mark>	Untuk teks yang harus disorot
<meter>	Untuk pengukuran, digunakan hanya jika nilai-nilai maksimum dan minimum diketahui
<nav>	Untuk bagian navigasi atau menu
<progress>	Keadaan pekerjaan berlangsung
<ruby>	Untuk penjelasan ruby (catatan Cina atau karakter)
<rt>	Untuk penjelasan tentang penjelasan ruby
<rp>	Apa untuk menunjukkan browser yang tidak mendukung elemen ruby
<section>	Untuk bagian dalam dokumen. Seperti bab, header, footer, atau bagian lain dari dokumen
<time>	Untuk menentukan waktu atau tanggal, atau keduanya

Elemen Media

Tag	Penjelasan
<audio>	Untuk konten multimedia , suara, musik atau streaming audio lainya
<video>	Untuk konten video , seperti klip film atau Streaming video lainya
<source>	Untuk sumber suatu media pada elemen media, menjelaskan didalam video atau media audio
<embed>	Untuk mengisi embedded , contohnya seperti plug-in atau mengambil video dari Youtube.

Elemen Kanvas

Elemen kanvas menggunakan JavaScript untuk membuat gambar pada halaman web.

Tag	Penjelasan
<canvas>	Untuk membuat gambar pada halaman web

Elemen Form

Tag	Penjelasan
<datalist>	Daftar pilihan untuk nilai input
<keygen>	Hasilkan kunci untuk mengotentikasi pengguna
<output>	Untuk berbagai jenis output, seperti output yang ditulis oleh script

Input Type Attribute Values

Untuk kontrol input yang lebih baik sebelum mengirimnya ke server:

Tipe	Penjelasan
tel	Nilai input untuk nomor telepon
search	Untuk bidang pencarian
url	Nilai input untuk memasukkan URL
email	Untuk mengisi email atau lebih dari 1 email
datetime	Untuk pengisian waktu dan tanggal
date	Untuk pengisian tanggal
month	Untuk pengisian bulan
week	Untuk pengisian minggu
time	Untuk pengisian waktu
datetime-local	Untuk pengisian lokal waktu/tanggal
number	Untuk pengisian nomer
range	Untuk pengisian rentang waktu
color	Untuk pengisian heksadesimal sebuah warna, contohnya #FF8800

HTML 5 ????

Pengertian HTML5

Dari penjelasan yang ada di wikipedia : HTML5 merupakan sebuah bahasa markah untuk menstrukturkan dan menampilkan isi dari World Wide Web, sebuah teknologi inti dari Internet. HTML5 adalah revisi kelima dari HTML dan hingga bulan Juni 2011 masih dalam pengembangan.

Dimana 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 hasil proyek dari W3C (World Wide Web Consortium dan WHATWG ( Web Hypertext Application Technology Working Group ). Dimana WHATWG bekerja dengan bentuk web dan aplikasi dan W3C merupakan pengembang dari XHTML 2.0 pada tahun 2006, kemudian mereka memutuskan untuk bekerja sama dan membentuk versi baru dari HTML.



Sejarah HTML 5
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 CEO Apple Inc., Steve Jobs, mengatakan bahwa dengan pengembangan HTML5, "Adobe Flash sudah tidak dibutuhkan lagi untuk menyaksikan video atau menyaksikan konten apapun di web."(Dikutip dari wikipedia)

Berikut tujuan dibuatnya HTML5 :

• Fitur baru harus didasarkan pada HTML, CSS, DOM, dan JavaScript
• Mengurangi kebutuhan untuk plugin eksternal ( Seperti Flash )
• Penanagan kesalahan yang lebih baik
• Lebih markup untuk menggantikan scripting
• HTML5 merupakan perangkat mandiri
• Proses pembangunan dapat terlihat untuk umum

Fitur baru dalam HTML5 :

• Unsur kanvas untuk menggambar
• Video dan elemen audio untuk media pemutaran
• Dukungan yang lebih baik untuk penyimpanan secara offline
• Elemen konten yang lebih spesifik, seperti artikel, footer, header, nav, section
• Bentuk kontrol form seperti kalender, tanggal, waktu, email, url, search.

Beberapa browser sudah mendukung HTML5 seperti safari, chrome, firefox, dan opera. Kabarnya IE9 ( Internet Explorer ) akan mendukung beberapa fitur dari HTML5.

Pembuatan HTML5 juga di karenakan Standard HTML4 yang dijumpai banyak memiliki kelemahan untuk mendukung aplikasi web yang interaktif. Akibat hal ini banyak orang menambahkan fitur baru baik disisi aplikasi web ataupun disisi browser. Solusi ini dikenal dengan plugin dan salah satunya adalah Flash dan Silverlight.

Semakin menjamurnya plugin didalam aplikasi atau browser membuat aplikasi web ini susah untuk menembus banyak browser. Hal ini dikarenakan setiap plugin mempunyai cara yang berbeda-beda, sebagai contoh kita ingin memasang plugin flash untuk sharing video maka pada halaman web kita harus ditulis sebagai berikut

<object type="application/x-shockwave-flash" width="400" height="220" wmode="transparent" data="flvplayer.swf?file=movies/holiday.flv">
<param name="movie" value="flvplayer.swf?file=movies/holiday.flv" />
<param name="wmode" value="transparent" />
</object>

Contoh diatas menggunakan plugin Flash dari Adobe untuk menjalankan aplikasi web pada browser maka lain caranya bila kita menggunakan Silverlight. Teknologi Silverlight dikembangkan oleh Microsoft. Contoh penggunaan Silverlight pada halaman web dapat dilihat pada HTML dibawah ini

<object width="300" height="300" data="data:application/x-silverlight-2," type="application/x-silverlight-2" >
<param name="source" value="SilverlightApplication1.xap"/>
</object>

HTML5 ini dibuat menyederhanakan kompleksitas penggunaan media video dengan standard baru yaitu penggunaan tag <video>. Dengan fitur baru ini maka kita cukup menulis script untuk menjalankan file video sebagai berikut

<video src=tutorialku.mp4>
</video>

Isu bagaimana menjalankan file video pada aplikasi web merupakan salah satu contoh bagaimana HTML4 tidak dapat mencakup masalah ini dan masih banyak lagi isu pada HTML4. Oleh karena itu, kita sudah saatnya memanfaatkan HTML5 sebagai standard aplikasi web kita.

Apakah Browser Saya Support HTML5?

Bagaimana caranya untuk menguji apakah browser yang anda install itu sudah support HTML5 atau tidak dan seberapa banyak fitur HTML5 yang disupport? Caranya cukup mudah, pertama-tama pastikan komputer anda sudah terhubung dengan internet dan arahkan ke alamat web sebagai berikut:

http://html5test.com

Dari data yang ada pada website itu browser Maxthon 3.4.1 merupakan browser terbaik dalam hal mendukung bahasa HTML5 dengan 422 total skor diikuti kemudian dengan google Chrome 20 dengan 414 total skor kemudian berturut-turut Opera 12.00 dengan 385, Firefox 13 dengan 345, Safari 5.1 dengan 317 dan Internet Explorer 9 dengan 138 point.

Sedikit pemahaman tentang framework???

Definisi Frameworks

Frameworks atau kerangka kerja digunakan untuk membangun aplikasi, dimana aturan-aturan dalam proses pengembangan aplikasi mengikuti ketetapan yang ada pada kerangka kerja. Aturan-aturan dalam kerangka kerja meliputi kode standar, konfigurasi program, dan alur kerja framework.

Frameworks adalah kumpulan dari file-file pustaka (libraries) atau class-class yang terdapat dalam suatu kerangka kerja yang mendukung dalam pengembangan aplikasi secara terstruktur dan independent terhadap aplikasi.

Software Framework adalah sebuah desain yang bisa digunakan berulang-ulang (re-usable design) untuk sebuah sistem atau sub sistem piranti lunak.

Didalam software frameworks mungkin terdapat bagian-bagian berikut :

• Program-program pendukung
• Kode pustaka (libraries)
• Skrip bahasa pemrograman
• Software lain yang membantu pengembangan aplikasi.

Kesemua bagian bekerja sama menyatukan komponen-komponen yang berbeda pada sebuah aplikasi yang dikembangkan.

Beberapa bagian frameworks dijelaskan melalui dokumentasi tentang class-class pada aplikasi yang berisi variabel dan fungsi-fungsi atau disebut API (Application Program Interfaces).

Manfaat Frameworks

Dalam mengembangkan program aplikasi dengan pendekatan RAD (Rapid Application Development), seharusnya programmer dalam membuat kode program tidak berulang-ulang. Programmer dapat membuat metode atau fungsi yang dapat di kustomisasi dan kelak program tersebut dapat digunakan kembali (re-usable program). Programmer dapat membuat komponen-komponen program yang dapat digunakan pada beberapa project yang berbeda.

Tren pengembangan software saat ini menghendaki program yang re-usable, berbasis komponen dan program berorientasi object. Paradigma praktisi IT kini berubah dari yang awalnya melakukan peng-kodean (coding) dari awal “code from stretch” menjadi pengembang (developers) yang cenderung membangun sesuatu dari sesuatu, membangun sebuah aplikasi berdasarkan kerangka kerja atau frameworks.

Programmer atau developers dapat menggunakan frameworks yang sudah ada dalam pembuatan suatu aplikasi program. Dengan menggunakan frameworks akan didapat banyak manfaat diantaranya :

1. Speed of Development : Mempercepat pengembangan aplikasi.
2. Robustness: Aplikasi yang mempunyai performa dan keamanan yang tangguh.
3. Simple : Kode dan logika yang terdapat dalam aplikasi tertata dengan rapi, terjaga tetap teratur, mudah dibaca sehingga akan mempermudah proses maintenance-nya.

Namun demikian ada juga hal-hal yang perlu diperhatikan dalam menggunakan frameworks, diantaranya :

1. High Curve of Learning : Untuk mempelajari sebuah frameworks diperlukan energi yang cukup besar, proses awal belajar akan menemui banyak kendala dan kesulitan, dibeberapa kasus frameworks didapatkan minimnya dokumentasi dan contoh program, namun demikian biasanya terdapat komunitas atau forum yang dapat membantu mempelajari frameworks. Semua hal ini akan terbayarkan oleh kecepatan dan kemudahan pada saat anda telah menguasai frameworks.
2. Large Resouces : Beberapa pihak mengklaim penggunaan frameworks dapat berpengaruh pada performa aplikasi karena banyaknya kode pustaka (libraries) yang dibutuhkan oleh sebuah arsitektur frameworks yang komplek. Hal ini masih dalam perdebatan, namun dengan memahami kekurangan framework yang berakibat pada performa aplikasi, programmer dapat melakukan tuning atau menyempurnakan kekurangan program, karena sesuatu hal tidak ada yang sempurna, demikian halnya dengan framework. Perbaikan dengan melaporkan bugs ke forum atau milis dan melakukan patch dapat membuat frameworks lebih baik dari sebelumnya.