brave new world of html5 - interlink conference vancouver 04.06.2011
TRANSCRIPT
![Page 1: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/1.jpg)
Brave new world of HTML5
Patrick H. Lauke / Interlink Conference / Vancouver / 4 June 2011
NEW SEMANTICS, MULTIMEDIA AND MORE
![Page 2: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/2.jpg)
Web Evangelist at Opera
![Page 3: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/3.jpg)
![Page 4: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/4.jpg)
...should I use HTML5 today?
![Page 6: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/6.jpg)
"there is already a lot of excitement for HTML5, but it’s a little too early to deploy it because we’re running into interoperability issues."
Philippe Le Hegaret, W3C interaction domain leader
blogs.techrepublic.com.com/hiner/?p=6369
![Page 7: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/7.jpg)
http://www.flickr.com/photos/24374884@N08/4603715307/
![Page 8: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/8.jpg)
NATIVE HTML5
![Page 9: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/9.jpg)
HTML5…without the hype?
![Page 10: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/10.jpg)
A brief history of HTML5
1999 HTML 4.012000 XHTML 1.0
![Page 11: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/11.jpg)
2004 W3C focus on XHTML 2.0…the future is XML-based!
http://www.flickr.com/photos/craiga/17071467/
![Page 12: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/12.jpg)
WHATWGWeb Hypertext Application Technology Working Group
![Page 13: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/13.jpg)
2007 W3C HTML5 WG
![Page 14: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/14.jpg)
![Page 15: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/15.jpg)
HTML5 does not replace HTML 4.01 / XHTML 1.0
![Page 16: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/16.jpg)
HTML5 has more bling!
![Page 17: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/17.jpg)
“...extending the language to better support Web applications [...] This puts HTML in direct competition with other technologies[...] , in particular Flash and Silverlight.”
Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
![Page 18: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/18.jpg)
HTML4.01 primarily definedmarkup elements
![Page 19: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/19.jpg)
HTML5 supercedesHTML 4.01, XHTML 1.0and DOM Level 2 HTML
![Page 20: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/20.jpg)
HTML5 adds/redefines markup elements
![Page 21: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/21.jpg)
HTML5 aimed at browser devs
detailed algorithms for processing/error correction
![Page 22: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/22.jpg)
<b><i>Yo!</b></i>
![Page 23: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/23.jpg)
software.hixie.ch/utilities/js/live-dom-viewer/
![Page 24: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/24.jpg)
1. syntax/semantics2. forms3. multimedia
![Page 25: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/25.jpg)
1. syntax/semantics2. forms3. multimedia
![Page 26: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/26.jpg)
the dirty secret of the
doctype
![Page 27: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/27.jpg)
HTML5<!DOCTYPE html>
![Page 28: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/28.jpg)
<meta charset=”utf-8” />
<meta charset=utf-8>
<MeTa CHarSet=utf-8>
![Page 29: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/29.jpg)
<style type=”text/css”></style>
<script type=”text/javascript”></script>
![Page 30: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/30.jpg)
<style type=”text/css”></style>
<script type=”text/javascript”></script>
![Page 31: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/31.jpg)
<!doctype html><title>Minimal HTML5</title>
![Page 32: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/32.jpg)
new elements for more accurate semantics
![Page 33: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/33.jpg)
![Page 34: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/34.jpg)
Top 20 class names1. footer 11. button
2. menu 12. main
3. style1 13. style3
4. msonormal 14. small
5. text 15. nav
6. content 16. clear
7. title 17. search
8. style2 18. style4
9. header 19. logo
10. copyright 20. body
http://devfiles.myopera.com/articles/572/classlist-url.htm
![Page 35: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/35.jpg)
Top 20 id names1. footer 11. search
2. content 12. nav
3. header 13. wrapper
4. logo 14. top
5. container 15. table2
6. main 16. layer2
7. table1 17. sidebar
8. menu 18. image1
9. layer1 19. banner
10. autonumber1 20. navigation
http://devfiles.myopera.com/articles/572/idlist-url.htm
![Page 36: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/36.jpg)
![Page 37: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/37.jpg)
![Page 39: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/39.jpg)
![Page 40: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/40.jpg)
![Page 41: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/41.jpg)
unambiguous and machine readable
![Page 42: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/42.jpg)
current and old browsers “support” these(although some need a little extra help)
header, footer, … { display: block; }
![Page 43: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/43.jpg)
Internet Explorer < 9 needs extra training wheelsdocument.createElement('header');document.createElement('footer');…
http://html5doctor.com/how-to-get-html5-working-in-ie-and-firefox-2
![Page 44: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/44.jpg)
1. syntax/semantics2. forms3. multimedia
![Page 45: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/45.jpg)
improved form elementsbecause the web is more interactive
![Page 47: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/47.jpg)
rich form elements without JavaScript
<input type="date"><input type="time"><input type="month"><input type="week"><input type="datetime" … ><input type="range"><input type="number"><input type="color">
<input type="file" multiple><input … placeholder="…"><input … autofocus><input … autocomplete>
![Page 48: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/48.jpg)
built-in validation without JavaScript<input … required><input type="tel"><input type="email"><input type="url"><input … pattern="[a-z]{3}[0-9]{3}"><input type="number" min="1" max="10" step="2">…
![Page 49: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/49.jpg)
people.opera.com/patrickl/experiments/forms/newtypes.html
![Page 50: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/50.jpg)
people.opera.com/patrickl/experiments/forms/validation.html
![Page 51: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/51.jpg)
![Page 52: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/52.jpg)
validity checking with JavaScriptform.checkValidity()formelement.checkValidity()
formelement.setCustomValidity()
formelement.validity
interface ValidityState { readonly attribute boolean valueMissing; readonly attribute boolean typeMismatch; readonly attribute boolean patternMismatch; readonly attribute boolean tooLong; readonly attribute boolean rangeUnderflow; readonly attribute boolean rangeOverflow; readonly attribute boolean stepMismatch; readonly attribute boolean customError; readonly attribute boolean valid;};
![Page 53: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/53.jpg)
1. syntax/semantics2. forms3. multimedia
![Page 54: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/54.jpg)
making your site Fonzie compliant...
![Page 55: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/55.jpg)
<video>
![Page 56: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/56.jpg)
Adobe Flash currently most commonvideo delivery mechanism
![Page 57: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/57.jpg)
<object width="425" height="344"><param name="movie"
value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&" type="application/x-shockwave-flash" allowscriptaccess="always" allowfullscreen="true" width="425" height="344"></embed></object>
![Page 58: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/58.jpg)
<video src="video.webm"></video>
![Page 59: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/59.jpg)
<video src="video.webm" controls autoplay loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
![Page 60: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/60.jpg)
video as native object
● behaves like any other HTML element● keyboard accessibility out-of-the-box
![Page 61: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/61.jpg)
people.opera.com/patrickl/experiments/video/hover+transition
![Page 62: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/62.jpg)
powerful (simple) API
![Page 64: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/64.jpg)
controlling <video> with JavaScript
var v = document.getElementById('player');
v.play();v.pause();v.volume = … ;v.currentTime = … ;…
![Page 65: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/65.jpg)
events fired by <video>
var v = document.getElementById('player');
v.addEventListener('loadeddata', function() { … }, true)v.addEventListener('play', function() { … }, true)v.addEventListener('pause', function() { … }, true)v.addEventListener('timeupdate', function() { … }, true)v.addEventListener('ended', function() { … }, true)…
![Page 66: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/66.jpg)
people.opera.com/patrickl/experiments/webm/basic-controls
![Page 67: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/67.jpg)
people.opera.com/patrickl/experiments/webm/fancy-controls
![Page 68: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/68.jpg)
people.opera.com/patrickl/experiments/webm/fancy-swap
![Page 69: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/69.jpg)
HTML5 means all your old dHTML is cool again!
![Page 70: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/70.jpg)
video formatsthe big debate?
![Page 71: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/71.jpg)
HTML5 does not specify video container/codec
(same as with images in HTML 4.01)
![Page 72: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/72.jpg)
MP4/H.264or
Ogg Theoraor
WebM/VP8
![Page 73: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/73.jpg)
MP4 / H.264
ubiquitous, patent encumbered, licensing/royalties
![Page 74: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/74.jpg)
Ogg Theora
free and open, no licensing feesnot many tools for it, not web optimised
![Page 75: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/75.jpg)
WebM / VP8
open and royalty-free, web-optimisedsupport by hardware and software vendors
![Page 76: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/76.jpg)
providing multiple sources<video controls autoplay poster="…" width="…" height="…">
<source src="movie.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm" /><source src="movie.ogv" type="video/ogg" /><!-- fallback content -->
</video>
![Page 79: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/79.jpg)
flash fallback for older browsershttp://camendesign.com/code/video_for_everybody
![Page 80: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/80.jpg)
<video controls autoplay poster="…" width="…" height="…"><source src="movie.mp4" type="video/mp4" /><source src="movie.webm" type="video/webm" /><source src="movie.ogv" type="video/ogg" />
<object width="…" height="…" type="application/x-shockwave-flash" data="player.swf">
<param name="movie" value="player.swf" /><param name="flashvars" value=" … file=movie.mp4" /><!-- fallback content -->
</object>
</video>
![Page 81: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/81.jpg)
<audio>
![Page 82: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/82.jpg)
audio...exactly the same as video
<audio src=”music.mp3” controls autoplay … ></audio>
<audio controls autoplay><source src="music.mp3" type="audio/mpeg" /><source src="music.oga" type="audio/ogg" /><!-- fallback content -->
</audio>
formats: MP3 vs Ogg Vorbis (vs WAV)
![Page 83: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/83.jpg)
people.opera.com/patrickl/experiments/audio/wilhelm
![Page 84: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/84.jpg)
people.opera.com/patrickl/experiments/audio/windchime
![Page 85: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/85.jpg)
<canvas>
![Page 86: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/86.jpg)
canvas = “scriptable images”
<canvas width="…" height="…"></canvas>
![Page 87: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/87.jpg)
canvas has standard API methods for drawing
ctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath();ctx.moveTo(x, y);ctx.lineTo(x, y);ctx.bezierCurveTo(x1, y1, x2, y2, c1, c2);
www.w3.org/TR/2dcontext
![Page 88: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/88.jpg)
people.opera.com/patrickl/experiments/canvas/particle/3
![Page 90: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/90.jpg)
canvas drawing ready-made images
ctx = canvas.getContext("2d");
var logo = new Image();logo.src = 'logo.png';
ctx.drawImage(logo,x1,y1,w1,h1,x2,y2,w2,h2);
or call in an existing image already on the page
![Page 91: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/91.jpg)
www.splintered.co.uk/experiments/archives/paranoid_0.3
![Page 92: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/92.jpg)
canvas access to image data array
ctx = canvas.getContext("2d");canvasData = ctx.getImageData(x,y,w,h);
[R,G,B,A,R,G,B,A,R,G,B,A,R,G,B,A, … ]
![Page 93: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/93.jpg)
www.splintered.co.uk/experiments/archives/canvas-ambilight
![Page 95: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/95.jpg)
canvas also works with video
ctx = canvas.getContext("2d");v = document.getElementById('player');
ctx.drawImage(v,x1,y1,w1,h2,x2,y2,w2,h2);
grab currently displayed frame (update as appropriate)
![Page 98: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/98.jpg)
canvas accessibility?
![Page 99: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/99.jpg)
video, audio and canvas on any devicewithout plugins
(Java / Flash / Silverlight not ubiquitous)
![Page 100: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/100.jpg)
![Page 101: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/101.jpg)
![Page 102: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/102.jpg)
1. syntax/semantics2. forms3. multimedia4. … and more
![Page 103: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/103.jpg)
HTML5 (and friends) haslots more APIs for developers
(for powerful client-side apps)
![Page 104: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/104.jpg)
geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);
function success(position) {/* where's Wally? */var lat = position.coords.latitude;var long = position.coords.longitude;...
}
www.w3.org/TR/geolocation-API
![Page 105: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/105.jpg)
![Page 106: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/106.jpg)
offline detectionwindow.addEventListener('online', function(){ … }, true);window.addEventListener('offline', function(){ … }, true);
…however, currently unreliable!
![Page 107: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/107.jpg)
application cache<html manifest=”blah.manifest”>
CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.css
NETWORK:# never cached (apart from normal caching mechanism)onlineonly.css
FALLBACK:# pattern matching. fallback file will also be cachedimages/ images/not-offline.png
![Page 108: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/108.jpg)
data storage
cookies and their limitations...
document.cookie = 'key=value; expires=Thu, 15 Feb 2010 23:59:59 UTC; path=/'…
/* convoluted string operations go here … */
![Page 109: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/109.jpg)
localStorage/sessionStoragelocalStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.key = value;if (localStorage.key == '…') { … }…
localStorage – persistent per domainsessionStorage – current URL and window in session
only string data – store serialised objects
![Page 110: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/110.jpg)
WebSQL
relational DB / SQL in browser
var db =openDatabase(dbName, version, displayName, expectedSize);
db.transaction(function(tx) {tx.executeSql(sqlStatement, [], function (tx, result) {
/* do something with the results */});
});
not being developed further (IE/Mozilla prefer IndexedDB) – nonetheless available right now in Opera+WebKit!
![Page 111: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/111.jpg)
etcFile API, Web Workers, History API, Web Messaging,Drag and Drop, Server-Sent Events…
![Page 112: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/112.jpg)
is it all safe to use, right now?
![Page 115: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/115.jpg)
don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/
![Page 116: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/116.jpg)
![Page 117: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/117.jpg)
feature-detectionprogressive enhancement, graceful degradation
http://diveintohtml5.org/everything.html
![Page 118: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/118.jpg)
feature-detection for audio/video
if (!!document.createElement('video').canPlayType;) { … }
if (!!document.createElement('audio').canPlayType;) { … }
![Page 119: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/119.jpg)
feature-detection for audio/video codecs
var v = document.createElement('video');if (!!(v.canPlayType)&& ((v.canPlayType('video/webm;codecs="vp8,vorbis"') == 'probably') || (v.canPlayType('video/webm;codecs="vp8, vorbis"') == 'maybe'))) { … }
![Page 121: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/121.jpg)
patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
![Page 125: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/125.jpg)
HTML5 as Flashkiller?
![Page 126: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/126.jpg)
not a question ofHTML5 replacing Flash...
![Page 127: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/127.jpg)
giving developers a choice!
![Page 128: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/128.jpg)
...should I use HTML5 today?
![Page 129: Brave new world of HTML5 - Interlink Conference Vancouver 04.06.2011](https://reader033.vdocument.in/reader033/viewer/2022060109/5554de5cb4c9051b6e8b5220/html5/thumbnails/129.jpg)
“The future is already here – it's just not very evenly distributed”
William Gibson