Vous êtes ici : Accueil > Fonctionnement de la plate-forme mutualisée > Charte graphique académique > Charte graphique académique : graphisme
    Publié : 22 février 2010
    Format PDF Enregistrer au format PDF

    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 techniques permettant de créer rapidement un logo pour votre site.

    PNG - 49.8 ko
    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 : 

    JPEG - 10 ko
    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 :

    PNG - 3.7 ko
    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 :
    1. référencer le site de l’inspection de Seine Maritime dont l’adresse est http://www.ia76.ac-rouen.fr/ en indiquant "Inspection académique de Seine Maritime" comme titre du site ;
    2. lui ajouter le logo suivant :

    PNG - 3.4 ko
    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

    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.