STIC Discussion:STIC I - exercice 6 (Xerneas)

De EduTech Wiki
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>