• Aujourd’hui on livre une visite virtuelle pour l’exposition Les derniers impressionnistes du Musée de Lodève :
    https://23forward.com/derniersimpressionnistes

    Lodève c’est une petite ville à 35 minutes au nord-ouest de #Montpellier, à l’entrée du Larzac, avec un très beau musée, où se tiennent des expositions temporaires épatantes. Malheureusement l’exposition de cet hiver est restée quasiment tout le temps fermée au public, et donc le musée nous a demandé de réaliser une visite virtuelle avec des photos panoramiques à 360°.

    C’est donc réalisé avec ma plateforme sous #SPIP, telle qu’utilisée par ailleurs pour Fabre dans mon canapé, le mini-site concerné étant « aspiré » et transformé en site statique.

    #shameless_autopromo

  • 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

    • Non, pas que amour de l’art : certes initialement la démo était déjà très complète, mais ensuite ce qu’on livre à Fabre c’est devenu un vrai boulot. Mais de manière assez amusante, ce que je détaille dans la seconde partie, ajouté après qu’on a signé avec Fabre (audioguides, aspiration de la base complète, panoramiques 360°…), c’est plus ou moins en bonus, parce que je me suis rendu compte que je pouvais le faire, et que dans la logique « PoC », c’est aussi bien de faire un peu étalage de ce que la plateforme peut produire en très peu de temps.

    • @vazy : Proof of Concept. C’est une démo, normalement très préliminaire, pour tester le fait que ton idée est réalisable et que ça vaut le coup de continuer à la développer. Là on était déjà nettement plus avancé que pour un « PoC », j’avais en fait un outil complet et fonctionnel.

      C’est largement la difficulté de mon boulot : comme je fais du « sur mesure », on répond à des demandes des clients, et c’est dans ces demandes qu’il faut qu’on arrive à proposer des choses originales et rigolotes, mais en réponse à une demande déjà écrite noir sur blanc par le client (avec parfois quelqu’un qui a déjà totalement délimité ce que le client attend dans la rédaction du cahier des charges). Tu ne peux jamais pousser tes propres concepts au bout dans ces conditions.

      Et donc, de temps en temps, j’ai besoin (ou envie) de monter une démonstration complète d’un nouvel outil, ou d’une nouvelle manière d’assembler mes outils, pour en faire une démonstration complète. Parce qu’il n’y a en gros que comme ça que je peux tenter de convaincre quelqu’un de me l’acheter (avec ses variantes et adaptations, mais sur la base de ce concept).

      Par exemple il y a quelques années, je me suis développé plusieurs outils pour réaliser des « longforms » dans SPIP. Et quand j’expliquais, personne ne voyait l’intérêt, ni à quoi ça ressemblerait. Surtout que je ne voulais pas faire les trucs à la mode du moment, avec plein de parallaxes, parce que je n’aimais pas ça du tout (ça fait vomir). Bref une semaine je me suis pris un article de Wikipedia sur la NASA, et j’en ai fait un {très long} longform avec d’énormes images. Le côté PoC : l’outil fonctionne, on voit que l’usage est pertinent (on a envie de lire un truc très long, parce que c’est beau et rythmé), je teste les aspects techniques (les images responsive recadrées différemment selon les écrans par exemple). Et quand tu montres au client, il se dit « ah oui, j’ai très envie de ça ».

  • Le Musée Fabre de #montpellier nous a demandé de mettre en ligne les fichiers de la table que nous avions réalisée pour l’exposition « Dans le secret des œuvres d’art » en 2018 :
    https://museefabresecretdesoeuvresdart.fr

    Sur notre site, on avait présenté cette table avec une petit vidéo familiale :
    https://23forward.com/Musee-Fabre-Montpellier-280

    C’est entièrement fait avec #SPIP, mais pour le coup, le site mis en ligne est une aspiration HTML/CSS/Javascript de ce site. Il n’y a donc pas de SPIP derrière sur ce serveur.

    #shameless_autopromo

  • Comme on a transformé Paris-Beyrouth en SAS, sous le nom de 23FORWARD, avec Diala, on est en train de travailler à faire évoluer le graphisme de notre site professionnel (#shameless_autopromo donc) :
    https://23forward.com

    Évidemment que c’est du SPIP (tu penses bien !).

    Le petit détail que je viens de mettre en place : une sélection de 9 articles apparaissant avec un effet de perspective, avec des « écrans » dotés d’une petite épaisseur, tout ça en CSS 3D :

    Sinon : oui je sais, l’animation du survol est un peu bugguée sous Firefox.

    Les CSS 3D c’est pas nouveau du tout, mais pour faire des réglages précis, c’est la croix et la bannière – et les rendus ne sont pas terriblement lissés, ce qui est tout de même un comble en 2019. Mais bon, l’effet est tout de même très sympa : normalement les gens font ça en Photoshop, et là c’est du pur SPIP, ça se calcule tout seul et c’est interactif (et encore quelques heures là-dessus et je fais une version smartphone plus jolie).

  • Grosse modification sur mon #plugin #SPIP image_responsive :
    https://23forward.com/Plugin-SPIP-Image-responsive

    Sur écran haute définition (« Retina » dans le jargon Apple), l’image était auparavant une version ultra-compressée (Jpeg à 30%), histoire de gagner énormément de poids sur les fichiers. Mais depuis, la qualité des écrans a encore beaucoup progressé, et même avec des pixels deux fois plus petit, un JPEG à 30% c’est assez dégueulasse.

    Du coup, par défaut désormais sur écran Retina le plugin utilise la version « normale » de l’image, mais deux fois plus grande.

    Si on veut rester avec le comportement précédent (JPEG ultra-compressé sur écran Retina), on ajoutera :

    define("_IMAGE_RESPONSIVE_RETINA_HQ", false);

    dans son fichier de fonctions.