inria.frasset.free.fr › img › pdf › inria_charte.pdf · charte ergonomique et graphique...
TRANSCRIPT
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.
www.inria.fr — charte ergonomique et graphique1. environnement général
CHARTE INRIA - novembre 2000 — p.2
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
CHARTE INRIA - novembre 2000 — p.3
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
CHARTE INRIA - novembre 2000 — p.4
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
CHARTE INRIA - novembre 2000 — p.5
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
CHARTE INRIA - novembre 2000 — p.6
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
CHARTE INRIA - novembre 2000 — p.7
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
CHARTE INRIA - novembre 2000 — p.8
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
CHARTE INRIA - novembre 2000 — p.9
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
CHARTE INRIA - novembre 2000 — p.10
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
CHARTE INRIA - novembre 2000 — p.11
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
CHARTE INRIA - novembre 2000 — p.12
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
CHARTE INRIA - novembre 2000 — p.13
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)
CHARTE INRIA - novembre 2000 — p.14
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
CHARTE INRIA - novembre 2000 — p.15
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
CHARTE INRIA - novembre 2000 — p.16
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