STIC:STIC I - exercice 2 (Xerneas)

Cette page fait partie des cours STIC I et STIC II

Introduction

Ce deuxième exercice du cours STIC I introduit les premiers concepts de programmation et computational thinking à travers la création d'une première application interactive avec Scratch, un logiciel développé par le MIT.

Connaissances/compétences envisagées

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

• Développer une perspective critique sur la pensée computationnelle et le rôle de l'informatique à l'école
• Comprendre les grands principes de la programmation (variables, structures de contrôles, boucles, ...)
• Comprendre les grands principes des applications interactives et savoir identifier des liens potentiels avec l'apprentissage
• Utilisation de Scratch en tant qu'outil de développement, mais également de transfert de connaissance sur la programmation

Prérequis

Lecture obligatoire :

• Introduction à la programmation

Activité en salle de classe

Programme

• 09:00 - 10:00 Présentation du cours
• 10:00 - 10:30 Hands-on Scratch + explication de l'exercice
• -- Pause --
• 11:00 - 12:30 Introduction à JavaScript

Présentation du cours

Thématiques

Introduction à STIC I :

• Perspective du cours
• Pensée Computationnelle (Computational Thinking)
• Interactivité/Interaction et apprentissage

Support

Support utilisé :

• Slides interactives
• Exemple d'application avec 3 modalités interactives différentes

Hands-on Scratch

Showcase :

• Enseignement de l'informatique à l'école / Catégorie:Education au numérique
• Présentation de Scratch 2.0

Introduction à JavaScript

Introduction à la programmation

Retour sur les éléments principaux de l'Introduction à la programmation :

• Notion d'algorithme
• Composition d'instructions simples
• Règles syntaxiques

Syntaxe de JavaScript

Survol des éléments fondamentaux du langage JavaScript :

• Syntaxe : règles pour écrire/organiser le code source
  • Variables : var cours = "STIC I";
  • Types de données : (1) primitives (i.e. string, number, boolean, null, undefined); (2) objects (objects, arrays, functions)
  • Opérateurs : (1) mathématiques (+, -, /, *, %), (2) logiques (&&, ||, ==, !=, ..), (3) autres (...)
  • Structure de contrôle (if... else if... else, switch)
  • Boucles (for, while)
  • Built-in objects (String, Math, Number, ...) -> properties (i.e. variables) & methods (i.e. functions)
• Instructions
  1. Expressions : éléments individuels du langage, e.g. var, +, ., ...
  2. Statements : composition d'expressions, e.g. var cours = "STIC" + " I";
  3. Bloc de code : composition de statements qui partagent le même scope, e.g. function () { ... }
• Deux types d'instructions :
  1. Modifier l'état de la logique de l'application (i.e. "write")
  2. Récupérer le résultat d'une manipulation/l'état d'un élément à un moment donné dans la logique de l'application (i.e. "read")

Références :

• Tutoriel JavaScript de base

Exemple analysé

Problème : je veux obtenir l'inverse d'un mot. E.g. STIC --> CITS

Démarche :

1. Avec quelle type de données on a à faire ? Une suite de caractère --> String
2. Existe-t-il une fonctionnalité du langage qui fait ce que je veux ?
   • Contrôler la liste des propriétés/méthodes associés aux String
   • Il n'y a rien qui fait exactement ce dont j'ai besoin
3. Existe-t-il quelque chose qui pourrait être utile ?
   • La méthode split() sépare une suite de caractère et en fait une liste indexée, i.e. un array (référence)
   • Donc je peux passer de "STIC" à ["S", "T", "I", "C"]
4. Maintenant je me retrouve avec un array. Existe-t-il une fonctionnalité du langage qui permet d'inverser un array?
   • Contrôler la liste des propriétés/méthode associés aux Array
   • La méthode reverse() s'occupe exactement de cela (référence)
   • Donc je peux passer de ["S", "T", "I", "C"] à ["C", "I", "T", "S"]
5. Maintenant je me retrouve avec un array qui a les lettres dans le bon ordre. Existe-t-il une fonctionnalité du langage qui permet de passer d'un Array à un String?
   • Contrôler à nouveau la liste des propriétés/méthodes associés aux Array (vour plus haut)
   • La méthode join() s'occupe exactement de cela (référence)
   • Donc je peux passer de ["C", "I", "T", "S"] à "CITS"
6. Résolution du problème

Même passage en code :

//Déclarer une variable avec le mot que je veux inverser
var init= "STIC"; //--> "STIC"

//Commencer par le traduir en array
var singleLetters = init.split(""); //--> ["S", "T", "I", "C"]

//Inverser l'ordre des éléments
var reverseLetters = singleLetters.reverse(); //--> ["C", "I", "T", "S"]

//Unire les lettres dans l'ordre inverse
var end = reverseLetters.join(""); //--> "CITS"

Dans cet exemple de code on a utilisé beaucoup de variables qui en fait ne servent pas. Donc on peut améliorer le code (i.e. faire du refactoring) :

var init = "STIC"; //--> "STIC"
var end = init.split("").reverse().join(""); //--> "CITS";

À ce point on a un meilleur algorithme, mais si on voulait connaître l'inverse de "ERGO", il faudrait écrire à nouveau les mêmes passages juste avec une nouvelle valeur associée à la variable init. On peut faire mieux, on peut créer une fonction :

//Déclarer une fonction avec un argument. Ce sera le mot initial
function reverseWord(init) {
  //Renvoyer le mot inversée en utilisant l'aglorithme que nous avons créé
  return init.split("").reverse().join("");
}

//Maintenant il sera suffisant d'invoquer cette fonction et lui passer le mot en tant qu'argument pour obtenir l'inverse
var sticReverse = reverseWord("Sciences et Technologies de l’Information et de la Communication");
var ergoReverse = reverseWord("Design centré utilisateur et ergonomie");

Workshop / Activité complémentaire pour P2

Workshop files from GitHub :

• https://github.com/MALTT-STIC/stic-1-javascript-essentials

Attention : exemples à terminer/résoudre avant P2 !

Projet 2 / Tâche

Dispositif

Imaginez une première application interactive liée à un contenu d'apprentissage et développez-la avec Scratch :

• Créez un projet avec Scratch 2.0
• Déterminez l'architecture de l'application à travers les blocs de code de Scratch
• L'application doit servir à un objectif déclaré dans votre rapport (pas juste votre objectif d'apprentissage !)

Contraintes

• Contenu selon vos envies, mais en rapport avec une thématique MALTT
• Vous devez utiliser dans votre application au moins les éléments suivants :
  • 2 blocs de type Événements (e.g. quand drapeau vert est cliqué + autre à votre choix)
  • 1 bloc de type Contrôle > Si... alors
  • 1 bloc de type Contrôle > répéter (e.g. répéter X fois ou répéter jusqu'à)
• Vous avez le droit d'utiliser tous les éléments graphiques/sons/etc. mis à disposition directement par Scratch
  • Si vous utilisez d'autres éléments, faites très attention qu'ils soient libres de droits et citez la source dans votre rapport

Critères d'évaluation

Selon la Grille d'évaluation sur Moodle.

Malus

• Application ne marche pas
• Stage désorganisé et/ou graphisme confus (e.g. difficile à identifier les objets)
• Interaction sans finalité (e.g. cliquer pour activer simple message "hello")
• Utilisation d'éléments graphiques/sons/etc. pas libre de droits

Bonus

• Stage bien organisé et/ou graphisme cohérent
• Interaction facile à comprendre/initialiser (e.g. bon guidage "pour commencer...")
• Complexité des blocs de script

Rapport

Faites un rapport selon les guidelines habituelles :

• voir STIC:Rapport STIC I et II

En particulier pour cet exercice, essayer de :

• Identifier clairement les objectifs/public cible de votre application
  • Soyez raisonnables dans vos attentes : identifier un objectif simple et précis
• Essayez de justifier en quoi l'interaction proposé soutienne vos objectifs d'apprentissage/d'utilisation

Contribution Wiki

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

• voir STIC:Rapport STIC I et II#Contribution_Wiki

Quelques suggestions en rapport avec l'exercice :

• Améliorer la page Enseignement de l'informatique à l'école (corrections, test des liens, etc.)
• Ajouter des ressources dans la catégorie Catégorie:Education au numérique
• Améliorer/Implémenter/Ajouter ressources liés à Scratch

Délai

Dimanche 20:00 avant la semaine des cours présentiels P2