![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/timstone-html5-rjug-20110316-110317162630-phpapp01/85/Tim-stone-html5-rjug-20110316-24-320.jpg)
Tim stone.html5.rjug.20110316
- 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. Thursday, March 17, 2011
- 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 Ready Yet? Thursday, March 17, 2011
- 11. Thursday, March 17, 2011
- 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 Are Going 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 Audio Code 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