HTML XHTML HTML5

HTML4 XHTML HTML5 The Evolution, Promise and Reality of HTML5Thursday, March 17, 2011

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 ﬁrst 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.comThursday, March 17, 2011

2000 1996 2004 2008 EVOLUTION PROJECT 1996..2008 DATE CLIENT MARCH 16, 2011 RICHMOND JUGThursday, March 17, 2011

12 Years Ago... HTML 2/3.2 Tables! JavaScript! Oh, My! First Browser Support 12/1994 W3C Recommendation 1/1997Thursday, March 17, 2011

Thursday, March 17, 2011

HTML 4/4.01 Quirks vs Standards Mode First Browser Support 10/1996 W3C Recommendation 12/1999Thursday, March 17, 2011

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

XHTML 2.0 Nevermind Incompatible with XHTML 1.x XHTML2WG announces support of HTML5 5/2007Thursday, March 17, 2011

HTML5/XHTML5 Buzzword Ready. Cool Logo.Thursday, March 17, 2011

Is HTML5 Ready Yet?Thursday, March 17, 2011

Thursday, March 17, 2011

http://www.flickr.com/photos/andyi/ PROMISE PROJECT INTEROPERABILITY DATE CLIENT MARCH 16, 2011 RICHMOND JUGThursday, March 17, 2011

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 JSONThursday, March 17, 2011

Where We Are A Theme Rises "Implementation Trumps Speciﬁcation" Molly Holzschlag, Opera @ Philly ETE 2010 CSS 2.1?Thursday, March 17, 2011

Where We Are Going A bellwether Omniture Summit 2010 "This is application development now people." Molly Holzschlag, OperaThursday, March 17, 2011

APIs 22 APIs Native getElementsByClassName Highlights Web Workers* applicationCache Web Sockets* sessionStorage Geolocation API localStorage Native DnD (ha!)Thursday, March 17, 2011

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 alignThursday, March 17, 2011

CODE Awww... Yeah!Thursday, March 17, 2011

Modernizr www.modernizr.com, v1.7 A lightweight JavaScript Library for implementing Progressive Enhancement Simple to UseThursday, March 17, 2011

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

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

New Semantic Elements header, footer, nav, section, article, aside, meter, progress Arising from popularity of weblogs (Wordpress?)Thursday, March 17, 2011

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

Web Sockets Think "Stateful Connection to Remote Server" No polling Implementation and Security Concerns Separate Speciﬁcation www.w3.org/TR/websockets/Thursday, March 17, 2011

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

Web Workers Think "multithreaded scripting engine" Separate speciﬁcation in WHATWG/W3C Uses a messaging event API postMessage onMessageThursday, March 17, 2011

Video and Audio Where promise, interop, and commerce collide Many participants, Many browsers, little agreement Who To Watch?Thursday, March 17, 2011

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

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 ...>  </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

@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

So Much More... Recommended ReadingThursday, March 17, 2011

HTML5 and CSS3 Pragmatic Bookshelf, Brian Hogan, 2010 Unobtrusive Ajax OReilly Shortcuts, Jesse Skinner, 2007 JavaScript: The Good Parts OReilly, Douglas Crockford, 2010 JavaScript Patterns OReilly, Stoyan Stefanov, 2010 Dive into HTML5 diveintohtml5.org, Mark Pilgrim WHATWG Blog blog.whatwg.org Surﬁn Safari, the WebKit Blog webkit.org/blog A List Apart alistapart.comThursday, March 17, 2011

Questions..AnswersThursday, March 17, 2011

HTML XHTML HTML5

by timstone

Accessibility

Categories

Upload Details

Usage Rights

Statistics

HTML XHTML HTML5 Presentation Transcript