STIC Discussion:STIC I - exercice 6 (Aegir)

De EduTech Wiki
Aller à la navigation Aller à la recherche

1 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

1.1 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 :

55 <script src="/assets/path/to/main/p5.min.js"></script>
56 <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

1 function setup() {
2   let myCanvas = createCanvas(1440, 100);
3   myCanvas.parent('canvas-animation');
4   fill(240);
5   noStroke();
6 }

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

1.1.1 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

2 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.

2.1 Re: Bibliothèque/framework/plugin JavaScrip -- Mattia A. Fritz (discussion) 27 janvier 2021 à 12:42 (CET)

Bonjour Orfelis,

Cette consigne se réfère au fait que vous devez télécharger et ensuite téléverser les fichiers qui permettent à votre code externe (bibliothèque, framework, plugin, feuille de style CSS) d'être incorporés dans votre page HTML5. C'est le même principe de vos fichiers CSS ou JavaScript personnels : vous devez les téléverser sur le serveur tecfaetu.unige.ch et ensuite respecter le pointage relatif dans votre document HTML5.

Donc on vous demande de téléverser les fichiers du code externe de la même façon. Au niveau du chemin d'accès, nous vous proposons une arborescence des fichiers qui place tous les éléments externes dans un dossier assets/vendor, comme suggéré dans la page de l'exercice, mais il s'agit d'un conseil pour mettre en place une bonne pratique. Vous pouvez choisir une organisation de vos fichiers différents du moments que (1) les fichiers se trouvent physiquement sur le serveur tecfaetu.unige.ch ; et (2) votre document HTML5 arrive à les incorpoer correctement à travers les chemins relatifs, e.g.

<script src="assets/vendor/library-name/main-file.js"></script>

Bien cordialement, Mattia