Les étapes

• Choisir une page web existante
• Intégrer la page web ci-dessus et p5Visuel
• Insérer le programme

Vous pouvez toujours créer de toutes pièces votre page web, en utilisant des éditeurs web comme BlueGriffon ou en composant directement le code HTML + CSS + JavaScript dans un éditeur spécialisé comme Brackets.

Vous pouvez aussi utiliser un des nombreux modèles gratuits de page web disponibles sur la toile. Par exemple, le modèle de base de la présente page web a été pris dans une page de modèles gratuits : Simple Slide.

Par la suiite, je l'ai adapté à mes besoins en utilisant l'éditeur web BlueGriffon : à aucun moment, je n'ai eu à écrire directement de code HTML ou CSS ou JavaScript.

Les étapes

• Téléchargez la version locale de p5Visuel et placer ses fichiers et ses dossiers dans le dossier de la page web choisie
• Indiquer à l'éditeur p5Visuel que le programme devra s'exécuter dans la page web choisie (et non plus dans « execution.html »)
• Indiquer dans la page web choisie les ressources utilisées pour l'exécution du programme p5Visuel
  Note : si on n'utilise pas de notations mathématiques, on pourra éliminer les références à MathJax pour alléger
• Créer dans la page web choisie une zone (div) dans laquelle s'exécutera le programme p5Visuel et lui donner un nom (p5Visuel)
• Indiquer dans le programme p5Visuel que tous les éléments créés auront le div « p5Visuel » pour parent

Le programme p5Visuel s'exécute dans la zone ci-dessous

Note : si on n'indique pas que tous les éléments créés par le programme ont le div « p5Visuel » pour parent, ceux-ci seront créés et placés à la fin de la page.

Par la suite, on pourra aussi

• intéger le programme visuel dans l'éditeur (voir le fichier « editionPlus.html »)
• Rendre la page web choisie autonome par rapport à p5Visuel (voir les fichiers « indexAuto.html » et « programmeAuto.js »)