html xhtml html5
DESCRIPTION
A presentation I delivered to the Richmond JUG on the evolution of HTML through XHTML to HTML5 and some of the technologies that support implementation now, before a specification is reached by the WHATWG/W3CTRANSCRIPT
HTML4 XHTML HTML5The Evolution, Promise and Reality of HTML5
Thursday, March 17, 2011
About MeSenior 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 Fingerprint0248 FAD3 D6BE 008C 27C8 7A72 7249 DE33 22A5 2C82
Still plays D&D (not exactly)
Contact: [email protected]
Thursday, March 17, 2011
PROJECT
DATE CLIENTMARCH 16, 2011 RICHMOND JUG
EVOLUTION1996..2008
1996
2000
2004 2008
Thursday, March 17, 2011
12 Years Ago...
HTML 2/3.2Tables! JavaScript! Oh, My!
First Browser Support 12/1994
W3C Recommendation 1/1997
Thursday, March 17, 2011
Thursday, March 17, 2011
HTML 4/4.01Quirks vs Standards Mode
First Browser Support 10/1996
W3C Recommendation 12/1999
Thursday, 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.0Nevermind
Incompatible with XHTML 1.x
XHTML2WG announces support of HTML5 5/2007
Thursday, 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
PROJECT
DATE CLIENTMARCH 16, 2011 RICHMOND JUG
PROMISEINTEROPERABILITY
http://www.flickr.com/photos/andyi/
Thursday, March 17, 2011
Promise
WHATWGWeb 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
Where We Are
A Theme Rises"Implementation Trumps Specification"Molly Holzschlag, Opera @ Philly ETE 2010
CSS 2.1?
Thursday, March 17, 2011
Where We Are Going
A bellwetherOmniture Summit 2010
"This is application development now people."Molly Holzschlag, Opera
Thursday, March 17, 2011
APIs22 APIs
Highlights
applicationCache
sessionStorage
localStorage
Native DnD (ha!)
Native getElementsByClassName
Web Workers*
Web Sockets*
Geolocation API
Thursday, March 17, 2011
DeprecationMany HTML 3/4 Elements Gone
frameset, frames, noframes
basefont, big, center, font, s, strike, tt, u
Replaced Elements
abbr ! acronym,object ! applet,ul ! dir
Bye Bye Attributes
align
valign
link, vlink, alink, text on body
bgcolor
height and width
scrolling on iframe
hspace, vspace
cellpadding, cellspacing, border on table
Thursday, March 17, 2011
CODEAwww... Yeah!
Thursday, March 17, 2011
Modernizr
www.modernizr.com, v1.7
A lightweight JavaScript Library for implementingProgressive Enhancement
Simple to Use
Thursday, 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
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 ModernizrLeverage 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 Specificationwww.w3.org/TR/websockets/
Thursday, March 17, 2011
Storage APIslocalStorage
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 specification in WHATWG/W3C
Uses a messaging event API
postMessage
onMessage
Thursday, 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 CodecsVideo 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 CodeVideo (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
@fontfaceFont 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 Reading
Thursday, March 17, 2011
HTML5 and CSS3Pragmatic Bookshelf, Brian Hogan, 2010
Unobtrusive AjaxO'Reilly Shortcuts, Jesse Skinner, 2007
JavaScript: The Good PartsO'Reilly, Douglas Crockford, 2010
JavaScript PatternsO'Reilly, Stoyan Stefanov, 2010
Dive into HTML5diveintohtml5.org, Mark Pilgrim
WHATWG Blogblog.whatwg.org
Surfin' Safari, the WebKit Blogwebkit.org/blog
A List Apartalistapart.com
Thursday, March 17, 2011
Questions..Answers
Thursday, March 17, 2011