STIC Discussion:STIC I - exercice 2 (Volt)

De EduTech Wiki
Aller à la navigation Aller à la recherche
La version imprimable n’est plus prise en charge et peut comporter des erreurs de génération. Veuillez mettre à jour les signets de votre navigateur et utiliser à la place la fonction d’impression par défaut de celui-ci.

Path SVG -- Stephanie Perrier (discussion) 10 octobre 2015 à 18:40 (CEST)

Bonjour,

J'ai commencé de faire l'exercice 2. Il s'agit d'un jeu de découverte des antonymes. Lorsqu'on clique sur la bulle à coté du mot correspondant, la bulle est cencée se déplaçer selon un path définit ( ligne grise). Malheureusement la bulle ne se déplace pas selon la ligne grise définie. J'ai perdu beaucoup de temps à relire mon code mais rien y fait. Est-ce que qqn pourrait m'aider ?

Les fichiers se trouvent sur le serveur ici :

http://tecfaetu.unige.ch/etu-maltt/volt/perrisd0/stic-1/ex2/antonyme.html

Merci pour le coup de main !

Stéphanie

Re: Path SVG -- Daniel K. Schneider (discussion) 10 octobre 2015 à 20:24 (CEST)

AnimateMotion n'est pas sympa. Le chemin qu'on donne indique le chemin A PARTIR du point de départ. Donc voili 3 animations qui marchent (rouge, bleu, vert). A chaque fois le chemin est le même. Il part de (0,0) et va vers (405,205)

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Created with Inkscape (http://www.inkscape.org/) -->
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="900" height="600" id="svg2">

 <!-- Mots de base--> 
 
 <text dx="50" dy="100" style="font:35px Times New Roman" fill="blueviolet">Difficile</text>
 <text dx="50" dy="200" style="font:35px Times New Roman" fill="blueviolet">Vrai</text>
 <text dx="50" dy="300" style="font:35px Times New Roman" fill="blueviolet">Rapide</text>
 <text dx="50" dy="400" style="font:35px Times New Roman" fill="blueviolet">Propre</text>
 <text dx="50" dy="500" style="font:35px Times New Roman" fill="blueviolet">Flexible</text>
 
 <text dx="600" dy="100" style="font:35px Times New Roman">Faux</text>
 <text dx="600" dy="200" style="font:35px Times New Roman">Lent</text>
 <text dx="600" dy="300" style="font:35px Times New Roman">Facile</text>
 <text dx="600" dy="400" style="font:35px Times New Roman">Sale</text>
 <text dx="600" dy="500" style="font:35px Times New Roman">Rigide</text>
 
 
 <!-- Chemin dessiné-->    
  <path d="M195,95 L600,300" stroke="lightgrey" stroke-width="2" fill="none" id="D_Path"/>

 <!-- Chemin qui additionne des coordonnées aux 195,95 -->
 <path d="M0,0 L405,205" stroke="yellow" stroke-width="2" fill="none" id="Move_Path"/>
  
 <!-- Boutons à cliquer(3 sur 5 pour le moment) -->
 
 <circle id="Difficile" r="10" cx="190" cy="92" stroke="#000000" fill="red" fill-opacity="0.3" style="cursor:pointer;"/>
 <circle id="Vrai" r="10" cx="190" cy="194" stroke="#000000" fill="blue" fill-opacity="0.3"/>

 <circle id="Rapide" r="10" cx="190" cy="294" stroke="#000000" fill="green" fill-opacity="0.3">
   <animateMotion id="pouce_gauche_ai3" begin="Rapide.click" dur="4s"
		  fill="remove" path="M0,0 L405,205">
   </animateMotion>
 </circle>

 <circle id="Propre" r="10" cx="190" cy="394" stroke="#000000" fill="#e0e0e0" fill-opacity="0.3"/>
 <circle id="Flexible" r="10" cx="190" cy="494" stroke="#000000" fill="#e0e0e0" fill-opacity="0.3"/>
 
 <!-- animation bouton 1 (Difficile) -->
 <animateMotion id="pouce_gauche_ai" begin="Difficile.click" dur="4s"
		fill="remove" xlink:href="#Difficile">
   <mpath xlink:href="#Move_Path" />
 </animateMotion>
 
<!-- animation bouton 2 (Vrai) Lien tout en un -->
 <animateMotion id="pouce_gauche_ai2" begin="Vrai.click" dur="4s"
		fill="remove" xlink:href="#Vrai" path="M0,0 L405,205">
 </animateMotion>

</svg>

Consignes -- Joyce Maurin (discussion) 18 octobre 2015 à 12:11 (CEST)

Bonjour,

Je suis en train de remplir mon rapport pour l'exercice deux et j'ai un problème de compréhension d'une des consignes.

Lorsque vous dites "indiquez avec quelle configuration on peut voir votre contenu", qu'entendez-vous par "configuration" ?

Merci d'avance,

Joyce

Re: Consignes -- Daniel K. Schneider (discussion) 18 octobre 2015 à 12:46 (CEST)

Configuation = Machine (OS) et navigateur. Par exemple Win8/Firefox 41

La raison est juste qu'il peut tjrs avoir qqs. trucs encore mal implémentés. Donc on peut vérifier si c'est votre faute ou celui de navigateur.

Voir: http://caniuse.com/#search=svg

- salutations !

Re: Re: Consignes -- Joyce Maurin (discussion) 18 octobre 2015 à 12:56 (CEST)

Merci beaucoup pour votre réponse si rapide !

Bonne journée !

(PS: désolée pour les changements successifs de la discussion, fausse manipulation !)

Appel à participation -- Joyce Maurin (discussion) 19 octobre 2015 à 11:03 (CEST)

Bonjour tout le monde !

Je vous rappelle qu'il est demandé de participer à nourrir ce wiki pour l'exercice 2 aussi. Ainsi, je serais ravie d'avoir l'aide de l'un ou l'une d'entre vous pour m'aider à réaliser un Tutoriel SVG-editor. En effet, ça me prend plus de temps que je ne le pensais et plusieurs avis valent mieux qu'un. De plus, il y a quelques fonctionnalités dont je ne comprends vraiment pas l'utilité ! (rire)

La description des outils doit se faire ainsi : le nom de l'outil, description de l'icône si sa compréhension peut sembler difficile, ce que ça donne en dessin et langage SVG avec le nom de l'élément entre "<>"

Si vraiment la personne est très motivée et très en avance sur ses autres livrables, elle peut aussi faire un tableau comparatif avec à gauche le dessin et à droite sa retranscription en langage SVG comme il apparaît dans la fenêtre de SVG-Editor.

Bonne journée !

Joyce

Police -- Lydie BOUFFLERS (discussion) 21 octobre 2015 à 15:40 (CEST)

Bonjour,

j'ai un souci de police dans une des pages wiki.

Après avoir noté un bout de code, la police à changer

voici la page : [1]

Le paragraphe est le 4.1...

J'ai cherché dans les outils format mais je ne trouve pas comment faire.

Merci par avance,

Lydie

Re: Police -- Mattia A. Fritz (discussion) 21 octobre 2015 à 16:08 (CEST)

Bonjour,

le paragraphe 4.1 me semble ok. J'ai trouvé plutôt une balise code qui n'était pas bien fermée dans le paragraphe 4.2.1 dans la partie "Tout d'abord, un rappel sur l'utilisation de la balise image". J'ai modifié et la page devrait s'afficher correctement maintenant.

Bien cordialement, Mattia

Re: Re: Police -- Lydie BOUFFLERS (discussion) 21 octobre 2015 à 17:04 (CEST)

OK, c'est parfait.

Merci Mattia

Révision exercice -- Romero.Claudia (discussion) 27 octobre 2015 à 22:42 (CET)

Bonsoir, j'ai rendu mon exercice numéro 2, mais il a des erreurs, en fait je n’y arrive toujours pas. J’ai changé la position des éléments pour qu’ils ne bougent pas (absolute), ainsi que d’autres corrections, mais je ne parviens pas à faire l’animation que je souhaite. Je voudrais, s’il vous plaît, savoir quelles sont les erreurs pour que ça fonctionne finalement. J’ai mis un nouvel exercice ici

http://tecfaetu.unige.ch/etu-maltt/volt/romerca0/svg-pour-corriger/exercice2.html

merci d'avance Claudia

Re: Révision exercice -- Daniel K. Schneider (discussion) 28 octobre 2015 à 09:20 (CET)

Validez, SVP déjà votre code. Il faut toujours commencer par là. Le suivant est faux, car la balise animate est fermée deux fois: Une fois par "/>" et une fois par "</animate>"

     <animate fill="freeze" dur="0.8s" from="41" to="0" attributeName="y" begin="0"/></animate>
                                   

https://validator.w3.org/nu/?doc=http%3A%2F%2Ftecfaetu.unige.ch%2Fetu-maltt%2Fvolt%2Fromerca0%2Fstic-1%2Fex2%2Fsvg%2Fexercice2.html