Les fonctionnalités de la charte graphique internet 2022

1 - Description des raccourcis typographiques

Les intertitres, 3 niveaux différents pour permettre de structurer votre texte
Particularité : les intertitres de niveau 1 permettent l’activation d’un glossaire automatique utile pour les articles un peu longs avec plusieurs parties ou chapitres.

Intertitre de niveau 1

Intertitre de niveau 2

Intertitre de niveau 3

Les différents types de caractère pour mettre en évidence votre texte
Texte en caractères gras
Texte en caractères italique
Texte En Petites Capitales,
Texte barré
Texte en couleur 1,
Texte en couleur 2.
Exposant : 20 m³
Indice : CO₂

Mettre en liste

• Puces
  • Puces indentées

1. Puces numérotées
2. etc

Les notes de bas de page
Elles apparaissent en bas de page sous la mention « Notes et références » et on peut naviguer facilement de la notation au bas de page et/ou inversement. Pour les mettre en place, positionner le curseur à côté du mot ou de l’expression concerné(e), cliquer sur le bouton "Transformer en lien" en faisant glisser la souris vers le bas pour accéder à "Transformer en note de bas de bas". Elle est ouverte et fermée par des doubles-crochets.

> Exemple : le RGAA ¹ et le RGPD ².

2 - Les blocs

Avant de les insérer, placer le curseur dans le texte à l’endroit où vous voulez disposer d’un de ces blocs et cliquer sur "Choisir un bloc" pour accéder aux blocs disponibles.

2-1 - Le bloc FAQ

Permet de créer une foire aux questions pour répondre aux questions les plus fréquemment posées dans un domaine donné.
Cette forme peut-être détournée pour créer un calendrier, structurer les différentes étapes d’une procédure complexe…
Comme pour le bloc citation, une fois que le bloc FAQ est inséré, vous n’avez plus qu’à remplacer les questions et réponses par vos questions-réponses et/ou vos mois/années-événements et/ou étapes d’une procédure et description…

• 1er exemple de FAQ en mode classique sur l’utilisation de la colonne de gauche (la fameuse sidebar)

  • Comment accéder aux liens de la colonne de gauche ?

    Pour accéder à l’ensemble des liens ainsi que personnaliser votre colonne de gauche en ajoutant vos sites intranet et vos outils, vous devez être connecté. Cliquez sur "se connecter". Entrez vos identifiants de connexion sur le portail d’authentification Cerbère.

  • Comment accéder à mon application de gestion du temps ?

    Vous retrouverez l’ensemble des liens dans la colonne de gauche, votre nouvel environnement de travail à personnaliser. Cliquez sur "ajouter un outil". Cochez vos préférences parmi la liste des outils proposée. Cliquez sur "mettre à jour mes préférences" en bas de la page.

  • Comment retrouver les liens des sites intranet des autres ministères ?

    Vous retrouverez les liens des intranets des autres ministères dans votre colonne de gauche en cliquant sur "Tous les sites".

• 2ème exemple de FAQ en mode calendrier :

• Janvier

  Jeudi 7 - Visite de Barbara Pompili, ministre de la Transition écologique

  Jeudi 21 - Vœux DREAL
  Vendredi 22 - Bascule vers la nouvelle charte graphique intranet

• Février

  Jeudi 25 - Les jeudis du paysage

2-2 - Le bloc mise en avant

Permet de mettre en valeur une information particulière.

2-3 - Le bloc mise en avant avec bouton

Comme le précédent, ce bloc permet de mettre en valeur une information et de pointer vers un autre article web ou site web.

2-4 - Le bloc portrait

Comme son nom l’indique, il est utilisé pour identifier un ou des agents.

Titre du portrait

Nom

Fonction

Descriptif du portrait

2-5 - Le bloc citation

Une fois inséré, vous n’avez plus qu’à remplacer le texte, le nom de l’auteur et le titre de l’auteur de la citation.

Exemple de citation :

3 - Le bouton « OK »

Ce bouton permet de faire participer le lecteur en l’incitant à agir : consulter un site, s’inscrire à un événement, découvrir un domaine, un métier…
Il est construit avec un titre (l’incitation à agir) et un lien vers la rubrique, l’article, le site cible. On peut l’aligner à gauche, au centre ou à droite.

Exemple :
La découverte du métier de Laure Albinet, responsable d’opérations routières au service mobilités aménagement paysage (extrait de l’article intranet publié à l’occasion de la journée internationale des droits des femmes lundi 8 mars 2021).

4 - La galerie photos

Cette galerie consiste en la présentation automatique d’une série de photos et/ou d’images (a minima quatre photos).
Une seule galerie photo peut être insérée dans un même article.
Par contre, vous pouvez la coupler avec une image insérée directement dans le texte de l’article.

Avant toute insertion dans un article, préparez vos images à l’avance (largeur maximale = 740 pixels).
Téléversez les images. Pour modifier leur ordre de classement, allez dans l’espace privé et déplacez les images en cliquant sur les 6 points devant le bouton « Modifier ».

Image précédente 1 / 4 Image suivante

5 - Les widgets

Ils se situent en-dessous de l’article à côté d’insérer un document ou une image. Ils servent à publier facilement du contenu multimédia dans les articles web.
Contrairement aux blocs, les widgets se préparent en-dehors du texte de l’article et sont à insérer dans votre article, une fois prêts, via leur raccourci.

5-1 - Le widget « Chiffres »

Ce widget vous permet par exemple de mettre en valeur un chiffre clé.

5-2 - Le widget « Infographie »

En application du RGAA, toute image informative doit être accompagnée de sa transcription textuelle. Ce widget est la seule solution pour insérer une image informative dans un article web.

INFOGRAPHIE | Duo Day

Voir la version texte

Information sur la journée consacrée au Duo Day

5-3 - Le widget « Vidéo »

En cliquant sur le widget « Vidéo », un message rappelle les recommandations en matière de taille de fichier, formats autorisés… et invite à téléverser le fichier vidéo.
Dans les options proposées, ne pas choisir les options "tourne en boucle" ou "démarre automatiquement" car trop intrusif.
La transcription textuelle est à prévoir (message véhiculé par la vidéo) si elle n’est pas sous-titrée (en application du RGAA) et le crédit est à compléter, c’est la mention du propriétaire de la vidéo (en application du RGPD).
Une vignette est à rajouter pour éviter un cadre vide. Sa taille doit correspondre à celle de la vidéo ou être plus petite. Enregistrez.

5-4 - Le widget « Vidéo distante »

Ce widget est utilisé pour les vidéos « poids lourds » de plus de 25 Mo (et jusqu’à 500 Mo) pour lesquelles il faut passer par l’application webissimo (demande à faire sur la balf des webmestres) afin d’obtenir un lien à insérer en lieu et place de la vidéo.
Il en est de même pour insérer une vidéo directement via son url.
Comme pour les autres vidéos, une transcription textuelle est à prévoir si elle n’est pas sous-titrée (en application du RGAA) et le crédit est à compléter (en application du RGPD).
En cliquant sur le widget « Vidéo distante », un message rappelle les recommandations en matière de taille de fichier, formats autorisés… et invite à ajouter le lien webissimo ou url de la vidéo. Enregistrez. Une nouvelle fenêtre s’ouvre qui vous donne le détail de la vidéo et vous permet d’ajouter la vignette correspondante. Enregistrez.
Le widget est prêt à être inséré dans votre article, à l’endroit où vous le souhaitez, à partir du raccourci.

5-5 - Le widget « Vidéo de Terra »

Vous devez d’abord vous inscrire sur l’application Terra pour avoir accès aux photos et vidéos.
Choisissez la vidéo que vous souhaitez intégrer dans votre article, gardez en mémoire le titre, le code html, la durée et le crédit.
En cliquant sur le widget « Vidéo de Terra », une fenêtre s’ouvre dans laquelle vous aurez à compléter le titre, à insérer le code html, la durée de la vidéo et le crédit (en application du RGPD). Enregistrez. Le widget est prêt à être inséré dans votre article, à l’endroit où vous le souhaitez, à partir du raccourci.
Bon à savoir : Les vidéos issues de Terra disposent automatiquement d’une vignette.