HTML5, just another presentation :)
1 like1,109 views
The document provides a comprehensive overview of HTML5, detailing its historical development, design principles, and features such as rich media integration and enhanced web forms. It discusses the transition from XHTML to HTML5, emphasizing the importance of user and browser compatibility while introducing new elements and attributes to improve semantics and usability. The document also highlights the significance of validation, feature detection, and the ongoing evolution of HTML5 as a living standard.
![<input>’s new types
• type=”range”
• type=”number”
• type=”date”
• type=”color”
• custom (type) pattern=”[d]{5}(-[d]{4})”](https://image.slidesharecdn.com/html5v3-110311080409-phpapp02/85/HTML5-just-another-presentation-36-320.jpg)
HTML5, just another presentation :)
- 1. Belgacom Skynet, 2011 - François Massart
- 2. Summary 1. A brief history of markup 2. The design of HTML5 3. Rich Media 4. Web Forms 2.0 5. Semantics 6. Using HTML5 today
- 3. A brief history of markup
- 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. 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. XHTML 2 • HTML is replaced by XML • Not backward compatible, hum... • Disaster...
- 7. XHTML 2 XHTML2 HAS FAILED!
- 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. 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. Let’s cook... Web Forms 2.0 + Web Apps 1.0 = HTML5
- 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. 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. 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. HTML5 Specs Users Browsers
- 15. The design of HTML5
- 16. Simple principles • Support existing content :) • Do not reinvent the wheel • Don’t go extreme, keep it real
- 17. Priority of constituencies In case of conflict, consider users over authors over implementers over specifiers over theoretical purity.
- 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. New HTML DocType • <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/ strict.dtd"> • <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict //EN" "http://www.w3.org/TR/xhtml1/ DTD/xhtml1-strict.dtd"> • <!DOCTYPE html>
- 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. 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. 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. 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. Rich Media
- 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. 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. Audio • Available options: autoplay, loop, controls... • Simple as: <audio src="witchitalineman.mp3" loop></audio> • Can be controlled by JavaScript: document.getElementById('player').pause();
- 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. 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. 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. Web Forms 2.0
- 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. <input> revisited • autocomplete attribute (on/off) • <form action="/send.php" autocomplete="on"> • <input type="text" name="captcha" autocomplete="off" />
- 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. <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. <input>’s new types • type=”range” • type=”number” • type=”date” • type=”color” • custom (type) pattern=”[d]{5}(-[d]{4})”
- 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. Semantics
- 39. <mark>keyword</mark> • Give importance to content in a special context (e.g. search results) • Instead of <em> or <strong>
- 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. <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"> It's quite warm for this time of year. </meter>
- 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. Structure It’s the content that matters, not the position. • <section> • <header> • <footer> • <aside> • <nav> • <article>
- 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. <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. <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. <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. Pop quiz ! • What new structure markup element should contain the author’s infos ? • <section> • <header> • <footer> • <aside> • <nav> • <article>
- 49. <footer>
- 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. <article> <header> <footer> <section> <nav> <aside> <article>
- 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!
- 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. Validation • Just a tool, use it wisely • http://validator.nu/ will be used when doctype is HTML5... • Even from our old friend http://validator.w3.org/
- 56. Feature detection • Testing feature support • Provide a JavaScript alternative • Don’t re-invent the wheel! • You can use Modernizr
- 57. Modernizr • www.modernizr.com if (!Modernizr.inputtypes.color) { // JavaScript fallback goes here. }
- 58. Get on it! • Dependable features • Roughly usable features • Experimental features • Edge features
- 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. Roughly usable features • <audio> & <video> • <canvas> demo • SVG • geolocation • web sockets • drag and drop • input autofocus • input placeholder
- 61. Experimental features • form input types • <meter> & <progress> • web SQL database • web storage • web workers • WebGL • File API • history.pushState
- 62. Edge features • hardware acceleration • IndexedDB • orientation • <device> • audio data API • <input speech> • SVG filters
- 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: ! http://html5rocks.com/ ! http://html5doctor.com/ ! http://whatwg.org/html5