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 ;-)

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 because
we’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/

8. HTML5…without the hype?

9. A brief history of HTML5
1999 HTML 4.01
2000 XHTML 1.0

10. 2004 W3C focus on XHTML 2.0
…the future is XML-based!
http://www.flickr.com/photos/craiga/17071467/

11. WHATWG
Web Hypertext Application Technology Working Group

12. 2007 W3C HTML5 WG

14. HTML5 does not replace HTML 4.01 / XHTML 1.0

15. HTML5 has more bling!

16. “...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 HTML5
http://lists.w3.org/Archives/Public/public-html/2009Jan/0215.html

17. HTML4.01 primarily defined
markup elements

18. HTML5 supercedes
HTML 4.01, XHTML 1.0
and DOM Level 2 HTML

19. HTML5 adds/redefines
markup elements
header, footer, nav, article …

20. HTML5 extends
DOM Level 2
innerHTML / outerHTML
getElementsByClassName()

21. HTML5 aimed at browser
devs
detailed algorithms for
processing/error correction

22. 1. forms
2. multimedia
3. web apps

23. 1. forms
2. multimedia
3. web apps

24. improved form elements
because the web is more interactive

25. jqueryui.com

26. 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>

27. 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">
…

28. people.opera.com/patrickl/experiments/forms/newtypes.html

29. people.opera.com/patrickl/experiments/forms/validation.html

30. validity checking with JavaScript
form.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;
};

31. 1. forms
2. multimedia
3. web apps

32. <bling> ?

33. <video>

34. Adobe Flash currently most common
video delivery mechanism

35. <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&f
s=1&" type="application/x-shockwave-flash"
allowscriptaccess="always" allowfullscreen="true"
width="425" height="344"></embed>
</object>

36. <video src="video.webm"></video>

37. <video src="video.webm"
controls
autoplay
loop
preload="none"
poster="poster.jpg"
width="320" height="240">
<a href="video.webm">Download movie</a>
</video>

38. video as native object
● behaves like any other HTML element
● keyboard accessibility out-of-the-box

39. powerful (simple) API

40. controlling <video> with JavaScript
var v = document.getElementById('player');
v.play();
v.pause();
v.volume = … ;
v.currentTime = … ;
…

41. 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)
…

42. people.opera.com/patrickl/experiments/webm/basic-controls

43. people.opera.com/patrickl/experiments/webm/fancy-controls

44. people.opera.com/patrickl/experiments/webm/fancy-swap

45. HTML5 means all your
old dHTML is cool again!

46. video formats
the big debate?

47. HTML5 does not specify
video container/codec
(same as with images in HTML 4.01)

48. MP4/H.264
or
Ogg Theora
or
WebM/VP8

49. MP4 / H.264
ubiquitous, patent encumbered, licensing/royalties

50. Ogg Theora
free and open, no licensing fees
not many tools for it, not web optimised

51. WebM / VP8
open and royalty-free, web-optimised
support by hardware and software vendors

52. 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>

53. flash fallback for older browsers
http://camendesign.com/code/video_for_everybody

54. <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>

55. <audio>

56. 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)

57. <canvas>

58. canvas = “scriptable images”
<canvas width="…" height="…"></canvas>

59. 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);

60. people.opera.com/patrickl/experiments/canvas/particle/3

61. mariuswatz.com/works/abstract01js

62. 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

63. www.splintered.co.uk/experiments/archives/paranoid_0.3

64. 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, … ]

65. github.com/mezzoblue/PaintbrushJS

66. 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)

67. html5doctor.com/video-canvas-magic

68. www.filamentgroup.com/examples/charting

69. canvas accessibility?

70. video, audio and canvas on any device
without plugins
(Java / Flash / Silverlight not ubiquitous)

73. 1. forms
2. multimedia
3. web apps

74. HTML5 (and friends) has
lots more APIs for developers
(for powerful client-side apps)

75. isgeolocationpartofhtml5.com

76. geolocation
navigator.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;
...
}

77. application cache
<html manifest="blah.manifest">
CACHE MANIFEST
# send this with correct text/cache-manifest MIME
images/sprites.png
scripts/common.js
scripts/jquery.js
styles/global.css
NETWORK:
# never cached (apart from normal caching mechanism)
onlineonly.css
FALLBACK:
# pattern matching. fallback file will also be cached
images/ images/not-offline.png

78. 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 … */

79. localStorage/sessionStorage
localStorage.setItem(key, value);
localStorage.getItem(key);
localStorage.clear();
localStorage.key = value;
if (localStorage.key == '…') { … }
…
localStorage – persistent per domain
sessionStorage – current URL and window in session

80. 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!

81. etc
File API, Web Workers, History API, Web Messaging,
Drag and Drop, Server-Sent Events…

82. is it all safe to use, right now?

83. www.youtube.com/html5

84. caniuse.com

85. don't do browser sniffing
http://www.flickr.com/photos/timdorr/2096272747/

87. feature-detection
progressive enhancement, graceful degradation
http://diveintohtml5.org/everything.html

88. modernizr.com

89. patching older browsers
github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills

90. yepnopejs.com

91. sublimevideo.net

92. www.happyworm.com/jquery/jplayer

93. HTML5 as Flashkiller?

94. not a question of
HTML5 replacing Flash...

95. giving developers a choice!

96. ...should I use HTML5 today?

97. “The future is already here –
it's just not very evenly
distributed”
William Gibson

98. http://dev.opera.com
cmills@opera.com