GCDC 4-11-2013
Halo, Teman teman
Rifqi Alfian
@merembablas
me.mootuts.com
merembablas@gmail.com
Kesibukan :
Freelancer
Survey!
Semantik - DOCTYPE
jaman kegelapan :
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1...
Semantik - Element Baru
<section> <nav> <article>
<aside> <hgroup> <header>
<footer> <time> <mark>
Semantik - Contoh
HTML4

HTML5

<div class="entry">
<p class="post-date">
October 22, 2009
</p>
<h1>
<a href="#"
rel="book...
Fitur Fitur HTML5
Canvas
Video
Audio
Local Storage
Web Workers
Offline Web Application

Geolocation
Input Types
Placeholde...
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

funct...
Metode Deteksi Fitur (2 / 4)
Ciptakan sebuah element, kemudian cek apakah suatu
properti eksis didalam element tersebut
Ta...
Metode Deteksi Fitur (3 / 4)
Ciptakan element, cek apakah suatu method eksis, cek
kembalian
Tanpa Modernizer
function supp...
Metode Deteksi Fitur (4 / 4)
Ciptakan element, set properti dengan nilai tertentu, cek
tipe value tersebut
Tanpa Modernize...
Modernizr Polyfill
Replika standar API untuk browser
Daftar Polyfill
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cro...
Fitur Canvas
Simple Shapes
Gradient
Canvas Text
Path
Images
Fitur Video dan Audio
Video Codecs
- h.264, Theora, VP8

Audio Codecs
- Vorbis, AAC, MP3

Custom Controller
Fitur Geolocation
1. Triangulasi Tower Operator
2. GPS Hardware
Fitur Geolocation
Kode :

navigator.geolocation.getCurrentPosition(showMap, handleError,
params);
params :
1. enableHighAc...
Terima Kasih
Upcoming SlideShare
Loading in …5
×

HTML5 Google Dev Groups 2013 - Jogja Digital Valley

586
-1

Published on

materi tentang html5, GDG 2013 di Jogja Digital Valley

Published in: Technology, Design
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
586
On Slideshare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
12
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

HTML5 Google Dev Groups 2013 - Jogja Digital Valley

  1. 1. GCDC 4-11-2013
  2. 2. Halo, Teman teman Rifqi Alfian @merembablas me.mootuts.com merembablas@gmail.com Kesibukan : Freelancer
  3. 3. Survey!
  4. 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. 5. Semantik - Element Baru <section> <nav> <article> <aside> <hgroup> <header> <footer> <time> <mark>
  6. 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. 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. 8. Deteksi Fitur HTML5 Deteksi Manual : http://html5test.com/ Library : http://www.modernizr.com/
  9. 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. 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. 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. 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. 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. 14. Fitur Canvas Simple Shapes Gradient Canvas Text Path Images
  15. 15. Fitur Video dan Audio Video Codecs - h.264, Theora, VP8 Audio Codecs - Vorbis, AAC, MP3 Custom Controller
  16. 16. Fitur Geolocation 1. Triangulasi Tower Operator 2. GPS Hardware
  17. 17. Fitur Geolocation Kode : navigator.geolocation.getCurrentPosition(showMap, handleError, params); params : 1. enableHighAccuracy 2. timeout 3. maximumAge
  18. 18. Terima Kasih

×