Les deux approches précédentes supposent que tout se fait à partir du web : l'éditeur p5Visuel et la page web dans laquelle le programme s'exécute sont tous deux situés sur un même serveur web. C'est la façon la plus simple de procéder, mais on est alors restreint à l'emploi de modèles prédéfinis. Et si on veut définir nos propres modèles, c'est-à-dire exécuter nos programmes dans une page web (ou même un site web) que nous avons nous-même créée ?
Pour créer un modèle d'exécution, on doit télécharger la version légère de p5Visuel et travailler dans le cadre d'un serveur local : la façon de procéder est expliquée à la page suivante. Vous devrez alors modifier le fichier execution.html, et vous pourrez au besoin ajouter divers fichiers d'appoint (images, feuilles de styles, scripts, etc).
Quelles que soient les modifications apportées à execution.html, il est important de conserver les références suivantes à p5Visuel dans l'entête (<head>...</head>) de cette page
<link rel="stylesheet"
href="https://andreboileau.github.io/p5Visuel/execution.css"
type="text/css" />
<script type="text/javascript"
src="https://cdnjs.cloudflare.com/ajax/libs/mathjax/2.7.4/latest.js?config=AM_HTMLorMML-full"
async></script>
<script
src="https://andreboileau.github.io/p5Visuel/p5/p5.min.js"></script>
<script
src="https://andreboileau.github.io/p5Visuel/p5/p5.dom.min.js"></script>
<script
src="https://andreboileau.github.io/p5Visuel/p5/p5.sound.min.js"></script>
<script
src="https://andreboileau.github.io/p5Visuel/p5/bibAB.js"></script>
et le fragment suivant au début du corps (<body>...</body>) de cette page
<div id="messageModalAB"
class="dialogueModalAB">
<div id="contenantModal">
<a
href="#fermetureAB" title="Fermeture" class="fermetureAB"
id="caseFermetureAB">X</a>
<h2
id="messageModalTitre"
style="text-align:center;color:#eb2560">Titre</h2>
<p
id="messageModalAvant">Message avant</p>
<p
id="messageModalParaImg" style="text-align:center;display:none"><img
id="messageModalImage" src=""></p>
<p
id="messageModalApres" style="text-align:center;">Message
après</p>
</div>
</div>
<script src="programme.js"></script>
<script src="utilisateur.js"></script>
Quand le tout sera terminé, on pourra utiliser ce modèle d'exécution localement sur son ordinateur, ou on pourra téléverser le dossier p5VisuelLeger (renommé au besoin) sur son site web pour une utilisation globale.
Soulignons tout d'abord qu'on peut télécharger tous les exemples précédents (approches 1 et 2). Par contre, les modèles suivants sont plus complexes et pourront être étudiés avec profit.