HTML5: About Damn Time

3,486 views
3,421 views

Published on

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.

Published in: Technology
0 Comments
3 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
3,486
On SlideShare
0
From Embeds
0
Number of Embeds
162
Actions
Shares
0
Downloads
25
Comments
0
Likes
3
Embeds 0
No embeds

No notes for slide

HTML5: About Damn Time

  1. 1. HTML5: About Damn Time Kevin Lawver | kevin@lawver.net | @kplawver Tuesday, April 20, 2010
  2. 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. 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. 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. 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. 6. A Basic Document http://dev.lawver.net/html5/blank.html Tuesday, April 20, 2010
  7. 7. <!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
  8. 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. 9. Document Semantics • No more divs! (OK, OK, fewer divs) • Real semantics: header, footer, section, article & aside Tuesday, April 20, 2010
  10. 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. 11. Let’s look at the masthead... Tuesday, April 20, 2010
  12. 12. <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
  13. 13. 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
  14. 14. A Blog Post... http://dev.lawver.net/html5/tedx.html Tuesday, April 20, 2010
  15. 15. <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
  16. 16. What did you see? Tuesday, April 20, 2010
  17. 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
  18. 18. And the footer... Tuesday, April 20, 2010
  19. 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. 20. And? • The shapely footer element, containing... • multiple nav elements • and a document-wide details element for document cruft. Tuesday, April 20, 2010
  21. 21. Canvas http://dev.lawver.net/html5/canvas.html Tuesday, April 20, 2010
  22. 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. 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
  24. 24. Demos! Tuesday, April 20, 2010
  25. 25. Form Elements Tuesday, April 20, 2010
  26. 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. 27. Demo http://dev.lawver.net/html5/forms.html Tuesday, April 20, 2010
  28. 28. Offline Storage Tuesday, April 20, 2010
  29. 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. 30. No Demo Because it doesn’t work well enough across multiple browsers to waste time with... yet. Tuesday, April 20, 2010
  31. 31. Audio & Video Tuesday, April 20, 2010
  32. 32. No more plugins! Tuesday, April 20, 2010
  33. 33. Media is a first-class markup citizen now! Tuesday, April 20, 2010
  34. 34. Demo http://dev.lawver.net/html5/video.html Tuesday, April 20, 2010
  35. 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. 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. 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
  38. 38. Microdata Tuesday, April 20, 2010
  39. 39. Microdata is a way to embed meta data inside of elements. Tuesday, April 20, 2010
  40. 40. Why? Tuesday, April 20, 2010
  41. 41. Turn your HTML documents into your API! Tuesday, April 20, 2010
  42. 42. Yeah, but we have microformats! Tuesday, April 20, 2010
  43. 43. But, they’re non-trivial to parse and mis-use some HTML attributes. Tuesday, April 20, 2010
  44. 44. Ok, fine. http://dev.lawver.net/html5/microdata.html Tuesday, April 20, 2010
  45. 45. 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
  46. 46. The Big Practical Finish Tuesday, April 20, 2010
  47. 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. 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. 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
  50. 50. Resources • http://adactio.com/extras/slides/ html5onlineconf/ • http://diveintohtml5.org • http://validator.nu • http://html5doctor.com Tuesday, April 20, 2010
  51. 51. Questions? Tuesday, April 20, 2010

×