![Extensions & APIs - WebSocket Web forms 2.0 Extension des types de input Validation (type, pattern, required, min, max, etc.) Gestion des listes <form> <div id="repeatformcontainer"> <div id="tem1" repeat="template" repeat-min="2" repeat-max="5" > <label>Features</label><input type="text" name="product.[tem1]" value="E.g, Nice eyes"> <button type=remove> Remove</button> <button type=move-up> Move Up</button> <button type=move-down> Move Down</button><br /> </div> <div class="button"> <button type=add template=tem1> Add</button><br /><br /></div> </div> </form> search number range color tel url email date month week time datetime datetime-local](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-13-320.jpg)
![JavaScript (Twitter.load) A vous de jouer! load : function() { console.log('load'); //Remove JSONP scripts var head = document.getElementsByTagName('head')[0]; var scripts = null; scripts = head.getElementsByTagName('script'); for(var l=scripts.length; l--;) { head.removeChild(scripts[l]); } document.getElementById('load').innerHTML = 'Refreshing...'; var url='http://www.twitter.com/statuses/public_timeline.json?callback= Twitter.twitterCallback ’ var script = document.createElement('script'); script.setAttribute(src', url); script.onload = function() { document.getElementById('load').innerHTML = '↻ Refresh'; } console.log(script); head.appendChild(script); },](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-22-320.jpg)
![JavaScript (Twitter.twitterCallback) A vous de jouer! twitterCallback : function(obj) { console.log('callback'); for (var i=0, l=obj.length; i<l; i++) { Twitter.display ({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url }); } },](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-23-320.jpg)
![JavaScript (Twitter.display) A vous de jouer! display : function(row) { console.log('display'); var timeline = document.getElementById('timeline'); var section = document.createElement('section'); var d = new Date(); d.setTime(Date.parse(row['created_at'])); section.innerHTML = '<img src="'+row['avatar']+'" alt="" height="24" widht="24"/>'+ '<span class="user">'+row['username'] + '</span> ' + row['text'] + ' <span class="date">' + prettyDate(d) + '</span>'; timeline.appendChild(section); },](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-24-320.jpg)
![JavaScript (Twitter.init) A vous de jouer! //Create table init : function() { console.log('init'); if (db) { //Have database? Read data db.transaction(function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, username TEXT, created_at TEXT, text TEXT, avatar TEXT)", [], function(result) { Twitter.readStatus(); }, function(tx, error) { Twitter.readStatus(); } ); }); } else { //No database? Just load data and display Twitter.load(); } },](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-27-320.jpg)
![JavaScript (Twitter.readStatus) A vous de jouer! //Read statuses readStatus : function() { console.log('read'); db.transaction(function(tx) { tx.executeSql("SELECT id, username, created_at, text, avatar FROM status ORDER BY id DESC", [], function(tx, result) { var timeline = document.getElementById('timeline'); timeline.innerHTML = ''; for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); Twitter.display(row); } }, function(tx, error) { // Couldn't retrieve tweets return; }); }); },](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-28-320.jpg)
![JavaScript (Twitter.twitterCallback) A vous de jouer! twitterCallback : function(obj) { console.log('callback'); if (db) { var inserts = []; for (var i=0, l=obj.length; i<l; i++) { var status = [ obj[i].id, obj[i].user.screen_name, obj[i].text, obj[i].created_at, obj[i].user.profile_image_url ] inserts.push(status); } Twitter.insert(inserts, Twitter.readStatus); } else { //No database? just display for (var i=0, l=obj.length; i<l; i++) { Twitter.display({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url});} } },](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-29-320.jpg)
![[email_address] Questions?](https://image.slidesharecdn.com/html5-100125092649-phpapp02/85/Jump-Camp-HTML5-32-320.jpg)
Jump Camp - HTML5
- 1. HTML 5 Presentedby David CHAU
- 2. Sommaire Il étaitune fois, HTML Quoi de neuf chez HTML 5? La syntaxe Extensions & APIs Exemples A vous de jouer!
- 3. Il était unefois, HTML 1991: Naissance de HTML par Tim Berners-Lee. 1993-1994: img, formulaire, CSS, tableau 1995-1996: HTML 2.0 1997: HTML 3.2 et HTML 4.0 2000-2006: XHTML 1.0 2007: HTML 5
- 4. Quoi de neufchez HTML 5? HTML5 est le successeur de HTML 4 Définit le langage HTML5 et le xHTML5 Ere des applications web Nouveau modèle structurel Standardisation de nouvelles APIs Travail de séparation entre fond et forme
- 5. La syntaxe text/htmlou application/xml <!doctype html> <html> <head> <meta charset="UTF-8"> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html> <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Example document</title> </head> <body> <p>Example paragraph</p> </body> </html>
- 6. La syntaxe -quelques balises section Définir les différentes sections d’un document article Représenter un text/article d’un blog… aside Indiquer le contenu indirectement lié à l’article lui-même (source d’information, archive…)
- 7. La syntaxe -quelques balises header & footer Représenter l’entête / le pied de page d’une section ou d’une page nav Définir une section de liens de navigation dialog Préciser la séquence d’une dialogue
- 8. La syntaxe -quelques balises legend Utilisé dans fieldset, figure, details figure Regrouper les éléments visuels, tels que images, les vidéos et leur légende
- 9. La syntaxe -quelques balises audio/video Représenter les contenus multimédia canvas Définir les zones graphiques 2D …
- 10. La syntaxe Lastructure
- 11. Extensions & APIs- WebSocket WebSocket Connexion TCP en Full-Duplex standard T raverse proxy et firewall Connexion à d’autres serveur que le serveur d’origine de la page. Entête d’une requête d’1 octet Trame de type texte ou binaire Jetty + Chromium (Nightly builds)
- 12. Extensions & APIs- WebSocket Instancier/connecter un websoket Définir les gestionnaires Communiquer et déconnecter Var wSocket=new WebSoket(“ws://www.websoket.org”); wSocket.onopen=function(evt){alert(“open…”);} wSocket.onmessage=function(evt){alert(“receive…”);} wSocket.onclose=function(evt){alert(“close…”);} wSocket.postMessage(“coucou”); wSocket.disconnect();
- 13. Extensions & APIs- WebSocket Web forms 2.0 Extension des types de input Validation (type, pattern, required, min, max, etc.) Gestion des listes <form> <div id="repeatformcontainer"> <div id="tem1" repeat="template" repeat-min="2" repeat-max="5" > <label>Features</label><input type="text" name="product.[tem1]" value="E.g, Nice eyes"> <button type=remove> Remove</button> <button type=move-up> Move Up</button> <button type=move-down> Move Down</button><br /> </div> <div class="button"> <button type=add template=tem1> Add</button><br /><br /></div> </div> </form> search number range color tel url email date month week time datetime datetime-local
- 14. Extensions & APIs- GéoLocalisation GéoLocalisation S ervice de localisation décorrélé de la source d’information sous-jacente (wifi, GPS, etc.) I f (!!navigator.geolocation) // tester s’il est possible d’utiliser la geoloc If (!!navigator.geolocation) { navigator.geolocation.getCurrentPosition( function(position) { //definir la fonction capable de gerer les positions var info = “Latitude = “+position.coords.latitude +”<br/>Longitude = ”+position.coords.longitude +”<br/>Altitude = “+position.coords.altitude; alert(info); } ); } else { alert(“navigateur non compatible geo loc”); }
- 15. Extensions & APIs- Canvas Canvas API 2D Zone de dessin // tester si le navigateur implémente la spécification fucntion supportCanvas(){ return !!document.createElement(‘canvas’).getContext; } function draw(canvas) { var ctx = canvas.getContext(“2d”); ctx.strokeStyle="rgb(155,255,188)"; ctx.lineWidth=10; ctx.arc(50, 50,Math.PI/180*60, Math.PI/180*50, false); ctx.stroke(); } if (supportCanvas()) { var canvas = document.createElement(‘canvas’); // définir la dimension de zone canvas.height=100; canvas.weidth=100; draw(canvas); document.getElementById('container').appendChild(canvas); }
- 16. Extensions & APIsVideo Standardisation de l’insertion des vidéos I f(!!document.createElement(‘video’).canPlayType) Web workers L ancement de scripts en tâche de fond Coûteux en temps d’instantiation et en mémoire. A utiliser judicieusement! http://dev.w3.org/html5/workers/Overview.html#tutorial
- 17. Extensions & APIsBase des données locale Une façon de stocker les information en locale Concept similaire aux cookies, mais pour une plus grosse quantité Gestion des application offline Travailler en offline dnd Drag & drop
- 18. Démonstrations http://html5demos.com http://people.mozilla.com/~prouget/demos/DynamicContentInjection/play.xhtmlhttp://www.abonentendeur.com/mobile.html sur mobile Android ou iPhone http://shwetankdixit.com/testpages/webforms2demo.htm sur Opera 9.5 ou sup.
- 19. A vous dejouer! Réaliser une page HTML5 récupérant les feeds publiques de Twitter et les stocker dans une base de données locale pour pouvoir les relire.
- 20. A vous dejouer! HTML <!DOCTYPE HTML> <html> <head> <meta charset= "UTF-8" > <link rel= "stylesheet" href= "twitter.css" > <title> Twitter public timeline reader </title> </head> <body> <menu> <button id= "load" > ↻ Refresh </button> </menu> <article id= "timeline" ></article> <script type= "text/javascript" src= "twitter.js" ></script> <script type= "text/javascript" > <!-- window.onload = function() { Twitter.load (); document.getElementById ( 'load' ) . onclick = function() { Twitter.load (); } } --> </script> </body> </html>
- 21. JavaScript Récupération desdonnées via Twitter Créer une fonction d’appel à Twitter Créer un Callback traitant les résultats Afficher les résultats A vous de jouer!
- 22. JavaScript (Twitter.load) Avous de jouer! load : function() { console.log('load'); //Remove JSONP scripts var head = document.getElementsByTagName('head')[0]; var scripts = null; scripts = head.getElementsByTagName('script'); for(var l=scripts.length; l--;) { head.removeChild(scripts[l]); } document.getElementById('load').innerHTML = 'Refreshing...'; var url='http://www.twitter.com/statuses/public_timeline.json?callback= Twitter.twitterCallback ’ var script = document.createElement('script'); script.setAttribute(src', url); script.onload = function() { document.getElementById('load').innerHTML = '↻ Refresh'; } console.log(script); head.appendChild(script); },
- 23. JavaScript (Twitter.twitterCallback) Avous de jouer! twitterCallback : function(obj) { console.log('callback'); for (var i=0, l=obj.length; i<l; i++) { Twitter.display ({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url }); } },
- 24. JavaScript (Twitter.display) Avous de jouer! display : function(row) { console.log('display'); var timeline = document.getElementById('timeline'); var section = document.createElement('section'); var d = new Date(); d.setTime(Date.parse(row['created_at'])); section.innerHTML = '<img src="'+row['avatar']+'" alt="" height="24" widht="24"/>'+ '<span class="user">'+row['username'] + '</span> ' + row['text'] + ' <span class="date">' + prettyDate(d) + '</span>'; timeline.appendChild(section); },
- 25. HTML A vousde jouer!
- 26. JavaScript (global) Avous de jouer! var db = null; try { if (window.openDatabase) { db = openDatabase("Twitter", "1.0", "Twitter Feed", 200000); } } catch(err) { }
- 27. JavaScript (Twitter.init) Avous de jouer! //Create table init : function() { console.log('init'); if (db) { //Have database? Read data db.transaction(function(tx) { tx.executeSql( "CREATE TABLE IF NOT EXISTS status (id REAL UNIQUE, username TEXT, created_at TEXT, text TEXT, avatar TEXT)", [], function(result) { Twitter.readStatus(); }, function(tx, error) { Twitter.readStatus(); } ); }); } else { //No database? Just load data and display Twitter.load(); } },
- 28. JavaScript (Twitter.readStatus) Avous de jouer! //Read statuses readStatus : function() { console.log('read'); db.transaction(function(tx) { tx.executeSql("SELECT id, username, created_at, text, avatar FROM status ORDER BY id DESC", [], function(tx, result) { var timeline = document.getElementById('timeline'); timeline.innerHTML = ''; for (var i = 0; i < result.rows.length; ++i) { var row = result.rows.item(i); Twitter.display(row); } }, function(tx, error) { // Couldn't retrieve tweets return; }); }); },
- 29. JavaScript (Twitter.twitterCallback) Avous de jouer! twitterCallback : function(obj) { console.log('callback'); if (db) { var inserts = []; for (var i=0, l=obj.length; i<l; i++) { var status = [ obj[i].id, obj[i].user.screen_name, obj[i].text, obj[i].created_at, obj[i].user.profile_image_url ] inserts.push(status); } Twitter.insert(inserts, Twitter.readStatus); } else { //No database? just display for (var i=0, l=obj.length; i<l; i++) { Twitter.display({ 'id' : obj[i].id, 'username' : obj[i].user.screen_name, 'text' : obj[i].text, 'created_at' : obj[i].created_at, 'avatar' : obj[i].user.profile_image_url});} } },
- 30. JavaScript (Twitter.insert) Avous de jouer! //Synchronous insert insert : function(arStatus, callback) { var status = arStatus.pop(); var sql = "INSERT INTO status (id, username, text, created_at, avatar) VALUES (?,?,?,?,?)"; db.transaction( function (tx) { tx.executeSql( sql, status, function(tx, result){ if (arStatus.length > 0) { Twitter.insert(arStatus, callback); } else { callback(); }}, function(tx, error){ if (arStatus.length > 0) { Twitter.insert(arStatus, callback); } else { callback(); }} ); } ); }
- 31. APIs qui renforcentla mobilité et répondent aux demandes que HTML 4 ne pouvait résoudre Spécification en draft Couplage fort entre HTML et JavaScript Google, Apple, Palm, Mozilla, WebKit, Opera, IE Conclusion
- 32.
Notes de l'éditeur
- #2 HTML a toujours été le langage utilisé pour le web. Il a tout d’abord été conçu comme un langage sémantique afin de décrire des documents scientifiques. Au cours des années, le langage a beaucoup évolué, tout d’abord grâce aux différents navigateurs qui implémentaient de nouvelles fonctionnalités, puis au W3C rédigeant des spécifications permettant de standardiser le langage. Cependant, on s’est aperçu que HTML répondait mal aux exigences des applications web. La spécification de HTML 5 permet de rectifier ce manque ainsi que de mettre à jour les spécifications afin d’apporter des corrections aux différents problèmes mis en avant durant ces dernières années.
- #4 Tim Berners-Lee annonce publiquement le web sur Usenet, il ne cite que le langage SGML, mais donne l’URL d’un document de suffixe .html. Techniquement, il trouvait SGML trop complexe, mais il voulait attirer la communauté hypertexte qui considérait que SGML était le langage le plus prometteur pour standardiser le format des documents hypertexte. De plus, SGML était déjà utilisé par son employeur, le CERN. A l’époque, les premiers éléments du langage HTML comprennent le titre du document, les hyperliens, la structuration du texte en titres, sous-titres, listes ou texte brut, et un mécanisme rudimentaire de recherche par index. La description de HTML est alors assez informelle et principalement définie par le support des web divers navigateurs. Avec le navigateur NCSA Mosaic, HTML connaît deux inventions majeures. D’abord l’invention de l’élément IMG permet d’intégrer des images (dans un premier temps, uniquement des GIF et des XBM) aux pages web (Mosaic 0.10). Ensuite l’invention des formulaires (Mosaic 2.0pre5) rend le web interactif en permettant aux visiteurs de saisir des données dans les pages et de les envoyer au serveur web. Cette invention permet notamment de passer des commandes, donc d’utiliser le web pour faire du commerce électronique. Netscape ajoute le support sur la présentation (clignotement, centrage…) En mars 1995, le World Wide Web Consortium (W3C) nouvellement fondé propose le résultat de ses recherches sur HTML+ : le brouillon HTML 3.0. Il comprend notamment le support des tables, des figures et des expressions mathématiques. Ce brouillon expire le 28 septembre 1995 sans donner de suites directes. Fin 1995, le RFC 1866 décrivant HTML 2.0 est finalisé. Le principal éditeur est Dan Connolly. Ce document décrit HTML tel qu’il existait avant juin 1994, donc sans les nombreuses additions de Netscape Navigator. Le 14 janvier 1997, le W3C publie la spécification HTML 3.2. Elle décrit la pratique courante observée début 1996 , donc avec une partie des additions de Netscape Navigator et d’Internet Explorer. Ses plus importantes nouveautés sont la standardisation des tables et de nombreux éléments de présentation. HTML 3.2 précède de peu HTML 4.0 et contient des éléments en prévision du support des styles et des scripts. Le 18 décembre, le W3C publie la spécification HTML 4.0 qui standardise de nombreuses extensions supportant les styles et les scripts, les cadres (frames) et les objets (inclusion généralisée de contenu). HTML 4.0 apporte également différentes améliorations pour l’accessibilité des contenus dont principalement la possibilité d’une séparation plus explicite entre structure et présentation du document, ou le support d’informations supplémentaires sur certains contenus complexes tels que les formulaires, les tableaux ou les sigles. HTML 4.0 introduit trois variantes du format, destinées à favoriser l’évolution vers un balisage plus signifiant, tout en tenant compte des limites temporaires des outils de production : la variante stricte (strict) exclut des éléments et attributs dits « de présentation », destinés à être remplacés par les styles CSS, ainsi que les éléments pour inclure applet et frame qui sont remplacés par l’élément object réputé plus apte à l’interopérabilité et à l’accessibilité. la variante transitoire (transitional) étend la variante stricte en reprenant les éléments et attributs dépréciés de HTML 3.2, dont les éléments de présentation sont couramment utilisés par les éditeurs HTML de l’époque. la variante frameset normalise la technique des jeux de cadres composant une ressource unique à partir de plusieurs pages web assemblées par le navigateur. Ces variantes perdurent par la suite sans modifications notables en HTML 4.01 et dans le format de transition XHTML 1.0 issu de HTML. La dernière spécification de HTML est la 4.01 datant du 24 décembre 1999. Elle n’apporte que des corrections mineures à la version 4.0. Le développement de HTML en tant qu’application du Standard Generalized Markup Language (SGML) est officiellement abandonné au profit de XHTML, application de Extensible Markup Language (XML). Cependant, en 2004, des fabricants de navigateurs web créent le web Hypertext Application Technology Working Group (WHATWG) dans le but, notamment, de relancer le développement du format HTML et de répondre aux nouveaux besoins sur une base technologique jugée plus aisément implémentable que celle du XHTML 2.0 en cours de conception. Ceci s’inscrit dans le contexte d’une contestation plus générale du mode de fonctionnement du W3C, réputé trop fermé par une partie des développeurs et designers web En mars 2007, tirant la conséquence des réticences d’une partie de l’industrie et des concepteurs de contenus web face à XHTML 2.0, le W3C relance le développement de HTML et crée un nouveau groupe de travail encadré par Chris Wilson (Microsoft) et initialement Dan Connolly (W3C), maintenant Michael Smith (W3C). Il s’agit notamment :de faire évoluer HTML pour décrire la sémantique des documents mais aussi les applications en ligne ;de parvenir à un langage extensible via XML tout en maintenant une version non XML compatible avec les parseurs HTML des navigateurs actuels ;et d’enrichir les interfaces utilisateurs avec des contrôles spécifiques : barres de progrès, menus, champs associés à des types de données spécifiques.Les travaux du WHATWG ont été formellement adoptés en mai 2007 comme point de départ d’une nouvelle spécification HTML 5. Ce document a été publié sous forme de Working Draft le 22 janvier 2008. Parmi les principes de conception évoqués par le groupe de travail figurent en particulier :la compatibilité des futures implémentations HTML avec le contenu web existant, et la possibilité pour d’anciens agents utilisateurs d’exploiter les futurs contenus HTML 5 ;une approche pragmatique, préférant les évolutions aux modifications radicales, et adoptant les technologies ou pratiques déjà largement partagées par les auteurs de contenus actuels ;la priorité donnée, en cas de conflit d’intérêt, aux besoins des utilisateurs sur ceux des auteurs, et par suite, à ceux des auteurs sur les contraintes d’implémentation par les navigateurs ;le compromis entre la richesse sémantique du langage et l’utilité pratique des solutions disponibles pour remplir l’objectif majeur d’indépendance envers le media de restitution. Le développement de XHTML 2.0 est initialement poursuivi en parallèle, en réponse aux besoins d’autres secteurs du web, tels que les périphériques mobiles, les applications d’entreprise et les applications serveurs. Puis, en juillet 2009, le W3C décide la non-reconduction du XHTML 2 Working Group à la fin 2009.
- #5 HTML5 est tout d’abord le successeur de html4 Cette spécification de la W3C permet de définir la nouvelle version du langage HTML ainsi que le xHTML. Elle a pour objectif de passer des documents web vers le web des applications. L’ambition de cette nouvelle itération est donc de supprimer les balises obsolètes, d’en remplacer certaines et d’en introduire de nouvelles afin de donner une structure sémantique plus cohérente aux applications web. HTML s’accompagne des Web Forms 2.0 qui ajoutent de nouvelles fonctionnalités: Le contrôle rudimentaire de type et de la validité des champs une extension considérable des type pour les éléments input Des extensions aux boutons submit Des procédures pour traiter des éléments et des valeurs inattendus un modèle d’évènements générés à partir des composants d’un formulaire Une mise a jour des spécifications de la soumission d’un formulaire De nouvelles API vont ainsi standardiser un certain nombre d’interactions : - L’accès hors ligne et le stockage sur le disque dur (pour une exploitation en mode déconnecté) ; - L’édition en ligne, le drag&drop ; - L’accès à l’historique de navigation… Le travail de séparation entre les données et la présentation continue. Ainsi nous pouvons voir disparaitres certains éléments comme font, center, strike ou u ainsi que les attributs align, background, bgcolor etc.
- #6 HTML 5 nous offre 2 syntaxes possibles: le standard html ou le xhtml. Selon la syntaxe, il faudra indiquer respectivement le type MIME text/html ou application/xml L’encodage des caractères est simplifié coté html. Il peut cependant être indiquer via le header html ou grâce au BOM (Byte Order Mark) en début de fichier. Le doctype défini est case-insensitive. Il permet de s’assurer que le navigateur effectue un rendu en mode standard. Notez que la définition est maintenant très succinte. En effet, les versions précédentes du langage HTML étant basés sur le SGML, une DTD était requise.
- #7 Par exemple un article peut contenir plusieurs sections.
- #11 HTML5 introduit de nouveaux éléments visant à structurer le contenu. Ainsi nous pouvons voir apparaître les éléments section, header, footer, nav, article Prenons l’exemple suivant: Avec HTML 4, l’élément DIV était fortement utilisé afin de structurer une page HTML comme le touilleur-express. Nous aurions donc concu la page de la facon suivante. En HTML 5, la structure de la page change. Ainsi cette page deviendrait ceci.
- #12 Connexion établie au premier contact avec le serveur compatible websocket. Après un accord réciproque des deux parties et certaines vérifications de sécurité la connexion est promu en TCP standard. Concernant le protocole de transport, L’entete ne fait plus que 1 octet. On passe d’un overhead de quelques octets contre les 900 octets associés aux requetes traditionnelles. Les trames son identifiées grâce au seul octet en entete. Dans le cas d’une trame binaire, la longueur de la trame est indiquées dans l’entete. Coté implémentation, pour l’instant je ne connais que Jetty et Chromium. Il me semble que webkit devrait bientôt suivre.
- #13 La spécification html 5 introduit l’interface websoket
- #14 HTML 5 s’accompagne des Web Forms 2.0 qui ajoutent de nouvelles fonctionnalités: Tout d’abord une extension considérable des types de l’élément input. Le type color nous permet d’obtenir une palette de couleurs et un date picker pour le type date. De plus, il offre un contrôle rudimentaire de types et de la validité des champs grâce aux types, mais aussi aux attributs tels que l’attribut pattern, le required ou bien le min et max notamment pour le type number
- #16 Pour tester si le navigateur supporte les canvas, vous pouvez ajouter ce test. Si le navigateur ne supporte pas les canvas, getContext sera indefini.
- #20 Dans ce TP, il faudra juste faire attention à ne pas trop rafraichir les tweets. En effet, Twitter restreints les requetes avec des quotas.
- #21 Tout d’abord, créons notre structure HTML. Inserons le doctype, et l’encodage. Notre page comporte un titre, un menu constitué d’un bouton, d’un élément article vide et de deux balises script. Qui peux me dire pourquoi il existe une balise article vide? Une idée? Cette balise me sert de place-holder afin d’y injecter les tweets. Notez bien que les balises scripts se trouvent dans le body de la page et non dans le head. Je vous expliquerai pourquoi dans les slides suivants.
- #22 Nous en avons fini au niveau HTML pour le moment. Passons maintenant au JavaScript. Le JavaScript va nous permettre de récupérer les données de Twitter, puis de les afficher grâce à une fonction callback qui sera bien évidemment exécuter au retour de l’appel.
- #23 Cette fonction permet de récupérer les feeds publiques de twitter. Tout d’abord, un peu de nettoyage. On récupère l’élément head de la page afin d’y supprimer tous les éléments script qui pourrait s’y trouver grâce à la boucle for. On change le texte du bouton. O n constitue enfin un élément script ayant comme URL l’appel à Twitter à l’aide de l’API JSONP. Dans l’URL, on passe comme paramètre un callback=Twitter.twitterCallback. Au chargement du script, on rajoute une fonction permettant de changer le texte du bouton. Enfin, on accroche notre nouvel élément script à l’élément head.
- #24 Il faut maintenant créer la fonction de callback. Cette fonction est vraiment très simple. Elle itère sur les résultats donnés par la variable obj, et pour chaque élément nous allons faire un affichage grâce à la fonction display.
- #25 Ici, rien de très difficile, Tout d’abord, on récupère notre élément ayant l’id timeline. Dans notre page HTML, cet élément nous sert de place-holder ce qui nous permet d’inserer de nouveaux éléments. Nous créons ensuite un élément section auquel nous y placon une image correspondant à l’avatar de l’auteur du tweet, son message, ainsi que la date. Et voici donc la première version de notre page. Mais où intervient la base de données? Nullepart . Nous ne l’avons pas encore créer.
- #26 Afin d’utiliser la base de données nous allons apporter une petite modification sur la page HTML. Nous allons remplacer le Twitter.load par Twitter.init.
- #27 Nous allons créer une variable globale db contenant notre accès à la base de données. Le test sur window.openDatabase permet de déterminer si le navigateur supporte la base de données. Si oui, nous ouvrons une instance à l’aide de cette fonction.
- #28 Si la variable db n’est pas nulle, nous allons exécuter un script permettant de créer la table dans laquelle seront stockés les messages. La fonction executeSql prends ici 4 paramètres, la requetes SQL, un tableau d’objets correspondant aux variables de la requete. Ici, nous n’avons pas de variable. U ne fonction à exécuter lorsque l’exécution du SQL s’est bien passée et une autre lorqu’il y a eu une erreur. Donc l’instruction dit: dans les 2 cas, exécute la méthod. S i la variable db est nulle, le support a la base de données n’a pas été implémenté. On appelle alors la méthode de récupération des tweets.
- #29 Cette méthode est seulement appelé si le navigateur supporte les base de données. Elle permet de récupérer les entrées de la table. Si la requete s’est bien passée, on vide les entrées dans notre place-holder afin des les recréer. Sinon, on ne fait rien. Mais comment les résultats sont-ils insérés en base? Il faut d’abord modifier la fonction callback.
- #30 Il faut maintenant créer la fonction de callback. Cette fonction est vraiment très simple. Elle itère sur les résultats donnés par la variable obj, et pour chaque élément nous allons faire un affichage grâce à la fonction display.
- #31 Nous avons déjà vu la fonction executeSQL. La fonction insert est récursive. arStatus est une LIFO. Nous dépilons l’élément puis exécutons l’insersion. Quelque soit le résultat, nous rappellons la fonction tant que la pile n’est pas vide. Enfin si elle se retrouve vide, nous appelons la fonction de callback qui est Twitter.readStatus. Maintenant, vous pouvez a nouveau tester. Vous remarquerez que la liste des entrées augmentent å chaque rafraichissement.