La révolution HTML5DUVAL Alain                                    Twitter : @aduval93Directeur Technique Objectif         ...
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 Ba...
GenèseMainframe                             Html1                                             Html4                       ...
Principes fondateurs       1 - Simplicitéhttp://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5...
Principes fondateurs        2 - Compatibilitéhttp://www.masternewmedia.org/browser-compatibility-testing-guide-the-best-to...
Principes fondateurs       3 - Utilitéhttp://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5Wjv...
Révolution ?« tout changement ou innovation qui bouleverse lordre établi de façon radicale dans un domaine quelconque » (w...
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/...
Sémantique: Structure standard
Sémantique: Nouveaux sélecteurs querySelector & querySelectorAll Retourne des le (les) élement(s) matchant avec une  règ...
Formulaires
Formulaires   Nouveaux inputs    <input id="email" name="email" type="email"    placeholder="example@domain.com" required...
Storage Valeur en SessionStorage   × Persistance: Durée de vie de la fenêtre/onglet   × Visibilité: Limitée à la fenêtre/...
Storage   Session Storage: Get / Set de valeur    window.sessionStorage.setItem(‘myFirstKey’, ‘myFirstValue’);    window....
Geolocation
Geolocation navigator.geolocation.getCurrentPosition(updateLocation, handleLocationError); function updateLocation(positio...
Cross Window Messaging
Cross Window Messaging Appelant window.postMessage(“Hello, world”, “portal.example.com”); Appelé window.addEventListener...
Web Workers
Web Workers Lancement de tâche de fond worker = new Worker("echoWorker.js"); Communication avec le worker worker.postMes...
Audio & Vidéo
Audio & Vidéo <audio id="audio" src="../public/sound.mp3" controls></audio> <video id="video" width="400" height="200" src...
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/proje...
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 11Eléments HTML5Canvas...
Des projets avec HTML5 ? … OUI     Application de gestion de la relation client à usage des commerciaux     Application ...
Bilan projet Pré requis HTML5: Maîtrise du navigateur Bénéfices  × Mode déconnecté  × Performance (- de roundtrip avec l...
Ressources http://dev.w3.org/html5/spec/Overview.html http://www.html5rocks.com http://html5doctor.com http://html5tes...
Questions
Prochain SlideShare
Chargement dans…5
×

HTML5... La révolution maintenant!

1 536 vues

Publié le

Alain Duval & @Mix-IT 2011

Publié dans : Technologie, Design
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
1 536
Sur SlideShare
0
Issues des intégrations
0
Intégrations
3
Actions
Partages
0
Téléchargements
44
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML5... La révolution maintenant!

  1. 1. La révolution HTML5DUVAL Alain Twitter : @aduval93Directeur Technique Objectif Blog : http://www.objectif-informatique.fr/weblogEmail : aduval@objectif-informatique.frBEURTHERET Cédric Twitter : @cbe317Responsable Java Objectif Blog : http://www.objectif-informatique.fr/weblogEmail : cbeurtheret@objectif-informatique.fr
  2. 2. Agenda Genèse & Principes fondateurs Nouveautés Révolution! Retour d’expérience projet
  3. 3. 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!
  4. 4. GenèseMainframe Html1 Html4 Xml Ajax Reprise Des travaux Client / Serveur HTML Css 1960 1990 1993 1996 1998 2004 2009
  5. 5. Principes fondateurs 1 - Simplicitéhttp://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo
  6. 6. Principes fondateurs 2 - Compatibilitéhttp://www.masternewmedia.org/browser-compatibility-testing-guide-the-best-tools-and-services/
  7. 7. Principes fondateurs 3 - Utilitéhttp://t2.gstatic.com/images?q=tbn:ANd9GcToNcLrfcgw4qq6cY1NB_6bTvRupJD6IGIfcB3NY5WjvFlMLrGo
  8. 8. Révolution ?« tout changement ou innovation qui bouleverse lordre établi de façon radicale dans un domaine quelconque » (wikipedia)
  9. 9. HTML 5 ? Sémantique+CSS 3+ API Javascript+ WebGL+ SVG= HTML 5
  10. 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. 11. Sémantique: Structure standard
  12. 12. Sémantique: Nouveaux sélecteurs querySelector & querySelectorAll Retourne des le (les) élement(s) matchant avec une règle type CSSdocument.querySelector(#myheader)//returns the element with ID=myheaderdocument.querySelector(#myform input[type="radio"]:checked)//selects the checked radio button within "#myform"
  13. 13. Formulaires
  14. 14. 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) … }
  15. 15. 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
  16. 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. 17. Geolocation
  18. 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. 19. Cross Window Messaging
  20. 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. 21. Web Workers
  22. 22. 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();
  23. 23. Audio & Vidéo
  24. 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. 25. Canvas
  26. 26. Mais aussi… Web sockets Speech Input Mode déconnecté Microdata Device API File API
  27. 27. Révolutionnaire! Browser as a platform http://www.barbafan.de/html5video?video=tron http://www.somethinghitme.com/projects/canvasinvaders/
  28. 28. Révolutionnaire! HTML5 = Le java « mobile » × Write Once, Run everywhere OpenAppMkt = Market HTML5 Mobile
  29. 29. Pourquoi faut il y aller ? 1 - C’est un standard ouvert… … qui va faire mal à
  30. 30. Pourquoi faut il y aller ? 2 – HTML5 vise un maximum d’intéropérabilité
  31. 31. Pourquoi faut il y aller ? 3 – Le monde pousse sur HTML 5
  32. 32. Adoption IE 9 FIREFOX 4 SAFARI 5 CHROME 10 OPERA 11Eléments HTML5CanvasSVGApplications déconnectées NonStockage localBase de données locale NonWeb workers NonGéolocalisationCross Window MessagingWeb sockets NonServer Sent Events Non NonDrag-Drop NonCodec Vidéo H264, WebM WebM, Ogg Mpeg, H264 H264, Ogg WebM, Ogg Theora Theora, WebM TheoraCodec 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. 33. 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 InternetTablet PC Network 3G Edge Tablet PC AS/400 TOMCAT DB2/400 SQL SERVER CHROME GWT 2 + HTML 5
  34. 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. 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. 36. Questions

×