HTML5: About Damn Time

HTML5: About Damn Time Kevin Lawver | kevin@lawver.net | @kplawver Tuesday, April 20, 2010

A Short History Lesson • HTML 2.0 - 11/1995 • HTML 3.2 - 01/1997 • HTML 4.01 - 12/1999 • XHTML 1.0 - 01/2000 • XHTML 1.1 - 05/2001 (no one uses this) • XHTML 2? - Dead as of 12/2009 Tuesday, April 20, 2010

HTML5: Guerilla • The What Working Group (http:// whatwg.org) was started by Ian Hickson (then at Opera, now at Google). • Started as a response to what was wrong with XHTML 2 and to move HTML forward. • HTML5 specs brought into W3C in 03/2007. Tuesday, April 20, 2010

So, What’s New? • Document sematics • Form controls • Canvas • Audio and Video as ﬁrst-class citizens • Ofﬂine storage • Embedded meta data inside elements Tuesday, April 20, 2010

And What’s Gone? • Presentational elements like font, big, center, etc • Presentational attributes like bgcolor, border, etc • Frames, frameset and noframes • acronym (abbr serves both purposes now) Tuesday, April 20, 2010

A Basic Document http://dev.lawver.net/html5/blank.html Tuesday, April 20, 2010

<!DOCTYPE html> <html> <head> <title>My Awesome HTML5 Document</title> <meta charset="utf-8"/>  </head> <body> </body> </html> Tuesday, April 20, 2010

Things to See • The HTML comment at the top must be there or things will look silly in any current version of Internet Explorer • The DOCTYPE is tiny. Since it’s no longer an “X”, there’s no DTD. • Other than that, not much is different here, right? Tuesday, April 20, 2010

Document Semantics • No more divs! (OK, OK, fewer divs) • Real semantics: header, footer, section, article & aside Tuesday, April 20, 2010

Let’s Make a Blog • I used Tumblr, because their templating language won’t get in the way. • It’s live now: http://tedxcreativecoast.com (convenient victim) Tuesday, April 20, 2010

Let’s look at the masthead... Tuesday, April 20, 2010

<header> <h1><a href="/">TEDx Creative Coast</a></h1> </header> <nav class="pages"> <ul> <li><a href="/">Home</a></li> <li><a href="/event-details">Event Details</a></li> <li><a href="/speakers">Speakers</a></li> <li><a href="/sponsors">Sponsors</a></li> <li><a href="/about">About TEDx</a></li> <li><a href="/about_tedxcreativecoast">Volunteers and Crew</ a></li> </ul> </nav> Tuesday, April 20, 2010

Did you notice... • The header element? • That I still used an h1? • That nav is a new element speciﬁcally for navigation? Tuesday, April 20, 2010

A Blog Post... http://dev.lawver.net/html5/tedx.html Tuesday, April 20, 2010

<article class="hentry text"> <h3><a href="http://tedxcreativecoast.com/post/ 482465925/musicians-welcome">Musicians Welcome</ a></h3> <div class="entry-content"> ... </div> <details> <a href="http://tedxcreativecoast.com/post/ 482465925/musicians-welcome">Permalink</a> | posted 1 day ago </details> </article> Tuesday, April 20, 2010

What did you see? Tuesday, April 20, 2010

Here’s what I saw... • The article element surrounding the post. • The new details element for displaying meta data about the post. • I didn’t use another header element around the h3, but I could have. • Did anyone notice the microformat I snuck in there? Tuesday, April 20, 2010

And the footer... Tuesday, April 20, 2010

<footer> <nav class="pagination"> <ul> <li><details>You are on page 1 of 1.</details></li> <ul> </nav> <nav> <ul> <li><a href="#">Top</a></li> <li><a href="/">Home</a></li> <li><a href="/about" title="TEDxCreativeCoast About TED and TEDx">About</a></li> <li><a href="/mobile">Mobile</a></li> <li><a href="/event-details" title="TEDxCreativeCoast Event Details">Event</a></li> <li><a href="/speakers" title="TEDxCreativeCoast Presenters">Speakers</a></li> <li><a href="/sponsors" title="TEDxCreativeCoast Sponsors">Sponsors</a></li> <ul> <p>This independent TEDx event is operated under license from <a href="http://ted.com" target="_blank" title="This independent TEDx event is operated under license from TED">TED</a>.</p> </nav> <details class="theme"></details> </footer> Tuesday, April 20, 2010

And? • The shapely footer element, containing... • multiple nav elements • and a document-wide details element for document cruft. Tuesday, April 20, 2010

Canvas http://dev.lawver.net/html5/canvas.html Tuesday, April 20, 2010

Drawing the Web Way • Creates a drawing “area” inside of a document. • Has a javascript API for adding shapes, and allowing for interactivity • Feature-rich and complex drawing API. Tuesday, April 20, 2010

Abstract it all away! • I use RaphaelJS, which uses Canvas on good browsers and VML in Internet Explorer. • It abstracts away a lot of the complexity and provides a simple but powerful API. • http://raphaeljs.com Tuesday, April 20, 2010

Demos! Tuesday, April 20, 2010

Form Elements Tuesday, April 20, 2010

More Data-Speciﬁc Inputs! • We can ﬁnally do sliders in the markup • Colors, URLs, e-mail addresses, names, search queries, telephone numbers, and times and dates all have their own input types now! Tuesday, April 20, 2010

Demo http://dev.lawver.net/html5/forms.html Tuesday, April 20, 2010

Ofﬂine Storage Tuesday, April 20, 2010

Make Your App Ofﬂineable! • You can create a manifest which gives a list of URLs for your app that declares ﬁles to cache, which ones are only available on the network, and fallbacks for failed requests. • Poor cross-browser implementation so far. • A lot like the old Google Gears API. Tuesday, April 20, 2010

No Demo Because it doesn’t work well enough across multiple browsers to waste time with... yet. Tuesday, April 20, 2010

Audio & Video Tuesday, April 20, 2010

No more plugins! Tuesday, April 20, 2010

Media is a ﬁrst-class markup citizen now! Tuesday, April 20, 2010

Demo http://dev.lawver.net/html5/video.html Tuesday, April 20, 2010

The Markup <video src="movie.m4v" id="my-video"></video> <p> <a href="javascript:play_it()">play</a> | <a href="javascript:pause_it()">pause</a> </p> Tuesday, April 20, 2010

The Javascript function play_it() { var video = document.getElementById("my-video"); video.play(); } function pause_it() { var video = document.getElementById("my-video"); video.pause(); } Tuesday, April 20, 2010

Problems with video... • There’s a big argument about supported formats. Safari supports h.264, and Firefox only supports Ogg Theora. • There are rumors that Google will open sources their video codec, making this stuff moot. • IE doesn’t support the video element at all. • Works great on the iPad and iPhone though! Tuesday, April 20, 2010

Microdata Tuesday, April 20, 2010

Microdata is a way to embed meta data inside of elements. Tuesday, April 20, 2010

Why? Tuesday, April 20, 2010

Turn your HTML documents into your API! Tuesday, April 20, 2010

Yeah, but we have microformats! Tuesday, April 20, 2010

But, they’re non-trivial to parse and mis-use some HTML attributes. Tuesday, April 20, 2010

Ok, ﬁne. http://dev.lawver.net/html5/microdata.html Tuesday, April 20, 2010

An Address Card <ul itemscope itemtype="http://microformats.org/wiki/hcard" class="vcard" itemid="http://lawver.net"> <li itemprop="fn">Kevin Lawver</li> <li><a href="http://lawver.net" itemprop="url" rel="bookmark" class="url">Blog</a></li> <li itemprop="org">Music Intelligence Solutions</li> <li itemprop="title">Chief Architect</li> </ul> Tuesday, April 20, 2010

The Big Practical Finish Tuesday, April 20, 2010

What Can I Use Right Now? • Document semantics (with the HTML5 shiv script for IE), but not if you use javascript to add elements to the DOM! • Canvas with RaphaelJS • Ofﬂine API in Firefox and Safari Tuesday, April 20, 2010

What Doesn’t Work? • Most of the new form elements, unfortunately. • Most of the new DOM API’s • See http://a.deveria.com/caniuse/ for an up to date list of what works and what doesn’t! Tuesday, April 20, 2010

The Future • Client-side SQL Storage (works in Safari and Firefox now, with slightly different API’s) • Microsoft says that IE9 will support HTML5 and hardware-accelerated SVG (Canvas) • And we didn’t talk about CSS3 at all... Tuesday, April 20, 2010

Resources • http://adactio.com/extras/slides/ html5onlineconf/ • http://diveintohtml5.org • http://validator.nu • http://html5doctor.com Tuesday, April 20, 2010

Questions? Tuesday, April 20, 2010

http://www.printedbyerik.com	52
http://refreshsavannah.com	49
http://www.slideshare.net	2
http://translate.googleusercontent.com	1
http://coderwall.com	1

HTML5: About Damn Time

by Kevin Lawver on Apr 20, 2010

Accessibility

Categories

Tags

Upload Details

Usage Rights

5 Embeds 105

Statistics

HTML5: About Damn Time — Presentation Transcript