Embed Size (px)
DESCRIPTION
materi tentang html5, GDG 2013 di Jogja Digital Valley
Citation preview
GCDC 4-11-2013
Survey!
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>
Semantik - Element Baru<section> <nav> <article>
<aside> <hgroup> <header>
<footer> <time> <mark>
Semantik - ContohHTML4
<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>
Fitur Fitur HTML5
CanvasVideo AudioLocal StorageWeb WorkersOffline Web Application
GeolocationInput TypesPlaceholder TextForm AutofocusMicrodataHistory API
Deteksi Fitur HTML5
Deteksi Manual : http://html5test.com/
Library : http://www.modernizr.com/
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}
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}
Metode Deteksi Fitur (3 / 4)Ciptakan element, cek apakah suatu method eksis, cek kembalianTanpa Modernizerfunction 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"');}
Modernizrif (Modernizr.video) { if (Modernizr.video.webm) { } else if (Modernizr.video.ogg) { } else if (Modernizr.video.h264){ }}
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) { }
Modernizr Polyfill
Replika standar API untuk browser
Daftar Polyfillhttps://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Modernizr.load({ test: Modernizr.geolocation, yep : 'geo.js', nope: 'geo-polyfill.js'});
Fitur Canvas
Simple ShapesGradientCanvas TextPathImages
Fitur Video dan Audio
Video Codecs- h.264, Theora, VP8
Audio Codecs- Vorbis, AAC, MP3
Custom Controller
Fitur Geolocation
1. Triangulasi Tower Operator2. GPS Hardware
Fitur GeolocationKode :
navigator.geolocation.getCurrentPosition(showMap, handleError, params);
params : 1. enableHighAccuracy2. timeout3. maximumAge
Terima Kasih
