The HTML5 Landscape - Confoo 2012

With the advent of modern desktop and mobile browsers supporting some or all of HTML5 the time to learn about this spec is now. Learn the basics of the additional functionality available to you with HTML5 from Canvas and Video to Geolocation and the Storage API’s. Walk through some examples and gain a deeper understanding of how you can take advantage of what HTML5 has to offer and begin the migration from black box plugins to the open standard in HTML5.

Transcript

1. The HTML5 Landscape Andrew Lombardi Owner, Tech Evangelist Mystic Coders, LLC andrew AT mysticcoders DOT com kinabalu @ irc://irc.freenode.net - ##wicket, ##java kinabalu @ twitter Saturday, March 3, 12
2. Saturday, March 3, 12
3. 12 Years in business Saturday, March 3, 12
4. Software Consultants 12 Years in business Saturday, March 3, 12
5. Software Consultants International Speaker 12 Years in business Saturday, March 3, 12
6. Software Consultants International Speaker Training 12 Years in business Saturday, March 3, 12
7. Software Consultants International Speaker Training 12 Years in business HTML5 Hopeful Saturday, March 3, 12
8. To our success! Software Consultants International Speaker Training 12 Years in business HTML5 Hopeful Saturday, March 3, 12
9. Saturday, March 3, 12
10. Saturday, March 3, 12
11. Steve Jobs Saturday, March 3, 12
12. Al Gore Steve Jobs Saturday, March 3, 12
13. Al Gore Steve Jobs High Performance Computing and Communications Act of 1991 “Information Superhighway” Saturday, March 3, 12
14. Saturday, March 3, 12
15. Tim Berners-Lee Saturday, March 3, 12
16. Tim Berners-Lee Steve Jobs Saturday, March 3, 12
17. Saturday, March 3, 12
18. 250 million as of October 2011 Saturday, March 3, 12
19. 250 million as of October 2011 Saturday, March 3, 12
20. A BRIEF HISTORY OF TIME Saturday, March 3, 12
21. A BRIEF HISTORY OF TIME 1991 - First version of HTML Saturday, March 3, 12
22. A BRIEF HISTORY OF TIME 1991 - First version of HTML 1994 - HTML2 is born Saturday, March 3, 12
23. A BRIEF HISTORY OF TIME 1991 - First version of HTML 1994 - HTML2 is born 1996 - CSS1 + JavaScript Saturday, March 3, 12
24. A BRIEF HISTORY OF TIME 1991 - First version of HTML 1994 - HTML2 is born 1996 - CSS1 + JavaScript 1996 - First “developer” mistakes JavaScript for Java Saturday, March 3, 12
25. A BRIEF HISTORY OF TIME Saturday, March 3, 12
26. A BRIEF HISTORY OF TIME 1997 - HTML4 Saturday, March 3, 12
27. A BRIEF HISTORY OF TIME 1997 - HTML4 1998 - CSS2 Saturday, March 3, 12
28. A BRIEF HISTORY OF TIME 1997 - HTML4 1998 - CSS2 2000 - XHTML is hatched Saturday, March 3, 12
29. A BRIEF HISTORY OF TIME 1997 - HTML4 1998 - CSS2 2000 - XHTML is hatched 2000 - Malformed HTML writers are burned at stake Saturday, March 3, 12
30. A BRIEF HISTORY OF TIME Saturday, March 3, 12
31. A BRIEF HISTORY OF TIME 2002 - Tableless Web Design Saturday, March 3, 12
32. A BRIEF HISTORY OF TIME 2002 - Tableless Web Design 2002 - Average HTML page creation 5x longer Saturday, March 3, 12
33. A BRIEF HISTORY OF TIME 2002 - Tableless Web Design 2002 - Average HTML page creation 5x longer 2005 - AJAX is born Saturday, March 3, 12
34. 2009 - HTML5 A BRIEF HISTORY OF TIME 2002 - Tableless Web Design 2002 - Average HTML page creation 5x longer 2005 - AJAX is born Saturday, March 3, 12
35. 2009 - HTML5 A BRIEF HISTORY OF TIME 2002 - Tableless Web Design 2002 - Average HTML page creation 5x longer 2005 - AJAX is born 2011 - HTML5 gets a logo! Saturday, March 3, 12
36. 2009 - HTML5 A BRIEF HISTORY OF TIME 2002 - Tableless Web Design 2002 - Average HTML page creation 5x longer 2005 - AJAX is born 2011 - HTML5 gets a logo! Saturday, March 3, 12
37. What is ? Saturday, March 3, 12
38. What is ? Saturday, March 3, 12
39. HTML5 is a replacement for HTML 4.01, XHTML 1.0, and XHTML 1.1 is... Saturday, March 3, 12
40. WHATWG vs W3C deathmatch Saturday, March 3, 12
41. WHATWG vs W3C deathmatch Draconian Error Handling Saturday, March 3, 12
42. WHATWG vs W3C deathmatch Backwards Compatibility Draconian Error Handling Saturday, March 3, 12
43. Why ? Saturday, March 3, 12
44. Saturday, March 3, 12
45. Saturday, March 3, 12
46. Support coming in 2012? http://ie.microsoft.com/testdrive/ Saturday, March 3, 12
47. Saturday, March 3, 12
48. Saturday, March 3, 12
49. The Setup Saturday, March 3, 12
50. The Old Way <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”> Saturday, March 3, 12
51. The New Way <!DOCTYPE html> Saturday, March 3, 12
52. The New Way <!DOCTYPE html> Miss the DOCTYPE and get Quirks mode Saturday, March 3, 12
53. The Old Way <html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en"> Saturday, March 3, 12
54. The New Way <html lang="en"> Saturday, March 3, 12
55. The Old Way <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> Saturday, March 3, 12
56. The New Way <meta charset="utf-8"> Saturday, March 3, 12
57. Typing is so 2009 Saturday, March 3, 12
58. Typing is so 2009 <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> ... </script> Instead of Saturday, March 3, 12
59. Typing is so 2009 <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> ... </script> Instead of Just do <link rel="stylesheet" href="style.css" /> <script> ... </script> Saturday, March 3, 12
60. Typing is so 2009 <link rel="stylesheet" href="style.css" type="text/css" /> <script type="text/javascript"> ... </script> Instead of Just do <link rel="stylesheet" href="style.css" /> <script> ... </script> We know what you mean. Saturday, March 3, 12
61. Boolean Types in Tags <input type="text" name="email" required /> Saturday, March 3, 12
62. Boolean Types in Tags If you reference it in the markup, it’s true. <input type="text" name="email" required /> Saturday, March 3, 12
63. Browser Support Saturday, March 3, 12
64. Browser Support Saturday, March 3, 12
65. Video and Audio in HTML5 has a lot of promise, but patent hippos get in the way Saturday, March 3, 12
66. HTML5 Video Saturday, March 3, 12
67. HTML5 Video Ogg - Not patent encumbered but quality is not there Saturday, March 3, 12
68. HTML5 Video Ogg - Not patent encumbered but quality is not there H.264 - Only pay royalties if end-user video is not free Saturday, March 3, 12
69. HTML5 Video Ogg - Not patent encumbered but quality is not there H.264 - Only pay royalties if end-user video is not free WebM / VP8 - Google released as royalty free after purchasing from On2 Saturday, March 3, 12
70. HTML5 Video Ogg - Not patent encumbered but quality is not there H.264 - Only pay royalties if end-user video is not free WebM / VP8 - Google released as royalty free after purchasing from On2 Patent landscape for video is unclear Saturday, March 3, 12
71. HTML5 Video <video ! id=”video” ! width="640" ! height="360" ! src="big_buck_bunny.mp4" ! controls ! poster="poster.jpg"> </video> document.getElementById("video").play(); Saturday, March 3, 12
72. autoplay - video starts playing as soon as it’s ready controls - browser-specific controls for video displayed height - height of video Video Attributes width - width of video loop - replay video on end src - location of video poster - image to show before video plays Saturday, March 3, 12
73. HTML5 Video <video width="640" height="360" controls poster="poster.jpg"> ! <source src="big_buck_bunny.mp4" type="video/mp4" /> ! <source src="big_buck_bunny.webm" type="video/webm" /> ! <source src="big_buck_bunny.ogv" type="video/ogg" /> ! <object width="640" height="384" type="application/x-shockwave-flash" data="player.swf"> ! ! <param name="movie" value="player.swf" /> ! ! <param name="flashvars" value="controlbar=over&amp;image=poster.jpg&amp;file=big_buck_bunny.mp4" /> ! ! <img src="poster.jpg" width="640" height="360" alt="Big Buck Bunny" ! ! title="No video playback capabilities, please download the video below" /> ! </object> </video> Saturday, March 3, 12
74. HTML5 Video native controls! Saturday, March 3, 12
75. Video Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome H.264 Ogg + WebM H.264 *H.264 + Ogg + WebM iOS Android H.264 * Will be dropped in v17 *H.264 + WebM * Magical incantation required Saturday, March 3, 12
76. Video Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 9.0 3.5 3.2 4.0 iOS Android 3.2 2.3 Saturday, March 3, 12
77. Checking Video Support function supports_video() { ! return !document.createElement('video').canPlayType; } Saturday, March 3, 12
78. Modernizr Library if(Modernizr.video) { ! // let's play some video! } Saturday, March 3, 12
79. Modernizr Library if(Modernizr.video) { ! // let's play some video! } Saturday, March 3, 12
80. HTML5 Audio <audio ! id="audio" ! src="elvis.mp3" ! controls ! autobuffer /> document.getElementById("audio").play(); Saturday, March 3, 12
81. autoplay - audio starts playing as soon as it’s ready controls - browser-specific controls for audio displayed Audio Attributes loop - replay audio on end src - location of audio preload - should browser preload audio? if autoplay -ignored Saturday, March 3, 12
82. HTML5 Audio <audio controls autobuffer> ! <source src="elvis.ogg" /> ! <source src="elvis.mp3" /> </audio> Saturday, March 3, 12
83. Audio Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome MP3 Ogg, WAV MP3, WAV Ogg, MP3, WAV iOS Android MP3, WAV No Saturday, March 3, 12
84. Audio Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 9.0 3.5 3.2 4.0 iOS Android 4.0 No codecs Saturday, March 3, 12
85. Nothing to do with HTML5 Canvas but who’s complaining? Saturday, March 3, 12
86. Canvas <canvas id="someshape" width="150" height="150"></canvas> var shape = document.getElementById('someshape'); var context = shape.getContext('2d'); context.fillStyle = "rgb(255,0,0)"; context.fillRect(0, 0, 150, 150); Saturday, March 3, 12
87. Canvas <canvas id="confoologo"> <p>Your browser doesn't support canvas.</p> </canvas> <script> var canvas = document.getElementById('confoologo'); if(canvas.getContext) { ! ! var context = canvas.getContext('2d'); ! ! var myImage = new Image(); ! ! myImage.onload = function() { ! ! canvas.setAttribute('width', myImage.width); ! ! canvas.setAttribute('height', myImage.height); ! ! context.drawImage(myImage, 0, 0); } ! } ! myImage.src = "confoologo.png";! } </script> Saturday, March 3, 12
88. Canvas Extreme http://www.nihilogic.dk/labs/wolf/ Saturday, March 3, 12
89. Canvas Browser Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 9.0 3.0 3.2 4.0 iOS Android 3.2 2.1 Saturday, March 3, 12
90. Forms in HTML5 allow you to accept, process and validate user input. Saturday, March 3, 12
91. Tag Description type=”date” Represents a UTC formatted date type=”color” Represents a hexadecimal RGB color value type=”number” Represents a numeric value type=”search” Simple text box but browser can choose to provide custom control type=”email”, type=”url”, type=”tel” Represents contact details. Browser can choose to represent our handle input differently (i.e. Mobile Safari) type=”range” Represents a range of values with min/max HTML5 Forms Saturday, March 3, 12
92. Tag Description pattern=”some.regex” Use a regex to validate against the input without requiring Javascript involvement placeholder=”Insert placeholder text here” Attached to input type=”text” to show placeholder text before user clicks autofocus Boolean value used only once per page identifying the form component that should receive immediate focus after page load autocomplete on/off switch used to tell browser if it’s okay to autocomplete this field with saved data required Boolean value for semantically and functionally marking a field as requiring input before valid submission <datalist> A combo box allowing selection via preselected values or entering custom placeholder=”Insert placeholder text here” Attached to input type=”text” to show placeholder text before user clicks HTML5 Forms (more) Saturday, March 3, 12
93. New Form Tags Browser Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 10.0 4.0 4.0 4.0 iOS Android 5.0 ???? Saturday, March 3, 12
94. Semantic markup in HTML5 identifies based on meaning rather than layout Saturday, March 3, 12
95. Tag Description <section> A generic section of a document or application, a grouping of content typically with a header <nav> Used to identify major navigation links on the page, usually in the header of a page <article> A reusable, independently distributable composition in a document, page, application or site <aside> Tangentially related content to the main article (sidebars, pull quotes, advertising) <hgroup> Used to group h1-h6 elements when heading has multiple levels <header> Represents a group of introductory or navigational aids New Semantic Tags Saturday, March 3, 12
96. Tag Description <footer> Represents a footer for its nearest ancestor sectioning content or root element. Bottom of a page as well as <section>’s of a page are relevant here <time> Represents time on a 24-hour clock, or precise date optionally with timezone <mark> Represents a run of text in one document marked or highlighted for reference purposes <meter> Can be used to mark up measurements, part of a scale with min/max values <progress> Markup denoting a value that is in the process of changing New Semantic Tags (more) Saturday, March 3, 12
97. Semantic Browser Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 9.0 3.0 3.2 4.0 iOS Android 4.0 2.2 Saturday, March 3, 12
98. Semantic Tag Browser Support <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Saturday, March 3, 12
99. Semantic Tag Browser Support <!--[if lt IE 9]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> Saturday, March 3, 12
100. Local Storage allows you to save up to 5MB of data for your web application Saturday, March 3, 12
101. Local Storage textarea.addEventListener('keyup', function () { ! window.localStorage['value'] = area.value; ! window.localStorage['timestamp'] = (new Date()).getTime(); }, false); textarea.value = window.localStorage['value']; http://www.mysticcoders.com/html5/webstorage.html Saturday, March 3, 12
102. Local Storage Browser Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 8.0 3.0 4.0 4.0 iOS Android 3.2 2.1 Saturday, March 3, 12
103. Workers at it’s simplest enable performing computationally expensive tasks without interrupting the user interface Saturday, March 3, 12
104. <!DOCTYPE HTML> <html> <head> <title>Worker example: One-core computation</title> </head> <body> <p>The highest prime number discovered so far is: <output id="result"></output></p> <script> var worker = new Worker('worker.js'); worker.onmessage = function (event) { document.getElementById('result').textContent = event.data; }; </script> </body> </html> Web Workers Saturday, March 3, 12
105. Web Workers var n = 1; search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } Saturday, March 3, 12
106. Web Workers var n = 1; search: while (true) { n += 1; for (var i = 2; i <= Math.sqrt(n); i += 1) if (n % i == 0) continue search; // found a prime! postMessage(n); } http://www.mysticcoders.com/html5/worker-example.html Saturday, March 3, 12
107. Web Workers Browser Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 10.0 3.5 4.0 4.0 iOS Android 5.0 2.1 yes, 2.2 - 4.0, no Saturday, March 3, 12
108. Geolocation let’s you tell the browser where you are Saturday, March 3, 12
109. Geolocation if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(function(position) { ! var lat = position.coords.latitude; ! var lng = position.coords.longitude; ! alert('Your currently @ ('+lat+', '+lng+')'); ! }); } Saturday, March 3, 12
110. Geolocation http://www.mysticcoders.com/html5/geolocation.html if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(function(position) { ! var lat = position.coords.latitude; ! var lng = position.coords.longitude; ! alert('Your currently @ ('+lat+', '+lng+')'); ! }); } Saturday, March 3, 12
111. Geolocation if (navigator.geolocation) { ! navigator.geolocation.getCurrentPosition(function(position) { ! var lat = position.coords.latitude; ! var lng = position.coords.longitude; ! var options = { position: new google.maps.LatLng(lat, lng) } ! var marker = new google.maps.Marker(options); ! marker.setMap(map); ! }); } Saturday, March 3, 12
112. Geolocation Browser Support Internet Explorer Mozilla Firefox Apple Safari Google Chrome 9.0 3.5 5.0 5.0 iOS Android 3.2 2.1 Saturday, March 3, 12
113. application cache - specify with a cache.manifest files you’d like the browser to eagerly cache for offline use More HTML5 web database - embedded SQL database which most browsers have chosen to use sqlite cross document messaging - allows documents to communicate regardless of source domain (no XSS script attacks) drag and drop - allows elements to be draggable and droppable Saturday, March 3, 12
114. More HTML5 webgl - provides an API for writing web applications utilizing hardware accelerated 3D graphics web notifications - provides an API for alerting users outside of a web page via notifications Saturday, March 3, 12
115. More websites for HTML5 knowledge RESOURCES Saturday, March 3, 12
116. http://validator.nu http://validator.w3.org/ http://www.brucelawson.co.uk/category/html5/ http://html5doctor.com/ http://diveintohtml5.org/ http://whatwg.org/html5 http://www.modernizr.com/ http://code.google.com/p/html5shiv/ http://html5rocks.com Saturday, March 3, 12
117. Saturday, March 3, 12
118. HTML5 Rocks!! Saturday, March 3, 12
119. Q&A Thanks for listening! Andrew Lombardi Owner, Tech Evangelist Mystic Coders, LLC andrew AT mysticcoders DOT com kinabalu @ irc://irc.freenode.net - ##wicket, ##java Saturday, March 3, 12