#spip_recette

#Tutoriel : créer des champs extras depuis un plugin

Vous trouverez dans cet article un exemple pour créer des champs extras depuis votre plugin perso, à l’aide du plugin Champs Extra et d’un peu de code.

▻https://contrib.spip.net/Tutoriel-creer-des-champs-extras-depuis-un-plugin

#spip_recette #spip_blog

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

Emmet — the essential toolkit for web-developers
►https://emmet.io

Emmet is a plugin for many popular text editors which greatly improves HTML & CSS workflow

Découvert via cette vidéo :
▻https://www.youtube.com/watch?v=EhRPdUv1ZrA

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.

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.

https://slate.textile.io/ipfs/bafybeienrmwpcf4sxpc6v4bre4i45n2ju7qvo2ed6tiwgifzstxkjfgxey#.jpg https://slate.textile.io/ipfs/bafybeifowika52souuxgyi4qlxph5buqgyq2slk3lmjmap4qbk3io6dt6a#.jpg

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

https://slate.textile.io/ipfs/bafybeig3nl4wpuez5utxr22p76g2stvkfpaaiuamjy5esikmhiubohvajm#.jpg

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

https://i.imgur.com/tihVQbY.jpg

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 :

https://i.imgur.com/64lHlCu.jpg

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

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

https://i.imgur.com/RRbL0zz.jpg

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…).

https://i.imgur.com/sWwPwwt.jpg

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…

https://i.imgur.com/os4FdLX.jpg https://i.imgur.com/wNWubyT.jpg

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 :

(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 :

https://i.imgur.com/JSwKbS1.jpg https://i.imgur.com/GBYZeSt.jpg https://i.imgur.com/JV0JbIg.jpg

Ç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…) ?

https://i.imgur.com/AouOEkd.jpg

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…)

https://i.imgur.com/auxOK4Z.jpg https://i.imgur.com/o8r0sx2.jpg https://i.imgur.com/duh5kyX.jpg

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.

https://i.imgur.com/vDS88oa.jpg

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

https://i.imgur.com/bD2fDHH.jpg

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

https://i.imgur.com/oY1YJPo.jpg

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

https://i.imgur.com/R5mnlOq.jpg

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

https://i.imgur.com/e2oRtUk.jpg

Ç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 ?

https://i.imgur.com/DcPwef9.jpg

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.

https://i.imgur.com/K44KhjL.jpg

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

https://i.imgur.com/XNQT1we.jpg

qui se gère dans l’espace privé de SPIP (avec des glisser-déposer pour définir les zones) :

https://i.imgur.com/eDFCVBp.jpg

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…).

https://i.imgur.com/6hrLFou.jpg

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…

https://i.imgur.com/o2ay0Br.jpg

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

https://i.imgur.com/vHw3VOA.png

#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

https://stk.cousumain.info/modele_newsletter_zcm.jpg

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

http://seenthis.io0oi.net/seenthis/pensezsauvage.jpg

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 !

http://seenthis.io0oi.net/seenthis/pensezsauvage_refonte.jpg

#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

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.

https://i.imgur.com/bNcdyNm.jpg

– 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 :

https://i.imgur.com/o4jIdNN.jpg

– 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

https://i.imgur.com/FLoLf2r.jpg

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> :

https://i.imgur.com/zGMFgeK.jpg

– 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 :

https://i.imgur.com/g7h66dl.jpg

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 :

https://i.imgur.com/FRMLXPy.jpg

– 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