Download as PDF, PPTX
![Semantics and IE
New Semantics not supported in IE 7 & 8
Add support
<!--[if lt IE 9]>
<script type="text/javascript">
document.createElement("nav");
…
<![endif]>
Thursday, March 17, 2011](https://image.slidesharecdn.com/richmondjug-110318102158-phpapp02/85/HTML-XHTML-HTML5-24-320.jpg)
Uploaded bytimstone
HTML XHTML HTML5
The document discusses the evolution of HTML from its inception in 1996 through various versions leading up to HTML5, emphasizing modern web standards and practices. It highlights features, new APIs, and the importance of progressive enhancement using tools like Modernizr, alongside compatibility issues with older browsers. Additionally, it touches on multimedia support and recommended resources for further reading on web development.
![12comp[1]](https://cdn.slidesharecdn.com/ss_thumbnails/12comp1-110606103453-phpapp01-thumbnail.jpg?width=640&height=640&fit=bounds)
HTML XHTML HTML5
- 1. HTML4 XHTML HTML5 The Evolution, Promise and Reality of HTML5 Thursday, March 17, 2011
- 2. About Me Senior Web Application Developer Technical Lead Barclaycard US, Wilmington, DE A SCJP Front End Engineer and UX/UI Advocate Open Source Committer to Stripes and blojsom Registered first domain in 1996 GnuPG/PGP Fingerprint 0248 FAD3 D6BE 008C 27C8 7A72 7249 DE33 22A5 2C82 Still plays D&D (not exactly) Contact: tstone@petmystone.com Thursday, March 17, 2011
- 3. 2000 1996 2004 2008 EVOLUTION PROJECT 1996..2008 DATE CLIENT MARCH 16, 2011 RICHMOND JUG Thursday, March 17, 2011
- 4. 12 Years Ago... HTML 2/3.2 Tables! JavaScript! Oh, My! First Browser Support 12/1994 W3C Recommendation 1/1997 Thursday, March 17, 2011
- 5.
- 6. HTML 4/4.01 Quirks vs Standards Mode First Browser Support 10/1996 W3C Recommendation 12/1999 Thursday, March 17, 2011
- 7. XHTML 1.0/1.1 First Browser Support c. 1999 W3C Recommendation 1/2000 & 5/2001 "To Hell With Bad Browsers" - Zeldman, 2/2001 "Draconian" "Valid XHTML is really just Invalid HTML 4.01" Thursday, March 17, 2011
- 8. XHTML 2.0 Nevermind Incompatible with XHTML 1.x XHTML2WG announces support of HTML5 5/2007 Thursday, March 17, 2011
- 9. HTML5/XHTML5 Buzzword Ready. Cool Logo. Thursday, March 17, 2011
- 10. Is HTML5 ReadyYet? Thursday, March 17, 2011
- 11.
- 12. http://www.flickr.com/photos/andyi/ PROMISE PROJECT INTEROPERABILITY DATE CLIENT MARCH 16, 2011 RICHMOND JUG Thursday, March 17, 2011
- 13. Promise WHATWG Web Hypertext Application Technology Working Group A Living Document of Standards "HTML is the New HTML5" - Ian Hickson, 1/19/11 HTML5 will be a SNAPSHOT But… But... HTML is not JSON Thursday, March 17, 2011
- 14. Where We Are A Theme Rises "Implementation Trumps Specification" Molly Holzschlag, Opera @ Philly ETE 2010 CSS 2.1? Thursday, March 17, 2011
- 15. Where We AreGoing A bellwether Omniture Summit 2010 "This is application development now people." Molly Holzschlag, Opera Thursday, March 17, 2011
- 16. APIs 22 APIs Native getElementsByClassName Highlights Web Workers* applicationCache Web Sockets* sessionStorage Geolocation API localStorage Native DnD (ha!) Thursday, March 17, 2011
- 17. Deprecation Many HTML 3/4 Elements Gone valign frameset, frames, link, vlink, alink, noframes text on body basefont, big, center, bgcolor font, s, strike, tt, u height and width Replaced Elements scrolling on iframe abbr ! acronym, object ! applet, hspace, vspace ul ! dir cellpadding, Bye Bye Attributes cellspacing, border on table align Thursday, March 17, 2011
- 18. CODE Awww... Yeah! Thursday, March 17, 2011
- 19. Modernizr www.modernizr.com, v1.7 A lightweight JavaScript Library for implementing Progressive Enhancement Simple to Use Thursday, March 17, 2011
- 20. Modernizr <!doctype html> <html class="no-js"> … <script type="text/javascript" src="/path/to/modernizr-1.7.min.js"></script> … </html> Thursday, March 17, 2011
- 21. Modernizr <!doctype html> <html class="no-js"> … <script type="text/javascript" src="/path/to/modernizr-1.7.min.js"></script> … </html> Thursday, March 17, 2011
- 22. Using Modernizr Leverage What You Know JavaScript (function() { if(Modernizr.borderradius) { // enhance } else { // gracefully degrade } })(); CSS .borderradius div aside { // enhance } .no-borderradius div aside { // gracefully degrade } Thursday, March 17, 2011
- 23. New Semantic Elements header, footer, nav, section, article, aside, meter, progress Arising from popularity of weblogs (Wordpress?) Thursday, March 17, 2011
- 24. Semantics and IE New Semantics not supported in IE 7 & 8 Add support <!--[if lt IE 9]> <script type="text/javascript"> document.createElement("nav"); … <![endif]> Thursday, March 17, 2011
- 25. Web Sockets Think "Stateful Connection to Remote Server" No polling Implementation and Security Concerns Separate Specification www.w3.org/TR/websockets/ Thursday, March 17, 2011
- 26. Storage APIs localStorage persistent after browser session! personal data? (function() { if(Modernizr.localStorage || window.localStorage) { window.localStorage.setItem(name, value); window.localStorage.getItem(name); } else { // gracefully degrade } })(); sessionStorage Similar API to localStorage not persistent across session (browser close) Thursday, March 17, 2011
- 27. Web Workers Think "multithreaded scripting engine" Separate specification in WHATWG/W3C Uses a messaging event API postMessage onMessage Thursday, March 17, 2011
- 28. Video and Audio Where promise, interop, and commerce collide Many participants, Many browsers, little agreement Who To Watch? Thursday, March 17, 2011
- 29. Video and Audio Codecs Video Codecs and Support H.264 (IE9, Safari, Chrome, iOS) Theora (FF, Chrome, Opera) VP8 (IE9, with codec; FF4, Chrome, Opera) Audio Codecs and Support AAC (Safari, Chrome, iOS) MP3 (IE9, Safari, Chrome, iOS) Vorbis/Ogg (FF, Chrome, Opera) Thursday, March 17, 2011
- 30. Video and AudioCode Video (with Flash Support fallback!) <video controls> <source src="/path/to/file.mp4"> <source src="/path/to/file.ogv"> <source src="/path/to/file.webm"> <object ...> <!-- Flash Player --> </object> <p>No support</p> </video> Audio Codecs and Support /* in css, using Modernizr */ .audio .dl-mp3 { display: none; } .no-audio .dl-mp3 { display:block; } ... <audio controls> <source src="/path/to/file.ogg"> <source src="/path/to/file.mp3"> </audio> <p class="dl-mp3"><a href="/path/to/file.mp3">Download</a></p> Thursday, March 17, 2011
- 31. @fontface Font Support, Finally Distribution Concerns Sample @fontface { font-family: "myawesomemetalfont"; src: url(/fonts/font.eot); src: url(/fonts/font.woff) format ('woff'), url(/fonts/font.ttf) format ('ttf'); font-weight: normal; } Thursday, March 17, 2011
- 32. So Much More... Recommended Reading Thursday, March 17, 2011
- 33. HTML5 and CSS3 Pragmatic Bookshelf, Brian Hogan, 2010 Unobtrusive Ajax O'Reilly Shortcuts, Jesse Skinner, 2007 JavaScript: The Good Parts O'Reilly, Douglas Crockford, 2010 JavaScript Patterns O'Reilly, Stoyan Stefanov, 2010 Dive into HTML5 diveintohtml5.org, Mark Pilgrim WHATWG Blog blog.whatwg.org Surfin' Safari, the WebKit Blog webkit.org/blog A List Apart alistapart.com Thursday, March 17, 2011
- 34.