Accueil > Intranet Michel Buffa > Cours web 2.0 Miage de Nice 2011-2012 > TP 1 - HTML5 2011-2012 > TP1bis HTML5 pour ceux qui ont suivi l'option l'an dernier

TP1bis HTML5 pour ceux qui ont suivi l'option l'an dernier

De $1

Introduction

Je vous propose plusieurs choses :

  • Regarder de très près les bibliothèques de haut niveau au-dessus du Canvas HTML5, en particulier Processing.js (site web : http://processingjs.org/), qui est une version très proche du "vrai processing" et qui permet avec beaucoup plus de confort d'exploiter le canvas HTML5, que ce soit en 2D ou en 3D (la lib se place au-dessus de WebGL dans ce cas). Processing est un langage inspiré de Java, interprété, et destiné aux artistes numériques. Il propose une manière beaucoup plus simple qu'en java de coder des applications graphiques. Le site officiel de la version "classique" de Processing est processing.org, et on trouve des milliers d'exemples de programmes sur le site openprocessing.org. Souvent il suffit de copier/coller le code de ces exemples et ils fonctionneront tels quels ou bien avec de très petites différences dans la version javascript de processing (processing.js)
  • Découvrir WebGL, l'api 3D de HTML5. Je recommande plutot d'en faire via processing ou via d'autres libs de plus haut niveau. Les curieux iront voir en premier l'IDE 3D d'Andor Salga qui propose de très nombreux exemples que l'on peut modifier : http://matrix.senecac.on.ca/~asalga/...bide/index.php
  • Regarder (merci Thomas...) le module NowJS pour le serveur nodeJS, qui permet de manière très confortable de développer des applications multi-participants sans s'ennuyer avec des protocoles d'échanges tordus et autres librairies de webSockets comme nous l'avons fait l'an dernier. NowJS permet de "partager" des objets et des méthodes entre le code javascript tournant dans la page d'un navigateur et le code javascript qui tourne sur le serveur. On peut depuis le serveur appeler une méthode drawLine() qui est définie sur le client, par exemple. Le code du pictionary de l'an dernier se trouve simplifié à l'extrême pour sa partie réseau. Allez donc faire un tour sur le site officiel NowJS.com et regardez les exemples, guides, etc. Un des exemples est un chat minuscule, lorsqu'on télécharge l'archive du guide, on trouve dans cette archive également un chat "multi rooms" qui doit vous rappeler des souvenirs... j'ai testé NowJS avec la version 4.8 de nodeJS. Pour l'installer, j'ai juste téléchargé le zip de cette version à côté de l'endroit où j'avais le nodeJS de l'an dernier (dans home/michel/node4.8 par exemple), puis j'ai mis à jour la commande npm pour qu'elle soit compatible avec les serveurs de modules actuels. Pour mettre à jour npm, faire juste "npm update npm" ! Ensuite j'ai installé, comme indiqué dans le site de nowJS le module socket.io (avec "npm install socket.io). Puis j'ai fait tourner tels quels les exemples donnés sur le site.

Travail à faire

Ecrire un mini paint ou de petits programmes graphiques avec processing.js (2D ou 3D)

Si vous suivez les exemples du site processingjs.org vous verrez qu'on peut soit utiliser l'IDE classique de processing (télécharger processing depuis processing.org, il vient avec un IDE), faire tourner quelques exemples dans cet IDE. Le source des programme que vous écrivez est un fichier qui se termine par .pde, que vous pouvez inclure directement dans votre page HTML5, comme indiqué dans les tutoriaux de processing.js. Vous pouvez aussi copier/coller le code dans un tag <script...>, dans ce dernier cas l'avantage est que vous pourrez communiquer avec du code javascript que vous aurez écrit (par exemple pour envoyer des messages via websocket) ou pour controller l'appli depuis des widgets javascript.

On peut aussi utiliser un IDE "en ligne", tels que : http://code.bocoup.com/processing-js/bespin/ qui est utilisé entre autres par processing.js pour ses tutoriaux interactifs. Allez-y, modifiez le code, de l'exemple dans le lien et faites run, vous verrez bien...

On peut aussi utiliser une bookmarklet firefox telles que http://sanchothefat.com/labs/161/pjsbox dans ce cas il suffit de selectionner des bouts de code processing dans une page web, de cliquer sur la bookmarklet et le code s'exécute et le rendu apparait dans un canvas HTML5.

Pour apprendre processing il existe de nombreux sites, et un ou deux excellents livres (demandez moi pendant le TP), mais une ballade sur les sites officiels + de violents copier/coller sur les exemples les plus simples de openprocessing.org devraient vous en apprendre beaucoup aussi.

Je conseille par exemple, pour commencer à s'amuser, de regarder les mini démos de la page suivante : http://processingjs.org/learning/basic notamment la section Input et Form.

faire marcher de mini exemples de NowJS et essayer de refaire marcher le pictionary de l'an dernier avec NowJS

Vos programmes de l'an dernier ne marchent plus à cause des websockets HTML5 dont l'API a changé pour des raisons de sécurité. Essayez de refaire marcher votre pictionary en commençant par comprendre comment marchent les objets et méthodes partagées de nowJS (faire tourner des exemples, notamment ceux du guide, dont un qui s'appelle "multiroom chat".

Je sais bien que vous n'aurez pas le temps de tout faire mais on continuera pendant le prochain TP.

Mots clés:
 
Images (0)
 
Commentaires (0)
Vous devez être connecté pour poster un commentaire.