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
Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC_Discussion:STIC_I_-_exercice_5_(Xerneas)&oldid=75132 »