HTML 5

for Skyword

Dec. 2012

HTML5 became a W3C Candidate Recommendation

it's in final review

next stop is Recommendation

HTML 5.0 IS Go

html 5.1 is in the works

New Doctype

<!DOCTYPE html>

New Tags

Sections

like <body> or <h1>
<section>
<article>
<aside>
<nav>
<header>
<footer>

Grouping

Like the <p> tag or <div>

<figure>
<figcaption>

Text-Level Semantics

like <a>, <em> or <strong>
<time>
<mark>
<ruby>
<rt>
<rp>
<bdi>

Embedded content

<embed>
<video>
<audio>
<source>
<track>
<canvas>

Forms

<datalist>
<textarea>
<keygen>
<output>
<progress>
<meter>

Interactive elements

<details>
<summary>
<command>
<menu>

Depricated?

acronym
applet
basefont
big
center
dir
font
frame
frameset
isindex
noframes
strike
tt

Other New Stuff

Form controls

date
time
email
url
search
number
range
tel
color
<input type="url">

Attributes

Global

contenteditable
contextmenu
draggable
dropzone
hidden
spellcheck


Special

<meta charset=utf-8>
<script async>

Web Storage

WebSQL
IndexedDB
localStorage
cache manifest

File & Hardware access

Native Drag & Drop
File API
Geolocation
Orientation
Audio
Video

Aria Roles

The "role" Attribute, for accessibility

application
article
header
main
navigation
And many more...

Micro-data

The itemtype, itemscope, and itemprop Attributes

Additional semantics following a specific schema

itemscope signifies this segment follows a schema
itemtype names which schema is being followed (i.e. http://schema.org/Movie)
itemprop the property of the schema this item lists.

<div itemscope itemtype ="http://schema.org/Movie">
        <h1 itemprop="name">Avatar</h1>
        <span>Director: <span itemprop="director">James Cameron</span> (born August 16, 1954)</span>
        <span itemprop="genre">Science fiction</span>
        <a href="../movies/avatar-theatrical-trailer.html" itemprop="trailer">Trailer</a>
</div>
                        
Read more...

How do our users stack up?

Browsers

7. Chrome frame allows IE users to use chrome's rendering engine
you can trigger via headers or it with 

<meta http-equiv="X-UA-Compatible" content="chrome=1">
                    

Browsers By Version


Cross-browser compatibility

results via html5test.com

IE 9.............138/500
IE 10...........320/500
FF 18...........393/500
Ch 24..........448/500
Maxthon....464/500



77%

of our users can run some HTML5

But what about those who can't?

or don't do it very well

Feature Detection

with Modernizr.js

Open-source JS library to
help make html5 & css3 sites.

Detect Browser Compatibility

Add css classes to facilitate fallbacks

Older Browsers: Shim & load polyfills

How it Works

<!DOCTYPE html>
<html class="no-js">
    <head>
        ...
        <script src="js/modernizr-1.0.min.js"></script>
        ...

generates

 <html class="js canvas canvastext geolocation rgba hsla no-multiplebgs borderimage borderradius boxshadow opacity no-cssanimations csscolumns no-cssgradients no-cssreflections csstransforms no-csstransforms3d no-csstransitions video audio cufon-active fontface cufon-ready">
<head>
    ...
    <script src="js/modernizr-1.0.min.js"></script>
    ...

Fallback css

.no-js #page,
.no-cssgradient #page {
    background: url("images/gradient.png");
}
.cssgradient #page {
    background-image: linear-gradient(top, #555, #333)
}

Modernizr.js & JS

// a string, an object, or an array of strings and objects
Modernizr.load([{
    test : Modernizr.fontface && Modernizr.cssgradients,
    // Modernizr.load loads css and javascript by default
    nope : ['presentational-polyfill.js', 
            'presentational.css']
  },{// Functional polyfills
    // This just has to be truthy
    test : Modernizr.websockets && window.JSON,
    // socket-io.js and json2.js
    nope : 'functional-polyfills.js',
    // You can also give arrays of resources to load.
    both : [ 'app.js', 'extra.js' ],
    complete : function () {
      // Run this after everything in this group has 
      // downloaded and executed, as well everything 
      // in all previous groups
      app.init();
    }
  },
  // load analytics after everything else
  'analytics.js'
]);

More modernizr & JS

if (Modernizr.localstorage) {
  // window.localStorage is available!
} else {
  // no native support for local storage :(
  // use a polyfill! :)
}

POLYFILLS

a JS alternative for new features.
Polyfills are a type of shim that retrofit legacy browsers with modern HTML5/CSS3 features
— Remy Sharp
Shims refer to any code that intercepts API calls and provides a layer of abstraction
— Paul Irish

Demos

geolocation
drag & drop / file API
drag & drop
localStorage
Form elements
svg animation
html5/localStorage notepad
html5 <progress> polyfill
css3 gradients
css3 border-radius
css3 :nth tester

LINKS

caniuse.com
html5demos.com
HTML5 Litmus
QuirksMode.org Compatibility
html5rocks.com
html5 rocks deck
html5 readiness
dive into html5


Thanks!