HTML5 Tutorial

Michel Buffa
April 2012

Home of this tutorial :

Twitter: use #html5tutorial and #www2012

Labs exercices:

  • A "discovery path": small interactive examples on
  • A "geek path": full multi-participant Paint program

This presentation focuses on some aspects of HTML5, see for example for a complete overview.


Minimal HTML5 document

A minimal HTML5 document

<!-- Wow ! -->
<!doctype html>
<html lang="fr">

  <meta charset="utf-8">
  <title>Page title</title>
  <!-- Notice the rel attribute ! -->
  <link rel="stylesheet" href="style.css"> 
  <!-- Notice : no attribute type= -->
  <script src="script.js"></script> 

   <!-- Some content -->

HTML5 forms

Forms : almost nothing new since 1997 !

HTML5 adds 13 new form types : email, tel, color, url, date, datetime, datetime-local, month, week, time, range, number, search.

Built-in validation system

New elements <dataset> for autocompletion, <output> for feedback, etc.

Other goodies...

<input type="email"/>

<input type="email"/>					
<input type="email" multiple value="," required/>

In my browser :

Works with pseudo CSS classes :required :optional :invalid

Default styling for valid/invalid input in some web browsers.

Attributes required, optional (default)

With :
<input type="email" required/>

Invalid input implies that the CSS class :invalid is set.

Keyboard input :

Submission time :

Try this example !

Other input fields

<input type="number" name="quantity" min="1" max="5" />

In my browser :

In Opera, Webkit :

<input type="range" name="n" min="1" max="10"/>

In my browser :

In Opera, Webkit :

<input type="tel"  placeholder="(555) 555-5555"

In my browser :

<input type="url" name="homepage"/>

In my browser :

<input id="mysearch2" type="search" placeholder="search"/>

In my browser :

<input type="text" x-webkit-speech name="search_value"/>

In my browser :

Mix of <input type=range>, <output> and <meter> elements

<meter value=75 min=0 max=100 low=20 high=98>75%</meter>

Grades: 75%

<meter min=50 max=200 low=90 high=119 optimum=100></meter>

Blood Pressure: 125


Geolocation example

Geolocation: a few lines of code !

var displayCoords=document.getElementById("msg");

function getLocation() {
  if (navigator.geolocation) {
  } else {
    displayCoords.innerHTML="Geolocation API not supported !";

function showPosition(position) {
  displayCoords.innerHTML="Latitude: " + position.coords.latitude +
"<br />Longitude: " + position.coords.longitude;
Drawing, painting, gaming... the <canvas> element !

Drawing, painting, gaming... the <canvas> element !

Basic usage

<canvas id="myCanvas">Canvas not supported.</canvas>

<script type="text/javascript">
  var canvas=document.querySelector('#myCanvas1');
  var ctx=canvas.getContext('2d');
Your browser does not support the canvas tag.

See source of above canvas code...

Canvas Pixel manipulation

// Create a pixel Array
var imageData = context.createImageData(width, height);
// Or grab canvas content as pixels
var imageData2 = context.getImageData(x, y, width, height);
// do something with the data
// modify canvas content
context.putImageData(imageData, 0, 0);

Good usage : the Pixtatic JavaScript library...

Canvas and images...

var imageObj = new Image();

imageObj.onload = function(){
  context.drawImage(imageObj, destX, destY);
  // draw full image but change size
  context.drawImage(imageObj, destX, destY, width, height);
  // Draw subpart of source + resize
  context.drawImage(imageObj,sourceX, sourceY, sourceW,sourceH,
                    destX, destY, destW, destH);


imageObj.src = "darth-vader.jpg";


Multimedia : the <video> element


Multimedia, No more of this !

<object width="425" height="344">
    <param name="movie"
    <param name="allowFullScreen" value="true"></param>
    <param name="allowscriptaccess" value="always"></param>
    <embed src=""
           type="application/x-shockwave-flash" allowscriptaccess="always"
           width="425" height="344">

The HTML5 <video> tag !

<video controls autoplay>
    <source src=video.webm type=video/webm>
    <source src=video.ogg type=video/ogg>
    <source src=video.mp4 type=video/mp4>

Canvas and video

context.drawImage() can take another canvas as first parameter!

Can take a video element also ! Demo!

<video id="videoTest" width="400" controls>
    <source src="video.webm" type="video/webm"/>
<canvas  width="400" height="300"></canvas>

    var video = document.getElementById('videoTest');
    var canvas = document.querySelector('canvas');
    var ctx = canvas.getContext('2d');

    // Draws current image from the video element into the canvas
    ctx.drawImage(video, 0,0, canvas.width, canvas.height);

<video> tag is a pure DOM element, can apply CSS3 transitions...

  video {
    width: 100px;
    transition: all 0.5s ease-in-out;

  video:hover, video:focus {
    width: 600px;
    transform: rotate(45deg);

Special effects : canvas + video + 2D transformations

Special effects : video incrustation

Principle :

  • Draw video frames in an offscreen canvas,
  • take pixels from video 2 only if not green,
  • else take same pixel but from video 1,
  • draw result in a output canvas.

See also this demo (FF)

Live video capture : the getUserMedia API

getUsermedia, a few line of codes

<video id="output" autoplay autoplay>Fallback msg here.</video>
  function onSuccess(stream) {
     var output = document.getElementById('output').src = stream;

  function onError() {
     // getUserMedia API not supported, or another application is using the webcam !

  if (navigator.getUserMedia) {
     navigator.getUserMedia('video', onSuccess, onError);

A bit more complicated today (vendor specifics)

Sound, the <audio> element!

Sound, the <audio> element!

<audio controls="controls">
    <source src=""
             type="audio/ogg" />
    <source src=""
             type="audio/mp3" />
    Your browser does not support the audio element.
Loading, processing, generating sound: Web Audio API

Web Audio API (Chrome latest version)

 try {
   var context = new webkitAudioContext();
 catch(e) {
   alert('Web Audio API is not supported in this browser');

Sound samples must be loaded in RAM before use,

Games, music editing, sequencers, real time processing, synthetizers,

Graph model for processing sound in real time, connect filters, etc.

Load a sound sample

var dogBarkingBuffer = null;
var context = new webkitAudioContext();

function loadDogSound(url) {
 var request = new XMLHttpRequest();'GET', url, true);
 request.responseType = 'arraybuffer';

 // Decode asynchronously
 request.onload = function() {
   context.decodeAudioData(request.response, function(buffer) {
     dogBarkingBuffer = buffer;
   }, onError);

Then build a graph to play the sound from buffer

                    var context = new webkitAudioContext();
function playSound(buffer) {
// create sound source
  var source = context.createBufferSource();
// What to play, an audio buffer
  source.buffer = buffer;
// connect source to desination (speakers in that case)
// Play the sound

Buffer can be processed in real time by applying node filters between source and destination

// Create the filter
var filter = context.createBiquadFilter();
// Create the audio graph.
// Create and specify parameters for the low-pass filter.
filter.type = 0; // Low-pass filter. See BiquadFilterNode docs
filter.frequency.value = 440; // Set cutoff to 440 HZ
// Playback the sound.

Generate sounds

var context = new webkitAudioContext();

// Create a source node with 1024, the number of samples to generate
// on each call. 0, our node has NO INPUTS as far as we just want to generate sound
// 2 for stereo...
var node = context.createJavaScriptNode(1024, 0, 2);

// Specify the audio generation function
node.onaudioprocess = generateAudio;

// Connect the node to a destination, i.e. the audio output.

Complete source code

Sound generator application from demos...



Real time, full duplex communications, before HTML5

Ajax / Long Polling (Comet)

HTTP overhead: headers sent for each request/response

HTML5 WebSockets

Full duplex, bidirectional realtime communication channel,

Share HTTP ports used by HTTP serve

Traverse firewalls

Keep the connection open

Adds only 2 bytes per frame (data between 0x00 and 0xFF)

Data encoded in UTF-8 (no binary!)

Bye bye Flash Sockets!

Connexion: HTTP handshake

The WebSocket API

var ws = new WebSocket("ws://host:port");

ws.onopen = function(evt) { alert("Connection open!"); };

ws.onmessage = function(evt) { alert( "Received message: " +; };

ws.onclose = function(evt) { alert("Connection closed."); };

ws.onerror = function(evt) { alert("WebSocket error : " + };



Tutorial will use: NodeJS + + NowJS (JavaScipt)

  • Module for NodeJS, very popular,
  • Fallbacks if WebSockets not supported (Flash Sockets, Comet, Ajax...),
  • Handle deconnexions/reconnexions


  • Built on top of
  • Distributed JavaScript objects
  • Sessions and group management: great for multiplayer applications/games

A chat application with nowJS

Client code:

now.receiveMessage = function(name, message){
   alert("msg from" + name + ": " + message);

}); = prompt("What's your name?", "");

Server code: = function(message){, message);

Some demos

Another demo (see video on youtube for link to sources) for local LAN play