TP 1 - HTML5

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 

Un peu de codage

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... !

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 de quoi dessiner un cercle,
3. 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.
4. 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...

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 fonctuon JavaScript pure JSON.parse(jsonObject)