Différences entre versions de « Intégration graphique »

De WIKI-BOKEH
Aller à : navigation, rechercher
(24 versions intermédiaires par 2 utilisateurs non affichées)
Ligne 1 : Ligne 1 :
 
==Penser son portail documentaire (Ateliers UX)==
 
==Penser son portail documentaire (Ateliers UX)==
 +
  
 
==Définir l'architecture du site==
 
==Définir l'architecture du site==
Ligne 21 : Ligne 22 :
 
* Exemples de page d'accueil sur une colonne unique : [http://espace-culturel.herbignac.com/ Herbignac], 1 000 pixels ; [http://www.bibliotheques.hautchablais.fr/ Haut-Chablais] et [http://mediatheque.lekiosque-poleculturel.fr Andrézieux-Bouthéon], 1 200 pixels''.
 
* Exemples de page d'accueil sur une colonne unique : [http://espace-culturel.herbignac.com/ Herbignac], 1 000 pixels ; [http://www.bibliotheques.hautchablais.fr/ Haut-Chablais] et [http://mediatheque.lekiosque-poleculturel.fr Andrézieux-Bouthéon], 1 200 pixels''.
 
* Exemples de page d'accueil sur deux colonnes : [http://mediatheques.saintdizierderetblaise.fr/ Réseau de Saint-Dizier et Wassy], 1 100 pixels dont 300 à gauche, réseau de [http://www.bibliotheques.cc-loiresillon.fr/ Loire et Sillon], 1 600 pixels dont 24% à gauche.''
 
* Exemples de page d'accueil sur deux colonnes : [http://mediatheques.saintdizierderetblaise.fr/ Réseau de Saint-Dizier et Wassy], 1 100 pixels dont 300 à gauche, réseau de [http://www.bibliotheques.cc-loiresillon.fr/ Loire et Sillon], 1 600 pixels dont 24% à gauche.''
 +
* Exemples de page d'accueil sur trois colonnes : [http://www.astrolabe-melun.fr/ Astrolabe de Melun], 1 000 pixels,  [http://mediatheques.valenceromansagglo.fr/ Réseau Valence/Romans], 1 200 pixels.
  
 
===Menus et navigation===
 
===Menus et navigation===
Ligne 30 : Ligne 32 :
 
* le menu peut être "caché" et ne se développer en totalité que suite à un clic : sur le site du [http://bibliotheques.vyvs.fr/index/index/id_profil/27 Val d'Hyères Val de Seine], il faut cliquer sur le bouton "Menu" afin d'accéder à son contenu.
 
* le menu peut être "caché" et ne se développer en totalité que suite à un clic : sur le site du [http://bibliotheques.vyvs.fr/index/index/id_profil/27 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 [http://bibliotheques.cc-cvl.fr/accueil Chinon Vienne et Loire].
 
* le sous-menu du menu horizontal peut s'afficher au survol de la souris comme sur le réseau de [http://bibliotheques.cc-cvl.fr/accueil Chinon Vienne et Loire].
* le menu horizontal peut être placé sous la bannière [http://mediatheque.sequedin.fr/ (Sequedin)] ou collé en haut du navigateur [http://mediatheque.lekiosque-poleculturel.fr/ (Corbas)].
+
* le menu horizontal peut être placé sous la bannière [http://mediatheque.sequedin.fr/ (Sequedin)] ou collé en haut du navigateur [http://mediatheque.lekiosque-poleculturel.fr/ (Andrézieux-Bouthéon)].
  
 
::: ''Exemple de menu vertical : dans le réseau du [http://www.mediatheques-carembault.net/?id_profil=16 Carembault], à [http://www.mediatheque-montauban.com/ Montauban].''
 
::: ''Exemple de menu vertical : dans le réseau du [http://www.mediatheques-carembault.net/?id_profil=16 Carembault], à [http://www.mediatheque-montauban.com/ Montauban].''
Ligne 239 : Ligne 241 :
  
 
[http://biblio-paysvoironnais.fr/recherche/viewnotice/expressionRecherche/poule/tri/%2A/clef/LAPOULE--DEDIEUT--SEUIL-2012-1/id/31109 Réseau du Pays Voironnais] :
 
[http://biblio-paysvoironnais.fr/recherche/viewnotice/expressionRecherche/poule/tri/%2A/clef/LAPOULE--DEDIEUT--SEUIL-2012-1/id/31109 Réseau du Pays Voironnais] :
[[Fichier:notice_voiron.png|800px[center]]
+
[[Fichier:notice_voiron.png|800px|center]]
 
<br>
 
<br>
  
 
[http://loudeac22.afi-sa.net/recherche/viewnotice/expressionRecherche/titanic/tri/%2A/clef/TITANIC--CAMERONJ--LIGHTSTORMENTERTAINMENT-1997-4/id/58242 Loudéac] :
 
[http://loudeac22.afi-sa.net/recherche/viewnotice/expressionRecherche/titanic/tri/%2A/clef/TITANIC--CAMERONJ--LIGHTSTORMENTERTAINMENT-1997-4/id/58242 Loudéac] :
[[Fichier:notice_loudeac.png|800px[center]]
+
[[Fichier:notice_loudeac.png|800px|center]]
 
<br>
 
<br>
  
 
[http://www.mediatheques-carembault.net/recherche/viewnotice/expressionRecherche/massive/tri/%2A/clef/PROTECTION--MASSIVEATTACK--CIRCA-1994-3/id/28003 Réseau du Carembault] :
 
[http://www.mediatheques-carembault.net/recherche/viewnotice/expressionRecherche/massive/tri/%2A/clef/PROTECTION--MASSIVEATTACK--CIRCA-1994-3/id/28003 Réseau du Carembault] :
[[Fichier:notice_carembault.png|800px[center]]
+
[[Fichier:notice_carembault.png|800px|center]]
 
<br>
 
<br>
  
 
[https://www.mediatheques-rcm.fr/recherche/viewnotice/expressionRecherche/rouge/tri/%2A/clef/ROUGE--POUYETM--PETITEPLUMEDECAROTTE-2014-1/id/8605412 Médiathèque de Hénin-Carvin] :
 
[https://www.mediatheques-rcm.fr/recherche/viewnotice/expressionRecherche/rouge/tri/%2A/clef/ROUGE--POUYETM--PETITEPLUMEDECAROTTE-2014-1/id/8605412 Médiathèque de Hénin-Carvin] :
[[Fichier:notice_henin.png|800px[center]]
+
[[Fichier:notice_henin.png|800px|center]]
 
<br>
 
<br>
  
 
[http://bibliotheque.clichysousbois.fr/recherche/viewnotice/expressionRecherche/course/tri/%2A/clef/LESBILLESFONTLACOURSE--BERTRANDF--ROUERGUE-2015-1/id/54409 Clichy-sous-Bois] :
 
[http://bibliotheque.clichysousbois.fr/recherche/viewnotice/expressionRecherche/course/tri/%2A/clef/LESBILLESFONTLACOURSE--BERTRANDF--ROUERGUE-2015-1/id/54409 Clichy-sous-Bois] :
Médiathèque de Hénin-Carvin] :
+
[[Fichier:notice_clichy.png|800px|center]]
[[Fichier:notice_clichy.png|800px[center]]
 
 
<br>
 
<br>
  
===Inscription à la newsletter===
+
 
  
 
==Intégrer la charte graphique à partir des éléments fournis par la collectivité==
 
==Intégrer la charte graphique à partir des éléments fournis par la collectivité==
Ligne 353 : 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.
Ligne 373 : Ligne 374 :
 
::: ''Exemple : à [http://mediatheque.lekiosque-poleculturel.fr/ Andrézieux-Bouthéon], l'image de fond est [http://mediatheque.lekiosque-poleculturel.fr/skins/andrezieux/images/fond.png celle-ci].''
 
::: ''Exemple : à [http://mediatheque.lekiosque-poleculturel.fr/ Andrézieux-Bouthéon], l'image de fond est [http://mediatheque.lekiosque-poleculturel.fr/skins/andrezieux/images/fond.png celle-ci].''
  
====Toutes images déterminantes ====
+
====Toutes images déterminantes ====  
 +
[[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://www.terroirsdangillon-bibliotheques.fr/ réseau des Terroirs d'Angillon], la carte est  interactive. Le fond de carte doit être fourni vierge et avec les noms de communes ([http://git.afi-sa.fr/opac-skins/terroirs-angillon/raw/68557b0d144ce828b204e29d6bd54aa117358ef8/images/cartedef.png voir l'image du haut)].''
+
* 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) ====
Ligne 397 : Ligne 402 :
 
* textes si nécessaire
 
* textes si nécessaire
 
* images, logos et URL des liens : ''à [http://www.mediatheque-revel.net/index/index/id_profil/86 Revel], les deux images du pied de page ([http://www.mediatheque-revel.net/skins/revel/images/facebook.PNG Suivez-nous] et [http://www.mediatheque-revel.net/skins/revel/images/logo.PNG Ville de Revel]) sont des liens.''
 
* images, logos et URL des liens : ''à [http://www.mediatheque-revel.net/index/index/id_profil/86 Revel], les deux images du pied de page ([http://www.mediatheque-revel.net/skins/revel/images/facebook.PNG Suivez-nous] et [http://www.mediatheque-revel.net/skins/revel/images/logo.PNG Ville de Revel]) sont des liens.''
 +
 +
 +
 +
  
 
==Réalisation d'une maquette graphique et intégration de cette dernière==
 
==Réalisation d'une maquette graphique et intégration de cette dernière==
 +
 +
 +
  
 
==Passage en responsive d'un Bokeh standard==
 
==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é==
 
==Passage en responsive d'un Bokeh charté==
  
[[Catégorie:Documentation_processus]]
+
 
 +
 
 +
[[Catégorie:Intégration_graphique]]

Version du 7 juin 2017 à 07:57

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é[ ]