PEMROGRAMAN WEB 10 Introduction to HTML5

Ukuran: px

Mulai penontonan dengan halaman:

Download "PEMROGRAMAN WEB 10 Introduction to HTML5"

Utami Lesmana
9 tahun lalu
Tontonan:

1 PEMROGRAMAN WEB 10 Introduction to HTML5 Andi WRE

2 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 Web Programming Introduction to HTML5

3 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)

4 Element HTML 4 yang Hilang <acronym> <applet> <basefont> <big> <center> <dir> <font> <frame> <frameset> <noframes> <strike> <tt>

5 <!DOCTYPE> Mendefinisikan versi bahasa markup yang digunakan <!DOCTYPE> HTML 4 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" " <!DOCTYPE> HTML 5 <!DOCTYPE html>

6 Struktur Minimal HTML 5

7 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

8 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

9 canvas.getcontext("2d") The getcontext("2d") object is a built-in HTML5 object Proses dilakukan di JavaScript Sintaks :

10 Canvas (Draw Line) Method beginpath() moveto(x,y) lineto(x,y) stroke() closepath() Description memulai path baru, atau menghapus path yang sudah ada berpindah titik tanpa ada penggambaran garis bergerak dari titik terakhir ke titik (x,y) dengan penggambaran garis lurus menambahkan hasil penggambaran ke canvas menutup kembali path dari titik terakhir ke titik awal (Completes the path)

11 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

12 Canvas (Draw Circle)

13 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)

14 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)

15 Canvas (Colors and Styles) ctx.linecap="round"; ctx.linejoin="round"; ctx.linejoin="miter"; ctx.miterlimit=5; ctx.shadowoffsetx=30;

16 Canvas (Linear Gradient) Sintaks : createlineargradient(x0,y0,x1,y1); addcolorstop(position,color);

17 Canvas (Linear Gradient) fillrect(x,y,width,height);

18 Canvas (Radial Gradient) Sintaks : createradialgradient(x0,y0,r0,x1,y1,r1);

19 Canvas (Image) Sintaks : drawimage(img,x,y,width,height,dx,dy,dwidth,dheight);

20 Canvas (Image)

21 Input Type Color <input type="color" name="favcolor" /> Date <input type="date" name="bday" />

22 Input Type Datetime <input type="datetime" name="bdaytime" /> Alamat yang dimasukan user akan otomatis di validasi <input type=" " name="usr " /> Note : Safari on iphone recognizes the type, and changes the on-screen keyboard to match it and.com options)

23 Input Type Number <input type="number" name="points" min="0" max="10" step="3" value="6" /> Atribut : - Min : menentukan angka minimum - Max : menentukan angka maksimum - Step : interval - Value : menentukan angka default Range <input type="range" name="points" min="1" max="10" />

24 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")

25 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

26 Drag and Drop CSS Drag and drop here!

27 Video Menambahkan video pada halaman web tanpa menggunakan plug-in (cth : flash) Format video : mp4, ogg

28 Video + DOM (Document Object Model)

29 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.

dokumen-dokumen yang mirip

BAB III Validasi HTML5

1 Modul Praktikum Pemprograman Web BAB III Validasi HTML5 A. Tujuan Memahami konsep dasar active web page, Mampu menghasilkan halaman web yang interaktif, Mampu memanfaatkan validasi data menggunakan HTML5.