PEMROGRAMAN WEB
advertisement
PEMROGRAMAN WEB 10 – Introduction to HTML5 Andi WRE HTML 5 The New HTML Standard The next generation of HTML Hasil kerjasama antara World Wide Web Consortium (W3C) dan the Web Hypertext Application Technology Working Group (WHATWG) Beberapa aturan yang diterapkan pada HTML 5 : - Fitur-fitur baru harus berbasis HTML, CSS, DOM, dan JavaScript - Mengurangi kebutuhan plugin eksternal - Penanganan error yang lebih baik - Element baru untuk menggantikan scripting - Proses pengembangan harus dapat dilihat oleh publik Here comes your footer to HTML5 Web Programming – Introduction Fitur baru HTML5 Fitur baru : - New Elements - New Attributes - Full CSS3 Support - Video and Audio - 2D/3D Graphics - Local Storage - Local SQL Database - Web Applications Di-support oleh sebagian besar browser utama (Safari, Chrome, Firefox, Opera, Internet Explorer) Here comes your footer to HTML5 Web Programming – Introduction Element HTML 4 yang Hilang <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt> Here comes your footer to HTML5 Web Programming – Introduction <!DOCTYPE> Mendefinisikan versi bahasa markup yang digunakan <!DOCTYPE> HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <!DOCTYPE> HTML 5 <!DOCTYPE html> Here comes your footer to HTML5 Web Programming – Introduction Struktur Minimal HTML 5 Here comes your footer to HTML5 Web Programming – Introduction Canvas Digunakan untuk menggambar grafik dengan menggunakan scripting Menggunakan sistem koordinat Sintaks : <canvas></canvas> Atribut : • id : identitas objek canvas • width : lebar kanvas • height : tinggi kanvas Canvas memiliki area berbentuk persegi panjang Proses draw dilakukan di JavaScript Gunakan JavaScript untuk mengakses setiap pixel-nya Here comes your footer to HTML5 Web Programming – Introduction Canvas Contoh : Canvas sudah terbentuk, tapi tidak terlihat karena tidak ada border, berikan style untuk memberi border (Konten Fallback) Akan ditampilkan jika browser tidak mendukung element canvas Here comes your footer to HTML5 Web Programming – Introduction canvas.getContext("2d") The getContext("2d") object is a built-in HTML5 object Proses dilakukan di JavaScript Sintaks : Here comes your footer to HTML5 Web Programming – Introduction Canvas (Draw Line) Method Description beginPath() memulai path baru, atau menghapus path yang sudah ada moveTo(x,y) berpindah titik tanpa ada penggambaran garis lineTo(x,y) bergerak dari titik terakhir ke titik (x,y) dengan penggambaran garis lurus stroke() menambahkan hasil penggambaran ke canvas closePath() menutup kembali path dari titik terakhir ke titik awal (Completes the path) Here comes your footer to HTML5 Web Programming – Introduction Canvas (Draw Circle) Sintaks : arc(x,y,r,sAngle,eAngle,[counterClockwise]); Parameter Values Description x x-coordinate Koordinat x sebagai titik pusat lingkaran y y-coordinate Koordinat y sebagai titik pusat lingkaran r radius Jari-jari lingkaran sAngle number Sudut lingkaran awal eAngle number Sudut lingkaran akhir counterClockwise true/false Optional, arah putaran penggambaran lingkaran searah jarum jam atau tidak Here comes your footer to HTML5 Web Programming – Introduction Canvas (Draw Circle) Here comes your footer to HTML5 Web Programming – Introduction Canvas (Draw Rectangle) Sintaks : rect(x,y,w,h) Parameter Values Description x x-coordinate Koordinat x sebagai titik awal (upperleft) y y-coordinate Koordinat y sebagai titik awal (upperleft) width width Lebar persegi panjang (pixel) height height Tinggi persegi panjang (pixel) Here comes your footer to HTML5 Web Programming – Introduction Canvas (Clear Rectangle) Menghapus seluruh pixel yang ada pada area rectangle Sintaks : clearRect(x,y,width,height); Parameter Values Description x x-coordinate Koordinat x sebagai titik awal (upperleft) y y-coordinate Koordinat y sebagai titik awal (upperleft) width width Lebar persegi panjang (pixel) height height Tinggi persegi panjang (pixel) Here comes your footer to HTML5 Web Programming – Introduction Canvas (Colors and Styles) ctx.lineCap="round"; ctx.lineJoin="round"; ctx.lineJoin="miter"; ctx.shadowOffsetX=30; ctx.miterLimit=5; Here comes your footer to HTML5 Web Programming – Introduction Canvas (Linear Gradient) Sintaks : createLinearGradient(x0,y0,x1,y1); addColorStop(position,color); Here comes your footer to HTML5 Web Programming – Introduction Canvas (Linear Gradient) fillRect(x,y,width,height); Here comes your footer to HTML5 Web Programming – Introduction Canvas (Radial Gradient) Sintaks : createRadialGradient(x0,y0,r0,x1,y1,r1); Here comes your footer to HTML5 Web Programming – Introduction Canvas (Image) Sintaks : drawImage(img,x,y,width,height,dx,dy,dwidth,dheight); Here comes your footer to HTML5 Web Programming – Introduction Canvas (Image) Here comes your footer to HTML5 Web Programming – Introduction Input Type Color <input type="color" name="favcolor" /> Date <input type="date" name="bday" /> Here comes your footer to HTML5 Web Programming – Introduction Input Type Datetime <input type="datetime" name="bdaytime" /> Email Alamat email yang dimasukan user akan otomatis di validasi <input type="email" name="usremail" /> Note : Safari on iPhone recognizes the email type, and changes the on-screen keyboard to match it (adds @ and .com options) Here comes your footer to HTML5 Web Programming – Introduction Input Type Number <input type="number" name="points" min="0" max="10" step="3" value="6" /> Atribut : - Min - Max - Step - Value : menentukan angka minimum : menentukan angka maksimum : interval : menentukan angka default Range <input type="range" name="points" min="1" max="10" /> Here comes your footer to HTML5 Web Programming – Introduction Drag and Drop Mengambil objek dan menariknya ke lokasi yang berbeda. 1. Buat element dapat di drag (draggable) <img draggable="true" /> 2. Buat area sebagai tempat ketika element di drop • Atribut ondragstart memanggil function drag(event), untuk menentukan element apa yang akan ditarik (drag) 3. Function drag(ev) • • Method dataTransfer.setData() set tipe data dan value dari element yang ditarik (drag) Pada contoh ini tipe datanya adalah "Text" dan value-nya adalah id dari element yang ditarik ("drag1") Here comes your footer to HTML5 Web Programming – Introduction Drag and Drop 4. Atribut ondragover pada element div menspesifikasikan dimana element yang ditarik (drag) dapat ditempatkan (drop) Note : Secara default, data/element tidak dapat ditempatkan (drop) pada element lain. Untuk memungkinkan di drop, maka kita harus mencegah (prevent) penanganan default browser pada element tsb 5. Do the Drop, Atribut ondrop pada element div menspesifikasikan aksi yang akan dijalankan ketika sebuah element di drop pada div tersebut. • Get data dari element yg di tarik (drag) dengan dataTransfer.getData("Text") method. • Pada contoh ini element yang di-drag adalah element dengan id ("drag1") • Tambahkan (append) element yang di-drag ke element drop • Panggil preventDefault() mencegah (prevent) penanganan default browser pada element Here comes your footer to HTML5 Web Programming – Introduction Drag and Drop CSS Drag and drop here! Here comes your footer to HTML5 Web Programming – Introduction Video Menambahkan video pada halaman web tanpa menggunakan plug-in (cth : flash) Format video : mp4, ogg Here comes your footer to HTML5 Web Programming – Introduction Video + DOM (Document Object Model) Here comes your footer to HTML5 Web Programming – Introduction Latihan Buatlah animasi Zoom In sebuah lingkaran yang berada pada sebuah canvas (300x250)px. Posisi dari lingkaran ditentukan secara acak. Titik X yang diacak adalah 150, 65, 235 dan titik Y yang diacak adalah 125, 185, 65. Lingkaran dimulai dengan jari-jari berjarak 10 dari titik pusat dan akan membesar dengan penambahan 10 secara terus menerus sampai jari-jari berjarak 50. Jika sudah mencapai jarak 50, maka lingkaran berpindah posisi. Here comes your footer to HTML5 Web Programming – Introduction