STIC Discussion:STIC I - exercice 6 (Baldur)

Modification de homepage possible ? -- Helene Parmentier (discussion) 22 janvier 2022 à 00:08 (CET)

Bonjour, J'aimerais savoir s'il est possible de réaliser l'exercice en faisant évoluer notre page personnelle sur le serveur (en respectant bien entendu les contraintes de l'exercice). Merci d'avance et bon week-end ! Hélène

Re: Modification de homepage possible ? -- Mattia A. Fritz (discussion) 22 janvier 2022 à 11:01 (CET)

Bonjour,

En STIC I presque tout est possible, mais pas tout répond à l'ensemble des consignes. Même si vous respectez les contraintes techniques, idéalement, il faudrait créer un dispositif qui scénarise une activité pédagogique. Ce qui n'est pas le cas d'une page personnelle, liée plutôt à l'identité digitale que nous avons traitée en P1. Si vous faites une page personnelle normale vous aurez sûrement très peu de points sur les critères Guidage et/ou scénarisation pédagogique, et Thématique MALTT.

Je vous conseil donc d'adhérer aux consignes et concevoir plutôt un dispositif pédagogique. Vous pouvez essayer de combiner les deux choses, par exemple en créant un template de page personnelle qui véhicule aussi des principes pédagogiques (e.g. transformer un CV papier en page, informations demandées dans certains domaines, avantages de suivre ce template, etc.). À ce moment, vous pouvez rendre le template comme exercice, avec des zones à éditer par l'utilisateur, et montrer un exemple concret avec votre page personnelle. Mais ce type d'exercice méta sont en général difficile à faire et nécessite une longue réflexion.

À vous de voir ;)

Bien cordialement, Mattia

Re: Re: Modification de homepage possible ? -- Helene Parmentier (discussion) 24 janvier 2022 à 09:36 (CET)

Merci pour votre réponse, c'est très clair.

Bien cordialement, Hélène

Nommer les "objets" dans JS ? -- Victoria Gilles (discussion) 26 janvier 2022 à 16:49 (CET)

Bonjour,

Pour cet exercice, j'ai choisi de réaliser une page avec des polygones qui bougent et que, lorsque l'on passe la souris dessus, leurs noms s'affichent (C'est pour de jeunes enfants). Cependant, je ne sais pas comment les identifier afin de leur attribuer à chacun un nom qui apparaît grâce à un third party code (que je dois encore trouver, mais je pensais à imagehover.css). Dois-je leur donner une "class" ? Dois-je le faire dans JS ou HTML ?

J'espère être assez claire ^^

Voici le lien qui mène à ma page : http://tecfaetu.unige.ch/etu-maltt/baldur/gilles1/stic-1/ex6/polygones/

Merci d'avance !

Victoria

Re: Nommer les "objets" dans JS ? -- Mattia A. Fritz (discussion) 26 janvier 2022 à 17:58 (CET)

Bonjour,

Vous avez créé vos formes avec P5.js, donc il faut pouvoir les manipuler à l'intérieur de votre code P5.js. D'après ce que je sais, P5.js ne permet pas de raisonner en termes d'objets comme j'imagine vous pensez le faire, donc par exemple polygon.mouseOver(doSomething()).

Une solution pourrait être de raisonner en termes de coordonner sur votre canvas. Si votre première forme occupe l'espace x de 0 à 100 et y de 0 à 200, vous pouvez interceptez toutes les coordonnées dans ces marges et faire apparaître un texte avec le nom de la forme. Voir https://p5js.org/learn/interactivity.html pour quelques exemples de ce type.

Si non il vous faut changer totalement de stratégie et utiliser une bibliothèque qui raisonne plus en termes d'objets.

J'espère que ma réponse puisse vous aider !

Bien cordialement, Mattia

P.S. Attention, vous mettez d'abord votre code app.js et ensuite le code p5.js. Même si dans ce cas cela marche, c'est en général mieux d'inverser l'ordre

Re: Re: Nommer les "objets" dans JS ? -- Victoria Gilles (discussion) 27 janvier 2022 à 09:17 (CET)

Bonjour !

Merci pour votre réponse rapide !

C'est noté, je vais essayer de changer de stratégie.

Belle journée,

Victoria

Re: Re: Re: Nommer les "objets" dans JS ? -- Mattia A. Fritz (discussion) 27 janvier 2022 à 12:48 (CET)

Ok, mais n'hésitez pas à revenir sur votre dispositif au besoin : il est déjà assez avancé, donc vous pouvez toujours le garder comme solution de back-up.

Re: Re: Re: Re: Nommer les "objets" dans JS ? -- Victoria Gilles (discussion) 28 janvier 2022 à 10:55 (CET)

Rebonjour,

J'ai essayé de contourner le problème en ajoutant une image en dessous de chaque polygone. Je les ai nommé chacune différemment et j'aimerais leur appliquer l'animation "d'apparition" de texte avec image hover. C'est ce que j'ai tenté de faire avec le premier émoji pour le polygone triangle, mais l'image a disparu... Est-elle passée "derrière" le canevas ? Comment la faire apparaître correctement ?

De plus, je remarque que, lorsque je travaille en local, mes émojis sont bien placés sous chaque polygone, mais lorsque je téléverse sur le serveur, ils changent de place... y a-t-il un moyen de les fixer ?

Merci encore !

Belle journée !

Victoria

Re: Re: Re: Re: Re: Nommer les "objets" dans JS ? -- Mattia A. Fritz (discussion) 28 janvier 2022 à 15:50 (CET)

C'est un effet un peu compliqué parce qu'il faut considérer que le canvas n'est pas un élément, c'est juste une toile composée de pixels. Un pixel est coloré de manière individuelle par rapport aux autres : le fait qu'il y a une forme est juste le résultat de la coloration précise de certains pixels et pas d'autres. Mais le canvas ne comprend pas que les pixels colorés ont un sens "sémantique".

Il est donc difficile de faire interagir le canvas avec le DOM. Donc comme je vous disait plus haut vous avez deux choix :

• Rester dans le canvas et tout faire avec P5.js. Donc, par exemple faire apparaître un text, toujours dans le canvas, quand la souris se trouve à l'intérieur de certains coordonnées
• Passer à une bibliothèque par exemple de gestion des SVG qui vous permet d'agir sur des objets spécifiques, que vous pouvez animer et rendre clickable comme tout autre élément du DOM

Erreur CSS + question exo 6 -- Celina Marques Teixeira (discussion) 2 février 2022 à 13:25 (CET)

Bonjour Mattia,

J'ai 2 questions concernant mon exercice 6 :

- J'ai un souci avec le document CSS pris de Bootstrap qui modifie mon code CSS principal. Pourtant il me semble avoir mis dans le bon ordre les 2 feuilles. Est-ce qu'il y a une erreur dans le head ?

- Et ma 2ème question est est-ce que je réponds aux critères de l'exercice si je n'ai utilisé que du third code provenant de Bootstrap (mais j'ai du code externe CSS et Javascript) ?

Merci d'avance pour ta réponse et belle journée !

Re: Erreur CSS + question exo 6 -- Mattia A. Fritz (discussion) 2 février 2022 à 14:22 (CET)

Bonjour,

Pour la première question il faudrait plus d'infos sur le problème. L'incorporation marche en effet correctement, donc qu'est-ce que vous considérez problématique ?

Pour la deuxième question, oui, Bootstrap a la fois du CSS et du JS externe. Et en plus vous avez la logique de programmation dans votre propre JS, donc vous répondez à cette partie des consignes.

Bien cordialement, Mattia

Re: Re: Erreur CSS + question exo 6 -- Celina Marques Teixeira (discussion) 2 février 2022 à 15:29 (CET)

Replace this text with your reply

Merci beaucoup pour la réponse.

Concernant ma première question, la stylisation de mon application ne correspond pas au code que j'ai dans le fichier CSS (interne). Normalement, ce n'est pas ce style d'écriture qui devrait être appliqué à mon application. J'ai essayé d'apporter des modification à mon fichier CSS mais ça ne modifie pas le style.