HTML5 - a Postcard from the Trenches

What Is HTML5?

"...you may be able to offer some objective advice on the following. One of the programmers said that he would recommend doing ours in HTML5 because it works on all recent browsers, works on I Phone and I Pad, is open source, is a Java based language and therefore can be done by a larger group of programmers, takes less memory, and requires no plug in."
a recent email to my office

There is a lot of questions, confusion, and out-right mis-information surrounding HTML5 today. Over the next 90 minutes I hope to address these questions, and more:

  • What does HTML5 really mean?
  • What does it include?
  • Exclude?
  • What about accessibility?
  • Interoperability?
  • "Browser wars" Part 2?
  • Can we use HTML5 today?

HTML5 - the Public Perception

HTML5 - GeekSpeak

Definitions:

[Icon - W3c logo]At the W3C

HTML5: A vocabulary and associated APIs for HTML and XHTML

[Icon - WHAT WG logo]At the WHAT WG

This specification evolves HTML and its related APIs to ease the authoring of Web-based applications.

http://dev.w3.org/html5/spec/spec.html

HTML5 - GeekSpeak

Definitions:

PC Magazine Encyclopedia

HTML5 is designed to provide a comprehensive application development platform for Web pages that eliminates the need to install third-party browser plug-ins.

HTML5 provides support for 2D graphics (canvas element), document editing, drag and drop, browser history management, video playback and local file storage.

HTML5 - GeekSpeak

Definitions: (Can't Stand Still)

[Icon - W3C's HTML5 logo]At the W3C

The HTML5 specification contains a broad set of technologies at varying degrees of adoption and implementation.

Are all those technology features defined in the HTML5 specification?
No, not all of them.

HTML5 - GeekSpeak

Definitions: (Can't Stand Still)

[Icon - WHAT WG logo]At the WHAT WG

We moved to a new development model, where the technology is not versioned and instead we just have a living document that defines the technology as it evolves. We were going to change the name last year but ended up deciding to wait a bit since people still used the term "HTML5" a lot. However, the term is now basically being used to mean anything Web-standards-related, so it's time to move on!

HTML5 - GeekSpeak

Definitions: (Can't Stand Still)

Bruce Lawson

[Logo - NEWT]

I prefer “NEWT” which stands for New Exciting Web Technologies and can thus safely encompass real-HTML5, CSS 3, SVG, XHR2, Geolocation, Web Sockets, WOFF, Web DB, IndexedDB, WebGL and the like.

HTML5 - GeekSpeak

The Same but Different

[Photo - A Giant Book]

The WHAT WG prefers everything in one place.

[Photo - too many Library Books]

The W3C prefers a more modular approach.

HTML5 - GeekSpeak

"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."

Associated APIs

Web Workers

[Graphic - a large worker with 3 smaller workers in the background]"Defines an API that allows Web application authors to spawn background workers running scripts in parallel to their main page. This allows for thread-like operation with message-passing as the coordination mechanism."

Associated APIs

Web Workers

Web Applications? Yes!

[Graphic - Not HTML5]

Associated APIs

Data Storage

[Photo - an endless row of filing cabinets]

Browser Storage
-"Cookies on Steroids"
- Plays nice with JSON
- Storage limit ~5 Mb
WebSQL db
- Support in Opera, Safari, Chrome / Stalled at W3C
- Storage limit undefined
- Uses SQL statements as string arguments passed to a JavaScript API
Indexed DB
- Support coming in Firefox 4 / IE 9 & Chrome contemplating
  • Web SQL Database - http://dev.w3.org/html5/webdatabase/
  • Indexed Database API - http://www.w3.org/TR/IndexedDB/

Associated APIs

Data Storage

Web Applications? Yes!

[Graphic - Not HTML5]

Associated APIs

GeoLocation

[Collage - iPhone and various geo-location based service logos; Foursquare, Gowalla, Loopt]

Common sources of location information include Global Positioning System (GPS) and location inferred from network signals such as IP address, RFID, WiFi and Bluetooth MAC addresses, and GSM/CDMA cell IDs, as well as user input.

No guarantee is given that the API returns the device's actual location.

http://dev.w3.org/geo/api/spec-source.html

Associated APIs

GeoLocation

Web Applications? Yes!

[Graphic - Not HTML5]

Technologies Referenced by HTML5

JavaScript

[Collage - logos from jQuery, YUI and Dojo javascript libraries]
HTML5 provides extensions to both the HTMLDocument interface from DOM Level 2 HTML and the HTMLElement interface has also gained several extensions.

Technologies Referenced by HTML5

JavaScript

Web Applications? Yes!

[Graphic - Not HTML5]

Technologies Referenced by HTML5

CSS3

[Graphic - pencil and pad representing CSS3]
Media Queries: http://dev.w3.org/csswg/css3-mediaqueries/

Technologies Referenced by HTML5

CSS3

(all together now...)

HTML5

The Mark-up Language

[Graphic - html5]

http://www.w3.org/TR/2010/WD-html-markup-20100304/

HTML5

New Elements

[Graphic - html5]

HTML5

New Elements (cont.)

[Graphic - html5]

HTML5 Landmark Elements

Semantic Structure

[Graphic - illustration of the various landmark elements]

HTML5 Web Forms

Who enjoys
building forms?

[Collage - different types of web forms]

HTML5 Web Forms

Input Types & Attributes

New Form Input Types

  • input type=datetime
  • input type=datetime-local
  • input type=date
  • input type=month
  • input type=time
  • input type=week
  • input type=number
  • input type=range
  • input type=email
  • input type=url
  • input type=search
  • input type=tel
  • input type=color

Form Attributes

HTML5

SVG & MathML

[Collage - HTML5, SVG and MathML Logos]
http://www.w3.org/Graphics/SVG/WG/wiki/SVG_in_HTML5

HTML5 - Canvas

One of the so-called
Flash killers

[Graphic - example of Canvas use]
Currently split out from HTML5, WebGL will allow for 3D rendering via the canvas element in supporting browsers.

HTML5 - Canvas

One of the so-called
Flash killers

[Graphic - example of Canvas use]
Canvas Element Accessibility Issues: http://www.w3.org/html/wg/wiki/AddedElementCanvas

HTML5 - Video/Audio

One of the so-called
Flash killers

[Graphic - video without Flash plugin]
http://www.w3.org/TR/html5/video.html

HTML5 - Video/Audio

One of the so-called
Flash killers

[Graphic - screen capture of HTML5 video screen]

A number of problems today:

User Requirements: http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Requirements Emergent Technical Requirements: http://www.w3.org/WAI/PF/HTML/wiki/Media_Accessibility_Tech_Requirements

HTML5- ARIA

Accessible Rich
Internet Applications

Defining Roles, States and Properties

Accessible Rich Internet Applications (WAI-ARIA) 1.0: http://www.w3.org/TR/wai-aria/

HTML5 Drag and Drop

Common U.I. Action

[Screen Capture - Drag and Drop example]

Like HTML5 Forms, Drag and Drop recognizes common functionality delivered via JavaScript & makes it native to the browser

http://dev.w3.org/html5/spec-author-view/dnd.html#dnd

HTML5 Drag and Drop

Accessibility challenges

Challenges include:

Some people with poor fine motor control have difficulties making small movements and remaining steady. For this group of people, the dexterity requirements to accurately select and move an object using a pointing device can cause them problems, and they benefit from a keyboard equivalent being made available to allow them to use such functionality in a different way.

People with very poor eyesight are unable to perceive the start and end points of a drag and drop operation when it is conveyed in purely visual terms. For these two groups, drag and drop operations can be impossible to perform without accessibility considerations being designed into the process.

To be accessible, all functionality should be operable through the keyboard alone. Making drag and drop operations keyboard accessible is a relatively simple process, but there are a few extra challenges for people using assistive technologies, such as screen reader users and screen magnifier users.

What about accessibility?

Catching Up

Unresolved Accessibility Issues & Bugs at Aug, 2010 January, 2011

What about accessibility?

Catching Up

Unresolved Accessibility Issues & Bugs at Aug, 2010 January, 2011

Can we use HTML5 today?

Interoperability

[Collage - Browser logos]

Can we use HTML5 today?

Market Penetration

Mobile

Already over 125 million people visit Facebook using HTML5 capable browsers just from their mobile phones, and that number skyrockets when we add in desktop browsers.

Accessible?

[Bargraph - HTML5 Accessibility support in current browsers]
- source: http://www.html5accessibility.com/

Can we use HTML5 today?

3rd Party
Developer Tools

Can we use HTML5 today?

Books

[Collage: HTML5 Books]
  1. Introducing HTML5 (Peachpit) by Bruce Lawson and Remy Sharp
  2. HTML5 for Web Designers (A Book Apart) by Jeremy Keith
  3. Video tutorial: HTML5 Now: A Step-by-Step Video Tutorial for Getting Started Today (Voices That Matter) by Tantek Çelik
  4. HTML5: Up and Running (O’Reilly) by Mark Pilgrim
  5. Pro HTML5 Programming: Powerful APIs for Richer Internet Application Development (APress) by Peter Lubbers, Brian Albers, Frank Salim

Can we use HTML5 today?

Proceed with Caution

HTML5 - a Postcard from the Trenches

Thank You

Questions?

http://soap.stanford.edu/presentations/postcard2

Contact