Les équipes du musée Fabre ont conçu le site « Fabre dans mon canapé » en pensant à tous les visiteurs virtuels qui ne peuvent voyager jusqu’à Montpellier, aux scolaires qui ne peuvent pas se déplacer et plus largement à toutes celles et ceux qui sont empêchés de venir au musée.
Version numérique d’un musée « hors les murs », ce site vous offre des visites complètes des collections et des expositions, mais aussi des récits, des documentaires, des supports pédagogiques, ou encore des jeux et des activités pour les plus jeunes.
La plateforme offre une multitude de formats de présentation différents, permettant ainsi de proposer des contenus variés, riches, et à chaque fois adaptés au projet du musée.
1. des « accrochages virtuels », qui respectent les dimensions relatives des œuvres, et même leurs emplacements dans les salles :
Notez le petit personnage (qui change à chaque chargement) qui permet d’indiquer l’échelle des tableaux dans la salle. (Il y a quelques easter eggs cachés, là…)
C’est un outil très pratique, parce qu’il permet de créer un « accrochage » rapidement, sans nécessiter des outils lourds à mettre en place. Il suffit d’avoir les cartels des œuvres, idéalement avec leurs dimensions, pour que ça se fabrique automatiquement.
2. nos fameux “longforms”, qui permettent de créer des présentations évoquant les magazines papier, qui donnent vraiment envie de lire des textes longs, et qui s’adaptent à plein de types de contenus différents, et mêmes à des ambiances graphiques différentes :
- https://fabre.montpellier3m.fr/L-histoire-de-la-collection-italienne
- https://fabre.montpellier3m.fr/Art-et-anatomie
- https://fabre.montpellier3m.fr/Soulages-a-Montpellier
- https://fabre.montpellier3m.fr/Le-Realisme
Ça permet même de reproduire des fiches pédagogiques autour des paysages et des émotions, avec des maquettes assez particulières : https://fabre.montpellier3m.fr/Paysage-etat-d-ame
3. des vidéos, présentées en plein écran pour que ce soit un peu spectaculaire :
Au lancement du site, nous avons encore enrichi la plateforme par rapport à ce qui était prévu initialement.
4. des audioguides. Comme j’ai réussi à aspirer l’intégralité de la base de données du musée, j’ai récupéré les fichiers MP3 des audioguides associés aux œuvres. On a donc décidé de faciliter l’utilisation du nouveau site comme support alternatif aux audioguides prêtés par le musée. Les gens qui craindraient d’emprunter du matériel pour raison sanitaire peuvent ainsi utiliser leur smartphone pour visiter le musée. On a du coup monté une page dédiée, qui ne présente que les éléments qui servent de support de visite en salle :
5. tout… Comme j’ai tout aspiré, du coup ça n’était pas (tellement) plus compliqué de proposer l’intégralité des salles du musée. Une cinquantaine de salles, plus de 800 œuvres…
Et voilà, finalement, c’est un peu un monstre quand même…
6. une frise chronologique. Puisqu’on a toutes les œuvres, et qu’elles sont datées, pourquoi ne pas faire une belle frise chronologique ?
C’est du pur SPIP, et la maquette est en pur CSS. Le scroll horizontal passe par Javascript, mais la maquette compliquée des petites cases est calculée côté serveur, et l’affichage se fait sans une ligne de JS.
7. automatiser les scrolls infinis. J’en ai profité pour me développer un javascript personnel qui fabrique et gère tout automatiquement les scrolls horizontaux infinis, éventuellement avec des flèches de navigation gauche/droite, et une barre de scroll en dessous, que j’utilise à de nombreux endroits du site (dont les accrochages virtuels et la frise chronologique). Dans mon code, il suffit que j’attribue la classe `.loop_auto` à un élément pour qu’il se transforme en scroll infini.
8. Et cerise sur le gâteau : des visites virtuelles avec des panoramiques 360, avec des cartels interactifs, une navigation de salle en salle, directement dans SPIP :
qui se gère dans l’espace privé de SPIP (avec des glisser-déposer pour définir les zones) :
9. Vignette automatiques pour les PDF. Les fichiers PDF insérés dans les articles ont leur vignette calculée automatiquement par le serveur (et c’est bien pratique…).
10. Easter egg en page d’accueil. L’image du haut de page, qui illustre « Fabre dans mon canapé », ce n’est pas qu’une image : les tableaux sont choisis aléatoirement toutes les cinq minutes, ils sont cliquables, et c’est même un scroll horizontal infini…
11. Easter egg : la page d’erreur 404. Jarnicoton ! Elle est trop cool… Le fond est un tableau différent à chaque fois, choisi aléatoirement dans les collections du musée. Et à chaque rechargement de page, tu auras droit à un juron différent… (Du coup je me demande si ce n’est pas ma page préférée du site…)
