On vient de livrer, avec Diala, le site Fabre dans mon canapé :
►https://fabre.montpellier3m.fr
On est particulièrement enthousiastes, parce que c’est un beau bébé, un concept qu’on trouve intéressant (une plateforme de musée hors-les-murs), et on espère que ça va marquer notre installation professionnelle dans la région, puisque c’est un site pour le musée de Montpellier (et qu’on a fondé notre boîte, ►https://23forward.com, à Montpellier… #shameless_autopromo)
L’idée est née, évidemment, pendant le confinement, quand les musées ont tenté de continuer à faire vivre leurs collections sur le Web, mais avec des solutions très décevantes : soit des trucs balancés sur Facebook, soit en refilant leurs collections à Google Arts & Culture.
Comme l’a fait remarquer Diala, le British Museum a un énorme site sous Drupal, parce que Drupal-c’est-bon-mangez-en, mais pour valoriser leurs collections, ils t’envoient sur Google Arts & Culture. De « notre » côté (#SPIP), notre client du Musées des Arts décoratifs (désormais nommé MAD Paris) a pu valoriser des visites virtuelles, beaucoup de contenus, pendant le confinement, – et vous savez pourquoi ? – parce que tout est sous SPIP et que depuis des années ils ont énormément de choses sympas pour présenter leurs collections dans leur site.
Alors j’ai eu l’idée de monter une démonstration d’une plateforme, sous SPIP, qui permettrait de valoriser des contenus en ligne, rapide à déployer, et qui évidemment constituerait toujours un excellent support à la fin du confinement.
J’ai donc monté une démonstration, que j’ai fait circuler, basée essentiellement sur trois formats :
1. des « accrochages virtuels », qui respectent les dimensions relatives des œuvres, et même leurs emplacements dans les salles :
▻https://fabre.montpellier3m.fr/Galerie-des-Colonnes-103
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. mes 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 :
▻https://fabre.montpellier3m.fr/Vincent-Bioules
Le dernier concept de l’outil étant de tout rendre accessible sur une unique longue page d’accueil, parce qu’on ne prévoyait pas de faire un monstre en une ou deux semaines…
–----
Avec cette démo, j’ai commencé à montrer ça à différents contacts. Tout le monde très enthousiaste, mais tout le monde avait trop d’incertitudes (est-ce que le confinement va durer ? est-ce que la priorité c’est de mettre des sous dans l’internet alors qu’on n’a même pas de masques…). Vous voyez l’idée…
Et finalement c’est le Musée Fabre, avec qui on a déjà un excellent contact (tu penses bien, mes enfants sont les vedettes des lieux, ils squattent l’endroit dès qu’il pleut), qui a décidé de monter un site sur ce modèle. Et entretemps, le musée a rouvert.
Du coup, j’ai encore enrichi la plateforme par rapport à ce qu’on fait prévu initialement.
1. 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 :
►https://fabre.montpellier3m.fr/audioguide
2. 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…
3. une frise chronologique. Puisqu’on a toutes les œuvres, et qu’elles sont datées, pourquoi ne pas faire une belle frise chronologique ?
Et donc c’est du SPIP, et ce qui est marrant, c’est que 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.
4. 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.
5. 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 :
►https://fabre.montpellier3m.fr/Salle-1-2
qui se gère dans l’espace privé de SPIP (avec des glisser-déposer pour définir les zones) :
6. 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…).
7. 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…
8. 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…)
▻https://fabre.montpellier3m.fr/dfgdfg
