STIC Discussion:STIC I - exercice 5 (Xerneas)

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.

Bolivie

Côte d Ivoire

Grèce

Thailande

Canada

Inde

Nouvelle Zelande

Tanzanie

Moldavie

Australie

Cordialment

Alessandro

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