(Brave new world of)            HTML5         Chris Mills, Opera Software / Webinale 2011, Berlin, May 31st
Open standards evangelist at Opera      HTML5 / CSS3 wrangler          dev.opera.com   slideshare.net/chrisdavidmills     ...
...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/
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 bettersupport Web applications [...] This putsHTML in direct 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 innerHTML / outerHTMLgetElementsByClassName()
HTML5 aimed at browser          devs  detailed algorithms forprocessing/error correction
1. forms2. multimedia3. web apps
1. forms2. multimedia3. web apps
improved form elements because 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
<bling> ?
<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...
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
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...
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
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 –its just not very evenlydistributed”William Gibson
http://dev.opera.com   cmills@opera.com
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
webinale2011_Chris Mills_Brave new world of HTML5Html5
Upcoming SlideShare
Loading in...5
×

webinale2011_Chris Mills_Brave new world of HTML5Html5

1,028

Published on

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

No Downloads
Views
Total Views
1,028
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
11
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

webinale2011_Chris Mills_Brave new world of HTML5Html5

  1. 1. (Brave new world of) HTML5 Chris Mills, Opera Software / Webinale 2011, Berlin, May 31st
  2. 2. Open standards evangelist at Opera HTML5 / CSS3 wrangler dev.opera.com slideshare.net/chrisdavidmills Education agitator Also heavy metal drummer
  3. 3. ...should I use HTML5 today?
  4. 4. www.textfiles.com/underconstruction
  5. 5. "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
  6. 6. http://www.flickr.com/photos/24374884@N08/4603715307/
  7. 7. HTML5…without the hype?
  8. 8. A brief history of HTML5 1999 HTML 4.01 2000 XHTML 1.0
  9. 9. 2004 W3C focus on XHTML 2.0 …the future is XML-based! http://www.flickr.com/photos/craiga/17071467/
  10. 10. WHATWGWeb Hypertext Application Technology Working Group
  11. 11. 2007 W3C HTML5 WG
  12. 12. HTML5 does not replace HTML 4.01 / XHTML 1.0
  13. 13. HTML5 has more bling!
  14. 14. “...extending the language to bettersupport Web applications [...] This putsHTML in direct competition with othertechnologies[...] , in particular Flash andSilverlight.”Ian Hickson, Editor of HTML5http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html
  15. 15. HTML4.01 primarily defined markup elements
  16. 16. HTML5 supercedesHTML 4.01, XHTML 1.0and DOM Level 2 HTML
  17. 17. HTML5 adds/redefines markup elementsheader, footer, nav, article …
  18. 18. HTML5 extends DOM Level 2 innerHTML / outerHTMLgetElementsByClassName()
  19. 19. HTML5 aimed at browser devs detailed algorithms forprocessing/error correction
  20. 20. 1. forms2. multimedia3. web apps
  21. 21. 1. forms2. multimedia3. web apps
  22. 22. improved form elements because the web is more interactive
  23. 23. jqueryui.com
  24. 24. 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>
  25. 25. 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">…
  26. 26. people.opera.com/patrickl/experiments/forms/newtypes.html
  27. 27. people.opera.com/patrickl/experiments/forms/validation.html
  28. 28. 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;};
  29. 29. 1. forms2. multimedia3. web apps
  30. 30. <bling> ?
  31. 31. <video>
  32. 32. Adobe Flash currently most common video delivery mechanism
  33. 33. <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>
  34. 34. <video src="video.webm"></video>
  35. 35. <video src="video.webm" controls autoplay loop preload="none" poster="poster.jpg" width="320" height="240"> <a href="video.webm">Download movie</a></video>
  36. 36. video as native object● behaves like any other HTML element● keyboard accessibility out-of-the-box
  37. 37. powerful (simple) API
  38. 38. controlling <video> with JavaScriptvar v = document.getElementById(player);v.play();v.pause();v.volume = … ;v.currentTime = … ;…
  39. 39. 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)…
  40. 40. people.opera.com/patrickl/experiments/webm/basic-controls
  41. 41. people.opera.com/patrickl/experiments/webm/fancy-controls
  42. 42. people.opera.com/patrickl/experiments/webm/fancy-swap
  43. 43. HTML5 means all yourold dHTML is cool again!
  44. 44. video formats the big debate?
  45. 45. HTML5 does not specify video container/codec (same as with images in HTML 4.01)
  46. 46. MP4/H.264 orOgg Theora orWebM/VP8
  47. 47. MP4 / H.264ubiquitous, patent encumbered, licensing/royalties
  48. 48. Ogg Theora free and open, no licensing feesnot many tools for it, not web optimised
  49. 49. WebM / VP8 open and royalty-free, web-optimisedsupport by hardware and software vendors
  50. 50. providing multiple sources<video controls autoplay poster="…" width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <!-- fallback content --></video>
  51. 51. flash fallback for older browsers http://camendesign.com/code/video_for_everybody
  52. 52. <video controls autoplay poster="…" width="…" height="…"> <source src="movie.mp4" type="video/mp4" /> <source src="movie.webm" type="video/webm" /> <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>
  53. 53. <audio>
  54. 54. 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)
  55. 55. <canvas>
  56. 56. canvas = “scriptable images”<canvas width="…" height="…"></canvas>
  57. 57. 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);
  58. 58. people.opera.com/patrickl/experiments/canvas/particle/3
  59. 59. mariuswatz.com/works/abstract01js
  60. 60. 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
  61. 61. www.splintered.co.uk/experiments/archives/paranoid_0.3
  62. 62. 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, … ]
  63. 63. github.com/mezzoblue/PaintbrushJS
  64. 64. 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)
  65. 65. html5doctor.com/video-canvas-magic
  66. 66. www.filamentgroup.com/examples/charting
  67. 67. canvas accessibility?
  68. 68. video, audio and canvas on any device without plugins (Java / Flash / Silverlight not ubiquitous)
  69. 69. 1. forms2. multimedia3. web apps
  70. 70. HTML5 (and friends) haslots more APIs for developers (for powerful client-side apps)
  71. 71. isgeolocationpartofhtml5.com
  72. 72. 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; ...}
  73. 73. 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
  74. 74. data storagecookies and their limitations...document.cookie = key=value; expires=Thu, 15 Feb 201023:59:59 UTC; path=/…/* convoluted string operations go here … */
  75. 75. 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
  76. 76. 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!
  77. 77. etcFile API, Web Workers, History API, Web Messaging,Drag and Drop, Server-Sent Events…
  78. 78. is it all safe to use, right now?
  79. 79. www.youtube.com/html5
  80. 80. caniuse.com
  81. 81. dont do browser sniffing http://www.flickr.com/photos/timdorr/2096272747/
  82. 82. feature-detectionprogressive enhancement, graceful degradation http://diveintohtml5.org/everything.html
  83. 83. modernizr.com
  84. 84. patching older browsersgithub.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
  85. 85. yepnopejs.com
  86. 86. sublimevideo.net
  87. 87. www.happyworm.com/jquery/jplayer
  88. 88. HTML5 as Flashkiller?
  89. 89. not a question ofHTML5 replacing Flash...
  90. 90. giving developers a choice!
  91. 91. ...should I use HTML5 today?
  92. 92. “The future is already here –its just not very evenlydistributed”William Gibson
  93. 93. http://dev.opera.com cmills@opera.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×