Pages récentes

Modifier
la page

Nouvelle
page

Imprimer
la page
Page modifiée à 07:31, 9 Fév 2012 par MichelBuffa
1
Accueil > Intranet Michel Buffa > Cours web 2.0 Miage de Nice 2011-2012 > TP 1 - HTML5 2011-2012

TP 1 - HTML5 2011-2012

De $1

  1. 1. Introduction
  2. 2. Pour ceux qui ne sont pas à l'aise en javascript et qui ne connaissent pas JQuery
  3. 3. Introduction
  4. 4. Travail à faire
    1. 4.1. Un peu de lecture
    2. 4.2. Quels outils utiliser pour développer ?
    3. 4.3. Un peu de codage
    4. 4.4. Un peu de réflexion
  5. 5. Pour ceux qui veulent aller plus loin

Introduction

Dans 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

Introduction

Vous 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/

Snap3.jpg

Travail à faire

Un 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 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