HTML5 & Chrome Extension Workshop // Femaledev.com Sunday, July 21, 2013 2.00 - 7.00 PM Universitas Brawijaya, Jalan Veteran, 65145, Indonesia (TBC)

1. FemaleDev
Workshop
Simple web app + Chrome extension
dengan HTML 5
Hafiz Rahman (@hfz)

2. Ngapain sih
belajar HTML 5?

3. Karena HTML 5 itu...
1. Bahan dasar dari Web!
2. Lumayan gampang
3. Dipakai di mana-mana! (Mobile apps, Chrome extension,
Windows 8)

4. Dan yang lebih
keren lagi...

5. Mobile apps!

6. Memakai Framework
1. Sencha Touch
2. PhoneGap
3. dan kawan-kawan...
Partial HTML 5
1. Instagram
2. Tweetdeck

8. Use view-sourceIt's awesome

10. HTML 5
CSS 3
JavaScript

11. HTML 5
Struktur

12. File: .html
Konten "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>

13. CSS 3
Tampilan

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

15. JavaScript
Behavior

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

17. Contoh penggunaan JS:
Pengurutan dalam tabel
Tambah / hapus komentar di Facebook
Menampilkan slider / carousel / galeri
Zoom image

18. jQuery
Framework JavaScript yang direkomendasikan
Banyak dipakai
Lebih mudah dipahami
Banyak plugin tersedia

19. Front-end Developer
Bukan pemrograman ;)
HTML 5
CSS 3
Pemrograman
JavaScript

20. Fitur-fitur advanced HTML 5
Animasi
Audio / Video
Custom font
Macam-macam styling: text-shadow, box-shadow,
gradient, opacity
Drag and drop
...dan seterusnya

21. Questions?