Jumat, 11 Oktober 2013

Fitur-fitur pada HTML5

           Kehadiran HTML5 dinilai cukup membantu dengan penambahan beberapa fitur baru. Pada postingan kali ini saya akan menjelaskan apa saja fitur baru yang dimaksud dan bagaimana penggunaan untuk setiap fitur baru tersebut. Pada HTML5 terdapat beberapa penambahan diantaranya sebagai berikut.
- Elemen Canvas
- Elemen Media
- Elemen Form
- Elemen Semantik / Struktural

1. Canvas
Elemen canvas digunakan untuk draw atau menggambar. Canvas hanya saja disini bukan alat untuk menggambar tapi hanya sebagai media pendukung untuk menggambar. Untuk menggambar dengan grafik disini biasanya dengan menggunakan javascript.
Contoh penggunaan Canvas.

<canvas id="myCanvas"></canvas><!--canvas yang akan digambar-->
<script type="text/javascript">//Scipt untuk menggambar-->
var canvas=document.getElementById('myCanvas');//fungsi untuk menggambar canvas
var ctx=canvas.getContext('2d');//gambar bujursangkar pertama
ctx.fillStyle='#FF0000';//memberikan warna pada bagian canvas
ctx.fillRect(0,0,80,100);//memberikan parameter titik koordinat
</script>//mengakhiri script canvas

Output :
Canvas diatas juga bisa diatur ukurannya dengan memasukkan attribut height dan weight pada tag canvas dengan cara <canvas id=”mycanvas” height=”300px” weight=”300px”></canvas>.

2. Audio
Untuk memasukkan suara pada html bisa menggunakan tag <audio>.  Format suara yang telah didukung hingga saat ini adalah MP3, Ogg dan WAP.  Untuk dukungan pada web browser bisa dilihat pada tabel berikut ini.

Browser
MP3
Wav
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP3
YES
YES
Safari
YES
YES
NO
Opera
NO
YES
YES
Dan untuk MIME-nya adalah sebagai berikut ini.
Format
MIME-type
MP3
audio/mpeg
Ogg
audio/ogg
Wav
audio/wav
Untuk attribut audio diatas adalah seperti tabel berikut ini.
Attributes
Attribut
Value
Deskripsi
autoplay
autoplay
Untuk memulai audio secara otomatis pada web terbuka
controls
controls
Untuk menampilkan kontrol seperti volome, seek audio, dan juga tombol untuk memulai/pause
loop
Untuk mengulang audio kembali setelah pemutaran awal selesai
muted
Untuk mematikan suara
auto
metadata
none
Untuk memuat ulang audio ketika halaman dimuat ulang
URL
Untuk memberikan alamat web audio ketika diklik.
Contoh Script :
<audio controls> <--memasukkan media audio-->
  <source src="horse.ogg" type="audio/ogg"><-- mengambil path audio-->
  <source src="horse.mp3" type="audio/mpeg"><-- mengambil path audio-->
  Your browser does not support the audio tag.
</audio><-- menutup tag audio-->

3. Video
Sama halnya dengan audio, hanya saja untuk video kita gunakan tag <video> dan menutupnya kembali dengan </video>. Untuk format yang didukung saat ini ada 3 yaitu MP4, Ogg dan WebM.

Browser
MP4
WebM
Ogg
Internet Explorer
YES
NO
NO
Chrome
YES
YES
YES
Firefox
NO
Update: Firefox 21 running on Windows 7, Windows 8, Windows Vista, and Android now supports MP4
YES
YES
Safari
YES
NO
NO
Opera
NO
YES
YES
Untuk MIME-nya sendiri menggunakan seperti tabel beikut ini.
Format
MIME-type
MP4
video/mp4
WebM
video/webm
Ogg
video/ogg
Untuk attribut yang bisa digunakan pada tag video adlah sebagai berikut ini.
Attribute
Value
Deskripsi
autoplay
Memulai secara otomatis video
controls
Untuk menampilkan control video
height
pixels
Untuk mengatur tinggi frame video
loop
Memutar video secara berulang-ulang
muted
Untuk mematikan fungsi suara pada video
URL
Untuk memunculkan poster/gambar pada saat video buffer atau diunduh.
auto
metadata
none
Untuk memuat ulang video
URL
Untuk memberikan link video
pixels
Untuk mengatur lebar frame video
4. Source
Source digunakan disini sama halnya untuk keperluan video dan audio, hanya saja pada <source> akan kita gunakan jika kita memberikan 2 sumber dimana file tersebut memiliki isi yang sama tetapi format yang berbeda. Tujuannya disini adalah web browser akan memilih memutar yang mana  nantinya sesuai dengan format yang didukung oleh web browser.
Contoh penggunaan <Source> </source> :
<audio controls>
  <source src="horse.ogg" type="audio/ogg"> <--sumber audio 1 ekstensi ogg-->
  <source src="horse.mp3" type="audio/mpeg"><--sumber audio 2 ekstensi mp3-->
Your browser does not support the audio element.
</audio>

Attribut 
Attribute
Value
Deskripsi
media
media_query
Format dari media yang digunakan
src
URL
Untuk memberikan link sumber media
type
MIME_type
Untuk mendefenisikan tipe MIME

5. Embed
      Embed digunakan untuk melampirkan file dari eksternal seperti *.swf dan lain-lain.
Untuk contoh penggunaannya adalah sebagai berikut ini.
<embed src="helloworld.swf"><--Melampirkan file flash-->
Untuk attribut penggunaan embed bisa ditambahkan pada tag tersebut attribut seperti pada tabel berikut ini.
Attributes
Attribute
Value
Description
height
pixels
Untuk mendefenisikan ukuran tinggi frame media.
src
URL
Untuk memberikan sumber media yang dilampirkan
type
MIME_type
Untuk menspesifikasikan tipe dari MIME
width
pixels
Untuk mengatur lebar dari frame media pada saat program dijalankan di browser.
6. Track
Track disini digunakan untuk melampirkan seperti subtitle text pada media. Contoh penggunaanya adalah sebagai berikut ini.
<video width="320" height="240" controls>
  <source src="forrest_gump.mp4" type="video/mp4">
  <source src="forrest_gump.ogg" type="video/ogg">
  <track src="subtitles_en.vtt" kind="subtitles" srclang="en"
  label="English"><--Merupakan subtitle yang dilampirkan pada video-->
  <track src="subtitles_no.vtt" kind="subtitles" srclang="no"
  label="Norwegian">
</video>

Attribut yang bisa digunakan padatag track ini adalah sebagai berikut ini.
Attribute
Value
Deskripsi
default
default
Memberikan text default/subtitle pada video
kind
captions
chapters
descriptions
metadata
subtitles
Menspesifikasikan format dari text yang akan dimunculkan pada layar
label
text
Memberikan labael pada subtitle
src
URL
Merupakan suatu keharusan jika kita ingin melampirkan file
srclang
language_code
Menspesifikasikan tipe dari file lampiran seperti jenisnya (required if kind="subtitles")
7. SVG
SVG (Scalable Vector Graphics) merupakan tag yang digunakan untuk menggambar selain yang sebelumnya kita gunakan seperti canvas. SVG didefenisikan dengan format XML. Setiap elemen dari SVG dapat dianimasikan. Kelebihan dari SVG ini adalah tidak mengurangi kualitas darigambar jika diperbesar karena berbasis vektor sehingga SVG juga direkomendasikan oleh W3C.
Keuntungan SVG
- Gambar SVG dapat dibuat dan diubah dengan menggunakan banyak text editor  biasa
- Gambar SVG dapat dicari, diindex, dimasukkan ke script dan juga di kompres
- Gambar pada SVG dapat diubah ukurannya
- Gambar SVG dapat dicetak dengan kualitas tinggi pada resolusi berapapun
- Gambar SVG dapat diperbesar tampa mengurangi kualitas gambar

Contoh penggunaan SVG :
<!DOCTYPE html>
<html>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" height="190">
  <polygon points="100,10 40,180 190,60 10,60 160,180"
  style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;">
</svg>

</body>
</html>

Hasil











Perbedaan antara SVG dan Canvas
- SVG adalah sebuah bahasa untuk mendeskripsikan grafik 2D dalam XML
- Canvas menggambar grafik 2D (dengan bantuan javascript)
- SVG adlah dasar XML yang artinya bahwa setiap elemen tersedian utuk SVG DOM  dan juga kita dapat menambahkan javaScript untuk elemen.
- Dalam SVG, setiap gambar yang dibentuk direkomendasikan menjadi sebuah objek. Jika objek SVG diubah maka browser secara otomatis membentuk ulang.
- Canvas mengubah/menterjemahkan berdasarkan pixel dan jika posisi berubah maka kita harus menggambar ulang.

8. Drag and Drop
Drag and Drop adalah sebuah fitur umum. Dengan fitur ini memukinkan untuk memindahkan objek ke lokasi lainnya.
Contoh Program :
<img draggable="true"><-- Memukinkan untuk bisa memindahkan gambar-->

9. Geolocation
Geolocation digunakan untuk mengecek posisi si pengguna jika memukinkan.
Contoh Program :
<script>
var x=document.getElementById("demo");
function getLocation()
  {
  if (navigator.geolocation)
//Jika navigator mendukung pada web browser atau perangkat yang digunaka
    {
    navigator.geolocation.getCurrentPosition(showPosition);
//Mendapatkan posisi terbaru dari si pengguna
    }
  else{x.innerHTML="Geolocation is not supported by this browser.";}
<--Jika perangkat yang digunakan tidak mendukung geolocation
  }
function showPosition(position)
//nama fungsi
  {
  x.innerHTML="Latitude: " + position.coords.latitude + 
  "<br>Longitude: " + position.coords.longitude; 
  }
</script>

10. Input Types
Input tipe pada form yang baru digunakan pada HTML5 trdapat tipe yang baru. Hanya saja tidak semua tipe didukung oleh web browser.
Tag tersebut diataranya adalah sebagai berikut.
color
date
datetime
datetime-local
email
month
number
range
search
tel
time
url
week
Untuk format penggunaan input type tersebut sama hanya dengan input tipe yang digunakan pada form di HTML4 yaitu sebagai berikut ini.
Birthday (date and time): <input type="datetime" name="bdaytime">

Definisi HTML5
Perkembangan HTML5
Kelebihan dan Kekurangan HTML5

Ref : 

Tidak ada komentar: