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

HTML XHTML HTML5

on

  • 3,849 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,849
Views on SlideShare
3,848
Embed Views
1

Actions

Likes
1
Downloads
53
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 HTML XHTML HTML5 Presentation Transcript

  • 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 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
  • 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 Specification" 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
  • 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 Specification 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 specification 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 ...> <!-- 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
  • @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 Surfin Safari, the WebKit Blog webkit.org/blog A List Apart alistapart.comThursday, March 17, 2011
  • Questions..AnswersThursday, March 17, 2011