Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The HTML5 Landscape - Confoo 2012

kinabalu
March 03, 2012

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.

kinabalu

March 03, 2012
Tweet

More Decks by kinabalu

Other Decks in Technology

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. Al Gore Steve Jobs High Performance Computing and Communications Act

    of 1991 “Information Superhighway” Saturday, March 3, 12
  3. A BRIEF HISTORY OF TIME 1991 - First version of

    HTML 1994 - HTML2 is born Saturday, March 3, 12
  4. A BRIEF HISTORY OF TIME 1991 - First version of

    HTML 1994 - HTML2 is born 1996 - CSS1 + JavaScript Saturday, March 3, 12
  5. 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
  6. A BRIEF HISTORY OF TIME 1997 - HTML4 1998 -

    CSS2 Saturday, March 3, 12
  7. A BRIEF HISTORY OF TIME 1997 - HTML4 1998 -

    CSS2 2000 - XHTML is hatched Saturday, March 3, 12
  8. 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
  9. A BRIEF HISTORY OF TIME 2002 - Tableless Web Design

    2002 - Average HTML page creation 5x longer Saturday, March 3, 12
  10. A BRIEF HISTORY OF TIME 2002 - Tableless Web Design

    2002 - Average HTML page creation 5x longer 2005 - AJAX is born Saturday, March 3, 12
  11. 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
  12. 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
  13. 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
  14. HTML5 is a replacement for HTML 4.01, XHTML 1.0, and

    XHTML 1.1 is... Saturday, March 3, 12
  15. 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
  16. The New Way <!DOCTYPE html> Miss the DOCTYPE and get

    Quirks mode Saturday, March 3, 12
  17. Typing is so 2009 <link rel="stylesheet" href="style.css" type="text/css" /> <script

    type="text/javascript"> ... </script> Instead of Saturday, March 3, 12
  18. 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
  19. 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
  20. Boolean Types in Tags If you reference it in the

    markup, it’s true. <input type="text" name="email" required /> Saturday, March 3, 12
  21. Video and Audio in HTML5 has a lot of promise,

    but patent hippos get in the way Saturday, March 3, 12
  22. 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
  23. 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
  24. 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
  25. 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
  26. 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
  27. 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
  28. 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
  29. 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
  30. HTML5 Audio <audio ! id="audio" ! src="elvis.mp3" ! controls !

    autobuffer /> document.getElementById("audio").play(); Saturday, March 3, 12
  31. 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
  32. HTML5 Audio <audio controls autobuffer> ! <source src="elvis.ogg" /> !

    <source src="elvis.mp3" /> </audio> Saturday, March 3, 12
  33. 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
  34. 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
  35. 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
  36. 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
  37. 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
  38. 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
  39. 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
  40. 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
  41. 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
  42. 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
  43. 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
  44. Local Storage allows you to save up to 5MB of

    data for your web application Saturday, March 3, 12
  45. 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
  46. 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
  47. Workers at it’s simplest enable performing computationally expensive tasks without

    interrupting the user interface Saturday, March 3, 12
  48. <!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
  49. 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
  50. 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
  51. 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
  52. 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
  53. 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
  54. 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
  55. 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
  56. 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
  57. 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
  58. 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