Your SlideShare is downloading. ×

Brave new world of HTML5

3,717

Published on

In this, my talk for Webinale in Berlin, June 1st 2011, I give an overview of HTML5 history and main features, relating it all back to how possible it is use develop with these new features today. …

In this, my talk for Webinale in Berlin, June 1st 2011, I give an overview of HTML5 history and main features, relating it all back to how possible it is use develop with these new features today. Thanks to Patrick Lauke for allowing me to steal a lot of his slides ;-)

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

No Downloads
Views
Total Views
3,717
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
94
Comments
0
Likes
10
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

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

×