HTML(5) Now

HTML(5) Now

Web 2 Expo

2011-10-11 New York, NY #html5now #w2e

Tantek Çelik, Mozilla Web Standards Lead tantek.com

Copyright 2011, Some Rights Reserved (CC-BY-3.0)
HTML(5) Then
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
Dive Into HTML5
Introducing HTML5
HTML5 Now
2011
W3C HTML5 logo
W3C HTML5 badges
~6 months ago
IE9

IE9 Released
Firefox 4 desktop+mobile

Firefox 4 Released
NYT - HTML5

New York Times

HTML5 Is Breathing New Life Into the Web
last month
IE10PP3

IE10 Platform Preview 3 Released
Firefox 7

Firefox 7 Released
HTML(5) Now
What HTML5 can I use?
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
New: U element upgraded
- <u> element
- "unarticulated, explicitly rendered, non-textual annotation"
- ???
- Avoid for now until specific examples provided.
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
Practical HTML5: New Semantics
- <article> - self-contained post, news, comment
  - <header> - intro, nav, headings
  - <footer> - info, copyright
  - <aside> - tangential content, side comments
- class="hentry" - hAtom microformat
Dependable HTML5: audio & video
- <audio src></audio>
- <video src></video>
Dependable HTML5: video formats
- H.264: ~~Chrome,~~ Safari, IE9, Flash
- WebM: Chrome, Firefox, Opera, IE9+codec
  - Flash VP8/WebM support planned
- YouTube now does WebM iframe embeds
- Vidly public beta - free WebM/H.264 conversions
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
- Need H.264 for mobile (iOS etc. for now)
- Check out VideoJS for samples
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: Chrome, Firefox, Opera, Safari, BlackBerry
IE9 Ships With Geolocation

2011 March: IE9 Ships With Geolocation
Practical Now: Geolocation API
- Recommendation: Use it!
- Provide fallback: enter location form
Why use Geolocation?
- Mobile Web Apps
- Supported by mobile browsers
- Context for nearly any mobile app
- More: go to 1:30pm Mobile First
Roughly Usable HTML5
Roughly Usable: HTML5 History API
- The problem: #! URLs break the web
- history.pushState - update current URL
- Examples: Facebook photos, Flickr lightbox
- Modern browser support (all but IE)
This Past March
Tweet: Dear IE please support HTML5 pushState
Last Month
IE10 PP3: Added HTML5 History API!
Roughly Usable: HTML5 History API
- Works Today: Chrome, Firefox, Google, Opera
- Next year: IE10
- Fallback / older IEs: let them eat page loads
Worthy of Web App Experiments
Web App Experiments
- Spun off API specs - in flux
- Minimal or experimental browser support
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
Web Apps Practical Approaches
- Modernizr - detect Web API support
- HTML5 Shims - fake it in older browsers
Web Apps Adaptability
- Connectivity is unreliable
- Your Mobile App Must Adapt
- Work with(out) Javascript
- Add Offline Support
Web Apps Adaptability - How
- Progressive Enhancement
- Unobtrusive JavaScript / AJAX
- HTML5: Offline Web Applications
- Web APIs: Web Storage, Indexed Database
- Use Modernizr to detect and use offline/APIs
- Demo: Mozilla sample To-Do List
Demos: Mozilla Web of Wonder
Keep up and participate in HTML5
- Read Editor's drafts: HTML5 Spec
- Conribute to: WHATWG wiki
- Join: #html5 IRC (webchat)
- Join: W3C groups and lists
  - public-html
  - www-style
Thank you.

Tantek Çelik

tantek.com

@t

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

HTML(5) Now

Web 2 Expo

2011-10-11 New York, NY #html5now #w2e

Tantek Çelik, Mozilla Web Standards Lead tantek.com

HTML(5) Then

2009-2010

2009-2010

Jeremy Keith's HTML5 for Web Designers

Dive Into HTML5

Introducing HTML5

HTML5 Now

2011

W3C HTML5 logo

W3C HTML5 badges

~6 months ago

IE9

IE9 Released

Firefox 4 desktop+mobile

Firefox 4 Released

NYT - HTML5

New York Times

HTML5 Is Breathing New Life Into the Web

last month

IE10PP3

IE10 Platform Preview 3 Released

Firefox 7

Firefox 7 Released

HTML(5) Now

What HTML5 can I use?

Parts of HTML5 are:

New: S element upgraded

Set list with no longer relevant entries

New: U element upgraded

Practical HTML5: New Semantics

Readability

Readability Article Publishing Guidelines

Practical HTML5: New Semantics

Dependable HTML5: audio & video

Dependable HTML5: video formats

Dependable HTML5: sources, fallback

VideoJS player code

Practical Now: Geolocation API

IE9 Ships With Geolocation

2011 March: IE9 Ships With Geolocation

Practical Now: Geolocation API

Why use Geolocation?

Roughly Usable HTML5

Roughly Usable: HTML5 History API

This Past March

Tweet: Dear IE please support HTML5 pushState

Last Month

IE10 PP3: Added HTML5 History API!

Roughly Usable: HTML5 History API

Worthy of Web App Experiments

Web App Experiments

Web App Experiments are Drafts

Web SQL Database abandoned

Web Apps Practical Approaches

Web Apps Adaptability

Web Apps Adaptability - How

Demos: Mozilla Web of Wonder

Keep up and participate in HTML5

Thank you.

Tantek Çelik

tantek.com

@t