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.
DevoxxFR 2024 Reproducible Builds with Apache Maven
HTML5: About Damn Time
1. HTML5:
About Damn Time
Kevin Lawver | kevin@lawver.net | @kplawver
Tuesday, April 20, 2010
2. 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
3. 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
4. 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
5. 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
6. A Basic Document
http://dev.lawver.net/html5/blank.html
Tuesday, April 20, 2010
8. 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
9. Document Semantics
• No more divs! (OK, OK, fewer divs)
• Real semantics: header, footer, section,
article & aside
Tuesday, April 20, 2010
10. 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
11. Let’s look at the
masthead...
Tuesday, April 20, 2010
17. 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
19. <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
20. And?
• The shapely footer element, containing...
• multiple nav elements
• and a document-wide details element for
document cruft.
Tuesday, April 20, 2010
21. Canvas
http://dev.lawver.net/html5/canvas.html
Tuesday, April 20, 2010
22. 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
23. 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
26. 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
27. Demo
http://dev.lawver.net/html5/forms.html
Tuesday, April 20, 2010
29. 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
30. No Demo
Because it doesn’t work well enough across multiple
browsers to waste time with... yet.
Tuesday, April 20, 2010
33. Media is a first-class
markup citizen now!
Tuesday, April 20, 2010
34. Demo
http://dev.lawver.net/html5/video.html
Tuesday, April 20, 2010
35. 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
36. 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
37. 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
47. 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
48. 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
49. 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