• En préparation d’un (potentiel) projet avec une compagnie de théâtre dont le site fera partie intégrante de la création finale, j’ai commencé à recenser des exemples et outils (dont certains trouvé ici même) pour mettre en place une narration sur le web.

    Si vous avez des exemples et des outils à ajouter, je suis preneur.

    ______________________________________

    LES EXEMPLES

    http://www.framescollection.com/tunnelrats.html
    Peu de technique, mais une narration forte illustrée et rythmée graphiquement

    http://www.framescollection.com/manly.html
    essentiellement graphique mais peu adaptable sur mobile

    https://projects.lukehaas.me/scrollify/examples/apple
    principalement des animations visuelles et peu de texte

    https://projects.lukehaas.me/scrollify/examples/layered-scrolling
    joue principalement sur les fonds (image ou vidéos) et peu de texte

    http://computer-grrrls.gaite-lyrique.net
    joue principalement sur le rythme des blocs de contenu

    https://brest1937.kubweb.media/episode/heritage
    alterne animations et contenus textes/vidéos

    https://www.nytimes.com/interactive/2015/09/17/nyregion/st-patricks-cathedral-pope-francis-visit.html
    très simple, repose sur l’image

    https://www.liberation.fr/apps/2019/02/paris-populaire
    moins linéaire, on doit se balader sur la carte pour avoir accès aux contenus

    https://fabre.montpellier3m.fr/Correspondance d’@arno
    pour l’alternance de texte à lire (défilement vertical) et des photos des pages manuscrites (défilement horizontal)

    https://www.bloomberg.com/graphics/2015-auto-sales
    haut niveau, avec animation de #SVG et tout

    https://www.theguardian.com/us-news/ng-interactive/2015/oct/19/homan-square-chicago-police-detainees
    idem, gros niveau, The Guardian quoi

    https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)
    Site plus archivé mais tjs visible via https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

    https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
    Pour l’intro et le zoom sur le carte

    https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
    pour la navigation dans la carte

    https://www.women-in-type.com
    Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties

    https://fos200ans.fr
    Pour la double navigation immersive/cartographique et l’organisation des ressources par périodes.

    https://www.tdg.ch/inegalites-ecologiques-ultrariches-et-superpollueurs-347025086713

    https://media.lesechos.fr/infographie/tenet
    Pour la double navigation chronologique (les timelines) / géographique (les flèches sous le globe)

    https://ig.ft.com/generative-ai

    https://tympanus.net/codrops/demos/?tag=scroll
    Pas mal d’exemples (attention, il y a à boire et à manger)

    ______________________________________

    LES OUTILS

    How to implement #scrollytelling with six different libraries partagé par @fil
    https://pudding.cool/process/how-to-implement-scrollytelling

    Scrollama is a modern & lightweight #JavaScript library for scrollytelling using IntersectionObserver in favor of scroll events.
    https://github.com/russellgoldenberg/scrollama

    Scroll Btween partagé par @b_b
    Tween any CSS values on any DOM element in relation with its position into the viewport.
    https://olivier3lanc.github.io/Scroll-Btween

    Scrollify , A #jQuery plugin that assists scrolling and smoothly snaps to sections.
    https://projects.lukehaas.me/scrollify

    ScrollStory is a jQuery plugin for building scroll-based stories. Rather than doing a specific task, it aims to be a tool to help solve general problems.
    https://sjwilliams.github.io/scrollstory

    Vivus is a lightweight JavaScript class (with no dependencies) that allows you to animate SVGs, giving them the appearence of being drawn.
    https://maxwellito.github.io/vivus

    graph-scroll takes a selection of explanatory text sections and dispatches active events as different sections are scrolled into to view. These active events can be used to update a chart’s state.
    https://github.com/1wheel/graph-scroll

    enter-view . Dependency-free JavaScript library to detect when element enters into view. See demo. It uses requestAnimationFrame in favor of scroll events for less jank.
    https://github.com/russellgoldenberg/enter-view

    Projects | Knight Lab partagé par @klaus
    https://seenthis.net/messages/792645

    revealjs The HTML Presentation Framework partagé par @alexcorp en commentaire
    https://revealjs.com

    ______________________________________
    TAGS SUR SEENTHIS

    #art_directed_article / #scrollytelling, #narration et #Nouvelles_narrations / #webdoc / #longforms

    #webdev #spip_recette

  • On vient de mettre en ligne le mini-site « Hommage à Frédéric Bazille », sur la plateforme « Fabre dans mon canapé », qu’on avait lancée pour le Musée Fabre de #Montpellier :
    https://fabre.montpellier3m.fr/Hommage-a-Frederic-Bazille

    Comme tu dois le savoir désormais, c’est du #SPIP, et l’originalité à nouveau, c’est que la prestation consiste essentiellement dans la mise en ligne de contenu, plutôt que du développement Web traditionnel.

    Mais il y a tout de même quelques petits détails nouveaux qui enrichissent ma plateforme…

    – Un parcours sur une carte interactive avec des informations géolocalisées :
    https://fabre.montpellier3m.fr/Sur-les-pas-de-Frederic-Bazille-a-Montpellier

    Ça c’est un nouveau format pour la plateforme. J’avais déjà intégré la possibilité d’un parcours géolocalisé sur les longforms, où chaque partie peut être placée sur une carte :
    https://fabre.montpellier3m.fr/Moyen-age-et-Renaissance
    Ici c’est exactement la même structure d’information, mais c’est la carte plein écran qui prime pour entrer dans l’information. Un bouton de géolocalisation de l’usager permet en plus de se promener en ville en suivant la carte. (Sur smartphone, ça détecte en plus la direction dans laquelle pointe le téléphone, ce qui facilite le repérage sur la carte.)

    Et au fait : la documentation de cette page est particulièrement riche, si tu t’intéresses à #Montpellier, tu vas apprendre plein de choses…

    – Une autre interface nouvelle sur la plateforme, c’est une image en « méga-zoom », avec des hotspots :
    https://fabre.montpellier3m.fr/L-Atelier-de-la-rue-de-La-Condamine
    Ça devrait te rappeler une interface réalisée (à la main) par @philippe_de_jonckheere il y a quelques années…
    http://www.desordre.net/accessoires/peinture/bazille
    Là, évidemment, c’est du SPIP, les hotspots se placent en drag-and-drop, et les tableaux sont les fiches de la base de données des œuvres du musée.

    – Une petite visite virtuelle des salles dédiées à l’événement dans le musée :
    https://fabre.montpellier3m.fr/Visite-virtuelle
    J’ai progressé dans le traitement des images sorties de mon appareil 360° (un Ricoh Theta Z1, photos prises en HDR de 9 prises de vues), la qualité des images panoramiques est meilleure qu’au début.

    Et à nouveau, pour les « logos » des différentes pièces, j’utilise des « mini-planètes » que je calcule sur le serveur avec Imagemagick, à partir de mes images équirectangulaires.

    – Enfin plusieurs longforms documentaires. L’un d’eux est consacré à la découverte d’un tableau disparu de Bazille, « sous » un tableau inachevé présent dans les collections du musée :
    https://fabre.montpellier3m.fr/A-la-recherche-du-tableau-disparu

    Pour l’occasion, j’ai développé un petit modèle SPIP, qui me permet de configurer un slider « avant-après » intégré dans le texte de la page, pour montrer le tableau qui dévoile l’image radiographiée en dessous. (Il existe un plugin pour SPIP qui fait quelque chose de similaire, mais j’ai des besoins un peu particuliers, notamment j’impose mon propre plugin d’image_responsive, alors j’ai préféré rapidement refaire un petit truc pour mes propres besoins.)

    Voilà, c’est ma #spip_recette et #shameless_autopromo du jour.

    • @arno , je ne sais pas si c’est de votre ressort, je poste tout de même la lettre émouvante de Gaston Bazille à l’ami de son fils . J’ai mis en gras les ajouts ou changements que j’ai faits.
      https://fabre.montpellier3m.fr/Correspondance
      ““““““““““““““"
      Gaston Bazille [à Edmond Maître ?]
      2 février 1871

      Montpellier, 2 février 1871
      Cher monsieur, votre lettre de la fin de décembre m’est parvenue dans les premiers jours de janvier, je vous expédiai de suite une dépêche télégraphique, il est fort probable qu’elle ne vous soit pas parvenue. Je profite de l’armistice pour vous annoncer l’affreux malheur qui nous a frappés ; mon cher Frédéric est mort en héros, tué de deux balle s à l’attaque de Beaune-la-Rolande, le 28 novembre. Malgré l’occupation prussienne et des difficultés de tout genre, j’ai pu après dix jours, retrouver sur le champ de bataille, parfaitement intact, dans la fosse où il avait été inhumé, le corps de mon cher enfant. J’ai suivi à pied pendant cinq jours dans la neige , l’humble charrette, le seul véhicule que j’avais pu me procurer à Beaune qui portait le cercueil de ce brave soldat, le chemin de fer ne marchait qu’à Issoudin . La mort de Frédéric a été pour Montpellier un deuil public ; il était adoré dans son régiment, comme tant d’autres, il aurait pu facilement avoir un grade dans un état-major, ou attendre tranquillement ici le départ des gardes nationaux mobilisés. Il a voulu servir son pays dès le premier danger ; il est allé un mois environ en Afrique du 15 août au 15 septembre, puis un mois à Montpellier où le 3e Zouave était venu se former, une quarantaine de jours près de Besançon, enfin transporté avec tout un corps d’armée à Gien , il a été frappé quelques jours après, à la tête de son régiment, tout près des murs crénelés de Beaune la Rolande. Le 3e Zouave a été cruellement éprouvé dans cette attaque. J’ai vu à Beaune et plus tard à Montpellier bien des soldats de ce régiment ; tous étaient pleins d’admiration pour Frédéric et m’en parlaient avec les yeux pleins de larmes ; il s’était fait adorer par ses frères d’armes. Il était sergent fourrier, menant à l’attaque une partie de sa compagnie et ses derniers mots à ses soldats, l’un d’eux me les a répétés : « si nous pénétrons dans la ville, fesons (sic) nous tuer, il le faut, c’est notre métier ; mais à aucun prix ne tirons sur des maisons où il y aurait des femmes ou des enfants. »
      Grâce au froid très vif qu’il avait fait, et sur les indications des hommes requis pour enterrer les morts après la bataille, j’ai fait ouvrir la fosse où mon noble fils avait été placé avec une une vingtaine d’hommes, certain de le reconnaître. Son beau visage était aussi calme aussi pur qu’au moment où il avait été frappé ; ce fut certes un moment très affreux pour un père que de retrouver et reprendre son fils au milieu de ces cadavres ; mais aussi quelle profonde satisfaction de le revoir encore, et de le presser dans mes bras. J’ai eu comme tout le monde dans la vie des jours heureux et malheureux ; mais je ne changerai pas la plus belle journée pour celle où j’ai pu retrouver et embrasser mon fils mort.
      Vous qui le connaissiez intimement vous comprenez mieux qu’un autre la perte que nous avons faite.
      Frédéric avait tout pour lui : force, jeunesse, intelligence, talent. Il a sacrifié un brillant avenir sans hésiter une minute ; et si vous aviez vu avec quelle simplicité il a agi ! sans se faire valoir, trouvant son dévouement à son pays tout naturel. Ah oui ! c’était un noble cœur et un beau caractère.
      On nous dit pour nous consoler, à sa mère et à moi : la mort de votre fils a été glorieuse. Sans doute, mais ce n’est pas moins la mort, et jusqu’à la fin de notre vie nous plierons sous le poids de cette immense douleur.
      Quand nous serons revenu à un temps plus calme, je vous prierai , cher Monsieur, de vouloir bien nous faire parvenir toutes les toiles, toutes les œuvres que mon fils avait dans son atelier ; vous voudriez bien aussi, je vous prie, prévenir le propriétaire de l’atelier pour qu’à la fin de l’année de bail, il reprenne possession de ce lieu. Frédéric avait sans doute quelque petits comptes chez divers marchands ; vous me rendrez aussi un bien grand service, de me faire savoir ce qui leur est dû, de manière à ce que je puisse les désintéresser mais sans être trompé par eux, il me serait bien difficile de vérifier les comptes.
      Adieu, mon cher Monsieur, je connais toute l’affection que vous portiez à mon cher Frédéric, je comprends combien cette lettre vous rendra malheureux , Veuillez je vous prie, faire savoir la fatale nouvelle aux autres amis de Frédéric. Je vous embrasse de tout mon cœur,
      Gaston Bazille

    • La guerre de ’70 n’a pas eu lieu pendant mon enfance ... ;-)
      https://fabre.montpellier3m.fr/Correspondance

      TÉLÉGRAMME DE GASTON BAZILLE À EDMOND MAÎTRE LUI ANNONÇANT LA MORT DE FRÉDÉRIC
      8 janvier 1971

      https://fr.wikipedia.org/wiki/Fr%C3%A9d%C3%A9ric_Bazille#Inhumation

      Pour moi, je suis bien sûr de ne pas être tué : j’ai trop de choses à faire dans la vie », déclare-t-il à son capitaine la veille de sa mort.

      Très beau site, mais quel imbécile.

  • Encore un mini-site pour le Musée Fabre de #Montpellier : il s’agit du minisite accompagnant la nouvelle app Fabre & the City 2 lancée par le musée :
    https://fabre.montpellier3m.fr/Fabre-the-City-2

    La app, c’est donc réalisé pour une boîte locale, qui s’est lancée récemment sur le concept d’escape game géolocalisé sur smartphone en ville.

    De notre côté (#shameless_autopromo), il s’agit donc de l’intégration d’un mini-site de présentation dans notre site Fabre dans mon canapé. Comme je l’expliquais hier pour le mini-site de l’expo Pharmacopées :
    https://seenthis.net/messages/880108
    c’est la première fois qu’on vend une prestation de mise en ligne de contenu. Chose qui me plaît d’ailleurs beaucoup, puisque ça me permet de pousser les outils que j’ai développés (sous #SPIP) aussi loin que possible.

    Ici, il s’agit essentiellement de longforms. Trois principaux couvrent les « parcours » du jeu :
    https://fabre.montpellier3m.fr/Moyen-age-et-Renaissance
    https://fabre.montpellier3m.fr/Epoque-moderne
    https://fabre.montpellier3m.fr/Periode-post-revolutionnaire-XIXe-siecle

    Une petite innovation ici dans ces longforms, comme il s’agit d’endroits qui existent en ville (et que ça accompagne, justement, une application géolocalisée), c’est que chaque lieu est associé à un point de la carte, et que le scroll dans la page fait surgir une petit carte que l’on peut agrandir pour afficher le parcours de cette longform.

    L’autre petite innovation, ce sont les animations installées sur Viméo qui se déclenchent automatiquement quand on arrive à leur niveau. Et on masque complètement les contrôles de Viméo, pour donner l’impression d’une animation intégrée à la page, façon « app ». À noter cette subtilité : il faut que la vidéo soit muette pour se déclencher sans « click » de l’usager, et donc dans mon code, avant de déclencher la vidéo, je force un « mute » du volume (même si ces animations n’ont pas de son).

    Un gros morceau, ce sont les documentations plus complètes pour chacune des lieux, soit accessibles via les liens « Pour en savoir plus » des longforms précédents, soit via la rubrique dédiée :
    https://fabre.montpellier3m.fr/Pour-aller-plus-loin
    Y’a de quoi s’occuper un moment (et hop, j’ai encore appris plein de choses sur la ville d’adoption).

    Et enfin, un format nouveau : l’image panoramique à 360° dans laquelle on zoome/scroll automatiquement simplement en scrollant dans la page (ici c’est avec une illustration à 360°, mais ça fonctionne très bien avec une véritable photo panoramique) :
    https://fabre.montpellier3m.fr/Le-jardin-des-plantes

    On scroll donc verticalement, et à chaque cartel explicatif, on se déplace automatiquement dans l’image panoramique. Au lieu d’avoir une visite « libre » d’un endroit avec des hotspots (ce que je fais beaucoup sur ce site, et notamment sur Pharmacopées), on a une narration guidée (ce que j’aime beaucoup, comme format de médiation).

  • On vient de livrer, avec Mosquito, la bande dessinée numérique La Méthode Curie pour le Musée Curie
    https://lamethodecurie.fr

    C’est évidemment sous #SPIP, et c’est réalisé avec mon plugin permettant de fabriquer des cases animées dans l’espace privé (#shameless_autopromo donc).

    La Méthode Curie : la bande dessinée numérique du Musée Curie
    https://curie.fr/actualite/notre-histoire/la-methode-curie-la-bande-dessinee-numerique-du-musee-curie

    Le Musée Curie dévoile, ce lundi, un roman graphique au dessin soigné, qui décrit « La méthode curie », une méthode expérimentale, mise en place pour mesurer la radioactivité. Le fonctionnement des appareils utilisés par Marie et Pierre Curie est expliqué avec clarté, humour, et pédagogie. Ce document digital unique a pour vocation de rendre accessible l’histoire et le fonctionnement de la méthode Curie de façon ludique. Grâce à ces explications autour de ce dispositif, il s’agit aussi de rappeler que la recherche scientifique ne s’appuie pas seulement sur des intuitions scientifiques, mais sur la maîtrise d’outils technologiques. L’ambition est triple pour le musée : rendre le visiteur autonome lorsqu’il visite l’exposition sans guide ou animation, sortir des murs du musée et toucher un public plus large, notamment en interessant les adolescents et jeunes adultes.

    Depuis leur ordinateur, smartphone ou leur tablette, les lecteurs découvrent ainsi “La méthode Curie” et plongent dans l’univers augmenté de la BD. Ils ont ainsi accès à des archives numérisées, mais aussi à des textes d’approfondissement rédigés par les experts du Musée Curie. Une bonne occasion de « visiter » le Musée Curie de manière renouvelée et virtuelle, en attendant que cette méthode Curie soit accessible « in situ » lors de la réouverture du musée en septembre 2020.

    Mon outil d’animation permet d’empiler des images, et pour chaque d’indiquer une position de départ et une position d’arrivée, une durée d’animation… et tout cela est traduit en animations CSS, donc sans Javascript. Les images sont responsive pour s’adapter aux dimensions et résolutions d’écrans, et avec les nouvelles version du #plugin image_responsive, les versions WebP des images sont également fabriquées automatiquement :

    Notre première réalisation avec cet outil, c’était Le Portrait d’Esther :
    http://portrait-esther.fr

    • Ennemi de la routine - Muzeodrome - par Omer Pesquer
      https://muzeodrome.substack.com/p/ennemi-de-la-routine

      2) La bonne méthode 💻💬👌

      “A la croisée de la BD, de l’animation, du roman historique et d’une leçon de science, « la méthode Curie » tente de mettre en valeur les instruments scientifiques utilisés par les Curie et faire comprendre leurs recherches sur la radioactivité.”

      Basé sur une proposition originale d’Emmanuel Rouillier (directeur de l’atelier Mosquito), ce projet a été réalisé pour le Musée Curie dans le cadre de l’appel à projet 2019 en faveur du tourisme culturel de la Direction Régionale des Affaires Culturelles de la région Île-de-France. Les cinq auteur·e·s du projet sont : Marion Augustin (spécialiste de la médiation culturelle) - Camilla Maiani (physicienne) - Guillaume Reynard (illustrateur) - Emmanuel Rouillier (designer interactif) - Arnaud Martin (développement technique).

      Arnaud Martin a été un des pionniers du web français aussi bien du coté technique que du coté social. Je l’ai d’abord connu sous le nom de Arno* en 1997 à l’époque d’uZine et du "Manifeste du Web indépendant" (dont il est un des co-auteurs). A la mi-2000, dans le cadre des évolutions d’uZine, Arno* créait un nouveau gestionnaire de contenu Web (CMS), identifié plus tard sous le nom de SPIP (lire cet entretien avec David Dufresne, autre co-auteur du Manifeste du Web indépendant). Rarement dans la lumière médiatique, Arnaud Martin a continué de développer à sa façon des "choses" avec des technologies Web (comme l’outil de short-blogging SeenThis en 2009).

      Arnaud Martin travaille régulièrement avec Emmanuel Rouillier. En janvier 2016, ils mettaient en ligne pour les Musées d’Angers le premier épisode du "Portrait d’Esther", une bande dessinée numérique multi-dispositifs qui utilisait SPIP avec le plugin spécifique CMS COMICS. Plus 500 scènes dessinées ont ainsi été animé pour les 5 épisodes du "Portrait d’Esther" ! Le fait qu’Arnaud Martin soit le concepteur principal de SPIP lui a permis de développer ce projet singulier. “La méthode Curie”, bande dessinée « augmentée » qui s’adresse particulièrement aux adolescents et aux jeunes adultes, a été mise en mouvement avec CMS COMICS.

    • « La méthode curie » : la nouvelle bd interactive et en ligne, lancée par le musée Curie – Club Innovation & Culture CLIC France
      http://www.club-innovation-culture.fr/methode-curie-bd-interactive-musee-curie

      Le lundi 22 juin 2020, le Musée Curie a publié sur son site web un contenu numérique très original pour permettre de découvrir tout en s’amusant la vie et l’œuvre de Marie et Pierre Curie. À travers une bande dessinée numérique, à la croisée entre BD et roman graphique, ce contenu en ligne offre l’opportunité de plonger au cœur de la méthode Curie, un dispositif mis en place par les époux Curie à la fin du XIX siècle pour mesurer la radioactivité.

      Ce nouveau contenu web lamethodecurie.fr est disponible de manière autonome et via le site web du musée musee.curie.fr. Il donne l’occasion de découvrir ou revisiter avec cette fiction digitale l’histoire de cette méthode de mesure inédite et grâce à laquelle les Curie ont découvert deux nouveaux éléments chimiques radioactifs : le polonium et le radium.

  • Pour Mosquito, j’ai développé un grand puzzle pour une belle table tactile, pour l’exposition Pompéi au Grand Palais. C’était le gros événement du printemps, et figure-toi qu’on venait de livrer l’outil la semaine même où le confinement a été décrété et que tout a été arrêté. Oui, c’est ballot.

    Finalement l’exposition va avoir lieu du 1er juillet au 27 septembre. Mais dans un premier temps, par précaution, les tables tactiles ne seront pas… tactiles.

    Du coup, on vient de livrer une adaptation Web de notre application :
    https://puzzlepompei.grandpalais.fr

    C’est donc relativement responsive, mais idéalement c’était conçu pour un grand écran format 1920x1080. Avec de très bons yeux et des doigts fins, ça doit être faisable sur smartphone, mais c’est limite…

    Bref, c’est un grand puzzle en trois parties. Ce n’est pas évident, mais ce n’est pas très difficile (mes petits y arrivent très bien), c’est juste une question de patience. Noter que, par rapport à la version de la table tactile, les pièces sont directement dans la bonne orientation, parce que c’était avec deux doigts qu’on pouvait les faire tourner (sur la table, donc, les pièces sont présentées dans n’importe quelle orientation, ce qui rend le jeu nettement plus coton – mais très jouable). De plus, le multitouch est devenu mono-utilisateur, alors que la grande table pouvait être manipulée par plusieurs usagers (tu verrais nos jumeaux…).

    Et figure-toi que tout ça est géré… sous #SPIP. Si.

    Pour définir les trois grandes zones, j’utilise mon plugin de « hotspots », qui me permet de définir des rectangles sur une grande image, par drag and drop.

    Mais le plus original, c’est que j’utilise mon plugin destiné à fabriquer des « scènes animées » pour positionner les pièces. Normalement c’est utilisé pour fabriquer des bandes dessinées en ligne, mais là, comme vous voyez, ça devient un puzzle…

    Une autre astuce vraiment originale, c’est d’avoir des pièces qui ne sont pas rectangulaires, et de pouvoir les manipuler précisément. Normalement, un PNG, même avec une couche alpha, intercepte les événements tactiles sur toute sa surface rectangulaire. Ce qui fait que, dans un tel puzzle, si tu cliques dans la partie transparente d’un PNG situé au-dessus en espérant attraper une pièce en dessous, ça intercepte et ça sélectionne la mauvaise pièce. La solution, c’est de placer au-dessus du PNG un SVG qui a exactement la même forme que la pièce détourée, et d’intercepter les interactions uniquement sur la zone remplie. Voici (enfin) une utilité au CSS suivant :

    pointer-events: fill;

    Et il y a par ailleurs le même SVG, sous le PNG, pour fabriquer une légère ombre portée sous les pièces, et un petit effet de halo blanc quand on manipule une pièce.

    (Je me rends compte que, je n’ai pas besoin du SVG du dessus, mais bon, j’ai compris le fait que pointer-events:none laissait totalement passer les événements aux pièces situées en dessous après ce développement.)

    Et donc une autre astuce (assez typiquement SPIP) : fabriquer les SVG pour chacune des pièces… Ça se fait très bien en développant deux filtres d’images :
    – un premier filtre va fabriquer une image noire et blanc de la couche alpha du fichier PNG de la pièce ; de cette façon j’obtient un PNG de même dimensions que l’image, mais qui a en blanc la zone visible de la pièce et en noir la zone invisible ;
    – un second filtre qui fabrique un fichier SVG de cette image noir et blanc, en utilisant Potracio.php. Ainsi j’obtiens un fichier SVG qui épouse parfaitement les contours du détourage du fichier PNG de chaque pièce.

    Et donc, voilà une interface qui ne ressemble particulièrement pas à un site SPIP, mais pour lequel l’outil nous a fait gagner un temps énorme. Parce qu’on se retrouve avec un back-office avec des interfaces graphiques déjà prêtes simplement en utilisant de manière détournée mes plugins conçus pour un autre usage (comme Raoult : du repurposing, et les résultats viennent de tomber : ça marche !).

    Et lorsqu’il s’est agit d’adapter une version Web (pas prévue à l’origine), a minima mon plugin image_responsive m’a permis en deux coups de cuillère-à-pot de balancer des images plus petites sur smartphone, ou adaptées aux écrans haute définition, ainsi que leurs équivalents WebP pour Android et Chrome.

    #shameless_autopromo (j’en ai pas mal en ce moment, le confinement a retardé 3 beaux développements terminés à la fin de l’hiver)

  • C’est la semaine des livraisons #shameless_autopromo… on vient donc de mettre en ligne, avec Emmanuel, le site du Frac Paca :
    https://www.fracpaca.org

    Évidemment c’est du #SPIP. Graphiquement c’est lié à la charte de l’institution, que nous avons évidemment adaptée à un site Web.

    Dans les trucs originaux :

    1. Le bandeau supérieur prend différentes formes selon la taille de l’écran :

    Ça se fait entièrement en CSS évidemment.

    2. Le menu hamburger est plus classique, mais à nouveau tout se gère en CSS (animations, accordéons…) ?

    3. Mes longforms, pour les expositions. Mais évidemment avec un traitement graphique beaucoup plus minimaliste que pour Fabre :
    https://www.fracpaca.org/Des-marches-demarches-remarche

    4. Un mini-agenda en page d’accueil, avec les prochains événements. L’aspect original, c’est que c’est responsive de façon un peu rigolote, puisque c’est un slider avec un nombre variable de cases, et que c’est réglé entièrement en CSS (si je te le dis : c’est plutôt astucieux…)

    5. Une carte des déplacements de la collection en région. Pour l’affichage, c’est du classique : Leaflet avec des clusters. L’intérêt ici c’est que ça va chercher les œuvres dans une base de donnée spécialisée (Navigart), pour les afficher sur le site. Aspect SPIP-c’est-bon-mangez-en : l’interrogation et le traitement de l’API distante se fait directement dans une boucle DATA dans le squelette, sans rien faire en PHP.

    6. Afficher automatiquement un portfolio des œuvres d’une exposition :

    Même principe, interrogation et affichage d’infos tirées de Navigart directement dans un boucle DATA. Et pour l’affichage des lignes façon Google Image, c’est mon bon vieux script tel que tu peux le récupérer dans mon plugin medias_responsive_mod… (modèle ligne.html et script portfolio_ligne.js).

    7. Une page d’agenda par semaine :
    https://www.fracpaca.org/?page=tout_agenda&id_rubrique=1&date_p=2020-07-23

    Pour le mini-calendrier en javascript, j’ai joué avec Pignose Calendar :
    https://www.pigno.se/barn/PIGNOSE-Calendar

    8. Pour les plugins importants ici :
    – plugin agenda
    – sélections éditoriales
    – plugin GIS (mais l’affichage des cartes côté public, je le refais moi-même, comme ça je vois directement ce que je fais).
    Et sinon, ma trousse à outil habituelle :
    – image_reponsive
    – centre image
    – css imbriqués
    – insertion avancée d’images

  • 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 ».

  • #SPIP : un modèle pour mettre en forme le contenu des newsletters

    Un besoin qui remonte régulièrement quand on envoie des newsletter avec SPIP et le trio magique Newsletter/Mailsubscriber/Mailshot, c’est la possibilité de mettre en forme le contenu pour le rendre plus dynamique. Bien sûr, et c’est là que se cache le pot de pus, ça doit fonctionner sur toutes les plateformes et avec tous les logiciels, webmails compris.

    Principe

    J’ai donc utilisé l’astuce lue je ne sais plus où (de @rastapopoulos je crois ?) de passer par des sélections éditoriales (https://contrib.spip.net/Selections-editoriales) pour afficher le contenu dans les newsletters.

    Il suffit donc de faire un modèle simple qui affiche ces sélections et le tour est joué.

    Pour ça, j’ai regardé ce qui se faisait chez Mailjet et le principe est d’avoir un template qui affiche de base tout en une colonne et, via des Media Queries, gérer les mises en forme plus complexes (ligne, 2 colonnes, etc...). Ça semble malin car les cas où on doit afficher le contenu en 1 colonne, c’est sur smartphone et ces applis sont les moins aptes à gérer Media Queries.

    –---

    EDIT 16/04/20 : C’est désormais un plugin indépendant sur la forge SPIP
    https://git.spip.net/spip-contrib-extensions/newsletters_modeles

    –---

    Il y a donc 2 fichiers

    La feuille de styles insérée dans le modèle de la newsletter :
    https://git.spip.net/spip-contrib-extensions/newsletters_modeles/-/blob/master/css/newsletters_modeles.css.html
    le modèle
    https://git.spip.net/spip-contrib-extensions/newsletters_modeles/-/blob/master/modeles/newsletters_selection.html

    Le modèle

    Affichage pleine largeur <selection_newsletterX>
    Affichage par ligne <selection_newsletterX|affichage=ligne>
    Modèle par colonne <selection_newsletterX|affichage=colonne>

    Le résultat

    D’après mes 1ers tests, ça semble fonctionner sur pas mal de configs (Thuberbird, Yahoo/GMail/Zimbra webmail, GMail sur Android). Étonnamment ^^, MS Outlook n’affiche pas bien les 2 colonnes. N’ayant pas cette usine à gaz, je n’ai pas encore pu creuser. Et je n’ai pas encore pu tester sur Mail de MacOS non plus.

    Donc voilà, si qq1 veut tester et faire des retours, je prends.

    #spip_recette #webdev #integrationweb

  • À l’instant, mise en ligne de la nouvelle interface graphique du World Nuclear Industry Status Report :
    https://www.worldnuclearreport.org

    C’est un site #SPIP très simple, mais avec quelques détails originaux.

    – Une « difficulté » ici : quasiment pas d’images, et une structure courte (en gros : trois rubriques quasiment « à plat »), du coup pour faire vivre la maquette graphique, il faut faire autrement que sur les sites que l’on fait d’habitude. Du coup, jouer sur un aspect épuré, très aéré, et accentuer le constraste des polices de caractères. En même temps, tenter de créer un graphisme moderne, plus dynamique, mais qui respecte l’aspect la crédibilité et le sérieux des informations.

    – En page d’accueil, le logo SVG se « dessine » tout seul.

    – Pour chaque pays abordé, il y a désormais un mot-clé auquel on attribue (par des modèles SPIP) des petits graphiques indiquant les nombres de réacteurs, l’âge moyen des réacteur avec indication du plus récent et du plus vieux, la part du nucléaire et son évolution, et le facteur de charge annuel :
    https://www.worldnuclearreport.org/+-France-+.html
    Comme ce sont des modèles SPIP, ça se modifie facilement dans l’espace privé, et « graphiquement » c’est « dessiné » en HTML.

    – Du coup dans les articles, quand l’article traite d’un seul pays, on affiche le rappel des indicateurs de ce pays en colonne de droite :
    https://www.worldnuclearreport.org/U-S-Pilgrim-Nuclear-Reactor-Closes-13-Years-Before-License-Expir

    – Refonte des pages des articles de la revue de presse :
    https://www.worldnuclearreport.org/IEA-urges-advanced-economies-to-support-nuclear-as-renewables-co
    Un petit détail : aller chercher une copie d’écran de la page référencée. Comme, sur ce site, il n’y a jamais de « logo d’article », ça permet d’introduire un peu de repères visuels et de rythme dans des pages qui seraient sinon très austères.

    – Du coup, la page de rubrique « WNISR in the Media » est nettement plus « habillée » qu’avant :
    https://www.worldnuclearreport.org/-WNISR-in-the-Media-.html
    on retrouve les prévisualisations, mais aussi l’indication en surtitre du média référencé, éventuellement un nom d’auteur (utile dans l’autre rubrique) et, également nouveau, la mention de la langue (quand ce n’est pas en anglais).

    – Du coup, avec la gestion dans SPIP de la langue, on se retrouve avec la typo automatique en fonction des langues, c’est toujours plus propre :
    https://www.worldnuclearreport.org/Nucleaire-Les-centrales-de-poche-vont-elles-sauver-la-filiere.ht
    Le petit détail ici, c’est que même si l’article est en français ou en allemand, il faut continuer à afficher les dates en anglais, parce que l’interface générale du site est volontairement en anglais.

    – Une petite difficulté était que le site a des contenus pas forcément responsive. Notamment des tableaux réalisés avec « tableau.com ». Du coup j’ai bidouillé un petit script pour rendre « responsive » l’affichage de ces graphiques :
    https://www.worldnuclearreport.org/Nuclear-Power-Strategic-Asset-Liability-or-Increasingly-Irreleva
    (au passage sur cette page, il y a aussi l’ajout automatique de la nouvelle façon de présenter les images dans les articles avec mon plugin « Insertion avancée d’images », et une présentation un peu plus moderne de présenter des documents PDF.

    #shameless_autopromo

  • Avec Diala on vient de réaliser le nouveau site de l’Ihédate (Institut des hautes études d’aménagement des territoires) :
    https://ihedate.org

    #shameless_autopromo donc, sous #SPIP évidemment.

    Le site est essentiellement consitué de #longforms pour les entrées principales, permettant de présenter les informations institutionnelles comme des pages longues, rythmées par de grandes images qui se fondent dans le texte, et avec des maquettes multiples (1 colonne, 1 colonne large, 2 colonnes, 3 ou 4…). Rythmer par la présence d’images de différents formats (prévisualisation de vidéos, visages dans des cercles, petits logos vectoriels animés…). Par exemple :
    https://ihedate.org
    https://ihedate.org/l-ihedate
    https://ihedate.org/le-cycle-annuel

    On a créé une petite collection de « raccourcis » (des modèles SPIP) pour gérer certaines informations, dans ces longues pages, de manière semi-automatique : l’affichage de l’agenda, des liens vers des articles et des rubriques, des petits raccourcis « auteur » avec leur trombine, le dernier article de telle rubrique avec un visuel ou un PDF, un « témoignage » d’un ancien…

    Il y a par ailleurs plusieurs pages ave des développements spécifiques, comme par exemple l’« annuaire des auditeurs » qui, outre un moteur de recherche, affiche les régions françaises avec, directement tiré de la base de données, le nombre d’anciens pour chaque région :
    https://ihedate.org/l-annuaire-des-auditeurs

    Et évidemment, des « articles » très classiques au sens de SPIP (un article sur une page…), mais avec une maquette de texte un peu « moderne » (une seule colonne, « gros » texte, grandes images qui « sortent » de la colonne de texte, responsive…) :
    https://ihedate.org/la-fin-de-la-paix-territoriale

    La principale originalité du site est de gérer des publications publiques et à accès réservé, alors qu’auparavant c’était réalisé sur deux sites séparés (il existait le site public officiel, et un site dédié aux annonces protégées par mot de passe). De fait, il y a pas mal de subtilités pour gérer ça. Techniquement c’est amusant : ici on affiche par exemple les liens quand on n’est pas identifié, mais les liens ouvrent le formulaire d’identification. Au niveau du workflow, ça a demandé un peu de réflexion pour que ce soit facile à gérer et qu’on évite les erreurs « humaines » dans la gestion des documents publics/privés.

    Une partie centrale, c’est la publication des programmes des « cycles annuels » :
    https://ihedate.org/cycle-2019-geographies-de-l-argent
    Il y a là toute une gestion de ce qui est public et ce qui est privé (les visiteurs identifiés ont accès au détail de chaque session, avec éventuellement l’accès aux vidéos de chaque conférence). C’est l’aspect le plus complexe dans la réalisation de ce site.

    Plus simple à gérer, mais avec des petites spécificités : la « médiathèque » présente les documents et les vidéos en accès libre
    https://ihedate.org/les-documents-en-acces-libre

    Travail un peu original sur les « pages des auteurs », où il faut gérer les accès publics et privés :
    https://ihedate.org/marchandise-jacques-francois

    Non visible par le grand public, on a développé toute une gestion des promotions et des « auditeurs » :
    https://ihedate.org/toutes-les-promotions
    Chaque personne (ainsi que les administrateurs évidemment) peut modifier ses informations personnelles et décider de partager chaque information avec les autres auditeurs ou non (formulaires spécifiques donc pour gérer adresses et téléphones perso et professionnels).

    Par ailleurs on a conçu un « espace collaboratif », sous forme de forums structurés (par cycles annuels et par thèmes) pour permettre les échanges d’information (tout à est privé). Les forums eux, sont des forums SPIP. L’originalité est de déterminer le forum principal de chaque personne (en fonction de son année de participation à un cycle), et de permettre la participation ou non à chaque thème (on peut voir tous les « thèmes », mais on ne peut participer qu’en « s’abonnant » à ce thème, auquel cas on verra dans son propre espace personnel les derniers messages qui s’y rattachent.

    Un aspect technique intéressant, c’est qu’on a récupéré le contenu des deux sites précédents (public et privé), ainsi que leurs bases d’auteurs, de « visiteurs identifiés », de documents, de mots-clés, etc., et qu’il a fallu fusionner ces différentes sources. Ça a été assez coton à faire, avec différentes « moulinettes » pour tenter de recoller des sources hétérogènes. Mais du coup, on a tout récupéré, et ça fait énormément d’informations qu’il n’y a pas eu besoin de ressaisir.

    Pour le détail : les vidéos sont intégrées dans les articles, depuis des années, directement en iframe en HTML, et évidemment ce n’est pas nativement responsive. Du coup j’ai développé des petits outils PHP pour transformer ces codes dans les articles en codes responsive. Et aussi pour « extraire » la vignette de la vidéo pourtant intégrée directement en HTML dans l’article, pour fabriquer les vignettes de navigation de ces articles (voir la médiathèque).

  • Lancement aujourd’hui de la nouvelle refonte du site #SPIP de http://pensezsauvage.org #shameless_autopromo donc

    Depuis quelques années, l’association pensezsauvage fait pousser des plantes potagères, des fleurs curieuses et rares pour récolter les graines à redistribuer et à revendre sur les marchés ou sur internet.

    Jusque là, le site disposait du theme_greeny de @marcimat (merci :*) avec un squelette légèrement modifié. Mais l’asso souhaitait quelque chose de plus clair et de responsive, avec une navigation compréhensible à tout·es. C’est finalement Mikou de pensez sauvage lui même qui a dessiné la maquette style Kraft. Pas évident du tout, mais j’estime que c’est bien la technique qui doit se plier aux idées créatives et non l’inverse. J’ai refait l’architecture du site et réalisé les fonctionnalités et l’intégration SPIP html/css/js sur une base zcore. J’ai créé une boutique minimaliste avec trois plugins SPIP : prix, panier et paypal, il n’y a ni compte client ni stockage de coordonnées, bref, rien d’autre qu’un document de l’article avec un champ ’prix’ à remplir.

    L’idée est celle d’un onepage où l’internaute navigue par ancres, un petit JS perso permet de tester si l’ancre existe, sinon de renvoyer vers l’URL demandée pour éviter les impasses de navigation et permettre au site d’évoluer à son rythme. Bon, j’avoue que j’étais pas réjouit de mettre tout le catalogue sur l’accueil, mais j’ai trouvé des astuces pour alléger.
    Il m’aurait été parfaitement impossible de faire cela sans #CSS3 il n’y a que serait-ce 5 ans et je me suis pas mal amusée à vrai dire.

    Le plugin panier a été modifié pour faire apparaitre les sachets de graines au fur et à mesure de leur mise au panier, avec un peu d’ajax perso on reste sur la même page le plus souvent possible. Le plugin lazysizes permet de ne faire apparaitre les images au format définitif que lorsque la vue visiteur est en face.

    Comme l’asso et les visiteurs préfèrent de loin les chèques, qui évitent de laisser des données sur internet, le panier une fois remplit peut être imprimé avec un montant qui déduit les frais de paypal.
    Pour cela j’ai créé une page reprise par le plugin Dompdf qui créé le pdf du panier de session du visiteur à la volée.

    La recherche est en autocompletion sur l’ensemble du catalogue des graines, la page glisse ensuite vers le sachet choisi.

    Merci à @jacotte qui a bien voulu revoir de ses yeux de lynx les défauts restants à corriger. Par exemple la font choisie par Mikou ne disposait pas d’apostrophes et de virgules correctes. Je suis donc passée par FontForge pour corriger cela avant l’intégration en base64 dans la CSS.

    Merci aussi à @james qui m’a poussé à écrire ce billet !

  • #Intégration / #développement : Plugin vs #boilerplate

    Vous êtes plutôt l’un ou plutôt l’autre vous ?

    Il y a 1 an, j’attaquais mon squelette perso, celui qui me sert aujourd’hui de base pour la structure html et quelques styles css de bases et qui repose sur ZPIP V2. Ce squelette est (plus que) largement inspiré de Intégraal de @rastapopoulos et SPIPr de Cédric et @ben.

    Je commence à avoir quelque chose d’assez adapté à mes besoins. Outre une structure html5, ça permet de gagner beaucoup de temps : une grille à mettre en place ? <INCLURE{fond=inclure/liste/grille,...> + les bons paramètres et le tour est joué.

    La question qui se pose maintenant, c’est le fonctionnement : boilerplate ou plugin.

    Le plugin , c’est un squelette qu’on surcharge avec un squelette/plugin propre à chaque nouveau projet. Le boilerplate , c’est un squelette qu’on modifie directement pour chaque nouveau projet.

    L’avantage du 1er, c’est qu’on partage les évolutions entre tous les sites qui l’utilisent mais l’inconvénient, c’est qu’il faut conserver une compatibilité descendante sous peine, soit de casser le site, soit de ne plus pouvoir profiter des évolutions.
    Le 2nd, ben c’est exactement l’inverse.

    Au début, le fonctionnement plugin m’allait très bien : je développais mon plugin en même temps que les sites et chacun profitait donc des mise à jour de la structure et des styles de bases. Mais à force de bouger des choses, je me rends compte que ça devient galère de garder cette compatibilité descendante.

    Donc voilà, si vous avez des retours d’expérience...

    Liens :
    SPIPr : https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/spipr-dist/trunk
    Integraal : https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/integraal
    integraal (principe) : https://zone.spip.net/trac/spip-zone/changeset/83559/spip-zone
    Repo de mon plugin : https://gitlab.com/jmoupah/zcm
    Doc de mon plugin : https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html

    #SPIP_recette #SPIP

    • Les deux, cela dépend du type de projets sur lesquels tu travailles.

      C’est l’exact raison pour laquelle j’ai conçu Intégraal, parce que Zpip ou SpipR ne convenait pas du tout dans les cas où on avait des clients différents, avec des graphismes dédiés à chaque fois, où il faut intégrer des maquettes précises, qui n’ont rien à voir les unes avec les autres.

      Dans ce cas, l’avantage d’avoir un plugin commun se réduit drastiquement, pour deux raisons :
      1) tu finis par surcharger au moins 50% du truc de base
      2) quand il y a une mise à jour du plugin central, ça peut très souvent te péter ton intégration, puisque tu avais basé du graphisme sur une structure qui peut bouger à tout moment !

      Voilà donc pourquoi cela fait des années que l’on travaille avec Intégraal et désormais sa commande spip-cli qui permet en 2s d’avoir la structure d’intégration, qu’ensuite on modifie directement.

      En revanche, attention, si une partie du travail concerne tout un ensemble de clients qui se ressemblent au moins un peu, et aussi si tu arrives à avoir des bases génériques ET configurables (noisettes ou autre), alors dans ce cas là ça peut de nouveau être intéressant d’avoir un plugin-squelette qui est le même pour tout le monde, et sur lequel tu ne fais que plaquer des styles (et pour ça il faut que tes classes CSS soient génériques aussi, quand je parle de générique, c’est pas juste au niveau des squelettes, <inclure>, etc).

      Actuellement, en plus de continuer à utiliser Intégraal, nous sommes en train de réfléchir à un plugin commun aussi, pour d’autres besoins.

      En simplifiant :

      Intégraal = site à façon, où on conçoit un ensemble de fonctionnalités, une ergonomie et un graphisme propre à ce site, puis on l’intègre tel qu’on l’a conçu.

      Plugin = site où on propose aux gens des fonctionnalités qui sont déjà à moitié intégré, parce que ça rentre vraiment dans le périmètre de leurs besoins, et sur lesquels on change juste quelques petites différences graphiques (palette de couleur, typo, header, etc).

    • Mais du coup, si on change son boiler plate en plugin spécifique au nouveau projet, ça veut dire que chaque nouvelle fonctionnalité ajoutée en cours de développement (donc dans le nouveau projet, tout le monde suit ?) doit être reportée dans le boiler plate source pour profiter au prochain projet.

      Ça veut peut être dire qu’il faut attendre que le boiler plate soit arrivé à maturité avant de fonctionner comme ça...

      bon, work in progress quoi...

    • Bah oui, mais seulement si c’est une fonctionnalité générique. Le principe du boiler plate c’est qu’ensuite tu modifies en fonction de ton projet précis. Mais à tout moment, et surtout au début bien sûr, tu peux détecter que tel ajout va te servir dans d’autres futurs projets, donc tu l’ajoutes à ton projet en cours, tu le testes, tu trouves ça cool, et alors tu le reportes sur le boiler plate. C’est ce qu’on fait dans Intégraal depuis le début (même si on n’est pas forcément très rigoureux, ya sûrement plein de choses encore à reporter).

    • Hello,

      après expérience, je suis resté sur le fonctionnement boiler plate. Même s’il impose une rigueur pour reporter les nouvelles fonctionnalités développées au fur est à mesure, c’est toujours plus réaliste que de vouloir garder une rétro-compatibilité en mode plugin.

      Voilà pour mon retour d’expérience perso...

      Merci aux uns et aux autres pour les retours, pistes, outils.

    • Oui c’est bien là l’argument principal : la pérennité et la maintenance sur le long terme. Quand t’as utilisé ce projet pour un site, après 3 ans, ça se trouve tu ne veux plus utiliser la même grille SCSS, t’as améliorer la sémantique du HTML ou la normalisation des classes CSS (BEM etc), bref t’as fait plein de changement, et donc tes personnalisations de l’époque peuvent être toutes pétées si ton projet était un plugin générique à mettre à jour.

      Alors qu’avec un boiler plate, tu l’as utilisé tel qu’il était au moment où tu en avais besoin, et tu l’as personnalisé, et basta. Si 3 ans plus tard ya une refonte à faire, de toute façon ça sera sur une autre base. Et si c’est juste des petites modifs, c’est sur le socle de l’époque.

      Bien sûr ça c’est quand on doit intégrer des maquettes précises. Quand on propose une solution générique et que les clients ne font que choisir parmi des trucs existants, là faut tout en plugins.

  • Je viens de mettre en ligne le site de Bord à Bord, Recettes de cuisine et produits aux algues bio de Bretagne https://www.bord-a-bord.fr.

    Pour ce site, j’ai eu pas mal recours à la communauté #SPIP (assez présente ici) via les docs et les listes et je me dis qu’un petit retour d’expérience (à la manière de ceux d’@arno que je lis toujours avec intérêt) serait le bienvenu. Ne le voyez donc surtout pas comme un autopromo déguisée.

    Et bien sûr, tout retour est bienvenu.

    Graphisme

    Toute la partie graphique, conception et identité visuel, a été crée par Oui design - bureau de design graphique, je suis uniquement intervenu sur des questions d’ergonomie ou de faisabilité technique.

    Principe

    Comme les produits ne sont pas en vente directe mais via des magasins, l’idée du site a été de mettre l’accent sur la présentation des algues et de fournir des recettes avec ces produits pour que les gens sachent quoi faire avec.

    Et on navigue à travers tout ça de façon horizontale : dans une recette on retrouve les liens vers les produits utilisés ainsi que vers les algues qu’ils contiennent. Depuis une page algue, on accède aux produits qu’elle compose et aux recettes faites avec, etc... Ces liens fonctionnent avec des mot-clefs.

    Donc 3 parties principales :
    – histoires d’algues
    – Les recettes du bord
    – les produits

    Et à côté :
    – les points de ventes
    – la présentation

    Histoires d’algues : le choix esthétique à été de faire une page à défiler (type « one page »).
    https://www.bord-a-bord.fr/-Histoires-d-algues-.html

    Un menu en haut de page permet de voir ce que la page contient et d’y accéder en scrollTo avec le plugin Ancres douces. La structure de la page est donc une rubrique affichant tous ses articles sur un même page.

    Recettes : la page affiche par défaut les dernières recettes.
    https://www.bord-a-bord.fr/-Les-recettes-du-bord-.html

    En haut de page, on retrouve le diaporama permettant de mettre en avant certaines recettes (en fonction des saisons, des nouveaux produits...) puis un champs de recherche et 3 possibilités de filtre (par produit, ingrédient ou temps de cuisson).

    Ces filtres sont des <select> de mot-clefs gérés avec Chosen. Comme tous les mots clefs ne sont pour l’instant pas utilisés, j’ai fait une jointure mot-clefs et articles de la rubrique recette pour n’afficher que les mots clefs effectivement ajoutés à des recettes et ne pas avoir de résultat vide.

    Chaque recette a des Champs extras pour les durées de préparation.

    Pour gérer l’affichage du visuel dans la grille de la page rubrique (toutes les recettes) et sur la page article (une recette), j’ai utilisé Rôles de documents : visuel grille + visuel présentation.
    Une difficulté pour moi a été de créer les rôles via mon plugin squelette (merci à @rastapopoulos et Tcharlss pour le SAD sur le forum du plugin).

    Il y a aussi des recettes similaires, pour favoriser la circulation entre les recettes, avec A2A permettant de lier des articles entre eux.

    Les produits : une page rubrique affichant tous les articles rangés en sous-rubriques pour pouvoir gérer les gammes de produits (Gamme Fraîche > Les tartares > Le Classique).
    https://www.bord-a-bord.fr/-Les-produits-.html

    Une des questions ici a été la structure HTML5 : qu’est-ce qui est <section> et <article>. Le choix a été de faire un article par type de produit (tartares, moutardes...) avec les différents produits (le classique, le provençal...) en <nav>.

    Ici aussi les différents visuels fonctionnent avec Rôles de documents et des champs extras permettent d’afficher le conditionnement du produit. On retrouve également un diaporama Slick en entête pour mettre en avant certains produits.

    Points de vente : on affiche avec GIS une carte avec clustering des points et possibilité de se géolocaliser.
    https://www.bord-a-bord.fr/-Points-de-vente-.html

    La difficulté a été ici de trouver un fonctionnement permettant au client de mettre à jour facilement les points de vente à partir de son doc tableur source. Je détaille la démarche par ici https://contrib.spip.net/Tutoriel-Afficher-sur-une-carte-GIS-des-points-dont-on (poke @b_b :) )

    Les autres principaux plugins utilisés :
    – Multilang + Menu de langues avec liens : le site est prévu pour être multilingue mais la traduction est en cours
    – Big upload pour facilité l’ajout des documents par drag and drop
    – centre image pour définir le centre d’intérêt des images et recadrer en fonction
    – court-circuit pour afficher directement l’article d’une rubrique s’il est seul
    – favicon pour gérer les favicons en fonction des appareils
    – Image responsive et Insertion avancée d’images pour gérer les images en fonction des types d’affichage (HD ou pas) et des tailles d’écran le tout en HTML5 (<picture>)
    – Manuel de rédaction du site pour laisser un mode d’emploi détaillé aux utilisateurs
    – Métas+ pour les méta-données openGraph et DublinCore pour un meilleur affichage sur les réseaux sociaux
    – Responsive Nav pour le menu burger sur petits écrans
    – ZCore
    – ZCM, mon plugin squelette perso pour ZCore que je vais tenter de documenter au fur et à mesure par ici https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html

    Certains « détails » auxquels il a fallu penser :
    – ne pas afficher dans le sitemap et le plan du site les articles et rubriques n’ayant pas vocation à être vu tels quels
    – backend : n’afficher que les recettes

    J’ai également commencé à utiliser les svg pour ce site, mais ce n’était que le début, donc certains pictos sont en svg, d’autres non.

    Voilà pour mon retour d’expérience, je me dis que ça serait une chouette ressource si d’autres dev faisait de même. On pourrait même trouver un hashtag :)

  • Lancement aujourd’hui de la nouvelle maquette d’Orient XXI (@orientxxi, #shameless_autopromo donc) :
    https://orientxxi.info

    Évidemment c’est du pur #SPIP, et un aspect était d’assurer la continuité sans douleur avec les 2000 articles déjà publiés sur ce magazine. Boulot graphique affiné avec @diala. Travail sur la structure éditoriale avec Michel Raffoul.

    Notre premier axe a été de travailler la lisibilité des pages d’articles. Les articles d’Orient XXI étant longs, c’est l’aspect primordial de la maquette. J’ai choisi la police Lora, que je trouve très lisible à l’écran, avec une certaine légèreté dans le gris typographique :
    https://fonts.google.com/specimen/Lora
    Avec un critère important : une italique joliment dessinée, clairement différenciée, et très lisible.

    Pour faire le contraste, les éléments de navigation du site utilisent la police Raleway de The League of Movable Type :
    https://www.theleagueofmoveabletype.com/raleway
    utilisée en capitales, et en jouant sur une opposition marquée entre une version très grasse (black) et une version plutôt maigre (regular).

    Pour la maquette du texte, le choix désormais classique d’une colonne unique, au maximum 700 pixels de large, et un corps de texte courant assez massif (environ 21px sur grand écran). L’idée étant, encore une fois, de privilégier le confort de lecture de textes longs. (Références : Medium.com, le mode « Lecteur » de Safari, et lecture Zen du Monde.)

    Parmi les petites astuces dans les articles :
    – les notes de bas de page s’affichent en colonne de droite quand on clique sur le numéro d’appel de note,
    – un calcul un peu rigolo pour insérer à l’intérieur du corps du texte un bandeau d’inscription à la newsletter,
    – les liens hypertexte vers l’extérieur ont un graphisme plus nettement différencié des liens internes,
    – la maquette des intitulés des images, en dehors de la colonne de texte (parfois à côté de l’image, parfois sous l’image quand elle-même dépasse de la colonne de texte).

    Autre aspect important sur les pages d’article : l’entrée de page est travaillée pour introduire rapidement la lecture : titre, chapeau, chemin de fer, boutons de partage, tout ça massif mais « above the fold ».

    L’idée est de donner une impression de magazine, et non de quotidien. Ce qui donne des choix graphiques et tygraphiques forcément différents.

    Pour le bandeau de navigation de haut de page :
    – refonte du logo (l’emblème rond n’est pas de moi),
    – petit jeu du menu qui se « décroche » en version plus compacte, et qui redevient visible quand on scroll vers le haut (désormais classique, mais efficace je trouve),
    – menu de navigation dont deux éléments ont un sous-menu. Ce menu passe dans le hamburger sur petit écran et sur système qui ne gère pas le survol).

    Au niveau de la structuration du site, très gros changement : la structure par rubriques est remplacée par une structure thématique et par pays. Cela repose certes sur les mots-clés de SPIP, mais les « thèmes » et les « continents » ne sont ni des mots-clés SPIP ni des groupes de mots-clés :
    https://orientxxi.info/outils/selections/les-pays/pays-du-levant,2316
    Ce qui permet à la fois des thémes qui se croisent, et une sorte de fil d’ariane sur les mots-clés un peu plus profond qu’avec l’outil classique de SPIP (par exemple : Pays > Pays du Golfe > Bahreïn) tout en réutilisant la thématisation manuelle des 2000 articles déjà publiés :
    https://orientxxi.info/fr/bahrein

    La page d’accueil essaie de mettre en avant plus de contenu, avec des calculs un peu sympas pour savoir quels grands thèmes mettre en avant en fonction de l’actualité des publications.

    Systématisation de l’utilisation de mon plugin « Centre d’intérêt d’images » :
    https://www.paris-beyrouth.org/Plugin-centre_image
    qui permet d’indiquer directement dans l’espace privé le point « central » d’une image et de faire plein de recadrages différents sans couper n’importe comment.

    Toujours sur la page d’accueil, une sorte de « player vidéo » qui présente toutes les vidéos directement là, sans changer de page. Assez rigolo à faire.

    Travail sur les pages d’auteurs, avec autant que possible utilisation de photos des auteurs :
    https://orientxxi.info/fr/auteur/alain-gresh

    La récupération du flux Seenthis d’@OrientXXI est toujours là :
    https://orientxxi.info/au-fil-du-web
    qui permet de publier un suivi d’actualité de manière vraiment simple.

    On conserve également mon outil qui permet d’animer simplement des illustrations :
    https://orientxxi.info/va-comprendre/pourquoi-les-etats-unis-cessent-ils-de-financer-l-agence-des-nations-uni

    Converser également cette possibilité, largement utilisée sur les articles historiques du site, d’installer de grandes images en haut de page, avec un jeu de dégradé, ce qui donne un aspect très « magazine » :
    https://orientxxi.info/lu-vu-entendu/le-canal-de-suez-un-enjeu-toujours-actuel,2557

  • Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
    https://www.fondationcustodia.fr

    Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…

    Parmi les points à voir en particulier…

    – Un menu hamburger tout mignon.

    – Des #longforms pour la présentation des expositions :
    https://www.fondationcustodia.fr/Georges-Michel

    – Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :

    – Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
    https://www.fondationcustodia.fr/Les-portraits-en-miniature-12

    Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
    http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

    On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :


    C’est pas toujours évident à utiliser à bon escient, mais là ça donne un aspect « imprimé » particulièrement chic je trouve.

    – Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :

    Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.

    – Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
    https://www.fondationcustodia.fr/les-portraits-en-miniature

    – Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.

    – Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :

    – Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).

    – Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.

    À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))

    #shameless_autopromo

    • Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.

      Ce qui donne par exemple, avant chargement de l’image :

      et une fois l’image chargée :

      Ce que je réalise directement dans le squelette ainsi :

      #image_haut {
              background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
              background: linear-gradient(to bottom,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
              );
      }
      #image_haut:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              content: " ";
              z-index: 1;
              background: linear-gradient(to right,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
              );
               mix-blend-mode: soft-light;
      }
    • @realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.

      Je fais ceci :

              $("#menu_flottant a").on("focus", function() {
                      $("#afficher_menu").prop("checked", true);
              });
              $("body > *:not(#menu_flottant) a").on("focus", function() {
                      $("#afficher_menu").prop("checked", false);
              });