Looking for these sessions?

about://me

Agenda

  • Markup and forms
  • Rich graphics and animation
  • Offline web apps
  • Responsive design
  • Touch input
  • Beyond touch
  • Developing HTML5

HTML5 Feature Areas

HTML5 Feature Areas
HTML5 badges by W3C

Browser Support

Some great resources:

WebPlatform Docs
Markup and forms
Pave the cowpaths.

HTML5 design principle, (W3C)

HTML5 Elements

HTML5 Element Adoption

HTML5 Input Demo

^((?>[a-zA-Z\d!#$%&\'*+\-/=?^_`{|}~]+\x20*|\"((?=[\x01-\x7f])[^\"\\]
|\\[\x01-\x7f])*\"\x20*)*(?<))?((?!\.)(?>\.?[a-zA-Z\d!#$%
&\'*+\-/=?^_\`{|}~]+)+|\"((?=[\x01-\x7f])[^\"\\]|\\[\x01-\x7f])*\")@(((
?!-)[a-zA-Z\d\-]+(?<!-)\.)+[a-zA-Z]{2,}|\[(((?(?<!\[)\.)(25
[0-5]|2[0-4]\d|[01]?\d?\d)){4}|[a-zA-Z\d\-]*[a-zA-Z\d]:((?=[\x01-
\x7f])[^\\\[\]]|\\[\x01-\x7f])+)\])(?(angle)>)$

<form>
  <input type=email name=email required>
</form>

Email Address 

:invalid {background-color: #ffdddd;}
:valid {background-color: #ddffdd;}

Example HTML5 Input Demo

Example Input Adoption (email)

HTML5 Details Element Demo (email)

<details>
  <summary>More information</summary>
  <p>More, detailed information goes here</p>
</details>
More information

Here is some more, detailed information that is probably boring for most people, but super handy for others.

details[open] {
  border: 3px solid paleturquoise;
  border-radius:8px;
}
See it in action in Kaazing's award-winning Setup Guide

New Template Element

Template contains inert markup intended to be used later:

<template id="mytemplate">
  <img src="" alt="great image">
  <div class="comment"></div>
</template>

Appending inert DOM to a node makes it go "live":

var t = document.querySelector('#mytemplate');
t.content.querySelector('img').src = 'http://...';
document.body.appendChild(t.content.cloneNode(true));

Note: Work directly with the DOM, content is parsed, not rendered.
Rich graphics and animation

WebGL Demo

getUserMedia and Canvas Demo

Canvas Animation Demo

Example
Gary Davis' HTML5 canvas-based Aniworx animation software
Offline web apps

Web Apps that Use ApplicationCache

Financial Times
Financial Times Web App ft.com

ApplicationCache Basics

Create a manifest file (*.appcache)

CACHE MANIFEST
# version 2011-07-012 06:06:44

CACHE:
# html files
cache.html
index.html
# css files
css/style.css
# image files
apple-touch-icon.png
favicon.ico
img/fallback.png

FALLBACK:
/ /demo/fallback.html

NETWORK:
*

# Although it was removed from the spec, some browsers still require server configuration (mime type for *.appcache)

ApplicationCache Basics

Add manifest attribute to the html element

<doctype html>
<html class="no-js" lang="en" manifest="manifest.appcache">
Demo
Responsive design

Responsive Design Demo

Example
New interactive version of my Apress book Pro HTML5 Programming (by Jen Simmons, Chris O'Connor, and Dylan Wooters)
Touch input

Touch Demos

"Responsive input" and simultaneous interactions using both mouse/trackpad and touchscreen

Example
Interactive touch laptop experiments by Boris Smus

Pointer Events and pointer.js

WebGL Bookcase
Beyond touch

Web Midi Demo

Speech Input Demo

Gamepad API
Developing HTML5

Developer Tools to the Rescue!

3D Page Inspection

Turning on the Bleeding Edge
Final notes

San Francisco HTML5 User Group

First and largest HTML5 Meetup in the world
Free monthly events (professionally recorded)

Google Developers Live

Tune in to the Chrome Developers Channel (live and recorded)!

Get the Book!

Pro HTML5 Programming (Apress, 2011)

Take the Udacity Course!

Udacity's HTML5 Game Programming course (CS255)

Thank You!