This presentation is an HTML5 website

Press → key to advance.

Having issues seeing the presentation? Read the disclaimer

Slides controls

← and → to move around.
Ctrl/Command and + or - to zoom in and out.
S to view page source.
T to change the theme.
H to toggle syntax highlight.
N to toggle speaker notes.
3 to toggle 3D effect.
0 to toggle help.

What is

HTML5 & CSS3

...and how can I use it today?

by Elijah Manor ( @elijahmanor )

Who Am I?

Elijah Manor

ASP.NET MVP, ASPInsider
Senior Architect at appendTo

Contact Information

elijah.manor@gmail.com
http://twitter.com/elijahmanor
http://gplus.to/elijahmanor

What is HTML5?

What!?!

Who Supports It?

Browser Support

Mobile Support

Adoption Strategies

Graceful Degradation
Build for Latest Browsers and Degrade

Progressive Enhancements
Build for Oldest Browsers and Enhance

Regressive Enhancement a.k.a. Polyfill
Modernizr & Polyfills

TAFEE (pronounced: taffy)
Tiered, adaptive front-end experiences. Customizing the experience to the unique capabilities of each browser, prioritizing a fast and good UX over consistency

How Do I Get Started?

Semantics

Does This Look Familiar?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en">
<head>
	<meta http-equiv="Content-Type"
		content="text/html; charset=utf-8">
	<link rel="stylesheet" href="site.css" type="text/css" />
	<style type="text/css">
  		h1 { color: red; }
	</style>
</head>
<body>
	<script type="text/javascript" src="common.js"></script>
</body>
</html>

HTML5 Simplifies Your Markup

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<link rel="stylesheet" href="site.css" />
	<style>
		h1 { color: red; }
	</style>
</head>
<body>
	<script src="common.js"></script>
</body>
</html>

MAMA Case Study: Class Names

http://devfiles.myopera.com/articles/572/classlist-url.htm

MAMA Case Study: ID Names

http://devfiles.myopera.com/articles/572/idlist-url.htm

New Semantic Elements

footer header nav section article aside hgroup figure figcaption video audio source track embed mark progress meter time ruby rt rp bdi wbr canvas command details datalist keygen output

Need Modernizr or HTML5 Shiv to trigger styling in old IE
html5shim by Remy Sharp, Jon Neal & community. enables for print use, as well
innerShiv by Joe Bartlett - enables elements for innerhtml use http://jdbartlett.github.com/innershiv/ *Note: no longer necessary if you use jQuery 1.7

HTML5 Forms

Elements
meter, progress, output, keygen

Types
Email, Tel, Url, Search, Color, Number, Range, Date

Attributes
Placeholder, autofocus, maxlength, min/max/step, list, autocomplete, accept, multiple, required, pattern, novalidate, formnovalidate, formaction, formmethod, formtarget, formenctype, spellecheck

HTML5 Forms Example

Offline & Storage

Application Cache

<html manifest="example.appcache"></html>

CACHE MANIFEST

# Version 2

CACHE:       # Explicitly cached after downloaded
/index.html  # ... Include css, img, js, favicon, html files here

NETWORK:     # White-listed that require connection to server. Requests bypass cache
/login.aspx  # Maps to a file
/server      # Maps to a folder

FALLBACK:    # Provide fallback pages if resource inaccessible
/dashboard.aspx /static.html    # Maps to a file
/img/profile/ /img/offline.jpg  # Maps a folder to a file

// UNCACHED, IDLE, CHECKING, DOWNLOADING, UPDATEREADY, OBSOLETE
window.applicationCache.status; 

window.applicationCache.update();     // Attempts to update cache if manifest changed
window.applicationCache.swapCache();  // Swaps out the old cache for the new one

var appCacheEvents = [ "cached", "checking", "downloading", "error", "noupdate", 
	"obsolete", "progress", "updateready" ];
$( window ).bind( appCacheEvents.join( " " ), function( e ) {} );

Web Storage ( Local & Session )

try {
	window.localStorage.setItem( "firstName", "Mike" );
	window.localStorage.firstName = "Jonathan";
	window.localStorage[ "firstName" ] = "Doug";
	localStorage[ "firstName" ] = "Scott";
} catch ( e ) {
	if ( e === QUOTA_EXCEEDED_ERR ) { }
}

localStorage.getItem( "firstName" );

localStorage.length;

localStorage.removeItem( "firstName" )

localStorage.clear();

0 Stored

Web SQL Database

var db = openDatabase( "HTML5", '1.0', "My Local Database", 5 * 1024 * 1024 );

db.transaction( function ( tx ) {
  tx.executeSql( "CREATE TABLE IF NOT EXISTS Tweets " +
	"( id real unique, tweet text )" );

  tx.executeSql( "INSERT INTO Tweets ( id, text ) VALUES ( ?, ? )",
    [ tweet.id, tweet.text ] );

  tx.executeSql( "SELECT * FROM Tweets", [], function ( tx, results ) {
    for ( var i = 0, length = results.rows.length; i < length; i++ ) {
      console.log( results.rows.item( i ) );
    }
  });
});

0

Date	From	Tweet

Indexed DB

var tweet = {
    open: function( callback ) {
        var request = window.IndexedDB.open( "HTML5 IndexDB" ),
            version = "1.0";

        request.onsuccess = function( e ) {
            var db = tweet.db = e.target.result;
            db.createObjectStore( "tweet", { keyPath: "id" } );
            callback.apply( this, arguments );
        };
    },
    add: function( id, tweet ) {
        var trans = this.db.transaction(["tweet"], IDBTransaction.READ_WRITE, 0),
            store = trans.objectStore( "tweet" ),
            request = store.add({ "id": id, "tweet": tweet });
    },
    getList: function() {
        var trans = this.db.transaction(["tweet"], IDBTransaction.READ_WRITE, 0),
            store = trans.objectStore( "tweet" ),
            keyRange = IDBKeyRange.lowerBound( 0 ),
            cursorRequest = store.openCursor( keyRange );

        cursorRequest.onsuccess = function( e ) {
            var result = e.target.result;
            if ( result ) { console.log( result.value ); result.continue(); }
        };
    }
};

Device Access

Geolocation API

var errors = {
    1: "Permission denied",
    2: "Position unavailable",
    3: "Request timeout"
};

if ( navigator.geolocation ) {
    navigator.geolocation.getCurrentPosition(
        function( position ) {
            console.log( "lat: "  + position.coords.latitude + ", " + 
                         "long: " + position.coords.longitude );
        },
        function( error ) {
            console.log( "error: " + errors[ error.code ] );
        }, {
            enableHighAccuracy: true,  // want best accuracy, but may take longer
            timeout: 10 * 1000,        // maximum length of time to wait
            maximumAge: 0              // maximum age of cached position
        }
    );
}
else {
    console.log( "Geolocation not available" );
}

Tilt Orientation

$( window ).bind( "deviceorientation MozOrientation", function( event ) {
    event = event.originalEvent;

    var a = event.alpha, // 0
        b = event.beta,  // 0
        g = event.gamma; // 0
});

Connectivity / Realtime

Web Sockets

var socket = new WebSocket( "ws://html5rocks.websocket.org/echo" );

socket.onopen = function() {          // connection has been opened
    console.log( "Connection opened" );
    socket.send( "Hello World!" );    // send a message to the server
};

socket.onerror = function( error ) {  // an error has occured
    console.log( error );
};

socket.onmessage = function( e ) {    // message was sent from the server
    console.log( e.data );            // message from server
};

socket.onclose = function( e ) {      // connection has been closed
    console.log( "Connection closed" );
};

console.log( socket.readyState );     // { 0:"Connecting", 1:"Open", 2:"Closed }

Many of us have been implemented interval driven polling with AJAX and some have moved towards using long polling techniques, but both of these have the overhead of the HTTP stack. The goal of Web Sockets is to keep a connection between the client and server and make communication between them be very lightweight and fast.

Server-Sent Events

var source;
if ( window.EventSource ) {
    source = new EventSource( "eventSource.aspx" );
} else {
    // Fallback to some other technique
}

source.bind( "message", function( e ) {
	e = e.originalEvent;
	
    console.log( e.data );
});

source.bind( "open", function( e ) {
    // The connection was opened
});

source.bind( "error", function( e ) {
    // An error has occurred
});

Content-Type: text/event-stream

retry: 10000\n  // Signal how long to wait for reconnection (default 3 sec)
id: 1233\n      // Signal what point to sync if connection lost
data: { "echo": "Hello World!" }\n\n

Multimedia

Audio

<audio 
    preload="auto" <!-- preload none, metadata, or auto (let browser decide) -->
    controls       <!-- display controls to manipulate playback -->
    autoplay       <!-- automatically start audio when page loaded -->
    loop           <!-- loop the media playback -->
    autobuffer     <!-- if not autoplay, then buffer so starts quickly -->
    muted          <!-- initialized audio output to mute -->
    crossorigin>   <!-- setting if use CORS -->

    <source src="intro.ogg" type="audio/ogg" />  <!-- remember to add type -->
    <source src="intro.mp3" type="audio/mpeg" /> <!-- otherwise has to -->
    <source src="intro.wav" type="audio/wav" />  <!-- download pieced & check -->

    <!-- Add fallback flash object markup here... -->

    This content appears if the audio tag or the codec is not supported.
</audio>

Audio: Demo

Video

<video 
    width="320"         <!-- pixel width. defaults to width of video -->
    height="240"        <!-- pixel height. defaults to height of video -->
    poster="intro.jpg"  <!-- image displayed before or while loading -->
    autoplay            <!-- automatically start video when page loaded -->
    controls            <!-- display controls to manipulate playback -->
    loop                <!-- loop the media playback -->
    autobuffer>         <!-- if not autoplay, then buffer so starts quickly -->

    <source src="intro.mp4" type="video/mp4" />   <!-- remember to add type -->
    <source src="intro.webm" type="video/webm" /> <!-- otherwise has to -->
    <source src="intro.ogv" type="video/ogg" />   <!-- download piece & check -->

    <!-- Add fallback flash object markup here... -->

    This content appears if the video tag or the codec is not supported.
</video>

Video Demo

3D, Graphics & Effects

SVG

XML
Vector Based
Maintains a DOM
Can change it dynamically

SVG: Demo

Canvas

Bitmap Output

<canvas id="fancyCanvas" width="200" height="200"></canvas>

					
var context, image;

if ( Modernizr.canvas ) {
    context = $( "fancyImage" )[ 0 ].getContext( "2d" );
    image = new Image();
    image.src = "./images/HTML5_3D_effects_128.png";
    image.onload = function() {
        context.drawImage( image, 0, 0 );
    };
} else {
    // Do something else... flash, image only, etc
}

Canvas Demo

WebGL

3d Canvas API

<canvas id="fancyCanvas" width="200" height="200"></canvas>

var webGL = $( "#fancyCanvas" )[ 0 ].getContext( "experimental-webgl" );

WebGL Demo

Performance & Integration

Web Workers

JavaScript is a single-threaded environment ( multiple scripts can't run at the same time )
Performance in the browser can be an issue if it slows down response / render time
Developers try to be clever and work around these issues byusing setTimeout(), etc... but these just make things asynchronous, not making them multi-threaded.
Web Workers allow you to run a background script without blocking the UI or other scripts

CSS3 / Styling

Browser Prefixes

Just like the HTML5 features we looked at before, the adoption of CSS3 features isn't the same across the browser landscape. In the meantime browsers are using vendor specific prefixes so their implementation won't collide with another browser.
- -webkit & -moz & -o & -ms

It is consider best practice to list the vendor prefixes first and then the standard property. That way, when the standard if finalized the last one will override.

-webkit-transition: all 0.3s ease-out;  
   -moz-transition: all 0.3s ease-out;  
    -ms-transition: all 0.3s ease-out;  
     -o-transition: all 0.3s ease-out;  
        transition: all 0.3s ease-out;

Browser Prefixes Demo

CSS3 Font Face

/* http://www.fontsquirrel.com/fontface/generator */

@font-face {
    font-family: "ActionManRegular";
    src: url( "Action_Man-webfont.eot" );
    src: url( "Action_Man-webfont.eot?#iefix" ) format( "embedded-opentype" ),
         url( "Action_Man-webfont.woff" ) format( "woff" ),
         url( "Action_Man-webfont.ttf" ) format( "truetype" ),
         url( "Action_Man-webfont.svg#ActionManRegular" ) format( "svg" );
    font-weight: normal;
    font-style: normal;
}					

body {
    font-family: "ActionManRegular", Helvetica, Georgia, sans-serif;
}

Spider-Manor

CSS3 Media Queries

#main  { width: 600px; float: left; }
#aside { width: 280px; float: right; }

@media screen and (max-width: 1024px) { 
    #main  { width: 65%; }
    #aside { width: 25%; }
}

@media screen and (max-width: 720px) { /* change to one column */
    #main  { width: 100%; float: none; }
    #aside { width: 100%; float: none; }
}

CSS3 Media Queries: Demo

Image Taken From: http://mgd.go.ly

Chrome Frame

<!-- Prompt IE 6 users to install Chrome Frame. 
    http://chromium.org/developers/how-tos/chrome-frame-getting-started -->
<!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/.../CFInstall.min.js"></script>
    <script>window.attachEvent( "onload", function() { 
		CFInstall.check( { mode: "overlay" })})</script>
<![endif]-->

<!-- Use Google ChromeFrame if
    it is intalled -->
<meta http-equiv="X-UA-Compatible" 
    content="chrome=1">

Questions?

Elijah Manor

ASP.NET MVP, ASPInsider
Senior Architect at appendTo

Contact Information

elijah.manor@gmail.com
http://twitter.com/elijahmanor
http://gplus.to/elijahmanor

Move Around	← →
Source File	s
Change Theme	t
Syntax Highlight	h
Speaker Notes	n
Toggle 3D	3
Help	0

What is HTML5 & CSS3

...and how can I use it today?

Elijah Manor

Contact Information

Graceful Degradation

Progressive Enhancements

Regressive Enhancement a.k.a. Polyfill

TAFEE (pronounced: taffy)

How Do I Get Started?

Semantics

Elements

Types

Attributes

Offline & Storage

Device Access

Connectivity / Realtime

Multimedia

3D, Graphics & Effects

Performance & Integration

CSS3 / Styling

Spider-Manor

Elijah Manor

Contact Information

What is

HTML5 & CSS3