Page d’accueil d’iService

Sur la page d’accueil d’iService, vous trouverez différents éléments :

  • Carrousel (aussi appelé « message animé »)
  • Calendrier des événements iService
  • Messages d’alerte
  • Catalogues iService (RH, Finances, GI TI et Intégrité)
  • Applications iService
  • Les plus demandées
  • Liens rapides
Approbateur de contenu

Approbateur de contenu

Éditeur de contenu

Éditeur de contenu

Étapes à suivre pour créer :

En tête

L’en tête de la page d’index d’iService respecte les règles de structure sémantique. Il n’y a qu’un en tête de niveau 1; il est descriptif et concis. À gauche de l’en tête se trouve un logo iService (« swoosh ») qui est codé au moyen de feuilles de style en cascade (FSC). Ce code se trouve dans le fichier FSC propre au site iService. Voici le code à rechercher s’il doit être modifié :
/* iService logo */
h1:before { content: url("http://iservice.prv/eng/imgs/iservicelogo-small.png");
/*h1:before { content: url("http://iservice.prv/eng/imgs/iservice_swoosh_pink.png");*/
margin-left: -.500em;
margin-right: .25em;
margin-top: 0;
margin-bottom: 0;
}

Bannières

Reportez vous à la page.

Panneau « Trouver votre service »

Panneaux

Utilisez des panneaux pour créer un regroupement visuel du contenu. Les panneaux comportent des options thématiques de couleurs, de même qu’un en tête et un pied de page distincts. Plus de détails sur les panneaux.

Comme le titre le suggère, ce panneau a pour thème la recherche de services. Il y a quatre liens menant à des sections distinctes du catalogue iService. Vous trouverez de plus amples renseignements sur la structure et la tenue des articles du catalogue.

Un champ de recherche permet à l’utilisateur d’interroger uniquement le contenu d’iService.

Étant donné qu’iService est une sous section d’ESDC.prv, il était nécessaire d’avoir un champ de recherche distinct pour effectuer des recherches dans la collection d’iService. Le premier champ de recherche dans le menu supérieur sert à effectuer des recherches dans l’ensemble d’ESDC.prv, y compris iService.prv; le deuxième champ (dans ce panneau) permet d’effectuer des recherches dans le site iService seulement.

Panneau des applications iService

Les boutons permettent d’établir des liens vers certaines applications populaires.

Le code de bouton expliqué
Phoenix

La classe "btn" est utilisée sur la balise « anchor » pour en faire un bouton; "btn-default" permet de définir la couleur en gris et "btn-block" permet de faire correspondre la taille du bouton à celle de la colonne (grille) dans laquelle il se trouve.

La balise « span » contient une Glyphicon (glyphicon glyphicon-usd) verte (text-success) l’icône est masquée pour les utilisateurs qui emploient un logiciel de lecture à l’écran et ne peuvent pas voir le glyphe (aria-hidden="true"). La balise <small> contrôle la taille du texte.

<a href="http://gcintranet.tpsgc-pwgsc.gc.ca/gc/rem/awr-cwa-eng.html" class="btn btn-default btn-block" role="button"><span class="glyphicon glyphicon-usd text-success" aria-hidden="true"></span><small>Phoenix</small></a>

Les plus demandées

La section « Les plus demandées » renferme une liste des pages les plus populaires selon les rapports analytiques Web. Cette liste n’est pas dynamique; elle est créée au moyen des rapports mensuels iService

Il s’agit d’un panneau avec un en tête masqué dans une section à développer/réduire, dans une balise « tag » (<div></div>). La classe "bg success" permet de définir un fond vert dans la barre de titre. Vous trouverez ci dessous une partie du code de la page d’accueil.

Exemple de code

<div><details> <summary class="bg-success">
<span class="text-success"><strong>Les plus demandées</strong></span></summary>
<section class="panel panel-success mrgn-bttm-sm">
<div class="panel-heading hidden">
<h2 class="h4 panel-title mrgn-tp-0"> </h2>
</div>

Message d’alerte iService

Ces avis visent à communiquer de brefs messages de grande importance, qui doivent être lus dans de brefs délais. Ces messages ne comportent aucun élément dynamique; leur affichage et leur suppression se font manuellement. Les classes alerte et message d’alerte (class="alert alert-warning") sont utilisées pour créer la fenêtre jaune. Quatre couleurs différentes sont disponibles pour les alertes. Apprenez en plus sur les fenêtres d’alerte dans la BOEW.

Les éléments de liens rapides sont des panneaux dans des colonnes (aussi appelés grilles dans la BOEW). Le système de grille divise la page en 12 sections. Cette disposition pour liens rapides est composée de six colonnes de largeur 2 et comporte deux rangées.

Ventilation du code

Toute la rangée est contenue dans une balise « div ». La classe wb-eqht est utilisée pour que toutes les colonnes aient la même hauteur. Chacune des sections aura la même hauteur que celle de la colonne qui comporte la classe hght-inhrt. La marge supérieure est contrôlée au moyen de la classe mrgn-tp-lg. Apprenez en plus sur l’égalisation des hauteurs.

La taille du texte (et non la police) peut être contrôlée en utilisant les classes h1 à h6. Vous devrez peut être contrôler la marge supérieure qui fait partie de la classe. Il n’y a pas toujours lieu de prévoir un grand espace au dessus du texte; la classe mrgn-tp-0 permet de supprimer cet espace.

Conseil en matière d’accessibilité

Il est important d’utiliser la bonne balise pour le contenu afin que le logiciel de lecture à l’écran puisse interpréter l’article comme il se doit. Par exemple, <h2>iService Quick Links</h2> est un titre correctement codé, tandis que <p class="h2">Quick Links</p> ne l’est pas.

<div class="row wb-eqht mrgn-tp-lg">

<div class="col-sm-6 col-md-2">
<section class="panel-heading bg-info text-center hght-inhrt">
<p class="h3 mrgn-tp-0"><a href="/eng/hr/cb/index.shtml" class="panel-heading no-underline">
<span class="mrgn-bttm-md glyphicon glyphicon-star text-muted lg-icon" aria-hidden="true"></span>
<span class="h5 mrgn-tp-0">Compensation</span></a></p>
</section>
<p class="text-center wb-inv"><a href="/eng/hr/cb/index.shtml">Plus de liens sur l’indemnisation</a></p>
</div>