TP 1 - HTML5 2011-2012

Un peu de lecture

• Parcourir les différents liens proposés dans la page des ressources HTML 5, s'attarder un peu plus longuement sur la partie consacrée au widget de type Canvas. Parcourir en particulier le premier lien avec un peu d'attention : http://diveinto.html5doctor.com/canvas.html, il s'agit du chapitre sur les canvas tiré d'un livre en ligne sur HTML5.
• Il est fortement conseillé pour ceux qui veulent développer sans perdre trop de temps d'ouvrir ce PDF qui contient l'ensemble des fonctionnalités de l'API javascript du Canvas HTML5 (ou mieux : l'imprimer sur une page A4) : Canvas QuickRef : http://www.selfhtml5.org/wp-content/uploads/2010/07/HTML5_Canvas_Cheat_Sheet.png 

Quels outils utiliser pour développer ?

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). Mais je l'avoue j'ai surtout utilisé un mélange de xemacs/cygwin et de ultraedit... ! Et Eclipse ? Pourquoi pas... ? Il existe une version spéciale "boostée" pour le développement HTML5/JavaScript : Aptana je n'ai pas testé.

Pavel Arapov, qui développe depuis plusieurs mois un wiki en javascript, recommande les outils portables multi-plateformes WebStorm ou PhpStorm, les outils de la société JetBrains.com (qui est célèbre pour faire le meilleur IDE Java loin devant Eclipse et Netbeans, le réputé IDEA). Ces outils sont gratuits si vous êtes étudiants. Faites en la demande et récupérez en attendant la licence par mail, la version démo 30 jours.

Un peu de codage

Travail à faire :

1. Faites intégralement le tutorial http://dev.opera.com/articles/view/h...nvas-painting/, n'oubliez pas de télécharger les sources à l'aide d'un des premiers liens proposés dans le tutorial.
2. Rajoutez des commentaires pour isoler les parties et vous retrouver dans le code. L'auteur de ce tutorial utilise des astuces classiques de JavaScript pour utiliser des chaines de caractères (entrée dans le menu des outils de dessin) en tant que nom de méthodes, etc. Et oui en JavaScript "line" peut être une String, une variable, un objet, une fonction, une méthode... et tool['line'] et tool.line c'est aussi la même chose, et tool.line(); c'est un appel de pseudo-méthode ! Ne vous inquiétez pas, vous allez vous habituer...
3. Rajoutez de quoi dessiner un cercle (rappel sur le package Math de JavaScript : http://www.javascripter.net/faq/mathfunc.htm)
4. Rajoutez de quoi changer l'épaisseur du trait, à l'aide d'un tag <input> qui fait apparaitre un "slider" avec des valeurs entre 1 et 10 par exemple. A vous de voir le cours pour trouver les bons attributs. Note : ce tag n'est pour l'instant supporté que par les navigateurs à base de WebKit (Chrome, Safari), donc vous pouvez, une fois que cela fonctionne, consulter le site html5please.us pour voir comment trouver des solutions qui marchent dans tous les navigateurs (comme celle-ci : http://www.frequency-decoder.com/201...ange-polyfill/), utilisant le tag html5 si il est supporté, une autre solution sinon...
5. Rajoutez de quoi choisir la couleur du dessin. On trouve de nombreux exemples de widgets de choix de couleur en Javascript (comme celui du paint dans l'image ci-dessous), mais je vous conseille si vous ne voulez pas trop perdre de temps d'utiliser cet exemple : jscolor.zip. regardez juste le fichier demo.html, c'est ultra simple à utiliser. Le tag HTML5 <input type="color"> aurait pu servir malheureusement il n'est pas encore supporté par les navigateurs, comme l'atteste le site http://html5please.us/. Ce site est très utile car il donne toujours une solution de remplacement.
    
6. Vous pourrez vous faire plaisir plus tard en ajoutant tout ce qui vous passe par la tête ! Par exemple, créer un truc comme celui-ci (cliquer l'image pour le tester)... Si vous chercher "paint HTML5" avec google vous trouverez au moins une dizaine d'exemples, chacun avec des fonctionnalités intéressantes. L'année dernière des élèves ont ajouté des options pour choisir l'épaisseur du trait, le contours, la transparence, etc... Pour vous donner des idées allez voir le programme Harmony  qui fait du "dessin procédural". Pour information, ce logiciel utilise le langage processingJS qui est un portage du langage Processing, pour simplifier l'écriture de programme graphiques dans une canvas.

Un peu de réflexion

1. Vous devrez maintenant récupérer les évènements de dessin car nous allons plus tard les transférer sur le réseau pour la version multi-participants, pour cela, vous allez écrire une fonction sendMessage(msg) qui recevra les ordres à transmettre sous la forme d'un objet javascript. Exemple d'objets envoyés : {type:line, x1 : 10, y1 : 10, x2 : 100, y2 : 100} pour dire "je veux que tous les participants aient leur paint qui dessine une ligne de (10,10) jusqu'à (100,100), etc... Dans un premier temps, cette fonction sendMessage ne fera qu'afficher dans la page web ce que vous enverriez sur le réseau. A l'aide de jQuery ou de l'api du DOM, affichez juste dans la page, sous forme de String, les objets que vous envoyez. 
2. Lorsque nous transmettrons réellement ces objets, on les mettra au format JSON à l'aide de la fonction JSON.stringify(message) de JavaScript.
3. Côté récepteur, on transformera les objets JSON reçus en objets javascript à l'aide de la fonction http://api.jquery.com/jQuery.parseJSON/ de jQuery (ce qui est plus simple qu'utiliser la fonction JavaScript pure JSON.parse(jsonObject)