Tim stone.html5.rjug.20110316

HTML4 XHTML HTML5
The Evolution, Promise and Reality of HTML5

Thursday, 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 ﬁrst 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


2000

1996 2004 2008

EVOLUTION
PROJECT

1996..2008
DATE CLIENT
MARCH 16, 2011 RICHMOND JUG

12 Years Ago...

HTML 2/3.2
Tables! JavaScript! Oh, My!

First Browser Support 12/1994

W3C Recommendation 1/1997


HTML 4/4.01
Quirks vs Standards Mode

First Browser Support 10/1996

W3C Recommendation 12/1999


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"


XHTML 2.0
Nevermind

Incompatible with XHTML 1.x

XHTML2WG announces support of HTML5 5/2007


HTML5/XHTML5
Buzzword Ready.
Cool Logo.


Is HTML5 Ready Yet?


http://www.flickr.com/photos/andyi/

PROMISE
PROJECT

INTEROPERABILITY
DATE CLIENT
MARCH 16, 2011 RICHMOND JUG

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


Where We Are

A Theme Rises
"Implementation Trumps Speciﬁcation"
Molly Holzschlag, Opera @ Philly ETE 2010

CSS 2.1?


Where We Are Going

A bellwether
Omniture Summit 2010

"This is application development now people."
Molly Holzschlag, Opera


APIs
22 APIs Native
getElementsByClassName
Highlights
Web Workers*
applicationCache
Web Sockets*
sessionStorage
Geolocation API
localStorage

Native DnD (ha!)


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


CODE
Awww... Yeah!


Modernizr

www.modernizr.com, v1.7

A lightweight JavaScript Library for implementing
Progressive Enhancement

Simple to Use


Modernizr

<!doctype html>
<html class="no-js">
…
<script type="text/javascript"
src="/path/to/modernizr-1.7.min.js"></script>
…
</html>


Using Modernizr
Leverage What You Know

JavaScript
(function() {
if(Modernizr.borderradius) {
// enhance
} else {
// gracefully degrade
}
})();

CSS
.borderradius div aside {
// enhance
}
.no-borderradius div aside {
}


New Semantic
Elements

header, footer, nav, section, article, aside, meter,
progress

Arising from popularity of weblogs (Wordpress?)


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

Web Sockets

Think "Stateful Connection to Remote Server"

No polling

Implementation and Security Concerns

Separate Speciﬁcation
www.w3.org/TR/websockets/


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 {
}
})();

sessionStorage

Similar API to localStorage

not persistent across session (browser close)


Web Workers
Think "multithreaded scripting engine"

Separate speciﬁcation in WHATWG/W3C

Uses a messaging event API

postMessage

onMessage


Video and Audio

Where promise, interop, and commerce collide

Many participants, Many browsers, little
agreement

Who To Watch?


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)


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

@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;
}


So Much More...
Recommended Reading


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

Surﬁn' Safari, the WebKit Blog
webkit.org/blog

A List Apart
alistapart.com


Questions..Answers


Tim stone.html5.rjug.20110316

Recommended

Recommended

More Related Content

Similar to Tim stone.html5.rjug.20110316

Similar to Tim stone.html5.rjug.20110316 (20)

Recently uploaded

Recently uploaded (20)

Tim stone.html5.rjug.20110316