Sélection de la langue

Recherche

Fonctionalités provisoires - Thème de GCWeb

Fonctionalité instable

À être utilisée à vos propre risque. Toutes les fonctionnalités décrites ci-dessous pourraient être retirées lors du lancement d'une version mineure ou majeure et sont exclues de l'API publique GCWeb.

Renseignez-vous davantage sur la décision sur la conception en matière des fonctionnalités provisoires.

Les documents et les exemples pratiques de ces fonctionnalités pourraient être incomplets ou non disponibles.

Dans cette page

Disponibilité des fonctionalités

.experimental depricated

.experimental is now deprecated and it will not be supported in 6 months. It has to be replaced by .provisional

Le tableau suivant décrit jusqu’à quelle version de GCWeb chaque fonctionnalité sera disponible. La disponibilité des fonctionnalités sera réévaluée chaque fois qu’une version est publiée. Une fonctionnalité expérimentale retirée sera communiquée une version à l’avance.

Description des états
<non spécifié>
Provisoires
Retiré
La fonctionalité n'est plus disponible
Supporté
La fonctionalité est maintenu inclus et supporté par l'API publique de GCWeb.
Retiré après v.Majeur.Mineur
La version v.Major.Minor représente la dernière version que cette fonctionalité sera disponible. Les auteurs doit considérer une solution alternative ou de faire le retrait de l'utilisation de cette fonctionalité.
Nom Description Disponible dans État
CSS .bg-pnkDy et .bg-pnkDy.well.header-rwd Couleur de fond de la Journée rose v5.1
CSS .pnkDy-theme fixé globalement Appliquer la couleur de gabarit « global » pour la couleur de la Journée rose de façon globale, comme cette propriété est définie sur l’élément <html> ou <body> v5.1
CSS .dark-theme set global Appliquer la couleur de gabarit « global » modifiée à noir complet de façon globale, comme cette propriété est définie sur l’élément <html> ou <body> v5.1
CSS .bg-img-hdng Ajouter une image de fond à un en-tête v5.1
CSS .icon-warning-light Change the color to #DF7200 v7.0
Gabarit .gc-pg-hlpfl "Widget succès de page" configuration de conception pour laisser les utilisateurs partager leur expérience sur la page. v7.0
Plugin .wb-chtwzrd

Transforms a simple form into a conversation like experience used as a wizard.

v7.0
Plugin .gc-subway

Navigation par carte de métro pour le gabarit d'initiatin de service.

v8.0.1
CSS .gc-chckbxrdio

Adoptez les nouvelles grandes cibles tactiles d'entrée pour les cases à cocher et les boutons radio

v8.0.1
Composant .gc-followus

Nouvel arrangement et model de conception. Pour supporter le gabarit beta thème/sujet.

v9.1.0
Composant .gc-topic-bg

Image promotionelle et d'entête de page. Pour supporter le gabarit beta thème/sujet.

v9.1.0
Composant .gc-contributors

Nouvel arrangement et model de conception. Pour supporter le gabarit beta thème/sujet.

v9.1.0

Pour plus de fonctionnalités provisoires, consultez la page des fonctionnalités provisoires de la WET-BOEW.

Fonctionalité stabilisé
Nom Description Disponible dans État
CSS .p-0 Fixer un remplissage (padding) de 0px v5.1 Supporté par GCWeb depuis v6.0
CSS .mb-sm-5 Fixer la marge du bas à 50px pour la vue à partir d'un petit écran et plus v5.1 Supporté par GCWeb depuis v6.0
CSS .p-sm-3 Fixer les marges à 15px pour la vue à partir d'un petit écran et plus v5.1 Supporté par GCWeb depuis v6.0
CSS .px-sm-3 Fixer le padding de gauche et de droite à 15px pour la vue à partir d'un petit écran et plus v5.1 Supporté par GCWeb depuis v6.0
CSS .bg-darker Couleur de fond noir complet v5.1 Supporté par GCWeb depuis v9.0
CSS .bg-gctheme et .bg-gctheme.well.header-rwd Couleur de fond de base du thème de GCWeb v5.1 Supporté par GCWeb depuis v9.0
CSS .bg-cover Image de fond de taille "couvrir" v5.1 Supporté par GCWeb depuis v9.0
Plugin [data-bgimg] Prendre la valeur URL et la fixer en tant qu’image de fond. Il faut le remplacer par le sélecteur CSS4 v5.1 Supporté par GCWeb depuis v9.0
CSS .stretched-link Propage la zone cliquable d'une balise hyperlien jusqu'au premier élément parent qui est de position relative. v5.1 Supporté par GCWeb depuis v6.0
CSS .alert-danger Adoptez la nouvelle conception d’alerte de danger, sans une couleur de fond. v7.0 Supporté par GCWeb depuis v9.0
CSS .alert-warning Adoptez la nouvelle conception d’alerte d’avertissement, sans une couleur de fond. v7.0 Supporté par GCWeb depuis v9.0
CSS .alert-success Adoptez la nouvelle conception d’alerte de succès, sans une couleur de fond. v7.0 Supporté par GCWeb depuis v9.0
CSS .alert-info Adoptez la nouvelle conception d’alerte d’information, sans une couleur de fond. v7.0 Supporté par GCWeb depuis v9.0
CSS .gc-thickline H1 with short bold red underline v8.0.1 Supporté par GCWeb depuis v9.0

Documentation des fonctionalités provisoires

Les fonctionalités CSS provisoires doivent être accompagné avec la classe .provisional au sein de leur contexte d'utilisation.

Examples pratiques provisoires

Dans cette section

En-tête adaptable de la boîte grise avec une image de fond

En-tête

En-tête secondaire

En-tête adaptable de la boîte grise avec une image de fond et des contrôles de remplissage

Principalement pour des pages de campagne ayant une largeur adaptable au contenu.

En-tête

En-tête secondaire

<div class="provisional bg-cover" data-bgimg="demos/tabs/img/investinourfuture.jpg">
	<div class="container p-0 p-sm-3">
		<div class="well header-rwd mrgn-tp-md mrgn-bttm-md bg-dark text-white brdr-0">
			<h4 class="mrgn-tp-md">En-tête</h4>
			<p>En-tête secondaire</p>
		</div>
	</div>
</div>

Marge du bas pour la vue à partir d'un petit écran et plus

En-tête

En-tête secondaire

Boîte grise secondaire

Couleurs du gabarit de thème

Échantillon du code JavaScript pour programmer l’ajout CSS pour la Journée rose

Le script suivant ajoute la classe CSS seulement pour le 10 avril 2019 heure locale.

( function( d ) {
"use strict";

var t = new Date(),
	msT = t.getTime(),
	s = new Date( 2019, 3, 10, 0, 1 ),
	e = new Date( 2019, 3, 10, 23, 59 );

if ( s.getTime() < msT && msT < e.getTime() ) {
	d.getElementsByTagName( "html" )[ 0 ].classList.add ("pnkDy-theme", "provisional");
}

} )( document );

Image de fond sur l'en-tête

Principalement pour la section Services et information.

Impact Assessment

Impact assessments process

Learn about the purpose and steps of impact assessments under the Impact Assessment Act.

Canadian Impact Assessment Registry

Information on potential and current IAs of projects subject to the federal IA process.

How to get involved

Public

Learn how the public can participate in impact assessments.

Indigenous

Learn about the Indigenous consultation process in impact assessments.

Dans l'exemple suivant, ajouter la classe .stretched-link à l'hyperlien situé à l'intérieur de la balise <h3> résulera en une propagation de la zone cliquable jusqu'au <div> parent qui contient la classe .col-xy-z parce que celui-ci est en position « relative ».

Learn more about Canada’s Digital Charter

Learn how Canada’s Digital Charter will build a foundation of trust in a digital world.

National Indigenous History Month

Celebrate National Indigenous History Month in June

Icon warning color

Adding provisional icon-warning-light in the class will change the color

Without "provisional icon-warning-light" class

With "provisional icon-warning-light" class

Widget succès de page

Est prévu pour remplacer Signaler un problème ou une erreur sur cette page éventuellement. Utilises plusieurs fonctionnalités : les plugiciels wb-postback et data-wb-doaction, ainsi que les styles nojs-* puis Font Awesome.

Avez-vous trouvé ce que vous cherchiez?

Qu’est-ce qui n’allait pas?

(N’incluez pas d’information personnelle)
Maximum de 300 caractères


Merci de vos commentaires

Chat wizard - How to implement

(Need translation)

There are two ways to implement the chat wizard. The more common way is to code a form, and add according classes and data attributes. The other way is to load it from a JSON file, which will generate both the form and the wizard, is useful in case one would want to implement the same chat wizard on multiple pages.

1. Code a form

  1. Code a form that has a decision tree logic, with the idea that an answer could affect what the next question would be. At the moment, all choices of answer to a question must be radio buttons only.
  2. Wrap your form in a section, aside or div tag with a class named “.provisional.wb-chtwzrd”, along with the class “.hidden” to avoid the basic form to flicker on load. Other options are:
    • A data attribute named “data-wb-chtwzrd-avatar” can be added with a path to an image in order to change the default avatar in the bubble and the chat window. Recommended dimensions are 45x45 pixels.
    • A class named “.wb-chtwzrd-inline” can be added to have the chat experience inside the content and not in a separate window. This feature should only be used on a dedicated page, since it will start right away and steals the show to other content.
  3. Give it a title (outside of you form) as an H2. That heading will be the title of the form, as well as the title of the chat window and the text of the notification message.
  4. The action of your form will be the default destination page at the end of the flow. The method will define if the form will be submitted through the URL bar or in the body at the end. You can give it a name attribute too, for tracking purposes.
  5. You will need to start your form with a greetings paragraph. That paragraph must have a “.wb-chtwzrd-greetings” class and will be the first message coming from the bot when the chat window is opened.
  6. Same thing for the last message at the end of the conversation which is a farewell paragraph that you can put at the bottom of your form and that needs to have the “.wb-chtwzrd-farewell” class.
  7. If you add a regular paragraph right after your greetings one, this will be considered as an introduction message, which will be mentioned by the bot right after the greetings.
  8. The submit button is necessary as it indicates what the final submit button will show at the end of the conversation. Plus, you can add a data attribute there named “data-wb-chtwzrd-replace” that allows you to give a different value to your chat wizard than what’s in the form. This data attribute can be used on almost every textual tag inside the “.provisional.wb-chtwzrd” container to indicate what the chat wizard should display different than what the form displays.
  9. In the form itself, each question must be wrapped around a fieldset tag, with a unique ID attribute. 10. The question has to be in a legend tag, to which for instance you can use the “data-wb-chtwzrd-replace” attribute to have a more conversation-based question for the wizard.
  10. Choices of answer must be in an unordered list, with a class named “.list-unstyled” to not show the bullet points and a class “.mrgn-tp-md” for spacing at your own taste.
  11. The label tag has to wrap your input of type radio, with the text value wrapped in a span tag.
  12. The input itself has a name that represents that question in the final GET query string or POST, along with the value attribute for this input in particular. Also:
    • The data attribute named “data-wb-chtwzrd-next” must be used on the inputs to indicate the next question (fieldset ID) to present to the user. The last question of any possible conversation in the decision tree must have that data attribute set to “none”, in order to end the conversation.
    • The data attribute name “data-wb-chtwzrd-url” provides the plugin with the updated destination of the redirection at the final submit.
  13. If you want an external button to enable the chat wizard in addtition to the chat wizard bubble, you can add a button with the class named .wb-chtwzrd-btn.
  14. If you only want external button to enable the chat wizard instead of chat bubble, simply add the class named .wb-chtwzrd-btn-extrnl on your chat wizard and the chat bubble will not be displayed.

There you have it! A conversational-like experience driven by a fairly simple form.

2. Import a JSON File

Accepting JSON File as an input for batch deployments. If you have a JSON file that follows the Data API logic shown below, it can be implemented as a chat wizard instance.

JSON File API

{
		"header":{
			"method": "GET (default) or POST [GET]",
			"defaultDestination": "Default results page after submission [results-en.html]",
			"avatar": "Custom avatar URL [https://www.canada.ca/etc/designs/canada/wet-boew/assets/default-avatar.png]",
			"inline": "If provided with any value, it will put the chat wizard inside the content instead of a seperate window [true]",
			"first": "ID attribute of first question (will pick the first question in the form if not set) [q1]",
			"formType": "formType dynamic (default) or static for the basic form [dynamic]",
			"name":"Name attribute on the form for tracking purposes. Chat's form has -chat appended automatically [example]",
			"form": {
				"title": "Title for basic form [Help us help you]",
				"instructions": "Introduction paragraph before basic form [If you are an employer or organization looking for funding, you can find relevant information on the <a href='pagex.html'>funding page</a>.]",
				"sendButton": "Text for the submit button in the basic form [Search now]"
			},
			"title":"Title of wizard [I can help you find the information you need]",
			"greetings":"Greetings message as first interaction with user [Hi! I can help direct you to programs and services you might be interested in. Let's begin...]",
			"instructions": "More instructions or information before the questionnaire starts [First, if you are an employer or organization looking for funding, you can find relevant information on the <a href='pagex.html'>funding page</a>.]",
			"farewell":"Farewell message as last interaction after last question is answered [Thank you. I have built a page with results you may find resourceful.]",
			"sendButton":"Text for the submit button after last question is answered [Show results]"
		},
		"questions":{
			"q1":{
				"name":"Name of the question [describe]",
				"input":"Input type [radio]",
				"labelForm":"Question in the form [What would you describe yourself as?]",
				"label":"Question in the wizard [Are you:]",
				"choices":[
					{
						"content":"Choice of answer for an input [a young Canadian]",
						"value":"Value for the submission [young-canadian]",
						"next":"Next question ID [q2]",
						"url":"result page if this answer is selected [results-en.html]"
					},
					{
						"...":"More choices"
					}
				]
			},
			"q2":{
				"...":"More questions"
			}
		}
	}

All you need on your page is to add a data attribute named “data-wb-chtwzrd-src” to your section, aside or div tag that has the “.provisional.wb-chtwzrd” class, and provide it with the path to your JSON file.

Navigation de style métro

Afin d'utiliser la fonctionalité provisoire de navigation de style métro, vous devrez suivre les étapes suivantes:

  1. Tout d'abord, vous aurez besoin d'un élément <nav> avec les classes "provisoire" et "gc-subway". À l'intérieur de ce <nav>, mettez votre premier <h1>; il sera le plus petit, grisâtre et placé au haut de la page.
  2. Ajoutez un <ul> à côté de ce <h1>. Placez-y les liens vers vos autres pages liées à la page de lancement de service.
  3. Le reste a juste besoin de votre propre contenu principal pour cette page. N'oubliez pas les boutons de navigation en bas des pages. Si vous voulez que la colonne de gauche cesse d'être aux 2/3 de la largeur d'un écran de bureau, vous pouvez alors arrêter la propagation en utilisant n'importe quel élément HTML avec une classe "gc-subway-section-end"; cet élément doit être un frère de votre "<nav class="gc-subway">.
  4. Si vous souhaitez utiliser le nouveau soulignement rouge court et gras sous votre H1, ajoutez-y les classes "provisoire" et "gc-thickline".

Voir le code brut en action en consultant l'exemple codé.

Cases à cocher et boutons radio

Les grandes cibles tactiles d'entrée prennent en charge la saisie et l'utilisation

Un problème de longue date avec les cases à cocher et les boutons radio est que les étiquettes ne semblent pas cliquables pour la plupart des gens

Même en utilisant des conceptions qui mettent en évidence le texte de l'étiquette ou mettent l'entrée et l'étiquette avec un contour gris, les études ont montré que les gens voulaient toujours cliquer sur la conception d'entrée.

Spécifications de conception

  1. Question
  2. Bouton radio sélectionné
  3. Bouton radio non sélectionné
  4. Etiquette de bouton radio

Utilisation

Les boutons radio sont utilisés dans les modèles suivants :

Les cases à cocher sont utilisés dans les modèles suivants :

Demo et code

Cases à cocher et bouttons radio - Configuration de conception de Canada.ca

Signaler un problème sur cette page
Veuillez cocher toutes les réponses pertinentes :

Merci de votre aide!

Vous ne recevrez pas de réponse. Pour toute question, s’il vous plaît contactez-nous.

Date de modification :