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/...heat_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 :
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)...

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 (n'oubliez pas le fil rouge de ce cours : un pictionary multi-joueurs !), pour cela, vous ajouterez un gestionnaire d'événements sur la souris, et vous commencerez par écrire (en français) la description des dessins ("ligne droite dessinée entre (12,15) et (134, 145)", "cercle dessiné en (59, 37) de rayon 45", "dessin à main levé, path="(12, 16), (25, 45), (46, 67), etc...), ). Pour afficher ces phrases dans la page, vous utiliserez l'API du DOM de javascript, le mieux est de vous inspirer des exemples présents dans les sources que vous avez déjà vu (affichage de la liste des amis dans le TP 1, affichage interactif dans les transparents du cours d'aujourd'hui...)
2. Une fois vos traces validées, vous stockerez ces événements de manière plus formelle sous la forme d'objets javascript (un array de points pour le dessin à main levé, etc.). Réflechissez à un format facilement transmissible sur le réseau et facilement décodable plus tard par le destinataire ! L'exemple "Canvas Painter" ci-dessus, bien que complexe, fait déjà ce travail.