Technologies pour le WEB. Plasticité des IHM.

L'objectif de ces TDs est d'acquérir une bonne compréhension des langages du WEB. Pour cela, nous allons implémenter un visualisateur de photographies distribué sur table interactive, tableau, tablette, téléphone et ordinateur de bureau. L'objectif est de pouvoir utiliser l'application sur chaque plateforme indépendemment ou sur un ensemble de plateforme simultanément en distribuant des parties de l'IHM.

Prise en main XHTML, CSS, javascript

Pour bien démarrer, utilisez le navigateur Opera (installez le si ça n'est pas déja fait). Ouvrez une page web et l'environnement DragonFly (menu->page->Developper tools->Opera DragonFly). Naviguez dans les onglets pour vous familiariser avec cette environnement. Explorez en particluer l'ongelt Dociment qui vous donne accès au DOM de la page en cours de visualisation. Ouvrez aussi directement la page w3school pour avoir les références HTML, CSS et javascript sous la main.

Ecrivez une page web simple (titre paragraphe, tableau, div...). Placez y un tableau (table en HTML). Ecrivez à coté un fichier CSS pour la mise en forme de votre page. En particulier faites en sorte de colorer les lignes de façon alternées (gris et blanc par exemple). Explorer les styles display et position pour la mise en page d'une partie de votre page.

Passons maintenant à l'utilisation de javascript, vous remarquez que DrgonFly propose un onglet Console. Il vous permet de tester du code javascript sur la page Web. Testez en particulier les commandes pour sélectionner des éléments du DOM, obtenir ou fixer la valeur d'attributs, créer des éléments HTML, brancher ou débrancher des éléments HTML. Quelques manipulations plus poussées :

Nous allons maintenant travailler avec les évennements en Javascript et plus particulièrement avec les évennements utilisateurs. Rendez vous sur la page du w3school dédiée : http://www.w3schools.com/jsref/dom_obj_event.asp. Placez un bouton sur votre page et définissez l'attribut onclick de sorte à ce qu'on fois pressé, le texte du bouton change. On considère maintenant un div contenant deux paragraphes. il s'agit d'implémenter incrémentalement le comportement suivant :

  1. Lorsqu'on clique sur le premier paragraphe, un message est affiché dans la console (utiliser la command consol.log('...') pour écrire du texte dans la console javascript).
  2. Lorsqu'on clique dans le div un autre message apparait. Constater que si vous cliquez sur le premier paragraphe, les deux messages apparaissent.
  3. Lorsqu'on clique sur le premier paragraphe, son message apparait mais pas celui lié au div (qui n'apprait donc que lorsqu'on clique ailleurs dans le div)...C'est l'occasion de discuter du bubbling des évennements...

De l'utilisation de SVG

Utilisez la bibliothèque ALX_magictouch.js de simulation multitouch pour implémenter les interactions drag, drop et rotozoom sur des éléments d'un canvas SVG. Votre code devra permettre de gérer plusieurs drag et plusieurs rotozoom simultanément. Vous pourrez tester votre code en grandeur nature sur la table interactive ou utiliser ce simulateur java pour tester votre code. Dans vos page web, afin de gérer les évennement multitouch simulés, incluez le code suivant 

 TUIO plugin FAILED to load ]]>
et bien sur incluez la bibliothèque javascript ALX_magictouch.js. Si vous êtes curieux, vous pouvez vous renseigner sur le protocole TUIO qui est utilisé par ces outils.

Attention, il existe des différences entre les navigateurs en ce qui concerne le traitement des évennements SVG. Certains navigateurs, comme Chrome, distribuent les évennements directement sur l'élément SVG concerné (ex: le polygone su lequel vous avez cliqué). D'autre navigateur, comme Opera, distribuent l'évennement au canvas SVG contenant l'élément concerné. Dans ce dernier cas, vous pouvez utiliser la fonction getIntersectionList de l'élément canvas SVG qui permet de retrouver la liste des éléments intersectant un point dont les coordonnées sont exprimées relativement au canvas SVG en question.
Vous devez gérer ces deux cas (distribution à la Chrome ou à la Opera).