STIC Discussion:STIC I - exercice 5 (Xerneas)

De EduTech Wiki
Aller à la navigation Aller à la recherche

Exercice 5 et 6 : fusion -- Marc Metziger (discussion) 10 décembre 2017 à 18:36 (CET)

Bonjour Mattia,

Comment allez-vous ? Remis de la raclette et de la marmite ?

Pour les exercices 5 et 6, j'ai une idée d'une page web unique qui inclurait les contraintes des deux exercices. Cela vous conviendrait-il ou avoir 2 pages séparées est-il un impératif ?

Merci.

cdlt, Marc M.

Re: Exercice 5 et 6 : fusion -- Mattia A. Fritz (discussion) 10 décembre 2017 à 20:44 (CET)

Bonsoir Marc,

ce serait plus simple pour nous si vous sépariez les deux exercices, au moins en deux pages en effet (vous pouvez pensez à un "mini-site" si les deux exercices portent sur le même sujet). Surtout pour cet exercice, les contraintes sont assez similaires et donc il nous serait plus difficile d'évaluer si vous avez effectivement fait "le double" du travail.

Ceci dit, vous pouvez très bien utiliser des éléments externes (en plus de jQuery + jQuery UI) également dans l'exercice 5 si vous le souhaitez.

Bonne fin de dimanche, Mattia

Exercice 5 -- Maud Bernies (discussion) 11 décembre 2017 à 09:36 (CET)

Bonjour, Malheureusement impossible pour moi de venir ce lundi matin... du coup je me permets de passer par la discussion wiki. J'essaye de refaire les exercices, notamment le 5. Par rapport au carré qui est "draggable", faut il au pré alble créer le carré quelque part? si oui où?

Merci,

Maud.

Re: Exercice 5 -- Mattia A. Fritz (discussion) 11 décembre 2017 à 10:04 (CET)

Bonjour,

oui, tout élément doit être créé : une page HTML n'a pas de contenu si vous ne l'ajoutez pas vous-même. Le carré dans les examples de base (svp mettez toujours le lien que ce soit à votre travail à un exemple comme ça on est sûr de parler de la même chose) est un div auquel on a ajouté du style CSS pour le rendre carré.

Regardez le code source de cet exemple : http://tecfaetu.unige.ch/perso/maltt/fritz0/guides/jquery-ui/ex3_draggable.html

À la ligne 26 vous avez : 

<div id="redBox">Drag me!</div>

C'est l'élément qui est draggable. Cet élément à un id="redBox" et vous trouvez ses déclaration de style de la ligne 7 à 19 : 

<style>
#redBox {
	width: 200px;
	height: 200px;
	border: 1px solid #999;
	background-color: #FF0000;
	color: #FFF;
	font-size: 18px;
	text-transform: uppercase;
		text-align: center;
	line-height: 200px;
}
</style>

Enfin, vous devez utiliser JavaScript pour ajouter l'interactivité. Ce qui est fait aux lignes 33-37 : 

<script src="external/jquery/jquery.js"></script>    
<script src="jquery-ui.min.js"></script> 
<script>
$("#redBox").draggable();
</script>

D'abord il faut incorporer jQuery, puis jQuery UI. Et enfin rendre l'élément draggable à travers $("#redBox").draggable();

Il s'agit toujours du même principe :

  1. Vous devez avoir un élément dans votre page (i.e. code HTML) que vous souhaitez rendre interactif. Dans ce cas, l'interactivité consiste à le rendre "draggable". Cela peut être un "carré" (i.e. un div avec des définitions de style qui le rende carré), mais n'importe quel autre type d'élément que vous pouvez avoir dans une page HTML. Techniquement vous pouvez rendre une vidéo "draggable" si vous le voulez.
  2. Vous devez pouvoir l'identifier, dans ce cas à travers la notation $(element), donc par exemple :
    • $('#mySquare') si l'élément HTML que vous avez dans votre page à un attribut id="mySquare" (e.g. <div id="mySquare"></div>)
    • $('.myDraggableElements') si l'élément ou les éléments ont un attribut class="myDraggableElements"
  3. Ajouter l'interactivité, dans ce cas avec la méthode .draggable() pour attribuer la fonctionnalité glisser/poser, donc par exemple :
    • $('#mySquare').draggable() -> l'élément avec id="mySquare" peut être trainé
    • $('.myDraggableElements').draggable() -> tous les éléments avec class="myDraggableElements" peuvent être trainés

Mattia

Re: Re: Exercice 5 -- Maud Bernies (discussion) 11 décembre 2017 à 10:38 (CET)

Merci Mattia, mais voilà je rencontre plusieurs problèmes...avec l'interactivité notamment qui ne fonctionne pas. J'ai du oublier des choses ou mal faire les liens... et je ne comprends toujours pas comment insérer une image... http://tecfaetu.unige.ch/stic-1/ex5/exercice5.html

Merci de nouveau

Maud

Re: Re: Re: Exercice 5 -- Mattia A. Fritz (discussion) 11 décembre 2017 à 12:01 (CET)

Votre lien n'est pas correcte :(

Le lien correcte serait : http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex5/exercice5.html

Cela ne marche pas parce que vous n'avez pas incorporé les fichiers de la bibliothèque jQuery et jQuery UI. Regarder encore une fois le code de l'exemple que je vous ai illustré dans mon message précédent, ligne 33-37 : il faut pointer à ces fichiers pour que cela marche, et ces fichiers doivent se trouver physiquement dans votre dispositif (parce qu'on le demande pour l'exercice, si non ils pourraient être aussi ailleurs sur internet, mais il faut en tout cas qu'ils existent). Référez vous à ce que l'on a vu pour l'exercice 6 : https://edutechwiki.unige.ch/fr/STIC:STIC_I_-_exercice_6_(Xerneas)#D.C3.A9mo_incorporation_de_third-party_code_dans_un_projet

Au niveau du détail, en plus, l'attribut id est censé être unique dans une page (si vous notez dans l'exemple, il n'y a qu'une redBox, pas plusieurs). Donc si vous voulez rendre plusieurs éléments "draggable", utilisez plutôt l'attribut class.

Re: Re: Re: Re: Exercice 5 -- Maud Bernies (discussion) 11 décembre 2017 à 13:55 (CET)
Replace this text with your reply

Pas facile de comprendre par ce biais... j'avais bien intégré le code JS et je viens de rajouter les fichiers mais toujours rien...

Re: Re: Re: Re: Re: Exercice 5 -- Mattia A. Fritz (discussion) 11 décembre 2017 à 14:13 (CET)

Ajouter les fichiers signifie :

  1. Téléverser tous les fichiers nécessaires sur le serveur. Pour le moment vous avez les fichiers jquery-ui.js et jquery-ui.css. Il vous manque donc la "bilbiothèque-mère" jQuery
  2. Insérez dans l'HTML de votre page les pointages à ces fichiers

J'ai modifié la page jQuery UI pour rendre ce passage plus claire : https://edutechwiki.unige.ch/fr/JQuery_UI#Fichiers_obligatoires_.C3.A0_inclure_dans_votre_page

Contrôlez bien que :

  1. Vous incorporez les trois fichiers nécessaires (le CSS dans le head et les deux fichiers JavaScript avant la balise de clôture /body)
  2. Les pointages (i.e. les chemins relatifs) sont corrects
  3. Vous insérez votre code, par exemple 
       <script>
        $("#trompette").draggable({
            cursor: "move",
            axis: "x",
            containment: "body"
        });

    </script>
    après l'incorporation des fichiers JavaScript

Re: Re: Re: Re: Re: Re: Exercice 5 -- Maud Bernies (discussion) 11 décembre 2017 à 21:50 (CET)

Replace this text with your reply

Merci, je vais essayer de refaire tout ca... Je pensais venir la semaine pro à l'Uni, mardi prochain notamment, serez vous là? Merci, Maud

Re: Re: Re: Re: Re: Re: Re: Exercice 5 -- Mattia A. Fritz (discussion) 12 décembre 2017 à 11:19 (CET)

Non, j'ai un workshop sur les méta-analyses statistiques la semaine prochaine. Mais vous pouvez contacter Stéphane par email et vous mettre d'accord avec lui pour un RDV.

Mattia

Disponibilité pour aide STIC -- Maud Bernies (discussion) 15 décembre 2017 à 14:55 (CET)

Bonjour Mattia, Je n'ai pas de nouvelles concernant Stéphane à savoir si celui ci peut être disponible mardi prochain.

Si ce n'est pas le cas, j'aimerai programmer une autre venue la semaine du 8 janvier, serez vous là?

Merci,

Maud

correction exercice -- Alessandro MINNECI (discussion) 15 décembre 2017 à 19:40 (CET)

Bonjour,

Dans l'exercice précédent vous avez marqué que je ne devais pas toucher l'exercice.

Par contre es-ce que je peux marquer comme participation le fait d'avoir trouvé un petite erreur dans l'exercice 5. On retrouve des div class dans un paragraphe. 

<p>
<div class="item amerique">Bolivie</div>
<div class="item afrique">Côte d Ivoire</div>
<div class="item europe">Grèce</div>
<div class="item asie">Thailande</div>
<div class="item amerique">Canada</div>
<div class="item asie">Inde</div>
<div class="item oceanie">Nouvelle Zelande</div>
<div class="item afrique">Tanzanie</div>
<div class="item europe">Moldavie</div>
<div class="item oceanie">Australie</div>
</p>

Cordialment

Alessandro

Re: correction exercice -- Mattia A. Fritz (discussion) 16 décembre 2017 à 11:31 (CET)

Bonjour,

svp, lisez bien nos feedback. Nous n'avons pas dit que vous ne devez pas "toucher l'exercice". Nous avons dit : «Vous pouvez changer les pages des exercices, mais elles ont la tendance à être utilisées juste pour le cas spécifique de l'exercice. Idéalement il faudrait contribuer aux pages "normales"»

Donc oui, bien sûr que vous pouvez corriger des erreurs et ceci est pris en compte pour la contribution wiki (comme il a été fait pour votre exercice 3 d'ailleurs).

Mattia

espace -- Alessandro MINNECI (discussion) 15 décembre 2017 à 19:43 (CET)

Bonjour,

Je voulais savoir s'il est considéré juste de mettre un paragraphe

pour créer un espace entre deux paragraphes, voir entre deux objets, tel que deux boutons pour les espacer.

Cordialement

Alessandro

Re: espace -- Mattia A. Fritz (discussion) 16 décembre 2017 à 11:43 (CET)

Si je comprends bien, vous voulez faire quelques chose du style : 

<button>Mon premier bouton</button>
<p><!-- vide juste pour espace --></p>
<button>Mon deuxième bouton</button>

Si c'est bien cela, alors non, idéalement les aspects de layout (y compris les espacement) doivent être gérés à travers le CSS. Si vous voulez un bouton par ligne, vous pouvez ajouter une liste : 

<ul class="listOfButtons">
  <li><button>Mon premier bouton</button></li>
  <li><button>Mon deuxième bouton</button></li>
</ul>

En ensuite utiliser le CSS : 

ul.listOfButtons {
  margin-left: 0px;
  padding-left: 0px;
}

ul.listOfButtons li {
  list-style: none;
  /* à modifier selon l'espace */
  margin-bottom: 25px;
}

Re: Re: espace -- Alessandro MINNECI (discussion) 18 décembre 2017 à 11:53 (CET)

Replace this text with your reply

Bonjour,

Merci pour la réponse.

Bonnes fêtes

Cordialement

Alessandro

Téléversement exercice5 -- Maud Bernies (discussion) 12 janvier 2018 à 11:03 (CET)

Bonjour Mattia, et bonne année à vous!

J'ai tenté de téléverser mon exercice 5 mais une fois de plus je ne retrouve pas le doc tel qu'il devrait apparaitre, j'ai du donc oublier de téléverser des fichiers mais je ne vois pas lesquels, pouvez vous m'aider?

Par ailleurs autre problème, lorsque je copie colle l'url, ce n'est pas le bon exercice que je retrouve....

Du coup, je ne vous envoie pas l'url ... mais pouvez vous me dire si en allant sur le serveur (exercice 5) vous retrouver - le bon exercice (les familles d'instruments) - quels fichiers sont manquants pour avoir la mise en forme et effet drag and drop manquant?

Merci!

Maud

Re: Téléversement exercice5 -- Mattia A. Fritz (discussion) 12 janvier 2018 à 12:08 (CET)

Bonjour Maud, bonne année à vous aussi.

Je vois cet exercice sur votre espace travaux : http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex5/exercice5.html

Tout a l'air de marcher correctement d'après ce que je vois : vous avez bien mis en place les fichiers nécessaires pour faire du drag&drop.

Mattia

Re: Re: Téléversement exercice5 -- Maud Bernies (discussion) 12 janvier 2018 à 13:28 (CET)

Replace this text with your reply

Alors c'est un mystère car de mon côté, en cliquant sur votre lien, cela me ramène toujours à une autre page???

le lien sur l'index (rapport) est il également correct pour vous?

Si oui serait il possible d'avoir un retour formatif? je ne sais pas si je suis encore dans les délais...?

Merci d'avance,

Maud

Re: Re: Re: Téléversement exercice5 -- Mattia A. Fritz (discussion) 12 janvier 2018 à 16:45 (CET)

Oui, votre rapport est également au bon endroit. En général, vous respectez toutes les contraintes demandées pour l'exercice, et même si vous avez gardé la structure de l'exemple donné au cours, vous avez apportez des éléments supplémentaires intéressants. D'abord, vous avez bien exploité le fait qu'on peut rendre tous les éléments "draggable", et l'utilisation des images au lieu des noms des instruments représente une bonne intégration d'éléments multimédia. Par contre, je ne vois pas dans votre rapport si vous avez fait vous-même les images ou vous les avez récupérées ailleurs. Ensuite, vous faites un bon guidage de l'utilisateur et l'agencement de votre page permet en effet de réduire le trajet nécessaire pour déplacer les images. Peut-être la taille des images et des conteneurs peut être augmentée pour favoriser ultérieurement la reconnaissance visuelle des instruments.

Rappelez-vous de modifier la partie sur la contribution wiki dans votre rapport comme nous en avons discuté pour vos exercices précédents.

Bien cordialement, Mattia

Re: Re: Re: Re: Téléversement exercice5 -- Maud Bernies (discussion) 12 janvier 2018 à 23:57 (CET)
Replace this text with your reply

Merci pour ce retour Mattia.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_I_-_exercice_5_(Xerneas)&oldid=76104 »