simple web app + chrome extension dengan html 5 : overview // femaledev
DESCRIPTION
HTML5 & Chrome Extension Workshop // Femaledev.com Sunday, July 21, 2013 2.00 - 7.00 PM Universitas Brawijaya, Jalan Veteran, 65145, Indonesia (TBC)TRANSCRIPT
![Page 1: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/1.jpg)
FemaleDevWorkshop
Simple web app + Chrome extensiondengan HTML 5
Hafiz Rahman (@hfz)
![Page 2: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/2.jpg)
Ngapain sihbelajar HTML 5?
![Page 3: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/3.jpg)
Karena HTML 5 itu...1. Bahan dasar dari Web!2. Lumayan gampang3. Dipakai di mana-mana! (Mobile apps, Chrome extension,
Windows 8)
![Page 4: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/4.jpg)
Dan yang lebihkeren lagi...
![Page 5: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/5.jpg)
Mobile apps!
![Page 6: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/6.jpg)
Memakai Framework1. Sencha Touch2. PhoneGap3. dan kawan-kawan...
Partial HTML 51. Instagram2. Tweetdeck
![Page 7: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/7.jpg)
![Page 8: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/8.jpg)
Use view-sourceIt's awesome
![Page 9: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/9.jpg)
![Page 10: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/10.jpg)
HTML 5CSS 3
JavaScript
![Page 11: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/11.jpg)
HTML 5Struktur
![Page 12: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/12.jpg)
File: .htmlKonten "dibungkus" tag
<header> <h1>Judul</h1></header><nav id="menu"> <ul> <li>Homepage</li> <li>Products</li> <li>About Us</li> </ul></nav><div id="konten"> <p>Paragraf teks</p> <button>Klik di sini</button></div>
![Page 13: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/13.jpg)
CSS 3Tampilan
![Page 14: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/14.jpg)
Deklarasih1 { font-family: Arial, sans-serif; font-size: 14px; color: #333333;}
![Page 15: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/15.jpg)
JavaScriptBehavior
![Page 16: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/16.jpg)
Di file .JS
Di file .html
Hasilnya...Klik di sini
function klikTombol() { alert("Selamat! Tombol mouse kamu masih jalan!");}
<button onclick="klikTombol()">Klik di sini</button>
![Page 17: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/17.jpg)
Contoh penggunaan JS:Pengurutan dalam tabelTambah / hapus komentar di FacebookMenampilkan slider / carousel / galeriZoom image
![Page 18: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/18.jpg)
jQueryFramework JavaScript yang direkomendasikanBanyak dipakaiLebih mudah dipahamiBanyak plugin tersedia
![Page 19: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/19.jpg)
Front-end DeveloperBukan pemrograman ;)
HTML 5CSS 3
PemrogramanJavaScript
![Page 20: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/20.jpg)
Fitur-fitur advanced HTML 5AnimasiAudio / VideoCustom fontMacam-macam styling: text-shadow, box-shadow,gradient, opacityDrag and drop...dan seterusnya
![Page 21: Simple web app + chrome extension dengan html 5 : Overview // Femaledev](https://reader034.vdocuments.mx/reader034/viewer/2022051323/54b604ea4a7959e6128b45d2/html5/thumbnails/21.jpg)
Questions?