-
Notifications
You must be signed in to change notification settings - Fork 8
/
Copy pathfooter_fr.html
648 lines (617 loc) · 38.3 KB
/
footer_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
<!DOCTYPE html><!--[if lt IE 9]><html class="no-js lt-ie9" lang="en" dir="ltr"><![endif]--><!--[if gt IE 8]><!-->
<html class="no-js" lang="fr" dir="ltr">
<!--<![endif]-->
<head>
<meta charset="utf-8">
<!-- Web Experience Toolkit (WET) / Boîte à outils de l'expérience Web (BOEW)
wet-boew.github.io/wet-boew/License-en.html / wet-boew.github.io/wet-boew/Licence-fr.html -->
<title>Pied de page général - Système de conception de Canada.ca - Canada.ca</title>
<meta content="width=device-width,initial-scale=1" name="viewport">
<meta name="description" content="Le pied de page général (à l’échelle du site) qui se trouve au bas de chaque page. Il comprend la bande principale, une bande contextuelle et une bande sous pied de page. Il s’agit d’un modèle obligatoire avec des éléments facultatifs." />
<meta name="author" content="Secrétariat du Conseil du Trésor du Canada" />
<meta name="dcterms.title" content="Pied de page général" />
<meta name="dcterms.description" content="Le pied de page général (à l’échelle du site) qui se trouve au bas de chaque page. Il comprend la bande principale, une bande contextuelle et une bande sous pied de page. Il s’agit d’un modèle obligatoire avec des éléments facultatifs." />
<meta name="dcterms.creator" content="Secrétariat du Conseil du Trésor du Canada" />
<meta name="dcterms.language" content="fra" />
<meta name="dcterms.subject" content="Système de conception" />
<meta name="dcterms.issued" content="2019-01-08" />
<meta name="dcterms.modified" content="2022-12-23" />
<!--[if gte IE 9 | !IE ]><!-->
<link href="https://www.canada.ca/etc/designs/canada/wet-boew/assets/favicon.ico" rel="icon" type="image/x-icon">
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/theme.min.css">
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/css/wet-boew.min.css" />
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.8.1/css/all.css" integrity="sha384-50oBUHEmvpQ+1lW4y57PTFmhCaXp0ML5d60M1M7uH2+nqUivzIebhndOJK28anvf" crossorigin="anonymous" />
<link rel="stylesheet" href="../css/custom.css">
<link rel="stylesheet" href="../css/split-h1.css">
<!--<![endif]-->
<!--[if lt IE 9]>
<link href="./GCWeb/assets/favicon.ico" rel="shortcut icon" />
<link rel="stylesheet" href="http://wet-boew.github.io/themes-dist/GCWeb/GCWeb/css/ie8-theme.min.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="./wet-boew/js/ie8-wet-boew.min.js"></script>
<![endif]-->
<!--[if lte IE 9]>
<![endif]-->
<noscript>
<link rel="stylesheet" href="https://www.canada.ca/etc/designs/canada/wet-boew/wet-boew/css/noscript.min.css" />
</noscript>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-105628416-1', 'auto');
ga('send', 'pageview');
</script>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-105628416-3"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-105628416-3');
</script>
</head>
<body class="cnt-wdth-lmtd" vocab="http://schema.org/" typeof="WebPage">
<ul id="wb-tphp">
<li class="wb-slc"> <a class="wb-sl" href="#wb-cont">Passer au contenu principal</a> </li>
<li class="wb-slc"> <a class="wb-sl" href="#wb-info">Passer à « Au sujet du gouvernement »</a> </li>
</ul>
<header>
<div id="wb-bnr" class="container">
<section id="wb-lng" class="text-right">
<h2 class="wb-inv">Sélection de la langue</h2>
<div class="row">
<div class="col-md-12">
<ul class="list-inline margin-bottom-none">
<li><a lang="en" href="https://design.canada.ca/common-design-patterns/site-footer.html">English</a></li>
</ul>
</div>
</div>
</section>
<div class="row">
<div class="brand col-xs-5 col-md-4"> <a href="https://www.canada.ca/fr.html"><img src="http://www.canada.ca/etc/designs/canada/wet-boew/assets/sig-blk-fr.svg" alt=""><span class="wb-inv"> Gouvernement du Canada / <span lang="en">Government of Canada</span></span></a> </div>
<section id="wb-srch" class="col-lg-8 text-right">
<h2>Recherche</h2>
<form action="https://canada.ca/fr/sr/srb.html" method="get" role="search" class="form-inline">
<div class="form-group">
<label for="wb-srch-q" class="wb-inv">Rechercher dans Canada.ca</label>
<input id="wb-srch-q" list="wb-srch-q-ac" class="wb-srch-q form-control" name="q" type="search" value="" size="34" maxlength="170" placeholder="Rechercher dans Canada.ca">
<input name="st" value="s" type="hidden"/>
<input name="num" value="10" type="hidden"/>
<input name="langs" value="fra" type="hidden"/>
<input name="st1rt" value="0" type="hidden">
<input name="s5bm3ts21rch" value="x" type="hidden"/>
<datalist id="wb-srch-q-ac">
<!--[if lte IE 9]><select><![endif]-->
<!--[if lte IE 9]></select><![endif]-->
</datalist>
</div>
<div class="form-group submit">
<button type="submit" id="wb-srch-sub" class="btn btn-primary btn-small" name="wb-srch-sub"><span class="glyphicon-search glyphicon"></span><span class="wb-inv">Recherche</span></button>
</div>
</form>
</section>
</div>
</div>
<nav class="gweb-v2 gcweb-menu" typeof="SiteNavigationElement">
<div class="container">
<h2 class="wb-inv">Menu</h2>
<button type="button" aria-haspopup="true" aria-controls="gc-mnu" aria-expanded="false">Menu<span class="wb-inv"> principal</span> <span class="expicon glyphicon glyphicon-chevron-down"></span></button>
<ul id="gc-mnu" role="menu" aria-orientation="vertical" data-ajax-replace="https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-fr.html">
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/jobs.html">Emplois et milieu de travail</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/immigration-citizenship.html">Immigration et citoyenneté</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://voyage.gc.ca/">Voyage et tourisme</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/entreprises.html">Entreprises et industrie</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/benefits.html">Prestations</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/sante.html">Santé</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/impots.html">Impôts</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/environnement.html">Environnement et ressources naturelles</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/defense.html">Sécurité nationale et défense</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/culture.html">Culture, histoire et sport</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/police.html">Services de police, justice et urgences</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/en/services/transport.html">Transport et infrastructure</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="http://international.gc.ca/world-monde/index.aspx?lang=fra">Canada et le monde</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/finance.html">Argent et finances</a></li>
<li role="none presentation"><a role="menuitem" tabindex="-1" href="https://www.canada.ca/fr/services/science.html">Science et innovation</a></li>
</ul>
</div>
</nav>
<nav id="wb-bc" property="breadcrumb">
<h2>Vous êtes ici :</h2>
<div class="container">
<ol class="breadcrumb">
<li><a href="https://www.canada.ca/fr.html">Canada.ca</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/a-propos.html">À propos de Canada.ca</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/a-propos/systeme-conception.html">Système de conception de Canada.ca</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/a-propos/systeme-conception/bibliotheque-modeles.html">Bibliothèque de modèles et de configurations de conception</a></li>
</ol>
</div>
</nav>
</header>
<!--/* Hide Nav; Hide Right Rail /*-->
<main role="main" property="mainContentOfPage" class="container">
<h1 property="name" id="wb-cont" dir="ltr"><span class="stacked"><span>Pied de page général</span>: <span>Système de conception de Canada.ca</span></span></h1>
<p><strong>Dernière mise à jour</strong> : 2022-12-23</p>
<section>
<p><span class="label label-danger">Obligatoire</span></p>
<p>Le pied de page général (à l’échelle du site) situé au bas de chaque page Web contient jusqu’à 3 bandes :</p>
<ul>
<li>Bande contextuelle</li>
<li>Bande principale</li>
<li>Bande sous pied de page</li>
</ul>
<p><strong>Mise à jour de conception en 2022</strong> : Nous avons récemment mis à jour ce modèle dans le cadre d’une nouvelle stratégie de navigation issue du projet de recherche Orientation dans Canada.ca. Pour en savoir plus, consultez la section <a href="#recherches">Recherches et justification</a> de cette page.</p>
<div class="pattern-demo mrgn-tp-lg mrgn-bttm-xl"><img src="../images/footer-fr-crop.png" class="img-responsive" alt=""> </div>
<p><a href="pied-page-contenu.html">Consulter le modèle Pied de page de la zone du contenu</a> pour obtenir des conseils sur la manière d'appliquer les composantes Date de modification, Partager cette page, et Signaler un problème ou l'outil de rétroaction sur la page.</p>
<section>
<h2>Sur cette page</h2>
<ul>
<li><a href="#utiliser">Quand utiliser</a></li>
<li><a href="#eviter">Quoi éviter</a></li>
<li><a href="#conception">Contenu et conception</a></li>
<li><a href="#comment">Comment mettre en œuvre</a></li>
<li><a href="#recherches">Recherches et justification</a></li>
<li><a href="#modifications">Dernières modifications</a></li>
<li><a href="#discussion">Discussion</a></li>
</ul>
</section>
<section>
<h2 id="utiliser">Quand utiliser</h2>
<p>Le pied de page fait office de dépannage pour les utilisateurs. Ils le consultent s’ils ne trouvent pas ce qu’ils
cherchent dans le contenu principal de la page.</p>
<p>Chaque élément du pied de page général fournit un accès direct et centralisé à des types de contenu précis (par exemple,
Coordonnées, Ministères et organismes, Confidentialité). </p>
<p>Déterminez les éléments de pied de page à utiliser en fonction du type de page que vous créez.</p>
<div class="wb-tabs">
<div class="tabpanels">
<details id="001" open="open">
<summary><strong>Pages régulières</strong></summary>
<div class="col-md-9">
<p class="mrgn-tp-lg">Les <strong>pages régulières</strong> sont des pages dans lesquelles les utilisateurs peuvent naviguer sans perdre de données, déclencher des erreurs ou
mettre fin à leur session.</p>
</div>
<div class="col-md-12">
<h3>Exigences générales pour le pied de page d’une page régulière</h3>
<div class="panel panel-default mrgn-tp-md">
<table class="table table-striped table-condensed" id="mandatory-01" aria-live="polite">
<caption class="wb-inv">
Exigences générales pour le pied de page
</caption>
<thead>
<tr>
<th class="col-md-4">Élément de pied de page</th>
<th class="col-md-3">Obligatoire</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. <a href="pied-page-contextuelle.html">Bande contextuelle</a></td>
<td>Optionnel</td>
</tr>
<tr>
<td>2. <a href="pied-page-principale.html">Bande principale</a></td>
<td><span class="far fa-check-circle text-success"></span><span class="wb-inv">Obligatoire</span></td>
</tr>
<tr>
<td>3. <a href="pied-page-sous.html">Bande sous pied de page avec le mot-symbole Canada
<p></p>
</a></td>
<td><span class="far fa-check-circle text-success"></span><span class="wb-inv">Obligatoire</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<details id="002">
<summary><strong>Pages transactionnelles</strong></summary>
<div class="col-md-9">
<p class="mrgn-tp-lg">Les <strong>pages transactionnelles</strong> sont des pages avec une tâche d’interaction où les personnes risquent de perdre des données, de déclencher des erreurs ou de mettre fin à leur session si elles quittent la page.</p>
</div>
<div class="col-md-12">
<h3>Exigences générales pour le pied de page d’une page transactionnelle</h3>
<div class="panel panel-default mrgn-tp-md">
<table class="table table-striped table-condensed" id="mandatory-02" aria-live="polite">
<caption class="wb-inv">
Exigences générales pour le pied de page
</caption>
<thead>
<tr>
<th class="col-md-4">Élément de pied de page</th>
<th class="col-md-3">Obligatoire</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. <a href="pied-page-contextuelle.html">Bande contextuelle</a></td>
<td>Optionnel</td>
</tr>
<tr>
<td>2. <a href="pied-page-principale.html">Bande principale</a></td>
<td>Optionnel</td>
</tr>
<tr>
<td>3. <a href="pied-page-sous.html">Bande sous pied de page avec le mot-symbole Canada
<p></p>
</a></td>
<td><span class="far fa-check-circle text-success"></span><span class="wb-inv">Obligatoire</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
<details id="003">
<summary><strong>Pages de campagne</strong></summary>
<div class="col-md-9">
<p class="mrgn-tp-lg">Les <strong>pages de campagne</strong> sont des pages de renvoi pour des campagnes de marketing ou de publicité externes. La flexibilité de la mise en page
permet aux institutions d’inclure des éléments de leur campagne externe dans la page.</p>
</div>
<div class="col-md-12">
<h3>Exigences générales pour le pied de page d’une page de campagne</h3>
<div class="panel panel-default mrgn-tp-md">
<table class="table table-striped table-condensed" id="mandatory-03" aria-live="polite">
<caption class="wb-inv">
Exigences générales pour le pied de page
</caption>
<thead>
<tr>
<th class="col-md-4">Élément de pied de page</th>
<th class="col-md-3">Obligatoire</th>
</tr>
</thead>
<tbody>
<tr>
<td>1. <a href="pied-page-contextuelle.html">Bande contextuelle</a></td>
<td>Optionnel</td>
</tr>
<tr>
<td>2. <a href="pied-page-principale.html">Bande principale</a></td>
<td>Optionnel</td>
</tr>
<tr>
<td>3. <a href="pied-page-sous.html">Bande sous pied de page avec le mot-symbole Canada
<p></p>
</a></td>
<td><span class="far fa-check-circle text-success"></span><span class="wb-inv">Obligatoire</span></td>
</tr>
</tbody>
</table>
</div>
</div>
</details>
</div>
</div>
</section>
<section>
<h2 id="eviter">Quoi éviter</h2>
<p>Ne personnalisez pas les éléments obligatoires du pied de page général, au-delà de ce qui est recommandé dans les conseils pour chacun. La cohérence dans cet espace est essentielle pour consolider la reconnaissance de la marque et la confiance
des utilisateurs.</p>
<p>Par exemple, le mot-symbole Canada doit toujours apparaître dans le coin inférieur droit et les liens dans la bande
principale ne doivent jamais changer.</p>
</section>
<section>
<h2 id="conception">Contenu et conception</h2>
<p>Spécifications détaillées de contenu et de conception pour chaque élément du pied de page :</p>
<ol>
<li><a href="pied-page-contextuelle.html">Bande contextuelle</a></li>
<li><a href="pied-page-principale.html">Bande principale</a></li>
<li><a href="pied-page-sous.html">Bande sous pied de page</a></li>
</ol>
<h3>Exemples visuels</h3>
<details>
<summary>Pages régulières (en mode d'affichage pour ordinateur et pour appareil mobile)</summary>
<div class="pattern-demo mrgn-bttm-md">
<figure class="mrgn-bttm-lg">
<figcaption><b>Pied de page général – grand écran</b></figcaption>
<img src="../images/footer-fr.png" class="img-responsive"
alt="Schéma du pied de page général pour les grands écrans. Version texte ci-dessous :">
<details>
<summary class="wb-toggle" data-toggle="{"print":"on"}">Version texte</summary>
<p>Sur les grands écrans, le pied de page général comprend 3 bandes distinctes de liens. La première est la bande
contextuelle. Elle contient un titre et 3 liens contextuels sur une seule ligne. La seconde est la bande principale.
Elle est disposée en 3 colonnes et contient des liens vers « Toutes les personnes-ressources », « Ministères et
organismes » et « À propos du gouvernement ». Une petite ligne décorative sert de pause avant de poursuivre avec des
liens vers tous les thèmes et publics. La bande sous pied de page se trouve au bas de la page et contient des liens vers
« Médias sociaux », « Applications mobiles », « À propos de Canada.ca », « Avis » et « Confidentialité ». Ils sont tous alignés à gauche sur une seule ligne. Elle comprend également le mot-symbole Canada sur la même ligne, aligné à droite.</p>
</details>
</figure>
</div>
<div class="pattern-demo">
<figure class="mrgn-bttm-lg">
<figcaption><b>Pied de page général – petit écran</b></figcaption>
<img src="../images/footer-mobile-fr.png" class="img-responsive" alt="Schéma du pied de page général pour les petits écrans. Version texte ci-dessous :">
<details>
<summary class="wb-toggle" data-toggle="{"print":"on"}">Version texte</summary>
<p>Sur les petits écrans, le pied de page général comprend 3 bandes distinctes de liens. La première est la bande
contextuelle. Elle contient un titre et 3 liens contextuels sur une seule ligne. La seconde est la bande principale.
Elle est disposée en une seule colonne et contient des liens vers « Toutes les personnes-ressources », « Ministères et
organismes » et « À propos du gouvernement ». Une petite ligne décorative sert de pause avant de poursuivre avec des
liens vers tous les thèmes et publics. La bande sous pied de page se trouve au bas de la page et contient des liens vers
« Médias sociaux », « Applications mobiles », « À propos de Canada.ca », « Avis » et « Confidentialité ». Sous ces liens se trouve une dernière rangée avec le mot-symbole Canada aligné à droite.</p>
</details>
</figure>
</div>
</details>
<details>
<summary>Pages transactionnelles et de campagne (en mode d'affichage pour ordinateur et pour appareil mobile)</summary>
<div class="pattern-demo mrgn-bttm-md">
<figure class="mrgn-bttm-lg">
<figcaption><b>Pied de page général minimum – grand écran</b></figcaption>
<img src="../images/footer-min-fr.png" class="img-responsive"
alt="Schéma du pied de page général minimum pour les grands écrans. Version texte ci-dessous :">
<details>
<summary class="wb-toggle" data-toggle="{"print":"on"}">Version texte</summary>
<p>Sur les grands écrans, le pied de page général minimum pour les pages transactionnelles et de campagne comprend seulement la bande
sous pied de page avec les liens vers « Avis » et « Confidentialité ». Ils
sont tous alignés à gauche sur une seule ligne. Elle comprend également le mot-symbole Canada sur la même ligne, aligné
à droite.</p>
</details>
</figure>
</div>
<div class="pattern-demo">
<figure class="mrgn-bttm-lg">
<figcaption><b>Pied de page général minimum – petit écran</b></figcaption>
<img src="../images/footer-min-mobile-fr.png" class="img-responsive" alt="Schéma du pied de page général minimum pour les petits écrans. Version texte ci-dessous :">
<details>
<summary class="wb-toggle" data-toggle="{"print":"on"}">Version texte</summary>
<p>Sur les petits écrans, le pied de page général minimum pour les pages transactionnelles et de campagne comprend seulement la bande
sous pied de page avec les liens vers « Avis » et « Confidentialité », disposés en une seule colonne. Sous ces liens se trouve le mot-symbole Canada aligné à droite.</p>
</details>
</figure>
</div>
</details>
</section>
<section>
<h2 id="comment">Comment mettre en œuvre</h2>
<p>Trouvez des exemples pratiques et du code pour configurer le pied de page.</p>
<h3>Référence de mise en oeuvre du thème GCWeb</h3>
<h4>Norme</h4>
<ul>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/no-footer-contextual-fr.html">Bande principale et bande sous pied de page</a></li>
</ul>
<h4>Alternée pour les pages régulières</h4>
<ul>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/footers-fr.html">Pied de page complet (bande contextuelle, bande principale et bande sous de pied de page)</a></li>
</ul>
<h4>Alternatives pour les pages transactionnelles et les pages de campagne</h4>
<ul>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/footers-fr.html">Pied de page complet (bande contextuelle, bande principale et bande sous de pied de page)</a></li>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/only-footer-main-fr.html">Bande principale et bande sous pied de page sans les liens facultatifs</a></li>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/no-footer-main-fr.html">Bande contextuelle et bande sous pied de page</a></li>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/only-footer-contextual-fr.html">Bande contextuelle et bande sous pied de page sans les liens facultatifs</a></li>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/only-footer-corporate-fr.html">Bande sous pieds de page uniquement</a></li>
<li><a href="https://wet-boew.github.io/GCWeb/sites/footers/no-footers-fr.html">Bande sous pieds pied de page sans liens facultatifs</a></li>
</ul>
<h3>Mises en œuvre</h3>
<p>Déterminez la configuration du pied de page qui répond le mieux à vos besoins pour le type de page que vous créez. Consultez les conseils de votre mise en œuvre pour personnaliser les liens de la bande contextuelle ou de la bande de sous-pied.</p>
<div class="wb-tabs">
<div class="tabpanels">
<details id="001" open="open">
<summary><strong>AEM du GC</strong></summary>
<p>Pour l'Adobe Experience Manager du Gouvernement du Canada (AEM) :</p>
<ul>
<li><a href="https://www.gcpedia.gc.ca/gcwiki/images/8/8c/Documentation-AEM-6.5-Unite-3-1-1-Personnaliser_le_pied_de_page_general.pdf">Personnaliser le pied de page général (PDF - disponible uniquement sur le réseau du gouvernement du Canada)</a></li>
<li><a href="https://www.gcpedia.gc.ca/wiki/Documentation_d%27AEM_sp%C3%A9cifique_au_GC_6.5">Documentation d'AEM / Service Web Géré (disponible uniquement sur le réseau du gouvernement du Canada)</a></li>
</ul>
</details>
<details id="002">
<summary><strong>SGDC</strong></summary>
<p>Pour la Solution de gabarits à déploiement centralisé (SGDC) :</p>
<ul>
<li><a href="https://cdts.service.canada.ca/app/cls/WET/gcweb/v4_0_47/cdts/samples/footer-fr.html">Pied de page complet (les bandes contextuelle, principale, et sous pied de page)</a></li>
<li><a href="https://cenw-wscoe.github.io/sgdc-cdts/docs/index-fr.html">Documentation SGDC documentation</a></li>
</ul>
</details>
<details id="003">
<summary><strong>Drupal WxT</strong></summary>
<p>Pour Drupal WxT :</p>
<ul>
<li><a href="https://drupalwxt.github.io/en/">Documentation Drupal WxT (en anglais seulement)</a></li>
</ul>
</details>
</div>
</div>
</section>
<section>
<h2 id="recherches">Recherches et justification</h2>
<p>Nous avons mis à jour le pied de page général de Canada.ca pour le faire correspondre à une nouvelle stratégie de
navigation générale issue du projet de recherche Orientation dans Canada.ca.</p>
<ul>
<li><a href="https://blogue.canada.ca/resumes-recherche/orientation-dans-canada-ca">Résumé de la recherche sur l’orientation dans Canada.ca</a> : Ce résumé explique le contexte de la recherche et les constatations qui ont mené aux mises à jour de la conception.</a>
</li>
<li><a href="https://blogue.canada.ca/2022/12/21/le-projet-orientation.html">Le projet Orientation dans Canada.ca améliore notre approche en matière de la navigation</a> : Ce billet de blogue explique les changements proposés à la conception de Canada.ca et comment ils seront mis en œuvre.</li>
</ul>
</section>
<section>
<h2 id="modifications">Dernières modifications</h2>
<dl class="dl-horizontal">
<dt><time datetime="2023-02-07" class="link-muted">2023-02-07</time></dt>
<dd>Ajout des liens vers les conseils de mise en œuvre de l'AEM du GC, la SGDC et le Drupal WxT</dd>
<dt><time datetime="2022-12-23" class="link-muted">2022-12-23</time></dt>
<dd>Ajout des liens pour le résumé de recherche et le billet de blogue pour le projet Orientation dans Canada.ca</dd>
<dt>
<time datetime="2022-11-30" class="link-muted">2022-11-30</time>
</dt>
<dd>Mise à jour du modèle pour tenir compte des changements de conception du projet de recherche Orientation dans Canada.ca, déplacement des
spécifications détaillées vers des sous-pages propres aux bandes individuelles</dd>
</dl>
</section>
<section>
<h2 id="discussion">Discussion</h2>
<ul>
<li><a href="https://github.com/canada-ca/design-system-systeme-conception/issues">Discuter du modèle dans les questions GitHub</a></li>
<li><a
href="https://design-gc-conception.slack.com/join/shared_invite/enQtODE1OTc5Mzg5NzQ4LWQ3MjZjMTdjMjk2ZTZmMTJjYWQ3ZmRiNDYwYjRmN2NjYzQyNjFlNDBlY2FkNWE1ODg2YjExY2QwZmVjN2MwMGM">Se joindre à la conversation dans Slack</a></li>
<li><a href="mailto:[email protected]">Envoyer un courriel au Bureau de la transformation numérique</a></li>
</ul>
</section>
</section>
<!-- START PAGE FEEDBACK WIDGET -->
<div class="row row-no-gutters mrgn-tp-xl">
<div class="col-sm-7 col-lg-6">
<section class="gc-pg-hlpfl provisional">
<div class="well mrgn-bttm-0">
<form id="gc-pg-hlpfl-frm" action="#" method="post" autocomplete="off">
<input type="hidden" name="institutionopt" value="tbs">
<input type="hidden" name="themeopt" value="Policies">
<input type="hidden" name="language" value="FR">
<input type="hidden" name="pageTitle" value="Concevoir du contenu pour Canada.ca">
<input type="hidden" name="submissionPage"
value="https://conception.canada.ca/configurations-conception-communes/pied-page.html">
<input type="hidden" name="sectionopt" value="Design system">
<input type="hidden" id="helpful" name="helpful" value="Yes">
<div class="gc-pg-hlpfl-btn">
<div class="row row-no-gutters">
<div class="col-xs-12 col-sm-7 mrgn-tp-sm">
<h2 class="mrgn-tp-sm h5">Avez-vous trouvé ce que vous cherchiez?</h2>
</div>
<div class="col-xs-8 col-sm-5 text-right">
<button id="btnyes" type="submit" value="Yes" class="btn btn-primary">Oui</button>
<button id="btnno" type="button"
class="btn btn-primary mrgn-lft-sm nojs-hide">Non</button>
</div>
</div>
</div>
<p class="h3 hidden nojs-show">Sinon, dites nous pourquoi :</p>
<div class="gc-pg-hlpfl-no nojs-show">
<fieldset>
<legend class="h4 mrgn-tp-0 mrgn-bttm-md">Qu’est-ce qui n’allait pas?</legend>
<div class="radio">
<label for="problem1">
<input name="problem" id="problem1" type="radio"
value="Je ne peux pas trouver l’information"
data-gc-analytics-wtph-value="I can't find the information-Je ne peux pas trouver l'information"
data-gc-analytics-collect="notPrivate">
Je ne peux pas <strong>trouver</strong> l’information </label>
</div>
<div class="radio">
<label for="problem2">
<input name="problem" id="problem2" type="radio"
value="L'information est difficile à comprendre"
data-gc-analytics-wtph-value="The information is hard to understand-J'ai trouvé l'information difficile à comprendre"
data-gc-analytics-collect="notPrivate">
L'information est difficile à <strong>comprendre</strong> </label>
</div>
<div class="radio">
<label for="problem3">
<input name="problem" id="problem3" type="radio"
value="Il y avait une erreur / quelque chose ne fonctionnait pas"
data-gc-analytics-wtph-value="There was an error or something didn't work-Il y avait une erreur our quelque chose ne fonctionnait pas"
data-gc-analytics-collect="notPrivate">
Il y avait une erreur / quelque chose <strong>ne fonctionnait pas</strong> </label>
</div>
<div class="radio">
<label for="problem4">
<input name="problem" id="problem4" type="radio" value="Other reason"
data-gc-analytics-wtph-value="Other reason-Autre raison"
data-gc-analytics-collect="notPrivate">
Autre raison </label>
</div>
</fieldset>
<label for="problem6" class="mrgn-bttm-0">Veuillez fournir plus de détails</label>
<p class="small"> <strong>Vous ne recevrez aucune réponse. Les numéros de téléphone et les adresses
électroniques seront supprimés.</strong> <br>
<span class="small">Maximum de 300 caractères</span> </p>
<textarea id="problem6" name="details" class="full-width" maxlength="300"></textarea>
<button type="submit" value="No"
class="btn btn-primary mrgn-tp-md mrgn-bttm-sm">Soumettre</button>
</div>
</form>
<div class="gc-pg-hlpfl-thnk hide">
<p class="h6 mrgn-tp-sm mrgn-bttm-sm"><span class="far fa-check-circle text-success mrgn-rght-sm"
aria-hidden="true"></span> Merci de vos commentaires</p>
</div>
</div>
</section>
</div>
<div class="col-sm-3 col-sm-offset-1 col-lg-offset-3">
<div class="wb-share"
data-wb-share="{"pnlId":"pnlShrPg", "lnkClass": "btn btn-default btn-block mrgn-tp-md"}"> </div>
</div>
</div>
<!-- END PAGE FEEDBACK WIDGET -->
<div class="pagedetails">
<dl id="wb-dtmd">
<dt>Date de modification :</dt>
<dd>
<time property="dateModified">2022-12-23</time>
</dd>
</dl>
</div>
</main>
<footer id="wb-info">
<div class="landscape">
<nav class="container wb-navcurr">
<h2 class="wb-inv">Au sujet du gouvernement</h2>
<ul class="list-unstyled colcount-sm-2 colcount-md-3">
<li><a href="https://www.canada.ca/fr/contact.html">Contactez-nous</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/min.html">Ministères et organismes</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/fonctionpublique.html">Fonction publique et force militaire</a></li>
<li><a href="https://www.canada.ca/fr/nouvelles.html">Nouvelles</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/systeme/lois.html">Traités, lois et règlements</a></li>
<li><a href="https://www.canada.ca/fr/transparence/rapports.html">Rapports à l'échelle du gouvernement</a></li>
<li><a href="https://pm.gc.ca/fra">Premier ministre</a></li>
<li><a href="https://www.canada.ca/fr/gouvernement/systeme.html">Comment le gouvernement fonctionne</a></li>
<li><a href="https://ouvert.canada.ca/">Gouvernement ouvert</a></li>
</ul>
</nav>
</div>
<div class="brand">
<div class="container">
<div class="row">
<nav class="col-md-9 col-lg-10 ftr-urlt-lnk">
<h2 class="wb-inv">À propos du site</h2>
<ul>
<li><a href="https://www.canada.ca/fr/sociaux.html">Médias sociaux</a></li>
<li><a href="https://www.canada.ca/fr/mobile.html">Applications mobiles</a></li>
<li><a href="https://www1.canada.ca/fr/nouveausite.html">À propos de Canada.ca</a></li>
<li><a href="https://www.canada.ca/fr/transparence/avis.html">Avis</a></li>
<li><a href="https://www.canada.ca/fr/transparence/confidentialite.html">Confidentialité</a></li>
</ul>
</nav>
<div class="col-xs-6 visible-sm visible-xs tofpg"> <a href="#wb-cont">Haut de la page <span class="glyphicon glyphicon-chevron-up"></span></a> </div>
<div class="col-xs-6 col-md-3 col-lg-2 text-right"> <img src="http://www.canada.ca/etc/designs/canada/wet-boew/assets/wmms-blk.svg" alt="Symbole du gouvernement du Canada"> </div>
</div>
</div>
</div>
</footer>
<!--[if gte IE 9 | !IE ]><!-->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.js"></script>
<script src="https://wet-boew.github.io/themes-dist/GCWeb/wet-boew/js/wet-boew.min.js"></script>
<!--<![endif]-->
<!--[if lt IE 9]>
<script src="./wet-boew/js/ie8-wet-boew2.min.js"></script>
<![endif]-->
<script src="https://www.canada.ca/etc/designs/canada/wet-boew/js/theme.min.js"></script> <script>
document.getElementById('submissionPage').value = location.href;
</script>
<!-- START SCRIPT PAGE FEEDBACK WIDGET -->
<script>
$(document).on("wb-ready.wb", function () {
$("#btnno").click(function (e) {
$(".gc-pg-hlpfl-no").removeClass("nojs-show");
$(".gc-pg-hlpfl-btn").addClass("hide");
$("#helpful").val("No");
});
$("#gc-pg-hlpfl-frm").submit(function (e) {
e.preventDefault();
$(".gc-pg-hlpfl-thnk").removeClass("hide");
$("#gc-pg-hlpfl-frm").addClass("hide nojs-show");
$.ajax({
url: 'https://pagesuccessemailqueue.azurewebsites.net/api/QueueProblemForm',
type: 'POST',
dataType: 'text',
data: $('form#gc-pg-hlpfl-frm').serialize(),
success: function (data) { },
error: function (xhr, status, err) {
console.log(xhr.responseText);
}
});
});
});
</script>
<!-- END SCRIPT PAGE FEEDBACK WIDGET -->
</body>
</html>