Upgrade to Pro — share decks privately, control downloads, hide ads and more …

GCDC - HTML5

Avatar for rifqi alfian rifqi alfian
September 07, 2014

GCDC - HTML5

google developer conference - HTML 5

Avatar for rifqi alfian

rifqi alfian

September 07, 2014
Tweet

More Decks by rifqi alfian

Other Decks in Technology

Transcript

  1. 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>
  2. Semantik - Contoh HTML4 <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> HTML5 <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>
  3. Fitur Fitur HTML5 Canvas Video Audio Local Storage Web Workers

    Offline Web Application Geolocation Input Types Placeholder Text Form Autofocus Microdata History API
  4. 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 }
  5. 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 }
  6. 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){ } }
  7. 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) { }
  8. Fitur Video dan Audio Video Codecs - h.264, Theora, VP8

    Audio Codecs - Vorbis, AAC, MP3 Custom Controller