NormANDY JUGHTML5 en projet<br />La révolution maintenant!<br />Alain Duval (@aduval93)<br />Cédric Beurtheret(@cbe317)<br...
Qui sommes nous ?<br />OBJECTIF, spécialiste de l’ingénierie projet JAVA EE<br />Alain Duval, Directeur Technique<br />Céd...
HTML5 genèse<br />Une longue attente depuis 1998 (HTML 4) …<br />Une spécification qui a démarrée en 2004… & qui ne sera f...
Nouveautés HTML 5<br /><ul><li>Nouvelles balises
http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
Dépréciation</li></ul><applet>, <frame>, <font>, <center>…<br /><ul><li>Doc Type  & CharSet simplifié</li></ul><!DOCTYPE h...
HTML 5 Forms<br />Nouveaux type de champs de saisie…<br />number, tel, url, email<br />Date & ColorPicket<br />Slider<br /...
HTML 5 Samples<br />Normandy Jug - 14/12/2010<br />
Multimédia<br /><ul><li><canvas>
Permet de dessiner en JAVASCRIPT  (image, animation, graphes…) & d’être mis en forme en CSS
Dessin 2D, 3D
Affranchissement à terme des plugins (Flash, VML, Silverligt)
Support natif du SVG
Balises <audio> & <video>
Standardisation de la lecture de flux  multimédias (sans plugin)
Codecs audios: AAC, MP3,  OGG VORBIS
Codecs videos: H264, VPM &OGG THEORA</li></ul>Normandy Jug - 14/12/2010<br />
Multimédia<br />Normandy Jug - 14/12/2010<br />
API JS<br />12/10/2010 -  9<br /><ul><li>Drag Drop
Pour le déplacement d’objet du bureau vers le navigateur
Try GMAIL attachments…
Geolocalisation
Récupération d’une coordonnée géographique
Autorisation nécessaire
Précision dépendante du provider (GPS, WIFI, Réseau IP…)
Web Socket
Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du protocole HTTP vers prot...
Implémentation serveur nécessaire & pas encore standard
Offline Web
Prochain SlideShare
Chargement dans…5
×

HTML5 en projet

2 635 vues

Publié le

Présentation HTML 5 par Alain Duval et Cédric Beurtheret AU Normandy JUG

0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

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

Aucune remarque pour cette diapositive

HTML5 en projet

  1. 1. NormANDY JUGHTML5 en projet<br />La révolution maintenant!<br />Alain Duval (@aduval93)<br />Cédric Beurtheret(@cbe317)<br />14 Décembre 2010<br />
  2. 2. Qui sommes nous ?<br />OBJECTIF, spécialiste de l’ingénierie projet JAVA EE<br />Alain Duval, Directeur Technique<br />Cédric Beurtheret, Expert JAVA EE<br />Normandy Jug - 14/12/2010<br />
  3. 3. HTML5 genèse<br />Une longue attente depuis 1998 (HTML 4) …<br />Une spécification qui a démarrée en 2004… & qui ne sera finale que dans plusieurs années (2012 ?)<br />Un triple effort (W3C, IETF, WHATWG)<br />Une vision basée sur la compatibilité, l’utilité, & l’intéropérabilité<br />End of party for plugins … and javascript  code to enforce the rules!<br />Une révolution dixit les grands acteurs du WEB & JAVA<br />Un support grandissant de la plupart des navigateurs<br />Pourquoi attendre encore ?<br />HTML 5, c’est maintenant!<br />Normandy Jug - 14/12/2010<br />
  4. 4. Nouveautés HTML 5<br /><ul><li>Nouvelles balises
  5. 5. http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
  6. 6. Dépréciation</li></ul><applet>, <frame>, <font>, <center>…<br /><ul><li>Doc Type & CharSet simplifié</li></ul><!DOCTYPE html><br /><metacharset="utf-8"><br />querySelector & querySelectorAll<br />Structuration sémantique du contenu<br />Simple & intuitif<br />Facilité de parsing<br />Normandy Jug - 14/12/2010<br />
  7. 7. HTML 5 Forms<br />Nouveaux type de champs de saisie…<br />number, tel, url, email<br />Date & ColorPicket<br />Slider<br />… apport des navigateurs<br />Nouveaux attributs <br />PlaceHolder, AutoComplete, AutoFocus…<br />Gestion de la validation (attributs & API)<br />Ne peut pas remplacer complètement la validation serveur!<br />Réel effort de compatibilité<br />Si le browser ne supporte pas les nouveaux types, ils sont dégradées en type TEXT<br />Normandy Jug - 14/12/2010<br />
  8. 8. HTML 5 Samples<br />Normandy Jug - 14/12/2010<br />
  9. 9. Multimédia<br /><ul><li><canvas>
  10. 10. Permet de dessiner en JAVASCRIPT (image, animation, graphes…) & d’être mis en forme en CSS
  11. 11. Dessin 2D, 3D
  12. 12. Affranchissement à terme des plugins (Flash, VML, Silverligt)
  13. 13. Support natif du SVG
  14. 14. Balises <audio> & <video>
  15. 15. Standardisation de la lecture de flux multimédias (sans plugin)
  16. 16. Codecs audios: AAC, MP3, OGG VORBIS
  17. 17. Codecs videos: H264, VPM &OGG THEORA</li></ul>Normandy Jug - 14/12/2010<br />
  18. 18. Multimédia<br />Normandy Jug - 14/12/2010<br />
  19. 19. API JS<br />12/10/2010 - 9<br /><ul><li>Drag Drop
  20. 20. Pour le déplacement d’objet du bureau vers le navigateur
  21. 21. Try GMAIL attachments…
  22. 22. Geolocalisation
  23. 23. Récupération d’une coordonnée géographique
  24. 24. Autorisation nécessaire
  25. 25. Précision dépendante du provider (GPS, WIFI, Réseau IP…)
  26. 26. Web Socket
  27. 27. Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du protocole HTTP vers protocole WEB SOCKET)
  28. 28. Implémentation serveur nécessaire & pas encore standard
  29. 29. Offline Web
  30. 30. Cache d’application pour le stochage HTML, CSS, JS
  31. 31. Device API
  32. 32. Accès à la caméra, charge de batterie…</li></li></ul><li>API JS<br />12/10/2010 - 10<br />
  33. 33. HTML5 en projet…<br /><ul><li>WEB WORKERS
  34. 34. CROSS WINDOW MESSAGING
  35. 35. WEB STORAGE</li></ul>Normandy Jug - 14/12/2010<br />
  36. 36. Contexte projet <br /><ul><li>Application de gestion de la relation client à usage des commerciaux
  37. 37. Application nomade devant supporter le mode déconnecté
  38. 38. Architecture 3 niveaux avec réplication de données</li></ul>Internet<br />3G Edge<br />Network<br />Tablet PC<br />Tablet PC<br />Tablet PC<br />AS/400<br />DB2/400<br />TOMCAT<br />SQL SERVER<br />CHROME<br />GWT 2 + HTML 5 <br />(WebWorkers, Cross Window Messaging, Web Storage)<br />Normandy Jug - 14/12/2010<br />
  39. 39. Démo Jug<br />Web Storage + Cross Windows Messaging + Web Workers in action…<br />Normandy Jug - 14/12/2010<br />
  40. 40. Web Workers<br />API pour lancer des scripts JS en tâche de fond<br />Dans notre contexte projet, utilisé pour effectuer des tâches de synchronisation de données à intervalle régulier<br />Bénéfices<br />Parallélisation des tâches<br />Evite de faire une multitude de timer<br />Normandy Jug - 14/12/2010<br />
  41. 41. Web Workers (code) <br />Code exécuté pour créer et lancer un Worker <br />worker = new Worker('worker_twitter.js');<br />worker.onmessage = function(event) {<br /> trace('Workerrecieved : ' + event.data);<br /> // event.data contient le message envoyé par le Worker :<br /> // - soit une String<br /> // - soit un objet.<br /> ...<br /> };<br />worker.onerror = function(event) {<br /> // event.data contient le 'erreur<br />throwevent.data<br /> };<br /> // On démarre le worker.<br />worker.postMessage({'user' : user, 'count' : count});<br />Normandy Jug - 14/12/2010<br />
  42. 42. Web Workers (code) <br />Code du Worker <br />onmessage = function(event) {<br /> //Reçoit le message de démarrage<br /> ...<br /> };<br />functionsend(obj) {<br /> // Envoi un objet ou une String à l’appelant<br />postMessage(obj);<br /> }<br />Normandy Jug - 14/12/2010<br />
  43. 43. Cross Window Messaging<br /><ul><li>API pour la communication de messages (texte, objet) entre windows, tabs & iframe
  44. 44. Une des solutions au problème du SameOrigin Policy
  45. 45. Dans notre contexte projet, utilisé pour transmettre un contexte applicatif entre les fenêtres
  46. 46. principe de portail : séparation menu/habilitation des modules fonctionnels)
  47. 47. Bénéfices
  48. 48. Modularisation applicative
  49. 49. Sécurité des échanges: le message contient le domaine de l’émetteur, le récepteur peut réagir en conséquence</li></ul>Normandy Jug - 14/12/2010<br />
  50. 50. Cross Window Messaging (code)<br />Code dans la fenêtre principale <br /> // Création de la fenêtre secondaire (ici une windows, <br /> //mais ça aurait pu être une iframe<br /> var consoleWindows = window.open(<br /> "http://localhost:90/demo_jug/debug.html", <br /> "Debug", <br /> "menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes"); <br />function trace(info) {<br /> // Envoi un message à la fenêtre secondaire.<br /> if (consoleWindows != 'undefined') {<br />consoleWindows.postMessage(info, "*");<br /> }<br /> }<br />Normandy Jug - 14/12/2010<br />
  51. 51. Cross Window Messaging (code)<br />Code dans la fenêtre secondaire <br /> // Reception du message<br /> // Pour répondre à la fenêtre principale, il faut utiliser <br /> // e.sender.postMessage()<br />window.addEventListener("message", function(e){<br />document.getElementById("debug").innerHTML = <br />document.getElementById("debug").innerHTML<br /> + "<br/>" + e.data;<br /> }, false); <br />Normandy Jug - 14/12/2010<br />
  52. 52. Web Storage<br /><ul><li>Pour le stockage de données sur le navigateur
  53. 53. 3 niveaux:
  54. 54. SessionStorage: Volatile (durée de la session client)
  55. 55. LocalStorage: Persistant mais limité en taille (HashMap)
  56. 56. WebDatabase: Basée sur SQLLite ou IndexDb
  57. 57. Dans notre contexte projet, réplica de la base relationnelle de niveau 2, réduite à 1 utilisateur
  58. 58. Bénéfices
  59. 59. Gestion du mode déconnecté
  60. 60. Moins de roundtrip sur le serveur pour l’échange de contexte entre modules applicatifs
  61. 61. Plus la limite de taille des cookies (4k par domaine)
  62. 62. Attention!
  63. 63. Sécurité à prendre en compte (hachage de données)
  64. 64. Usage de l’API asynchrone pour les accès aux données (moins pénalisant)</li></ul>Normandy Jug - 14/12/2010<br />
  65. 65. Web Storage (code)<br />var db = null;<br />try {<br /> if (window.openDatabase) {<br />db = openDatabase("Twitter", "1.0", "TwitterFeed", 200000);<br /> }<br /> } catch(err) { }<br />Normandy Jug - 14/12/2010<br />
  66. 66. Web Storage (code)<br />//Create table<br />functioninit() {<br />db.transaction(function(tx) {<br />tx.executeSql(<br /> "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE,<br />usertimeline TEXT,<br />username TEXT, <br />creationdate TEXT, <br />text TEXT, <br /> avatar TEXT)", <br /> [], <br />function(result) {<br /> //Par exemple lire le contenu de la table<br /> }, <br />function(tx, error) {<br /> //Traiter l'erreur<br /> }<br /> );<br /> });<br /> } <br />Normandy Jug - 14/12/2010<br />
  67. 67. Web Storage (code)<br /> //Read <br />functionread() {<br />db.transaction(function(tx) {<br />tx.executeSql("SELECT id, usertimeline, username, creationdate, text, avatar <br /> FROM statuswhereusertimeline = ? ORDER BY id DESC", <br /> [usertimeline], <br />function(tx, result) {<br /> //Utiliser les données lues<br /> }, <br />function(tx, error) {<br /> //Erreur<br /> return;<br /> }<br /> );<br /> });<br /> }<br />Normandy Jug - 14/12/2010<br />
  68. 68. Web Storage (code)<br />//insert<br />function(arStatus, callback) {<br /> var status = arStatus.pop();<br /> var sql = "INSERT INTO status (id, usertimeline, username, text, creationdate, avatar) VALUES (?,?,?,?,?,?)";<br />db.transaction(function (tx) {<br />tx.executeSql(<br />sql,<br />status,<br />function(tx, result){<br /> //Continuer<br /> },<br />function(tx, error){<br /> //Erreur<br /> }<br /> );<br /> }<br /> );<br /> }<br />Normandy Jug - 14/12/2010<br />
  69. 69. Support navigateurs<br />Normandy Jug - 14/12/2010<br />
  70. 70. Support navigateurs<br />* Si le codec est installé sur la machine<br />Normandy Jug - 14/12/2010<br />
  71. 71. HTML5 maintenant!<br />Pourquoi se priver de ces fonctions dès lors que l’on maîtrise le navigateur.<br />Si on ne maîtrise pas le navigateur:<br />Option 1: Degradegracefully (avec du code en +)<br />Option 2: Code JS pour émuler les fonctions HTML5<br />Lecteur « SublimVideo »<br />Librairie JavascriptKaazing pour les WebSockets (flash)<br />Librairie Jstorage pour le stockage des données<br />Modernizr (librairie de détection des fonctionnalités supportées)<br />HTML5 Boilerplate => rassemble l’ensembles des librairies d’émulation, et de bonnes pratiques HTML5<br />…<br />Normandy Jug - 14/12/2010<br />
  72. 72. Ressources<br />http://dev.w3.org/html5/spec/Overview.html<br />http://diveintohtml5.org<br />http://www.html5rocks.com<br />http://html5doctor.com<br />http://html5test.com<br />http://html5boilerplate.com<br />http://html5demos.com<br />Pro HTML 5 Programming (P. Lubbers)<br />HTML 5 Up & Running (M. Pilgrim)<br />Normandy Jug - 14/12/2010<br />
  73. 73. Questions<br />?<br />Normandy Jug - 14/12/2010<br />

×