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

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
• Incorporez (i.e. embed) l'application dans une page HTML5 sur le serveur tecfaetu.unige.ch (nb pas dans votre page du rapport)
• 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 ou Si... alors... sinon
  • 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
• Créer une page HTML5 valide/bien formatée qui incorpore l'application avec quelques informations en plus (e.g. introduction, consignes, ...)

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
• Lien vers l'application directement sur Scratch (pas incorporé dans une page HTML5)

Bonus

• Stage bien organisé et/ou graphisme cohérent
• Interaction facile à comprendre/initialiser (e.g. bon guidage "pour commencer...")
• Complexité des blocs de script
• Page HTML5 qui contient l'application bien structurée, avec informations complémentaires

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, surtout Scratch 2.0

Délai

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

Liens

Théoriques

• Enseignement de l'informatique à l'école

Techniques

Scratch

• Site officiel de Scratch
• Guide version Scratch 2.0 en français (PDF)
• Scratch sur ce wiki (contenu très maigre)
• Scratch 2.0 sur ce wiki (contenu très maigre)
• Scratch 1.0 sur ce wiki (contenu pour l'ancienne version mais certains concepts sont encore valables)
• en:Scratch sur EduTechWiki en anglais (contenu principalement sur version 1.0)

JavaScript

• Tutoriel JavaScript de base
• Eloquent JavaScript] (Part 1: Language)
• Exercices et exemples à voir/compléter pour P2

Attention : limitez-vous aux aspects de syntaxe, on verra l'application de JavaScript dans les pages web en P2.

Aide

Discussion de cette page

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

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.

Séminaire de codage

Le lundi après la semaine des cours en présence (i.e. le lundi suivant le cours STIC du vendredi), un séminaire de codage est organisé par TECFA.

• voir Séminaire de codage sur Moodle TECFA