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écharger la bibliothèque de GCWeb

Historique des versions - Canada.ca theme (GCWeb)

2. Copier le contenu des dossiers suivants dans votre serveur Web

• GCWeb
• WET-BOEW

3. Créer votre gabarit

Nous vous recommandons d’utiliser l’entête et bas de page statiques pour Bootstrap 3 comme point de départ.

Vous pouvez également utiliser une page statique, telle que la page de contenu générique, comme une base pour créer votre gabarit.

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

Personnaliser votre gabarit

Le système de conception de Canada.ca et les spécifications du contenu de l’architecture de l’information permettent de personnaliser les scénarios transactionnels et les campagnes. Voir les lignes directrices pour plus de détails sur ce qui est permis.

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, il est recommandé 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.

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

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).