HTML5 History & Features
•Download as KEY, PDF•
0 likes•869 views
HTML5 presented at the Fox Valley Computing Professionals on December 14, 2010. Explores the history, philosophy, and drama behind this popular new spec for the web, and looks at some of the key new features.
Recommended
More Related Content
What's hot
What's hot (20)
Similar to HTML5 History & Features
Similar to HTML5 History & Features (20)
More from Dave Ross
More from Dave Ross (20)
Recently uploaded
Recently uploaded (20)
HTML5 History & Features
- 1. HTML5 Dave Ross Fox Valley Computing Professionals December 14, 2010
- 2. Drama
- 3. Politics
- 4. Betrayal
- 6. • 1991 - "HTML Tags"
- 7. • 1991 - "HTML Tags" • 1995 - HTML 2.0
- 8. • 1991 - "HTML Tags" • 1995 - HTML 2.0 • 1997 - HTML 3.2
- 9. • 1991 - "HTML Tags" • 1995 - HTML 2.0 • 1997 - HTML 3.2 • 1997 - HTML 4.0
- 10. • 1991 - "HTML Tags" • 1995 - HTML 2.0 • 1997 - HTML 3.2 • 1997 - HTML 4.0 • 1998 - HTML 4.0 (revised)
- 11. • 1991 - "HTML Tags" • 1995 - HTML 2.0 • 1997 - HTML 3.2 • 1997 - HTML 4.0 • 1998 - HTML 4.0 (revised) • 1999 - HTML 4.01
- 12. XHTML
- 13. XHTML • Formal syntax (XML) • Machine friendly • MIME types, xmlns, strict/transitional
- 14. • 2000 - XHTML 1.0 • 2001 - XHTML 1.1 • 2002 - XHTML 2.0/XForms/ XFrames
- 15. 2004
- 16. Should the W3C develop declarative extensions to HTML and CSS and imperative extensions to DOM, to address medium level Web Application requirements, as opposed to sophisticated, fully-
- 17. Should the W3C develop declarative extensions to HTML and CSS and imperative extensions to DOM, to address medium level Web Application requirements, as opposed to sophisticated, fully- No.
- 18. WHATWG Web Hypertext Application Technology Working Group
- 19. • Mozilla Foundation • Apple • Google • Opera
- 20. • Mozilla Foundation • Apple • Google • Opera Microsoft cited lack of a patent
- 21. Seven Principles
- 22. Seven Principles • Backwards compatibility, clear migration path
- 23. Seven Principles • Backwards compatibility, clear migration path • Well-defined error handling
- 24. Seven Principles • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors
- 25. Seven Principles • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use
- 26. Seven Principles • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use • Scripting is here to stay
- 27. Seven Principles • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use • Scripting is here to stay • Device-specific profiling should be avoided
- 28. Seven Principles • Backwards compatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use • Scripting is here to stay • Device-specific profiling should be avoided • Open process
- 29. In case of conflict, consider users over authors over implementors over specifiers over theoretical purity. HTML Design Principles (2007)
- 30. 2006 • XHTML 2 still a draft • W3C interested in HTML5 • Some things are clearer with hindsight of several years. It is necessary to evolve HTML incrementally. The attempt to get the world to switch to XML...didn't work.
- 31. 2007
- 32. 2007 • WHATWG sent HTML5 draft to W3C
- 33. 2007 • WHATWG sent HTML5 draft to W3C • Working group assigned
- 34. 2007 • WHATWG sent HTML5 draft to W3C • Working group assigned • 2012 - W3C Candidate Recommendation
- 35. 2007 • WHATWG sent HTML5 draft to W3C • Working group assigned • 2012 - W3C Candidate Recommendation • 2022 - W3C Recommendation
- 36. 2009 - XHTML 2 killed "The ones that win are the ones that ship." - Mark Pilgrim
- 37. HTML5
- 38. Most HTML5 features work today* * in progressive browsers
- 39. Most HTML5 features work today* * in everything but Internet Explorer
- 40. <!DOCTYPE html>
- 41. <html lang="en">
- 42. <head>
- 44. <link rel="..." • alternate • nofollow • archives • noreferrer • author • pingback • external • prefetch • prev, next, • search start • icon • sidebar • license • tag
- 45. <body>
- 46. Semantic Elements • <header> & <footer> • <section> • <nav>, <menu> & <command> • <article> & <aside> • <hgroup> (heading group)
- 47. Semantic Elements • <time> • <mark> • <meter> • <progress>
- 48. Not recognized in all browsers*
- 49. Not recognized in all browsers* * I'm looking at you, Internet Explorer
- 51. <input type="..." /> • text, password, checkbox, radio, file • search, url, tel, email • range • color • date, time, datetime, month, week
- 53. <input type="text" placeholder="enter your search terms" />
- 55. <canvas> • Drawing surface with Javascript API • 2D & 3D (WebGL) drawing contexts • Text • Points, lines, and paths • Pictures • Animation
- 59. <canvas id="game" width="300" height="200"> Your browser doesn't support canvas* </canvas>
- 60. <canvas id="game" width="300" height="200"> Your browser doesn't support canvas* </canvas> * guess
- 62. <script type="text/javascript"> var game = document.getElementById("game"); var context = game.getContext('2d'); context.fillRect(50, 25, 150, 100); </script>
- 63. <audio>
- 64. <audio autoplay="autoplay" controls="controls"> <source src="file.ogg" /> <source src="file.aac" /> <source src="file.mp3" /> </audio>
- 65. <video>
- 67. <video width="320" height="200"> <source src="file.mov" /> <source src="file.ogg" /> <source src="file.vp8" /> </video>
- 69. Manifest • <html manifest="my.manifest"> • Served as text/cache-manifest • AddType text/cache-manifest .manifest
- 70. Manifest Contents CACHE MANIFEST CACHE: /clock.css /clock.js /clock-face.jpg
- 71. Manifest Sections • CACHE: Files that should always be available offline • NETWORK: Files that must be accessed over the network and cannot be cached (server-side scripts) • FALLBACK: Substitute files when running offline
- 72. Javascript APIs • History (manipulate browser history) • Geolocation (GPS, cell towers, wifi) • Local storage (database in the browser) • Web sockets (communication w/servers) • Web workers (Javascript multithreading) • Drag & drop
- 73. This is only the beginning.
- 74. Dive Into HTML5 • Free guide to HTML5 history and features • No PDF/ePub version
- 75. HTML5 Up and Running • Expanded version of Dive Into HTML5 • Available in paperback or e- book • Save 35% with discount code DSUG
- 76. Dave Ross • Lead Developer at Straight North • Building web sites since 1996 • Cat shelter volunteer • Collects old computers • davidmichaelross.com • daveross.tel
- 77. slideshare.net/ csixty4 This presentation and my previous HTML5 & Canvas presentations
Editor's Notes
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n
- \n