« STIC:Introduction à la pensée computationnelle (CO 2020) » : différence entre les versions

De EduTech Wiki
Aller à la navigation Aller à la recherche
Ligne 419 : Ligne 419 :
Rappel graphique disponible dans cette slide : https://mafritz.ch/slides/fr/co-interaction-personne-machine/#/20
Rappel graphique disponible dans cette slide : https://mafritz.ch/slides/fr/co-interaction-personne-machine/#/20


==== Découverte / Réflexion ===
==== Découverte / Réflexion ====


Choisissez l'une des activités suivantes (durée '''20 minutes''') qui sont basée sur la technique du ''story boarding'' ou l'interaction/séquence des maquettes :
Choisissez l'une des activités suivantes (durée '''20 minutes''') qui sont basée sur la technique du ''story boarding'' ou l'interaction/séquence des maquettes :

Version du 8 novembre 2020 à 14:32

Introduction

Cette page présente les contenus et les activités prévues dans la formation Introduction à la pensée computationnelle pour les enseignant-es au cycle d'orientation donnée en 3 séances en octobre-novembre 2020.

Intervenants

Objectifs

Perspective adoptée dans la formation

La formation propose une introduction théorique et pratique au concept de pensée computationnelle comme trait d'union entre trois composants :

  1. les compétences individuelles ;
  2. les potentialités et limites des dispositifs numériques ;
  3. les implications sociales sur les caractéristiques et usages des technologies.

En premier lieu, la formation propose un survol sur les différentes approches à la pensée computationnelle disponibles dans la littérature scientifique et comment ces positions s'expriment dans des parcours et outils d’apprentissage différents (e.g. programmation par blocs de code, robotique, …). Ensuite, la formation propose une application directe de quelques principes computationnels dans le domaine des technologies du web (HTML5, CSS et JavaScript). À l’issue de la formation, les participant-es auront une meilleure compréhension de l’univers numérique au sens large et des compétences nécessaires pour s’orienter dans un milieu hétérogène et en évolution.

Programme

La formation prévoit 3 demi-journées organisées selon les thèmes suivants :

  1. Mardi 27 octobre 2020 : Aspects théoriques de la pensée computationnelle
  2. Jeudi 5 novembre 2020 : Introduction aux technologies du web
  3. Lundi 9 novembre 2020 : Introduction à la programmation avec JavaScript

Les détails de chaque séance sont illustrés dans la suite de cette page.

Aspects théoriques de la pensée computationnelle

La première seance aborde les aspects théoriques de la pensée computationnelle, ainsi que différentes perspectives pour concevoir et mettre en place des activités pour enseigner la pensée computationnelle.

Objectifs

Cette première séance vise les objectifs suivants :

Programme

Mardi 27 octobre 2020 :

  • 08h30 - 09h00 : introduction des intervenants et aperçu général de la formation
  • 09h00 - 10h00 : présentation générale sur la pensée computationnelle
  • 10h00 - 10h30 : pause
  • 10h30 - 11h30 : activités avec des environnements de codage de type bloc
  • 11h30 - 12h00 : retour et partage d'expérience

Présentation générale de la pensée computationnelle

Cette présentation introduit la pensée computationnelle sous différentes perspectives et fourni les éléments conceptuels qui seront approfondis dans l'ensemble de la formation. Support utilisé pour la présentation :

Environnements de programmation par blocs

Activités par petits groupe qui permet de découvrir et comparer des environnements de programmation de type bloc. Cette activité a un double intérêt :

  • Tester des environnements de programmation de type bloc avec finalités différentes
    Ces environnement sont souvent utilisés pour introduire des novices à la programmation. Nous les analyserons et comparerons en fonction du lien avec la pensée computationnelle.
  • Bonnes pratiques dans l'exploration/découverte de nouveaux environnements ou technologies
    Lorsqu'on découvre des nouvelles technologies, il est utile de procéder de la manière suivante :
    1. Explorer ce qui est possible, notamment à travers une liste de features ou encore mieux des exemples concrets
    2. Suivre des petits tutoriels/activités de type getting started pour se familiariser avec l'environnement
    3. Se poser un objectif très simple et très spécifique et essayer de l'atteindre (e.g. adapter un exemple à nos besoins, poursuivre le getting started, ...)

Activité Groupe A TurtleStitch

Découvrez TurtleStitch, un environnement de codage liée à la broderie qui permet de développer la pensée computationnelle dans une perspective lié à la création et fabrication assistées par ordinateur :

Activité Groupe B BlockSCAD

Découvrez BlockSCAD, un environnement qui utilise la programmation pour construire des objects 3D :

  • Lien direct vers Blockscad
  • Consigne : Construisez un objet en utilisant des éléments simples et au moins une opération mathématique ou de programmation (e.g. translation)
  • Possibilité d'impression 3D de l'objet avec l'une des nos imprimantes

Activité Groupe C MakeCode Arcade

Découvrez MakeCode Arcade, un environnement qui permet de créer des jeux style rétro :

Activité Groupe D MakeCode Adafruit

Découvrez la programation avec le simulateur d'un object connecté/robot :

Autres environnements pas vus pendant la formation

Liste d'autres environnements pas utilisés pendant l'activité de groupe.

Scratch

Découvrez Scratch 3.0, un logiciel très utilisé dans l'éducation à l'informatique/numérique, surtout avec des débutants ou des enfants :

App Inventor

Environnement de programmation pour la création d'application développé par le MIT (en anglais) :

Snap!

Autre environnement de type bloc de code, développé par l'Université de Berkley :

Technologies du web

La deuxième séance de la formation s'intéresse aux technologies du web, en particulier HTML5, SVG, CSS et JavaScript, d'un point de vue technique.

Objectifs

Cette deuxième séance vise les objectifs suivants :

  • Aborder des technologies d'un point de vue plus technique pour montrer qu'elles s'appliquent elles-mêmes des principes computationnels
  • Introduire le codage en temps réel (live coding) comme technique pédagogique
  • Découvrir quelques environnements et outils pour le codage de type textuel ou mixte

Programme

  • 08h30 - 09h00 : présentation des technologies du web
  • 09h00 - 10h00 : codage live et création d'une présentation en HTML5
  • 10h00 - 10h30 : pause
  • 10h30 - 10h45 : dessin technique avec SVG
  • 10h45 - 11h30 : JavaScript avec la bibliothèque p5.js
  • 11h30 - 12h00 : retour d'expérience et discussion

Présentation technologies du web

Cette présentation propose un survol technique du fonctionnement des technologies du web HTML5, CSS, SVG et JavaScript. Support utilisé pour la présentation :

Ressources complémentaires :

Codage en temps réel

Le codage en temps réel, ou live coding en anglais, est une technique de plus en plus utilisée dans les formations techniques, que se soit en synchrone (i.e. cours dans une classe) ou en asynchrone (e.g. tutoriel vidéo, MOOC, ...). Cette technique présente des éléments d'intérêt pédagogiques comme par exemple :

  • Persistence de l'information
    Comparé à des manipulations point-and-click ou à du code montré dans des slides, dans le live coding le code reste à disposition des apprenants pendant la manipulation.
  • Séquentialité
    L'écriture progressive du code permet aux apprenants de suivre l'évolution étape par étape.
  • Segmentation
    La séquentialité implique également la possibilité de diviser les contenus en différents morceaux, par exemple en complexifiant un exemple de base.
  • Focalisation
    L'écriture du code en temps réel dirige automatiquement l'attention des apprenants à l'endroit précis ou se passe l'action, ce qui diminue des problématique de split attention.
  • Situation écologique
    Montrer que le codage est une activité dans laquelle on fait des erreurs, il faut consulter de la documentation, etc.

Démo Codepen vs. Visual Studio Code

Comparaison entre l'environnement online Codepen et l'éditeur de texte Visual studio code :

  • Compétences nécessaires
  • Vitesse de mise en place
  • Disponibilité du résultat
  • Partage social, mixage, ...

Activité : coder une présentation en HTML5

En utilisant un environnement Codepen déjà disponible, créer une présentation en utilisant des balises HTML5 et, en option, des propriétés de style CSS. Pour créer une slide, ajouter une <section>...</section> ou adapter les contenus des sections déjà présents dans le code du tab HTML de l'interface Codepen :

<div class="reveal">
  <div class="slides">
    <!-- Chaque slide correspond à une balise section -->
    
    <!-- Titre de la présentation -->
    <section>
      <h2>Titre de la présentation</h2>
      <p>Auteur</p>
      <p>04/11/2020</p>
    </section>
    
    <!-- Première slide -->
    <section>
      <h2>Titre de la slide</h2>
      <ul>
        <li class="fragment">Item</li>
        <li class="fragment">Item</li>
        <li class="fragment">Item</li>
      </ul>
    </section>
    
    <!-- Deuxième slide -->
    <section>
      <h3>Une autre diapositive</h3>
      <p>Avec du texte</p>
    </section>
  </div>
</div>

Vous pouvez choisir parmi 4 thèmes différents, représentés à l'image :

Différentes thèmes graphiques pour la présentation

Liens pour chaque thème :

Vous pouvez utiliser les éléments suivants.

Balises HTML5 les plus communes

Vous pouvez vous appuyer sur les balises les plus communes :

  • Titres
    Balises h1 à h6, par exemple :
    <h1>Fonctionnement d'internet</h1>
    <h2>Les addresses IP</h2>
    
  • Paragraphes
    Balise p, par exemple :
    <p>HTML5 est un langage de marquage utilisé dans les pages web.</p>
    
  • Mettre en relief du texte
    Balises pour donner une connotation sémantique au texte, par exemple :
    <p>Le langage de marquage <strong>HTML5</strong>, acronyme de <em>Hyper-Text Markup Language</em>, est utilisé dans les pages web</p>
    
  • Liens hypertextuels
    Pointer vers une autre page/site web, par exemple :
    <a href="https://edutechwiki.unige.ch/fr/">Visitez EduTechWiki en français</a>
    
  • Liste à puces
    Éléments non ordonnée, par exemple :
    <ul>
      <li>Suisse</li>
      <li>France</li>
      <li>Italie</li>
    </ul>
    
    Éléments ordonnés, par exemple :
    <ol>
      <li>Brancher la prise</li>
      <li>Allumer le dispositif</li>
      <li>Attendre 2 minutes</li>
    </ol>
    
  • Images
    L'image doit posseder son propre URL et vous devez disposer des droits pour l'utiliser (e.g.,Wikimedia commons), par exemple :
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Backlit_keyboard.jpg" alt="Image d'un clavier" title="Saisir des touches aux clavier" />
    

Simples propriétés de style

Vous pouvez ajouter quelques élément de style CSS, par exemple :

  • Colorer du texte
    Utiliser la balise span avec l'attribut style et la propriété color, par exemple :
    <p>L'effet Stroop consiste à afficher le nom d'une couleur, par exemple <span style="color: blue">bleu</code>, mais dans une couleur différente, par exemple <span style="color: green">bleu</span>.</p>
    
  • Taille des images
    Contrôler la taille des images en utilisant l'attribut style et les propriétés width ou height (si on déclare seulement l'une des deux, l'autres s'adapte en proportion), par exemple :
    <img src="https://upload.wikimedia.org/wikipedia/commons/c/c4/Backlit_keyboard.jpg" alt="..." title="..." style="width: 500px" />
    

Éléments Reveal.js

La présentation est basé sur Reveal.js, une bibliothèque JavaScript, qui propose certains éléments techniques pour définir les contenus de la présentation, par exemple :

  • Classe fragment
    Si vous ajouter l'attribut class="fragment" à un élément, celui-ci va s'afficher de manière progressive dans la slide (e.g. afficher chaque élément d'une liste l'un après l'autre), par exemple :
    <ul>
      <li class="fragment">Apparition en premier</li>
      <li class="fragment">Apparition en deuième</li>
    </ul>
    
  • Modifier la couleur de fond d'une slide
    On peut déterminer la couleur de fond singulièrement pour chaque slide dans la balise section qui définit le début d'une nouvelle slide, par exemple :
    <section data-background-color="aquamarine">
      <h1>Contenu</h1>
      <p>...</p>
    </section>
    

Pour d'autres éléments, se référer directement à la documentation sur le site https://revealjs.com/.

Attention : certains éléments plus avancés pourraient ne pas marcher dans le template Codepen utilisé pour l'activité.

Activité : dessin vectoriel avec SVG

SVG, acronyme de Scalable Vector Graphics, est un langage de marquage de type XML utilisé pour créer une image vectorielle. Les éléments graphiques du dessin vectoriel sont établi à travers un marquage similaire à HTML5, c'est-à-dire que les balises déterminent quel élément graphique va s'afficher. Par exemple :

 1 <svg width="350" height="150" xmlns="http://www.w3.org/2000/svg">
 2  <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->
 3  <g>
 4   <title>background</title>
 5   <rect x="-1" y="-1" width="352" height="152" id="canvas_background" fill="#fff"/>
 6  </g>
 7  <g>
 8   <title>formes</title>
 9   <ellipse fill="#ffff00" stroke="#000000" stroke-width="null" cx="64.5" cy="75" id="svg_1" rx="44.5" ry="44.5"/>
10   <rect fill="#bf0000" stroke="#000000" stroke-width="null" stroke-opacity="null" fill-opacity="null" x="131" y="31" width="88" height="88" id="svg_4"/>
11   <path fill="#7f007f" stroke-width="null" stroke-opacity="null" fill-opacity="null" d="m241.2725,118l46.5,-86l46.5,86l-93,0z" id="svg_5" stroke="#000000"/>
12  </g>
13 </svg>

SVG est un standard W3C spécifiquement conçu pour être utilisé sur le web et s’intègre bien aux autres formats W3C, comme par exemple HTML5, CSS ou JavaScript.

Dessin dans un environnement SVG en ligne

  1. Ouvrez l'éditeur SVG en ligne Method Draw SVG Editor
  2. Dessinez une simple forme de votre choix (e.g. circle ou rectangle) en choisissant une couleur de fond à travers les outils sur la colonne à gauche de l'interface
  3. Affichez le code source à travers le menu View > Source...
  4. Essayez d'identifier l'attribut qui détermine la couleur de fond et modifiez avec cette nouvelle couleur #bf0000 (i.e. rouge). Cliquez sur Apply changes pour voir le résultat
  5. Répétez l'opération avec un autre attribut, par exemple pour modifier la taille ou la position

Activité : p5.js

p5.js est une bibliothèque JavaScript pour le codage créatif, inspiré par le célébré langage processing. Elle permet de créer des dessins (interactifs) basés sur du code. Il s'agit d'une technologie qui peut s'appliquer du (plutôt) simple au très complexe, grâce notamment à une série d'extensions qui permettent d'intégrer différentes sources d'input (micro, ...).

Par groupes de 3-4 personnes, désignez un-e codeur/codeuse et utilisez l'editor online de p5.js pour suivre les exemples get started et d'autres exemples plus avancés. Vous pouvez également essayez de produire vous-mêmes votre propre code.

Interaction personne-machine

La troisième et dernière séance de la formation s'intéresse à l'interaction personne-machine comme extension holistique de la pensée computationnelle. La deuxième partie de la séance prévoit une clôture de la formation avec la proposition de critères pour évaluer des formations liées à la pensée computationnelle.

Objectifs

Cette troisième séance vise les objectifs suivants :

  • Introduire des concepts et techniques liés à l'interaction personne-machine
  • Proposer une scénarisation d'activité débranchée basée sur le pseudo-code
  • Appliquer des principes de design thinking pour la création d'interface/application imaginaires

Programme

  • 08h30 - 09h00 : présentation de l'interaction personne-machine
  • 09h00 - 10h00 : activité design thinking
  • 10h00 - 10h30 : pause
  • 10h30 - 11h00 : proposition de quelques critères d'évaluation d'outils et activités
  • 11h00 - 11h45 : discussion et retour d'expérience sur l'ensemble de la formation
  • 11h45 - 12h00 : questionnaire d'évaluation de la formation

Présentation du domaine interaction personne-machine

L'interaction personne-machine (ou interaction homme-machine ou human-computer interaction en anglais) est un domain multi-disciplinaire très vaste. On verra dans ce contexte quelques aspects qui est en relation avec l'enseignement de la pensée computationnelle :

Activités de prototypage

En utilisant du papier ou des applications de dessin à main libre sur tablette, nous allons effectuer des activités de prototypage rapide et low-fi (maquettes, esquisses, ...).

Créativité / Design Thinking

Choisissez un simple artefact informatique depuis la liste suivante (ou un autre de votre choix) et, en 5 minutes, essayez d'esquisser le plus de maquettes différentes possibles. Vous pouvez imaginer l'artefact pour un ou plusieurs dispositifs (e.g. desktop, smartphone, tablette, ...) :

  • Curriculum vitae
  • Page web personnelle
  • Application pour choisir une date pour un événement (e.g. Doodle)
  • Interface d'une lecteur de musique lorsqu'une chanson est jouée
  • Autre de votre choix

Rappel graphique disponible dans cette slide : https://mafritz.ch/slides/fr/co-interaction-personne-machine/#/19

Remémoration / Consolidation

Choisissez un artefact informatique depuis la liste suivante (ou autre de votre choix) et, en 5 minutes, essayez de reconstituer, sans le regarder, autant d'éléments que possible (e.g. boutons, labellisation, ...) :

  • Gestionnaire de fichiers de votre système d'exploitation
  • Client pour envoyer/recevoir du courriel
  • L'un des tab d'une application bureautique (Word, PowerPoint, ... ou équivalent LibreOffice)
  • L'interface Codepen utilisée lors de la deuxième séance de cette formation
  • Autre de votre choix

Rappel graphique disponible dans cette slide : https://mafritz.ch/slides/fr/co-interaction-personne-machine/#/20

Découverte / Réflexion

Choisissez l'une des activités suivantes (durée 20 minutes) qui sont basée sur la technique du story boarding ou l'interaction/séquence des maquettes :

  • Pensez à une application ou artefact informatique que vous utilisez souvent dans votre travail et essayez de la ré-concevoir ou l'améliorer en fonction de vos besoins
  • Imaginez une application ou artefact informatique qui est basé sur un principe computationnelle que vous voulez enseigner à vos étudiantes et dessiner le workflow des états/interactions

Rappel graphique disponible dans cette slide : https://mafritz.ch/slides/fr/co-interaction-personne-machine/#/21

Ressources

Cette section propose une liste de ressource utilisées pendant la formation ou pour aller plus loin.

Utilisées pendant la formation

Les pages utilisées pendant la formation sont regroupées dans un livre que vous pouvez télécharger en format PDF ou imprimer à la demande à travers un service externe (voir Impression à la demande de Pediapress).

Pour aller plus loin

À compléter