FemaleDevWorkshop

Simple web app + Chrome extensiondengan HTML 5

Hafiz Rahman (@hfz)

Ngapain sihbelajar HTML 5?

Karena HTML 5 itu...1. Bahan dasar dari Web!2. Lumayan gampang3. Dipakai di mana-mana! (Mobile apps, Chrome extension,

Windows 8)

Dan yang lebihkeren lagi...

Mobile apps!

Memakai Framework1. Sencha Touch2. PhoneGap3. dan kawan-kawan...

Partial HTML 51. Instagram2. Tweetdeck

Use view-sourceIt's awesome

HTML 5CSS 3

JavaScript

HTML 5Struktur

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>

CSS 3Tampilan

Deklarasih1 { font-family: Arial, sans-serif; font-size: 14px; color: #333333;}

JavaScriptBehavior

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>

Contoh penggunaan JS:Pengurutan dalam tabelTambah / hapus komentar di FacebookMenampilkan slider / carousel / galeriZoom image

jQueryFramework JavaScript yang direkomendasikanBanyak dipakaiLebih mudah dipahamiBanyak plugin tersedia

Front-end DeveloperBukan pemrograman ;)

HTML 5CSS 3

PemrogramanJavaScript

Fitur-fitur advanced HTML 5AnimasiAudio / VideoCustom fontMacam-macam styling: text-shadow, box-shadow,gradient, opacityDrag and drop...dan seterusnya

Questions?