Successfully reported this slideshow.

HTML5, just another presentation :)


Published on

I based my presention on the great "HTML5 for Web designers" by Jeremy Keith. Awesome and pragmatic book, the way I like it. Get your copy on:

  • Be the first to comment

HTML5, just another presentation :)

  1. 1. Belgacom Skynet, 2011 - François Massart
  2. 2. Summary1. A brief history of markup2. The design of HTML53. Rich Media4. Web Forms 2.05. Semantics6. Using HTML5 today
  3. 3. A brief history of markup
  4. 4. Untitled document• First document “HTML Tags” in 1991• Evolutions like the <img> tag in HTML 2.0• HTML 4.01 published in 1999• XHTML 1: HTML as XML No new element, just stricter syntax
  5. 5. XHTML 1 Rules• Considered as “Best practice”• Everything in lowercase <H2>Wrong</H2> <h2>Correct</h2>• Attribute values between quotes <p class=intro>Yaaak</p> <p class=”intro”>Yep!</p> <p class=”intro success”>Yep!</p>
  6. 6. XHTML 2• HTML is replaced by XML• Not backward compatible, hum...• Disaster...
  8. 8. • Pure standards ideology vs Real world• Representatives from Opera, Apple and Mozilla were unhappy• Rebels formed the Web Hypertext Application Technology Work Group
  9. 9. WHATWG• Discuss issues like the W3C but final decision is made by the editor (Ian Hickson)...• In theory: less democratic process• In practice: faster decisions• They created... Web Forms 2.0 and Web Apps 1.0
  10. 10. Let’s cook...Web Forms 2.0 +Web Apps 1.0 = HTML5
  11. 11. The reunification• XHTML 2 was going nowhere (and slowly!)• WHATWG works can be used as basis for next versions of HTML...• Confusing situation with 3 technologies: XHTML 2, HTML 5 and HTML5...• Only keep HTML5
  12. 12. Current state of HTML5• 2 groups working on HTML5• WHATWG “Commit then review”• W3C “Review then commit”• Should become a “proposed recommendation” in 2022• “Candidate recommendation” in 2012
  13. 13. Ready to use?• Specifications due in 2012• Depends on browsers support• There won’t be a single point in time at which we can declare that the language is ready to use.• You are already using HTML5
  14. 14. HTML5 SpecsUsers Browsers
  15. 15. The design of HTML5
  16. 16. Simple principles• Support existing content :)• Do not reinvent the wheel• Don’t go extreme, keep it real
  17. 17. Priority of constituencies In case of conflict, consider users over authors overimplementers over specifiers over theoretical purity.
  18. 18. Error handling• Defined in the specifications• For the first time!• Browsers makers can focus on new features instead of errors• How to deal with malformed documents?• Very ambitious
  19. 19. New HTML DocType• <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" " strict.dtd">• <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" " DTD/xhtml1-strict.dtd">• <!DOCTYPE html>
  20. 20. <!DOCTYPE html>• Very pragmatic• Need to support existing content• Browsers support features, not doctypes• DTD are meant for validators• Quirks mode vs Standards mode
  21. 21. Keep it simple• <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">• <meta charset="UTF-8">• <script type="text/javascript" src="file.js"></ script>• <link rel="stylesheet" type="text/css" href="file.css">
  22. 22. Syntax rules get lazy• You are free to enforce a particular style of writing (lowercase, uppercase, quotes...)• Chose your syntax and hold on it!• My recommandation: keep XHTML syntax• But drop the value for Boolean attributes
  23. 23. New JavaScript APIs• No real specification until now• HTML5 will finally document all its APIs• Ensure compatibility through all browsers• What’s up? Undo manager, offline storage, drag and drop...
  24. 24. Rich Media
  25. 25. Filling the gaps• HTML + CSS + JavaScript = Application• Almost...• You need a plug-in’s for video and audio• Closed technologies• Native is better :)
  26. 26. Canvas• Environment for creating dynamic images via JavaScript drawing API• Simple, elegant and fallback enabled <canvas id="my-first-canvas" width="360" height="240"> <p>No canvas support? Ignore it and use its children:</p> <img src="puppy.jpg" alt="a cute puppy"/> </canvas>
  27. 27. Audio• Available options: autoplay, loop, controls...• Simple as: <audio src="witchitalineman.mp3" loop></audio>• Can be controlled by JavaScript: document.getElementById(player).pause();
  28. 28. Big deal on codecs?• Some format costs money (MP3, H264...)• Others are free of charge <audio controls> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> </audio>• Online demo
  29. 29. Bulletproof example<audio controls=""> <source src="witchitalineman.ogg" type="audio/ogg"> <source src="witchitalineman.mp3" type="audio/mpeg"> <object type="application/x-shockwave-flash" data="player.swf?soundFile=witchitalineman.mp3"> <param name="movie" value="player.swf? soundFile=witchitalineman.mp3"> <a href="witchitalineman.mp3">Download the song</a> </object></audio>
  30. 30. Video• Very similar to audio tag...• Full example: <video controls width="360" height="240" poster="placeholder.jpg"> <source src="movie.ogv" type="video/ogg"> <source src="movie.mp4" type="video/mp4"> <object type="application/x-shockwave-flash" width="360" height="240" data="player.swf? file=movie.mp4"> <param name="movie" value="player.swf?file=movie.mp4"> <a href="movie.mp4">Download the movie</a> </object> </video>
  31. 31. Web Forms 2.0
  32. 32. <input> revisited• placeholder attribute <input type=”text” placeholder=”Keywords?” />• autofocus attribute (Boolean) <input type=”text” autofocus />• required attribute (Boolean) <input type=”text” required />
  33. 33. <input> revisited• autocomplete attribute (on/off) • <form action="/send.php" autocomplete="on"> • <input type="text" name="captcha" autocomplete="off" />
  34. 34. <datalist>• Crossbreed between <input> and <select>• Sample code: <input type="text" list="planets"/> <datalist id="planets"> <option value="Mercury"> ... <option value="Neptune"> </datalist>
  35. 35. <input>’s new types• type=”search”• type=”email”• type=”url”• type=”tel” (try this in Mobile Safari)• If unsupported fallback to default: type=”text”
  36. 36. <input>’s new types• type=”range”• type=”number”• type=”date”• type=”color”• custom (type) pattern=”[d]{5}(-[d]{4})”
  37. 37. Nice! Can I style them?• NO:-PE• Web is NOT about control• The user is used to his native browser UI elements...• Browsers will probably make them nicer
  38. 38. Semantics
  39. 39. <mark>keyword</mark>• Give importance to content in a special context (e.g. search results)• Instead of <em> or <strong>
  40. 40. <time>• Today using microformats: <abbr class="dtstart" title="1992-01-12"> January 12th, 1992 </abbr>• Soon: <time class="dtstart" datetime="1992-01-12"> January 12th, 1992 </time>
  41. 41. <meter>• Markup measurements, part of a scale (min/max values): <meter>9 out of 10 stars</meter> <meter max="10">9 stars</meter> <meter low="-273" high="100" min="12" max="30" optimum="21" value="25"> Its quite warm for this time of year. </meter>
  42. 42. <progress>• Markup measurement that is changing... Your profile is <progress>60%</progress> complete. <progress min="0" max="100" value="60"></progress>• Great with JavaScript ! (File uploads, etc.)
  43. 43. Structure It’s the content that matters, not the position.• <section>• <header>• <footer>• <aside>• <nav>• <article>
  44. 44. <section>• Grouping together thematically-related content vs <div> which have no semantic. <section> <h1>DOM Scripting</h1> <p>The book is aimed at designers rather than programmers.</p> <p>By Jeremy Keith</p> </section>
  45. 45. <header>• It is NOT the “master head”.• Described as “a group of introductory or navigational aids.” <section> <header> <h1>DOM Scripting</h1> </header> <p>...</p> </section>
  46. 46. <footer>• NOT describing a position but...• “should contain information about its containing element: author, copyright information, links to related content, etc.” <section> ... <footer> <p>Powered by Belga</p> </footer> </section>
  47. 47. <aside>• Once again, it’s the content that matters, not the position.• Example: pullquotes Nice to have, but you can remove them without affecting the main content.
  48. 48. Pop quiz !• What new structure markup element should contain the author’s infos ? • <section> • <header> • <footer> • <aside> • <nav> • <article>
  49. 49. <footer>
  50. 50. <nav>• As expected: containing navigation informations.• Usually a list of links• Use it for site-wide links• Often inside <header> which contains “navigational aids”
  51. 51. <article> <header> <footer><section> <nav> <aside> <article>
  52. 52. <article>• <article> a specialized kind of <section>.• Self contained...• Now what is “self contained”... Think of it as in a RSS feed.• <article> vs <section>... Tricky task!
  53. 53. Using HTML5 today
  54. 54. Styling• Browsers won’t apply default styling on “New elements”, define yours! section, article, header, footer, nav, aside, hgroup { display: block;}• Internet Explorer cannot handle it! You need an extra JavaScript...
  55. 55. Validation• Just a tool, use it wisely• will be used when doctype is HTML5...• Even from our old friend
  56. 56. Feature detection• Testing feature support• Provide a JavaScript alternative• Don’t re-invent the wheel!• You can use Modernizr
  57. 57. Modernizr• if (!Modernizr.inputtypes.color) { // JavaScript fallback goes here. }
  58. 58. Get on it!• Dependable features• Roughly usable features• Experimental features• Edge features
  59. 59. Dependable features• doctype <!DOCTYPE html>• charset <meta charset="UTF-8">• self-closed tags (+optional quotes)• no more type attributes type="text/css"• new semantics <article>, <section>, ...• data-* attributes <p data-timer="5">...• contenteditable
  60. 60. Roughly usable features• <audio> & <video>• <canvas> demo• SVG• geolocation• web sockets• drag and drop• input autofocus• input placeholder
  61. 61. Experimental features• form input types• <meter> & <progress>• web SQL database• web storage• web workers• WebGL• File API• history.pushState
  62. 62. Edge features• hardware acceleration• IndexedDB• orientation• <device>• audio data API• <input speech>• SVG filters
  63. 63. Go to and learn!• Learn through books, websites, Google Reader, etc.• HTML5 is a living standard... It’s alive ! Stay on your toes.• Links: ! ! !