HTML5 Google Dev Groups 2013 - Jogja Digital Valley
•
0 likes•868 views
materi tentang html5, GDG 2013 di Jogja Digital Valley
Recommended
More Related Content
What's hot
Viewers also liked
Similar to HTML5 Google Dev Groups 2013 - Jogja Digital Valley
Similar to HTML5 Google Dev Groups 2013 - Jogja Digital Valley (20)
Recently uploaded
Recently uploaded (20)
HTML5 Google Dev Groups 2013 - Jogja Digital Valley
- 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