HTML5, just another presentation :)
1 like1,101 views
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: http://books.alistapart.com/products/html5-for-web-designers
![<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)
![[PSU Web 2011] HTML5 Design](https://cdn.slidesharecdn.com/ss_thumbnails/html5-design-110613130006-phpapp01-thumbnail.jpg?width=560&fit=bounds)
More Related Content
What's hot (20)
Viewers also liked (10)
Similar to HTML5, just another presentation :) (20)
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