HTML 5 ou l'évolution majeure du web<br />et de l'internet mobile<br />Mercredi 20 avril 2011<br />
Florent Garin<br />Co-fondateur de DocDokuSociété innovante IThttp://www.docdoku.com<br />Co-fondateur du JUG de ToulouseO...
Agenda<br />HTML5<br />Le cas d’usage Webinage<br />HTML5 : Retour d’expérience<br />Conclusion & Questions - Réponses<br />
HTML : l’historique<br />
HTML5 vs XHTML2<br />XHTML2<br /><ul><li>Focalisé sur la séparation de la présentation et de la structure
S’appuie sur XForms, XML Events, etc…
Abandonne l’héritage SGML
Bonne internationalisation</li></ul>Clairement orienté document<br />
AJAX a tué XHTML2<br /><ul><li>AJAX a prouvé qu’il était possible de développer de vraies applications sur le web
HTML5 poursuit le chemin
En formalisant les « bidouilles » ajaxiennes
En réduisant la barrière entre les applications web & desktop</li></ul>Clairement orienté application	et c’est ce qu’on ve...
Qu’est-ce qu’HTML5 ?<br />HTML5 = HTML + CSS + JavaScript APIs<br />
Stockage de données<br /><ul><li>Web Storage (session et local)
Facilite la montée en charge (gestion de l’état sur le client)
Web SQL Database
1 seule implémentation SQLite(encore…)
Difficulté des migrations de schémas
Attention à la confidentialité des données</li></li></ul><li>Gestion fine du cache<br /><ul><li>Se fait via un fichier man...
API JS
Pour déterminer le mode courant
Déclencher la MAJ atomique du cache
Prochain SlideShare
Chargement dans…5
×

HTML 5 ou l'évolution majeure du web et de l'internet mobile

6 043 vues

Publié le

Atelier du mercredi 20/04/2011 de la Mêlée Numérique 15, co-animé avec Thomas van de Velde, DG de Webinage.
L’aire du tactile est plus qu’enclenchée. En outre, face au délicat problème du développement mobile multi-plateformes, comment et pourquoi HTML5 deviendra la technologie standard du web et de l'internet mobile de demain ?

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

Aucun téléchargement
Vues
Nombre de vues
6 043
Sur SlideShare
0
Issues des intégrations
0
Intégrations
4 542
Actions
Partages
0
Téléchargements
29
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

HTML 5 ou l'évolution majeure du web et de l'internet mobile

  1. 1. HTML 5 ou l'évolution majeure du web<br />et de l'internet mobile<br />Mercredi 20 avril 2011<br />
  2. 2. Florent Garin<br />Co-fondateur de DocDokuSociété innovante IThttp://www.docdoku.com<br />Co-fondateur du JUG de ToulouseOuvert à tous, les technologies Javahttp://www.toulousejug.org<br />Auteur du livre : « Concevoir et développer des applications mobiles et tactiles », 2ème édition<br />
  3. 3. Agenda<br />HTML5<br />Le cas d’usage Webinage<br />HTML5 : Retour d’expérience<br />Conclusion & Questions - Réponses<br />
  4. 4. HTML : l’historique<br />
  5. 5. HTML5 vs XHTML2<br />XHTML2<br /><ul><li>Focalisé sur la séparation de la présentation et de la structure
  6. 6. S’appuie sur XForms, XML Events, etc…
  7. 7. Abandonne l’héritage SGML
  8. 8. Bonne internationalisation</li></ul>Clairement orienté document<br />
  9. 9. AJAX a tué XHTML2<br /><ul><li>AJAX a prouvé qu’il était possible de développer de vraies applications sur le web
  10. 10. HTML5 poursuit le chemin
  11. 11. En formalisant les « bidouilles » ajaxiennes
  12. 12. En réduisant la barrière entre les applications web & desktop</li></ul>Clairement orienté application et c’est ce qu’on veut !<br />
  13. 13. Qu’est-ce qu’HTML5 ?<br />HTML5 = HTML + CSS + JavaScript APIs<br />
  14. 14. Stockage de données<br /><ul><li>Web Storage (session et local)
  15. 15. Facilite la montée en charge (gestion de l’état sur le client)
  16. 16. Web SQL Database
  17. 17. 1 seule implémentation SQLite(encore…)
  18. 18. Difficulté des migrations de schémas
  19. 19. Attention à la confidentialité des données</li></li></ul><li>Gestion fine du cache<br /><ul><li>Se fait via un fichier manifest
  20. 20. API JS
  21. 21. Pour déterminer le mode courant
  22. 22. Déclencher la MAJ atomique du cache
  23. 23. Cache + Web Storage = Mode Offline</li></ul>CACHE MANIFEST<br />style/default.css<br />images/logo.png<br />NETWORK:<br />buy.do<br />
  24. 24. Web Workers<br /><ul><li>Enfin des threads en JavaScript
  25. 25. Comme toujours le thread en arrière plan ne peut pas manipuler l’IHM (ici le DOM)
  26. 26. La communication entre threads s’opère par messages
  27. 27. Permet les traitements longs côté client sans figer la page</li></li></ul><li>Web Socket<br /><ul><li>Offre une véritable fonction de push
  28. 28. Remplace avantageusement Comet (long polling)
  29. 29. Communication Bidirectionnelle et full-duplex
  30. 30. Fonctionne sur une seule connexion TCP
  31. 31. Proxy et firewall friendly grâce au mécanisme d’upgrade HTTP…du moins en théorie !
  32. 32. Attention au problème de timeout !</li></li></ul><li>Côté JavaScript<br />_ws= new WebSocket(_location);<br />_ws.onopen= function(evt){<br /> …<br />SendLog("logging","info","presencewebsocket","isopened");<br />}<br />_ws.onmessage= function(m) {<br /> var presence = $.evalJSON(m.data).presence;<br />SendLog("logging","info","presencestatus","updated to : "+presence);<br />switchStatusUI(presence);<br />}<br />_ws.onclose= function(){<br />websocketStatus.presenceStatus="close";<br />websocketStatus.updateLogo();<br />SendLog("logging","info","presencewebsocket","isclosing"); <br />}<br />
  33. 33. Web Socket côté serveur<br /><ul><li>Plusieurs implémentations disponibles
  34. 34. Jetty7
  35. 35. Glassfish 3.1
  36. 36. Netty (Framework Java client-serveur)
  37. 37. JWebSocket
  38. 38. Non standardisé dans Java EE 6 qui ne propose que les servlets asynchrones pour Comet ;=(</li></li></ul><li>Exemple Jetty 7<br />protectedWebSocketdoWebSocketConnect(HttpServletRequestreq, String protocol){<br />..<br />}<br />class MyWebSocketimplementsWebSocket{<br />privateOutboundoutbound;<br />public voidonConnect(Outboundoutbound) {<br />this.outbound = outbound;<br />}<br /> public voidonMessage(byte frame, byte[] data, int offset, intlength) {<br />}<br /> public voidonMessage(byte frame, String data) {<br />}<br /> public voidsendPresenceStatus(PresenceStatusstatus) throwsIOException {<br /> if(outbound!=null && outbound.isOpen()){<br />outbound.sendMessage(«  message JSON»);<br />}<br /> public voidonDisconnect() { <br />}<br />}<br />
  39. 39. Fonctionnalités multimédia<br /><ul><li>Tags vidéo et audio
  40. 40. API JS
  41. 41. Tag canvas
  42. 42. Zone de dessin
  43. 43. Support du format SVG
  44. 44. WebGL
  45. 45. Portage JavaScript d’OpenGL</li></li></ul><li>CSS3<br /><ul><li>Nouveaux sélecteurs
  46. 46. Eléments de présentation
  47. 47. Nouvelles polices
  48. 48. Dégradés
  49. 49. Bords arrondis…
  50. 50. Des animations
  51. 51. Agrandissement
  52. 52. Translation
  53. 53. Rotation…</li></li></ul><li>Et aussi…<br /><ul><li>De nouveaux champs de formulaires
  54. 54. Autocomplétion
  55. 55. Validation des données
  56. 56. La géolocalisation
  57. 57. mobile & desktop (basée sur l’IP, GPS)
  58. 58. Le glisser-déposer
  59. 59. A l’intérieur de la page
  60. 60. Depuis l’extérieur du navigateur</li></li></ul><li>HTML5 : Retour d’expérience<br />REX Webinage<br />
  61. 61. Nouvelles<br />ergonomies<br />abordables<br />Le projet<br />Applications innovantes &<br />Communications associées à Internet<br />Ré-enchanter à l’ère du numériqueles relations intergénérationnelles <br />En échangeant et s’entraidant comme en présence<br />RELATION fortifiée et efficace<br />pour l’entourage local et distant<br />BIEN ÊTRE<br />& AUTONOMIE<br />pour les<br />personnes fragilisées<br />
  62. 62. HTML5 : Motivations<br /><ul><li>Besoin de portabilité universelle
  63. 63. PC, MAC, Linux
  64. 64. Tablettes tactiles : Android, iOS, WebOS
  65. 65. Smartphones…
  66. 66. Réutiliser au maximum l’interface utilisateur
  67. 67. Design, Ergonomie, Esthétique
  68. 68. Gérer les spécificités du projet
  69. 69. Beaucoup de mise au point IHM => facile en HTML
  70. 70. Séparer métier / exécution => architecture JEE – JSON - JS
  71. 71. Appels entrants, évènements => push
  72. 72. Echanges M2M directs => websocket
  73. 73. Affichage vidéo, activités communes => video tag, canvas
  74. 74. Fondations pour de nombreuses années
  75. 75.  Choix de HML5 – CSS3 – JS en Juillet 2010</li></li></ul><li>HTML5: les Leçons<br />Points Positifs<br />Limites<br />Websocket<br />Marche parfaitement<br />!! Gestion manuelle de la maintenance des connexions (keep-alive, reconnexion) <br />Vidéo<br />Vidéo et autres flux multimédia super simple et intégré (aucun plugin !!)<br />!! Codecs limités H264, ogg, aac transcodage de média en amont<br />?? Future de H264 versus VP8<br />Plusieurs heureuses surprises<br />CSS3 = téléchargement intégré des fontes spécifiques <br />Canvas, drag & drop, local storage = parfait<br />En exploration 3D OpenGL<br />Outillage = très fonctionnel<br />Intégrée à Chrome lui-même<br />Facilité de mise au point de l’IHM<br />Différences entre Navigateurs<br />Comportements très variables, difficiles à prévoir entre les navigateurs<br />Et même entre OS avec 1 navigateur<br />Résolu en embarquant un Chrome propre ; environnement maîtrisé<br />?? Smartphone et Android 3.0<br />Pas de Tag Device<br />!! Pas de support des webcams et autres périphériques dans JS<br />Performance<br />Parfait sur PC-Mac-Linux<br />Mais attente de la compilation JS Just-In-Time pour tablettes et Smartphone <br />Equipe de Développement<br />JS moins contraignant que Java<br />!! Besoin d’une vraie discipline de développement<br />
  76. 76. Conclusion & Questions - Réponses<br />DocDoku & Webinage recrutent<br />

×