#plugin

et #spip_recette donc

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

2) La bonne méthode 💻💬👌

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

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

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

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

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

https://i0.wp.com/www.club-innovation-culture.fr/wp-content/uploads/visuel-methode-curie-1.jpg?fit=1200%2C676

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

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

Relativement d’accord, mais avec une légère nuance : je pense que ce sera bien pire qu’avant.

#SPIP est efficace pour gérer une #pétition ?

C’est même une des premières fonctionnalités intégrées à SPIP, puisqu’il fallait gérer le « Manifeste du Web indépendant ». Mais il faudrait demander à la bande du #plugin Formidable si ça apporte des choses en plus, ou plus modernes…

Je peux demander où?

Attends qu’ils rentrent de leur promenade dominicale, je pense que Rasta et la bande auront toutes les bonnes réponses. Normalement, en cette saison, ils ne passent jamais plus d’une heure dehors…

@monolecte et @arno J’ai du monter une pétition en urgence il y a un an environ, et ça donnait ce site

https://www.eliaz.fr/IMG/logo/arton56.jpg

En résumé, il faut : un SPIP avec un article dont la pétition est active, le plugin facteur pour brancher le site sur une boite mail ou un service externe afin d’être certain que les emails de validation des signatures arrivent à destination et un petit squelette qui affiche la pétition en page d’acceuil. Et optionnellement le plugin champs extras si on veut ajouter des champs persos au formulaire de pétition.

À l’époque je me disais que ça pourrait faire l’objet d’une « distribution SPIP » dédiée à ça ne serait-ce que pour proposer une alternative à tous les change.org et cie.

PS : je peux partager le squelette sur repo public si quelqu’un en a besoin.

La réponse à @monolecte est simple : oui SPIP peut parfaitement faire ça.

Après pour le détail, je vais décevoir : je n’ai pas d’avis sur le choix entre l’ancien plugin « Pétitions » (fourni de base avec SPIP) versus « Formidable ».

En théorie Formidable permet de faire tout ce que fait Pétitions en bien plus complet. Notamment en pouvant choisir plus librement les champs qu’on veut demander. Mais ça peut bien forcer l’unicité d’un champ (l’email à priori, pour avoir des réponses uniques), et interdire de répondre plusieurs fois. Et ça peut aussi bien garder les réponses en mémoire dans la base et/ou l’envoyer à diverses personnes par email.

Le tout est d’avoir un article avec le texte et de présenter ça correctement, quelque soit le formulaire utilisé comme le montre @b_b.

Ah et sinon @monolecte pour poser des questions sur SPIP, tu peux toujours aller sur l’IRC, ya quasiment toujours des gens qui pourront répondre. :p

C’est pour faire une pétition pour demander à Change.org de remettre en ligne celle sur la 5G en Belgique ?

Cela fait des mois que mon syndicat me tanne parce que je refuse (à juste titre) de signer des merdes dans chanqe.org, mais que je n’ai pas de solution libre à leur proposer à la place.

Là, je vais bouffer mon chapeau et me taper une sieste pour le digérer.

Ah oui tout de même : l’erreur venait de mon signalement initial sur Seenthis en… 2011
▻https://seenthis.net/messages/13252

Ça doit pas être une fonction utilisée par trop de monde, donc… :-))

Huhu, seenthis => contrib => seenthis =>... belle boucle ;)

I would thank you for your helpful advice i didn’t even know . thanks

@seenthis « Spam, spam, spam » (+ émoji notes de musique)

@jeanmarie je doute sur la teneur en spam du compte @amin je laisse l’équipe décider sur ce point.

@b_b : il a quand même 2 symptômes « types » des comptes de spammeurs :
– son pseudo est identique au nom de son site (net2.com)
– ses billets n’ont référencé que son site

@cy_altern je vous laisse en débattre sur la liste seenthis et me signaler s’il est nécessaire de supprimer le compte.

/me retourne faire des cartons...

Toi tu ne traines pas assez sur contrib.spip.net, ou alors tu ne lis pas la gazette ►https://blog.spip.net/-Gazette-.html :p

Donc, maintenant il n’y a plus 5 ou 6 plugins pour gérer des newsletters dans SPIP, mais un seul (une collection de plugins pour être plus précis) maintenu par la communauté :

▻https://contrib.spip.net/Newsletters

Et comme les choses sont bien faites, tu peux importer tes abonné⋅e⋅s depuis un ancien plugin vers le « nouveau » cf ▻https://contrib.spip.net/Mailsubscribers#Migration-depuis-un-ancien-plugin

Comme dirait @suske : « SPIP c’est bôôôôôôô » :)

Je vais tenter le coup. Je récupère un vieux site SPIP, où toutes les fonctions ont été recollées « à la main », avec du PHP en dur partout, le cache à zéro… Alors la migration vers SPIP 3, c’est fun…

Bonne nouvelle cette mise à jour !

Mise à jour à l’instant (version 7.7.5) qui corrige le fait que, sur certains serveurs, les images WebP sont mal formées à cause d’un bug de PHP (nan mais vraiment, on est en 2019, et PHP continue à être livré avec des bugs grossiers dans les traitements d’images…) :
▻https://bugs.php.net/bug.php?id=66590

Si tu as eu des problèmes avec la version précédente, et que donc ton dossier de cache /local est pourri de fichiers WebP corrompus, voici un petit script pour faire le ménage (à la racine du site donc) :

Autre bug je pense : sur les serveurs qui déconnent (ci-dessus), je n’arrive pas, en plus, à fabriquer de WebP avec couche de transparence (c’est-à-dire en travaillant à partir de PNG transparent). Mais ça fonctionne sur un serveur qui n’a pas le bug précédent. (Pfff, vraiment… je veux dire : personne n’a testé la fonctionnalité de base quand ils l’ont implémentée complètement buguée ?).

M’enfin sinon, sur un serveur en PHP 7, ça fonctionne très bien, j’ai désormais plusieurs sites qui tournent avec. Avec un serveur PHP 5, ça tourne aussi très bien, à l’exception des PNG semi-transparents qu’on passerait par image_responsive (c’est pas le plus fréquent).

C’est beau :)

http://vrac.kupaia.fr/vectooor.png?1

Par contre on dirait qu’il y a un petit glitch avec image_geopotrize par défaut.

PS : le glitch est corrigé et c’est encore plus beau :)

Hop, pour info, en SPIP 3.2 tu peux indiquer qu’un plugin nécessite une librairie php dans le paquet.xm, exemple <necessite nom="php:mbstring" /> ; cf commit ▻https://core.spip.net/projects/spip/repository/revisions/23396

En ajoutant ça dans ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_plugins_/plugins_seenthis/lien_court/trunk/paquet.xml cela permettrait d’avertir les gens qui installent le plugin ;)

#image #image_responsive #adaptive_image

also available in english #SPIP #plugin
> ▻https://contrib.spip.net/TimeCircles-plugin-for-SPIP-3-1

Ajouter à SPIP des chronomètres et des comptes à rebours, personnalisables et animés par jQuery.

#spip_blog

Un fallback CSS à coucher dehors:
▻http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html

Je viens d’uploader une mise à jour de mon #plugin #SPIP CSS imbriqués :
►https://zone.spip.org/trac/spip-zone/browser/_plugins_/css_imbriques

On peut désormais utiliser un pseudo-style -spip-text-background par exemple ainsi :

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

Le #plugin #SPIP « Image responsive » d’@arno utilise la méthode Netflix si je ne m’abuse.
A peu de chose près : les images ne sont pas en absolute, c’est le contenant <picture> qui a une hauteur à 0

►https://www.paris-beyrouth.org/Plugin-SPIP-Image-responsive

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

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

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

et une fois l’image chargée :

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

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

Super astuce, merci :)

Merci pour cette astuce du fond d’image en dégradé CSS.

J’ai essayé de naviguer au clavier et impossible de dérouler le hamburger :(

@realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.

Je fais ceci :

Bravo ! quelle réactivité !

#spip_recette

Tiens, je continue : je mets des espaces fines insécables avant les unités (mm, cm)

#intégration #web #accessibilité #lisibilité

#idée_pour_spip #plugin ?

Bonjour
Je cherche à comprendre pourquoi (et surtout si c’est normal) avec background_responsive il y a dans le code html de la page 4 appels d’images (avec 1 px de différence) pour chaque taille (je comprends pour 1 et 2 mais pas i et p).
EX :
\"960\" :{\"i\" :{\"1\" :\"local\\/cache-responsive\\/cache-960\\/d32c7d34962d8ea6f4fa0a9b008cdf7c.jpg ?1529623009\",\"2\" :\"local\\/cache-responsive\\/cache-960\\/d32c7d34962d8ea6f4fa0a9b008cdf7cd32c7d34962d8ea6f4fa0a9b008cdf7c-2.jpg ?1529623010\"},\"p\" :{\"1\" :\"local\\/cache-responsive\\/cache-960\\/5e9c6d2f4211f48525892e5f9f166dc6.jpg ?1529623011\",\"2\" :\"local\\/cache-responsive\\/cache-960\\/5e9c6d2f4211f48525892e5f9f166dc65e9c6d2f4211f48525892e5f9f166dc6-2.jpg ?1529623012\"}

Merci

Pour créer l’effet de dégradé ci-dessus…

(1) Je pars de l’image d’origine (celle-ci n’est pas très grande, je préfère si possible travailler avec des images de 2400 pixels de large, pour couvrir les besoins d’un écran haute définition de type iPad) :

http://orientxxi.info/IMG/arton1423.jpg

(2) Dans mon logiciel de dessin, je déterminer (avec des règles bleues ici) comment découper mon image :

http://i.imgur.com/WGJaQxN.jpg

(3) Étape particulièrement importante : j’applique un dégradé vers une couleur d’aplat (qui correspondra à la couleur de mon fond d’article) sur la partie basse de l’image :

http://i.imgur.com/VaAKSIY.jpg

(4) Je découpe l’image en deux parties :

http://orientxxi.info/IMG/fonds/article1423/img_haut1423.jpg http://orientxxi.info/IMG/fonds/article1423/fond_haut1423.jpg

Je sauvegarde ces deux images (img_haut.jpg et fond_haut.jpg par exemple) sur mon disque dur.

(5) Je me rends dans l’espace privé de mon site, sur l’article qui convient, et je trouve en colonne de droite, l’encadré suivant :

http://i.imgur.com/JHXowVn.jpg

Les deux intitulés qui m’intéressent sont : « Image du haut », où je vais installer img_haut.jpg, et « Dégradé du haut » où j’installe fond_haut.jpg. Je peux uploader via « Enregistrer », mais ici, je vais cliquer plutôt sur la pipette.

http://i.imgur.com/PUS7ayG.jpg

Et hop… Cela donne directement une vue réduite de la page :

http://i.imgur.com/fvNXCLn.jpg

La pipette a indiqué que je voulais extraire automatiquement la couleur en bordure bas de l’image. Si le résultat automatique ne convient pas, je peux évidemment renseigner le code de la couleur à la main. (Et à l’inverse, si j’ai oublié de passer par la pipette pour uploader les images, je peux simplement cliquer sur la pipette une fois les images déjà chargées, ça fonctionnera aussi.)

Si nécessaire, j’effectue la même opération pour le bas de l’article.

On peut tout à fait n’installer qu’une image de haut, ou qu’une image de dégradé du haut, ou la même chose en bas, selon la nature des images qu’on utilise. Toute la difficulté, c’est de bien prévoir à quel endroit on accepte ou on interdit de placer le texte par dessus l’image, avant tout par souci de lisibilité.

Un autre usage très simple consiste à ne même pas utiliser d’image, ni en haut ni en bas, mais à simplement choisir une couleur de fond d’article.

Au niveau des squelettes, il faut modifier son squelette d’article pour appeler fonds_article.html, par exemple :

Ce squelette gère l’ajout des images. En revanche, c’est toujours à vous de créer le squelette d’affichage du bloc de texte de l’article (contenant le texte, mais aussi le titre, le sous-titre, et tout ce que vous voulez…).

De manière automatique, le squelette du plugin essaiera de charger un squelette : inc/contenu-article.html

mais vous pouvez aussi lui passer un autre nom de squelette, que vous passerez dans une variable contenu_article :

Oui, c’est un peu brut de décoffrage, il va falloir bosser un peu de votre côté…

Ah, un détail mignon : sur écran de petite taille (smartphone, tablette verticale), les images sont recadrées automatiquement, on conserve tout leur contenu vertical, mais on supprime une partie de la droite et de la gauche de l’image. De cette façon, sur petit écran, on limite l’aspect « minuscule bandeau horizontal », en « zoomant » un peu par rapport à l’image d’origine.

Quelques remarques :

– d’expérience, ce n’est pas évident du tout à utiliser ; pas techniquement (une fois qu’on a réussi à bidouiller les squelettes), ni de l’interface, mais surtout au niveau graphique ; si on n’a pas de solides compétences de graphisme (et si on ne sait pas bien utiliser un logiciel de manipulation d’images), on n’y arrivera pas ;

– du coup : ça réintroduit un graphiste dans la mise en ligne des articles. (Je te laisse réfléchir à ça…)

– réaliser les images du haut avec des dégradés est généralement beaucoup plus difficile que de créer les images du bas de l’article. Avec les images du haut, on est généralement coincés par le corps des gens, sur lesquels on ne peut pas facilement appliquer de dégradé de couleur… avec les images du bas, on a souvent le ciel ou le plafond, c’est nettement plus facile (mais moins spectaculaire puisqu’on ne le voit qu’après avoir scrollé tout l’article)

– par ailleurs, il faut essayer de faire des images « du haut » (au-dessus) du texte très larges et pas trop hautes, c’est-à-dire de grands bandeaux très horizontaux, puisque sinon on va rejeter le texte après l’image, possiblement en dehors de l’écran ; ça ajoute encore de la difficulté dans la création des images de fond du haut de l’article (alors que, en bas de page, on n’a aucun problème à avoir une image très haut).

Le plugin permet aussi de gérer une image en fond d’article (ni en haut, ni en bas, « en fond »…). Cela se passe dans la partie basse de l’interface :

http://i.imgur.com/IMLOOPi.jpg

On chargera donc une image dans « Image de fond », qui devra s’afficher sous le bloc de texte de l’article.

Il y a alors trois options pour dimensionner ce bloc de texte :

– taille automatique, le bloc aura naturellement la taille fabriquée par son contenu ; c’est l’image qui tentera de s’adapter aux dimensions du bloc de texte (donc de manière potentiellement grotesque) ;
– remplir l’écran, le bloc aura la hauteur de la fenêtre du navigateur ; si nécessaire, le plugin ajoutera de l’espace en haut et bas du texte pour centrer le texte dans l’écran, ou au contraire provoquera un ascenseur vertical (pas dément). C’est surtout destiné à un texte très court. Et c’est excessivement difficile à maîtriser, à cause des grandes différences de tailles d’écrans ;
– proportions de l’image : fabriquer un bloc de la « taille » de l’image affichée sur toute la largeur de l’écran ; on ne cherche pas à « remplir » l’écran, mais à afficher toute l’image. Comme précédemment, c’est destiné aux textes courts, ça ajoute du blanc ou ça ajoute des ascenseurs selon la hauteur du bloc de texte, mais c’est généralement plus facile à maîtriser…

Dans le cas de remplir l’écran, par défaut le plugin affichera l’image en « position : fixed », l’image s’affichera avec cet effet de « parallaxe » (qui personnellement me sort désormais par les oreilles…), c’est-à-dire un élément qui ne scrolle pas pendant que le reste de la page défile.

Et une dernière technique : si tu fais ça en haut et bas d’articles, et que tu affiches tous les articles d’une rubrique les uns après les autres dans la même page, tu obtiens un énorme… longform. Et c’est comme ça que j’ai fabriqué ma démo de la Nasa. (Ou, moins « fondue » graphiquement, la page d’accueil de Paris-Beyrouth.)

Dans le cas de la Nasa, toute la difficulté consiste à découper les images pour que le bas de l’article se « fonde » pour devenir le haut-dégradé de l’article suivant, et qu’on ait ainsi une impression de passage d’un article à l’autre avec une même grande image dégradée vers le haut et vers le bas. C’est pas évident à faire graphiquement, ça demande des images très spécifiques, le choix des couleurs se complique d’autant, mais le résultat est assez bluffant.

Super !

Au niveau technique (je fais ce que je sais hein :p) il y aurait sûrement moyen de rendre ça générique pour l’activer (avec une config) sur n’importe quel type de contenu (objet SPIP). Le stockage est dans un sous-dossier « article123 » donc on devrait pouvoir avoir la même chose pour « rubrique123 » ou « patate123 ».
(D’ailleurs je ne vois pas pourquoi l’id est répété dans le nom des fichiers, puisqu’on stocke déjà tout dans un sous-dossier dédié à tel contenu précis.)

Pour les images, effectivement je ne vois pas ce qu’on pourrait automatiser de plus, et donc il faut forcément des compétences graphiques, c’est sûr.

À la limite, avec une interface plus complète dans l’admin avec du JS, on pourrait imaginer faire le découpage, définir la ligne où va commencer le dégradé, et créer le dégrader (pas auto, avec un outil graphique pour définir l’amplitude, etc)… il y a des librairies JS qui permettent de manipuler ce genre de choses. Mais bon ça demande un sacré gros boulot en plus…

@rastapopoulos :

– oui sur la généralisation, très juste, juste faire attention que ça stocke trois petites infos en base de donnée de l’objet (intitulé des images, et dimensionnement quand image de fond) ;

– ne me demande pas pourquoi je répète le numéro dans un dossier déjà numéroté :-))

– une évolution que j’envisage, effectivement, c’est de ne plus demander deux images pour gérer l’endroit où commence le texte, mais d’utiliser directement un curseur à gérer par glisser-déposer sur l’image dans l’interface privée ; parce que c’est un des points les plus bloquants pour les usagers ;

– une autre difficulté : mon plugin image_reponsive ne fabrique pas de timestamp, et comme il faut souvent s’y reprendre à plusieurs fois, hé ben c’est pas pratique parce que l’usager lambda se fait planter par son cache quand il veut voir ses nouvelles images…

#spip_blog