Simple web app + chrome extension dengan html 5 : Overview // Femaledev
Upcoming SlideShare
Loading in...5
×
 

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

on

  • 492 views

HTML5 & Chrome Extension Workshop ...

HTML5 & Chrome Extension Workshop
// Femaledev.com

Sunday, July 21, 2013
2.00 - 7.00 PM

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

Statistics

Views

Total Views
492
Views on SlideShare
492
Embed Views
0

Actions

Likes
0
Downloads
6
Comments
0

0 Embeds 0

No embeds

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

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

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