Charte graphique académique : graphisme

Charte graphique académique : graphisme
Extrait du Sites SPIP mutualisés Académie de Rouen
http://spip.ac-rouen.fr/?Charte-graphique-academique
Charte graphique académique
: graphisme
- Fonctionnement de la plate-forme mutualisée - Charte graphique académique -
Date de mise en ligne : lundi 22 février 2010
Sites SPIP mutualisés Académie de Rouen
Copyright © Sites SPIP mutualisés Académie de Rouen
Page 1/5
Charte graphique académique : graphisme
Fonctionnement général
Les éléments purement graphiques de la charte graphique académique adaptées à SPIP et EVA-web sont définis
dans une des feuilles de style que vous pouvez sélectionner dans l'onglet « Structure » de la page du plugin
d'habillage d'EVA-web.
Pour ceux qui veulent mettre en place la nouvelle charte graphique académique de façon autonome, vous trouverez
ci-dessous des éléments pour vous y aider.
Pour les sites des pôles disciplinaires, une aide vous sera apportée pour mettre en place les éléments décrits
ci-dessous.
Mise en garde
Lors des créations des nouveaux habillages académiques pour EVA-web, les feuilles de style incluses dans la
distribution EVA-web n'ont pas été suffisantes et entièrement satisfaisantes afin de pouvoir recopier les styles du
nouveau site académique.
Il a donc fallu modifier certains éléments des feuilles de style d'EVA-web en profondeur afin de les adapter à la
nouvelle charte graphique académique. C'est pourquoi il ne vous est pas conseillé d'utiliser les formulaires du plugin
d'habillage d'EVA-web (onglet Graphisme) pour adapter vous-même les couleurs, bordures, etc. Le résultat obtenu
ne pourrait alors en aucun cas correspondre à vos souhaits.
Par conséquent, si vous souhaitez adapter vos propres couleurs à votre site, tout en respectant les spécificités de la
charte graphique académique, il vous faudra demander à Olivier Gautier, créateur de ces nouvelles feuilles de style,
de vous créer une feuille de style supplémentaire, ainsi que de nouvelles images de fond associées.
En conclusion, il ne faut en aucun cas utiliser les formulaires de l'onglet "Graphisme" d'EVA-web pour gérer votre site
mais demander au gestionnaire de la plate-forme mutualisée (Olivier Gautier) si vous souhaitez réaliser quelques
adaptations graphiques répondant à la nouvelle charte graphique académique.
Vous pourrez néanmoins personnaliser certains éléments de l'entête de votre site en suivant les instructions
ci-dessous.
Créer l'entête de son site
Le cas du logo : zone 1 de l'image ci-dessous
L'aspect graphique du logo dans la disposition des éléments qui le composent obéit à un cahier des charges
spécifique de l'éducation nationale. Par ailleurs, la police de caractère utilisée dans le logo est spécifique et n'est pas
libre.
Pour tout nouveau site souhaitant s'habiller de la charte graphique académique, il faudra donc faire adapter le logo
par le responsable de la plate-forme SPIP mutualisée académique (Olivier Gautier) qui dispose des éléments
Copyright © Sites SPIP mutualisés Académie de Rouen
Page 2/5
Charte graphique académique : graphisme
techniques permettant de créer rapidement un logo pour votre site.
Structure de l'entête Disposition des éléments de l'entête
La bannière : zone 2 de l'image ci-dessus
La bannière devra avoir une taille de 500 pixels de large sur 150 pixels de haut.
Pour l'insérer dans votre site, vous référencerez votre site dans une de vos rubriques, vous insèrerez l'image de la
bannière en tant que logo du site référencé, vous y ajouterez le mot clé « banniere_academique » et enfin vous
placerez ce site en statut "Publié".
Les liens académiques de droite : zone 3 de l'image ci-dessus
Tout comme pour la mise en place de la bannière, les liens académiques placés en haut à droite de la page d'accueil
s'insèrent en référençant des sites, en leur insérant des logos puis en ajoutant le mot clé "liens_academiques".
Voici 3 exemples de mise en place de liens académiques :
Mise en place d'un lien vers le site académique : cette mise en place est obligatoire avec la mise en place de la
nouvelle charte académique. Les étapes de la mise en place :
1. référencer le site académique dont l'adresse est http://www.ac-rouen.fr en indiquant "Académie de Rouen"
comme titre du site ;
2. lui ajouter le logo suivant :
Logo de l'académie de Rouen
3. lui ajouter le mot clé "liens_academiques"
4. passer le site en statut Publié
Mise en place d'un lien vers le site de l'inspection de l'Eure : cette mise en place n'est pas obligatoire avec la mise
en place de la nouvelle charte académique. Les étapes de la mise en place :
1. référencer le site de l'inspection de l'Eure dont l'adresse est http://www.ia27.ac-rouen.fr/ en indiquant
"Inspection académique de l'Eure" comme titre du site ;
2. lui ajouter le logo suivant :
Logo du site de l'Inspection de l'Eure
3. lui ajouter le mot clé "liens_academiques"
4. passer le site en statut Publié
Mise en place d'un lien vers le site de l'inspection de Seine Maritime : cette mise en place n'est pas obligatoire
avec la mise en place de la nouvelle charte académique. Les étapes de la mise en place :
Copyright © Sites SPIP mutualisés Académie de Rouen
Page 3/5
Charte graphique académique : graphisme
1. référencer le site de l'inspection de Seine Maritime dont l'adresse est
"Inspection académique de Seine Maritime" comme titre du site ;
2. lui ajouter le logo suivant :
http://www.ia76.ac-rouen.fr/
en indiquant
Logo du site de l'Inspection de Seine Maritime
3. lui ajouter le mot clé "liens_academiques"
4. passer le site en statut Publié
Remarques supplémentaires :
1.
si vous insérez vos propres logos dans l'entête à droite, ils ne doivent pas dépasser une taille de 230 pixels de
large pour 70 pixels de haut.
2. Si vous insérez plusieurs logos à droite dans l'entête, ils seront rangés du plus ancien au plus récemment
référencé. Pour les placer dans l'ordre souhaité, vous pouvez modifier leurs dates de publication en ligne.
3. Si vous insérez plusieurs logos à droite dans l'entête, la colonne de droite risque de recouvrir ces logos : il
faudra décaler la colonne de droite vers le bas. Pour cela, demandez au gestionnaire de la plate-forme
mutualisée (Olivier Gautier) de réaliser cette opération pour vous.
Le formulaire de recherche : zone 4 de l'image ci-dessus
Ce formulaire, contrairement à ce qu'il peut y paraitre, ne fait pas partie de l'entête mais de la colonne de droite qui a
été remontée de quelques pixels afin de masquer une éventuelle zone blanche.
Pour mettre en place ce bloc de recherche, il faut insérer le bloc nommé "bloc_recherche" dans la page de sommaire
en première position dans la colonne de droite. Pour en savoir plus sur l'insertion de blocs dans les pages d'un site
EVA-web, vous pouvez consulter la vidéo située à l'adresse :
http://www.eva-web.edres74.ac-grenoble.fr/spip.php?article88
Une bannière uniquement pour la page de sommaire ?
Si vous souhaitez, comme pour le site académique, n'afficher la bannière de votre site que pour la page de
sommaire, il vous suffit :
1.
de vous rendre dans les pages du plugin d'habillage d'EVA-web, partie "Structure", bloc "Choix des éléments de
l'entête, du pied de page et des headers", formulaire "Insérer un squelette personnel dans l'entête, le pied de
page ou les headers :" ;
2. d'insérer le squelette nommé "pas_de_banniere_hors_sommaire" dans les headers, en dernière position
(neuvième).
Ne pas faire apparaitre les éléments graphiques dans
le contenu du site
Problématique
Copyright © Sites SPIP mutualisés Académie de Rouen
Page 4/5
Charte graphique académique : graphisme
Comme décrit ci-dessus, pour insérer la bannière du site et les liens de droite, il est nécessaire de publier certains
sites sur votre site uniquement dans un but technique. Ces sites n'ont donc pas nécessairement de rapport avec le
contenu de votre site et vous ne souhaitez probablement pas les faire apparaitre dans des blocs du type "Derniers
sites référencés".
Solution proposée
Pour cela, il est conseillé de créer une rubrique technique à la racine de votre site et d'y ajouter tous ces sites
techniques. Afin que les sites n'apparaissent pas dans les blocs de contenu, vous pourrez ajouter à cette rubrique
les mots clé suivants :
exclureduplan
excluredusommaire
excluredumenu
Ainsi, les sites concernés n'apparaitront pas dans la page de sommaire ou le plan du site. Par ailleurs, la rubrique ne
sera pas présente dans le menu de navigation.
Copyright © Sites SPIP mutualisés Académie de Rouen
Page 5/5