![]() |
![]() |
Accueil > Intranet Michel Buffa > Cours web 2.0 Miage de Nice 2011-2012 > TP 1 - HTML5 2011-2012
TP 1 - HTML5 2011-2012De $1Table des matièresIntroductionDans ce TP nous allons jouer avec quelques tags HTML5, en particulier avec le <canvas> et son API JavaScript. Vous verrez, c'est un outil particulièrement puissant. On retrouve une grande partie de ce que l'on connait avec le contexte graphique de Java2D et sur les navigateurs récent, le dessin utilise l'accélération de vos cartes graphiques, ce qui donne de très bonnes performances. Nous allons développer un petit programme de dessin que nous rendrons "multi-participants" dans le prochain TP (oui, du dessin à plusieurs, en même temps !). Pour ceux qui ne sont pas à l'aise en javascript et qui ne connaissent pas JQuery
IntroductionVous allez suivre un petit tutorial qui explique pas à pas comment écrire un programme de type "paint" en HTML5 + javascript, mais pour que cela soit amusant, on lui ajoutera dans un prochain TP un support multi-participants synchrone + un petit chat (en gros, on va faire du dessin à plusieurs en simultané). Ce programme 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). Il existe de nombreux paint mais celui-ci, bien que pas très bien écrit (le javascript n'est pas orienté objet, l'utilisation de jQuery aurait simplifié le code, etc), a une particularité intéressante : il utilise plusieurs canvas superposés pour faire des "calques" et ainsi permettre le dessin "élastique" de manière élégante. Et oui, on peut dessiner un canvas dans un canvas, cela est d'ailleurs recommandé car très performant, voir http://io-2011-html5-games-hr.appspot.com/
Travail à faireUn peu de lecture
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 codageTravail à faire :
|