Liste d'articles
Attestation de conformité au RGAA
Qu’est-ce que l’accessibilité numérique ?
Un site web accessible est un site qui permet à tous les internautes d’accéder à ses contenus sans difficulté, y compris les personnes qui présentent un handicap et utilisent des logiciels ou matériels spécialisés.
Un site accessible permet par exemple de :
- Naviguer avec des synthèses vocales ou des plages braille (notamment utilisées par les internautes aveugles ou malvoyants).
- Personnaliser l’affichage du site selon ses besoins (grossissement des caractères, modification des couleurs).
- Naviguer sans utiliser la souris, avec le clavier uniquement ou via un écran tactile.
Adresse du site et date de réalisation
La déclaration de conformité du site https://mediatheques.cca.bzh a été établie le 21 mars 2024.
Version du RGAA de référence
La version utilisée pour réaliser les tests est la version 4.0 du RGAA.
Identité du déclarant
Agence Française Informatique
Technologies utilisées sur le site
HTML5
CSS
JavaScript
PHP
Outils utilisés pour l’évaluation
Asqatasun V.5
Liste des pages ayant fait l’objet de la vérification de conformité :
Analyse globale
Les niveaux visés par le cadre légal de mise en conformité des sites publics sont les niveaux A et AA du référentiel. L'analyse du site met en évidence une conformité de 79,02% au regard de ces critères.
La plus grande partie des critères d'accessibilité sont respectés. Les critères non respectés sont dus à des contraintes techniques résultant de l'utilisation du système de gestion de contenu.
Résultats détaillés des tests unitaires
Nous nous engageons à apporter régulièrement les modifications nécessaires pour maintenir, corriger et améliorer l'accessibilité de ce site.
Composants tiers dérogés
- Google Maps
- Vidéos issues d'Allociné, INA
- Calendrier javascript : il s'agit d'un composant jquery-ui natif, néanmoins son utilisation est optionnelle
- Diaporama : il s'agit d'un composant natif, néanmoins son utilisation est optionnelle
Dérogations spécifiques
- Les contenus éditoriaux profonds peuvent comporter des listes, des intertitres, des mises en gras ou italique et des images qui ne seraient pas conformes. Néanmoins, à notre connaissance, cela ne provoque aucun blocage d'accès à l'information. La reprise et la vérification de toutes les pages du site représenteraient une charge de travail disproportionnée par rapport au gain attendu.
- La validité HTML ne peut être garantie sur l'ensemble des pages, néanmoins à notre connaissance cela ne provoque aucun dysfonctionnement des aides techniques. La reprise et la vérification de toutes les pages du site représenteraient une charge de travail disproportionnée par rapport au gain attendu.
- Les vidéos n'ont pas d'audiodescription décrivant leur contenu. La bibliothèque n'est pas en mesure de fournir des audiodescriptions pour l'ensemble de ces vidéos.
- Une alternative n'est pas disponible pour l'intégralité des photos, images et liens. Ce défaut est en cours de résolution.
- Lors de la prise de focus de certains éléments de formulaire, un style spécifique est appliqué, néanmoins ce changement de style ne respecte pas les modalités prévues par le RGAA4. Ces cas particuliers seront remontés pour une évolution ultérieure du RGAA.
Droit à la compensation
Il est important de rappeler qu’en vertu de l’article 11 de la loi de février 2005, la personne handicapée a droit à la compensation des conséquences de son handicap, quelles que soient l’origine et la nature de sa déficience, son âge ou son mode de vie. De ce fait, chaque organisme a l'obligation de prendre les moyens nécessaires afin de donner accès, dans un délai raisonnable, aux informations et fonctionnalités recherchées par la personne handicapée, que le contenu fasse l'objet d'une dérogation ou non.
Nous contacter
Si vous souhaitez nous contacter pour quelques raisons que ce soit, plusieurs solutions sont à votre disposition :
Par courriel : dev-opac@afi-sa.fr
Défenseur des droits
Si vous constatez un défaut d'accessibilité vous empêchant d'accéder à un contenu ou une fonctionnalité du site, que vous nous le signalez et que vous ne parvenez pas à obtenir une réponse rapide de notre part, vous êtes en droit de faire parvenir vos doléances ou une demande de saisine au Défenseur des droits. Plusieurs moyens sont à votre disposition :
un formulaire de contact : https://formulaire.defenseurdesdroits.fr/code/afficher.php?ETAPE=accueil_2016
une adresse postale : Le Défenseur des droits - 7 rue Saint-Florentin - 75409 Paris Cedex 08
Trucs et astuces
Voici le PDF regroupant les conseils et astuces pour l'évolution du magasin de thèmes.
Les journées Bokeh
Chaque année, à l'arrivée de septembre, c'est un moment que nous attendons avec impatience : notre rendez-vous annuel qui réunit nos développeurs dans une atmosphère chaleureuse et collaborative. C'est un événement spécial où nous accueillons avec joie nos collègues de Bokeh et de BibLibre, dans le but de partager nos expériences, nos astuces, et de contribuer ensemble à l'évolution de notre produit.
Nous avons la chance de nous retrouver, en moyenne, avec une cinquantaine de participants, souvent dans nos locaux d'Annecy, pour une journée riche en échanges et en apprentissages. Notre objectif est simple : faire de cet événement une expérience enrichissante pour chacun, où nous pouvons tous contribuer et apprendre les uns des autres.
Ces journées spéciales sont l'occasion idéale pour se tenir informés des dernières nouveautés de la prochaine version stable, peaufiner la documentation, discuter des traductions et des développements à venir, et bien sûr, pour contribuer activement au projet. C'est aussi le moment parfait pour partager nos pratiques, demander de l'aide en cas de besoin, et découvrir comment intégrer ou perfectionner l'utilisation de Bokeh sur nos sites.
En somme, c'est bien plus qu'un simple événement professionnel ; c'est un moment où notre équipe se rassemble, se renforce, et avance ensemble vers de nouveaux défis.
Le Hackfest, c'est quoi ?
Le Hackfest est un événement qui rassemble des passionnés de technologie, de programmation et de sécurité informatique pour collaborer sur des projets, partager des connaissances et participer à des défis. C'est généralement une compétition amicale où les participants travaillent en équipe ou individuellement pour résoudre des problèmes techniques, développer des logiciels ou des applications, ou encore découvrir et exploiter des failles de sécurité dans des systèmes informatiques, le tout dans un cadre éthique et respectueux. Le Hackfest peut également inclure des conférences, des ateliers et des présentations sur des sujets liés à la technologie et à la sécurité. C'est une opportunité pour les participants d'apprendre, de réseauter et de s'amuser tout en relevant des défis techniques.
Nous vous invitons à rejoindre notre Google Groupes.
Ce groupe est le lieu idéal pour rester informé(e) des dernières mises à jour, poser des questions et échanger avec d'autres utilisateurs, y compris des professionnels de chez AFI, tout comme vous. Rejoignez-nous dès maintenant pour rester connecté(e) !
Organisation de webinaires
Nous sommes ravis de vous annoncer que des webinaires passionnants sont en préparation et seront bientôt disponibles. Nous vous informerons dès que les détails seront confirmés. Ces sessions nous offriront l'opportunité de partager des bonnes pratiques, de réviser des fondamentaux et d'échanger sur les évolutions à venir, tous ensemble.
Restez à l'écoute pour plus d'informations !
Nous espérons que vous appréciez votre expérience avec vos nouveaux portails de bibliothèque autant que nous avons aimé les créer pour vous. Votre avis compte énormément pour nous. Nous aimerions entendre vos pensées, vos suggestions et même vos critiques. Votre contribution nous permettra de nous assurer que nos services correspondent parfaitement à vos attentes et à vos besoins en matière de lecture. Veuillez prendre un instant pour nous faire part de vos réflexions par ce formulaire ci-dessous. Vos retours personnels nous aident à façonner l'avenir de notre bibliothèque pour vous offrir une expérience de lecture encore plus enrichissante.
Modèles d'impressions
Interface d'administration : création du modèle
Pour pouvoir imprimer un résultat de recherche, une notice ou des articles nous avons besoin d'un modèle d'impression.
- Dans l'interface d'administration de Bokeh , cliquer sur Modèles d'impressions" puis "Créer" ou "Générer"
- "Créer" vous permet de faire votre modèle d'impression à partir d'un formulaire vide.
- "Générer" va créer automatiquement des modèles utilisables tout de suite.
Vous trouverez différents modèles d'impressions sur ce wiki dans la catégorie Modèles d'impression.
Création d'un modèle pour les résultats de recherche
- Associer le modèle à Résultats de recherche
- Editer en cliquant sur Source
- Saisir le code correspondant au modèle
Par exemple :
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <div>{notices.each[ <div style="overflow:hidden;float:left; clear:both; padding: 20px; margin: 20px 0; border: 2px solid black;width:190mm;"> <img src="{fetch_url_vignette}" style="width:81;height:115;float:left; margin-right:15px" /> <strong>{titre_et_sous_titre}</strong><br /> <i>{type_doc_label}</i><br /> Année: {annee}<br /> Auteur: {auteur_principal}<br /> Editeur: {editeur}<br /> Description: {resume}</div> ]}</div> </div>
Syntaxe du modèle
Pour les résultat de recherche, il faut utiliser "notices" pour parcourir chaque notice
L'exemple suivant affichera tous les titres des notices :
{notices.each[ {titre_principal} ]}
Liste des mots clés disponibles : Impressions_:_Vocabulaire_de_fusion
Création d'un modèle pour une notice
- Associer le modèle à Page de notice
- Modifier en cliquant sur Source
- Saisir le code correspondant au modèle
Exemple:
<h1>{notice.titre_principal}</h1> <h2>{notice.auteur_principal}</h2> <dl> <dt>Editeur:</dt> <dd>{notice.editeur}</dd> </dl> <p> {notice.resume} </p>
Liste des mots clés disponibles : 'notice.type_doc', 'notice.annee' , 'notice.isbn', 'notice.ean', 'notice.titres', 'notice.auteurs', 'notice.other_terms' , 'notice.editeur', 'notice.collection' , 'notice.date_maj' , 'notice.collection' , 'notice.matieres' , 'notice.dewey' , 'notice.tome_alpha' , 'notice.clef_alpha' , 'notice.clef_chapeau' , 'notice.clef_oeuvre' , 'notice.facettes' , 'notice.url_vignette' , 'notice.url_image' , 'notice.date_creation' , 'notice.created_at' , 'notice.type', 'notice.file_content' , 'notice.titre_principal', 'notice.auteur_principal, 'notice.avis', 'notice.moderated_avis', 'notice.resume', 'notice.editeur', 'notice.langueCodes', 'notice.first_exemplaire', 'notice.data_map',
Pour atteindre les données exemplaires, vous pouvez utiliser le 'notice.first_exemplaire' qui remontra les données du premier des exemplaires. Cela peut permettre de récupérer les données telles que la cote, l'emplacement, le genre, la section...
Voici un exemple de modèle d'impression de résultat de recherche, qui vient récupérer des informations exemplaire :
<meta http-equiv="Content-Type" content="text/html" charset="utf-8"> <div style="page-break-inside:auto">{notices.each[ <div style="page-break-inside:avoid; page-break-after:auto;overflow:hidden;float:left;clear:both;padding: 0.5em;margin: 0.5em 0;border: 1px solid black;width:190mm;box-shadow: 0px 0px 5px;"> <div style="width:120px;height:160px;float:left; margin-right:15px;overflow: hidden;"><img alt="" src="{fetch_url_vignette}" style="margin: auto; display: block; height: 100%;" /></div> <p><a href="{absolute_url}"><strong>{titre_et_sous_titre}</strong></a></p> <p><span>Auteur : {auteur_principal}</span><br /> <i>{type_doc_label}</i><br /> <span>Année : {annee}</span><br /> <br /> <span>Editeur : {editeur}</span></p> <p><span>Cote : {first_exemplaire.best_cote}</span><br /> <span>Emplacement : {first_exemplaire.location_label}</span><br /> <span>Section : {first_exemplaire.section_label}</span><br /> <span>Genre : {first_exemplaire.kind_label}</span><br /> <span>Statut : {first_exemplaire.activite}</span></p> </div> ]}</div>
Choix de l'éditeur
Historiquement l'interface de modification des modèles d'impressions se base sur CKEditor (à l'instar de l'éditeur des articles). Si vous utilisez principalement la modification de code HTML, vous pouvez utiliser l'éditeur CodeMirror via la variable d'administration PRINT_MODELS_EDITOR.
Création d'un modèle pour l'impression d'un agenda
- Associer le modèle à "Page d'articles"
- Editer en cliquant sur "Source"
- Saisir le code correspondant au modèle
Par exemple :
<style type="text/css"> @page {margin: 0;} </style> <div style="page-break-inside:auto;"> {articles.each[ <div style="page-break-inside:avoid; page-break-after:auto;overflow:hidden;float:left; clear:both; padding: 20px; margin: 20px 0; border: 2px solid black;width:190mm;"> <strong>Article: {titre}</strong> <br /> dates: {debut}- {fin} <br /> {contenu} </div> ]} </div>
Création d'un modèle pour l'impression de la liste des prêts
- Associer le modèle à "Liste de prêts"
- Editer en cliquant sur "Source"
- Saisir le code correspondant au modèle
- Liste des champs disponibles : http://wiki.bokeh-library-portal.org/index.php?title=Impressions_:_Vocabulaire_de_fusion#pr%C3%AAt
{loans.each[ <div> <p><strong>{title}<span>{author}</span></strong><br /> Code-Barres : {bar_code}<br /> Emprunté par : {loaned_by} Date de prêt : {issue_date} Dates de retour prévu : {return_date}</p> </div> ]}
Affichage
Impression d'un résultat de recherche
- Une fois le modèle créé on peut faire une recherche sur la partie publique de Bokeh. Le lien Imprimer doit alors s'afficher :
Attention : Seul la page en cours sera imprimée, l'ordre selectionné est respecté
- Pour le modèle précédement créé on peut obtenir la bibliographie d'un auteur (ici Virginie Despentes)
Impression d'une page agenda
- Une fois le modèle créé on peut afficher la page agenda. Le lien "Imprimer" doit alors s'afficher :
- Pour le modèle précédement créé on peut obtenir l'affichage de l'agenda
Administration des boîtes : onglets thème et visibilité (experts seulement)
L'onglet Thème et Visibilité sont apparant lorsque vous avez activé le "Niveau expert".
Lorsque vous ajouter une boite vous pouvez choisir du mode d'affichage de celle-ci.
Lorsque vous cliquez sur l'icône "clé à molette" -> Modifier la configuration de la boite.
Une fenêtre apparaît. Celle-si sera différente en fonction des boites choisies précédemment et si le mode expert a été cocher ou pas.
Thème
Afficher le titre :
Affiche le contenu se trouvant dans "titre de la boite".
Encadrer le contenu :
Découpe le contenu de la boite en trois parties : le titre, le contenu et le pied de la boite.
Afficher le pied :
Affiche le contenu se trouvant dans l'onglet "dissémination".
Nombre de mots pour la description :
Affiche le nombre de mot écrit dans le champs.
Par défaut, Bokeh n'affiche que 20 mots.
Autoriser les balises HTML dans la description :
Affiche la description comme écrit dans l'article.
Affichage du contenu désynchronisé :
...
Visibilité
Visible aux tailles :
N'affiche la boite que si les cases sont cochées.
Ex : Si nous voulons que notre boite s'affiche que sur moyen et grand écran, ont coche les cases moyennes, grande et très grande.
Inversement, si l'on veut que la boite ne s'affiche que sur petit écran, ont coche les cases très petites et petites.
Par défaut, Bokeh cochera toutes les cases.
Visible lorsque la boite sélectionnée n'est plus à l'écran :
N'affiche la boite que lorsque une autre boite dans "Division bannière, division principale, division pied de page" est sélectionnée.
Ex : Si l'on a une bannière (image, authentification, menu, recherche) et que l'on veux un menu compact (image, menu et authentification sur une même ligne) visible seulement au scroll.
On créer un menu compact que l'on mettra en bas de la bannière et l'on sélectionne l'élément le plus en bas de la bannière (ex: fil d'ariane)
Index, résultat de recherche, espace abonné, articles, agenda, bibliothèque, avis, authentification :
N'affiche la boite dans les pages suivantes que lorsque les éléments sont sélectionnées.
Par défaut, Bokeh ne cochera que index.
Mise à jour de la charte graphique
Accès au module
Pour accéder au module, vous devez cliquer sur Mise à jour de la charte graphique à partir du module administrateur (dans le bloc Mise en page)
Vous arrivez sur la page de mise à jour.
Dans la partie thèmes installés, par défaut Bokeh possède "etalon".
Dans la partie ajouter un thème, ajouter le nom du client que vous avez créé dans le git.
Cliquer sur valider.
Cliquer sur Demander la mise à jour.
Pour retrouver la documentation complète allez dans Wikipédia Bokeh > Tout savoir sur Bokeh > Documentation technique > Installation client GIT.
Dans la partie thèmes installés, vous verrez alors apparaître la liaison entre Bokeh et le git.
À gauche, dans la partie gestionnaires de contenu, cliquer sur Explorateur de fichiers.
Vous verrez apparaître un nouveau dossier skins possédant tout le contenu de votre dossier sur le git.
Ex ici : bokeh-portal
Et voila l'installation est terminée ! Vous êtes maintenant prêts à commencer votre intégration ! :)
Pour récupérer les images et autres documents c'est la même chose qu'en passant par les userfiles.
Activation du mode expert
Cliquez sur Administration (boite)
Cliquez sur Niveau expert
Les onglets Sélection et Affichage n'ont pas de changement.
Onglet Style :
Non-expert :
Expert :
Onglet Dissémination :
Non-expert :
Expert :
Onglet Adaptabilité :
Non-expert :
Expert :
Listes de prêts et réservation responsive (CSS)
Voici le code qui permet de transformer les tableaux de la zone "Mon compte" en liste afin d'avoir un meilleur affichage sur les terminaux mobiles
Avant ajout des lignes CSS
Après ajout des ligne CSS
Lignes à recopier dans votre éditeur CSS
@media screen and (max-device-width: 1024px) { /*responsive tableaux compte lecteur*/ /*démentellement du tableau et centrage des textes*/ #borrower_loans tbody, table.reservations tbody, .tablesorter-default tbody { display: grid; text-align:center; } /* transformation des colonnes du tableau en lignes*/ #borrower_loans tbody tr, table.reservations tbody tr, .tablesorter-default tbody tr { width: auto; display: inline-grid; } /*centrer le nom de l'auteur dans liste réservation*/ table.reservations td:nth-child(5) { text-align: center; } /*centrer les images dans les fiches de prêts et réservations*/ #borrower_loans tbody img, table.reservations tbody img, #borrower_loans tbody .nothumbnail_wrapper, table.reservations tbody .nothumbnail_wrapper { width: 50% !important; margin: 0 auto; } /* désactive la règle ci dessus sur l'image de désinscription*/ table.reservations tbody a img { width:auto!important; } /*masquer les entêtes de tableaux*/ .tablesorter-headerRow { display: none; } /*centrer nom de l'emprunteur et réservataire*/ table.loans td:first-child, table.reservations td:first-child { width: auto; } }
Éditeur CSS
Bokeh dispose d'un éditeur CSS qui vous permet de modifier dynamiquement l'apparence de votre portail.
Chaque profil et page peuvent disposer d'un CSS personnalisé.
Pour ouvrir l'éditeur CSS, en tant qu'administrateur, rendez-vous sur la page que vous souhaitez personnaliser.
Activez les outils d'administration en activant l'éditeur dans le menu d'administration en haut à gauche :
L'éditeur CSS applique en temps réel les modifications. Vous devez cependant sauvegarder vos modifications une fois que vous êtes satisfait du résultat.
Je vous invite à vous rendre sur la page ci-dessous pour plus d'informations sur les classes CSS :
http://wiki.bokeh-library-portal.org/index.php?title=Classes_CSS
Cacher les paniers (CSS)
Pour masquer les paniers dans la fiche lecteur :
/*masquer le panier dans le résultat de recherche*/ .vignette_lien_panier { display: none; } /*masquer le panier dans la notice*/ a.panier { display:none; } /*masquer le panier dans le compte lecteur*/ .abonneFiche.panier { display: none; }
Cacher les liens vers les réseaux sociaux (CSS)
div[id^="reseaux-sociaux-"] { display:none }
Cacher les dates des articles (CSS)
span.calendar_event_date { display : none }
Cacher le code embed des kiosques (CSS)
.embedcode { display: none; }
Cacher la date des avis (CSS)
.auteur_critique span { display: none; }
Adapter liste en accordéon aux tailles des articles (CSS)
.ui-accordion-content.ui-helper-reset.ui-widget-content.ui-corner-bottom.ui-accordion-content-active { height: auto !important; }
Géolocalisation de contenu
Les boîtes kiosques de notices et articles permettent d'afficher les documents géolocalisés sur une carte interactive. Cette fonctionnalité n'est actuellement disponible qu'avec le magasin de thèmes
Démonstration en vidéo
Géolocalisation des notices et articles
Interface avec Nanook
Notices
La géolocalisation des notices s'appuie sur la zone 123:
- f : latitude
- d : longitude
et la zone 941:
- d : latitude
- f : longitude
Vous pouvez configurer d'autres zones / champs où récupérer les données via le paramétrage du kiosque (voir capture ci-dessous).
La boîte kiosque de notices peut alors disposer les documents sous forme de carte géographique. Le paramètre apparaît dans la configuration, onglet Affichage :
La carte affichée regroupe les points proches. Quand on clique sur le point, le document s'affiche selon le paramètre *Rendu d'un document*
Articles
Lorsqu'un article est associé à un lieu qui dispose de coordonnées, la boîte article peut aussi afficher la liste sous forme de carte géographique.
Fiche bibliothèque
Entête de la bibliothèque
L'entête de la fiche médiathèque se compose de sa couverture, son nom, l'adresse, le numéro de téléphone, le mail et des champs personnalisés de types case à cocher, date et sélection.
Une navigation par onglet est disponible. Les onglets sont : tout, ouvertures, informations, nouveautés, carte, l'agenda, l'équipe.
Tout
L'onglet Tout reprend tous les affichages des onglets dans une colonne. Il permet de trouver toutes les informations sur une page.
Ouvertures
L'onglet Ouvertures reprend les horaires de la bibliothèque ainsi que la notion d'ouvert / fermée par rapport à l'heure actuelle. Voir le paramètrage des horaires d'ouvertures
Nouveautés
L'onglet Nouveautés affiche un kiosque de notices trié par date de nouveauté et filtré par la bibliothèque. L'affichage et la sélection des notices peut-être personnalisé via la clé à molette.
Carte
L'onglet Carte affiche une carte interactive OpenStreetMap sur laquelle il y a l'emplacement de la bibliothèque. L'emplacement de la bibliothèque est un lieu.
Informations
L'onglet Informations affiche l'adresse de la bibliothèque son numéro de téléphone et son émail.
On peut trouver également des informations sur le fond avec le nombre d'usagers et le nombre de documents.
L'onglet Informations peu être enrichie avec des champs personnalisés.
L'agenda
L'onglet Agenda propose tous les événements qui ont le même lieu que la bibliothèque.
L'équipe
L'onglet équipe affiche tous les comptes professionnels rattachés à cette bibliothèque.
Si aucun professionnel n'est attaché à une bibliothèque se sont tous les comptes professionnels qui seront affichés.
Un compte professionnel affichera son image, son prénom, son nombre d'articles rédigés, son nombre de sélections enregistrées, son nombre d'avis rédigés ainsi que son nombre de domaines créé.