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

  • 4,868 views
Uploaded on

Atelier du mercredi 20/04/2011 de la Mêlée Numérique 15, co-animé avec Thomas van de Velde, DG de Webinage. …

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 ?

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
4,868
On Slideshare
0
From Embeds
0
Number of Embeds
4

Actions

Shares
Downloads
25
Comments
0
Likes
1

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. HTML 5 ou l'évolution majeure du web
    et de l'internet mobile
    Mercredi 20 avril 2011
  • 2. Florent Garin
    Co-fondateur de DocDokuSociété innovante IThttp://www.docdoku.com
    Co-fondateur du JUG de ToulouseOuvert à tous, les technologies Javahttp://www.toulousejug.org
    Auteur du livre : « Concevoir et développer des applications mobiles et tactiles », 2ème édition
  • 3. Agenda
    HTML5
    Le cas d’usage Webinage
    HTML5 : Retour d’expérience
    Conclusion & Questions - Réponses
  • 4. HTML : l’historique
  • 5. HTML5 vs XHTML2
    XHTML2
    • Focalisé sur la séparation de la présentation et de la structure
    • 6. S’appuie sur XForms, XML Events, etc…
    • 7. Abandonne l’héritage SGML
    • 8. Bonne internationalisation
    Clairement orienté document
  • 9. AJAX a tué XHTML2
    • AJAX a prouvé qu’il était possible de développer de vraies applications sur le web
    • 10. HTML5 poursuit le chemin
    • 11. En formalisant les « bidouilles » ajaxiennes
    • 12. En réduisant la barrière entre les applications web & desktop
    Clairement orienté application et c’est ce qu’on veut !
  • 13. Qu’est-ce qu’HTML5 ?
    HTML5 = HTML + CSS + JavaScript APIs
  • 14. Stockage de données
    • Web Storage (session et local)
    • 15. Facilite la montée en charge (gestion de l’état sur le client)
    • 16. Web SQL Database
    • 17. 1 seule implémentation SQLite(encore…)
    • 18. Difficulté des migrations de schémas
    • 19. Attention à la confidentialité des données
  • Gestion fine du cache
    • Se fait via un fichier manifest
    • 20. API JS
    • 21. Pour déterminer le mode courant
    • 22. Déclencher la MAJ atomique du cache
    • 23. Cache + Web Storage = Mode Offline
    CACHE MANIFEST
    style/default.css
    images/logo.png
    NETWORK:
    buy.do
  • 24. Web Workers
    • Enfin des threads en JavaScript
    • 25. Comme toujours le thread en arrière plan ne peut pas manipuler l’IHM (ici le DOM)
    • 26. La communication entre threads s’opère par messages
    • 27. Permet les traitements longs côté client sans figer la page
  • Web Socket
    • Offre une véritable fonction de push
    • 28. Remplace avantageusement Comet (long polling)
    • 29. Communication Bidirectionnelle et full-duplex
    • 30. Fonctionne sur une seule connexion TCP
    • 31. Proxy et firewall friendly grâce au mécanisme d’upgrade HTTP…du moins en théorie !
    • 32. Attention au problème de timeout !
  • Côté JavaScript
    _ws= new WebSocket(_location);
    _ws.onopen= function(evt){

    SendLog("logging","info","presencewebsocket","isopened");
    }
    _ws.onmessage= function(m) {
    var presence = $.evalJSON(m.data).presence;
    SendLog("logging","info","presencestatus","updated to : "+presence);
    switchStatusUI(presence);
    }
    _ws.onclose= function(){
    websocketStatus.presenceStatus="close";
    websocketStatus.updateLogo();
    SendLog("logging","info","presencewebsocket","isclosing");
    }
  • 33. Web Socket côté serveur
    • Plusieurs implémentations disponibles
    • 34. Jetty7
    • 35. Glassfish 3.1
    • 36. Netty (Framework Java client-serveur)
    • 37. JWebSocket
    • 38. Non standardisé dans Java EE 6 qui ne propose que les servlets asynchrones pour Comet ;=(
  • Exemple Jetty 7
    protectedWebSocketdoWebSocketConnect(HttpServletRequestreq, String protocol){
    ..
    }
    class MyWebSocketimplementsWebSocket{
    privateOutboundoutbound;
    public voidonConnect(Outboundoutbound) {
    this.outbound = outbound;
    }
    public voidonMessage(byte frame, byte[] data, int offset, intlength) {
    }
    public voidonMessage(byte frame, String data) {
    }
    public voidsendPresenceStatus(PresenceStatusstatus) throwsIOException {
    if(outbound!=null && outbound.isOpen()){
    outbound.sendMessage(«  message JSON»);
    }
    public voidonDisconnect() {
    }
    }
  • 39. Fonctionnalités multimédia
  • CSS3
  • Et aussi…
    • De nouveaux champs de formulaires
    • 54. Autocomplétion
    • 55. Validation des données
    • 56. La géolocalisation
    • 57. mobile & desktop (basée sur l’IP, GPS)
    • 58. Le glisser-déposer
    • 59. A l’intérieur de la page
    • 60. Depuis l’extérieur du navigateur
  • HTML5 : Retour d’expérience
    REX Webinage
  • 61. Nouvelles
    ergonomies
    abordables
    Le projet
    Applications innovantes &
    Communications associées à Internet
    Ré-enchanter à l’ère du numériqueles relations intergénérationnelles
    En échangeant et s’entraidant comme en présence
    RELATION fortifiée et efficace
    pour l’entourage local et distant
    BIEN ÊTRE
    & AUTONOMIE
    pour les
    personnes fragilisées
  • 62. HTML5 : Motivations
    • Besoin de portabilité universelle
    • 63. PC, MAC, Linux
    • 64. Tablettes tactiles : Android, iOS, WebOS
    • 65. Smartphones…
    • 66. Réutiliser au maximum l’interface utilisateur
    • 67. Design, Ergonomie, Esthétique
    • 68. Gérer les spécificités du projet
    • 69. Beaucoup de mise au point IHM => facile en HTML
    • 70. Séparer métier / exécution => architecture JEE – JSON - JS
    • 71. Appels entrants, évènements => push
    • 72. Echanges M2M directs => websocket
    • 73. Affichage vidéo, activités communes => video tag, canvas
    • 74. Fondations pour de nombreuses années
    • 75.  Choix de HML5 – CSS3 – JS en Juillet 2010
  • HTML5: les Leçons
    Points Positifs
    Limites
    Websocket
    Marche parfaitement
    !! Gestion manuelle de la maintenance des connexions (keep-alive, reconnexion)
    Vidéo
    Vidéo et autres flux multimédia super simple et intégré (aucun plugin !!)
    !! Codecs limités H264, ogg, aac transcodage de média en amont
    ?? Future de H264 versus VP8
    Plusieurs heureuses surprises
    CSS3 = téléchargement intégré des fontes spécifiques
    Canvas, drag & drop, local storage = parfait
    En exploration 3D OpenGL
    Outillage = très fonctionnel
    Intégrée à Chrome lui-même
    Facilité de mise au point de l’IHM
    Différences entre Navigateurs
    Comportements très variables, difficiles à prévoir entre les navigateurs
    Et même entre OS avec 1 navigateur
    Résolu en embarquant un Chrome propre ; environnement maîtrisé
    ?? Smartphone et Android 3.0
    Pas de Tag Device
    !! Pas de support des webcams et autres périphériques dans JS
    Performance
    Parfait sur PC-Mac-Linux
    Mais attente de la compilation JS Just-In-Time pour tablettes et Smartphone
    Equipe de Développement
    JS moins contraignant que Java
    !! Besoin d’une vraie discipline de développement
  • 76. Conclusion & Questions - Réponses
    DocDoku & Webinage recrutent