HTML4 XHTML HTML5                  The Evolution, Promise and Reality of HTML5Thursday, March 17, 2011
About Me                   Senior Web Application Developer Technical Lead Barclaycard                   US, Wilmington, D...
2000                                   1996               2004        2008                  EVOLUTION    PROJECT          ...
12 Years Ago...                   HTML 2/3.2                   Tables! JavaScript! Oh, My!                   First Browser...
Thursday, March 17, 2011
HTML 4/4.01                   Quirks vs Standards Mode                   First Browser Support 10/1996                   W...
XHTML 1.0/1.1                   First Browser Support c. 1999                   W3C Recommendation 1/2000 & 5/2001        ...
XHTML 2.0                   Nevermind                   Incompatible with XHTML 1.x                   XHTML2WG announces s...
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         ...
Promise                   WHATWG                   Web Hypertext Application Technology Working Group                   A ...
Where We Are                   A Theme Rises                   "Implementation Trumps Specification"                    Mol...
Where We Are Going                   A bellwether                   Omniture Summit 2010                   "This is applic...
APIs                   22 APIs                    Native                                              getElementsByClassNa...
Deprecation                   Many HTML 3/4 Elements Gone      valign                           frameset, frames,        l...
CODE                  Awww... Yeah!Thursday, March 17, 2011
Modernizr                   www.modernizr.com, v1.7                   A lightweight JavaScript Library for implementing   ...
Modernizr                  <!doctype html>                  <html class="no-js">                  …                      <...
Modernizr                  <!doctype html>                  <html class="no-js">                  …                      <...
Using Modernizr                   Leverage What You Know                   JavaScript                   (function() {     ...
New Semantic                  Elements                   header, footer, nav, section, article, aside, meter,             ...
Semantics and IE                           New Semantics not supported in IE 7 & 8                           Add support  ...
Web Sockets                   Think "Stateful Connection to Remote Server"                   No polling                   ...
Storage APIs                   localStorage                           persistent after browser session!                   ...
Web Workers                   Think "multithreaded scripting engine"                   Separate specification in WHATWG/W3C...
Video and Audio                   Where promise, interop, and commerce collide                   Many participants, Many b...
Video and Audio                  Codecs                   Video Codecs and Support                   H.264 (IE9, Safari, C...
Video and Audio Code                   Video (with Flash Support fallback!)                   <video controls>            ...
@fontface                   Font Support, Finally                   Distribution Concerns                   Sample        ...
So Much More...                  Recommended ReadingThursday, March 17, 2011
HTML5 and CSS3                   Pragmatic Bookshelf, Brian Hogan, 2010                   Unobtrusive Ajax                ...
Questions..AnswersThursday, March 17, 2011
Upcoming SlideShare
Loading in …5
×

Tim stone.html5.rjug.20110316

851 views

Published on

Tim Stone gave this presentation to the Richmond Java User's Group 2011-03-16.
Tim is a Java developer but also well versed in UX.

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
851
On SlideShare
0
From Embeds
0
Number of Embeds
2
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Tim stone.html5.rjug.20110316

  1. 1. HTML4 XHTML HTML5 The Evolution, Promise and Reality of HTML5Thursday, March 17, 2011
  2. 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.comThursday, March 17, 2011
  3. 3. 2000 1996 2004 2008 EVOLUTION PROJECT 1996..2008 DATE CLIENT MARCH 16, 2011 RICHMOND JUGThursday, March 17, 2011
  4. 4. 12 Years Ago... HTML 2/3.2 Tables! JavaScript! Oh, My! First Browser Support 12/1994 W3C Recommendation 1/1997Thursday, March 17, 2011
  5. 5. Thursday, March 17, 2011
  6. 6. HTML 4/4.01 Quirks vs Standards Mode First Browser Support 10/1996 W3C Recommendation 12/1999Thursday, March 17, 2011
  7. 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. 8. XHTML 2.0 Nevermind Incompatible with XHTML 1.x XHTML2WG announces support of HTML5 5/2007Thursday, March 17, 2011
  9. 9. HTML5/XHTML5 Buzzword Ready. Cool Logo.Thursday, March 17, 2011
  10. 10. Is HTML5 Ready Yet?Thursday, March 17, 2011
  11. 11. Thursday, March 17, 2011
  12. 12. http://www.flickr.com/photos/andyi/ PROMISE PROJECT INTEROPERABILITY DATE CLIENT MARCH 16, 2011 RICHMOND JUGThursday, March 17, 2011
  13. 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 JSONThursday, March 17, 2011
  14. 14. Where We Are A Theme Rises "Implementation Trumps Specification" Molly Holzschlag, Opera @ Philly ETE 2010 CSS 2.1?Thursday, March 17, 2011
  15. 15. Where We Are Going A bellwether Omniture Summit 2010 "This is application development now people." Molly Holzschlag, OperaThursday, March 17, 2011
  16. 16. APIs 22 APIs Native getElementsByClassName Highlights Web Workers* applicationCache Web Sockets* sessionStorage Geolocation API localStorage Native DnD (ha!)Thursday, March 17, 2011
  17. 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 alignThursday, March 17, 2011
  18. 18. CODE Awww... Yeah!Thursday, March 17, 2011
  19. 19. Modernizr www.modernizr.com, v1.7 A lightweight JavaScript Library for implementing Progressive Enhancement Simple to UseThursday, March 17, 2011
  20. 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. 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. 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. 23. New Semantic Elements header, footer, nav, section, article, aside, meter, progress Arising from popularity of weblogs (Wordpress?)Thursday, March 17, 2011
  24. 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. 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. 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. 27. Web Workers Think "multithreaded scripting engine" Separate specification in WHATWG/W3C Uses a messaging event API postMessage onMessageThursday, March 17, 2011
  28. 28. Video and Audio Where promise, interop, and commerce collide Many participants, Many browsers, little agreement Who To Watch?Thursday, March 17, 2011
  29. 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. 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. 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. 32. So Much More... Recommended ReadingThursday, March 17, 2011
  33. 33. 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 Surfin Safari, the WebKit Blog webkit.org/blog A List Apart alistapart.comThursday, March 17, 2011
  34. 34. Questions..AnswersThursday, March 17, 2011

×