Vous n'êtes pas connecté. Connexion
|
|
TP2 : un paint HTML5De $1Table des matières
IntroductionDans ce TP vous allez suivre un petit tutorial qui explique pas à pas comment écrire un programme de type "paint" en HTML5 + javascript. Il utilise le widget "canvas" de HTML5, qui permet de faire beaucoup de choses (vous le verrez en suivant les liens vers les démos et autres tutoriaux sur les canvas. On le présente comme un concurrent de flash...).
Vous avez le choix de l'éditeur pour les fichiers html et javascript, Netbeans est assez gros comme logiciel mais il supporte très bien la syntaxe HTML5 et javascript (avec auto-complétion, indentation automatique etc) Travail à faireUn peu de lecture
Un peu de codage
Un peu de réflexion
Un peu de persistenceNous allons maintenant sauvegarder nos dessins dans une base de donnée SQL du navigateur, le tout depuis du javascript ! La norme HTML5 exige que les navigateurs intègrent une BD SQL légère. Commencez par regarder l'exemple du cours et par le faire fonctionner : http://slides.html5rocks.com/#web-sql-db. Sous chrome, si vous utilisez le raccourci ctrl-shift-i (sous windows, sous mac, faire command-alt-i, sous linux, cherchez donc !), vous verrez la console des développeurs webkit
Regardez maintenant le source du transparent correspondant (vous pouvez le retrouver en faisant "view source" et en cherchant le mot-clé "SQL"). On trouve en particulier le code qui crée la base et la table : function createTable() { db.transaction(function(tx) { tx.executeSql("CREATE TABLE Table1Test (id REAL UNIQUE, text TEXT)", [], function(tx) { log.innerHTML = '"Table1Test" created!' }, onError); }); } Travail à faire
|
Powered by MindTouch Deki Open Source Edition v.8.08 |