HTML5 Google Dev Groups 2013 - Jogja Digital Valley
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 Google Dev Groups 2013 - Jogja Digital Valley

on

  • 759 views

materi tentang html5, GDG 2013 di Jogja Digital Valley

materi tentang html5, GDG 2013 di Jogja Digital Valley

Statistics

Views

Total Views
759
Views on SlideShare
549
Embed Views
210

Actions

Likes
1
Downloads
7
Comments
0

3 Embeds 210

http://me.mootuts.com 188
http://assets.txmblr.com 20
http://webcache.googleusercontent.com 2

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

HTML5 Google Dev Groups 2013 - Jogja Digital Valley Presentation Transcript

  • 1. GCDC 4-11-2013
  • 2. Halo, Teman teman Rifqi Alfian @merembablas me.mootuts.com merembablas@gmail.com Kesibukan : Freelancer
  • 3. Survey!
  • 4. Semantik - DOCTYPE jaman kegelapan : <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> jaman pencerahan : <!DOCTYPE html>
  • 5. Semantik - Element Baru <section> <nav> <article> <aside> <hgroup> <header> <footer> <time> <mark>
  • 6. Semantik - Contoh HTML4 HTML5 <div class="entry"> <p class="post-date"> October 22, 2009 </p> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> <p>Lorem ipsum dolor sit amet…</p> </div> <article> <header> <time datetime="2009-10-22" pubdate> October 22, 2009 </time> <h1> <a href="#" rel="bookmark" title="link to this post"> Travel day </a> </h1> </header> <p>Lorem ipsum dolor sit amet…</p> </article>
  • 7. Fitur Fitur HTML5 Canvas Video Audio Local Storage Web Workers Offline Web Application Geolocation Input Types Placeholder Text Form Autofocus Microdata History API
  • 8. Deteksi Fitur HTML5 Deteksi Manual : http://html5test.com/ Library : http://www.modernizr.com/
  • 9. Metode Deteksi Fitur (1 / 4) Cek jika properti eksis di dalam global object (navigator atau window) Tanpa Modernizr function supports_geolocation() { return 'geolocation' in navigator; } Modernizr if (Modernizr.geolocation) { // code.. } else { // pake third party library }
  • 10. Metode Deteksi Fitur (2 / 4) Ciptakan sebuah element, kemudian cek apakah suatu properti eksis didalam element tersebut Tanpa Modernizer function supports_canvas() { return !!document.createElement('canvas').getContext; } Modernizr if (Modernizr.canvas) { // code.. } else { // canvas tidak didukung }
  • 11. Metode Deteksi Fitur (3 / 4) Ciptakan element, cek apakah suatu method eksis, cek kembalian Tanpa Modernizer function supports_h264_baseline_video() { if (!supports_video()) { return false; } var v = document.createElement("video"); return v.canPlayType('video/mp4; codecs="avc1.42E01E, mp4a.40.2"'); } Modernizr if (Modernizr.video) { if (Modernizr.video.webm) { } else if (Modernizr.video.ogg) { } else if (Modernizr.video.h264){ } }
  • 12. Metode Deteksi Fitur (4 / 4) Ciptakan element, set properti dengan nilai tertentu, cek tipe value tersebut Tanpa Modernizer var i = document.createElement("input"); i.setAttribute("type", "color"); return i.type !== "text"; Modernizr if } (!Modernizr.inputtypes.date) {
  • 13. Modernizr Polyfill Replika standar API untuk browser Daftar Polyfill https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js' });
  • 14. Fitur Canvas Simple Shapes Gradient Canvas Text Path Images
  • 15. Fitur Video dan Audio Video Codecs - h.264, Theora, VP8 Audio Codecs - Vorbis, AAC, MP3 Custom Controller
  • 16. Fitur Geolocation 1. Triangulasi Tower Operator 2. GPS Hardware
  • 17. Fitur Geolocation Kode : navigator.geolocation.getCurrentPosition(showMap, handleError, params); params : 1. enableHighAccuracy 2. timeout 3. maximumAge
  • 18. Terima Kasih