(Faute)
(Image pour la bannière (bandeau supérieur))
 
Ligne 354 : Ligne 354 :
  
 
====Image pour la bannière (bandeau supérieur) ====
 
====Image pour la bannière (bandeau supérieur) ====
Cette image n'est sont pas figée et il est possible de la modifier (en administration) à tout moment.
+
Cette image n'est pas figée et il est possible de la modifier (en administration) à tout moment.
 
* Format : tous les formats images standards (jpg, png, gif...).
 
* Format : tous les formats images standards (jpg, png, gif...).
 
* Poids : pour un meilleur confort de navigation, le poids maximal accepté est de 250ko.
 
* Poids : pour un meilleur confort de navigation, le poids maximal accepté est de 250ko.

Version actuelle en date du 7 juin 2017 à 08:57

Sommaire

Penser son portail documentaire (Ateliers UX)

Définir l'architecture du site

Le plus simple est de dessiner (à main levée ou grâce à des outils dédiés) :

  • la page d'accueil du site,
  • les pages "déterminantes" (ayant une architecture différente de la page d'accueil),
  • la page de résultat de recherche,
  • la page d'une notice.

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é.

Page d'accueil

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).

Nombre de divisions (colonnes)

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.

Menus et navigation

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.

Exemple de menu horizontal : à Clichy-sous-Bois, dans le Haut-Chablais, à Andrézieux-Bouthéon.
  • le menu peut être "caché" et ne se développer en totalité que suite à un clic : sur le site du Val d'Hyères Val de Seine, il faut cliquer sur le bouton "Menu" afin d'accéder à son contenu.
  • le sous-menu du menu horizontal peut s'afficher au survol de la souris comme sur le réseau de Chinon Vienne et Loire.
  • le menu horizontal peut être placé sous la bannière (Sequedin) ou collé en haut du navigateur (Andrézieux-Bouthéon).
Exemple de menu vertical : dans le réseau du Carembault, à Montauban.
  • le menu vertical fermé par défaut ou systématiquement déplié.

Fil d'Ariane

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 :

Ariane chablais.png

Module articles

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) :

Article seul

Médiathèque de Pont Saint-Martin :

Article pontstmartin.png


On peut noter, sur cette page, l'utilisation de deux boîtes articles :

  • la première, dans la colonne de gauche : boîte "Horaires",
  • la seconde, dans la colonne de droite : article "Club de lecture Samedi de lire".

Multi-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.

Sous forme de diaporama avec flèches de navigation

Réseau du Haut-Chablais :

Article chablais.png
Sous forme de diaporama à puces

Clichy-sous-Bois :

Article clichy.png
Sous forme de diaporama à miniatures

Médiathèque de Loudéac :

Article loudeac.png
Sous forme de liste

Espace culturel d'Herbignac :

Liste herbignac.png

Module critiques

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 :

Critique revel.png

Réseau de Chinon Vienne et Loire :

Critique chinon.png

Module domaines

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 Corbas :

Dom corbas.png

Médiathèque de Loudéac :

Dom loudeac.png

Médiathèque de Moulins - Portail jeunesse :

Dom moulins.png

Module kiosque de notices

Les kiosques permettent de mettre en avant une sélection de documents.

Barre d'images horizontale (animée ou non)

Bibliothèque de Clichy-sous-Bois :

Kiosque clichy.png

Cover flow

Kiosque pergame.png

Cube

Kiosque pergame cube.png

Barre horizontale pleine largeur

Centre Culturel d'Herbignac :

Kiosque herbignac.png

Barre verticale

Kiosque pergame 3.png

Liste avec vignettes

Kiosque pergame 4.png

Mur

Kiosque pergame 5.png

Frise chronologique

Kiosque pergame 6.png

Module calendrier

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.

Forme classique

Réseau des médiathèques de Hénin-Carvin :

Agenda henin.png

Réseau du Carembault :

Agenda carembault.png

Calendrier en mode mur

Médiathèques de la Métropole Européenne de Lille :

Agenda lille.png

Module sitothèque

Ce module permet de mettre en valeur des listes de sites internet.

Bibliothèque départementale de la Meuse :

Sito meuse.png

Réseau des Colporteurs en Ubaye :

Sito barcelonnette.png

Module RSS

Ce module remonte les dernières informations publiées sur un site via un fil RSS.

RSS.png

Module bibliothèque

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 :

Bib lille.png

Pays Voironnais :

Voiron bib.png

Réseau Estuaire et Sillon :

Bib sillon.png

Haut-Chablais :

Chablais bib.png

Module boîte deux colonnes

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" :

Deuxcol loudeac.png


Médiathèques de Valence Romans Agglo : à gauche et à droite, deux modules "article" :

Deuxcol valence.png


Haut-Chablais : à gauche, une boîte "article" et à droite une boîte "critique" :

Deuxcol chablais.png

Module boîte de connexion

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.

Connexion dans la bannière

Bibliothèque de la Nièvre :

Connexion nievre.png

Connexion dans le menu

Haut-Chablais :

Connexion chablais.png

Connexion dans une colonne

Revel :

Connexion revel.png

Connexion masquée

Réseau du Pays Voironnais : il faut cliquer sur "Se connecter" pour faire apparaître la boîte de connexion :

Connexion voiron.png

Module boîte de recherche

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.

Recherche dans la bannière

Réseau de Hénin-Carvin :

Recherche henin.png

Recherche dans le menu

Médiathèque d'Andrézieux-Bouthéon :

Recherche andrezieux.png

Recherche dans une colonne

Réseau du Carembault :

Recherche carembault.png

Résultat de recherche

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 :

  • les informations détaillant chaque document (titre, auteur, éditeur, résumé...),
  • l'affichage des facettes (afin d'affiner la recherche),
  • les suggestions (afin de préciser la recherche),
  • des favoris utilisateurs (un domaine de prédilection),
  • un nuage de tags (pour élargir la recherche).

Mode mur

Clichy-sous-Bois :

Results clichy.png


Loudéac :

Results loudeac.png


Mode liste

Corbas :

Results corbas.png


Bibliothèque de la Nièvre :

Results nievre.png


Notice

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.

Réseau du Pays Voironnais :

Notice voiron.png


Loudéac :

Notice loudeac.png


Réseau du Carembault :

Notice carembault.png


Médiathèque de Hénin-Carvin :

Notice henin.png


Clichy-sous-Bois :

Notice clichy.png



Intégrer la charte graphique à partir des éléments fournis par la collectivité

Pré-requis à l'intégration graphique

  • avoir mis en oeuvre l'architecture dans Bokeh : profil(s), pages, menu(s), modules,
  • avoir paramétré l'affichage de la page de résultat de recherche et les notices (par type de document),
  • avoir défini les domaines, fils RSS, sitothèque,
  • avoir renseigné les lieux et bibliothèques en administration,
  • avoir rédigé les contenus (textes, photos).

A noter :

  • l'habillage du site n'implique pas le développement de nouvelles fonctions ou modules.
  • il peut être livré avec la charte graphique jusqu'à 6 styles de boîte. Plus de styles serait soumis à validation et pourrait faire l'objet de devis complémentaires.

Etapes du projet

  • envoi de tous les éléments listés dans le paragraphe ci-dessous « Eléments à fournir »,
  • validation de la conformité des éléments par le chef de projet,
  • intégration graphique (1ère itération),
  • validation client et envoi des demandes de correction,
  • intégration graphique (2nde itération),
  • validation client.


A noter :

  • tout élément non fourni ou non défini laissera place à l’élément livré, par défaut, dans Bokeh.
  • l'intégration graphique du responsive sera traitée après validation complète des étapes précédentes.

Eléments à fournir

Maquettes grises

Exemple de maquette - Page d'accueil

Il s'agit des schémas des pages ci-dessous matérialisant les modules, leur place et leur proportion :

  • page d’accueil (exemple ci-contre)
  • page de résultat de recherche
  • page d'une notice
  • pages supplémentaires (sur devis) : page par bibliothèque, page agenda, page jeunesse...


Tout élément supplémentaire permettant de préciser l'aspect graphique est le bienvenu :

  • maquettes au format PDF (voir ci-dessous)
  • URL de pages prises en exemple (avec la description précise de ce qu'il faudra appliquer)


Maquette fournie par le service communication de la mairie de Revel
























Dimensions

Largeur (en pixels) du site, des colonnes ou de tout autre élément déterminant.

Polices

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.

Codes couleur,

Au format #ABCDEF : le site Codes Couleur HTML peut vous y aider.

  • Le contraste entre la couleur du texte et la couleur de son arrière-plan doit-être suffisamment élevé.
  • L'utilitaire Colour Contrast Analyser disponible en libre téléchargement permet de tester rapidement la conformité AA ou AAA du référentiel général d'accessibilité pour les administrations (RGAA).
  • Le site Contrast-Finder permet de trouver les bons contrastes de couleur en fonction de la couleur du texte ou de la couleur du fond.
  • Il est important de spécifier très précisément les endroits où chaque couleur devra être appliquée.

Styles

Pour chaque style, spécifier les police, taille, couleur, l'espacement entre les lettres, l'espace laissé au dessus ou en dessous :

  • Titre de niveau 1
  • Titre de niveau 2
  • Texte simple

Image pour la bannière (bandeau supérieur)

Cette image n'est pas figée et il est possible de la modifier (en administration) à tout moment.

  • Format : tous les formats images standards (jpg, png, gif...).
  • Poids : pour un meilleur confort de navigation, le poids maximal accepté est de 250ko.
  • Dimensions : les dimensions sont dépendantes de la résolution du site choisie. La largeur peut être généralement de 1 000 à 1 200 pixels. La hauteur peut être variable, mais il est conseillé qu'elle n'excède pas 250 pixels afin de ne pas trop empiéter sur la partie contenu.

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.

Exemple : sur le site des Bibliothèques du Haut-Chablais, l'image de bannière est celle-ci.

Logos

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.

Exemple : sur le site de Gières, le logo mène sur le site de la ville de Gières.

Image de fond

  • Format : tous les formats images standards (jpg, png, gif...).
  • Poids : pour un meilleur confort de navigation, le poids maximal accepté est de 250ko.
  • Dimensions : les dimensions sont dépendantes de la résolution du site choisie. La largeur peut être généralement de 1 000 à 1 200 pixels.
Exemple : à Revel, l'image de fond est celle-ci.
Exemple : à Andrézieux-Bouthéon, l'image de fond est celle-ci.

Toutes images déterminantes

Carte vy.jpg
  • cartes : dans le Haut-Chablais, la carte est non interactive.
  • cartes interactives : dans le 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 : à Sequedin, l'image de titre des boîtes "Venir en médiathèque" et "Agenda" est : Sequedin bulle.png
  • domaines (genres par exemple) : les images symbolisant les axes de recherche dans le catalogue (domaines) peuvent se présenter de plusieurs manières : à Corbas, il s'agit de couvertures, dans le Haut-Chablais, de pictogrammes, à Andrézieux-Bouthéon, d' images. Attention, dans le cas des domaines, il est vivement conseillé d'utiliser des images de même taille.




Icônes (pictogrammes)

Pied de page



Réalisation d'une maquette graphique et intégration de cette dernière

Passage en responsive d'un Bokeh standard

(En cours de rédaction FC)

Passage en responsive =

  • page d'accueil :
    • bannière,
    • boîte de connexion,
    • boîte de recherche,
    • menu horizontal,
    • boîtes de la colonne gauche,
    • boîtes de la colonne principale.

Etant entendu que l'affichage de ces éléments, en responsive, se fera dans cet ordre.

  • page de résultat de recherche,
  • page d'une notice.


Passage en responsive d'un Bokeh charté

Site hébergé et maintenu par AFI et BibLibre et enrichi par la communauté de Bokeh.