(→Toutes images déterminantes) |
(→Toutes images déterminantes) |
||
Line 372: | Line 372: | ||
====Toutes images déterminantes ==== | ====Toutes images déterminantes ==== | ||
− | [[Fichier:carte_vy.jpg| | + | [[Fichier:carte_vy.jpg|200px|right]] |
* cartes : ''dans le [http://www.bibliotheques.hautchablais.fr/ Haut-Chablais], la carte est [http://www.bibliotheques.hautchablais.fr/userfiles/image/Pratique/carte.png non interactive].'' | * cartes : ''dans le [http://www.bibliotheques.hautchablais.fr/ Haut-Chablais], la carte est [http://www.bibliotheques.hautchablais.fr/userfiles/image/Pratique/carte.png non interactive].'' | ||
* cartes interactives : ''dans le [http://bibliotheques.vyvs.fr/index/index/id_profil/27 réseau de la CAVY], la carte est interactive. Le fond de carte doit être fourni avec les noms de communes (voir image ci-contre).'' | * cartes interactives : ''dans le [http://bibliotheques.vyvs.fr/index/index/id_profil/27 réseau de la CAVY], la carte est interactive. Le fond de carte doit être fourni avec les noms de communes (voir image ci-contre).'' | ||
* personnalisation des boîtes : ''à [http://mediatheque.sequedin.fr/ Sequedin], l'image de titre des boîtes "Venir en médiathèque" et "Agenda" est '': [[Fichier:sequedin_bulle.png|120px]] | * personnalisation des boîtes : ''à [http://mediatheque.sequedin.fr/ Sequedin], l'image de titre des boîtes "Venir en médiathèque" et "Agenda" est '': [[Fichier:sequedin_bulle.png|120px]] | ||
* domaines (genres par exemple) : les images symbolisant les axes de recherche dans le catalogue (domaines) peuvent se présenter de plusieurs manières : ''à [http://corbas69.afi-sa.net/ Corbas], il s'agit de [http://corbas69.afi-sa.net/userfiles/image/dvd_adulte.jpg couvertures], dans le [http://www.bibliotheques.hautchablais.fr/ Haut-Chablais], [http://www.bibliotheques.hautchablais.fr/userfiles/image/domaines/musique.png de pictogrammes], à [http://mediatheque.lekiosque-poleculturel.fr/index/index/id_profil/26 Andrézieux-Bouthéon], [http://mediatheque.lekiosque-poleculturel.fr/userfiles/image/Collections/adulte.jpg d' images]''. '''Attention, dans le cas des domaines, il est vivement conseillé d'utiliser des images de même taille.''' | * domaines (genres par exemple) : les images symbolisant les axes de recherche dans le catalogue (domaines) peuvent se présenter de plusieurs manières : ''à [http://corbas69.afi-sa.net/ Corbas], il s'agit de [http://corbas69.afi-sa.net/userfiles/image/dvd_adulte.jpg couvertures], dans le [http://www.bibliotheques.hautchablais.fr/ Haut-Chablais], [http://www.bibliotheques.hautchablais.fr/userfiles/image/domaines/musique.png de pictogrammes], à [http://mediatheque.lekiosque-poleculturel.fr/index/index/id_profil/26 Andrézieux-Bouthéon], [http://mediatheque.lekiosque-poleculturel.fr/userfiles/image/Collections/adulte.jpg d' images]''. '''Attention, dans le cas des domaines, il est vivement conseillé d'utiliser des images de même taille.''' | ||
+ | <br> | ||
+ | <br> | ||
+ | <br> | ||
====Icônes (pictogrammes) ==== | ====Icônes (pictogrammes) ==== |
Le plus simple est de dessiner (à main levée ou grâce à des outils dédiés) :
Une fois ces pages définies, il restera à les lier entre elles afin de définir le plan du site (organigramme).
Tous les menus (horizontaux ou verticaux) doivent également être définis : entrées principales, sous menus (avec leur destination).
IMPORTANT : dans tous les exemples qui suivent, les copies d'écran émanent de sites dont le graphisme a été personnalisé. La méthodologie pour la mise en place de l'architecture est commune à tous les Bokeh, cependant, le rendu graphique sera différent dans le cas d'un portail non personnalisé.
La page d’accueil est l'élément déterminant de l'ergonomie et de l'environnement graphique du site. Toutes les pages de contenu sont généralement calquées sur cette page d'accueil. Il reste cependant possible d'imaginer des types de présentation différentes (surtout d'un point de vue ergonomique).
La notion de division correspond à la définition du nombre de colonnes constituant chaque page. Le portail peut supporter jusqu'à 3 divisions soit 3 colonnes. Entre la page d'accueil et les autres pages de contenu, le nombre où le format des divisions peut être variable.
La navigation dans le site se fait généralement par un menu principal. Ce dernier peut être présenté soit de manière horizontale, soit de manière verticale dans la partie gauche (ou droite) du site.
Le menu ne peut contenir que 2 niveaux : une entrée de menu et un sous-menu.
Une fonction fil d'Ariane est livrée avec le site. Il s'affiche entre l'entête de site et le contenu. Il est construit selon la forme suivante : Accueil > Nom du profil > Nom de la page.
Exemple dans le Haut-Chablais :
La boîte article permet d'afficher tous les contenus rédigés issus du CMS (gestionnaire d'articles) : aussi bien les informations froides (contenu fixe, par exemple, les infos pratiques) et les informations chaudes (contenu qui se renouvelle en permanence grâce au système de publication automatique, par exemple, les actualités). C'est pour cette raison que cette boîte article peut s'afficher de façons multiples dans une seule et même boîte (module) :
Médiathèque de Pont Saint-Martin :
On peut noter, sur cette page, l'utilisation de deux boîtes articles :
Important : ce mode d'affichage a un rendu satisfaisant avec, comme pré-requis, une bonne maîtrise des outils de traitement de l'image par les personnes en charge de la publication.
Les bibliothécaires et les lecteurs ont la possibilité de mettre des avis sur les différents documents de la base de données. Une boîte critique existe afin de les mettre en valeur sur le site.
Médiathèque et ludothèque de Revel :
Réseau de Chinon Vienne et Loire :
Cette boîte permet de mettre en avant des sélections du catalogue par nouveautés, genres, centres d'intérêt, auteurs, types de document, sections...
Médiathèque de Moulins - Portail jeunesse :
Les kiosques permettent de mettre en avant une sélection de documents.
Bibliothèque de Clichy-sous-Bois :
La boîte calendrier est un élément important pour afficher très simplement les prochains événements organisés par les médiathèques. Ce module peut prendre différentes formes.
Réseau des médiathèques de Hénin-Carvin :
Médiathèques de la Métropole Européenne de Lille :
Ce module permet de mettre en valeur des listes de sites internet.
Bibliothèque départementale de la Meuse :
Réseau des Colporteurs en Ubaye :
Ce module remonte les dernières informations publiées sur un site via un fil RSS.
Ce module permet d'afficher des informations spécifiques à chaque structure : coordonnées, heures d'ouverture, services, localisation sur une carte...
Réseau des médiathèques de la métropole Lilloise :
Ce module permet de diviser une colonne en deux et d'y installer deux boîtes (de type différent ou non).
Loudéac : à gauche et à droite, deux modules "critique" :
Médiathèques de Valence Romans Agglo : à gauche et à droite, deux modules "article" :
Haut-Chablais : à gauche, une boîte "article" et à droite une boîte "critique" :
La boîte de connexion au compte lecteur peut être positionnée dans la bannière ou dans le corps de la page d'accueil. Il faut veiller à ce qu'elle soit toujours accessible, quelle que soit la page sur laquelle on se trouve.
Revel :
Réseau du Pays Voironnais : il faut cliquer sur "Se connecter" pour faire apparaître la boîte de connexion :
La boîte de recherche peut être positionnée dans la bannière ou dans le corps de la page d'accueil. Il faut veiller à ce qu'elle soit toujours accessible, quelle que soit la page sur laquelle on se trouve. La boîte de recherche simple permet d'afficher un lien vers la recherche avancée.
Médiathèque d'Andrézieux-Bouthéon :
Lorsque l'on lance une recherche sur Bokeh, deux formats d'affichage sont disponibles (paramétrables par les bibliothécaires) : le mode "Mur" ou le mode "Liste". Il est également possible de paramétrer :
Loudéac :
Corbas :
Une notice bibliographique affiche différentes informations, celles provenant du SIGB et d'autres issues de réservoirs d'enrichissement (lastfm, wikipedia, première, INA...). Ces informations sont stockées dans différents blocs. L’ordre d'affichage de ces derniers est paramétrable par les bibliothécaires. Les informations sont ventilées entre des blocs dépliables matérialisés par des + et des – et d'un système d'onglet afin que le défilement de la page ne soit pas trop long. L'affichage est paramétrable par type de document.
Loudéac :
A noter :
A noter :
Il s'agit des schémas des pages ci-dessous matérialisant les modules, leur place et leur proportion :
Tout élément supplémentaire permettant de préciser l'aspect graphique est le bienvenu :
Largeur (en pixels) du site, des colonnes ou de tout autre élément déterminant.
Fournir les fichiers aux formats .eot, .svg, .ttf, .woof. Le site Fontsquirrel permet de générer ces fichiers. Attention cependant à toujours respecter les règles de licence propres à chaque police.
Si plusieurs polices sont utilisées dans le site, il sera indispensable de spécifier les endroits où elles doivent être appliquées.
Au format #ABCDEF : le site Codes Couleur HTML peut vous y aider.
Pour chaque style, spécifier les police, taille, couleur, l'espacement entre les lettres, l'espace laissé au dessus ou en dessous :
Cette image n'est sont pas figée et il est possible de la modifier (en administration) à tout moment.
Important : l'image ne doit pas contenir les éléments interactifs (logos cliquables, champs de recherche ou d'identification...). Ces derniers viendront s'intégrer en sur-couche.
Il est possible d'intégrer, par dessus la bannière, 2 logos (maximum) qui pourront renvoyer vers d'autres sites (portail de la ville, blogs...). Si ces images sont des liens, fournir les URL correspondantes.
(En cours de rédaction FC)
Passage en responsive =
Etant entendu que l'affichage de ces éléments, en responsive, se fera dans cet ordre.
Site hébergé et maintenu par AFI et BibLibre et enrichi par la communauté de Bokeh.