HTML5: Tales from the Development Trenches

Sunday, March 14, 2010
Presenters:
Bruce Lawson – Opera ASA
Martin Kliehm – namics (deutschland) gmbh

Description:
HTML5 is coming. Originally called "web applications 1.0", it brings new semantics, JavaScript APIs for drag and drop, offline storage, generating images, plugin-free video and form validation. It’s upset semantic web advocates, accessibility evangelists and baffled developers. Cut through the crap: learn what it is and what it does.

Tales from development trenches

  • Tales of the development OF HTML5
  • Tales of developing WITH HTML5

1998-1999 – the future would be XML (XHTML). 1999 was the "last" 4.01 HTML Spec.

Web Applications 1.0 (a better HTML)

  • 2003: Started by Opera
  • Then Mozilla (Apple "cheering from the sidelines")
  • WHATWG – web height and text working group
  • (Later: Google, Microsoft involved)
  • All 5 browser manufacturers working together
  • 2006: W3C restarts HTML, using Web Applications 1.0 as the basis for "HTML 5"
  • 2009: XHTML2 Killed
  • 2010 WHAT-WG goes to last call
  • Not yet completed, but getting there
  • Giant spec (900 pages) – only 300 worth looking at
  • Already some implementations of some parts

What is HTML 5?
Not CSS3, not SVG, not geolocation, not MathML, not XHR
HTML5 is an evolution. There are many extras in HTML5 on top of presentational – added ‘bling’ – The evolution has gone from "chimp to pimp"
It extends the language to better support web applications, since that is one of the directions the web is going in and is one of the areas least well served by HTML so far. This puts HTML in direct competition with other technologies indended for applications deployed over the web, in particular Flash and Silverlight
They probably won’t take them over, but competition is always good.

What do Open Standards matter?
The most important program on your computer is your web browser.
Let’s you be social with your friend, write documents, email, etc.
The web is way too important an application to be in the hands of only one vendor – we NEED and open standard.

HTML5 defines what people really want to do.
Survey the code of 3.5 million pages and find the common themes.

  1. header
  2. content
  3. nav
  4. article
  5. footer

All of these going into HTML vs. naming a div in these common elements.

HTML5 Forms (webforms 2)
Coding form validation isn’t much fun. It’s mainly done with JS right now.
Form validation is built into HTML5

< input name=foo type=number min=5 max=15 step=3>
This provides a number field with a max limit

<input name=foo type=url required>
Will require a url and require a value

<input name=foo type=date>
You get the cool little pop-up calendar right from the browser!!! (impressive!)

Canvas
Immediate graphics mode without plugins

Video
<video> element exposes a simple API for adding video to HTML.
<video src=video.ogv </video>
Controls can/are built into the browser. It is totally styleable with CSS. You can shrink/enlarge thumbnail etc.
Adding captions is easy (start/end captions).

Take Homes

  • HTML5 doesn’t break the web
  • Is sometimes and ugly kludge
  • Can be serialized as XML: XHTML5
  • Defines HTML error-handling to keep consistent DOM
  • Adds new elements and APIs for open standard apps
  • Is coming soon… to a browser near you.

Input Types
<input type="email">
it defaults to a text field for a browser that doesn’t support it.
also validates that it is an email

<input type="search" />
<input type="buttom" />
<input type="text" role="search" />

Geolocation
look for navigator.geolocation and determine current position and display.

Orientation
http://is.gd/ax2Lu – accesses the accelerometer in a laptop and tilts via canvas

Questions:
How on board is Microsoft?
They should be coming on IE soon… there will also be a feature detection that will help you determine what a browser can handle. It should degrade easily if a browser doesn’t handle something new.

Leave a Reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.