Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
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,508 views

Published on

Published in: Technology, Design
  • Be the first to comment

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

×