STIC Discussion:STIC I - exercice 6 (Aegir)

Questions et feedback provisoire -- Florent Dupertuis (discussion) 4 janvier 2021 à 10:54 (CET)

Bonjour Mattia,

J'ai essayé d'intégrer une animation à partir de third-party code de la bibliothèque p5*js. Cela fonctionne en prévisualisation mais pas une fois les fichiers déposés sur le serveur. Il s'agit de "flocons de neige" qui devraient apparaitre en bas de page. J'ai aussi un problème au niveau du message qui devrait s'afficher seulement après que l'utilisateur ait cliqué sur le bouton "Valider ma production", une fois les fichiers sur le serveur le message est affiché dès qu'on ouvre la page. Pouvez-vous me dire d'où vient le problème?

Par ailleurs, je voulais faire apparaitre l'animation des flocons de neige au niveau du <header> pour qu'ils "tombent" sur le titre. J'ai essayé en modifiant les lignes de code 3 (let snowflakes = []) et 14 (function setup() {}) du fichier app.js, mais sans succès. Pouvez-vous m'indiquer la démarche à suivre?

Et enfin je suis preneur de commentaires pour améliorer mon dispositif notamment sur les points suivants: - validité des chemins d'accès aux fichiers externes; - validité du code présenté (je dois encore améliorer la documentation interne).

Lien vers mon dispositif : http://tecfaetu.unige.ch/etu-maltt/aegir/dupertf9/stic-1/ex6/third-party-code/

Merci d'avance et bonne journée! Florent

Re: Questions et feedback provisoire -- Mattia A. Fritz (discussion) 4 janvier 2021 à 14:08 (CET)

Bonjour,

en ce qui concerne le pointage des fichiers, vous avez des erreurs dans les chemins aux lignes 54 et 55 :

<script src="/assets/path/to/main/p5.min.js"></script>
<script src="/assets/js/app.js"></script>

Lorsque vous mettez un / devant le chemin, vous rendez le chemin relatif à la racine du serveur et par conséquent le chemin n'est pas correcte. Enlevez le / pour obtenir le chemin correct comme vous avez fait pour les fichiers CSS.

Pour les snowflakes, je pense il serait mieux de changer de stratégie. En effet, p5.js utilise un canvas pour créer les dessins et il est donc plus compliqué de combiner avec un élément du DOM, comme vous voulez le faire avec le titre. Si vous voulez garder l'animation des snowflakes, il est probablement plus simple de les faire apparaître dans un div que vous placez à un endroit de la page (e.g. à la fin, comme élément décoratif). Pour ce faire, vous devez ajouter un élément qui sert pour cadre de votre animation et puis modifier la fonction setup de votre code pour identifier cet élément comme containeur de l'animation, par exemple :

HTML

<div id="canvas-animation"></div>

JS

function setup() {
  let myCanvas = createCanvas(1440, 100);
  myCanvas.parent('canvas-animation');
  fill(240);
  noStroke();
}

Enfin, au niveau de l'amélioration, pour la gestion des fichiers externes vous pouvez appliquer la stratégie d'utiliser un dossier vendor pour placer vos fichiers du third party code, comme suggéré dans la page de l'exercice 6. Notamment, vous avez recréé le chemin "path/to/main/" mais qui était simplement un chemin d'exemple. Le placement des fichiers c'est vous-même qui le décidez selon votre organisation.

Commencez par mettre en place un dispositif qui marche correctement et puis éventuellement on peut ré-discuter des améliorations plus sur le fond ;)

Bien cordialement, Mattia

Re: Re: Questions et feedback provisoire -- Florent Dupertuis (discussion) 4 janvier 2021 à 16:27 (CET)

Merci pour votre réponse. C'est bon tout fonctionne, le résultat correspond presque à ce que je souhaitais ^^ Cordialement, Florent

Bibliothèque/framework/plugin JavaScrip -- Orfelis (discussion) 27 janvier 2021 à 12:18 (CET)

Bonjour, Je ne comprends pas comment je peux utiliser les éléments externes dans le serveur tecfaetu.unige.ch. Autrement dit, quel est le chemin d'accès. Merci beaucoup. Bonne journée.