HTML5

Massimo Martinelli / massimo@w3c.it / @massimowww
W3C Office in Italy, Area della Ricerca CNR - via Moruzzi, 1 - 56124 Pisa

HTML5

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

Creative Commons Attribution 3.0 License BY-NC-ND

HTML5

Markup Language basis of the
new Web
what W3C identifies with "One Web for All"

html5 logo

  • Interoperability
  • Etherogeneous devices
  • A more attractive, interactive & smart Web
  • Open Web Platform

The standardization process - Recommendation Track

Requires a series of steps, in cooperation between members and entire W3C Web community

  • Working Draft
  • Last Call Working Draft
  • Candidate Recommendation (HTML5 now)
    certifies the specification reached a stable status
    beginning of a phase of tests to verify implementability & interoperability
    to be produced at least two implementations on two different platforms that are interoperable
    will evolve (small changes) to the state of Recommendation
  • Proposed Recommendation
  • Recommendation: 2014

 

HTML5 usage

Recommendation: will be published on 2014

Can I use HTML5 since now?

YES I CAN!

(with some exceptions...)

Yes i can, with some exceptions

This presentation is made with HTML5

It uses Web fonts

WebGL graphics

and other elements introduced with the latest version of the language...

 

HTML5 Powered with Connectivity / Realtime, CSS3 / Styling, Device Access, Graphics, 3D & Effects, Multimedia, Performance & Integration, Semantics, and Offline & Storage

Where HTML5 is used?

 

OPEN WEB PLATFORM

 

I've seen the  F U T U R E

It's in my

Access to devices

Devices API

  • Application Registration
  • Battery
  • Beep
  • Calendar
  • Touch
  • Contacts
  • Gallery
  • Generic sensor
  • Media
  • Menu
  • Messages (sms, mms, ...)
  • Notification
  • Network Information
  • Tasks
  • Vibration

Memorandum

contradictory signs
  • Most of Web pages
    are not 100% compatible with W3C recommendation
  • As if reading a book could find phrases like
    "gin t; lbrar t rd, boo"
  • User-agent must must provide for exceptions
    more code to interpret errors and display the displayable
  • More than half of users may have trouble to consult the Web
    (without regard to automated systems)
  • Tip: always write in XHTML(1...5...n) (HTML5 polyglot valid HTML & well-formed XML)
  • Let's see some (X)HTML5 novelty ...

HTML 5: main novelties #1

  • new elements to structure content
  • new form controls and new form input elements
  • file/hardware access: greater integration with the operating system
  • extension of accessibility attributes to all the HTML5 elements
  • graphics: a new "canvas" supports javascript for animations, broad support for fine-grained screen controls and animation, improved support for SVG

HTML 5: main novelties #2

  • media: native support, simplification and strengthening of audio and video management
  • access to sensors of the computer / handheld
  • local storage: persistent or browser session storage (improvements vs cookies)
  • local database: Web Storage
  • full-duplex bi-directional communication channels (Web Sockets)
  • Web workers (background and parallel scripts)

HTML5: an example of document

<!DOCTYPE html>  <!-- simplified declaration -->
<html lang="en">  <!-- language declaration -->
  <head>
    <title>HTML5</title>
    <meta charset="utf-8" />  <!-- unicode character set -->
  </head>
<body>
  <p>Hello world!</p>
</body>
<html>

New structural elements

W3C Specification

The article element represents a component of a page that consists of a self-contained composition in a document, page, application, or site and that is intended to be independently distributable or reusable, e.g. in syndication.
This could be a forum post, a magazine or newspaper article, a blog entry, a user-submitted comment, an interactive widget or gadget, or any other independent item of content


The section element represents a generic document or application section…
is not a generic container element.
When an element is needed only for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Think about a newspaper: sport section, subsection with an article and related photos

 

Web Authoring Statistics: Classes

HTML5 file system API

ability to read and write to a sandboxed (safe and protected) local file system

A FileEntry contains types of properties & methods expected from a standard filesystem.

// create and access to a sandboxed filesystem
window.requestFileSystem(window.PERSISTENT /* window.TEMPORARY */, 5*1024*1024 /* size in MegaBytes */, 
	function(filesystem) { fs = filesystem;})
	
// creates a file in the filesystem
fs.root.getFile('log.txt', {create: true, exclusive: true /* error if already exists */}, 
	  

// Create a FileWriter object for our FileEntry (e.g.: log.txt)
fileEntry.createWriter(
	// write a new Blob object into the file
	fileWriter.write(new Blob(['Lorem Ipsum'], {type: 'text/plain'})
); 

// other methods for a fileEntry
remove, copyTo, moveTo

// properties of a a fileEntry
isFile: True if a file
isDirectory: True if a directory

HTML5 file system API

(Chrome)

from Eric Bidelman (html5rocks), author of the book "Using the HTML5 Filesystem API"

SVG2

<DOCTYPE html><html>
... <!-- SVG inline in HTML5 -->
<svg width="12cm" height="4cm" viewBox="0 0 800 400">
  <desc>Example circle01 - circle filled with red and stroked with blue</desc>
  <circle cx="600" cy="200" r="100" fill="red" stroke="blue" stroke-width="10"  />
</svg>
<rect x="1" y="1" width="448" height="198" fill="none" stroke="blue" stroke-width="2"/>
<g transform="translate(50,150)" fill="red" font-size="7">
  <text id="TextElement">SVG2</text>
</g>
...
<animateMotion path="M 0 0 L 100 100" begin="1s" dur="5s" fill="freeze" />
<animateColor attributeName="fill" from="red" to="blue" begin="1s" dur="5s" fill="freeze" />
</svg></body></html>
HTML5 Logo Badge

canvas

  • A <canvas> element provides scripts with a resolution-dependent bitmap canvas
  • Can be used for rendering graphs, game graphics, or other visual images on the fly
  • Provides objects, methods, and properties to draw and manipulate graphics on a canvas drawing surface
  • Dynamic, scriptable rendering of 2D shapes & raster graphics (bitmap) images
<canvas id="myCanvas" width="300" height="200"> </canvas>
<script>var canvas = document.getElementById('myCanvas');
var ctx = canvas.getContext('2d'); // 'webgl' = 3d
ctx.fillStyle = "rgb(255,0,0)";
ctx.fillRect(200,100,50,50);
ctx.fillStyle = "rgba(0, 0, 200, 0.3)";
ctx.fillRect (230, 40, 55, 50);
ctx.arc(75, 150, 20, 0, Math.PI*2, true);
ctx.arc(175, 150, 20, 0, Math.PI, true);
ctx.fill();</script>

SVG vs Canvas

SVG

  • 2D Vectorial
  • XML format
  • Resolution-independent Web application user interfaces
  • preferable for drawings of large size
  • Highly interactive animated user interfaces
  • Data charts and plots
  • Vector image editing

Canvas

  • 2D bitmap
  • javascript
  • Resolution-dependent Web application user interfaces
  • faster than svg, preferable for intensive graphic work
  • Interactive image editing: cropping, resizing, filters (think red eye removal, sepia, colorize, etc.)
  • Generating raster graphics: data visualizations, data plots, rendering fractals, function plots
  • Image analysis: read pixels to gather data for histograms, color usage, and anything else you can imagine
  • Rendering game graphics, such as sprites and backgrounds

WebGL - Native 3D

  • WebGL (Web Graphics Library): JavaScript API for rendering interactive 2D & 3D graphics
  • Based on OpenGL ES 2.0
  • NO plug-ins, integrated into browser allowing GPU accelerated usage of physics and image processing and effects
  • Helloracer: works with browser supporting WebGL only

the rotating cube with the HTML5 logo in the first slide is a WebGL example

WebGL

Video

newspaper of 1962 talking about phones

Video

No plugins needed to include media: native support, implemented by browsers

<video id='myvideo' controls='controls'>
   <source src="filmato1.ogg" type="video/ogg" />
   <source src="filmato2.mp4" type='video/mp4; codecs="mp4v.20.240, mp4a.40.2"' />
 Your browser does not support the video tag You can download the video at the following address …
</video>
var v = document.getElementsByTagName("video")[0];
v.play();

<button onclick="document.getElementById('myvideo').play()">play</button>
<button onclick="document.getElementById('myvideo').pause()">pause</button>

simplification & improvement compared to the previous recommendations

audio

<audio id='myaudio' controls='true' autoplay='true' loop='true'> // preload='none | metadata | auto'
  <source src='RAI70-GuglielmoTell-Rossini.ogg#t=6,40' type='audio/ogg; codecs=vorbis' />
  <source src='RAI70-GuglielmoTell-Rossini.mp3#t=6,40' type='audio/mpeg' />
  Yuor browser does not support the audio tag
</audio>


var myaudio = document.getElementById('myaudio');
myaudio.seekable.start();  // Returns the starting time (in seconds)
myaudio.seekable.end();    // Returns the ending time (in seconds)
myaudio.currentTime = 122; // Seek to 122 seconds
myaudio.played.end();      // Returns the number of seconds the browser has played


<button onclick="document.getElementById('myaudio').play()">play</button>
<button onclick="document.getElementById('myaudio').pause()">pause</button>
<button onclick="document.getElementById('myaudio').volume+=0.1">increase volume</button>
<button onclick="document.getElementById('myaudio').volume-=0.1">decrease volume</button>

Web audio

Audio API

Video & Audio Formats

It would be helpful for interoperability if all browsers could support the same codecs.
However, there are no known codecs that satisfy all the current players:
we need a codec that is known to not require per-unit or per-distributor licensing, that is compatible with the open source development model,
that is of sufficient quality as to be usable,
and that is not an additional submarine patent risk for large companies.
This is an ongoing issue and this section will be updated once more information is available.

the state of HTML5 video

Media Capture and Streams

  • Definition of a set of JavaScript APIs that allow local media, including audio and video, to be requested from a platform
  • Access to multimedia streams (video, audio, or both) from local devices (video cameras, microphones, Web cams) can have a number of uses, such as real-time communication, recording, and surveillance
  • Defines the APIs used to get access to local devices that can generate multimedia stream data
  • Defines the stream API by which JavaScript is able to manipulate the stream data or otherwise process it
  • Example: the Opera Mobile example shown initially

WebRTC - Real Time Communication

WebRTC

HTML5 & WebRTC

FaceKat that is: gesture-based control by head tracking

head tracking example

 

Head tracking with WebRTC article by Opera

headtrackr javascript library

another head tracking demo

magix xylofon example

object detection article & demos

Face detection (Works with WebRTC compatible browsers)

Video processing

Local storage

  • new method to store information
  • bandwidth/speed & security advantages compared to cookies:
    each cookie is posted forward and backward for each request and for each file included (html,image,css, javascript,...)
    a request may take several seconds, is accessible to pages on any servers in a domain/subdomain.
  • Local storage provides in general (up to 5MB depending on browser) of persistent storage of data (or session browser if specified session Storage)
  • information stored using local storage cannot be accessed from a different host
<script>
localStorage.setItem('name', 'Hello world!'); // store in the local db the couple key/value
document.write(localStorage.getItem('name')); // Hello world
localStorage.removeItem('name'); // delete the corresponding voice from the local db
</script>

IndexedDB

For who needs structured information and more space

  • NoSQL db type
  • Javascript Native storage
  • DB of records holding simple values and hierarchical objects
  • Each record consists of a key-value pair
  • DB maintains indexes over records it stores
  • Records located either by key or by index
  • Asynchronous usage: operations are always transactions since access can be done from different pages at the same time
  • Capability of storing blob objects
  • A DB created from a page cannot be accessed by another host (for security)

IndexedDB Example #1

var request = indexedDB.open(dbName); // // create a database
request.onsuccess = function(event) {   // success handler of request
  // handle result
};
					
request.onerror = function(event) {   // error handler of request
  alert("DB error: " + event.target.errorCode); 
};


request.onupgradeneeded = function(event) { //  needed to modify the structure of a DB. Here we can create/delete object stores, build/remove indices
  var myDB = event.target.result;

  // create the object stores   (a table in SQL)
  var personStore = myDB.createObjectStore("Person", {keyPath: "id"}); 

  // create an index to search persons by email, no duplicates 
  personStore.createIndex("emailIndex", "email", { unique: true });

  // create a transaction & store a record
  var transaction = indexedDB.transaction("Person", "readwrite");
  var store = transaction.objectStore("Person");
  store.put({"id": "I2", "given_name" : "Anna", "family_name" : "Bianchi","email" : "anna.bianchi@w3c.it",... });
  …

IndexedDB Example #2

store.get("I3") // get a record by ID

  // get a record by Name
  var range = IDBKeyRange.only("Massimo");
  var index = store.index("givennameIndex");
  index.get(range)

  // using a cursor to get the first four records by descending order
  personStore.openCursor(IDBKeyRange.bound(0, 5, true, false),"prev").onsuccess = function(event) {
    var cursor = event.target.result;
    if (cursor) { 
      alert("Key: " + cursor.key + " value: " + cursor.value.name);
      cursor.continue();
    }
    else {
      alert("No more entries!");
    }
  };
	
  store.clear() // delete the store
  myDB.deleteDatabase(dbName); // delete a database
  …
}

IndexedDB Example

Example, slightly modified from "Using the HTML5 IndexedDB API" by Brian J Stewart, IBM DeveloperWorks

WebSQL

  • Included in a 1st draft of HTML5, now removed in favour of indexedDB
  • http://lists.w3.org/Archives/Public/www-tag/2013Feb/0003.html
  • "Beware. This specification is no longer in active maintenance and the WebApplications Working Group does not intend to maintain it further"
  • Even if most browsers start implemented it and they still have, but they are all saying to use it with extreme caution!
var db = openDatabase('dbregistry', '1.0', 'registry database', 2 * 1024 * 1024);
  db.transaction(function (tx) {
  tx.executeSql('CREATE TABLE IF NOT EXISTS users (id integer primary key, name text)');
  tx.executeSql('INSERT INTO users (id, name) VALUES (1, "Giuseppe Verdi")');
  tx.executeSql('INSERT INTO users (id, name) VALUES (2, "Anna Bianchi")');
  tx.executeSql('INSERT INTO users (id, name) VALUES (3, "Mario Rossi")');
});

Web SQL Database Demo (Chrome or Opera)

Registration is offline type (data remain even after page reloading)

Using Chrome's Developer Tools (Command-Option/Shift-J), you can see the contents of the DB

Geolocation

<script>
function getPosition(position){
  var lat = position.coords.latitude;
  var long = position.coords.longitude;
  var altezza = position.coords.altitude;
}
if local doesn't work with Chrome

 

 

 

Example with map

Form

-

-

-

-

(not a form element)

See it with Opera Mobile!

Form

<form>
  <p><label>url:<input type="url" /></label></p>
  <p><label>email:<input type="email" /></label></p>
  <p><label>number:<input type="number" min="0" max="10" step="2" value="6" /></label></p>
  <p><label>range:<input type="range" min="0" max="10" step="2" value="6" /></label></p>
  <p><label>date:<input type="date" /></label></p>
  <p><label>month:<input type="month"></label></p>
  <p><label>week:<input type="week"></label></p>
  <p><label>time:<input type="time"></label></p>
  <p><label>datetime:<input type="datetime"></label></p>
  <p><label>color:<input type="color"></label></p>
  <p><label>required:<input required name="req"></label></p>
  <p><label>range<input type="range" id="rangeinput" value="50" min="0" max="100" step="5" onchange="rangevalue.value=value"/></label> <output id="rangevalue">50</output> (output: result of a calculation)></p>
  <p><label>pattern: <input type="text" pattern="[A-z]{3}.[0-9]{2}-[A-z]{1,}" placeholder="Abc.12.Bxxxxxx-" /></label></p>
  <p><label>tel: <input type="tel" placeholder="phone" /></label></p>
  <p><label>search: <input type="search" placeholder="search" /></label></p>
  <p><label>datalist:<input list="cities" name="cities" > <em>(autocomplete)</em>
  <datalist id="cities">
	<option value="Arezzo"> <option value="Firenze">  <option value="Livorno"> <option value="Pisa">
  </datalist></label></p>
  <p><input type="submit" value="Go"></p>
</form>
<progress max="1000"></progress>

Web Workers

  • Javascript programs running in background independently
  • A javascript is passed to a Worker constructor
  • The worker sends back information via a 'postMessage' method, this event can be be listened using the 'onmessage' method
var worker = new Worker('code_we_want_to_run_in_background.js');
worker.onmessage = function(event) {  
 console.log('Worker message: ' + event.data);  
};

Prime numbers example (Firefox)

Web Socket

  • New full-duplex communication protocol, can remain permanently active
  • Enables exchange of information between client & server (no need that the client has made ​​requests)
  • Initially connection requires an exchange via HTTP, after it goes through the new protocol
  • Request starts from the client: client gets information and then closes
  • Connections with other protocols (eg, SMTP / FTP / ...) are not allowed from WebSocket

Web Socket

<!DOCTYPE html>
<html>
    <head>
        <script type='text/javascript'>
            var ws = new WebSocket('ws://localhost:8080/TomcatWebSockets/testWebSocket');
            ws.onmessage = function (message) {
                console.log("message received : " + message.data);
                var messages = document.getElementById('messages');
                messages.innerHTML += "<br>[in] " + message.data;
            };


            ws.onopen = function() {
                console.log("Websocket Ready!!");
                //sendMessage();
            };


            ws.onerror = function (error) {
                console.log('WebSocket Error ' + error);
            };


            sendmsg = function() {
                var message = document.getElementById('message_to_send').value
                document.getElementById('message_to_send').value = ''
                ws.send(message);
                console.log("message sent");
                var messages = document.getElementById('messages');
                messages.innerHTML += "<br>[out] " + message;
            };
        </script>
    </head>
    <body>
        <form action="javascript:sendmsg()">
            <input type="text" id="message_to_send" name="msg"/>
            <input type="button" name="btn" id="sendMsg" value="Send" onclick="javascript:sendmsg();">
            <div id="messages"></div>
        </form>
    </body>
</html>
see TomcatWebSockets (netbeans) example

Push API (Server Sent Events)

Server pushes information to the browsers


// javascript
var source = new EventSource('http://localhost:8080/ServerSideEvents/SSE');  
// register an SSE

source.onmessage=function(event){ // where a message arrives
 	document.getElementById("result").innerHTML=event.data;   // show it
}

public class SSE extends HttpServlet {
public void doPost(HttpServletRequest request, HttpServletResponse response){
response.setContentType("text/event-stream");
PrintWriter pw = response.getWriter();
pw.write(information_i_want_to_push + "\n\n");
pw.close();
}

see ServerSentEvents (netbeans) example

Examples

It does not end here!

More APIs

  • Fullscreen (expand the page to fill all the screen)
  • Screen Orientation
  • Server-Sent
  • Motion Sensors (Accelerometer, Gyroscope, Magnetometer)
  • HTML5 Form Virtual Keyboards
  • XMLHttpRequest 2.0
  • Navigation Timing
  • Network Information
  • Media Capture API
  • Remote Debugger API
  • History
  • ...
  • Towards an Open Web Platform!

Use HTML5

  • an open standard
  • one language to codify an app once that runs on different platforms
    (desktop / tablet / mobile / tv / car / …)

Einstein and HTML5

Join and participate in W3C in order to develop a Web for All!

Thanks for your attention

Thanks to Oreste & the W3C Italy team for the support

Questions?


If it is not on the Web

...you will find the slides at http://www.w3c.it/events/2013/css3html5/slides/massimo/

Open the presentation set the style for printing in PDF