« STIC Discussion:STIC I - exercice 6 (Xerneas) » : différence entre les versions
(→Marc Metziger Demande de feedbacks -- ~~~~ : nouvelle section) |
|||
| Ligne 128 : | Ligne 128 : | ||
Mattia | Mattia | ||
== Marc Metziger Demande de feedbacks -- [[Utilisateur:Marc Metziger|Marc Metziger]] ([[Discussion utilisateur: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 ? | |||
[http://tecfaetu.unige.ch/etu-maltt/xerneas/metzige7/stic-1/ex6/ Marc ex 6] | |||
Merci, | |||
cdlt, | |||
Marc M. | |||
Version du 20 janvier 2018 à 12:51
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 :
- Avoir une condition initiale qui cache l'image, par exemple à travers une propriété de style display: none;
- Avoir un bouton qui est associé à un gestionnaire d'événement, par exemple
document.getElementById("myButton").onclick = function () { ... } - 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 :
- Au niveau contraintes techniques : vous utilisez deux frameworks CSS (w3.css et font-awesome) mais pas de bibliothèque/framework/plugin JavaScript
- 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
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 ?
Merci,
cdlt, Marc M.