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/W3C
Exploring the Future Potential of AI-Enabled Smartphone Processors
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
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
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
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