HTML5... La révolution maintenant!

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
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)
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
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
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
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
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 & 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>
Canvas
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 à
Pourquoi faut il y aller ? 2 – HTML5 vise un maximum d’intéropérabilité
Pourquoi faut il y aller ? 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)
Questions

Check these out next

HTML5... La révolution maintenant!

Recommandé

Contenu connexe

Présentations pour vous(20)

En vedette(6)

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

Plus de CARA_Lyon(8)

Dernier(20)

HTML5... La révolution maintenant!