Embed Size (px)
DESCRIPTION
A presentation I wrote for Refresh Savannah on what's new, what works and what we'll have to wait a while for in HTML5. There are some demos for things like the new document semantics, canvas, video and new form elements.
Citation preview
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 first-class citizens
• Offline 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 Documenthttp://dev.lawver.net/html5/blank.html
Tuesday, April 20, 2010
<!DOCTYPE html><html> <head> <title>My Awesome HTML5 Document</title> <meta charset="utf-8"/> <!--[if IE]> <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script> <![endif]--> </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 specifically 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
Canvashttp://dev.lawver.net/html5/canvas.html
Tuesday, April 20, 2010
• 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.
Drawing the Web Way
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-Specific Inputs!
• We can finally 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
Demohttp://dev.lawver.net/html5/forms.html
Tuesday, April 20, 2010
Offline Storage
Tuesday, April 20, 2010
Make Your App Offlineable!
• You can create a manifest which gives a list of URLs for your app that declares files 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 DemoBecause 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 first-class markup citizen now!
Tuesday, April 20, 2010
Demohttp://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, fine.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
• Offline 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
