HTML5... La révolution maintenant!
-
Upload
caralyon -
Category
Technology
-
view
1.335 -
download
1
description
Transcript of 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
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
Principes fondateurs
2 - Compatibilité
http://www.masternewmedia.org/browser-compatibility-testing-guide-the-best-tools-and-services/
Principes fondateurs
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)
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: 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 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
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
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 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>
Révolutionnaire!
Browser as a platform
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
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, 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)