-
Notifications
You must be signed in to change notification settings - Fork 0
/
slides-fr.html
executable file
·1896 lines (1452 loc) · 79 KB
/
slides-fr.html
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
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
640
641
642
643
644
645
646
647
648
649
650
651
652
653
654
655
656
657
658
659
660
661
662
663
664
665
666
667
668
669
670
671
672
673
674
675
676
677
678
679
680
681
682
683
684
685
686
687
688
689
690
691
692
693
694
695
696
697
698
699
700
701
702
703
704
705
706
707
708
709
710
711
712
713
714
715
716
717
718
719
720
721
722
723
724
725
726
727
728
729
730
731
732
733
734
735
736
737
738
739
740
741
742
743
744
745
746
747
748
749
750
751
752
753
754
755
756
757
758
759
760
761
762
763
764
765
766
767
768
769
770
771
772
773
774
775
776
777
778
779
780
781
782
783
784
785
786
787
788
789
790
791
792
793
794
795
796
797
798
799
800
801
802
803
804
805
806
807
808
809
810
811
812
813
814
815
816
817
818
819
820
821
822
823
824
825
826
827
828
829
830
831
832
833
834
835
836
837
838
839
840
841
842
843
844
845
846
847
848
849
850
851
852
853
854
855
856
857
858
859
860
861
862
863
864
865
866
867
868
869
870
871
872
873
874
875
876
877
878
879
880
881
882
883
884
885
886
887
888
889
890
891
892
893
894
895
896
897
898
899
900
901
902
903
904
905
906
907
908
909
910
911
912
913
914
915
916
917
918
919
920
921
922
923
924
925
926
927
928
929
930
931
932
933
934
935
936
937
938
939
940
941
942
943
944
945
946
947
948
949
950
951
952
953
954
955
956
957
958
959
960
961
962
963
964
965
966
967
968
969
970
971
972
973
974
975
976
977
978
979
980
981
982
983
984
985
986
987
988
989
990
991
992
993
994
995
996
997
998
999
1000
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<title>Teens Learning Code</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css"/>
<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 CSS3T -->
<script src="framework/scripts/prefixfree.min.js"></script>
<!-- Ouvre tous les liens dans une nouvelle fenêtre -->
<base target="_blank">
</head>
<!-- Minuterie/barre de progression: Définissez la durée de la présentation en minutes à l'aide de « data-duration ». -->
<body class="en" data-duration="360">
<main>
<section class="slide welcome highlight">
<h1><img class="logo-stacked" src="framework/img/teenslc-logo-stacked-white.png" alt="Logo Teens Learning Code">Bienvenue!</h1>
<div class="instructions">
<!-- AJOUTEZ L'INFO DU WI-FI ICI -->
<h2>Branchez-<br>vous</h2>
<p><strong>Wi-Fi:</strong> réseau wi-fi</p>
<p><strong>Mot de passe:</strong> mot de passe wi-fi</p>
<hr>
<h2>Télécharger<br> et installer</h2>
<ol class="downloads">
<li>Dossier zip de l'atelier : <a href="https://github.com/ladieslearningcode/teenslc-interactive-stories-and-game-making/archive/master.zip">http://bit.ly/teenslc-interactive-stories</a>
<ul>
<li>dézippez le dossier de l'atelier (<em>extrayez-le</em> si vous utilisez un PC)</li>
<li>ouvrez le fichier <em>slides_fr.html</em> dans le navigateur pour voir les diapositives</li>
</ul>
</li>
<li>Éditeur Atom (seulement en anglais) : <a href="http://atom.io">http://atom.io</a></li>
<li>Navigateur Chrome : <a href="https://www.google.ca/chrome/browser/desktop/">https://www.google.ca/chrome</a></li>
</li>
</ol>
</div>
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Contenu créé par <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.ca" property="cc:attributionName" rel="cc:attributionURL">Canada Learning Code</a></p>
<p class="right">Utilisez la flèche gauche <span class="arrow">←</span> et la flèche droite <span class="arrow">→</span> pour naviguer</p>
</footer>
</section>
<section class="slide intro">
<img class="logo" src="framework/img/teenslc-logo-white.png" alt="Teens Learning Code logo">
<h1 class="heading-bg">
<span>Histoires interactives et <br>conception de jeu<br> en HTML et en CSS</span>
</h1>
<!-- INDIQUEZ LES RENSEIGNEMENTS SUR LA FORMATRICE
<img class="instructor" src="http://placehold.it/225x225" alt="Instructor Name">
<h2><span class="cursive">avec</span> nom de la formatrice</h2>
<ul>
<li><a href="mailto:">[email protected]</a></li>
<li><a href="http://website.com">siteweb.com</a></li>
<li><a href="http://twitter.com/">@twitter</a></li>
</ul>-->
<!--<div class="sponsor">
<p>En collaboration avec<br> <img src="framework/img/shopify-logo-white.svg" alt="Telus"></p>
</div>-->
<footer>
<a class="left" rel="license" href="http://creativecommons.org/licenses/by-nc/4.0/"><img alt="Creative Commons License" src="framework/img/cc-by-nc.png" /></a>
<p class="left">Contenu créé par </a> <a prefix="cc: http://creativecommons.org/ns#" href="http://canadalearningcode.ca" property="cc:attributionName" rel="cc:attributionURL">Canada Learning Code</a></p>
<p class="right">Utilisez la flèche gauche <span class="arrow">←</span> et la flèche droite <span class="arrow">→</span> pour naviguer</p>
</footer>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Présentations
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Ordre du jour
<div class="table-of-contents"></div>
<!-- Intro + Exemples de projets + Invité (10 h)
Recherche d'idées + planification (10 h 15)
Intro au HTML et au CSS (10 h 45)
Dîner (12 h 30)
Création! (13 h 15)
Démos + Publication (13 h 30) -->
</script>
</section>
<section class="slide" data-markdown data-toc>
<script type="text/template">
#Le code des programmeuses
1. Soyez enthousiastes et accueillantes
1. Respectez les autres en choisissant bien vos mots et vos actions
1. Respectez l'espace des autres pendant les discussions
1. Posez des questions
1. Faites de votre mieux (et amusez-vous!)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Pourquoi créer un jeu?
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Le pouvoir des jeux vidéo
Cette année, nous poursuivons notre mission d'enseigner des compétences du 21e siècle à l'aide d'un des moyens d'expression numériques les plus populaires: le jeu vidéo.
<ul>
<li class="delayed">Façon puissante de faire passer un message, une cause ou une idée dans un monde numérique qui déborde de contenu</li>
<li class="delayed">Selon l'[Association canadienne du logiciel de divertissement](http://theesa.ca/wp-content/uploads/2015/11/ESAC_2015_Booklet_FRENCHVersion04_DigitalSpreads.pdf), plus de 54 % des Canadiens sont considérés comme des « joueurs »</li>
<li class="delayed">Parmi ces 54 %, environ la moitié sont des femmes</li>
<li class="delayed">Néanmoins, les femmes ne comptent que pour ***16 % des créateurs de jeux vidéo dans l'industrie des technologies, et 6% des experts techniques (programmation)*** </li>
</ul>
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#ON COMMENCE!
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Exemples de projets
Aujourd'hui, nous aurons l'occasion de créer des jeux, des histoires interactives ou des questionnaires qui concernent une cause, une communauté ou un message que vous aimeriez partager. Voici des exemples de projets:
<ol class="examples">
<li>[Questionnaire](project-fr/reference/game01-quiz/depart.html) <span class="difficulty">Niveau de difficulté: <i class="fa fa-star"></i><i class="fa fa-star-o"></i><i class="fa fa-star-o"></i></span> </li>
<li>[Choisissez votre propre aventure](project-fr/reference/game02-textadventure/depart.html) <span class="difficulty">Niveau de difficulté : <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star-o"></i></span></li>
<li>[Jeu d'action](project-fr/reference/game03-action/depart.html) <span class="difficulty">Niveau de difficulté : <i class="fa fa-star"></i><i class="fa fa-star"></i><i class="fa fa-star"></i><br>(Essayez cela après avoir créé un questionnaire ou une histoire)</span></li>
</ol>
##Remarquez-vous quelque chose à propos de la structure de ces exemples?
<p class="delayed">Ce sont des **pages simples** liées les unes aux autres pour créer une grosse histoire.</p><!-- .element: class="delayed" -->
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Remue-méninges
</script>
</section>
<section class="slide centered" data-markdown data-toc>
<script type="text/template">
<img src="framework/img/story-planning_fr.jpg" alt="Planification de l'histoire">
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Remue-méninges (30 minutes)
Avant de s'attaquer au code, il faut prendre le temps de planifier son projet. Prenez un crayon et du papier, cherchez des idées avec votre voisine, et créez!
<ul>
<li class="delayed">Quelle **histoire** voulez-vous créer?</li>
<li class="delayed">Quelle **cause** voulez-vous aborder?</li>
<li class="delayed">Quel type de page voulez-vous **créer**? Une histoire interactive, un jeu ou un questionnaire?</li>
<li class="delayed">Quel est l'**itinéraire** de l'histoire, du jeu ou du questionnaire?</li>
<li class="delayed">Quelles sont les **pages** nécessaires pour réaliser le projet?</li>
</ul>
<p class="delayed">Pensez à l'histoire et à la façon dont les gens découvriront votre histoire, votre jeu ou votre questionnaire. Consultez la <a href="slides_fr.html#slide8">diapo n°8</a> pour voir quelques exemples.
---
###Ressources (en anglais)
* [Everybody Wants to be a Cat](http://play.textadventures.co.uk/Play.aspx?id=l7behin2oewdjiyyluan8w)
* [Robin Hood](http://play.textadventures.co.uk/Play.aspx?id=kybrmvp890ofqeqrmjj9-g)
* [Magical High School](http://play.textadventures.co.uk/Play.aspx?id=xqc_5q0wee_sxs8vkorenq)
* [Horror Mystery](http://adamcadre.ac/if/905.html)
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Environnement de programmation
##Navigateurs Web + éditeurs de texte
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Navigateurs Web
La fonction principale d'un [navigateur](http://browsehappy.com) est d'afficher une *ressource Web* dans une fenêtre.
Choisissez un navigateur Web moderne qui respecte les normes actuelles du Web et qui prend en charge des outils de développement pour une bonne expérience de programmation.
Dans [Google Chrome](https://www.google.com/intl/efr-CA/chrome/browser/) (et d'autres navigateurs), il est possible de visionner le code source de *n'importe quelle* page Web. Faites un clic droit/tapez deux fois n'importe où dans le navigateur et sélectionnez **Code source de la page**. C'est du HTML!
---
###Ressource (en anglais)
http://browsehappy.com
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Outils de développement
Allez plus loin en *inspectant* les pages Web avec les **outils de développement de Chrome**. Ceux-ci facilitent le débogage et le testage et vous pouvez y accéder de deux façons :
* Option 1: Faites un clic droit/tapez deux fois et cliquez sur **Inspecter**
* Option 2: **Ctrl + MAJ + i** (PC) / **Cmd + Option + I** (Mac)
---
###Resources
* Afin de configurer Chrome comme navigateur par défaut, suivez [ces étapes](https://support.google.com/chrome/answer/95417?hl=fr).
* Pour en savoir plus à propos des outils de développement (en anglais): http://discover-devtools.codeschool.com
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Éditeur de texte
* utilisé pour écrire et modifier du code
* les éditeurs préinstallés (Bloc notes / TextEdit) n'ont pas beaucoup de fonctions
* les éditeurs gratuits et payants comprennent des fonctions telles que le surlignement et des modules pour vous faciliter la tâche
* éditeurs recommandés: [Notepad++](http://notepad-plus-plus.org/), [Sublime Text](http://www.sublimetext.com/) (version d'essai sans limite), [Brackets](http://brackets.io) et [TextWrangler](http://www.barebones.com/products/textwrangler/).
**[Atom](https://atom.io/)** est complètement gratuit (mais seulement en anglais). Il s'agit de l'éditeur que nous utiliserons aujourd'hui.
<span class="note">(Si vous avez un autre éditeur, il fonctionnera aussi, mais les fonctions sont peut-être différentes.)</span>
---
###Truc de pro!
Facilitez-vous la tâche avec les [touches de raccourci](keyboard-shortcuts_fr.pdf).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#À la découverte d'Atom
L'utilisation d'un bon éditeur de texte et l'apprentissage de ses fonctions rendra votre tâche plus agréable. Aujourd'hui, mettons à jour l'option d'habillage de texte (Soft wrap) pour vous permettre de mieux lire les longs blocs de code et de texte.
Allez dans **Preferences** pour ouvrir les options de personnalisation.
<!-- .element: width="70%" -->
L'onglet **Settings** (paramètres) s'affiche par défaut. Descendez pour voir l'option d'habillage de texte **Soft Wrap**.
<!-- .element: width="70%" -->
Assurez-vous que la case **Soft Wrap** est cochée.
<!-- .element: width="70%" -->
---
###Ressources (en anglais)
* [Documentation d'Atom](https://atom.io/docs)
* [Raccourcis Atom](https://bugsnag.com/blog/atom-editor-cheat-sheet)
* [Personnalisation d'Atom](https://atom.io/docs/v0.61.0/customizing-atom)
* [Thèmes](https://atom.io/themes) pour Atom
* [Extraits](https://github.com/atom/snippets) - Créez vos propres extraits de code à réutiliser
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Intro au HTML
##HyperText Markup Language
</script>
</section>
<section class="slide side-by-side" data-markdown>
<script type="text/template">
#HTML et CSS
Voici à quoi ressemble le site Web avec le CSS et sans le CSS!
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Syntaxe du HTML
Les balises s'écrivent avec des chevrons `< >` et une barre oblique `/` pour la balise de fermeture. Apprenez à connaître ces touches! (Image: clavier Apple, français (Canada))
<!-- .element: width="70%" -->
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#HTML: le contenu
Les balises viennent habituellement en paire: une balise d'ouverture et une balise de fermeture pour habiller (*wrap*) le contenu. Veuillez noter que la balise de fermeture prend une barre oblique (`/`).
```
<tag> balise d'ouverture --- balise de fermeture </tag>
```
Les *balises* HTML décrivent le contenu pour le navigateur Web.
```
<h1>Cette balise est un en-tête</h1>
<p>Cette balise est pour les paragraphes.</p>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Balises emboîtées
Les balises peuvent être *emboîtées* à l'intérieur d'autres balises, comme cela :
```
<extérieure>contenu extérieur <intérieure>contenu intérieur</intérieure> contenu extérieur</extérieure>
```
L'emboîtement de balises crée une hiérarchie, que l'on appelle aussi une relation *parent*-*enfant*.
La balise intérieure est l'enfant de la balise extérieure, le parent.
```
<parent>
<enfant></enfant>
</parent>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Organisation du code
Le HTML a été créé pour être lu par les navigateurs Web, pas par les humains. Les navigateurs comprennent donc parfaitement la ligne suivante:
```
<!DOCTYPE html><html lang="fr"><head><meta charset="UTF-8"><title></title></head><body></body></html>
```
Toutefois, pour nous, il est plus facile de lire du code HTML avec des espaces. Quand vous emboîtez des balises, ajoutez une tabulation pour chaque niveau.
```
<baliseextérieure>
<baliseintérieure>
</baliseintérieure>
</baliseextérieure>
```
</script>
</section>
<section id="basic-tags" class="slide" data-markdown>
<script type="text/template">
#Balises HTML de base
Les balises suivantes doivent se trouver dans **tous** les documents HTML.
```
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- contenu de page ici (ceci est un commentaire HTML, en passant) -->
</body>
</html>
```
(Nous aborderons ces balises très bientôt.)<!-- .element: class="note" -->
Pour créer une page HTML, vous n'avez qu'à enregistrer un document avec l'extension de fichier `.html`.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Mise sur pied du projet
À l'intérieur du dossier que vous avez téléchargé, ouvrez le dossier **project** dans l'éditeur de texte pour modifier le projet.
```html
teenslc-interactive-stories-and-game-making
|-- framework // Contient les fichiers nécessaires pour la présentation. Ne modifiez rien dans ce dossier!
|-- project // Contient les exercices et les fichiers de l'atelier. (images, CSS et HTML)
|-- slides_fr.html // Le fichier que vous lisez en ce moment!
```
Allez dans **File** > ** Add Project Folder**. Une fenêtre apparaîtra.
Ensuite:
* allez dans le dossier **teenslc-interactive-stories-and-game-making**
* sélectionnez **project-fr**
* cliquez **Open**
Les fichiers apparaissent maintenant dans la barre latérale.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Mise sur pied du projet
La structure du dossier de votre projet ressemblera à ceci:
```html
project
|-- images
|-- reference
```
Le dossier **project** est l'endroit où se trouvera chaque partie de votre histoire.
Le dossier **images** contient une sélection d'images que vous pouvez utiliser dans votre projet (vous pouvez aussi en ajouter pendant les exercises).
Le dossier **reference** contient les réponses aux exercices et les exemples de projets.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercice de groupe n°1: Créez la page de départ de votre projet (5 minutes)
1. Dans l'éditeur de texte, créez un nouveau fichier (**File** > **New File**)
1. Sauvegardez-le sous le nom `depart.html` (**File** > **Save**)
1. Ajoutez toutes les balises HTML de base. Référez-vous à [cette diapositive](slides_fr.html#basic-tags).
1. *Entre* les balises `<title></title>`, ajoutez un *titre de page* (title) qui représente le contenu de votre site Web. Par exemple:
```
<title>Choisissez votre propre aventure</title>
```
1. Ouvrez `depart.html` dans le navigateur.
* allez dans l'Explorateur Windows ou dans Finder
* allez dans le dossier **teenslc-interactive-stories-and-game-making > project-fr**
* double-cliquez sur **depart.html** pour l'ouvrir dans votre navigateur par défaut
<br><span class="note">(Si Chrome n'est pas votre navigateur par défaut, faites un clic droit/tapez deux fois sur **depart.html** et sélectionnez **Ouvrir avec > Chrome**)</span>
Comme il n'y a pas encore de page avec du *contenu*, le navigateur affichera une page blanche. Le *titre* de la page s'affichera dans la barre supérieure/l'onglet du navigateur.
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#Le Doctype
* pas une balise HTML, doit être le premier élément du code
* indique au navigateur la version d'HTML avec laquelle votre page est écrite
* l'exemple ci-dessous utilise la version HTML5
<pre><code><strong><!DOCTYPE html></strong>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- le contenu de la page va ici -->
</body>
</html>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#L'élément HTML
* toujours la première balise HTML, indique que le document est écrit en HTML
* l'élément racine est l'ancêtre (parent) de tous les éléments, car tout est *emboîté* à l'intérieur de cette balise
* l'*attribut* `lang` indique la langue utilisée (nous reviendrons sur les attributs bientôt)
<pre><code><!DOCTYPE html>
<strong><html lang="fr"></strong>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<!-- le contenu de la page va ici -->
</body>
<strong></html></strong>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#L'élément HEAD
* comprend des informations sur la page, mais *n'affiche pas de contenu*
* l'élément titre (balises `<title></title>` ) est le seul élément nécessaire
* définit le titre de la page Web/du document
* affiché dans l'onglet du navigateur, dans les signets et dans les résultats des moteurs de recherche
* Le CSS, JavaScript et les [métadonnées](http://www.alsacreations.com/article/lire/628-balises-meta.html) vont aussi entre ces balises
* le contenu de la page ne va *jamais* ici
<pre><code><!DOCTYPE html>
<html lang="fr">
<strong><head></strong>
<meta charset="UTF-8">
<title>Titre de ma page</title>
<strong></head></strong>
<body>
<!-- contenu de la page ici -->
</body>
</html>
</code></pre>
</script>
</section>
<section class="slide highlighted-tags" data-markdown>
<script type="text/template">
#L'élément BODY
Tout le contenu qui doit être affiché dans la fenêtre du navigateur va entre les balises `<body></body>`.
Ces balises sont aussi connues comme étant les balises d'*affichage*.
<pre><code><!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<title>Titre de ma page</title>
</head>
<strong><body></strong>
<!-- contenu de la page ici -->
<strong></body></strong>
</html>
</code></pre>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Les attributs
* fournit des informations supplémentaires ou donne des instructions à l'élément
* va à *l'intérieur de la balise d'ouverture HTML*
* s'écrit avec la syntaxe `attribut="valeur"` (remarquez les guillemets)
* il y a beaucoup d'attributs différents
```
<attributdelabalise="valeur">contenu</tag>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Les attributs
Nous venons de voir deux attributs dans notre exemple de page HTML de base.
L'attribut `lang` est employé pour déterminer la langue de la page.
```
<html lang="fr">
```
L'attribut `charset` indique le jeu de caractères utilisé dans la page.
```
<meta charset="UTF-8">
```
Nous utiliserons plus d'attributs pendant les exercices.
</script>
</section>
<section class="slide page-layout" data-markdown>
<script type="text/template">
# PLANIFICATION DE LA MISE EN PAGE
Un élément important de la création d'une page Web est d'en planifier la structure. Bien que vous changerez sûrement des éléments plus vous avancerez, la création d'une maquette de base avec un langage HTML [sémantique](https://fr.wikipedia.org/wiki/HTML_s%C3%A9mantique) est un bon point de départ.
Même si vous n'avez pas de modèle de mise en page, un grand nombre de développeurs et de concepteurs aiment planifier leur site à l'aide d'un simple dessin.
<img src="framework/img/workshop/structure-tags-example_fr.gif" alt="Exemple de balises de structure">
Le HTML5 a apporté de nouvelles balises qui décrivent mieux les blocs de contenu, comme `<header>` (en-tête), `<section>` et `<footer>` (bas de page). (Il y en a beaucoup d'autres.)
La balise `div` s'utilise aujourd'hui au besoin, par exemple, pour regrouper simplement des éléments du même style, ou quand aucune autre balise HTML5 ne peut bien décrire l'élément.
----
###Ressources (en anglais)
* [html5doctor.com](http://html5doctor.com)
* [HTML5 Element Flowchart](http://html5doctor.com/downloads/h5d-sectioning-flowchart.pdf)
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercice de groupe n°2: Structure de la page (5 minutes)
Ajoutons les balises de structure HTML5 pour créer la mise en page dans l'éditeur de texte.
N'ajoutez que les balises de structure HTML5, pas de contenu pour le moment.
Nous aurons besoin de ces balises: `<header>` (en-tête), `<section>` et `<footer>` (bas de page)
De plus, vous pouvez utiliser des commentaires HTML pour vous aider à organiser le code comme suit:
```
<!-- en-tête de la page -->
<header>
</header>
```
Consultez <!-- .element: class="note" --> `exercise-02_fr.html` dans le dossier **reference** ou la diapositive précédente pour vérifier votre code.
</script>
</section>
<section class="slide title" data-markdown>
#Ajouter du contenu
##Paragraphes, en-têtes, images et liens
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les paragraphes
**Les paragraphes**: qu'ils soient d'une phrase ou non, les paragraphes ont besoin de balises `<p></p>`.
```xml
<p>Ceci est un paragraphe.</p>
<p>Ceci est un plus long paragraphe. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Non vero dolor expedita quasi reiciendis minus unde sapiente id eveniet saepe officia quibusdam aspernatur, sint voluptate ipsam ex magni. Aliquam, ex!</p>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les en-têtes
Il y a six balises d'en-tête, de `<h1>` à `<h6>`, qui décrivent la hiérarchie de la structure de la page. Afin de choisir l'en-tête à utiliser, pensez à la façon dont vous organiseriez un essai.
<div class="example essay-headings">
<p><strong>Titre du texte</strong></p>
<ol>
<li>Introduction</li>
<li>Idée principale 1
<ul>
<li>Idée secondaire 1</li>
<li>Idée secondaire 2</li>
</ul>
</li>
<li>Idée principale 2
<ul>
<li>Idée secondaire 1</li>
<li>Idée secondaire 2</li>
</ul>
</li>
<li>Conclusion</li>
</ol>
</div>
Voyons comment décrire cette hiérarchie à l'aide des balises d'en-tête.
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les en-têtes et les balises de section HTML5
Avec l'arrivée des balises de section HTML5, chaque partie du document qui utilise une balise de section a son *propre* plan.
**Plan des en-têtes HTML5**
```xml
<h1>Titre du texte</h1>
<section>
<h1>Introduction</h1>
<p>contenu</p>
</section>
<section>
<h1>Idée principale 1</h1>
<h2>Idée secondaire 1</h2>
<h2>Idée secondaire 2</h2>
</section>
```
---
###Ressource
Apprenez-en plus à propos des en-têtes et de HTML5<!-- .element: class="footnote" --> [ici](https://developer.mozilla.org/fr/docs/Web/HTML/Sections_and_Outlines_of_an_HTML5_document) (en français) et [ici](http://webdesign.tutsplus.com/articles/the-truth-about-multiple-h1-tags-in-the-html5-era--webdesign-16824) (en anglais).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercices de groupe n°3: Ajoutez du contenu (10 mins)
Ajoutez du texte sur la page d'accueil de votre histoire, jeu ou questionnaire. Nous aborderons les images et les liens après.
1. Ajoutez votre titre et votre slogan dans l'en-tête `<header>` avec les balises d'en-tête appropriées.
<span class="note">(**N'oubliez pas!** `<head>` et `<header>` sont deux balises différentes.)</span>
1. Entre les balises `<section>`, ajoutez un en-tête et quelques paragraphes.
<span class="note"><br>Vous n'avez pas encore de contenu? Ajoutez du texte bouche-trou! Trouvez-en dans les ressources ci-dessous.</span>
1. Dans le bas de page `<footer>`, ajoutez un paragraphe.
---
###Ressources (en anglais)
* http://meettheipsums.com
* http://thewireipsum.com
* http://www.quotes.net
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les balises autofermantes et les images
Les balises autofermantes ne changent pas le formatage du contenu et ne nécessitent pas de balise de fermeture. Elles *sont* le contenu.
Les images utilisent une balise autofermante et nécessitent un *attribut* `src` pour indiquer au navigateur l'emplacement du fichier source.
```
<img src="chemin/vers/image/nomdufichier">
```
`alt` est un autre attribut qui s'ajoute aux images pour donner des renseignements sur l'image aux visiteurs atteints de déficience visuelle qui utilisent un lecteur d'écran.
```
<img src="http://placekitten.com/200/300" alt="Chaton!">
```
##Exemple de l'attribut `alt` lorsque l'image ne se charge pas:
<img src="" alt="Chaton!">
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Types de fichiers image
**gif** - petit fichier utilisé pour des dessins, des graphiques et des images avec peu de variation de couleur <span class="note">(Voila pourquoi les gifs animés ont souvent de la neige même s'ils sont drôles!)</span>
**jpg** - petit fichier utilisé pour les photos avec beaucoup de couleurs et de dégradés
**png** - gros fichier avec la meilleure qualité, idéal pour les images avec des arrière-plans transparents
**svg** - format d'image vectorielle basé sur le XML conçu pour les graphiques 2D, prend en charge l'interactivité et l'animation
---
###Ressource (en anglais)
[Voici une longue liste de sites d'images bouche-trous](http://www.wpfreeware.com/tutorial/placeholder-images-generator-service-web-designers/).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Chemin des fichiers image
Il est recommandé, mais pas nécessaire, de mettre tous les fichiers image dans un même dossier pour garder le projet en ordre. Le répertoire **project** que nous utilisons aujourd'hui comprend déjà un dossier **images**.
Comme les images ne sont pas dans le même dossier que **depart.html**, utilisez un chemin *relatif* vers lequel faire un lien vers les fichiers image.
```
<img src="images/fichierimage.jpg">
```
Le point de départ (**depart.html**) se trouve à l'extérieur du dossier **image**. Dans l'exemple ci-dessus, le lien dirige le navigateur vers un dossier nommé **images** puis vers le fichier (*incluant son extension*).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Chemin des fichiers image
Si vous avez un dossier à l'intérieur d'un dossier, ce qu'on appelle un sous-dossier, ajoutez-le au chemin dans votre document.
```
<img src="dossier/sousdossier/nomdufichier">
```
Si vos extensions de fichier ne s'affichent pas par défaut, voici des instuctions pour les activer avec un [Mac](https://support.apple.com/kb/PH19072?locale=fr_CA) et avec [Windows](https://blogs.technet.microsoft.com/activedirectoryua/2013/05/22/how-to-see-those-file-extensions-in-windows/).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
# Les hyperliens
Les hyperliens font référence à des données, comme celles d'un document Web, que le lecteur peut suivre directement en cliquant ou en mettant son curseur sur le lien.
Utilisez la balise d'ancrage `<a>` pour créer un lien. La balise a aussi besoin d'un attribut `href` pour lui donner des renseignements à propos de l'emplacement de la ressource.
```xml
<a href="http://canadalearningcode.ca">Canada Learning Code</a>
```
Pour que le lien s'ouvre dans une nouvelle fenêtre, ajoutez un deuxième attribut, `target` (cible).
```xml
<a href="http://canadalearningcode.ca" target="_blank">Canada Learning Code</a>
```
Voici la syntaxe pour un lien qui dirige vers une adresse courriel.
```xml
<a href="mailto:[email protected]">[email protected]</a>
```
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercice de groupe n°4: Ajoutez des liens et des images (15 mins)
1. Ajoutez une image à votre page d'accueil (souvenez-vous du texte `alt`)
1. Créez un deuxième fichier .html dans votre dossier **project**. Vous pouvez copier et coller la structure du premier fichier ou 'copier' le fichier lui-même. Vous n'avez qu'à le renommer *autrement* que depart.html
1. Créez un lien vers `depart.html` dans votre nouveau fichier .html
</script>
</section>
<section class="slide title" data-markdown data-toc>
<script type="text/template">
#Intro au CSS
##Cascading Style Sheets
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Le CSS: la présentation
* un langage différent du HTML
* un langage de style qui a ses propres règles de syntaxe
* utilisé pour séparer le contenu (HTML) du la présentation (CSS)
* la feuille de style contient une liste de règles
Le CSS nécessite les symboles suivants: les accolades `{ }`, le deux-points `:`, le point-virgule `;` (Image: clavier Apple, français (Canada))
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Syntaxe et terminologie du CSS
* **Sélecteur (selector):** détermine à quel(s) élément(s) HTML les styles seront appliqués.
* **Déclarations:** règles de style venant en paire `propriété:valeur`, sont entourées d'accolades `{ }`, et se terminent avec un point-virgule `;`
```
sélecteur {
propriété: valeur;
}
```
**Les propriétés** déterminent le *type* de style à appliquer (p.ex. couleur (color)). Les **valeurs** sont propres à cette propriété. (p.ex. rouge (red)).
```
p {
color: red;
}
```
>Dans l'exemple ci-dessous, quel est le sélecteur? Quelle est la propriété? Et la valeur?
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Déclarations CSS multiples
Il est possible d'ajouter de multiples déclarations à un sélecteur. Assurez-vous que chaque déclaration se termine par un point-virgule et écrivez-les toutes sur une ligne séparée pour en faciliter la lecture.
```
h2 {
background-color: green;
font-size: 50px;
}
```
En plus de background-color (arrière-plan) et de font-size (grosseur de police), il y a un nombre extrêmement grand de propriétés CSS. Comme de nouvelles propriétés s'ajoutent et que d'autres sont retirées (dépréciées), il est utile d'avoir quelques ressources sous la main pour rester au courant.
---
###Ressources
* http://caniuse.com
* https://developer.mozilla.org/fr/docs/Web/CSS/Reference (en français)
* http://htmldog.com/reference/cssproperties/
</script>
</section>
<section class="slide">
<h1>Exercez-vous à sélectionner un élément</h1>
<p>En utilisant l'exemple en HTML ci-dessous, changez le sélecteur pour que les instructions écrites dans les commentaires soient appliquées.</p>
<pre><code><p>Ceci est un paragraphe.</p>
<h2>Ceci est un h2.</h2>
</code></pre>
<textarea class="snippet" data-subject="#css-selectors">sélecteur { /* sélectionnez le paragraphe */
color: red;
}
sélecteur { /* sélectionnez l'en-tête */
color: blue;
}</textarea>
<div id="css-selectors" class="example">
<p>Ceci est un paragraphe</p>
<h2 style="margin-top:0;">Ceci est un h2</h2>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Relier la feuille de style
Aujourd'hui nous allons créer une feuille de style distincte pour le CSS. Pour créer une feuille de style, vous n'avez qu'à donner l'extension `.css` à un fichier.
Il faut donc relier la feuille de style (stylesheet) au document HTML à l'intérieur de la balise `<head>` (une balise différente de `<header>`).
Utilisez la balise `<link>` (lien) et deux attributs, `rel` et `href`.
```
<head>
<title>Titre de la page</title>
<link rel="stylesheet" href="css/style.css">
</head>
```
Bien que ce ne soit pas nécessaire, les fichiers css sont souvent enregistrés dans un dossier séparé pour mieux les organiser, comme c'est le cas pour les images. <!-- .element: class="note" -->
---
###Ressource
Il y a de nombreuses façons d'ajouter du CSS. Apprenez-en plus sur les liens vers le CSS <!-- .element: class="footnote" -->[ici](http://reference.sitepoint.com/css/linkingcss) (en anglais) et <!-- .element: class="footnote" -->[ici](https://www.hostinger.fr/tutoriels/style-css/) (en français).
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Exercice de groupe: Créez le fichier CSS de votre projet
1. Dans l'éditeur de texte, créez un nouveau fichier CSS en cliquant sur **File > New File**.
1. Nommez-le **styles.css** et enregistrez-le dans le dossier racine (au même endroit que votre fichier **depart.html**).
1. Puis, faites un lien vers ce fichier dans **depart.html** et dans le deuxième fichier html que vous venez de créer.
<span class="note">**Truc de pro!** Tapez `link` et appuyez sur `tab`!</span>
```
<head>
<link rel="stylesheet" href="styles.css">
</head>
```
1. Faites un test en ajoutant un arrière-plan (background) au corps (`body`). N'oubliez pas que le nom de la couleur doit être en anglais.
```
body {
background: lightblue;
}
```
</script>
</section>
<section class="slide first-website" data-markdown>
<script type="text/template">
<div class="text">
<h1>Tada!</h1>
<p>
Vous venez de créer un site Web. HTML + CSS = site Web
</p>
</div>
</script>
</section>
<section class="slide title" data-markdown>
<script type="text/template">
#Décorez votre site <br>
</script>
</section>
<section class="slide" data-markdown>
<script type="text/template">
#Les couleurs CSS