• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
HTML5 en projet
 

HTML5 en projet

on

  • 2,242 views

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

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

Statistics

Views

Total Views
2,242
Views on SlideShare
2,088
Embed Views
154

Actions

Likes
1
Downloads
41
Comments
0

1 Embed 154

http://www.normandyjug.org 154

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

    HTML5 en projet HTML5 en projet Presentation Transcript

    • NormANDY JUGHTML5 en projet
      La révolution maintenant!
      Alain Duval (@aduval93)
      Cédric Beurtheret(@cbe317)
      14 Décembre 2010
    • Qui sommes nous ?
      OBJECTIF, spécialiste de l’ingénierie projet JAVA EE
      Alain Duval, Directeur Technique
      Cédric Beurtheret, Expert JAVA EE
      Normandy Jug - 14/12/2010
    • HTML5 genèse
      Une longue attente depuis 1998 (HTML 4) …
      Une spécification qui a démarrée en 2004… & qui ne sera finale que dans plusieurs années (2012 ?)
      Un triple effort (W3C, IETF, WHATWG)
      Une vision basée sur la compatibilité, l’utilité, & l’intéropérabilité
      End of party for plugins … and javascript  code to enforce the rules!
      Une révolution dixit les grands acteurs du WEB & JAVA
      Un support grandissant de la plupart des navigateurs
      Pourquoi attendre encore ?
      HTML 5, c’est maintenant!
      Normandy Jug - 14/12/2010
    • Nouveautés HTML 5
      • Nouvelles balises
      • http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
      • Dépréciation
      <applet>, <frame>, <font>, <center>…
      • Doc Type & CharSet simplifié
      <!DOCTYPE html>
      <metacharset="utf-8">
      querySelector & querySelectorAll
      Structuration sémantique du contenu
      Simple & intuitif
      Facilité de parsing
      Normandy Jug - 14/12/2010
    • HTML 5 Forms
      Nouveaux type de champs de saisie…
      number, tel, url, email
      Date & ColorPicket
      Slider
      … apport des navigateurs
      Nouveaux attributs
      PlaceHolder, AutoComplete, AutoFocus…
      Gestion de la validation (attributs & API)
      Ne peut pas remplacer complètement la validation serveur!
      Réel effort de compatibilité
      Si le browser ne supporte pas les nouveaux types, ils sont dégradées en type TEXT
      Normandy Jug - 14/12/2010
    • HTML 5 Samples
      Normandy Jug - 14/12/2010
    • Multimédia
      • <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
      Normandy Jug - 14/12/2010
    • Multimédia
      Normandy Jug - 14/12/2010
    • API JS
      12/10/2010 - 9
      • 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 protocole WEB SOCKET)
      • Implémentation serveur nécessaire & pas encore standard
      • Offline Web
      • Cache d’application pour le stochage HTML, CSS, JS
      • Device API
      • Accès à la caméra, charge de batterie…
    • API JS
      12/10/2010 - 10
    • HTML5 en projet…
      • WEB WORKERS
      • CROSS WINDOW MESSAGING
      • WEB STORAGE
      Normandy Jug - 14/12/2010
    • Contexte projet
      • 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
      Internet
      3G Edge
      Network
      Tablet PC
      Tablet PC
      Tablet PC
      AS/400
      DB2/400
      TOMCAT
      SQL SERVER
      CHROME
      GWT 2 + HTML 5
      (WebWorkers, Cross Window Messaging, Web Storage)
      Normandy Jug - 14/12/2010
    • Démo Jug
      Web Storage + Cross Windows Messaging + Web Workers in action…
      Normandy Jug - 14/12/2010
    • Web Workers
      API pour lancer des scripts JS en tâche de fond
      Dans notre contexte projet, utilisé pour effectuer des tâches de synchronisation de données à intervalle régulier
      Bénéfices
      Parallélisation des tâches
      Evite de faire une multitude de timer
      Normandy Jug - 14/12/2010
    • Web Workers (code)
      Code exécuté pour créer et lancer un Worker
      worker = new Worker('worker_twitter.js');
      worker.onmessage = function(event) {
      trace('Workerrecieved : ' + event.data);
      // event.data contient le message envoyé par le Worker :
      // - soit une String
      // - soit un objet.
      ...
      };
      worker.onerror = function(event) {
      // event.data contient le 'erreur
      throwevent.data
      };
      // On démarre le worker.
      worker.postMessage({'user' : user, 'count' : count});
      Normandy Jug - 14/12/2010
    • Web Workers (code)
      Code du Worker
      onmessage = function(event) {
      //Reçoit le message de démarrage
      ...
      };
      functionsend(obj) {
      // Envoi un objet ou une String à l’appelant
      postMessage(obj);
      }
      Normandy Jug - 14/12/2010
    • Cross Window Messaging
      • API pour la communication de messages (texte, objet) entre windows, tabs & iframe
      • Une des solutions au problème du SameOrigin Policy
      • Dans notre contexte projet, utilisé pour transmettre un contexte applicatif entre les fenêtres
      • principe de portail : séparation menu/habilitation des modules fonctionnels)
      • Bénéfices
      • Modularisation applicative
      • Sécurité des échanges: le message contient le domaine de l’émetteur, le récepteur peut réagir en conséquence
      Normandy Jug - 14/12/2010
    • Cross Window Messaging (code)
      Code dans la fenêtre principale
      // Création de la fenêtre secondaire (ici une windows,
      //mais ça aurait pu être une iframe
      var consoleWindows = window.open(
      "http://localhost:90/demo_jug/debug.html",
      "Debug",
      "menubar=no,location=no,resizable=yes,scrollbars=yes,status=yes");
      function trace(info) {
      // Envoi un message à la fenêtre secondaire.
      if (consoleWindows != 'undefined') {
      consoleWindows.postMessage(info, "*");
      }
      }
      Normandy Jug - 14/12/2010
    • Cross Window Messaging (code)
      Code dans la fenêtre secondaire
      // Reception du message
      // Pour répondre à la fenêtre principale, il faut utiliser
      // e.sender.postMessage()
      window.addEventListener("message", function(e){
      document.getElementById("debug").innerHTML =
      document.getElementById("debug").innerHTML
      + "<br/>" + e.data;
      }, false);
      Normandy Jug - 14/12/2010
    • Web Storage
      • Pour le stockage de données sur le navigateur
      • 3 niveaux:
      • SessionStorage: Volatile (durée de la session client)
      • LocalStorage: Persistant mais limité en taille (HashMap)
      • WebDatabase: Basée sur SQLLite ou IndexDb
      • Dans notre contexte projet, réplica de la base relationnelle de niveau 2, réduite à 1 utilisateur
      • Bénéfices
      • Gestion du mode déconnecté
      • Moins de roundtrip sur le serveur pour l’échange de contexte entre modules applicatifs
      • Plus la limite de taille des cookies (4k par domaine)
      • Attention!
      • Sécurité à prendre en compte (hachage de données)
      • Usage de l’API asynchrone pour les accès aux données (moins pénalisant)
      Normandy Jug - 14/12/2010
    • Web Storage (code)
      var db = null;
      try {
      if (window.openDatabase) {
      db = openDatabase("Twitter", "1.0", "TwitterFeed", 200000);
      }
      } catch(err) { }
      Normandy Jug - 14/12/2010
    • Web Storage (code)
      //Create table
      functioninit() {
      db.transaction(function(tx) {
      tx.executeSql(
      "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE,
      usertimeline TEXT,
      username TEXT,
      creationdate TEXT,
      text TEXT,
      avatar TEXT)",
      [],
      function(result) {
      //Par exemple lire le contenu de la table
      },
      function(tx, error) {
      //Traiter l'erreur
      }
      );
      });
      }
      Normandy Jug - 14/12/2010
    • Web Storage (code)
      //Read
      functionread() {
      db.transaction(function(tx) {
      tx.executeSql("SELECT id, usertimeline, username, creationdate, text, avatar
      FROM statuswhereusertimeline = ? ORDER BY id DESC",
      [usertimeline],
      function(tx, result) {
      //Utiliser les données lues
      },
      function(tx, error) {
      //Erreur
      return;
      }
      );
      });
      }
      Normandy Jug - 14/12/2010
    • Web Storage (code)
      //insert
      function(arStatus, callback) {
      var status = arStatus.pop();
      var sql = "INSERT INTO status (id, usertimeline, username, text, creationdate, avatar) VALUES (?,?,?,?,?,?)";
      db.transaction(function (tx) {
      tx.executeSql(
      sql,
      status,
      function(tx, result){
      //Continuer
      },
      function(tx, error){
      //Erreur
      }
      );
      }
      );
      }
      Normandy Jug - 14/12/2010
    • Support navigateurs
      Normandy Jug - 14/12/2010
    • Support navigateurs
      * Si le codec est installé sur la machine
      Normandy Jug - 14/12/2010
    • HTML5 maintenant!
      Pourquoi se priver de ces fonctions dès lors que l’on maîtrise le navigateur.
      Si on ne maîtrise pas le navigateur:
      Option 1: Degradegracefully (avec du code en +)
      Option 2: Code JS pour émuler les fonctions HTML5
      Lecteur « SublimVideo »
      Librairie JavascriptKaazing pour les WebSockets (flash)
      Librairie Jstorage pour le stockage des données
      Modernizr (librairie de détection des fonctionnalités supportées)
      HTML5 Boilerplate => rassemble l’ensembles des librairies d’émulation, et de bonnes pratiques HTML5

      Normandy Jug - 14/12/2010
    • Ressources
      http://dev.w3.org/html5/spec/Overview.html
      http://diveintohtml5.org
      http://www.html5rocks.com
      http://html5doctor.com
      http://html5test.com
      http://html5boilerplate.com
      http://html5demos.com
      Pro HTML 5 Programming (P. Lubbers)
      HTML 5 Up & Running (M. Pilgrim)
      Normandy Jug - 14/12/2010
    • Questions
      ?
      Normandy Jug - 14/12/2010