forked from christinatruong/llc-html-css-valentines
-
Notifications
You must be signed in to change notification settings - Fork 3
Expand file tree
/
Copy pathnotes-fr.html
More file actions
112 lines (83 loc) · 7.84 KB
/
notes-fr.html
File metadata and controls
112 lines (83 loc) · 7.84 KB
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
<!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>
<!-- Durée / barre de progression : définissez la durée de la présentation avec « data-duration » en minutes. -->
<body class="en" data-duration="360">
<main>
<section class="slide" data-toc data-markdown>
<script type="text/template">
##Notes d'enseignement
##Femmes en programmation : Intro au HTML et aux animations CSS (édition Saint-Valentin)
##3 heures
<br>
#Ordre du jour
<strong>Important :</strong>
Ces notes ne sont que des suggestions. Vous n’avez pas besoin de les suivre à la lettre! Concentrez-vous davantage sur les besoins du groupe et la compréhension des notions. Tant que les personnes participant à l'atelier suivent bien, ce n'est pas un problème si vous ne faites pas toutes les diapositives.
* <strong>Premiers pas (1 heure)</strong> : Aperçu du projet final, outils, dossiers, qu'est-ce que le HTML, balises, premier exercice
* <strong>Intro au CSS (1 heure)</strong> : syntaxe et terminologie, ajouter du CSS, polices Web, sélecteurs, typographie, entités de caractère Unicode, attributs, sélecteurs de classe
* <strong>Animations CSS (1 heure)</strong> : Keyframes, transform, cœur qui bat, position et `nth-of-type`, exercice de groupe, marathon de programmation
<br>
#Remarques générales
* <strong>Important :</strong> Donnez aux apprenantes et aux apprenants assez de temps pour télécharger les fichiers d’apprentissage de la diapositive 1. À leur arrivée, vérifiez si tout le monde a téléchargé les fichiers d’apprentissage, Atom et Chrome afin que l’expérience puisse commencer à l’heure prévue.
S’ils éprouvent des difficultés à installer les logiciels, invitez-les à demander de l'aide à vous ou à l'équipe de mentores et de mentors.
* Problème fréquent : Les apprenantes et les apprenants utilisant Windows doivent extraire tout le dossier afin d’utiliser les fichiers. Si quelqu'un voit les diapositives sans style et mise en page, essayez cette méthode.
* Montrez au groupe comment ouvrir des fichiers. Faites les étapes ensemble : ouvrez Atom > sélectionnez File > ajoutez le dossier du projet. Faites la démarche progressivement ou faites-la deux fois, au besoin.
* Montrez aux apprenantes et aux apprenants comment copier du texte des diapositives et le copier dans Atom. Certaines personnes pourraient ne pas connaître les raccourcis de clavier. N’oubliez pas de dire les touches à voix haute, car les raccourcis sont invisibles à l’écran. ATTENTION : Mentionnez les raccourcis pour Windows et Mac, pas seulement ceux d’un seul système. La plupart des apprenantes et des apprenants dans le labo informatique utilisent un ordinateur avec Windows, mais certaines personnes apportent parfois leur propre ordinateur.
* Rappelez au groupe de toujours ENREGISTRER les modifications et de RAFRAÎCHIR la page (montrez-leur comment). Encouragez-les à apporter de petits changements, à enregistrer le code et à rafraîchir la page. Montrez-leur comment défaire (annuler) une action avec un raccourci de clavier ou le menu Edit.
* N’hésitez pas à montrer des trucs au groupe pour passer facilement d’une fenêtre à une autre. Par exemple, faites-leur découvrir les coins intelligents, les touches de raccourci ou le survol sur la barre de tâches. Donnez-leur des conseils selon leurs besoins.
<br>
#Exemples
<h2>Notes</h2>
<strong>Diapositive 10 : HTML : INTRODUCTION</strong><br>
Faites une analogie avec une maison. Le HTML représente les fondations de la maison : les murs, le toit et le plancher. Le CSS représente la décoration intérieure : la disposition des meubles, la couleur des murs, le plancher (tapis ou parquet en bois franc).
<strong>Diapositive 15 : AUTRES BALISES HTML</strong><br>
Le « a » signifie « ancrage ». La balise <code><a></code> sert à ancrer (lier) une personne à une autre section de la même page.
Prenez le temps d'expliquer le fonctionnement des attributs au groupe; les éléments qui se trouvent entre les balises s'affichent dans le navigateur. Les attributs sont invisibles dans le navigateur, mais ils fournissent aux balises des informations essentielles qui leur permettent de bien fonctionner.
Les personnes malvoyantes naviguent le Web à l'aide d’un logiciel appelé un lecteur d’écran. Ce logiciel lit le contenu d’une page Web à voix haute. Quand le lecteur d’écran voit une balise <code><img></code>, il lit la valeur de l'attribut alt à voix haut. Il est donc conseillé d’écrire une brève description de la photo pour les personnes qui ne peuvent pas la voir. S’il y a du texte dans la photo, écrivez-le dans l'attribut alt.
<strong>Diapositive 24 : EXERCICE DE GROUPE : CHOISIR DES POLICES WEB</strong>
Prenez le temps de faire la démarche avec le groupe. Lorsqu’ils auront choisi leur police, encouragez-les à lire les consignes indiquées sur Google Fonts (celles à propos du code à insérer dans la balise <code><head></code> et du code à insérer dans la feuille de style).
Onglet Customize (Personnalisation): Il s'agit de l'occasion idéale de parler de la vitesse de chargement de la page et du « poids » des polices. Il est important d’ajouter seulement des ressources essentielles à la page.
<strong>Diapositive 29 : EXERCICE DE GROUPE : AJOUTER DES STYLES DE POLICE</strong>
Laissez-les choisir des polices pour personnaliser leur projet.
<strong>Diapositive 38 : </strong>
Prenez le temps d’expliquer chaque étape de création des animations.
<strong>Diapositive 53 : MARATHON DE PROGRAMMATION</strong>
Faites une démonstration d’une recherche Google pour résoudre un problème. Par exemple, vous pourriez chercher « align text CSS » et parcourir des sources d’information fiables comme W3C, developer.mozilla.org et Stack Overflow. Veuillez noter que la documentation en programmation est surtout en anglais, mais qu'il existe aussi des ressources en français.
</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/llc.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>