HTML(5) Now

Web 2 Expo

2011-03-29 San Francisco, CA #html5now #w2e

Tantek Çelik, Mozilla Web Standards tantek.com

Copyright 2011, Some Rights Reserved (CC-BY-3.0)
2009-2010
2009-2010
- “We're betting big on HTML 5.”
  — Vic Gundotra, Google
- “The world is moving to HTML5.”
  — Steve Jobs, Apple
- “The future of the web is HTML5.”
  — Dean Hachamovitch, Microsoft
Jeremy Keith's HTML5 for Web Designers
Mark Pilgrim's Dive Into HTML5
Lawson & Sharp's Introducing HTML5
HTML5 Now by Tantek Çelik
2011
W3C HTML5 logo
W3C HTML5 badges
2 weeks ago
IE9
1 week ago
Firefox 4
48 hours later
Firefox 4 - 48 Hours
Yesterday
NYT - HTML5

New York Times

HTML5 Is Breathing New Life Into the Web
2 Hours Ago
Firefox 4 Mobile

Firefox.com/m

for Android and Nokia
Now
glow.mozilla.org
Firefox 4 Usage
What HTML5 can I use now?
Parts of HTML5 are:
- practical now
- roughly usable
- worthy of web application experiments
New: S element upgraded
- <s> element
- "no longer accurate or relevant"
Set list with no longer relevant entries
Practical HTML5: New Semantics
- <article> - self-contained post, news, comment
  - <header> - intro, nav, headings
  - <footer> - info, copyright
  - <aside> - tangential content, side comments
Readability
Readability Article Publishing Guidelines
Dependable HTML5: audio & video
- <audio src></audio>
- <video src></video>
Dependable HTML5: video formats
- H.264: ~~Chrome,~~ Safari, IE9
- WebM: Chrome, Firefox, Opera, IE9+plugin
- Last month: YouTube WebM iframe embeds
- Keep up with webmproject.org
1 week ago
Vid.ly conversions public beta

Dependable HTML5: sources, fallback

<source src> - publish WebM and H.264

<video controls>
 <source src="http://example.com/vid.ogv">
 <source src="http://example.com/vid.mp4">
 <object data="http://example.com/vid.mp4">
   <embed src="http://example.com/vid.swf">
 </object>
</video>

Browser uses first format it can handle
<object> <embed> for older browser fallback

VideoJS player code
Practical Now: Geolocation API
- Browser API for sites to request user location
- The only "Web App" API that is a CR!
- 2010 support: Chrome, Firefox, Opera, Safari
Last Fall
Tweet: Dear IE please implement Geo
Last Month
IE9 RC: Added Geolocation
Practical Now: Geolocation API
- Recommendation: Use it!
- Provide fallback: enter location form
Roughly Usable HTML5
Roughly Usable: HTML5 History API
- The problem: #! URLs
- history.pushState - update current URL
- Examples: Facebook photos, Flickr lightbox
- Modern browser support (all but IE)
- Let's tweet:
- Dear @IE: please support HTML5 pushState in IE9.1! #html5now #w2e
- Fallback: let them eat page loads
Worthy of Web App Experiments
Web App Experiments
- Spun off API specs — not quite ready “now”
- Minimal or experimental browser support only
Web App Experiments are Drafts
- All working drafts (or editor's drafts)
  - Implementors should be aware that this specification is not stable. Implementors who are not taking part in the discussions are likely to find the specification changing out from under them in incompatible ways.
- All of these Web APIs could change.
- If you want to depend on them, you must keep up
Web SQL Database abandoned
Mozilla Web of Wonder
Help HTML5 Evolve
- WHATWG wiki
- #whatwg IRC channel on Freenode
- Join the W3C HTML Working Group
- 11:10am Alcove 4: "Controversies of HTML5"
Thank you.

Tantek Çelik

tantek.com

@t

tantek.com/presentations/2011/03/html5-now Copyright 2011, Some Rights Reserved (CC-BY-3.0)

HTML(5) Now

Web 2 Expo

2011-03-29 San Francisco, CA #html5now #w2e

Tantek Çelik, Mozilla Web Standards tantek.com

2009-2010

2009-2010

Jeremy Keith's HTML5 for Web Designers

Mark Pilgrim's Dive Into HTML5

Lawson & Sharp's Introducing HTML5

HTML5 Now by Tantek Çelik

2011

W3C HTML5 logo

W3C HTML5 badges

2 weeks ago

IE9

1 week ago

Firefox 4

48 hours later

Firefox 4 - 48 Hours

Yesterday

NYT - HTML5

New York Times

HTML5 Is Breathing New Life Into the Web

2 Hours Ago

Firefox 4 Mobile

Now

glow.mozilla.org

Firefox 4 Usage

What HTML5 can I use now?

Parts of HTML5 are:

New: S element upgraded

Set list with no longer relevant entries

Practical HTML5: New Semantics

Readability

Readability Article Publishing Guidelines

Dependable HTML5: audio & video

Dependable HTML5: video formats

1 week ago

Vid.ly conversions public beta

Dependable HTML5: sources, fallback

VideoJS player code

Practical Now: Geolocation API

Last Fall

Tweet: Dear IE please implement Geo

Last Month

IE9 RC: Added Geolocation

Practical Now: Geolocation API

Roughly Usable HTML5

Roughly Usable: HTML5 History API

Worthy of Web App Experiments

Web App Experiments

Web App Experiments are Drafts

Web SQL Database abandoned

Mozilla Web of Wonder

Help HTML5 Evolve

Thank you.

Tantek Çelik

tantek.com

@t