HTML5 en projet
Upcoming SlideShare
Loading in...5
×
 

Like this? Share it with your network

Share

HTML5 en projet

on

  • 2,371 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,371
Views on SlideShare
2,215
Embed Views
156

Actions

Likes
1
Downloads
41
Comments
0

1 Embed 156

http://www.normandyjug.org 156

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 Presentation Transcript

  • 1. NormANDY JUGHTML5 en projet
    La révolution maintenant!
    Alain Duval (@aduval93)
    Cédric Beurtheret(@cbe317)
    14 Décembre 2010
  • 2. 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
  • 3. 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
  • 4. Nouveautés HTML 5
    • Nouvelles balises
    • 5. http://woorkup.com/wp-content/uploads/2009/12/HTML5-Visual-Cheat-Sheet.pdf
    • 6. 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
  • 7. 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
  • 8. HTML 5 Samples
    Normandy Jug - 14/12/2010
  • 9. Multimédia
    • <canvas>
    • 10. Permet de dessiner en JAVASCRIPT (image, animation, graphes…) & d’être mis en forme en CSS
    • 11. Dessin 2D, 3D
    • 12. Affranchissement à terme des plugins (Flash, VML, Silverligt)
    • 13. Support natif du SVG
    • 14. Balises <audio> & <video>
    • 15. Standardisation de la lecture de flux multimédias (sans plugin)
    • 16. Codecs audios: AAC, MP3, OGG VORBIS
    • 17. Codecs videos: H264, VPM &OGG THEORA
    Normandy Jug - 14/12/2010
  • 18. Multimédia
    Normandy Jug - 14/12/2010
  • 19. API JS
    12/10/2010 - 9
    • Drag Drop
    • 20. Pour le déplacement d’objet du bureau vers le navigateur
    • 21. Try GMAIL attachments…
    • 22. Geolocalisation
    • 23. Récupération d’une coordonnée géographique
    • 24. Autorisation nécessaire
    • 25. Précision dépendante du provider (GPS, WIFI, Réseau IP…)
    • 26. Web Socket
    • 27. Moyen le + efficace pour établir une communication full duplex entre client / serveur (Bascule du protocole HTTP vers protocole WEB SOCKET)
    • 28. Implémentation serveur nécessaire & pas encore standard
    • 29. Offline Web
    • 30. Cache d’application pour le stochage HTML, CSS, JS
    • 31. Device API
    • 32. Accès à la caméra, charge de batterie…
  • API JS
    12/10/2010 - 10
  • 33. HTML5 en projet…
    • WEB WORKERS
    • 34. CROSS WINDOW MESSAGING
    • 35. WEB STORAGE
    Normandy Jug - 14/12/2010
  • 36. Contexte projet
    • Application de gestion de la relation client à usage des commerciaux
    • 37. Application nomade devant supporter le mode déconnecté
    • 38. 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
  • 39. Démo Jug
    Web Storage + Cross Windows Messaging + Web Workers in action…
    Normandy Jug - 14/12/2010
  • 40. 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
  • 41. 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
  • 42. 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
  • 43. Cross Window Messaging
    • API pour la communication de messages (texte, objet) entre windows, tabs & iframe
    • 44. Une des solutions au problème du SameOrigin Policy
    • 45. Dans notre contexte projet, utilisé pour transmettre un contexte applicatif entre les fenêtres
    • 46. principe de portail : séparation menu/habilitation des modules fonctionnels)
    • 47. Bénéfices
    • 48. Modularisation applicative
    • 49. 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
  • 50. 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
  • 51. 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
  • 52. Web Storage
    • Pour le stockage de données sur le navigateur
    • 53. 3 niveaux:
    • 54. SessionStorage: Volatile (durée de la session client)
    • 55. LocalStorage: Persistant mais limité en taille (HashMap)
    • 56. WebDatabase: Basée sur SQLLite ou IndexDb
    • 57. Dans notre contexte projet, réplica de la base relationnelle de niveau 2, réduite à 1 utilisateur
    • 58. Bénéfices
    • 59. Gestion du mode déconnecté
    • 60. Moins de roundtrip sur le serveur pour l’échange de contexte entre modules applicatifs
    • 61. Plus la limite de taille des cookies (4k par domaine)
    • 62. Attention!
    • 63. Sécurité à prendre en compte (hachage de données)
    • 64. Usage de l’API asynchrone pour les accès aux données (moins pénalisant)
    Normandy Jug - 14/12/2010
  • 65. Web Storage (code)
    var db = null;
    try {
    if (window.openDatabase) {
    db = openDatabase("Twitter", "1.0", "TwitterFeed", 200000);
    }
    } catch(err) { }
    Normandy Jug - 14/12/2010
  • 66. 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
  • 67. 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
  • 68. 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
  • 69. Support navigateurs
    Normandy Jug - 14/12/2010
  • 70. Support navigateurs
    * Si le codec est installé sur la machine
    Normandy Jug - 14/12/2010
  • 71. 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
  • 72. 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
  • 73. Questions
    ?
    Normandy Jug - 14/12/2010