tlc-html-css-for-edu/notes-fr.html at master · canadalearningcode/tlc-html-css-for-edu · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
<!DOCTYPE html>
<html lang="fr">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <title>Canada en programmation</title>
  <link rel="stylesheet" href="framework/css/slideshow.css" data-noprefix>
  <link rel="stylesheet" href="framework/css/fonts.css" data-noprefix>
  <link rel="stylesheet" href="framework/css/highlightjs/github.css" data-noprefix>
  <link rel="stylesheet" href="framework/css/styles.css" data-noprefix>
  <link rel="shortcut icon" href="framework/img/favicon.ico">

  <!-- S'occupe des préfixes CSS3 -->
  <script src="framework/scripts/prefixfree.min.js"></script>

  <!-- Ouvre tous les liens dans une nouvelle fenêtre -->
  <base target="_blank">
</head>

<!-- Barre de durée / progression : définissez la durée de la présentation en minutes avec « data-duration ». -->
<body class="en" data-duration="360">


  <main>
  <section class="slide" data-toc data-markdown>
    <script type="text/template">
      # Enseignants en programmation : le HTML et le CSS pour les enseignants

      ##Notes d'enseignement

      * <a href="#slide2" target="_self">Notes pour un atelier d'une journée complète (6 heures)</a>
      * <a href="#slide3" target="_self">Notes pour une visite (2 heures)</a>

    </script>
  </section>

  <section class="slide" data-toc data-markdown>
    <script type="text/template">
      # Enseignants en programmation : le HTML et le CSS pour les enseignants

      ##Notes d'enseignement
      ##6 heures

      <br>
      #Ressources

      * Le robot : [plan de cours](https://www.canadalearningcode.ca/fr/lecons/le-robot/)
      * À la découverte de la source : [plan de cours](https://www.canadalearningcode.ca/fr/lecons/decouverte-de-la-source/)
      * Profils de superhéros : [plan de cours](https://www.canadalearningcode.ca/fr/lecons/profil-de-superheros/)
      * Site Web sur l'innovation : [plan de cours](https://www.canadalearningcode.ca/fr/lecons/site-web-sur-linnovation/)
      * Coffre à outils numérique : [guide de démarrage](https://www.canadalearningcode.ca/wp-content/uploads/clc-teacher-digital-toolbox-guide-fr_FINAL-OCT242018-WEB.pdf)
      <!--* Coffre à outils numérique : premiers pas avec les lunettes à rayons X et Thimble de Mozilla-->

      <br>
      #Ordre du jour

      * <strong>Introduction (30 minutes)</strong> : Le code des programmeurs, objectifs d'apprentissage, Le robot (activité hors ligne), Qu'est-ce que le code, Pourquoi enseigner la programmation.
      * <strong>Intro au HTML (15 minutes)</strong> : Qu'est-ce que le HTML, Pourquoi apprendre le HTML, les rudiments du HTML.
      * <strong>Source Whisperer (hors ligne) (15 minutes)</strong> : Activité, corrigé.
      * <strong>Exemple de plan de cours (1 heure)</strong> : Introduction, programmation en groupe, activité.
      * <strong>Dîner (30 minutes)</strong> : Le temps indiqué n'est qu'une recommandation; vous pouvez dîner au moment qui convient le mieux au groupe.
      * <strong>Intro au CSS (10 minutes)</strong> : Qu'est-ce que le CSS, différences, fonctionnement.
      * <strong>Exemple de plan de cours (2 heures)</strong> : Introduction, démarrage et configuration, activité, réflexion.
      * <strong>Évaluation (15 minutes)</strong> : Éléments à considérer, stratégies.
      * <strong>Planification de cours (1 heure)</strong> : Stratégies recommandées, séance de travail, présentations.
      * <strong>Prolongement (si le temps le permet) </strong> : Activité de débogage, jeu Erase All Kittens.
      * <strong>Prochaine étape (5 minutes)</strong> : Idées, partage, conclusion.


      <br>
      #Plan d'urgence

      * Utilisez un éditeur de texte : [atom.io](https://atom.io)
      * Les projets de départ sont compris dans le dossier de fichiers d'apprentissage.
      * Utilisez Atom pour ouvrir et modifier les fichiers **index.html** et **style.css**.
      * Enregistrez les changements, puis ouvrez **index.html** dans le navigateur pour afficher le site Web.

      <br>
      #Exemples précis et consignes

      ##Le robot (diapositive n° 8)
      Suivez le [plan de cours](https://www.canadalearningcode.ca/fr/lecons/le-robot) de l'activité du robot et faites les prolongements. Actions recommandées : tape là-dedans et sauter sur place.

      ##Qu'est-ce que le HTML? (diapositive n° 15)
      Oui, le HTML est un langage qui nous permet d'écrire du code. En utilisant le HTML, nous donnons des consignes au navigateur afin qu'il puisse afficher le site Web.
      <br>Toutefois, le HTML n'est pas un vrai langage de « programmation », car nous n'utilisons pas de concepts de programmation comme les boucles, les variables, les fonctions, etc. (Cela viendra!)

      ##Pourquoi apprendre le HTML? (diapositive n° 16)
      Analogie de la maison : le HTML représente les fondations (la structure, les murs, les meubles), le CSS est la conception (la peinture, les accessoires) et le JavaScript est la fonctionnalité (le système d'alarme ou de sécurité). L'analogie du corps (os, vêtements, personnalité) est aussi excellente pour expliquer le concept au groupe.

      ##À la découverte de la source (diapositive n° 21-24)
      Consultez le [plan de cours](https://www.canadalearningcode.ca/fr/lecons/decouverte-de-la-source/) de l'activité À la découverte de la source pour obtenir plus d'informations.

      ##Profils de superhéros (diapositive n° 25-32)
      Utilisez le [plan de cours](https://www.canadalearningcode.ca/fr/lecons/profil-de-superheros/) de l'activité Profils de superhéros (et le corrigé) pour réaliser cette activité.

      ##Créer un compte (diapositive n° 29)
      Il est possible que la vérification du compte prenne quelques minutes. Les apprenants ont aussi le choix de créer un site sans avoir de compte, mais ils ne pourront pas enregistrer leur projet.

      ##Configurer Glitch (diapositive n° 30)
      Glitch est un outil (et une communauté) en ligne gratuit pour créer et partager des sites Web.
      <br><br>Ces étapes sont facultatives, mais recommandées, car elles faciliteront la vie des apprenants pendant qu'ils créent leurs projets.

      ##Quelle est la différence? (diapositive n° 36)
      Il s'agit du même site; une version utilise une feuille de CSS et l'autre, non.

      ##À quoi ressemble le CSS? (diapositive n° 37)
      Faites remarquer au groupe les différents types de chevrons et parenthèses ainsi que les deux-points et les points-virgules. Question : selon vous, que fait ce code? (Réponse : tous les paragraphes deviennent rouges.)

      ##Règles (diapositive n° 39)
      Encouragez les apprenants à taper dans la zone de texte pour voir leur code CSS s'appliquer au paragraphe en bas. Essayez `background-color` ou une autre fonction de style tirée du site css.cool (voir la prochaine diapositive).

      ##Site Web sur l'innovation (diapositive n° 41-49)
      Utilisez le [plan de cours](https://www.canadalearningcode.ca/fr/lecons/site-web-sur-linnovation/) de l'activité Site Web sur l'innovation (et le corrigé) pour réaliser cette activité.

      ##Créer le site Web (diapositive n° 48)
      Faites ces étapes avec les apprenants en utilisant le [corrigé](http://bit.ly/site-web-sur-linnovation-corrigé).
      <br>Les apprenants peuvent utiliser leur propre version du corrigé s'ils veulent travailler à leur rythme.

      ##Éléments à considérer pour l'évaluation (diapositive n° 52)
      Demandez aux apprenants de discuter de ces aspects avec leur table. Utilisez un exemple de plan de cours vu aujourd'hui ou un autre plan qu'ils connaissent. Revenez en grand groupe après 5 minutes pour partager vos idées.

      ##Planification de cours (diapositive n° 55)
      Accordez 45 minutes au groupe pour planifier un cours individuellement ou en équipe de deux. Il est recommandé de placer les apprenants qui enseignent la même matière ou à des élèves du même niveau ensemble afin qu'ils puissent collaborer.

      ##Présentations (diapositive n° 56)
      Prenez quelques minutes à la fin de l'atelier pour permettre à des volontaires de présenter leur projet (terminé ou non).

      ##Prolongement : débogage (diapositives n° 57-58)
      Si vous en avez le temps, discutez des « bogues » (des problèmes dans le code) avec la classe. Montrez ces stratégies de résolution de problème dans un exemple de projet, si possible.
      <br><br>Programmation à deux : les apprenants se mettent en équipe et alternent entre les rôles (conducteur et navigateur). Le conducteur utilise la souris et le clavier et le navigateur donne des consignes à l'oral. Grâce à cette technique de travail à deux, il est plus facile de trouver des bogues dans un projet!

      ##Prolongement : jeu Erase All Kittens (diapositive n° 59)
      Si vous en avez le temps, jouez à ce jeu très amusant idéal pour les élèves qui terminent un exercice plus tôt que prévu (par exemple). Les enseignants devront créer un compte pour accéder à la démo gratuite.

      ##Prochaine étape (diapositive n° 61)
      Encouragez les apprenants à écrire la prochaine étape qu'ils suivront sur un papillon adhésif et de coller celui-ci sur le mur avant de partir.

    </script>
  </section>

  <section class="slide" data-toc data-markdown>
    <script type="text/template">
      # Enseignants en programmation : le HTML et le CSS pour les enseignants

      ##Notes d'enseignement
      ##2 heures

      <br>
      #Ressources

      * Le robot : [plan de cours](https://www.canadalearningcode.ca/fr/lecons/le-robot/)
      * Site Web de tourisme avec Glitch : [plan de cours](https://www.canadalearningcode.ca/fr/lecons/site-web-de-tourisme-avec-glitch/)
      * Coffre à outils numérique : [guide de démarrage](https://www.canadalearningcode.ca/wp-content/uploads/clc-teacher-digital-toolbox-guide-fr_FINAL-OCT242018-WEB.pdf)

      <br>
      #Ordre du jour

      * <strong>Introduction (30 minutes)</strong>: Le code des programmeurs, objectifs d'apprentissage, Le robot (activité hors ligne), Qu'est-ce que le code, Pourquoi enseigner la programmation.
      * <strong>Intro au HTML (15 minutes)</strong> : Qu'est-ce que le HTML, Pourquoi apprendre le HTML, les rudiments du HTML.
      * <strong>Exemple de plan de cours (30 minutes)</strong>: Introduction, programmation en groupe, activité (arrêtez après l'étape 7 (ajouter une image)).
      * <strong>Intro au CSS (10 minutes)</strong> : Qu'est-ce que le CSS, différences, fonctionnement.
      * <strong>Leçon, suite (20 minutes)</strong>: Activité (étape 8 : changer le style), réflexion.
      * <strong>Évaluation (10 minutes)</strong> : Stratégies.
      * <strong>Prolongement (si le temps le permet) </strong> : Activité de débogage, jeu Erase All Kittens.
      * <strong>Prochaine étape (5 minutes)</strong> : Idées, partage, conclusion.


      <br>
      #Plan d'urgence

      * Utilisez un éditeur de texte : [atom.io](https://atom.io)
      * Les projets de départ sont compris dans le dossier de fichiers d'apprentissage.
      * Utilisez Atom pour ouvrir et modifier les fichiers **index.html** et **style.css**.
      * Enregistrez les changements, puis ouvrez **index.html** dans le navigateur pour afficher le site Web.

      <br>
      #Exemples précis et consignes

      ##Le robot (diapositive n° 8)
      Suivez le [plan de cours](https://www.canadalearningcode.ca/fr/lecons/le-robot) de l'activité du robot et faites les prolongements. Actions recommandées : tape là-dedans et sauter sur place.

      ##Qu'est-ce que le HTML? (diapositive n° 15)
      Oui, le HTML est un langage qui nous permet d'écrire du code. En utilisant le HTML, nous donnons des consignes au navigateur afin qu'il puisse afficher le site Web.
      <br>Toutefois, le HTML n'est pas un vrai langage de « programmation », car nous n'utilisons pas de concepts de programmation comme les boucles, les variables, les fonctions, etc. (Cela viendra!)

      ##Pourquoi apprendre le HTML? (diapositive n° 16)
      Analogie de la maison : le HTML représente les fondations (la structure, les murs, les meubles), le CSS est la conception (la peinture, les accessoires) et le JavaScript est la fonctionnalité (le système d'alarme ou de sécurité). L'analogie du corps (os, vêtements, personnalité) est aussi excellente pour expliquer le concept au groupe.

      ##Site Web de tourisme (diapositive n° 21-28)
      Utilisez le [plan de cours](https://www.canadalearningcode.ca/fr/lecons/site-web-de-tourisme-avec-glitch/) de l'activité Site Web de tourisme avec Glitch (avec le corrigé) pour réaliser cette activité. Arrêtez après l'étape 7 (ajouter une image).

      ##Créer un compte (diapositive n° 25)
      Il est possible que la vérification du compte prenne quelques minutes. Les apprenants ont aussi le choix de créer un site sans avoir de compte, mais ils ne pourront pas enregistrer leur projet.

      ##Configurer Glitch (diapositive n° 26)
      Glitch est un outil (et une communauté) en ligne gratuit pour créer et partager des sites Web.
      <br><br>Ces étapes sont facultatives, mais recommandées, car elles faciliteront la vie des apprenants pendant qu'ils créent leurs projets.

      ##Créer le site Web (diapositive n° 27)
      Faites ces étapes avec les apprenants à l'aide du corrigé.
      <br>Les apprenants peuvent utiliser leur propre version du corrigé s'ils veulent travailler à leur rythme.

      ##Quelle est la différence? (diapositive n° 32)
      Il s'agit du même site; une version utilise une feuille de CSS et l'autre, non.

      ##À quoi ressemble le CSS? (diapositive n° 33)
      Faites remarquer au groupe les différents types de chevrons et parenthèses ainsi que les deux-points et les points-virgules. Question : selon vous, que fait ce code? (Réponse : tous les paragraphes deviennent rouges.)

      ##Règles (diapositive n° 35)
      Encouragez les apprenants à taper dans la zone de texte pour voir leur code CSS s'appliquer au paragraphe en bas. Essayez `background-color` ou une autre fonction de style tirée du site css.cool (voir la prochaine diapositive).

      ##Ajouter du style au site (diapositive n° 37)
      Faites l'étape 8 (changer le style) avec le corrigé.

      ##Prolongement : débogage (diapositives n° 42-43)
      Si vous en avez le temps, discutez des « bogues » (des problèmes dans le code) avec la classe. Montrez ces stratégies de résolution de problème dans un exemple de projet, si possible.
      <br><br>Programmation à deux : les apprenants se mettent en équipe et alternent entre les rôles (conducteur et navigateur). Le conducteur utilise la souris et le clavier et le navigateur donne des consignes à l'oral. Grâce à cette technique de travail à deux, il est plus facile de trouver des bogues dans un projet!

      ##Prolongement : jeu Erase All Kittens (diapositive n° 44)
      Si vous en avez le temps, jouez à ce jeu très amusant idéal pour les élèves qui terminent un exercice plus tôt que prévu (par exemple). Les enseignants devront créer un compte pour accéder à la démo gratuite.

      ##Prochaine étape (diapositive n° 46)
      Encouragez les apprenants à écrire la prochaine étape qu'ils suivront sur un papillon adhésif et de coller celui-ci sur le mur avant de partir.

    </script>
  </section>

</main><!-- Section principale cls -->

<script src="framework/scripts/jquery-1.11.0.min.js"></script>
<script src="framework/scripts/slideshow.js"></script>

<!-- Enlevez les commentaires des modules dont vous avez besoin -->
<script src="framework/scripts/plugins/css-edit.js"></script>
<script src="framework/scripts/plugins/css-snippets.js"></script>
<script src="framework/scripts/plugins/css-controls.js"></script>
<!-- <script src="plugins/code-highlight.js"></script>-->

<script src="framework/scripts/plugins/markdown/marked.js"></script>
<script src="framework/scripts/plugins/markdown/markdown.js"></script>
<script src="framework/scripts/plugins/highlight/highlight-8.4.min.js"></script>
<script>hljs.initHighlightingOnLoad();</script>
<script src="framework/scripts/tlc.js"></script>
<script>
  var slideshow = new SlideShow();

  // Regroupe tous les éléments .snippet
    var snippets = document.querySelectorAll('.snippet');
    for(var i=0; i<snippets.length; i++) {
      new CSSSnippet(snippets[i]);
    }
  </script>
</body>
</html>