Téléchargé 45 fois
![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"](https://image.slidesharecdn.com/alainduvalmixithtml5-110527073932-phpapp02/75/HTML5-La-revolution-maintenant-12-2048.jpg)
![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])
});](https://image.slidesharecdn.com/alainduvalmixithtml5-110527073932-phpapp02/75/HTML5-La-revolution-maintenant-16-2048.jpg)
Contenu connexe
Similaire à HTML5... La révolution maintenant!
HTML5... La révolution maintenant!
- 1. La révolution HTML5 DUVALAlain Twitter : @aduval93 Directeur Technique Objectif Blog : http://www.objectif-informatique.fr/weblog Email : [email protected] BEURTHERET Cédric Twitter : @cbe317 Responsable Java Objectif Blog : http://www.objectif-informatique.fr/weblog Email : [email protected]
- 2. Agenda Genèse &Principes fondateurs Nouveautés Révolution! Retour d’expérience projet
- 3. Présentation de lasocié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!
- 4. Genèse Mainframe Html1 Html4 Xml Ajax Reprise Des travaux Client / Serveur HTML Css 1960 1990 1993 1996 1998 2004 2009
- 5. Principes fondateurs 1 - Simplicité http://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo
- 6. Principes fondateurs 2 - Compatibilité http://www.masternewmedia.org/browser-compatibility-testing-guide-the-best-tools-and-services/
- 7. Principes fondateurs 3 - Utilité http://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo
- 8. Révolution ? « toutchangement ou innovation qui bouleverse l'ordre établi de façon radicale dans un domaine quelconque » (wikipedia)
- 9. HTML 5 ? Sémantique +CSS 3 + API Javascript + WebGL + SVG = HTML 5
- 10. 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">
- 11.
- 12. 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"
- 13.
- 14. Formulaires Nouveaux inputs <input id="email" name="email" type="email" placeholder="[email protected]" 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) … }
- 15. Storage Valeur enSessionStorage × 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
- 16. 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]) });
- 17.
- 18. 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){ … }
- 19.
- 20. 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 } }
- 21.
- 22. Web Workers Lancementde tâche de fond worker = new Worker("echoWorker.js"); Communication avec le worker worker.postMessage(‘test’); c Fin du worker worker.terminate();
- 23.
- 24. 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>
- 25.
- 26. Mais aussi… Websockets Speech Input Mode déconnecté Microdata Device API File API
- 27. Révolutionnaire! Browser asa platform http://www.barbafan.de/html5video?video=tron http://www.somethinghitme.com/projects/canvasinvaders/
- 28. Révolutionnaire! HTML5 =Le java « mobile » × Write Once, Run everywhere OpenAppMkt = Market HTML5 Mobile
- 29. Pourquoi faut ily aller ? 1 - C’est un standard ouvert… … qui va faire mal à
- 30. Pourquoi faut ily aller ? 2 – HTML5 vise un maximum d’intéropérabilité
- 31. Pourquoi faut ily aller ? 3 – Le monde pousse sur HTML 5
- 32. 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/
- 33. Des projets avecHTML5 ? … 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
- 34. 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)
- 35. 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)
- 36.