Simple web app + chrome extension dengan html 5 : Overview // Femaledev

446 views

Published on

HTML5 & Chrome Extension Workshop
// Femaledev.com

Sunday, July 21, 2013
2.00 - 7.00 PM

Universitas Brawijaya,
Jalan Veteran,
65145, Indonesia (TBC)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
446
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
9
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Simple web app + chrome extension dengan html 5 : Overview // Femaledev

  1. 1. FemaleDev Workshop Simple web app + Chrome extension dengan HTML 5 Hafiz Rahman (@hfz)
  2. 2. Ngapain sih belajar HTML 5?
  3. 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. 4. Dan yang lebih keren lagi...
  5. 5. Mobile apps!
  6. 6. Memakai Framework 1. Sencha Touch 2. PhoneGap 3. dan kawan-kawan... Partial HTML 5 1. Instagram 2. Tweetdeck
  7. 7. Use view-sourceIt's awesome
  8. 8. HTML 5 CSS 3 JavaScript
  9. 9. HTML 5 Struktur
  10. 10. 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>
  11. 11. CSS 3 Tampilan
  12. 12. Deklarasi h1 { font-family: Arial, sans-serif; font-size: 14px; color: #333333; }
  13. 13. JavaScript Behavior
  14. 14. 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>
  15. 15. Contoh penggunaan JS: Pengurutan dalam tabel Tambah / hapus komentar di Facebook Menampilkan slider / carousel / galeri Zoom image
  16. 16. jQuery Framework JavaScript yang direkomendasikan Banyak dipakai Lebih mudah dipahami Banyak plugin tersedia
  17. 17. Front-end Developer Bukan pemrograman ;) HTML 5 CSS 3 Pemrograman JavaScript
  18. 18. Fitur-fitur advanced HTML 5 Animasi Audio / Video Custom font Macam-macam styling: text-shadow, box-shadow, gradient, opacity Drag and drop ...dan seterusnya
  19. 19. Questions?

×