STIC Discussion:STIC I - exercice 6 (Xerneas)

De EduTech Wiki
(diff) ← Version précédente | Voir la version actuelle (diff) | Version suivante → (diff)
Aller à la navigation Aller à la recherche

Animations -- Maud Bernies (discussion) 15 janvier 2018 à 23:26 (CET)

Bonjour Mattia,

Pouvez vous me dire ce qui ne va pas dans mon doc "ex6test", je ne comprends pas pourquoi les icônes ne tournent pas? contrairement à ceux de "l'exercice6"

http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex6/01-fontawesome/ex6test.html

Dans un second temps l'idée était de déclencher un lien sonore ou une image... ceci rentrerait il dans les contraintes de l’exercice?

http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex6/01-fontawesome/exercice6.html

Par ailleurs, j'ai une autre question - est il possible d'intégrer plusieurs feuilles de styles externes ?

Merci pour votre aide,

Maud

Re: Animations -- Mattia A. Fritz (discussion) 16 janvier 2018 à 00:01 (CET)

Bonsoir Maud,

ce n'est pas un problème d'animation, mais encore une fois de pointage des fichiers. Dans votre test, à la ligne 10 vous avez <link rel="stylesheet" href="http://fontawesome.io">

Votre feuille de style pointe vers le site de fontawesome et non pas vers un fichier .css. Donc toutes les déclarations de style pour afficher les icônes, les faires tourner, etc. ne peuvent tout simplement pas marcher. Vous pouvez comparer avec le fichier de style w3.css à la ligne 6 <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css"> qui pointe effectivement à un fichier .css.

Faites néanmoins attention au fait que pour l'exercice vous devez utiliser des fichiers que vous téléversez sur le serveur tecfaetu.unige.ch, non pas des liens absolus. C'est le même principe que vous mettez en pratique dans la page http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex6/01-fontawesome/exercice6.html. Si vous regardez à la ligne 9 vous avez <link rel="stylesheet" href="./assets/vendor/fontawesome/css/font-awesome.min.css">, c'est à dire un lien au fichier font-awesome.min.css que vous avez téléversé sur votre espace et qui permet d'afficher les icônes et les faire tourner à travers les classes fa-...

Pour l'exercice il vous faut au moins des éléments interactifs, donc oui, vous pouvez utiliser l'interactivité pour déclencher du son, afficher une image, etc. À vous de voir pourquoi et comment l'interaction soutient les objectifs d'apprentissage de votre dispositif.

Oui, vous pouvez ajouter autant de fichiers .css que vous voulez/avez besoin. Il suffit d'utiliser plusieurs fois la balise correspondant dans le <head>...</head> de votre page (faites attention que votre page test n'a pas le head, ni le meta charset) :

<!DOCTYPE html>
<html lang="fr">

<head>
    <title>Titre de la page</title>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- ici le lien vers la feuille de style 1 -->
    <link rel="stylesheet" href="feuille1.css">
    <!-- ici le lien vers la feuille de style 2 -->
    <link rel="stylesheet" href="feuille2.css">
    <!-- ici le lien vers la feuille de style 3 -->
    <link rel="stylesheet" href="feuille3.css">


</head>
<body>
<!-- contenu -->
</body>
</html>

Re: Re: Animations -- Maud Bernies (discussion) 17 janvier 2018 à 15:48 (CET)

Merci Mattia, j'ai tenté de corriger comme je pouvais et de rajouter des choses mais je vois bien qu'il y a toujours des erreurs et que les choses ne sont pas aux bonnes places...

Pouvez vous de nouveau m'aider:

J'aimerai faire apparaitre une image en cliquant sur un bouton mais malgré x tentatives je n'y arrive pas...Les boutons n'ouvrent pas sur les bonnes réponses et emplacements...

http://tecfaetu.unige.ch/web/etu-maltt/xerneas/bernies7/stic-1/ex6/01-fontawesome/ex6test.html

Merci d'avance,

Re: Re: Re: Animations -- Mattia A. Fritz (discussion) 17 janvier 2018 à 16:52 (CET)

Essayez de décomposer le problème en étapes. Si vous voulez afficher une image suite à un click de l'utilisateur vous devez par exemple :

  1. Avoir une condition initiale qui cache l'image, par exemple à travers une propriété de style display: none;
  2. Avoir un bouton qui est associé à un gestionnaire d'événement, par exemple document.getElementById("myButton").onclick = function () { ... }
  3. Injecter un algorithme à l'intérieur de ce gestionnaire d'événements qui modifie la condition initiale de l'image, dans ce cas en modifiant la propriété de style display.

HTML :

<h1>Afficher une image suite à un click</h1>

<!-- Image qui est cachée au début -->
<img id="myImage" src="http://tecfa.unige.ch/gif/server/fapse70.png" style="display:none">

<!-- Bouton -->
<button id="myButton">Afficher l'image</button>

JavaScript :

//Identifier les deux éléments concernés
var btn = document.getElementById("myButton");
var image = document.getElementById("myImage");

//Définir le gestionnaire d'événements
btn.onclick = function () {
  //Injecter la règle qui modifie la propriété de style de l'image
  image.style.display = "block";
}

Voici ce que cela donne -> https://codepen.io/mafritz/pen/XVxOmx

redimensionner photo -- Maud Bernies (discussion) 19 janvier 2018 à 12:59 (CET)

Merci Mattia,

Ma page est presque finalisée... si ce n'est que lorsque je téléverse une fois de plus toutes les interactions disparaissent, je ne pense pas avoir fait d'erreur de placement de fichier et j'espère qu'elles apparaitront chez vous! Voici,

http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex6/01-fontawesome/exercice6.html

En revanche, j'aimerai redimensionner la photo intégrée, mais je ne comprends pas vraiment par quel biais, je vois bien les dimensions mais à quel endroit doit on agir pour les modifier?

Je vous remercie,

Maud B.

Re: redimensionner photo -- Mattia A. Fritz (discussion) 19 janvier 2018 à 15:58 (CET)

Tout ce qui est apparence est idéalement géré par le CSS, vous pouvez donc utiliser des propriétés de style pour déterminer les dimensions des images. Plus d'info par exemple ici : https://www.computerhope.com/issues/ch000055.htm. Vous y trouvez aussi la solution avec les attributs HTML qui est considérée obsolète aujourd'hui, mais ça peut marcher à la limite.

Vos pointages des fichiers semblent corrects, donc techniquement ça marche. En suite, en prévision de l'évaluation, soyez néanmoins au courant que :

  1. Au niveau contraintes techniques : vous utilisez deux frameworks CSS (w3.css et font-awesome) mais pas de bibliothèque/framework/plugin JavaScript
  2. C'est plutôt difficile d'y voir une thématique "MALTT", considérer un processus d'apprentissage le fait d'apprendre qu'il y aura un nouveau site va au delà même de notre flexibilité sur ce critère ;)

Mattia

Re: Re: redimensionner photo -- Maud Bernies (discussion) 22 janvier 2018 à 14:22 (CET)

Bonjour,

Pour répondre à la dernière remarque, l'idée était de proposer une sorte de "teaser" d'un nouveau site, nouveau site qui se trouve être mon sujet dans le cadre de STIC II, projet webmaster... Mais le teaser n'a pas l'effet escompté car il me manque des compétences techniques pour le réaliser...

Re: Re: redimensionner photo -- Maud Bernies (discussion) 23 janvier 2018 à 13:30 (CET)

Bonjour Mattia,

Justement c'est ce que je ne comprends pas, comment modifier les dimensions sur un CSS emprunté à un site? et surtout je n'arrive pas à identifier la source? Ceci vaut pour l'ensemble de la page, je n'arrive pas à retrouver les priorités du CSS...

Merci!

Re: Re: redimensionner photo -- Daniel K. Schneider (discussion) 23 janvier 2018 à 13:48 (CET)

L'image, si j'ai bien compris et celle de la bretelle.

<img id="myImage" src="http://tecfaetu.unige.ch/etu-maltt/xerneas/bernies7/stic-1/ex6/01-fontawesome/assets/img/TheBretelle%27s.jpg" style="display: block;">

Si vous voulez directement ajouter un CSS qui modifie sa taille, il suffit d'ajouter un fichier CSS au début du fichier. C'est le dernier fichier chargé qui a priori.Donc par exemple:

<link rel="stylesheet" href="monstyle.css">

Alternativement, vous pouvez simplement utiliser du CSS inline, qc. que vous faites déjà dans l'exemple. Donc juste ajouter un attribut style=.... et choisir une méthode pour définir la taille.

<image id="myImage" style=" width:200px;  height:40px;" src ....
Re: Re: Re: redimensionner photo -- Maud Bernies (discussion) 23 janvier 2018 à 14:06 (CET)
Replace this text with your reply

Pour bien comprendre dans la version 1 c'est à moi de rajouter un CSS ? avec le lien sur html et les dimensions de l'image en CSS? Dans la version 2 <image id="myImage" style=" width:200px; height:40px;" src .... le lien est dans le html? mais dans ce cas il s'affiche alors que c'est une photo qui doit apparaitre après un clic.

merci pour votre aide,

Maud B.

Marc Metziger Demande de feedbacks -- Marc Metziger (discussion) 20 janvier 2018 à 11:51 (CET)

Bonjour Mattia,

Tout d'abord merci pour les retours sur l'exercice 5.

Je vous fais la même demande sur l'exercice 6 (rapport et page dispo). De plus, pourriez-vous également m'indiquer comment redimensionner les vignettes au sein de lightbox. Le travail proposé sort peut-être du cadre demandé (ce n'est pas une application mais une page web "améliorée"), cela convient-il ?

Marc ex 6

Merci,

cdlt, Marc M.

Re: Marc Metziger Demande de feedbacks -- Mattia A. Fritz (discussion) 20 janvier 2018 à 13:53 (CET)

Bonjour Marc,

Voici quelques remarques sur votre exercice :

  1. En ce qui concerne vos images, elles ne profitent pas des fonctionnalités de Lightbox car vous avez oublié d'incorporer le fichier JavaScript qui permet d'ajouter le comportement dynamique. Si vous regardez le code de l'example sur GitHub, vous pouvez noter que par rapport à votre page vous avez (1) bien mis le lien au fichier CSS, mais (2) il vous manque le lien à la bilbiothèque JavaScript (ligne 19 dans l'exemple GitHub). Si vous ajoutez le pointage, normalement cela devrait répondre également à votre question sur la dimension des vignettes.
  2. Idéalement, on s'attend dans ce cours à une relation explicite entre les interactions et l'apprentissage, donc l'enjeu serait effectivement de trouver des justifications pédagogiques aux éléments que vous ajouter "en plus" par rapport à du simple contenu statique. Ceci dit, la justification peut être également de type ergonomique, comme par exemple votre utilisation des icônes (voir également point successif). C'est à vous de trouver des liens avec des processus d'apprentissage et les illustrer dans votre rapport. Par exemple, en regardant votre dispositif qui porte sur le béhaviorisme, cela m'a apparu assez évident que votre "ascenseur" final peut être vu comme une sorte de récompense pour avoir lu jusqu'à la fin (et le son rappel aussi la cloche de Pavlov). Cela pour vous dire que vous pouvez "vendre" des liens avec des théories/processus d'apprentissage même avec des interactions simple ou principalement ergonomiques.
  3. En ce qui concerne les icônes que vous ajoutez, je trouve c'est une très bonne idée mais je vous conseille d'inclure également le nom de la personne dans le lien : vous mettez à la fois plus en relief le nom de la personne et vous augmentez la surface utile pour cliquer le lien (cf. Loi de Fitts). En général, on essaie d'éviter des liens qui sont exclusivement iconiques pour des raisons d'usabilité/accessibilité.

biblio javascript -- Maud Bernies (discussion) 23 janvier 2018 à 13:59 (CET)

Enfin j'ai essayé de rajouter un élément de bibliothèque/framework/plugin JavaScript avec Anime.js que j'ai téléchargé mais je ne comprends rien à son fonctionnement...

Re: biblio javascript -- Mattia A. Fritz (discussion) 23 janvier 2018 à 14:55 (CET)

C'est difficile de répondre à ce type de message, et en dehors du cadre de ce cours il faudrait éviter de communiquer de cette manière parce que dans la plupart des cas, dans des forums techniques, ces types de message sont tout simplement ignorés.

L'un des enjeux de l'exercice est justement de trouver des éléments externes (1) dont vous avez besoin, et (2) que vous arrivez à utiliser, par exemple en fonction de la qualité de la documentation, de la difficulté, etc. Si vous ne comprenez rien à Anime.js (que je ne connais pas d'ailleurs), alors cela ne sert à rien de vous acharner.

En fonction des objectifs de votre dispositif, vous pouvez à la limite penser d'utiliser Lightbox pour faire apparaître votre image, au lieu de le faire en vanilla JavaScript comme je vous ai conseillé de faire plus haut. Vous pouvez regarder les exemples de Lightbox dans le repository de GitHub associé à l'exercice ou dans la documentation officielle qui est assez exhaustive.

Mattia

Utilisation de la librairie p5.js -- Mariana Mozdzer (discussion) 25 janvier 2018 à 16:19 (CET)

Bonjour, J'essaie d'utiliser la librairie p5.js et l'extension p5.js-speech dans ma page HTML. Voici le lien à l'élément que je vais incorporer à la page: http://ability.nyu.edu/p5.js-speech/examples/02speechbox.html (et le code en github: https://github.com/IDMNYU/p5.js-speech/blob/master/examples/02speechbox.html).

Voici le lien vers ma page: http://tecfaetu.unige.ch/etu-maltt/xerneas/mozdzer7/stic-1/ex5/ex5/pronunciation.html

Mes problémes/questions:

- J'utilise Bootstrap pour la mise en page. Il me semble que le fichier css de Bootstrap a changé le style de mon élément. Par exemple, les lettres dans le input box et le button "speak" ont tourné blanches, comme les boutons de Bootstrap en-bas. Donc, si vous tappez un mot dans l'input dialog, vous ne le voyez pas. Le mot par defaut est "Hello!!!". Le longueur du slider (volume) et trop large. J'ai manipulé le code des plusieurs manières sans succès. J'ai crée aussi une page css "stylesketch.css" et mis le lien en premier et en dernier dans la page html, mais rien a changé. C'est normal, je trouve: Le "speechbox" est un fichier javascript: "sketch.js". p5.js-speech n'a pas de fichier css. Pour utiliser le speechbox, j'ai crée le fichier sketch.js (selon les instructions de p5.js) que se superpose à la page html. J'ai inséré un canvas dans la page html pour donner de space à le speechbox. Le code de github marche aussi bien si je le colle dans le head en utilisant <script>. Mais, ça va contre les contraintes et il y a toujours des problèmes de format. Comment est-ce que je peux adapter le style? J'ai essayé de trouver les élément dans la page css de Bootstrap, mais je n'arrive pas à les trouvés.

- J'ai tout téléchargé dans mon ordinateur et téléverser sur Tecfa. J'ai utilisé la fonction automatique de Brackets pour faire les liens en local. Voici le liens au bout de la page pronunciation.html:

1 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/p5.min.js"></script> 2 <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.5/addons/p5.dom.js"></script> 3 <script src="p5/p5.js-speech/lib/p5.speech.js"></script> 4 <script src="p5/sketch.js"></script>

  1. 1 et #2 sont donnés dans le code en Github - si je les change en local, comme le cas de #3, le speechbox ne marche plus. Par contre le path est correct - est-ce que c'est possible qu'il soit une question de versions de p5.js? Par exemple, #1 en local est "p5/p5.js/p5.min.js" - pas plus que ça et j'ai rien changé par rapport au dossier p5 téléchargé. Ce problème m'empêche de respecter les contraintes!

- La page css de Bootstrap a 7000 lignes de code - est-ce qu'il me faut la "nettoyer" et garder jusque le code que j'ai besoin? Ou est-ce que c'est possible de le laisser comme ça.

Comme la dernière fois, j'ai crée un mini-site. Les autres pages ne sont pas encore finies, en cas ou vous décider explorer le reste!

Merci d'avance pour votre aide! Bien cordialement, Mariana

Re: Utilisation de la librairie p5.js -- Mattia A. Fritz (discussion) 25 janvier 2018 à 17:50 (CET)

Bonjour Mariana,

vous vous êtes lancée dans un exercice assez complexe! D'après ce que j'ai pu voir, le problème semble être dû au fait que vos éléments sont créés à travers p5.js, plus spécifiquement à l'intérieur de votre fichier sketch.js :

function setup() {
    // input dialog:
    input = createInput("Hello!!!");
    input.style("width", 400);
    input.position(150, 220);

    // button:
    speakbutton = createButton('Speak');
    speakbutton.position(150, 260);
    speakbutton.style("color")
    speakbutton.mousePressed(doSpeak);

    // sliders:
    vslider = createSlider(0, 100, 50);
    vslider.position(150, 300);
    vslider.style("width", 400);
    vslider.mouseReleased(setVolume);

    // labels:
    label = createDiv("volume");
    label.position(160, 310);

    // say hello:
    myVoice.speak(input.value());
}

Comme vous pouvez le voir, vos éléments ont quelques propriétés de style qui sont déterminées à travers element.style("..", ...), et d'autres qui sont plutôt héritées par Bootstrap. L'enjeu est de trouver donc un moyen pour avoir le contrôle sur le propriété de style de ces éléments. Vous avez quelques options à essayer et certaines à éviter :

  1. À éviter : n'essayez pas de modifier le fichier de bootstrap, c'est trop long. Il faut le laisser comme ça, même s'il y a des choses que vous n'utilisez pas
  2. Vous pouvez styliser tous vos éléments à travers le JavaScript de sketch.js, donc vous ajouter selon vos besoins par exemple input.style("color", *#000") pour afficher le texte en noir
  3. Vous ajoutez des classes de bootstrap à vos éléments à travers JavaScript, par exemple speakbutton.classList.add("btn btn-primary");
  4. Vous ajoutez des classes que vous créez vous-mêmes dans un fichier css que vous mettez après le lien à bootstrap de la même manière du point précédent

J'espère qu'au moins l'un de ces conseils puisse vous être utile.

Mattia

Re: Re: Utilisation de la librairie p5.js -- Mariana Mozdzer (discussion) 26 janvier 2018 à 09:58 (CET)

Bonjour Mattia, Merci beaucoup pour votre réponse! J'ai utilisé element.style("..", ...) -il a marché très bien pour changer la couleur du texte dans les deux dialog. Par contre, je n'arrive pas à raccourcir le slider. Visuelment, ce n'est pas terrible, donc je le laisse comme ça pour le moment. Mais, ce n'est pas ça que je veux avoir! page: http://tecfaetu.unige.ch/etu-maltt/xerneas/mozdzer7/stic-1/ex5/ex5/pronunciation.html Bonne journée! Mariana

Re: Re: Re: Utilisation de la librairie p5.js -- Mattia A. Fritz (discussion) 26 janvier 2018 à 11:58 (CET)

Le slider (ou input de type range plus précisément) fait partie des "nouveau" input HTML et ses déclarations de style ne sont pas encore toutes officielles (voir par exemple cet article), mais sa taille devrait être contrôlable. À la limite, le slider semble prendre automatiquement toute la taille de son conteneur, donc vous pouvez essayer d'ajouter un "wrap-around" div et styliser celui-ci pour contrôler la taille.

Mattia

page travaux -- Maud Bernies (discussion) 30 janvier 2018 à 23:18 (CET)

Bonjour, Juste une dernière question, j'ai ajouté mes exercices 5 et 6 sur ma page travaux mais ils n'apparaissent pas à l'écran en passant par le serveur. C'est un mystère pour moi.

Merci, Maud

Re: page travaux -- Maud Bernies (discussion) 30 janvier 2018 à 23:38 (CET)

Replace this text with your reply

ok avec chrome ca fonctionne et pas firefox!