Download as KEY, PPTX
Uploaded byDave Ross
HTML5 History & Features
The document outlines the historical development of HTML from its initial tags in 1991 to the formalization of HTML5 by W3C in 2022. It details the principles and features introduced in various HTML versions, emphasizing the importance of backward compatibility and practical use in web applications. Additionally, it highlights the functionalities of HTML5, including semantic elements, multimedia support, and APIs for offline applications and web development.
HTML5 History & Features
- 1. HTML5 Dave Ross Fox Valley Computing Professionals December 14, 2010
- 2.
- 3.
- 4.
- 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.
- 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.
- 16. Should the W3Cdevelop 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 W3Cdevelop 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 ApplicationTechnology Working Group
- 19. • Mozilla Foundation •Apple • Google • Opera
- 20. • Mozilla Foundation •Apple • Google • Opera Microsoft cited lack of a patent
- 21.
- 22. Seven Principles • Backwardscompatibility, clear migration path
- 23. Seven Principles • Backwardscompatibility, clear migration path • Well-defined error handling
- 24. Seven Principles • Backwardscompatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors
- 25. Seven Principles • Backwardscompatibility, clear migration path • Well-defined error handling • Users should not be exposed to authoring errors • Practical use
- 26. Seven Principles • Backwardscompatibility, 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 • Backwardscompatibility, 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 • Backwardscompatibility, 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 ofconflict, consider users over authors over implementors over specifiers over theoretical purity. HTML Design Principles (2007)
- 30. 2006 • XHTML 2still 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.
- 32. 2007 • WHATWG sentHTML5 draft to W3C
- 33. 2007 • WHATWG sentHTML5 draft to W3C • Working group assigned
- 34. 2007 • WHATWG sentHTML5 draft to W3C • Working group assigned • 2012 - W3C Candidate Recommendation
- 35. 2007 • WHATWG sentHTML5 draft to W3C • Working group assigned • 2012 - W3C Candidate Recommendation • 2022 - W3C Recommendation
- 36. 2009 - XHTML2 killed "The ones that win are the ones that ship." - Mark Pilgrim
- 37.
- 38. Most HTML5 features worktoday* * in progressive browsers
- 39. Most HTML5 features worktoday* * in everything but Internet Explorer
- 40.
- 41.
- 42.
- 43.
- 44. <link rel="..." • alternate • nofollow • archives • noreferrer • author • pingback • external • prefetch • prev, next, • search start • icon • sidebar • license • tag
- 45.
- 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
- 50.
- 51. <input type="..." /> •text, password, checkbox, radio, file • search, url, tel, email • range • color • date, time, datetime, month, week
- 52.
- 53. <input type="text" placeholder="enter yoursearch terms" />
- 54.
- 55. <canvas> • Drawing surfacewith Javascript API • 2D & 3D (WebGL) drawing contexts • Text • Points, lines, and paths • Pictures • Animation
- 59. <canvas id="game" width="300" height="200"> Yourbrowser doesn't support canvas* </canvas>
- 60. <canvas id="game" width="300" height="200"> Yourbrowser doesn't support canvas* </canvas> * guess
- 61.
- 62. <script type="text/javascript"> var game= document.getElementById("game"); var context = game.getContext('2d'); context.fillRect(50, 25, 150, 100); </script>
- 63.
- 64. <audio autoplay="autoplay" controls="controls"> <sourcesrc="file.ogg" /> <source src="file.aac" /> <source src="file.mp3" /> </audio>
- 65.
- 66.
- 67. <video width="320" height="200"> <sourcesrc="file.mov" /> <source src="file.ogg" /> <source src="file.vp8" /> </video>
- 68.
- 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 onlythe 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 • LeadDeveloper 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
- #2 \n
- #3 \n
- #4 \n
- #5 \n
- #6 \n
- #7 \n
- #8 \n
- #9 \n
- #10 \n
- #11 \n
- #12 \n
- #13 \n
- #14 \n
- #15 \n
- #16 \n
- #17 \n
- #18 \n
- #19 \n
- #20 \n
- #21 \n
- #22 \n
- #23 \n
- #24 \n
- #25 \n
- #26 \n
- #27 \n
- #28 \n
- #29 \n
- #30 \n
- #31 \n
- #32 \n
- #33 \n
- #34 \n
- #35 \n
- #36 \n
- #37 \n
- #38 \n
- #39 \n
- #40 \n
- #41 \n
- #42 \n
- #43 \n
- #44 \n
- #45 \n
- #46 \n
- #47 \n
- #48 \n
- #49 \n
- #50 \n
- #51 \n
- #52 \n
- #53 \n
- #54 \n
- #55 \n
- #56 \n
- #57 \n
- #58 \n
- #59 \n
- #60 \n
- #61 \n
- #62 \n
- #63 \n
- #64 \n
- #65 \n
- #66 \n
- #67 \n
- #68 \n
- #69 \n
- #70 \n
- #71 \n