HTML5... La révolution maintenant!

La révolution HTML5

DUVAL Alain Twitter : @aduval93
Directeur Technique Objectif Blog : http://www.objectif-informatique.fr/weblog
Email : aduval@objectif-informatique.fr
BEURTHERET Cédric Twitter : @cbe317
Responsable Java Objectif Blog : http://www.objectif-informatique.fr/weblog
Email : cbeurtheret@objectif-informatique.fr

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

Mainframe
Html1
Html4
Xml

Ajax
Reprise
Des travaux
Client / Serveur HTML

Css

1960 1990 1993 1996 1998 2004 2009

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é
http://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo

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

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('#myform
input[type="radio"]:checked')
//selects the checked radio button within "#myform"

Formulaires
 Nouveaux inputs

<input id="email" name="email" type="email"
placeholder="example@domain.com" required />

 Nouveaux attributs

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

 Mécanisme de validation client
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

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

 Db Storage: Création base

db = openDatabase("maBaseDeDonnees", "1.0", "Ex de bdd avec
HTML5", 200000);

 Db Storage: Exécution ordre SQL
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
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
 Appelant
window.postMessage(“Hello, world”, “portal.example.com”);

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

function messageHandler(e) {
if(checkWhiteList(e.origin)) {
processMessage(e.data);
} else {
// ignore messages from unrecognized origins
}
}

Web Workers
 Lancement de tâche de fond
worker = new Worker("echoWorker.js");

 Communication avec le worker
worker.postMessage(‘test’);
c
 Fin du worker
worker.terminate();

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_japa
n.webm" controls="controls" ></video>

Mais aussi…
 Web sockets
 Speech Input
 Mode déconnecté
 Microdata
 Device API
 File API

Révolutionnaire!
 Browser as a platform

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

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

Adoption
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
Cross Window Messaging
Web sockets Non
Server Sent Events Non Non
Drag-Drop Non
Codec Vidéo H264, WebM WebM, Ogg Mpeg, H264 H264, Ogg WebM, Ogg
Theora Theora, WebM Theora
Codec Audio Mp3, AAC, Pcm, Ogg Pcm, Mp3, Pcm, Mp3, Pcm, Ogg
WebM Vorbis, WebM AAC AAC, Ogg Vorbis, WebM
Vorbis, WebM

http://www.html5test.com/

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

Tablet PC

Internet
Tablet PC Network
3G Edge

Tablet PC AS/400
TOMCAT DB2/400
SQL SERVER
CHROME
GWT 2 + HTML 5

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)

HTML5... La révolution maintenant!

Recommandé

Recommandé

Contenu connexe

Tendances

Tendances (20)

En vedette

En vedette (6)

Similaire à HTML5... La révolution maintenant!

Similaire à HTML5... La révolution maintenant! (20)

Plus de CARA_Lyon

Plus de CARA_Lyon (8)

HTML5... La révolution maintenant!