Vous êtes ici : Accueil > Fonctionnement de la plate-forme mutualisée > Charte graphique 2012 des services de l’État
Publié : 7 juin 2013
Format PDF Enregistrer au format PDF

Charte graphique 2012 des services de l’État

La plate-forme mutualisée académique vous propose un nouveau plugin permettant d’adopter rapidement la charte graphique des services de l’État 2012.

Cet article vous propose une présentation des fonctionnalités et structures de cette nouvelle charte graphique.

Présentation du plugin

Ce nouveau plugin base son action sur l’utilisation de la distribution EVA-web et du plugin d’habillage d’EVA-web. En deux clic, vous pourrez déployer sur votre site cette nouvelle charte graphique adaptée à un thème de couleur que vous aurez choisi. Une fois déployée, les principes de modularité d’EVA-web seront toujours actifs : vous pourrez déplacer certains éléments de structure et éventuellement, avec l’aide de la mission TICE (contacter Olivier Gautier), adapter graphiquement certains éléments (bordures, couleurs de fond, ...).

PNG - 144.6 ko
Fenêtre de sélection du thème de couleur

La mission TICE du rectorat remercie les webmestres de l’académie de Besançon (en particulier Julien Borle) qui ont fourni des éléments de structure de cette nouvelle charte graphique (mégamenu, pied de page, éléments de la page de sommaire, feuilles de style).

Structure de l’entête

PNG - 35.6 ko
L’entête du site

Quelles que soient les pages de votre site, l’entête sera systématiquement composée des quatre éléments suivants :

  1. une barre avec des liens. Vous pourrez enrichir ces liens en référençant des sites et en leur ajoutant le mot-clé "lien-haut" (fonctionnement classique de la distribution EVA-web).
  2. Un bandeau composé de trois éléments :
    • d’un logo créé sur demande par la mission TICE (composé lui-même de la marianne et d’un logo au nom du site),
    • le titre du site,
    • le moteur de recherche.
  3. Un mégamenu (voir l’onglet suivant pour davantage de détails)
  4. Un fil d’ariane

Le mégamenu

Présentation générale

PNG - 92.1 ko
Le mégamenu

Le mégamenu présente sur fond foncé les rubriques de premier niveau (dites aussi "à la racine").

En cliquant sur le titre d’une de ces rubriques de niveau 1, le menu se déplie automatiquement et vous présente les éléments contenus dans cette rubrique :

  • les articles contenus dans cette rubrique avec un effet coloré et souligné (exemple 1 sur l’image ci-dessus) ;
  • les rubriques de second niveau contenues dans cette rubrique de niveau 1 (exemple 2 sur l’image ci-dessus) ;
  • dans chacune des rubriques de niveau 2, sont proposées ensuite :
    • les articles contenus dans cette rubrique (exemple 3 sur l’image ci-dessus) ;
    • les rubriques de niveau 3 contenues dans cette rubrique (exemple 4 sur l’image ci-dessus).

Ainsi, il faut avoir conscience que ne sont pas affichés :

  • les articles situés dans les rubriques de troisième niveau ;
  • les rubriques de niveau 4 et leurs contenus. Il peut donc être utile, avant de migrer sa charte graphique, de vérifier qu’aucun contenu de ce type n’existe dans son site, voire de réorganiser les contenus de son site afin de lui assurer une plus grande lisibilité pour l’internaute.

Mise en valeur des brèves

PNG - 150.8 ko
Mise en valeur des brèves dans le mégamenu

Une colonne est laissé libre en partie droite du mégamenu pour mettre en valeur certaines brèves de la rubrique concernée. Pour être mises en valeur, les brèves concernées doivent se voir attribuer le mot-clé "breve dans le menu".

Les mises en valeur des brèves peuvent prendre deux formes :

  1. une forme graphique (exemple 1 dans l’image ci-dessus) : si la brève concernée s’est vue attribuer un logo, c’est alors le logo qui est affiché dans le mégamenu. Dans ce cas, on limitera la largeur du logo à 190 pixels.
  2. une forme textuelle (exemple 2 dans l’image ci-dessus) : si la brève n’a pas de logo, c’est alors son titre et son texte qui sont affichés dans un encadré.

Exclure des rubriques du mégamenu

Respectant le fonctionnement de la distribution EVA-web, des rubriques et leurs contenus peuvent ne pas être affichés dans le mégamenu en leur attribuant le mot-clé "excluredumenu".

La page de sommaire

La Une

PNG - 267.1 ko
Exemple d’article placé en Une

La charte graphique ministérielle vous propose de mettre en avant des contenus et actualités de votre site en Une. Une attention particulière est apportée à la présence d’éléments graphiques.

Pour être placé dans un bandeau d’actualité, un article doit remplir les conditions suivantes :

  1. se voir attribuer le mot-clé "a la une" ;
  2. avoir un logo mesurant 680 pixels de large sur 279 pixels de haut (s’il n’a pas ces dimensions, il sera automatiquement recadré).

L’article est alors présenté sous la forme suivante :

  • le titre en haut à gauche ;
  • le chapeau en dessous du titre (en bas à gauche) ;
  • le logo en partie centrale et droite.

Les différents articles à la Une sont présentés en alternance avec un effet fondu lors des transitions.

L’éditorial

PNG - 156.8 ko
Un exemple d’éditorial

Sous le bandeau d’actualité, vous pourrez placer un ou plusieurs articles en éditorial en leur ajoutant le mot-clé "editorial" (fonctionnement classique de la distribution EVA-web). Les article seront alors placés dans des encadrés dont la couleur est adaptée à la charte graphique du site.

L’éditorial est suivi par la liste des derniers articles du site présentée en deux colonnes.

Quelques blocs spécifiques

PNG - 230.7 ko
Quelques autres blocs possibles pour la page de sommaire

Vous trouverez à la suite les bloc suivants :
- les blocs classiques de la distribution EVA-web (derniers sites référencés, dernières publications issues des sites syndiqués, dernières brèves, ...) ;
- un bloc "Zoom sur" : il s’agit de mettre en valeur quelques articles en leur attribuant le mot-clé "zoom" ;
- un bloc "Et aussi" : c’est un rappel des titres de certains articles repérés par le mot-clé "et aussi" ;
- un bloc "En bref" : mise en valeur de brèves ayant le mot-clé "en bref".

Adaptations graphiques

Chacun des blocs de la page de sommaire peut être adapté graphiquement : création d’un encadré, d’une couleur de fond (terne ou déclinée selon la couleur dominante du site), choix de la largeur (demi-colonne, tiers ou deux tiers de colonne).

Pour faire adapter ces éléments, vous pouvez vous tourner vers la mission TICE (contacter Olivier Gautier).

Le pied de page

PNG - 72.5 ko
Le pied de page

Le pied de page se compose des trois éléments suivants :

  1. Des liens institutionnels (rectorat de Rouen, DSDEN de l’Eure et de la Seine Maritime, les services académiques, des sites du ministère)
  2. Des partenaires que vous pouvez mettre en valeur :
    • en référençant des sites web ;
    • en ajoutant à ces sites le mot-clé "partenaire_pied"
  3. Une barre de liens proposant :
    • une page de contact,
    • une page décrivant les flux RSS du site,
    • le plan du site,
    • une page présentant les mentions légales du site,
    • un lien vers la rubrique d’aide de la distribution EVA-web,
    • un lien de déconnexion,
    • une ancre pour revenir en haut de page,
    • enfin, une mention avec le nom du site.

Les autres éléments

Les autres éléments intégrés au site sont ceux de la distribution EVA-web.

Seuls deux éléments ont été adaptés :

  • page de type rubrique : la liste des articles de la rubrique est présentée en deux colonnes dés lors qu’elle contient plus d’un article ;
  • page de type article : les documents joints aux articles sont affichés dans un encadré spécifique à droite du texte de l’article (s’ils n’ont pas été déjà inclus dans le texte de l’article à l’aide des balises <emb...> ou <doc...>).

Faire migrer sa charte graphique

Il est conseillé de prendre contact avec la mission TICE (contactez Olivier Gautier) si vous souhaitez migrer la charte graphique de votre site en utilisant le nouveau plugin afin que les éléments suivants puissent être adaptés :
- création d’un logo spécifique ;
- tailles, couleurs et disposition des blocs sur la page de sommaire ;
- adaptation de certains éléments graphiques (redimensionnement automatique des images intégrées par exemple).

Dans tous les cas, il est conseillé d’effectuer des sauvegardes avant de modifier votre charte graphique :

  • sauvegarde de l’habillage grâce au module de sauvegarde des habillages du plugin de gestion des habillages d’EVA-web ;
  • sauvegarde de la base de données ;
  • sauvegarde, par connexion FTP, du répertoire IMG (qui peut contenir des éléments de votre charte graphique tels que les images de fond) et du répertoire tmp/dump (qui contient les sauvegardes de la base de données).

Pour contacter la mission TICE (Olivier Gautier) au sujet de la gestion de votre site web, nous vous remercions de saisir votre message à partir de l’application Ticetab (onglet "Ressources numériques" puis clic sur l’icône enveloppe correspondant au service du SPIP mutualisé concerné).

Ce plugin ne sera pas proposé dans notre académie en-dehors de la plate-forme SPIP mutualisée.

Incompatibilité connue : la nouvelle charte graphique est incompatible avec le plugin "Liens explicites". Il vous faudra donc désactiver ce plugin et utiliser la lame "SPIP et les liens... externes" du Couteau suisse en remplacement.