HTML5... La révolution maintenant!

La révolution HTML5

BEURTHERET CédricResponsable Java ObjectifEmail : [email protected]

Twitter : @cbe317Blog : http://www.objectif-informatique.fr/weblog

DUVAL AlainDirecteur Technique ObjectifEmail : [email protected]

Twitter : @aduval93Blog : http://www.objectif-informatique.fr/weblog

Agenda

Genèse & Principes fondateurs

Nouveautés

Révolution!

Retour d’expérience projet

Présentation de la société

OBJECTIF

× Spécialiste de l’ingénierie projet JAVA EE

× 60 collaborateurs

× Grand Compte Banque / Assurance

× Sponsor Paris Jug

× Offre Android, Gwt, Software Factory, Performance

On recrute

× Des gens comme vous!

Genèse

1960 1990 1993 1998 2004 20091996

Html1

Client / Serveur

Mainframe

Css

Html4 Xml

Ajax

RepriseDes travaux

HTML

Principes fondateurs

1 - Simplicité

http://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo



2 - Compatibilité

http://www.masternewmedia.org/browser-compatibility-testing-guide-the-best-tools-and-services/



















3 - Utilité


Révolution ?

« tout changement ou innovation qui bouleverse l'ordre établi de façon radicale dans un domaine quelconque » (wikipedia)

http://fr.wikipedia.org/wiki/Changement

http://fr.wikipedia.org/wiki/Innovation

HTML 5 ?

Sémantique

+CSS 3

+ API Javascript

+ WebGL

+ SVG

= HTML 5

Sémantique: Déclaration simplifiée

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN http://www.w3.org/TR/html4/loose.dtd

<!DOCTYPE html>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8">

<meta charset="utf-8">

Sémantique: Structure standard

Sémantique: Nouveaux sélecteurs

querySelector & querySelectorAll

Retourne des le (les) élement(s) matchant avec une règle type CSS

document.querySelector('#myheader')

//returns the element with ID=myheader

document.querySelector('#myforminput[type="radio"]:checked')

//selects the checked radio button within "#myform"

Formulaires

Formulaires Nouveaux inputs

Nouveaux attributs

Mécanisme de validation client

<input id="email" name="email" type="email" placeholder="[email protected]" required />

<input type="range" min="1" max="99" name="slider1"> Value: <output id="age" onformchange="this.value = form.slider1.value"></output>

validateData(document.querySelector("#email"))

function validateData (elt) {var valCheck = elt.validity;if (valCheck.valid==true) …

}

Storage

Valeur en SessionStorage

× Persistance: Durée de vie de la fenêtre/onglet

× Visibilité: Limitée à la fenêtre/onglet de création

Valeur en LocalStorage

× Persistance: Durée de vie du navigateur

× Visibilité: Toutes les fenêtres & onglets

Valeur en DBStorage (WebSqlDb ou IndexedDb)

× Persistance: Jusqu’à suppression explicite

× Visibilité: Toutes les fenêtres & onglets

Storage Session Storage: Get / Set de valeur

Db Storage: Création base

Db Storage: Exécution ordre SQL

window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);

window.sessionStorage.getItem(‘myFirstKey’);

db = openDatabase("maBaseDeDonnees", "1.0", "Ex de bdd avec

HTML5", 200000);

db.transaction(function (tx) {

tx.executeSql('CREATE TABLE IF NOT EXISTS foo (id unique, text)');

tx.executeSql('INSERT INTO foo (id, text) VALUES (1, "synergies")');

tx.executeSql('INSERT INTO foo (id, text) VALUES (?, ?)', [id, userValue])

});

Geolocation

Geolocation

navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError);

function updateLocation(position) {var latitude = position.coords.latitude;var longitude = position.coords.longitude;var accuracy = position.coords.accuracy;… // Afficher une map Google

}

function handleLocationError(error) {switch(error.code){…

}

Cross Window Messaging


window.postMessage(“Hello, world”, “portal.example.com”);

Appelant

Appeléwindow.addEventListener(“message”, messageHandler, true);

function messageHandler(e) {

if(checkWhiteList(e.origin)) {

processMessage(e.data);

} else {

// ignore messages from unrecognized origins

}

}

Web Workers

Web Workers

Fin du worker

worker = new Worker("echoWorker.js");

Lancement de tâche de fond

Communication avec le worker

cworker.postMessage(‘test’);

worker.terminate();

Audio & Vidéo

Audio & Vidéo

<audio id="audio" src="../public/sound.mp3" controls></audio>

<video id="video" width="400" height="200" src="http://slides.html5rocks.com/src/chrome_japan.webm" controls="controls" ></video>

Canvas

Mais aussi…

Web sockets

Speech Input

Mode déconnecté

Microdata

Device API

File API

Révolutionnaire!

Browser as a platform

http://www.somethinghitme.com/projects/canvasinvaders/http://www.barbafan.de/html5video?video=tron

http://www.somethinghitme.com/projects/canvasinvaders/

http://www.barbafan.de/html5video?video=tron

Révolutionnaire!

HTML5 = Le java « mobile »

× Write Once, Run everywhere

OpenAppMkt = Market HTML5 Mobile

Pourquoi faut il y aller ?

1 - C’est un standard ouvert…

… qui va faire mal à


2 – HTML5 vise un maximum d’intéropérabilité


3 – Le monde pousse sur HTML 5

IE 9 FIREFOX 4 SAFARI 5 CHROME 10 OPERA 11

Eléments HTML5

Canvas

SVG

Applications déconnectées Non

Stockage local

Base de données locale Non

Web workers Non

Géolocalisation


Web sockets Non

Server Sent Events Non Non

Drag-Drop Non

Codec Vidéo H264, WebM WebM, OggTheora

Mpeg, H264 H264, OggTheora, WebM

WebM, OggTheora

Codec Audio Mp3, AAC, WebM

Pcm, OggVorbis, WebM

Pcm, Mp3, AAC

Pcm, Mp3, AAC, Ogg

Vorbis, WebM

Pcm, OggVorbis, WebM

http://www.html5test.com/

Adoption



Des projets avec HTML5 ? … OUI Application de gestion de la relation client à usage des commerciaux

Application nomade devant supporter le mode déconnecté

Architecture 3 niveaux avec réplication de données

Web Worker + Local Storage + Cross Window Messaging

Internet3G Edge

Network

Tablet PC

Tablet PC

Tablet PC

CHROMEGWT 2 + HTML 5

TOMCATSQL SERVER

AS/400DB2/400

Bilan projet

Pré requis HTML5: Maîtrise du navigateur

Bénéfices

× Mode déconnecté

× Performance (- de roundtrip avec le serveur,

synchronisation en // avec le web worker)

× Modularité du code

Attention!

× Sécurité des données (cryptage)

Ressources

http://dev.w3.org/html5/spec/Overview.html

http://www.html5rocks.com

http://html5doctor.com

http://html5test.com

http://html5demos.com

http://www.chromeexperiments.com/

Pro HTML 5 Programming (P. Lubbers)

HTML 5 Up & Running (M. Pilgrim)

http://dev.w3.org/html5/spec/Overview.html

http://www.html5rocks.com/

http://html5doctor.com/

http://html5test.com/

http://html5demos.com/

http://www.chromeexperiments.com/

Questions

Technology

HTML5... La révolution maintenant!