Download pdf - inria.frasset.free.fr › IMG › pdf › Inria_charte.pdf · charte ergonomique et graphique CHARTE INRIA - novemb r e 200 0 — p. 1 sommai r e Le site ww w.inria.fr a fait l’objet

www.inria.fr — charte ergonomique et graphique

CHARTE INRIA - novembre 2000 — p.1

sommaire

Le site www.inria.fr a fait l’objet d’une réorganisa-tion au cours de l’année 2000. A travers son nouveau site, L’INRIA se donne et trans-met une identité, qui s’exprime par un ton, une struc-ture, des modes de navigation et un graphisme cohé-rents.C’est le respect de ces principes et leur maintien dansla durée qui garantiront l’affirmation et la persistan-ce de cette identité.L’objectif de cette charte est de recenser les principesdéfinis lors de la restructuration du site, et de lestransmettre aux personnes en charge de sa gestion etde son développement.

1. environnement général

2. ergonomie et navigation

3. charte graphique

4. nommage des fichiers

annexes

5. architecture du site à sa mise en service

Les objectifs de la refonte du site :- adéquation avec la stratégie de communication,- amélioration technique et mise aux normes,- amélioration de la navigation par une information plus

structurée.

http://www.inria.fr/

www.inria.fr — charte ergonomique et graphique1. environnement général


Objectifs du site inria.fr

Contenu et complémentarités

Principes généraux d’ergonomie

Ce site est le média stratégique de l’INRIA. Il permetde faire connaître et valoriser ses productions et sesactivités dans ses différents domaines d’application.Il répond à une stratégie d’ouverture vers différentspublics (étudiants, chercheurs, industriels).Cette ouverture ne doit cependant pas nuire à l’effi-cacité recherchée par un public d’habitués, motivésprincipalement par les informations relatives à larecherche.

Le site institutionnel comporte environ 250 pagesd’informations génériques sur l’INRIA. Il propose denombreux liens vers :- des applicatifs (annuaire, moteur de recherche,…)- des sites dédiés, qui ont leur autonomie et leurpropre ergonomie (sites d’information nationale etsites connexes comme ceux des unités de rechercheou des projets)- des sites externes (ex : w3c, ministères, etc.)Cette charte s’applique uniquement au site institu-tionnel et aux sites d’information nationale ; les sitesconnexes pourront en adopter certains principes.

L’organisation du contenu, les modes de navigationet le traitement graphique répondent à des principesd’ergonomie :- l’utilisateur doit atteindre l’information recherchéeen un minimum de temps et de clics,- il doit pouvoir se repérer facilement et identifier saposition dans l’ensemble du site,- il doit pouvoir changer de rubrique ou de sous-rubrique facilement.- les écrans sont structurés de manière homogène surl’ensemble du site.

Les moyens :- produire un site fonctionnel et efficace, à l’aide d’unenavigation claire et homogène- privilégier une thématique correspondant aux objectifsde consultation des différents publics,- éviter la redondance d’informations entre le site natio-nal et les autres sites de l’INRIA, et entre les différentesrubriques du site national.

L’articulation entre ces niveaux et sources d’informationest fondée sur le principe de l’unicité de l’information..La gestion de l’information est, par principe, confiée àl’émetteur le plus compétent (direction, personne, service,équipe,…) .

www.inria.fr — charte ergonomique et graphiqueenvironnement général


Normes et environnement technique

Édition

Liens entre sites

Mode de développement : Html 4.0 strict, CSS2Outil d’édition : Macromédia DreamweaverConformité avec les préconisations du w3c en matiè-re d’interopérabilité, notamment avec les systèmespour les non-voyants.Serveur : Apache sous Linux (hébergement interne)

L’INRIA redéfinit ses responsabilités éditoriales :- un comité de rédaction intervient à un niveau glo-bal. Il définit les axes de développement du site ; ils’assure de la cohérence des informations et de l’as-pect visuel.- la gestion des différentes rubriques est confiée àdes responsables de rubriques, en fonction de leurdomaine de compétence.

Afin de ne pas désorienter l’utilisateur, les liens deinria.fr vers d’autres sites sont - autant que possible -signalés par une information explicite (du type«consulter le serveur de…»)

Les sites dépendant de l’INRIA (UR, serveurs pro-jets,…) proposent des liens vers le site inria.fr :- le logo ou la mention INRIA pointent vers la paged’accueil de inria.fr,- si nécessaire, les liens concernant des informationsprécises peuvent pointer vers des pages d’informa-tion de inria.fr.

informations complètes au § 3.

www.inria.fr — charte ergonomique et graphique2. ergonomie et navigation


Généralités

Typologie des écrans et navigation

- mise en page optimisée pour un écran 800x600- pas de frames- présence d’équivalents textes des images (ALT)- logo INRIA présent sur toutes les pages- un clic sur le logo renvoie à la page d’accueil

Une typologie des écrans ou des fonctionnalités per-met de définir différents niveaux d’information :

la page d’accueilElle a une fonction d’accueil, d’orientation et d’in-formation. Les éléments présents sur cette page rem-plissent l’une des 5 fonctions suvantes :- identification- rubrique institutionnelle- accueil spécifique- information dynamique- fonctionnalité pratique

éléments d’identificationlogo, slogan, coordonnées de l’INRIA et lien vers les plansd’accès, E-mail webmaster.

rubriques institutionnellesElles sont accessibles en permanence sur l’ensemble dusite : actualités, l’INRIA, recherche scientifique, valorisa-tion et transfert, publications et documentation, travailleret se former à l’INRIA.

accueils spécifiquesopportunités de jobs, spécial presse.

information dynamiqueà la une (brèves d’actualité), en direct (raccourcis vers lesinformations les plus demandées ou les plus attractives).

fonctionnalités pratiquesannuaire, moteur de recherche, plan du site, versionanglaise (accès permanent), Intranet (accès réservé),à propos du site (information technique, crédits)

www.inria.fr — charte ergonomique et graphiqueergonomie et navigation


sommaire de rubrique (rubriques institutionnelles)Les rubriques institutionnelles sont accessibles enpermanence. Leur sommaire contient :- la liste des sous-rubriques- des brèves ou un texte d’introduction

pages de niveau 2 et +ll s’agit de pages d’information, pouvant comporterégalement des liens vers d’autres pages ou sites.

fonctionnalités pratiquesIl s’agit d’outils mis à la disposition de l’utilisateur surtoutes les pages : annuaire, recherche, plan du site,version anglaise.

présentation des liens :- les liens dans le texte ne sont utilisés que s’ils sontpertinents. Ils ne servent pas à combler une lacunerédactionnelle ou structurelle.- les liens complémentaires vers une autre page ouvers un autre site sont dégagés du texte (en générallistés en bas de page) et rendus explicites (sous laforme «complément d’information : …» ou «pour ensavoir plus», ou «consulter le serveur de … : …»).

navigation à ce niveau :- changer de rubrique- accéder aux sous-rubriques- accéder aux fonctionnalités pratiques- cliquer sur les brèves pour lire le développement (le caséchéant)- retourner à l’accueil

navigation à ce niveau :- changer de rubrique- revenir au début de la sous-rubrique- accéder aux autres sous-rubriques - accéder aux fonctionnalités pratiques- retourner à l’accueil

A retenir :

• les rubriques institutionnelles sont affichées surtoutes les pages. On peut ainsi changer de rubriquesans remonter à la page d’accueil.

• les sous-rubriques sont affichées sur toutes lespages de la rubrique en cours. On évite ainsi deremonter au sommaire de rubrique.

• comme les rubriques institutionnelles, les fonc-tionnalités pratiques restent toujours affichées etdisponibles.

www.inria.fr — charte ergonomique et graphique3. charte graphique


Ligne directrice

Structure des pages par niveau

La charte graphique est une réponse :- aux objectifs du site,- aux axes de communication,- à l’identité de l’INRIA et à son image,- au contenu du site et à son organisation,- à ses conditions d’exploitation.

Élements constants- le logo INRIA est toujours en haut de page, àgauche, et dégagé du reste de la page (aucun autreélément à la même hauteur).- la partie gauche de l’écran est constituée d’uneimage de fond, de la liste des rubriques institution-nelles, des fonctionnalités pratiques (pictos)

Sommaire de rubriqueOutre les éléments constants, sur la partie droite :- titre de la rubrique- sous-rubriques- brèves, texte d’introduction.- pied de page spécifique : retour à l’accueil,- pied de page générique : ©, date de mise à jour,webmaster.

Page de niveau inférieurOutre les éléments constants, sur la partie droite :- sous-rubriques- titre de la page- ancres ou autres choix propres à la page,- corps de la page,- pied de page spécifique : retour haut de page, lienvers page suivante, retour à l’accueil,- pied de page générique : ©, date de mise à jour,webmaster.

Mots-clés : sobriété, clarté, cohérence, lisibilité, accessibili-té de l’information.

Le contenu de la partie droite varie en fonction du niveaud’arborescence.

Page d’accueilElle a sa propre structure. Seuls les éléments d’informationdynamique (à la une, en direct) ou spécifiques (presse, jobs)sont modifiables.

www.inria.fr — charte ergonomique et graphiquecharte graphique


Principe de réalisation

Structure de base

Feuilles de styleLe site est réalisé à partir de CSS (cascading stylesheet), ou «feuilles de style en cascade».Ces feuilles de style définissent des propriétésapplicables sur l’ensemble du site :- règles de mise en page et d’affichage,- typographie (polices, tailles,…)- couleurs, etc.

Cette technique permet de simplifier la réalisationdes pages, et de maintenir une cohérence de pré-sentation sur l’ensemble du site, car les CSS contrô-lent la manière dont les éléments sont affichés.

ModèlesPour l’application de ces règles, des modèles (ougabarits) ont été réalisés. Il existe 2 modèles par rubrique, rangés dans le dos-sier Templates :- un modèle pour le sommaire de rubrique,- un modèle pour les pages de niveau inférieur

Ces modèles comportent des zones verrouillées etdes zones modifiables. Ainsi la création de nouvellespages s’en trouve simplifiée et le risque de perdredes éléments de mise en page ou de navigation estréduit.

Tout le contenu des pages est placé dans un seultableau, à l’exception des pieds de page et du logo.Des images, légendes et tableaux sont imbriquéesdans le corps de la page au moyen de tableauxinternes («tableaux dans le tableau principal»).

Il existe 2 fichiers CSS :- unestrict.css, qui s’applique à la page d’accueil,- pagestrict.css, pour toutes les autres pages.

Chaque fichier décrit les propriétés d’affichage pour lesobjets constituant la ou les pages auxquelles ils’applique : titres, sous-titres, corps de texte, liens,tableaux, etc.

(cf.fonctionnalités de Macromédia Dreamweaver)

Pour créer de nouvelles pages, il est préférable d’utiliserle modèle de la rubrique concernée, car l’environnementgraphique et de navigation est pré-positionné correcte-ment (sous-rubriques, titres,…).

Pour bien comprendre l’utilisation et le fonctionnementde ces modèles reportez-vous à la documentation deMacromédia Dreamweaver.

La colonne gauche du tableau contient les rubriques deniveau 1 et la barre de fonctions. La colonne droite lesdifférents éléments de la page. Les positionnements sontdéfinit par les CSS.

www.inria.fr — charte ergonomique et graphiquecharte graphique / page accueil


1

2

3

zones d’information

1 - rubriques niveau 12 - barre de fonctions3 - pied de page

zones modifiables

www.inria.fr — charte ergonomique et graphiquecharte graphique / sommaire de rubrique


1

2

3

Titre de la page

Brèves, introduction…

Choix de la rubrique

1 - rubriques niveau 12 - barre de fonctions3 - pied de page

Date de la dernière mise à jour dela pageAdresse mail du webmaster de larubrique

zones modifiables

www.inria.fr — charte ergonomique et graphiquecharte graphique / page niveau 2


1

2

3 1 - rubriques niveau 12 - barre de fonctions3 - pied de page

zones modifiables

Sous-rubriques de la rubrique en cours

Ancres ou liens dans la page

Corps de la page

Date / webmaster / page suivante

Titre de la page

www.inria.fr — charte ergonomique et graphiquecharte graphique / créer une nouvelle page


Les 10 étapes à suivre 1 – Choisir «Fichier -> Nouveau à partir d’un modè-le». Sélectionner le modèle de page adéquat.

2 – Choisir «Fichier -> Enregistrer sous…».Sauvegarder la page au bon endroit avec un nomexplicite.

3 – Choisir «Modifier -> Propriété de la page» et ins-crire le titre de la fenêtre.

4 – Modifier le lien de la sous-rubrique en cours.Sélectionner l’item puis aller dans «Texte -> Style ->forte accentuation».

5 – Saisir le titre de la page.

6 – Placer les éventuels choix internes et ancres dela page.

7 – Intégrer les éléments de la page (textes, images,liens…).

8 – Modifier le lien vers la page «anglaise» en sélec-tionnant le drapeau anglais de la barre de fonction.

9 – Modifications du bas de page :• inscrire le lien page vers la page suivante ousupprimer «suite».• changer la date de mise à jour• Mettre la bonne adresse mèl du webmaster dela rubrique.

10 – Passer la page au validateur W3C.http://validator.w3.org/file-upload.html

Ce processus est valable avec l’éditeur HtmlDreamweawer de Macromédia.

Vous disposez de 2 modèles par rubrique, un modèle«menu» et un modèle «page»

Voir §4 : Nommage des fichiers

Vous pouvez éditer les différentes zones de la page enchoisissant «Modifier -> Modèle» puis en sélectionnantune des zones inscrites en bas du menu.

www.inria.fr — charte ergonomique et graphiquecharte graphique


Informations de référence Toutes ces informations sont spécifiées dans les CSSet ne sont présentées ici qu’à titre d’information.Leur gestion est automatique lors de la création depages.

CouleursToutes les pages sont sur fond blanc.Texte normal : noirTitres, choix, liens : bleu, couleur #003399Texte en exergue : gris, couleur #333333Légendes d’images : rouge, couleur #660000Fonds de tableaux : bleu, couleur #ccccff

CaractèresTexte courant : Times New RomanTitres, sous-titres, choix, légendes : ArialPied de page : Courrier newLa taille des caractères est définie dans les CSS,selon un principe de relativité entre éléments.

ImagesLes champs ALT doivent être complétés systémati-quement.Les images ont une définition de 72 pixels parpouce (ou dpi). Elles sont à utiliser avec parcimonie,pour limiter le temps de chargement de la page.Leur «poids» (en kilo-octets) doit être réduit aumaximum, sans dégrader exagérément leur qualité.

Le fond contient l’image située à gauche de chaqueécran.

Polices de substitution : Times, SerifPolices de substitution : Helvetica, Lucida, Sans-serifPolices de substitution : Courrier, mono

En application des règles du w3c, ces équivalents textespermettent un fonctionnement optimal des navigateurstextes et des outils spécifiques aux non voyants.

Formats de compression préconisés- photos : JPEG- textes et dessins : GIF

Le réglage des taux de compression est fonction dunombre d'images et de leur taille dans la page. En géné-ral il est préférable d'utiliser des images au cadrage rap-proché, sans trop de détails.

www.inria.fr — charte ergonomique et graphique4. nommage des fichiers


Noms de fichiers

Langues

Les noms de fichiers et de répertoires sont enminuscules et doivent être explicites.Les fichiers HTML se terminent par l’extension .html.

Chaque document HTML est présent sur le site endeux langues, français et anglais.Les fichiers sont nommés : - monfichier.fr.html (version française),- monfichier.en.html (version anglaise). Ces deux fichiers sont placés côte à côte dans lemême répertoire, pour deux raisons :

1. Pour prévoir la négociation de langue : Le choix a été fait de ne pas mettre en œuvreimmédiatement la négociation de langue, mais deprévoir que cela puisse être fait rapidement. Or lanégociation se fait justement grâce à l'extension surun même nom de fichier présent dans le mêmerépertoire.

2. Pour faciliter le travail du webmaster : Lors de la modification ou de la création d'une pageHTML, le webmaster voit immédiatement les 2fichiers car ils sont côte à côte dans l'arborescence.Quand la négociation sera mise en œuvre, les liensseront valides pour toutes les langues.

Exemple : on préférera nommer un document parlant desconférences organisées par l'INRIA : conferences+exten-sion plutôt que conf+extension.

Exemple de page utilisant la négociation de langue : http://www.w3.org/WAI/References/QuickTips/qt Cette page est traduite en une dizaine de langues. La page qui vous est envoyée est celle qui satisfait aumieux les préférences de langue de votre navigateur.

www.inria.fr — charte ergonomique et graphique5. architecture (version de démarrage)


Page d’accueillogo, nom, slogan

actualitésl'INRIArecherche scientifiquevalorisation et transfertpublications et documentationtravailler et se former à l’INRIA

offres d’emploi (id)à la une (plusieurs liens)spécial presse (id)en direct (id)

annuaire rechercher (zone de saisie)plan du siteanglais

Intranet (accès réservé)

à propos du sitecoordonnées de l’INRIA et lien vers les plans d’accèse-mail webmaster©, date

ActualitésBrèves ou introduction sur sommaireVu à la une

liste de liens sur infos développéesInédit

derniers numérosabonnementsuggestionsarchives 1 à 10archives 11 à 20E-mail responsable de rubrique

colloques et manifestationscalendrier prochaines manifestations manifestations passées 2000manifestations passées 1999manifestations passées 1998E-mail responsable de rubrique

communiqués de presse (-> accueil presse)actualité scientifique (-> recherche scientifique)actualité industrielle (-> valorisation et transfert)dossiers de presse (-> accueil presse)

L’INRIAmot du président sur sommairel’INRIA en bref

les URdécret fondateur-> sites MENRT et Ministère économie

stratégieplan stratégique : version complète htmlplan stratégique : version complète PDFplan stratégique : version abrégée htmlplan stratégique : version abrégée PDF

les unités de recherche et leur partenairesUR SophiaUR Rhône-AlpesUR RennesUR RocquencourtUR LorraineLes partenaires institutionnels

organigrammeconseil d’administration conseil scientifiquecommission d’évaluationcartes de visitedirections et délégations unités de recherche

rapport annuelsommaire actuel + téléchargement PDFrapport annuel 1998 (PDF)rapport annuel 1997 (PDF)

historique-> sites spécifiques, UR, essai Larouturou

www.inria.fr — charte ergonomique et graphiquearchitecture


Recherche scientifiquebrèves sur sommaireprojets de recherche

liste complèteliste pour thèmes 1, 2, 3, 4liste par unité de recherche (5 entrée)

actions coopérativesliste par années

collaborations scientifiques internationalesprésentationcontactsunion européenneformationIntranet de la délégationorganisations co-gérées par l’INRIAchoix d’un pays

des nouvelles des chercheursmissions nationales et nominationsprix et médailles, titres scientifiques habilitations à diriger des recherches archives

Rapports de recherche et thèses (-> publications)Rapports d’activités scientifiques (-> publications)Logiciels, expertise (-> valorisation)Rapports de prospective scientifique

liens vers sites spécifiquesle plan stratégiqueles grands objectifs du plan stratégique

Centre virtuel de démonstration (-> publications)

Valorisation et transfertbrèves sur sommairenotre ambitionnotre offre

s’informer et échangertrouver un experttravailler avec une équipe de recherchedévelopper des technologiesles logiciels de l’Inriacontacts

des exemples de partenariatcréation d'entreprises

INRIA Transfert, l’incubateur de l’INRIAI-Source GestionIncubateurs régionauxsociétés de technologie issues de l’INRIA

spécial PME-PMIEurope et international

Publications et documentationbrèves sur sommairerapports de recherche et thèsesrapports d’activités scientifiques

rapport annuelrapports d’activités des projets de rechercherapports d’activités des actions de développementrecherche globalerecherche dans les années antérieures

chez les éditeursmonographiescompte-rendus de conférenceschapitres de livresnuméros spéciauxarchives

centres de documentationinterrogation simultanée des fonds de l'INRIAinterrogation INRIA Rocquencourtinterrogation INRIA Rennes / Irisainterrogation INRIA Sophia Antipolisinterrogation INRIA Lorraine/Loria

ressources multimédia (-> site spécifique)conférences, supports de cours, coll. didactiquesources d’information en informatiqueINédit, le journal de l’INRIArapport annuel

www.inria.fr — charte ergonomique et graphiquearchitecture


Travailler et se former à L’INRIAbrèves (accroche sur opportunités)Travaillerl’INRIA recruteêtre chercheur ou ITAcontacter la direction des ressources humainesLa formation par la recherchepourquoi venir se former à l’INRIApréparer sa thèse à l’INRIAla formation post-doctoralerelations avec les universités et les grandes écolesliens utiles

guide des aides doctorales et postdoctoralesconseils pour les chercheurs en herbeécoles thématiquesannuaire des docteurs et doctorantsautres serveurs d’informationcontacter l’équipe formation

Accueil Presseliste communiqués de presseliste dossiers de presseliste dossiers thématiquescontactschargés de communication des UR (mail)vidéothèque (-> lien)photothèque (-> lien)à propos de l’INRIAprésentation générale de l’INRIA