TP2-Annexe2
Transcription
TP2-Annexe2
TP HTML n°2 : Intégration d'un programme Processing dans une page web 1°) Installer Processing sur votre ordinateur Rendez-vous à l'adresse http://processing.org et cliquez sur le bouton Download puis activez l'option No donation (à moins que vous vous sentiez d'humeur généreuse!). S'affiche alors la page qui vous permet de sélectionner la version de Processing à télécharger selon votre système d'exploitation : Windows, MacOSX ou Linux. Au moment où j'écris ce tutoriel, il s'agit de la version 2.0.2. Vous pouvez d'ores et déjà lire et exécuter vos programmes sur votre ordinateur mais il est nécessaire d'installer quelques compléments pour être vraiment complet. 2°) Installation de modes supplémentaires Par défaut, Processing fonctionne en mode Java qui est le mode que vous utiliserez la plupart du temps pour programmer et pour compiler/exécuter votre programme. Mais il existe d'autres modes bien pratiques qui vous seront utiles. Cependant, il ne sont pas intégrés dans l'installation de base de Processing et il faut donc les ajouter ensuite. Pour savoir dans quel mode vous fonctionnez, il suffit de regarder en haut à droite de la fenêtre de Processing : pour l'instant, il doit être indiqué Java. Vous allez installer deux modes supplémentaires : le mode javascript qui permettra de générer du code qui sera facile à intégrer dans votre page web et le mode Android qui vous permettra, si vous le désirer, d'exécuter vos programmes sur votre téléphone portable, par exemple. Le CSS – Intégration d'un programme Processing dans une page web n°1/2 Pour installer le mode désiré, c'est très simple : cliquez sur Java et un menu va s'ouvrir. Cliquez ensuite sur Add mode et une fenêtre apparaîtra qui vous permettra de sélectionner le mode à installer. Il ne vous reste plus qu'à suivre les instructions. 3°) Intégration d'un programme Processing dans votre page web Le mode javascript permet très facilement, en deux clics, de générer le code nécessaire à l'intégration de tous vos programmes Processing dans votre page web. Voici comment s'y prendre : ● Une fois votre programme terminé et fonctionnel, cliquez sur la cellule en haut à droite de la fenêtre de Processing pour passer en mode Javascript. ● Cliquez ensuite sur l'icône Export for web qui se trouve tout à droite de la barre d'icônes. ● Dans la fenêtre qui s'ouvre alors se trouvent les fichiers générés automatiquement et, en particulier, le fichier index.html que vous pourrez modifier à votre convenance pour éventuellement modifier son aspect graphique. Attention : pour que tout fonctionne correctement, les trois fichiers générés doivent être placés dans le même dossier. Il est également fortement recommandé d'utiliser Firefox pour l'affichage. Exemple d'affichage obtenu avec le mode Javascript. Le CSS – Intégration d'un programme Processing dans une page web n°2/2