HTML5 Google Dev Groups 2013 - Jogja Digital Valley
?
0 likes?868 views
This document discusses HTML5 features including new semantic elements, DOCTYPE declarations, feature detection methods, and Canvas, Video, Audio, Geolocation features. It covers HTML5 features like Canvas, Video, Audio, local storage, offline apps, and introduces new semantic elements. It also discusses various methods of feature detection including checking for properties, testing element properties, and type checking.
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