Saturday, March 03, 2012

HTML5 SVG : BAB 8

Apa SVG?

  • SVG adalah singkatan dari Scalable Vector Graphics
  • SVG digunakan untuk mendefinisikan vektor berbasis grafis untuk Web
  • SVG mendefinisikan grafis dalam format XML
  • Grafis SVG TIDAK kehilangan kualitas apa pun jika mereka diperbesar atau diubah ukurannya
  • Setiap elemen dan atribut setiap file SVG dapat animasi
  • SVG adalah rekomendasi W3C

Keuntungan SVG

Keuntungan menggunakan SVG lebih format gambar lain (seperti JPEG dan GIF) adalah:

  • Gambar SVG dapat dibuat dan diedit dengan editor teks apapun
  • Gambar SVG dapat dicari, diindeks, scripted, dan dikompresi
  • Gambar SVG yang terukur
  • Gambar SVG dapat dicetak dengan kualitas tinggi dengan resolusi apapun
  • Gambar SVG adalah zoomable (dan gambar dapat diperbesar tanpa degradasi)

Browser Dukungan

Internet Explorer Firefox Opera Google Chrome Safari

Internet Explorer 9, Firefox, Opera, Chrome, dan Safari mendukung inline SVG.

Embed SVG Langsung Ke Halaman HTML

Dalam HTML5, Anda dapat menanamkan elemen SVG langsung ke halaman HTML Anda:

Contoh

<!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>


Cobalah sendiri »

Hasil:

U

Diposkan oleh di No comments:

Friday, March 02, 2012

HTML5 kanvas : BAB 7




Apa kanvas?



Unsur <canvas> HTML5 digunakan untuk menggambar grafik, dengan cepat, melalui scripting (JavaScript biasanya).


Unsur <canvas> hanya wadah untuk grafis, Anda harus menggunakan script untuk benar-benar menarik grafis.


Kanvas adalah wilayah ditarik didefinisikan dalam kode HTML dengan atribut tinggi dan lebar.


Kanvas memiliki beberapa metode untuk path gambar, kotak, lingkaran, karakter, dan gambar menambahkan.




Buat kanvas



Sebuah kanvas ditentukan dengan elemen <canvas>.


Tentukan id, lebar, dan tinggi dari elemen <canvas>:



 
<canvas id="myCanvas" width="200" height="100"></canvas>






Menggambar Dengan JavaScript



Unsur <canvas> tidak memiliki kemampuan menggambar sendiri.


Semua gambar harus dilakukan di dalam JavaScript:



 
<script type="text/javascript">

    var c=document.getElementById("myCanvas");
    var ctx=c.getContext("2d");
    ctx.fillStyle="#FF0000";
    ctx.fillRect(0,0,150,75);
    </script>

 


JavaScript menggunakan id untuk menemukan elemen <canvas>:



 
var c=document.getElementById("myCanvas");



Kemudian, membuat objek konteks:



 
var ctx=c.getContext("2d");



Para getContext ("2d") objek adalah built-in HTML5 objek, dengan banyak metode untuk menggambar jalan, kotak, lingkaran, karakter, gambar dan banyak lagi.


Dua baris berikutnya menggambar persegi panjang merah:



 
ctx.fillStyle="#FF0000";

    ctx.fillRect(0,0,150,75);



Atribut fillStyle membuatnya merah, dan atribut fillRect menentukan bentuk, posisi, dan ukuran.


Diposkan oleh di No comments:

HTML5 Drag dan Drop : BAB 6




Drag dan Drop



Drag dan drop adalah fitur yang sangat umum. Ini adalah ketika Anda "ambil" obyek dan tarik ke lokasi yang berbeda.


Dalam HTML5, drag dan drop merupakan bagian dari standar, dan setiap elemen bisa draggable.




Browser Dukungan



Internet Explorer Firefox Opera Google Chrome Safari


Internet Explorer 9, Firefox, Chrome, dan Safari 5 dukungan drag dan drop.


Catatan: Drag dan drop tidak bekerja di Safari 5.1.2.




HTML5 Drag dan Drop Contoh



Contoh di bawah adalah drag dan drop sederhana misalnya:



 

Contoh


 
<!DOCTYPE HTML>

    <html>
    <head>
    <script type="text/javascript">
    function allowDrop(ev)
    {
    ev.preventDefault();
    }
   
    function drag(ev)
    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }
   
    function drop(ev)
    {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    }
    </script>
    </head>
    <body>
   
    <div id="div1" ondrop="drop(event)"
    ondragover="allowDrop(event)"></div>
    <img id="drag1" src="img_logo.gif" draggable="true"
    ondragstart="drag(event)" width="336" height="69" />
   
    </body>
    </html>

 


Mungkin terlihat rumit, tapi mari kita pergi melalui semua bagian yang berbeda dari acara drag dan drop.




Membuat draggable Elemen



Pertama-tama: Untuk membuat draggable elemen, mengatur atribut draggable untuk benar:



 
<img draggable="true" />






Apa yang harus Drag - ondragstart dan setData ()



Kemudian, tentukan apa yang harus terjadi ketika elemen diseret.


Dalam contoh di atas, atribut ondragstart panggilan fungsi, drag (event), yang menentukan data apa yang akan diseret.


Para dataTransfer.setData () metode menetapkan tipe data dan nilai data diseret:



 
function drag(ev)

    {
    ev.dataTransfer.setData("Text",ev.target.id);
    }



Dalam hal ini, jenis data "Teks" dan nilai adalah id dari elemen draggable ("drag1").




Dimana Drop - ondragover



Acara ondragover menentukan dimana data diseret dapat dijatuhkan.


Secara default, data / unsur yang tidak dapat dijatuhkan dalam unsur lainnya. Untuk memungkinkan setetes, kita harus mencegah penanganan default dari elemen.


Hal ini dilakukan dengan memanggil event.preventDefault () metode untuk acara ondragover:



 
event.preventDefault()






Apakah Drop - ondrop



Ketika data menyeret terjatuh, peristiwa penurunan terjadi.


Dalam contoh di atas, atribut ondrop panggilan fungsi, drop (event):



 
function drop(ev)

    {
    var data=ev.dataTransfer.getData("Text");
    ev.target.appendChild(document.getElementById(data));
    ev.preventDefault();
    }



Kode menjelaskan:


     
  • Dapatkan data diseret dengan metode ("Teks") dataTransfer.getData. Metode ini akan mengembalikan setiap data yang ditetapkan untuk jenis yang sama dalam setData () metode
    •  
  • Data yang diseret adalah id dari elemen diseret ("drag1")
    •  
  • Tambahkan elemen diseret ke elemen penurunan
    •  
  • Call preventDefault () untuk mencegah penanganan default browser dari data

        (default terbuka sebagai link pada drop)


Diposkan oleh di No comments:

HTML5 audio : BAB 5


Audio di Web



Sampai sekarang, belum ada standar untuk memainkan file audio pada sebuah halaman web.


Hari ini, sebagian besar file audio diputar melalui plug-in (seperti flash). Namun, browser yang berbeda mungkin memiliki berbagai plug-in.


HTML5 mendefinisikan sebuah elemen baru yang menentukan cara standar untuk menanamkan file audio pada halaman web: elemen <audio>.




HTML5 Audio - Cara Bekerja



Untuk memainkan file audio di HTML5, ini adalah semua yang Anda butuhkan:

Contoh


 
<audio controls="controls">

   
    <source src="song.ogg" type="audio/ogg" />

    <source src="song.mp3" type="audio/mpeg" />

Your browser does not support the audio element.  
    </audio>


Atribut kontrol menambahkan kontrol audio, seperti play, pause, dan volume.


Anda juga harus memasukkan konten teks antara <audio> dan </ audio> tag untuk browser yang tidak mendukung elemen <audio>.


Unsur <audio> memungkinkan beberapa elemen <source>. elemen <source> dapat link ke file audio yang berbeda. Browser akan menggunakan format diakui pertama.




Audio Format dan Dukungan Browser



Saat ini, ada 3 format file yang didukung untuk elemen <audio>: MP3, Wav, dan Ogg:

BrowserMP3WavOgg
Internet Explorer 9YANONO
Firefox 4.0NOYAYA
Google Chrome 6YAYAYA
Apple Safari 5YAYANO
Opera 10,6NOYAYA



HTML5 Audio Tags


TagDeskripsi
<audio>Mendefinisikan isi suara
<source>Mendefinisikan beberapa sumber daya media untuk elemen media, seperti <video> dan <audio>



Diposkan oleh di No comments:

HTML5 video DOM : BAB 4


HTML5 <video> - Kendalikan Menggunakan DOM

Unsur <video> HTML5 juga memiliki metode, properti, dan peristiwa.
Ada beberapa metode untuk bermain, berhenti, dan loading, misalnya. Ada sifat (misalnya durasi, volume, mencari) yang dapat membaca atau ditetapkan. Ada juga peristiwa DOM yang dapat memberitahu Anda, misalnya, ketika elemen <video> mulai bermain, dijeda, berakhir, dll

HTML5 <video> - Metode, Properties, dan Acara

Tabel di bawah menguraikan metode video, sifat, dan peristiwa didukung oleh kebanyakan browser

MetodePropertiAcara
bermain ()currentSrcbermain
jeda ()currentTimeberhenti sebentar
load ()videoWidthkemajuan
canPlayTypevideoHeightkesalahan
lamanyatimeupdate
berakhirberakhir
kesalahanmenggugurkan
berhentikosong
diredamdikosongkan
pencarianmenunggu
volumeloadedmetadata
tinggi
lebar
Catatan: Dari properti video, hanya videoWidth dan videoHeight segera tersedia. Sifat lain yang tersedia setelah meta data video telah dimuat.





Diposkan oleh di No comments:
Subscribe to: Posts (Atom)

info link