HTML5 (and friends)HISTORY, OVERVIEW AND CURRENT STATUSPatrick H. Lauke / jsDay / Verona / 11 Maggio 2011
Web Evangelist at Opera
!javaScriptExpert
doesnt matter!HTML5 makes things easy       (even for noobs like me)
...should I use HTML5 today?
www.textfiles.com/underconstruction
"there is already a lot of excitement for HTML5,but it’s a little too early to deploy it becausewe’re running into interop...
http://www.flickr.com/photos/24374884@N08/4603715307/
NATIVE HTML5
HTML5…without the hype?
A brief history of HTML5 1999 HTML 4.01 2000 XHTML 1.0
2004 W3C focus on XHTML 2.0 …the future is XML-based!       http://www.flickr.com/photos/craiga/17071467/
WHATWGWeb Hypertext Application Technology Working Group
2007 W3C HTML5 WG
HTML5 does not replace HTML 4.01 / XHTML 1.0
HTML5 has more bling!
“...extending the language to better supportWeb applications [...] This puts HTML indirect competition with othertechnolog...
HTML4.01 primarily defined   markup elements
HTML5 supercedesHTML 4.01, XHTML 1.0and DOM Level 2 HTML
HTML5 adds/redefines     markup elementsheader, footer, nav, article …
HTML5 extends DOM Level 2 HTML  innerHTML / outerHTMLgetElementsByClassName()
HTML5 aimed at browser devs   detailed algorithms for processing/error correction
<b><i>Yo!</b></i>
software.hixie.ch/utilities/js/live-dom-viewer/
1. forms2. multimedia3. web apps
1. forms2. multimedia3. web apps
improved form elementsbecause the web is more interactive
jqueryui.com
rich form elements without JavaScript<input   type=”date”><input   type=”time”><input   type=”month”><input   type=”week”>...
built-in validation without JavaScript<input   … required><input   type="tel"><input   type="email"><input   type="url"><i...
people.opera.com/patrickl/experiments/forms/newtypes.html
people.opera.com/patrickl/experiments/forms/validation.html
validity checking with JavaScriptform.checkValidity()formelement.checkValidity()formelement.setCustomValidity()formelement...
1. forms2. multimedia3. web apps
making your site Fonzie compliant...
<video>
Adobe Flash currently most common    video delivery mechanism
<object width="425" height="344">  <param name="movie"value="http://www.youtube.com/v/9sEI1AUFJKw&hl=en&fs=1&"></param>  <...
<video src="video.webm"></video>
<video src="video.webm"  controls  autoplay  loop  preload="none"  poster="poster.jpg"  width="320" height="240">    <a hr...
video as native object●  behaves like any other HTML element●  keyboard accessibility out-of-the-box
powerful (simple) API
controlling <video> with JavaScriptvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime ...
events fired by <video>var v = document.getElementById(player);v.addEventListener(loadeddata, function() { … }, true)v.add...
people.opera.com/patrickl/experiments/webm/basic-controls
people.opera.com/patrickl/experiments/webm/fancy-controls
people.opera.com/patrickl/experiments/webm/fancy-swap
HTML5 means all yourold dHTML is cool again!
video formats the big debate?
HTML5 does not specify video container/codec   (same as with images in HTML 4.01)
MP4/H.264    orOgg Theora    orWebM/VP8
MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
Ogg Theora    free and open, no licensing feesnot many tools for it, not web optimised
WebM / VP8  open and royalty-free, web-optimisedsupport by hardware and software vendors
providing multiple sources<video controls autoplay poster="…" width="…" height="…">   <source src="movie.mp4" type="video/...
flash fallback for older browsers http://camendesign.com/code/video_for_everybody
<video controls autoplay poster="…" width="…" height="…">   <source src="movie.mp4" type="video/mp4" />   <source src="mov...
<audio>
audio...exactly the same as video<audio src=”music.mp3” controls autoplay … ></audio><audio controls autoplay>   <source s...
<canvas>
canvas = “scriptable images”<canvas width="…" height="…"></canvas>
canvas has standard API methods for drawingctx = canvas.getContext("2d");ctx.fillRect(x, y, width, height);ctx.beginPath()...
people.opera.com/patrickl/experiments/canvas/particle/3
mariuswatz.com/works/abstract01js
canvas drawing ready-made imagesctx = canvas.getContext("2d");var logo = new Image();logo.src = logo.png;ctx.drawImage(log...
www.splintered.co.uk/experiments/archives/paranoid_0.3
canvas access to image data arrayctx = canvas.getContext("2d");canvasData = ctx.getImageData(x,y,w,h);[R,G,B,A,R,G,B,A,R,G...
www.splintered.co.uk/experiments/archives/canvas-ambilight
github.com/mezzoblue/PaintbrushJS
canvas also works with videoctx = canvas.getContext("2d");v = document.getElementById(player);ctx.drawImage(v,x1,y1,w1,h2,...
html5doctor.com/video-canvas-magic
media.chikuyonok.ru/ambilight
www.filamentgroup.com/examples/charting
canvas accessibility?
video, audio and canvas on any device           without plugins         (Java / Flash / Silverlight not ubiquitous)
1. forms2. multimedia3. web apps
HTML5 (and friends) haslots more APIs for developers      (for powerful client-side apps)
isgeolocationpartofhtml5.com
geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, er...
offline detectionwindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, ...
application cache<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/spri...
data storagecookies and their limitations...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* c...
localStorage/sessionStoragelocalStorage.setItem(key, value);localStorage.getItem(key);localStorage.clear();localStorage.ke...
WebSQLrelational DB / SQL in browservar db =openDatabase(dbName, version, displayName, expectedSize);db.transaction(functi...
etcFile API, Web Workers, History API, Web Messaging,Drag and Drop, Server-Sent Events…
is it all safe to use, right now?
www.youtube.com/html5
caniuse.com
dont do browser sniffing      http://www.flickr.com/photos/timdorr/2096272747/
feature-detectionprogressive enhancement, graceful degradation            http://diveintohtml5.org/everything.html
feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio...
modernizr.com
patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
yepnopejs.com
sublimevideo.net
www.happyworm.com/jquery/jplayer
HTML5 as Flashkiller?
not a question ofHTML5 replacing Flash...
giving developers a choice!
...should I use HTML5 today?
“The future is already here – itsjust not very evenly distributed”William Gibson
www.opera.com/developer   patrick.lauke@opera.com
HTML5 (and friends) - History, overview and current status - jsDay Verona 11.05.2011
HTML5 (and friends) - History, overview and current status - jsDay Verona 11.05.2011
HTML5 (and friends) - History, overview and current status - jsDay Verona 11.05.2011
HTML5 (and friends) - History, overview and current status - jsDay Verona 11.05.2011
Upcoming SlideShare
Loading in …5
×

HTML5 (and friends) - History, overview and current status - jsDay Verona 11.05.2011

4,230 views
4,171 views

Published on

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

No Downloads
Views
Total views
4,230
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
104
Comments
0
Likes
11
Embeds 0
No embeds

No notes for slide

HTML5 (and friends) - History, overview and current status - jsDay Verona 11.05.2011

  1. 1. HTML5 (and friends)HISTORY, OVERVIEW AND CURRENT STATUSPatrick H. Lauke / jsDay / Verona / 11 Maggio 2011
  2. 2. Web Evangelist at Opera
  3. 3. !javaScriptExpert
  4. 4. doesnt matter!HTML5 makes things easy (even for noobs like me)
  5. 5. ...should I use HTML5 today?
  6. 6. www.textfiles.com/underconstruction
  7. 7. "there is already a lot of excitement for HTML5,but it’s a little too early to deploy it becausewe’re running into interoperability issues." Philippe Le Hegaret, W3C interaction domain leader blogs.techrepublic.com.com/hiner/?p=6369
  8. 8. http://www.flickr.com/photos/24374884@N08/4603715307/
  9. 9. NATIVE HTML5
  10. 10. HTML5…without the hype?
  11. 11. A brief history of HTML5 1999 HTML 4.01 2000 XHTML 1.0
  12. 12. 2004 W3C focus on XHTML 2.0 …the future is XML-based! http://www.flickr.com/photos/craiga/17071467/
  13. 13. WHATWGWeb Hypertext Application Technology Working Group
  14. 14. 2007 W3C HTML5 WG
  15. 15. HTML5 does not replace HTML 4.01 / XHTML 1.0
  16. 16. HTML5 has more bling!
  17. 17. “...extending the language to better supportWeb applications [...] This puts HTML indirect competition with othertechnologies[...] , in particular Flash andSilverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  18. 18. HTML4.01 primarily defined markup elements
  19. 19. HTML5 supercedesHTML 4.01, XHTML 1.0and DOM Level 2 HTML
  20. 20. HTML5 adds/redefines markup elementsheader, footer, nav, article …
  21. 21. HTML5 extends DOM Level 2 HTML innerHTML / outerHTMLgetElementsByClassName()
  22. 22. HTML5 aimed at browser devs detailed algorithms for processing/error correction
  23. 23. <b><i>Yo!</b></i>
  24. 24. software.hixie.ch/utilities/js/live-dom-viewer/
  25. 25. 1. forms2. multimedia3. web apps
  26. 26. 1. forms2. multimedia3. web apps
  27. 27. improved form elementsbecause the web is more interactive
  28. 28. jqueryui.com
  29. 29. 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=”file” multiple><input … autofocus><input … autocomplete>
  30. 30. 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="5">…
  31. 31. people.opera.com/patrickl/experiments/forms/newtypes.html
  32. 32. people.opera.com/patrickl/experiments/forms/validation.html
  33. 33. validity checking with JavaScriptform.checkValidity()formelement.checkValidity()formelement.setCustomValidity()formelement.validityinterface 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;};
  34. 34. 1. forms2. multimedia3. web apps
  35. 35. making your site Fonzie compliant...
  36. 36. <video>
  37. 37. Adobe Flash currently most common video delivery mechanism
  38. 38. <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> <embedsrc="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>
  39. 39. <video src="video.webm"></video>
  40. 40. <video src="video.webm" controls autoplay loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
  41. 41. video as native object● behaves like any other HTML element● keyboard accessibility out-of-the-box
  42. 42. powerful (simple) API
  43. 43. controlling <video> with JavaScriptvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  44. 44. 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)…
  45. 45. people.opera.com/patrickl/experiments/webm/basic-controls
  46. 46. people.opera.com/patrickl/experiments/webm/fancy-controls
  47. 47. people.opera.com/patrickl/experiments/webm/fancy-swap
  48. 48. HTML5 means all yourold dHTML is cool again!
  49. 49. video formats the big debate?
  50. 50. HTML5 does not specify video container/codec (same as with images in HTML 4.01)
  51. 51. MP4/H.264 orOgg Theora orWebM/VP8
  52. 52. MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
  53. 53. Ogg Theora free and open, no licensing feesnot many tools for it, not web optimised
  54. 54. WebM / VP8 open and royalty-free, web-optimisedsupport by hardware and software vendors
  55. 55. 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>
  56. 56. flash fallback for older browsers http://camendesign.com/code/video_for_everybody
  57. 57. <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>
  58. 58. <audio>
  59. 59. 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)
  60. 60. <canvas>
  61. 61. canvas = “scriptable images”<canvas width="…" height="…"></canvas>
  62. 62. canvas has standard API methods for drawingctx = 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);
  63. 63. people.opera.com/patrickl/experiments/canvas/particle/3
  64. 64. mariuswatz.com/works/abstract01js
  65. 65. canvas drawing ready-made imagesctx = 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
  66. 66. www.splintered.co.uk/experiments/archives/paranoid_0.3
  67. 67. canvas access to image data arrayctx = 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, … ]
  68. 68. www.splintered.co.uk/experiments/archives/canvas-ambilight
  69. 69. github.com/mezzoblue/PaintbrushJS
  70. 70. canvas also works with videoctx = 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)
  71. 71. html5doctor.com/video-canvas-magic
  72. 72. media.chikuyonok.ru/ambilight
  73. 73. www.filamentgroup.com/examples/charting
  74. 74. canvas accessibility?
  75. 75. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  76. 76. 1. forms2. multimedia3. web apps
  77. 77. HTML5 (and friends) haslots more APIs for developers (for powerful client-side apps)
  78. 78. isgeolocationpartofhtml5.com
  79. 79. geolocationnavigator.geolocation.getCurrentPosition(success, error);navigator.geolocation.watchCurrentPosition(success, error);function success(position) { /* wheres Wally? */ var lat = position.coords.latitude; var long = position.coords.longitude; ...}
  80. 80. offline detectionwindow.addEventListener(online, function(){ … }, true);window.addEventListener(offline, function(){ … }, true); …however, currently unreliable!
  81. 81. application cache<html manifest=”blah.manifest”>CACHE MANIFEST# send this with correct text/cache-manifest MIMEimages/sprites.pngscripts/common.jsscripts/jquery.jsstyles/global.cssNETWORK:# never cached (apart from normal caching mechanism)onlineonly.cssFALLBACK:# pattern matching. fallback file will also be cachedimages/ images/not-offline.png
  82. 82. data storagecookies and their limitations...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* convoluted string operations go here … */
  83. 83. 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 sessiononly string data – store serialised objects
  84. 84. WebSQLrelational DB / SQL in browservar 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!
  85. 85. etcFile API, Web Workers, History API, Web Messaging,Drag and Drop, Server-Sent Events…
  86. 86. is it all safe to use, right now?
  87. 87. www.youtube.com/html5
  88. 88. caniuse.com
  89. 89. dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  90. 90. feature-detectionprogressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
  91. 91. feature-detection for audio/videoif (!!document.createElement(video).canPlayType;) { … }if (!!document.createElement(audio).canPlayType;) { … }
  92. 92. modernizr.com
  93. 93. patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  94. 94. yepnopejs.com
  95. 95. sublimevideo.net
  96. 96. www.happyworm.com/jquery/jplayer
  97. 97. HTML5 as Flashkiller?
  98. 98. not a question ofHTML5 replacing Flash...
  99. 99. giving developers a choice!
  100. 100. ...should I use HTML5 today?
  101. 101. “The future is already here – itsjust not very evenly distributed”William Gibson
  102. 102. www.opera.com/developer patrick.lauke@opera.com

×