Guide d’implémentation rapide – thème GCWeb

Le présent guide porte sur l’implémentation du thème de Canada.ca avec la version 4.x de la Boîte à outils de l’expérience Web (WET-BOEW).

Le nom de code du thème de Canada.ca est GCWeb. Nous utilisons ces deux termes de façon interchangeable. GCWeb est basé sur WET-BOEW 4.

Configurer votre gabarit

1. Téléchargez la bibliothèque de GCWeb

Historique des versions - Canada.ca theme (GCWeb)

Chaque version contient les ressources suivantes (à la fin des notes de version) :

• themes-dist-[version]-gcweb.zip : c'est ce fichier dont vous avez besoin pour créer votre site GCWeb.
• themes-cdn-[version]-gcweb.zip : ce fichier ne contient que le constructeur GCWeb (exclut le constructeur WET-BOEW).
• Source code (zip) : ce fichier contient un instantané du référentiel GCWeb au moment de la publication. À utiliser uniquement si vous avez l'intention de créer votre site en utilisant GCWeb-Jekyll ou de contribuer au projet.

2. Copiez le contenu dans votre serveur Web

Après avoir téléchargé le fichier zip (themes-dist-[version]-gcweb.zip), copiez les dossiers suivants sur votre serveur Web :

• GCWeb/
• wet-boew/

Le reste du fichier zip contient des informations complémentaires et des démos.

3. Créez votre gabarit

Comme point de départ pour créer votre gabarit, nous vous recommandons d'utiliser une page statique, comme le contenu de page générique. Vous pouvez ensuite copier votre gabarit de page en page. Cependant, vous devrez modifier les parties suivantes du gabarit :

• Titre de la page
• Description de la page
• Métadonnées de la page
• Lien vers la page dans la langue opposée
• Éléments du fil d’Ariane
• Contenu (corps) de la page
• Date de modification de la page
• Lien relatif à GCWeb et au dossier WET-BOEW pour :
  • les fichiers CSS
  • les images
  • le Javascript
• Le lieu où soumettre le formulaire de recherche

Si vous concevez un squelette de gabarit bilingue, vous devrez également :

• Basculer l'attribut lang pour la bonne langue
• Créer des partiels pour chaque élément de contenu du gabarit tel que :
  • Liens de saut (« skip links »)
  • Sélection de la langue
  • FIP – Texte et image pour l’éditeur d’organisme du gouvernement du Canada
  • Formulaire de recherche
  • Menu principal – Vous pourriez vouloir utiliser le menu CDN en changeant la valeur de l’attribut data-ajax
  • Fil d’Ariane
  • Signaler un problème
  • Date de modification
  • Bas de page

Pour vous aider à créer vos pages, consultez les sections suivantes de notre documentation :

• Composants : contient les composants GC et les modèles de conception à utiliser dans la section contenu de votre page.
• Modèles : contient la disposition des composants des pages (ex. modèle institutionnel) et les modèles spéciaux de page (ex. Splash page).
• Sites : contient des composants pour le modèle de référence du site Canada.ca.

Personnalisez votre gabarit

Le Bureau de la transformation numérique du Secrétariat du Conseil du Trésor (BTN-SCT) fournit des conseils sur la façon d'utiliser les composants mis en oeuvre dans notre documentation de référence du thème Canada.ca. Bien que BTN-SCT permette la personnalisation des scénarios transactionnels et des campagnes, nous vous recommandons de lire les conseils pour des informations plus détaillées sur ce qui est autorisé :

• Système de conception de Canada.ca
• Spécifications du contenu de l’architecture de l’information

Utiliser le style de Canada.ca sans le Javascript de WET-BOEW

GCWeb est conçu pour fonctionner avec WET-BOEW. Il est conforme à WCAG 2.0 Niveau AA et s’appuie entièrement sur le cadre WET-BOEW 4. Si vous n’utilisez que le CSS et le balisage HTML de base, on vous encourage à :

• Effectuer une évaluation WCAG complète pour chaque page publiée.
• Créer votre propre JS pour le comportement du menu principal.
• Recréer et tenir à jour chaque plugiciel, conception commune et comportement mis en place par WET-BOEW.

Migrer votre contenu

Avant de migrer votre contenu, nous vous recommandons de :

• Créer un inventaire du contenu
• Identifier vos taches principales et pages principales afin de prioriser votre analyse du contenu
• Compléter un exercice de nettoyage du contenu qui comprend au moins de :
  • Prendre des mesures sur le contenu redondant, insignifiant et dépassé (RID)
  • Réparer tout problème de lien HTML qui pourrait être signalé par le logiciel de validation W3C HTML5
  • Supprimer tout CSS personnalisé et CSS en ligne – si cela est impossible, identifier ces pages et centraliser le CSS dans unseul fichier

Convertir vos pages de contenu en balisage compatible avec GCWeb signifie que :

• Vous utilisez un balisage HTML5 valide
• Il n`y a pas de CSS personnalisé et de CSS en ligne
• Vous utilisez la grille CSS Bootstrap 3
• Vous utilisez GCWeb CSS et WET-BOEW 4 CSS, documentés dans :
  • le Guide de style WET-BOEW
  • les notes et autres ressources dans GCWeb
  • l’échantillon de code et les gabarits de pages publiés dans GCWeb (tel que le gabarit Sujet)
• Vous utilisez les plugiciels WET-BOEW 4 et GCWeb
  • plugiciels WET-BOEW 4
  • plugiciels GCWeb

Voici des problèmes bien connus sur la migration d’un site à partir de WET-BOEW 3 :

• Le système de grille, .span-* doit être converti en une combinaison de div.row et div.col-*-*.
• Tout module légende devrait être converti en une alerte ou en un panneau en combinaison avec une grille CSS. Ils doivent être codés en balisage distinct.
• D’autres changements qui ne sont pas entièrement documentés, comme le mappage de classe CSS.

<div class="module-info span-3">
<h3>…</h3>
<p>…</p>
</div>

<div class="row">
<div class="col-md-6">
<section class="alert alert-info">
<h3>…</h3>
<p>…</p>
</section>
</div>
</div>

Rester à jour

Chaque version de GCWeb suit une numérotation stricte des versions et les notes de version contiennent tous les renseignements requis pour mettre à jour votre implémentation. Cela comprend :

• une liste de tous les changements marqués comme Majeur, Mineur ou Correctif
• un survol de tous les changements apportés à la dépendance WET-BOEW 4
• une liste de fichiers modifiés que vous auriez à remplacer
• des liens à tous les codes de hachage de l’intégrité des sous-ressources (SRI)
• des détails ad hoc sur des mises à jour de contenu spécifiques qui n’ont pas encore leur propre page de documentation

Depuis février 2019, nous utilisons et publions les versions selon la gestion sémantique de version 2.0.0 (décision sur la conception 6), où notre interface de protocole d’application (API) est définie par décision sur la conception 3

Nous essayons d'éviter d'apporter des modifications radicales qui ont un impact sur les auteurs Web. La plupart de nos changements de rupture n'affectent que le modèle de référence du site et tous les changements majeurs bénéficient d'une prise en charge en amont pendant au moins un (1) an pour faciliter la transition.

Veuillez noter que même si nous travaillons à l'amélioration de la documentation de tous nos composants, il reste encore quelques lacunes. Si vous avez des questions concernant ces lacunes, n'hésitez pas à nous les poser pendant nos heures de service hebdomadaires.

Obtenir de l’aide

• Consultez la documentation publiée dans GCWeb et dans le système de conception de Canada.ca
• Consultez la liste des problèmes en cours et fermés dans GitHub.
• Soumettez un nouveau problème dans Github.
• Participez aux Heures de service de la BOEW hebdomadaires (chaque mardi) et posez des questions.

Menu CDN

L’Éditeur principal met à jour le fragment du fichier HTML suivant à chaque fois qu’un changement est apporté au menu principal de Canada.ca :

• Français : https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-fr.html
• Anglais : https://www.canada.ca/content/dam/canada/sitemenu/sitemenu-v2-en.html

En-tête et bas de page statiques

Voici les en-têtes et les bas de pages HTML que vous pouvez copier et coller dans votre projet, avec quelques modifications (p. ex. les métadonnées).