GCWeb, le thème WET-BOEW de Canada.ca
Les gabarits et les conceptions communes si dessous sont une référence d'implémentation du Système de conception de Canada.ca, incluant les exigences obligatoire de la spécifications du contenu et de l’architecture de l'information (C&AI) pour Canada.ca. Les ministères et organisme du gouvernement du Canada peuvent y contribuer en publiant leur modèle et leur conception commune via le dépôt github de GCWeb.
Vous avez trouvé des problèmes d'implémentation par rapport au C&AI ou vous désirez contribuer au dévelopement, faites nous le savoir en soumettant une requête GCWeb, en envoyant une pull request ou en participant à un de nos heures de service de la BOEW (anciennement connu sous le nom de WET-BOEW code sprint) hedbomadaire à chaque mardi.
Définition des états
- Stable
- Rencontre les exigences d'une spécification.
- Provisionel
- Plutôt stable, mais expérimental; utilisez à vos risques et périls.
- Obsolète
- Ne pas utilisé car c'est obsolète, mais disponible pour votre information.
- Défaut
- Manque le statut dans la documentation de la composante.
Composantes
-
Contenu en gras État: Stable
Ce composant applique une épaisseur de police en gras à chaque élément de texte qu'il contient et génère une épaisseur de police normale lorsque l'élément
<strong>est appliqué.Tous les exemples et info
- Exemples
- Documentations
-
Cases à cocher et boutons radio État: Stable
Affiche des cases à cocher et boutons radio plus grand que ce qui est nativement offert par les navigateurs et qui est conforme avec les configurations de conception de Canada.ca.
Tous les exemples et info
-
Lien de téléchargement État: Stable
Lien de téléchargement avec des styles personalisés.
Tous les exemples et info
- Exemples
-
Lien en vedette État: Stable
Ceci ajoute un lien en vedette court et descriptif vers une page que votre institution doit mettre en évidence.
Tous les exemples et info
-
Promotions contextuelles État: Stable
Des composantes d’intérieur de page servant à promouvoir des activités, des initiatives, des programmes et des services pangouvernementaux.
Tous les exemples et info
- Documentations
- Exemples
- Rapports
-
Bloc des réseaux de médias sociaux État: Stable
La configuration de conception des chaînes de médias sociaux fournit des liens vers les comptes de médias sociaux officiels du gouvernement du Canada (GC).
Tous les exemples et info
-
Ministre ou chef d’institution État: Stable
Ce composant est destiné au modèle du ministre ou du chef d'institution sur la page d'accueil de l'institution.
Tous les exemples et info
- Exemples
- Documentations
-
En demande État: Stable
Comprend des tâches principales liées à la page sur laquelle elles se trouvent.
Tous les exemples et info
-
Services et information État: Stable
Utilisé pour présenter des ensembles de liens accompagnés de descriptions.
Tous les exemples et info
-
Navigation étape par étape État: Stable
Navigation étape par étape conçu d'après des recherches d'expérience utilisateur
Tous les exemples et info
-
GC menu par carte de métro État: Provisionel
Diviser du contenu long et complexe en pages qui se concentrent chacune sur une étape ou une réponse spécifique dont les gens ont besoin avant de passer à l'étape ou à la section suivante.
Tous les exemples et info
- Exemples
- Index page
- Page d'introduction
- Section page
- Page de section
- Sub-section page (default)
- Page de sous-section (par défaut)
- Sub-section page (no line)
- Page de sous-section (sans ligne)
- Section page with custom subtitle
- Page de section avec sous-titre personnalisé
- Section page with related information
- Page de section avec information additionnelle
- Section page with bad AEM implementation
- Exemple de page de section avec mauvaise implémentation dans AEM
- Documentations
- Exemples
-
Tableaux GC État: Provisionel
Une solution CSS simple pour transformer les tables en cartes réactives pour des fenêtres plus petites.
Tous les exemples et info
-
Table des matières État: Stable
Table des matières pour naviguer vers les sous-sections de la page
Tous les exemples et info
-
Entête well responsive État: Stable
Cas d'utilisation de prise en charge pour l'en-tête de page promotionnelle ou l'en-tête de section de panneau, la largeur de l'entête well responsive est réajustée en fonction de l'écran.
Tous les exemples et info
-
Images État: Stable
Appliquez les styles simples WET-BOEW ou modifiez une image sans utiliser de logiciel d'édition.
-
Autre composant État: Stable
Composant inclus mais qu'il nécessite qu'ils soit déplacé dans son propre dossier.
Tous les exemples et info
- Exemples
- Provisional functionality
- Fonctionalités provisoires
- Redacted text
- Texte caviardé
- Download link, In-page table of contents, Alerts designs
- Lien de téléchargement, Table des matières à l’intérieur de la page, Conceptions des avis
- Deprecated markup - Report a problem (v4.0.28), gc-nttvs, gc-prtts
- Balisage déconseillé - Signaler un problème (v4.0.28), gc-nttvs, gc-prtts
- Float column in a data table
- Float column in a data table
- Video example
- Exemple de vidéo
- Exemples
-
Étiquettes État: Stable
Étiquettes comprenant tous les différents états.
Tous les exemples et info
-
Liste - Style additionel État: Stable
Style additionel (double interligne)
Tous les exemples et info
-
Conversation suggestive État: Provisionel
Conversation suggestive
Tous les exemples et info
-
Exécuter des actions État: Stable
Exécute des actions, tel que filtrer un tableau, selon une configuration pré-établis.
Tous les exemples et info
-
Déroulement de champs État: Stable
Offre une interface utilisateur alternative lorsqu'une page contient une très longue liste
Tous les exemples et info
- Exemples
- Documentations
-
Suggestion interative avec un datalist État: Stable
Chargement de suggestion pour un datalist avec un fichier JSON.
Tous les exemples et info
-
Correspondance d'URL État: Stable
Exécute des requête ajax pré-établis selon la correspondance des paramètres de l'URL.
Tous les exemples et info
-
Conversion du wb5-click postback État: Obsolète
Convertie le code obselète du wb5-click postback form vers le plugiciel wb-postback
Tous les exemples et info
Gabarits
-
Service avancé - Probablement désuet État: Stable
Gabarit du service avancé - probablement désuet
Tous les exemples et info
- Exemples
- [Service name] - 1. [Step / section page name]
- [Nom du service] - 1. [Nom de la page de la section ou de l’étape]
- [Service name] - 2. [Step / section page name]
- [Nom du service] - 2. [Nom de la page de la section ou de l’étape]
- [Service name] - 3. [Step / section page name]
- [Nom du service] - 3. [Nom de la page de la section ou de l’étape]
- [Service name] - 4. [Step / section page name]
- [Nom du service] - 4. [Nom de la page de la section ou de l’étape]
- [Service name] - 5. [Step / section page name]
- [Nom du service] - 5. [Nom de la page de la section ou de l’étape]
- [Service name] - 6. [Step / section page name]
- [Nom du service] - 6. [Nom de la page de la section ou de l’étape]
- Exemples
-
Application État: Stable
Exemples de pages d'application.
Tous les exemples et info
-
Béta - Message d'erreur serveur État: Stable
Exemple de page d'erreur serveur.
Tous les exemples et info
- Exemples
- Documentations
-
Page de contenu État: Stable
Pages de contenu vides avec exemple de texte.
-
Accueil État: Stable
Gabarit de la page d'accueil
Tous les exemples et info
- Exemples
- Documentations
- Rapports
-
Autre gabarit État: Stable
Gabarit inclus mais qu'il nécessite qu'ils soit déplacé dans son propre dossier.
Tous les exemples et info
- Exemples
- Stay connected
- Restez branché
- [Theme title]
- [Titre du thème]
- Departments and agencies
- Ministères et organismes
- Promotional events page (Campaign?)
- Activité promotionel (Campagne?)
- Feedback form
- Formulaire de rétroaction
- [Audience name]
- [Public cible]
- Service initiation - Might deprecated
- Initiation de service - Probablement désuet
- Exemples
-
Index État: Stable
Gabarit d'index
Tous les exemples et info
- Exemples
- Documentations
-
Page d'accueil institutionnelle État: Stable
Documentation et exemple pratique de la page d'accueil institutionnelle
Tous les exemples et info
- Documentations
- Exemples
- Rapports
- GCWU theme - English institution landing template
- Thème FEGC - Français - Gabarit d'atterrissage de profil institutionnel
- Canada.ca theme - A reference implementation of the Canada.ca Content and Information Architecture Specification, the Canada.ca Content Style Guide and the Canada.ca Design System
- Thème Canada.ca - Une implémentation de référence de la spécification de contenu et d'architecture de l'information de Canada.ca, du guide de style de contenu de Canada.ca et du système de conception de Canada.ca
-
Profil institutionel État: Stable
Gabarit à propos de page de profil institutionel
Tous les exemples et info
- Exemples
- Contact [Institution name]
- Coordonnées [nom de l’institution]
- [Institution] service performance reporting for fiscal year 2015 to 2016
- Compte rendu du rendement des services de [Nom de l’institution] pour l’exercice financier de 2015 à 2016
- arm’s length - [Institution Name]
- organisme indépendamment - [Nom de l’institution]
- [Institution name] - Canada.ca
- [Nom de l'institution] - Canada.ca
- Documents relié
- Exemples
-
Pages des lois et des règlements État: Stable
La collection des lois et règlements donne accès aux lois et règlements du gouvernement du Canada par l’intermédiaire de leur profil respectif.
Tous les exemples et info
-
Sujet de plus bas niveau (avec une navigation secondaire État: Obsolète
Example de gabarit avec une navigation local et une page de sujet de plus bas niveau
Tous les exemples et info
- Exemples
- [Topic - Secondary/Local navigation]
- [Sujet - Navigation secondaire/locale]
- Task 1
- Tâche 1
- Sub task 1
- Sub tâche 1
- Sub task 2
- Sub tâche 2
- Sub task 3
- Sub tâche 3
- Sub task 4
- Sub tâche 4
- Sub task 5
- Sub tâche 5
- Sub task 6
- Sub tâche 6
- Sub task 7
- Sub tâche 7
- Task 2
- Tâche 2
- Task 3
- Tâche 3
- Sub task 1
- Sub tâche 1
- Sub task 2
- Sub tâche 2
- Sub sub task 1
- Sub sub tâche 1
- Sub sub task 2
- Sub sub tâche 2
- Sub task 3
- Sub tâche 3
- Task 4
- Tâche 4
- Exemples
-
Profile ministriel État: Stable
Documentation et exemple de page Profile ministriel.
Tous les exemples et info
- Documentations
- Exemples
-
Nouvelles État: Stable
Exemple de page générique.
Tous les exemples et info
- Documentations
- Exemples
-
Profil organisationel État: Stable
Gabarit à propos de page de profil organisationel
Tous les exemples et info
-
Résultats de la recherche État: Stable
Gabarit pour les pages de recherche
Tous les exemples et info
- Exemples
- Documentations
- Référence d'implémentation
-
Message d'erreur serveur État: Stable
Exemple de page d'erreur serveur.
Tous les exemples et info
- Exemples
- We couldn't find that Web page (Error 404) - Canada.ca theme
- Nous ne pouvons trouver cette page Web (Erreur 404) - Thème Canada.ca
- We couldn't find that Web page (Error 404) - Canada.ca theme / Nous ne pouvons trouver cette page Web (Erreur 404) - Thème Canada.ca
- Nous ne pouvons trouver cette page Web (Erreur 404) - Thème Canada.ca / We couldn't find that Web page (Error 404) - Canada.ca theme
- Message title - Canada.ca theme
- Titre du message - Thème Canada.ca
- Message title - Canada.ca theme / Titre du message - Thème Canada.ca
- Titre du message - Thème Canada.ca / Message title - Canada.ca theme
- Exemples
-
Écran d'accueil - Canada.ca État: Stable
Exemple d'écran d'accueil
Tous les exemples et info
- Exemples
- Documentations
-
Thématique État: Provisionel
Variante de site afin d'appliquer une thématique
Tous les exemples et info
-
Béta - Thèmatique et sujet État: Provisionel
Gabarit béta du thèmatique et sujet
Tous les exemples et info
-
Sujet État: Stable
Exemples de page de sujets
Tous les exemples et info
Configurations de conception
-
À propos de l’institution État: Undefined
Section d’une page d’accueil institutionnelle offrant des liens vers des renseignements relatifs à un organisme, à un programme ou à une politique en particulier.
Tous les exemples et info
- Documentations
- Exemples
-
Bloc d’introduction - Documentation et example pratique État: Undefined
Orientation sur l’utilisation de la configuration de conception du bloc d’introduction sur Canada.ca.
Tous les exemples et info
Fonctionnalités spéciales
Méli-mélo
L'espace d'expérimentation que vous attendiez ! Les Méli-mélos permettent d'ajouter au thème de Canada.ca du nouveau code intéressant que vous considéreriez habituellement comme "personnalisé".
Thématiques promotionnelles
Avez-vous un ensemble de pages qui arborent un look original relié à une promotion spécifique ? Dans ce cas, essayez plutôt cet espace de thématiques promotionnelles.
Fonctionnalités globales et de sites
Composantes primaires pour le thème de Canada.ca
-
Archivé - Gabarit État: Stable
Fonctionalité globale inclus mais qu'il nécessite qu'ils soit déplacé dans son propre dossier.
Tous les exemples et info
- Exemples
- Documentations
-
Authentification État: Stable
Documentation et example pratique sur l'utilisation du bouton de connexion contextuel.
Tous les exemples et info
- Documentations
- Exemples
- Contextual Sign in button
- Bouton contextuel « Se connecter »
- Contextual Sign in button with extended custom label
- Bouton contextuel « Se connecter » avec libellé personnalisé étendu
- Contextual Sign in button without custom labels
- Bouton contextuel « Se connecter » sans aucun libelés personnalisés
- Contextual Sign in button without the GCWeb Menu
- Bouton contextuel « Se connecter » sans le menu GCWeb
- Content page - Signed-Off pattern
- Page de contenu - Modèle de session fermée
- Content page - Signed-On pattern
- Page de contenu - Modèle de session ouverte
- Active user session
- Session utilisateur active
-
Fil d'Ariane État: Stable
L’objectif du fil d'Ariane est de renforcer l’emplacement actuel des visiteurs dans le modèle de navigation de l’utilisateur du site Canada.ca.
Tous les exemples et info
- Documentations
-
Date de modification État: Stable
Indique la date à laquelle la page courante a été modifiée pour la dernière fois.
Tous les exemples et info
- Documentations
-
Zone de rétroaction État: Stable
Documentation sur l'utilisation des éléments de la zone commentaires.
Tous les exemples et info
- Documentations
- Exemples
- Rapports
-
Pied de page État: Stable
Documentation et example pratique sur l'utilisation du pied de page.
Tous les exemples et info
- Documentations
- Exemples
- Footer
- Pied de page complet
- Main footer band and sub-footer band
- Bande principale et bande sous pied de page
- Contextual band and sub-footer band
- Bande contextuelle et bande sous pied de page
- Hide optional links from the sub-footer band
- Masquer les liens optionnels de la bande sous le pied de page
- Contextual band and sub-footer band with no optional links
- Bande contextuelle et bande sous pied de page sans les liens facultatifs
- Bande principale et bande sous pied de page sans les liens facultatifs
- Masquer la bande contextuelle et les liens optionnels de la bande sous le pied de page du pied de page
- Sub-footer band only
- Bande sous pied de page uniquement
- Sub-footer band only, with no optional links
- Bande sous pied de page uniquement sans les liens facultatifs
- Customize 'Terms and conditions' and 'Privacy' links in footer
- Personnaliser les liens 'Avis' et 'Confidentialité' dans le pied de page
- Contextual band and link variations
- Bande contextuelle et des variations de lien
- Rapports
-
Menu GCWeb État: Stable
Documentation sur l'utilisation du menu GCWeb.
Tous les exemples et info
- Documentations
-
Entête État: Stable
Documentation sur l'utilisation de l'entête.
-
Outils d'aides État: Stable
Outils d'aides pour effectuer de la surchage sur les styles compiler
-
Lien pour changer de langue État: Stable
Documentation sur l'utilisation lien pour changer de langue.
Tous les exemples et info
- Documentations
-
Titre principal État: Stable
Documentation sur l'utilisation du composant Titre principal.
Tous les exemples et info
- Documentations
-
Détails de la page État: Stable
Documentation sur l'utilisation de la section des détails de la page.
Tous les exemples et info
- Documentations
- Exemples
- Default Page details
- Détails de la page par défaut
- Page details with Page feedback tool
- Détails de la page avec Outil de rétroaction sur la page
- Page details with Share this page
- Détails de la page avec Partagez cette page
- Page details with Page feedback tool and Share this page
- Détails de la page avec Outil de rétroaction sur la page et Partagez cette page
- Rapports
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details - English report
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details - French report
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details (Basic Html version)- English report
- Accessibility (Only new SC WCAG 2.1/2.2 Level AA)- Page Details (Basic Html version)- French report
-
Menu secondaire/local État: Obsolète
Composant du menu secondaire
Tous les exemples et info
- Exemples
- Task 1
- Tâche 1
- Sub task 1
- Sub tâche 1
- Sub task 2
- Sub tâche 2
- Sub task 3
- Sub tâche 3
- Sub task 4
- Sub tâche 4
- Sub task 5
- Sub tâche 5
- Sub task 6
- Sub tâche 6
- Sub task 7
- Sub tâche 7
- Task 2
- Tâche 2
- Task 3
- Tâche 3
- Sub task 1
- Sub tâche 1
- Sub task 2
- Sub tâche 2
- Sub sub task 1
- Sub sub tâche 1
- Sub sub task 2
- Sub sub tâche 2
- Sub task 3
- Sub tâche 3
- Task 4
- Tâche 4
- Exemples
-
Liens de saut de page État: Stable
Documentation et example pratique sur l'utilisation des liens de saut de page.
Tous les exemples et info
Composantes communes
-
Récupération de ressource via Ajax État: Stable
Récupération de données via Ajax
Tous les exemples et info
-
Alertes État: Stable
Alertes avec des styles personalisés.
Tous les exemples et info
-
Alignement État: Stable
Alignement avec des styles personalisés.
Tous les exemples et info
- Exemples
-
Boutons État: Stable
Page des boutons comprenant des exemples de travail pour tester l'apparence et le fonctionnement de divers styles de boutons.
Tous les exemples et info
-
Couleur (Premier plan/Arrière-plan) État: Stable
Page de couleurs comprenant des exemples de travail pour tester la façon dont divers textes apparaissent sur différents arrière-plans.
Tous les exemples et info
- Documentations
-
Listes État: Stable
Example de toutes les possibles variantes de personnalisation de liste.
Tous les exemples et info
- Exemples
-
Conteneur Principal État: Stable
Conteneur principal avec des balises alternatives.
Tous les exemples et info
-
Échafaudage État: Stable
Les éléments HTML utilisé tel quel.
Tous les exemples et info
- Exemples
- Rapports
- Accessibility assessment #1 - Input focus
- Évaluation d'accessibilité #1 - Visibilité du focus
- Text level semantics - Full Accessibility assessment
- Texte de niveau sémantique - Évaluation d'accessibilité complète
- Accessibility assessment #2 - Forms
- Assessment d'accessibilité #2 - Formulaires
- Accessibility assessment #3 - Forms
- Assessment d'accessibilité #3 - Formulaires
-
Gadget de partage État: Stable
Permet à l'utilisateur de partager un contenu Web sur les plateformes de médias sociaux.
Tous les exemples et info
- Exemples
- Documentations
- Rapports
-
Les Tables État: Stable
Tableaux avec des styles personalisés.
-
HTML simplifiée État: Stable
Passer à la version HTML simplifiée
Tous les exemples et info
Wet-boew
-
Image d'arrière plan State: Stable
Défini une image d'arrière plan pour l'URL passé en paramètre ou tel que spécifier par l'information du group d'image (srcset).
All examples and info
- Exemples
- Documentations
-
Favoricône State: Stable
Ce plugiciel offre la possibilité d'ajouter et de mettre à jour les favoricônes d'une page.
All examples and info
- Exemples
- Documentations
-
Fils de syndication State: Stable
Affiche les articles d’un ou plus fils de syndication.
All examples and info
- Documentations
- Exemples
-
Basculer State: Stable
Plugiciel qui permet un lien à basculer des éléments entre les états activé et désactivé.
All examples and info
- Exemples
- Documentations
- Rapports
-
Data JSON State: Stable
Insertion de contenu extrait d'un fichier JSON
All examples and info
- Exemples
- Documentations
-
Gestionnaire JSON State: Stable
Gérer des jeux de données et applique des correctifs JSON
All examples and info
- Exemples
- Documentations
Autre documentation
Fonctionnalités BOEW avec le thème de Canada.ca
Documentation du projet GCWeb
- GCWeb theme - Meta information
- Migration instruction - GCWeb theme V5
- Archived - Documentation - GCWeb English
- Archived - Releases English
- Skeleton - Static header/footer - Bootstrap 3
- Prototype skeleton - Static header/footer - Bootstrap 4
Évaluations et rapports
Implémenter / Développer
Implémenter GCWeb sur votre site
Guide d'implémentation pour le thème de Canada.ca avec la Boîte à outils de l'expérience web version 4.x.
Développer pour GCWeb
Rejoignez la communauté et commencez à créer, améliorer et réparer GCWeb, le thème de Canada.ca. Apprenez comment organiser votre environnement local.
Détails de la page
- Date de modification :