#spip

Pour ce qui nous intéresse (si si), la grosse nouveauté d’iOS 14, c’est qu’il accepte désormais les images WebP.

J’ai testé avec mes sites où la version WebP est générée directement par mon #plugin #SPIP image_responsive, ça bascule sur les versions WebP de manière totalement transparente.

De ma propre expérience :

– sur les fichiers JPEG, je gagne généralement autour de 30% à 50% sur le poids des images. Avec des dessins au trait, je gagne systématiquement 50%.

– sur des fichiers PNG (quand j’ai besoin de la transparence), c’est absolument énorme, les images sont 7 à 8 fois plus légères.

Sur un site comme La Méthode Curie, où j’utilise énormément d’images au trait avec transparence, la différence est donc phénoménale :
▻https://lamethodecurie.fr/index.html

Un petit #shameless_autopromo : on vient de mettre en ligne, pour le Musée Fabre de #Montpellier, le mini-site pour l’exposition Le Canada et l’Impressionnisme, qui ouvre ce week-end :
▻https://fabre.montpellier3m.fr/Le-Canada-et-l-impressionnisme

C’est essentiellement une collection de longforms (mais courts…) sous #SPIP. Pour des questions de droits, on ne pouvait pas faire une visite virtuelle complète, mais on a intégré tous les audioguides.

Du coup la petite nouveauté technique, c’est l’affichage des audioguides, en ajoutant un petit symbole avec un numéro (reprenant la signalétique du musée) :

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

Et un petit bout de code qui coupe et réinitialise les lecteurs audio quand on en déclenche un nouveau, de façon à ne pas avoir plusieurs audioguides qui se déclenchent en même temps.

Mon petit bout de code :

FAQ pratique : Comment SPIPer avec git.spip.net
▻https://contrib.spip.net/FAQ-pratique-Comment-SPIPer-avec-git-spip-net

La FAQ du carnet SPIP pour Git

#SPIP #git #FAQ #carnet_spip

Il y a eu pas mal de changement sur mon #plugin #SPIP Outils de base pour HTML5 et responsive :
▻https://git.spip.net/spip-contrib-extensions/html5_responsive

Il y a désormais une constante, _HTML5_RESPONSIVE_ACCESSIBLE (par défaut à true) qui fait que, par défaut, on ne bloque pas le comportement de zoom de l’ensemble de la page (c’était le cas auparavant).

En revanche, si on définit :

Au passage, dans le cas où on définit cette constante à false, je viens en plus d’ajouter des CSS censées bloquer le swipe gauche qui provoque de retour à la page précédente (très pénible quand on fait une interface d’application), et une qui devrait bloquer correctement le zoom de l’écran (parce que les navigateurs, même sur les smartphones, ne respectent plus le meta viewport…).

pqina/filepond : 🌊 A flexible and fun JavaScript file upload library
▻https://github.com/pqina/filepond

A JavaScript library that can upload anything you throw at it, optimizes images for faster uploads, and offers a great, accessible, silky smooth user experience.
[...]
Core Features
– Accepts directories, files, blobs, local URLs, remote URLs and Data URIs.
– Drop files, select on filesystem, copy and paste files, or add files using the API.
– Async uploads with AJAX, supports chunk uploads, can encode files as base64 data and send along form post.
– Accessible, tested with AT software like VoiceOver and JAWS, navigable by Keyboard.
– Image optimization, automatic image resizing, cropping, filtering, and fixes EXIF orientation.
– Responsive, automatically scales to available space, is functional on both mobile and desktop devices.

Voir aussi sur le site officiel :
– la documentation : ▻https://pqina.nl/filepond/docs
– les exemples : ▻https://pqina.nl/filepond/#examples

#upload #SPIP #bigupload #javascript #redimensionner_image #EXIF

Observable, c’est bien

▻https://observablehq.com/@jamesrezo

merci @fil ;)

▻https://observablehq.com/@jamesrezo/treemap-of-spip-versions

#d3js

Les ami·es, j’ai une question #SPIP : est-ce qu’il existe un module pour l’inscription aux événements de l’Agenda :
– qui d’inscrire un nombre de personnes en une seule fois (genre une famille : nous on est 5) ;
– qui n’exige pas forcément une adresse email.

Mon besoin, c’est une forme d’inscription très légère, parce qu’on a beaucoup d’événements avec une jauge maximum (Covid), mais pas des besoins du genre conférence avec inscription. Juste que les gens disent qu’ils viennent, ça leur dit OK, et basta. Et s’ils veulent venir à 5, il y en a un qui s’inscrit et qui dit qu’ils sont 5. Sans avoir à renseigner 5 fiches individuelles avec 5 adresses email…

Guide d’utilisation du Shell pour débutant - Comment Ça Marche
▻https://www.commentcamarche.net/faq/4801-guide-d-utilisation-du-shell-pour-debutant

A compléter avec ▻https://www.commentcamarche.net/faq/3585-bash-la-variable-d-environnement-path pour les histoire de $PATH
Pour aller plus loin : ▻https://guidespratiques.traduc.org/guides/vf/Bash-Beginners-Guide/Bash-Beginners-Guide.pdf

#bash #tutoriel #PATH #spip-cli

Dis, #SPIP, qu’est-ce que je fais de mal avec le critère :

Moi ça me donne une erreur de squelettes :

Démarrage aujourd’hui de l’expo De Funès à la Cinémathèque. Alors un petit #shameless_autopromo : avec Mosquito on a développé un écran interactif pour l’expo.

https://scontent-mrs2-1.xx.fbcdn.net/v/t1.0-9/103502995_10158314559852485_7939473751719431119_n.jpg?_nc_cat=110&_nc_sid=730e14&_nc_ohc=rwMo6uVRsC0AX9F5bNd&_nc_ht=scontent-mrs2-1.xx&oh=142cf6fb435daa6ad51c325d85db0772&oe=5F346D87#.jpg

Ça fait partie des 3-4 chouettes développements qu’on avait terminés et qu’on devrait livrer pour des expositions qui allaient ouvrir quasiment la semaine du confinement

Et pour de Funès, comme pour Pompéi, malgré la réouverture des expos, ce n’est toujours pas idéal, puisque pour l’instant il n’est pas possible de toucher les écrans. Donc à la place on a installé des boucles vidéos qui « jouent » à la place du visiteur (en attendant une période plus propice).

L’interface est baptisée « La machine à mimiques » : il s’agit de 24 courts extraits de De Funès, « renfrogné », « colérique », « anxieux », « exaspéré »… « extatique », « modeste », « étonné », « attendri »… que l’on déclenche simplement avec des gros boutons répartis en « Bonne humeur / Mauvaise humeur » avec un gros slider pour passer de l’un à l’autre.

Est-ce que c’est du #SPIP ? Bien sûr que c’est du SPIP.

https://i.imgur.com/W3pbieU.jpg https://i.imgur.com/wKKQ9SP.jpg

L’originalité, ici, c’est que c’est affiché grâce à un player BrightSign connecté à un écran tactile vertical. C’est une direction qu’on essaie de développer, parce que ça permet de proposer des supports moins chers qu’un PC complet pour faire tourner des médias HTML/CSS/JS, et c’est extrêmement facile à configurer : on met une carte SD dans le player et ça tourne tout seul (avec un PC sous Windows, créer un mode kiosque robuste, c’est casse-pied). Pour les clients, ça abaisse considérablement le prix du matériel.

Suite à un article sur la publication d’un guide à destination des organisations de l’#ESS, le directeur de @framasoft répond à une critique sur le fait que le logiciel libre, c’est un peu la zone, on n’y comprend souvent rien, on ne sais pas par où rentrer dedans et c’est chronophage...

Un texte inspirant partagé par @nicod_ sur la communauté #spip

Ca fait plus de 20 ans que j’entends cette critique du « Le libre, c’est trop le bordel, on voudrait un point d’entrée clair et bien foutu, svp ». J’ai moi-même émis cette critique, d’ailleurs.

C’est légitime, mais … ça n’est pas comme ça que fonctionne le libre, et j’ai mis des années à comprendre pourquoi.
Je partage donc ma réflexion, qui ne vaut que pour moi (d’où l’utilisation du « je » ci-dessous), mais qui peut être t’aidera à comprendre mon point de vue.

Je ne voulais à l’époque qu’une distribution Linux (et non des milliers), un seul annuaire (celui de Framasoft tant qu’à faire), un seul guide, un seul logiciel de retouche d’images, etc.
Mais ça m’aura pris des années pour comprendre que le côté « bazar » du libre ne vise pas aux mêmes objectifs que ceux que la société de consommation/compétition essaie de nous imposer (relire ▻https://archive.framalibre.org/IMG/cathedrale-bazar.pdf même si ça a plus de 20 ans peut être utile).

1. Je ne pense pas que le libre ait besoin de « gagner » : ça n’est pas une lutte du bien contre le mal. On est dans un monde de compétition, mais je m’intéresse plus aux valeurs défendues par le libre que par ses parts de marché. Ca a été difficile pour moi de faire le deuil du « Mais enfin, il faut qu’on fasse croître le taux d’adoption du libre ! » et autres « On se bat pour #lesgens, donc il faut que le maximum de #lesgens utilisent du libre ». Non, me concernant je ne fais pas du libre pour passer de 2% de postes de travail sous linux à 20% puis 50% puis 100%. Je le fais parce que le modèle et les valeurs portées m’intéressent. Parce que, même avec 2%, on y fait des choses formidables. Parce que ça m’apporte, ça m’enrichit. Si pour passer à 20% de part de marché, cela signifiait utiliser des méthodes marketing/management qui sont à mon sens délétères, alors je préfère rester à 2%. Comme dit le proverbe : « Assied toi au bord de la rivière et tu verra passer le corps de ton ennemi ». Le temps joue en notre faveur, nous n’avons pas d’actionnaires qui nous mettent sous pression. Alors nous sommes au bord de la rivière, à faire nos « trucs ». Nous rejoins qui veut. Mais nous ne sommes pas une entreprise de propagande.

2. Le libre est un moyen, non une fin. Pour moi, c’est un moyen vers une société libre. Mais même si on était à 100% de taux d’adoption du libre (bye bye Microsoft, Google, Zoom, etc). Ca ne signifie pas que la société elle même serait libre. Il s’agit donc d’opposer en quelque sorte des « forces centrifuges » (qui tendent vers l’extérieur, le collectif et la diversité) face à des « forces centripètes » (qui tendent vers l’intérieur, l’individualisme et la normalisation). « Pousser » le libre permet d’ajouter une force à d’autres, mais la prétendre comme une fin en soi est à mon sens une erreur de jugement, où l’on reste dans sa tour d’ivoire, sans voir que d’autres forces doivent être actionnées. Le coeur du problème est donc de jouer notre part dans ce rapport de force. Mais ça ne signifie pas que nous devons gagner à tout prix.

3. La diversité est une force supérieure à la faiblesse qu’elle comporte intrinsèquement. Par exemple : gérer du collectif (dans une association, une colocation, une équipe projet, voir une famille 😛 …) c’est … chiant, c’est relou Souvent ça bouscule, ça provoque de fortes émotions. Mais c’est aussi ce qui fait qu’en tant qu’humain⋅es, on apprend, on change, on évolue. Ca serait parfois *tellement* plus simple de dire : « Je décide, vous appliquez », ou « Toi, tu es trop différent⋅e, je préfère ne pas me prendre la tête et ne pas m’occuper de toi ». Et parfois, on le fait, d’ailleurs, parce qu’on est humain⋅es et faillibles. Mais je suis convaincu (c’est même un moteur pour moi) que l’intelligence collective et les solidarités spontanées sans attentes de retour non seulement existent, fonctionnent, mais qu’elles sont notre seul avenir. Avoir 1001 distribution Linux, ça fait chier, c’est relou. MAIS ça nous permet d’apprendre ensemble, d’expérimenter, de tester. On est sur un côté presque organique, où la vie cherche son chemin. Il y aura évidemment énormément de déperdition d’énergies, c’est vrai. Mais au moins on est pas avec un seul projet, autoritaire, prêt à penser.

4. Je ne peux pas préjuger de ce dont #lesgens ont besoin. J’ai mes biais et un point de vue situé. Tu aime le site « Dégooglisons Internet » ? Tant mieux (moi aussi :P). Mais est-ce que parce que ça te convient à toi ou à moi, ça signifie que [RESOLU], qui est avant tout un guide papier avant un site web, ne conviendra pas mieux à d’autres publics (par exemple moins connectés) ?

5. Enfin, le plus important pour moi : ne voir et ne vouloir qu’une seule tête, c’est mettre en place des mécanismes de pouvoir. Favoriser des projets multiples, même foutraques, c’est donner la possibilité à des gens lambdas, « non spécialistes », d’apprendre en faisant, en construisant, en se plantant. Et donc de sortir d’un système où seuls « ceux qui savent », « ceux qui ont les moyens », « ceux qui ont les compétences » font.

Rapporté à [RESOLU] (qui est un projet sur lequel je n’ai pas travaillé, en plus 😛 ) ça me pousse donc à te répondre qu’on est ici sur un projet sur lesquelles des personnes qui n’avaient jamais travaillées ensemble ont pu penser, écrire, décider, rédiger, repenser, faire et défaire ensemble. Une expérience qui les a rapporchées, et qui ont qu’elles feront sans doutes d’autres projets ensemble par la suite.

Que le résultat ne te convienne pas, c’est tout à fait entendable. Que cette énergie aurait pu être mise ailleurs, c’est probable. Mais je veux insister sur le fait que, malgré tout, le monde (oui oui carrément !) avait besoin de ce projet. Même s’il termine dans un tiroir dans 3 mois. Même s’il ajoute de la confusion pour certain⋅es d’entre vous. Parce qu’il n’a rien à vous vendre. Parce qu’il ne cherche pas à être un projet « dominant », parce qu’il a exploré d’autres pistes et d’autres façons de faire, parce qu’il a permis à des gens de se rencontrer et de « faire ensemble », parce qu’il ajoute sa pierre à l’édifice même si cette pierre à la taille d’un grain de sable.

Voilà, désolé du côté un peu lyrique de ma réponse. Mais il me semblait important de prendre un peu de hauteur pour répondre à la frustration que tu exprimais.
Il est d’ailleurs probable que cette frustration existe encore pour toi (« Mais c’est pas comme ça qu’il faut faire, comment voulez vous que [insère ici les objectifs qui TE paraissent importants] »). Mais au moins j’espère que ces éléments de réponse, même à l’arrache, t’auront fait comprendre que notre façon de faire n’est pas erratique, mais bien le résultat d’une pensée murement réfléchie.

Librement,
pyg

https://framablog.org/wp-content/uploads/2020/06/resolu-meme3.jpg

#framasoft #logiciel_libre

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

Building the Perfect Squirrel Proof Bird Feeder

Ou quand un ancien ingénieur de la NASA joue avec des écureuils pendant le confinement.

Écureuils are the best, hein #spip ?

▻https://www.youtube.com/watch?v=hFZFjoX2cGg

#Mark_Rober

▻https://en.wikipedia.org/wiki/Mark_Rober

Reboot the extension (#41) · Issues · Siltaar / meta-press-ext · GitLab
▻https://framagit.org/Siltaar/meta-press-ext/-/issues/41#note_737899
/uploads/-/system/project/avatar/20415/logo-metapress-256px-sq.png
En corrigeant un problème sur l’agrégateur meta-press, on en est venu à parler de l’intégration des flux #RSS de #SPIP.

Monolecte
Monolecte @Monolecte · 19 hours ago

Pour ajouter des sources, ce serait bien d’avoir un modèle pour les sites sous SPIP qui ont tous les mêmes caractéristiques de flux, mais j’écris probablement une grosse connerie, là.

Basta est sous SPIP, comme ▻https://www.revolutionpermanente.fr/spip.php?page=backend
Edited by Monolecte 19 hours ago
Siltaar
Siltaar @Siltaar · 1 hour ago
Maintainer

L’idée est très bonne au contraire.

Toutefois, si on compare le Monde Diplo et Basta (deux sites sous SPIP), on constate que la structure de leurs pages de résultats de recherche n’est pas la même. Je ne peux donc pas reprendre le code du premier pour utiliser le 2nd comme source dans Meta-Press.es.

À l’opposé, les sources s’appuyant sur le moteur de blog Wordpress disposent (sûrement sans le savoir) d’un flux RSS pour leurs résultats de recherche. Du coup, toutes ces sources sont récupérées en ré-utilisant le même code d’analyse du flux RSS (qui est pareil partout lui). Définir une nouvelle source de « type RSS » demande donc moins de travail.

Si SPIP proposait également ce flux RSS, se serait très pratique pour Meta-Press.es.

Si tous les journaux proposaient ce flux RSS, le code Meta-Press.es en serait grandement simplifié !

Guide égalité femmes-hommes
►http://www.haut-conseil-egalite.gouv.fr/IMG/pdf/guide_pour_une_communication_publique_sans_stereotype_de_s

10 RECOMMANDATIONS pour une communication publique sans stéréotype de sexe

· 1 Éliminer toutes expressions sexistes
· 2 Accorder les noms de métiers, titres, grades et fonctions
· 3 User du féminin et du masculin dans les messages adressés à tous et toutes
· 4 Utiliser l’ordre alphabétique lors d’une énumération
· 5 Présenter intégralement l’identité des femmes et des hommes
· 6 Ne pas réserver aux femmes les questions sur la vie personnelle
· 7 Parler « des femmes » plutôt que de « la femme », de la « journée internationale des droits des femmes » plutôt que de la « journée de la femme » et des « droits humains » plutôt que des « droits de l’homme »
· 8 Diversifier les représentations des femmes et des hommes
· 9 Veiller à équilibrer le nombre de femmes et d’hommes
· 10 Former les professionnel.le.s et diffuser ce guide

Éliminer toutes expressions telles que « chef de famille », « mademoiselle », « nom de jeune fille », « nom patronymique », « nom d’épouse et d’époux », « en bon père de famille »

#2016 #SPIP

Hé @spip, je viens d’installer un #SPIP_3.2.7, sur un serveur où il est possible que j’ai des droits un peu bizarres (c’est pas moi qui héberge). Et ça m’indique :

Hello #SPIP : est-ce que vous avez de l’expérience avec SPIP branché sur un base PostGreSQL ? Est-ce que ça induit des changements ou est-ce que c’est totalement transparent ? Est-ce qu’un outil comme Adminer dans SPIP continue de fonctionner, ou bien est-il totalement lié à mySQL/MariaDB ? Sinon est-ce qu’il y a un équivalent à Adminer ?

Gis - Agenda

Le plugin GIS - Agenda permet de lier plus facilement Gis et Agenda, en proposant d’ajouter un point géolocalisé directement après la création d’un évènement.

▻https://contrib.spip.net/Gis-Agenda

#spip_blog

Formulaire de configuration avec le plugin Saisies

Cet article explique comment créer avec le plugin Saisies 3.37.1 ou ultérieur un formulaire de configuration pour un plugin.

▻https://contrib.spip.net/Formulaire-de-configuration-avec-le-plugin-Saisies

#spip_blog

Temps de lecture pour #spip par @touti

Le plugin temps de lecture calcule et affiche le temps de lecture d’un texte

▻https://contrib.spip.net/Temps-de-lecture

https://contrib.spip.net/IMG/png/capture_d_e_cran_2020-05-05_a_22.48.18.png

#spip_blog

Editor.js
▻https://editorjs.io

Un éditeur de texte pour appli web, structuré en mode « blocs » et avec une sortie en JSON (semblerait un bon candidat pour un éditeur moderne pour SPIP...)

Key features:
– It is a block-styled editor
– It returns clean data output in JSON
– Designed to be extendable and pluggable with a simple API

What does it mean «block-styled editor»
Workspace in classic editors is made of a single contenteditable element, used to create different HTML markups. Editor.js workspace consists of separate Blocks: paragraphs, headings, images, lists, quotes, etc. Each of them is an independent contenteditable element (or more complex structure) provided by Plugin and united by Editor’s Core.
There are dozens of ready-to-use Blocks and the simple API for creation any Block you need. For example, you can implement Blocks for Tweets, Instagram posts, surveys and polls, CTA-buttons and even games.

What does it mean clean data output
Classic WYSIWYG-editors produce raw HTML-markup with both content data and content appearance. On the contrary, Editor.js outputs JSON object with data of each Block. You can see an example below
Given data can be used as you want: render with HTML for Web clients, render natively for mobile apps, create markup for Facebook Instant Articles or Google AMP, generate an audio version and so on.

#éditeur #editorjs #SPIP #edition_bloc #json #WYSIWYG

J’ai besoin, pour un site #SPIP sur lequel je travaille, d’interdire l’utilisation de couleurs trop vives dans l’interface. J’utilise beaucoup de couleurs, chaque titre de la page d’accueil est de la couleur a sa propre couleur, alors si on affiche des couleurs vives, ça devient un arbre de Noël (et ce n’est pas l’esprit du truc). Je veux que l’ensemble reste dans des tons « éteints ».

Pour cela, il suffit de limiter la valeur S (saturation) quand on passe la couleur en mode HSL (ou TSI en français).

Voici un bleu ni trop vif ni trop terne (valeur de S : 60% ; dans SPIP, on codera 0.6) :

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

Si on pousse la saturation à 100% (dans SPIP : 1), on obtient une belle couleur qui pète :

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

Et si on passe à 0%, on arrive au gris :

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

On notera que, tant qu’on ne modifie pas L (ou I), je continue donc à avoir des couleurs très lumineuses ou très foncées, et il faut donc que je prenne cela en compte dans mon interface (avec les usuels |couleur_foncer_si_claire et autres outils bien pratiques pour gérer des interfaces qui changent de couleur).

C’est juste qu’ici, je veux limiter la valeur maximale de la saturation (le côté « couleur éteinte / couleur vive »). Pour cela, une petite fonction qui va bien :

La fonction est facile à modifier si, par exemple, on veut travailler uniquement avec des couleurs dans des tons pastel, on supprime la variable $val, et on remplace la ligne :