![]() |
![]() |
TP1bis HTML5 pour ceux qui ont suivi l'option l'an dernierDe $1IntroductionJe vous propose plusieurs choses :
Travail à faireEcrire 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 NowJSVos 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. |
Powered by MindTouch Deki Open Source Edition v.8.08 |