« STIC:STIC I - exercice 2 (Edda) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 27 : Ligne 27 :


Suivez d'abord le tutoriel suivant :
Suivez d'abord le tutoriel suivant :
* {{Goblock | '''[[Premiers pas avec JavaScript]]''' }}  
{{Goblock | '''[[Premiers pas avec JavaScript]]''' }}  




Version du 26 septembre 2024 à 13:43

Cet article est en construction: un auteur est en train de le modifier.

En principe, le ou les auteurs en question devraient bientôt présenter une meilleure version.


Cette page fait partie des cours STIC I et STIC II

STIC

Introduction

Ce deuxième exercice du cours STIC I introduit les premiers concepts de programmation une activité guidée pour vos premiers pas avec JavaScript (à distance).

Connaissances/compétences envisagées

À l'issue de cet exercice vous devez avoir acquis les connaissances/compétences suivantes :

  • Exposition "souple" aux grands principes de la programmation (variables, structures de contrôles, boucles, etc.) qui seront approfondis pendant le semestre
  • Comprendre les grands principes des applications interactives et savoir identifier des liens potentiels avec l'apprentissage
  • Introduction "souple" à JavaScript (en prévision des autres périodes) avec un tutoriel étape par étape (Premiers pas avec JavaScript)

Tâche

Lectures et matériel de support

Ces articles proposent les contenus utiles aux finalités pédagogiques du cours. Pour compléter l'exercice ou atteindre les objectifs spécifiques à votre dispositif (voir plus bas), d'autres ressources peuvent être nécessaires.

Dispositif

Suivez d'abord le tutoriel suivant :

Premiers pas avec JavaScript


Un tutoriel vidéo qui montre une version plus simple du projet est également disponible. L'accès UNIGE est nécessaire pour voir la vidéo :

➔ Tutoriel vidéo "Flash card principle"

Ensuite, à partir de l'exemple du tutoriel, réalisez une petite application interactive de type Flash card :

  • Créez une page HTML5 qui contient un mécanisme interactif permettant de switcher entre deux images à travers un bouton
  • Créez/adaptez deux versions d'une image dont le switch entre versions peut représenter un intérêt pédagogique
  • Réutilisez le code de l'exemple de base et adaptez l'interface aux finalités de votre dispositif (e.g. consignes, titre, etc.)
  • Vous n'êtes pas obligé d'inclure le mécanisme du compteur (e.g. si cela n'a aucun sens dans votre application)
  • Si vous êtes à l'aise avec le code, vous pouvez créer une troisième fiche qui s'alterne avec les deux autres (optionnel)

Contraintes

  • Contenu selon vos envies, mais en rapport avec une thématique MALTT
  • Vos deux versions de l'image doivent être en format SVG et vous devez inclure le SVG en tant qu'élément externe
  • Les deux images doivent utiliser des dimensions relatives de type viewport pour s'adapter à la taille de l'écran (voir Introduction à CSS)
  • Vous pouvez utiliser des images déjà créées (avec droit d'utilisation et en citant la source), mais vous devez apporter des modifications au moins à l'une des versions de l'image en SVG, par exemple :
    • Ajouter des labels
    • Changer la couleur
    • Ajouter/masquer un élément
    • ...
  • Si vous utilisez une image créé par quelqu'un d'autre, vous devez ajouter dans le rapport :
    • La citation de la source avec un lien direct à la page qui met à disposition l'image
    • Illustrer les modifications que vous avez apportées et pourquoi

Conseils

  • Vous pouvez adapter le code JavaScript, mais ce n'est pas une obligation. Au contraire, l'objectif de l'exercice est de comprendre ce que vous faites, donc c'est mieux de répliquer exactement le même code, mais le comprendre, plutôt que copier/coller du code trouvé ailleurs.
  • Il s'agit d'un exercice propédeutique au reste du semestre, n'ayez pas peur de faire des choses qui semblent évidentes et ne craignez pas que votre exercice ne soit pas assez complexe : respectez tout d'abord les consignes. Vous aurez la possibilité de vous exprimer davantage lors des prochains exercices.
  • Exploitez cet exercice pour vous familiariser avec l'environnement pédagogique :
    • Demandez de l'aide sur cette page si vous en avez besoin.
    • Vous pouvez même demander un feedback sur votre travail (dispositif et/ou rapport). Pensez à ce propos à bien mettre le lien pour qu'on puisse voir votre production.
    • Si vous avez des questions/commentaires sur le matériel pédagogique, vous pouvez en discuter directement sur la page concernée, ou dans la discussion de cette page, comme vous préférez.
  • Profitez de l'exercice guidé en JavaScript pour explorer les images vectorielles en SVG :
    • Au niveau pédagogique, l'annotation d'images est une technique importante. Voir à ce propos la partie de l'article Création rapide de contenus en ligne sur l'annotation d'images statiques
    • Le travail au niveau des images SVG est une technique dont vous pouvez avoir besoin par la suite (e.g. création de schémas, cours STIC III ou IV, etc.), donc ça vaut la peine de s'y investir
  • Soignez les détails, par exemple :
    • Faites attention que les deux images soient exactement de la même taille pour éviter que le contenu de la page se déplace lors du switch entre une image et l'autre
    • Contrôlez que les images soient de taille convenables : assez grandes pour qu'on puisse les voir, mais pas trop grandes et qui dépassent la largeur de la fenêtre

Critères d'évaluation

Selon la Grille d'évaluation : cliquer sur le devoir dans l'espace Moodle du cours pour voir les critères.

Malus
  • Application ne marche pas
  • Les images ne sont pas en format SVG ou ne sont pas incluses en tant que fichiers externes
  • Vous n'avez pas modifié vous-même au moins l'une des images
  • Vous avez utilisé des images que vous n'avez pas le droit d'utiliser et/ou dont vous ne citez pas la source
  • Code HTML5 mal structuré
Bonus
  • Vraie adaptation aux objectifs de votre dispositif
  • Images SVG de bonne qualité et utiles à montrer un phénomène ou sous-tendre un processus d'apprentissage
  • Adaptation du guidage et des consignes à votre public cible (e.g. âge, compétences techniques, ...)
  • Scénarisation pédagogique claire et cohérente (à qui comptez-vous faire utiliser le dispositif ? dans quel contexte ? etc.)

Rapport

Faites un rapport selon les guidelines des rapports STIC :

En particulier pour cet exercice, essayez de :

  • Dans la partie Objectifs de votre rapport :
    • Identifiez et illustrez la problématique à laquelle vous allez contribuer avec votre dispositif
    • Essayez de préciser au maximum le public cible de votre dispositif
    • Définissez dans quel cadre les utilisateurs peuvent être intéressés à utilisez le dispositif (tout seuls, avec l'aide d'une autre personne, dans le cadre d'un cours, en auto-apprentissage, ...)
    • Soyez raisonnables dans vos attentes : identifier un objectif simple et précis
    • Essayez de viser une compétence bien spécifique, plutôt que quelque chose de générique
  • Dans la partie Design de votre rapport :
    • Illustrez comment votre dispositif arrive à "résoudre" la problématique que vous avez définie dans les objectifs
    • Décrivez l'activité à faire avec le dispositif (i.e. cliquer pour masquer/afficher de l'information) et en quoi cette activité sous-tend aux objectifs d'apprentissage
    • Essayez d'illustrer avec des mots les grandes lignes du fonctionnement de votre dispositif (i.e. imaginez qu'on lise votre rapport avant de voir le dispositif)
  • Dans la section Production
    • Illustrez vos changements à l'image ou aux images SVG

Attention : vu que le dispositif est déjà disponible en grand partie, nous nous attendons à un effort dans la rédaction du rapport, surtout au niveau des objectifs et du design (i.e. scénarisation et guidage pédagogique)

Contribution Wiki

Contribution libre sur l'ensemble de ce wiki (ou wiki anglais) :

Quelques suggestions en rapport avec l'exercice :

Délai

Lundi, 28 octobre à 9:00

Relisez Rapport STIC I et II pour la soumission

Version alternative pour experts

Si vous connaissez déjà un peu de JavaScript, vous pouvez vous lancer dans un dispositif plus complexe en utilisant directement le SVG comme élément interactif :

Ressources

JavaScript

Pour aller plus loin

Bibliographie

JavaScript

Aide

Discussion de cette page

Utilisez la page discussion de cette page pour poser des questions. Pour insérer un nouveau titre, utilisez simplement un "nouveau sujet".

Important: Si vous cliquez sur l'étoile ("Ajouter cette page à votre liste de suivi"), le wiki vous enverra un mail après chaque modification de la page. On vous conseille aussi de régler vos préférences wiki pour tout ce qui est suivi.

Récupérée de « https://edutechwiki.unige.ch/fmediawiki/index.php?title=STIC:STIC_I_-_exercice_2_(Edda)&oldid=179747 »