HTML XHTML HTML5
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML XHTML HTML5

on

  • 3,974 views

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

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

Statistics

Views

Total Views
3,974
Views on SlideShare
3,973
Embed Views
1

Actions

Likes
1
Downloads
54
Comments
0

1 Embed 1

http://www.docshut.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

HTML XHTML HTML5 Presentation Transcript

  • 1. HTML4 XHTML HTML5 The Evolution, Promise and Reality of HTML5Thursday, 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.comThursday, March 17, 2011
  • 3. 2000 1996 2004 2008 EVOLUTION PROJECT 1996..2008 DATE CLIENT MARCH 16, 2011 RICHMOND JUGThursday, March 17, 2011
  • 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. Thursday, March 17, 2011
  • 6. HTML 4/4.01 Quirks vs Standards Mode First Browser Support 10/1996 W3C Recommendation 12/1999Thursday, 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/2007Thursday, 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 JUGThursday, 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 JSONThursday, 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, OperaThursday, 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 alignThursday, 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 UseThursday, 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 onMessageThursday, 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 ReadingThursday, March 17, 2011
  • 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. Questions..AnswersThursday, March 17, 2011