#SPIP : quelqu’un sait où je peux trouver un plugin qui utiliserait le nouveau SortableJS, censé remplacer la version de jqueryui ?
Sinon je vais attendre que @rastapopoulos s’attelle à la mise à jour de Sélections éditoriales pour voir comment ça se fait proprement…
En attendant, j’ai recodé le #plugin centre_image, mais avec une gestion maison du drag-drop de la petite croix :
▻https://git.spip.net/spip-contrib-extensions/centre_image
Nouveau #plugin #SPIP : obfuscation_liens
▻https://git.spip.net/spip-contrib-extensions/obfuscation_liens
C’est pour faire du SEO. Ça s’utilise via un #FILTRE{obfuscation_liens} dans le squelette concerné : dans ce cas tous les liens trouvés dans ce squelette sont transformés en <span>, et le lien (href) est encodé en base64 et installé dans un data-obf.
Il paraît que c’est la seule façon de réellement « cacher » un lien pour le crawler de Google, qui ne respecterait pas réellement les no-follow.
Faudra penser à mettre à jour son descriptif issu d’un copier/coller ▻https://git.spip.net/spip-contrib-extensions/obfuscation_liens/src/branch/master/paquet.xml#L10 ;)
PS : c’est pas un peu une abomination si les liens ne sont plus fonctionnels sans js ?
Oui alors à la base, ce genre de chose n’est pas non plus ma tasse thé… :-)
Mais vu qu’on m’a demandé de le faire, parce qu’une spécialiste du SEO a fait un audit du site, j’ai pas trop le choix, autant partager l’outil.
Aprrrrrrèèèèèès (mais vraiment loin après) :
– l’utilisation première est restreinte à certains liens externes omniprésents (dans les footers notamment), qu’on est plus ou moins obligés d’avoir pour des raisons politiques, mais qui ne servent pas à grand chose, et qui d’après la spécialsite SEO, nuisent au référencement…
– dans une interface très graphique, j’ai un bout d’interface très visuel, totalement redondante avec la navigation traditionnelle, je me dis qu’éviter de coller des liens difficiles à comprendre là-dedans pour les gens qui ne voient pas l’interface, alors qu’on a la même information, mais proprement structurée par ailleurs, ça peut se justifier (je ne vais pas le jurer, mais p’têt ben que oui).
Au fait, il faut faire quelque chose pour que le plugin devienne accessible en installation automatique, ou bien c’est plus la peine depuis qu’on est sous Git ?
bon mais par contre le lien ne serait plus accessible sans js, si je comprend bien ?
Pour faire un tag (et autres commandes git si besoin) : ▻https://contrib.spip.net/Equivalences-des-commandes-SVN-GIT
un autre intérêt que je verrais à l’obfuscation, c’est si je veux referencer un site (car source pour un article que j’écris) sans pour autant augmenter son SEO (genre si je cite un texte d’un cite d’extreme droite ou du gouvernement)
@maieul Pour le moment, je ne suis pas allé chercher plus précisément que tous les liens dans un bout de squelette, donc là c’est pas fait pour.
Il faudrait un autre filtre qui irait taper uniquement sur des liens avec un classe précise (.spip_obf par exemple), mais de toute façon je ne vois pas comment fabriquer des liens avec une classe spécifique dans les raccourcis SPIP.
@maieul Avec ce filtre on peut introduire une règle pour les auteurs d’un site. Par exemple en filtrant les champs #DESCRIPTIF, #TEXTE etc. SPIP n’afficherait en clair que les liens de la table spip_syndic ou contenus dans #PS , alors les auteurs devraient décider sur l’affichange ou non d’un lien en le plaçant ou dans le texte ou dans un contexte de publication en clair.
Ce filtre ajoute également un argument supplémentaire à la question des liens « interdits par la loi » dont on peut questionner l’illégalité quand les « liens » sont rendus inopérants sans javascript et exclu du référencement par les crawler .
Modif de mon script de détection de la compatibilité #WebP du navigateur dans mon #plugin #SPIP image_responsive :
►https://git.spip.net/spip-contrib-extensions/image_responsive
Jusqu’à présent, je me contentais d’un test synchrone en Javascript, avec un code assez simple. Le hic : Firefox compatible avec WebP n’était pas détecté comme compatible. Et re-hic avec les mises à jour récentes de MacOs et iOS, Safari a le même souci.
La nouvelle méthode : je fais le teste synchrone. Si le test synchrone dit que le navigateur est compatible, tant mieux, on s’arrête là, c’est oui.
Si le test synchrone échoue (peut-être Safari ou Firefox), alors je balance un test asynchrone. En attendant, pour cette première page, tant pis, les scripts considèrent que le navigateur n’est pas compatible, et on travaille avec JPEG ou PNG à la place de WebP.
Mais à la fin du teste asynchrone, je stocke le résultat (oui/non) en LocalStorage. Et ainsi, à la page suivante, je récupère directement le résultat du localstorage, et j’affiche ou non le WebP sans refaire de test de compatibilité. Et ça fonctionne nickel avec Safari et Firefox (à partir de la seconde page donc).
Et au passage, j’introduis exactement la même méthode pour le format #Avif (pour le coup, ça détecte bien Chrome, qui pourtant ne passe pas non plus le test synchrone – même bug bizarre sur le MimeType de image/avif qui est détecté comme image/png).
Sur un site #SPIP, j’ai besoin de détecter les langues des messages, mais je ne veux détecter que dans trois langues (français, anglais, allemand).
Du coup mon #plugin seenthis_detecter_langue n’est pas utilisable directement :
▻https://git.spip.net/spip-contrib-extensions/seenthis_detecter_langue
parce que je n’ai pas prévu de limiter arbitrairement le choix des langues. (Ce qui est assez logique en général.)
Du coup, dans mes_fonctions.php, je fabrique une fonction detecter_la_langue ainsi :
$my_ngrams = false;
function detecter_la_langue($texte) {
if (!$my_ngrams) {
$my_ngrams["fr"] = $GLOBALS["ngrams"]['fr'];
$my_ngrams["en"] = $GLOBALS["ngrams"]['en'];
$my_ngrams["de"] = $GLOBALS["ngrams"]['de'];
$GLOBALS["ngrams"] = $my_ngrams;
}
return detecter_langue($texte);
}Du coup on ne teste les « ngrams » que sur ces trois langues, donc le plugin ne pourra plus retourner qu’une de ces trois valeurs.
Tu me dira que je pourrais coder ça proprement directement dans le plugin, mais comme je trouve que limiter arbitrairement la détection des langues n’est généralement pas une bonne idée, je préfère pas l’intégrer au plugin.
Ha ben je tombe justement sur un problème avec détecter langue qui attribue la langue ca dès que le mot « invariable » est dans le texte d’un post seenthis, et #du_coup je me dis que ça serait pas mal de pouvoir étendre ou limiter le bouzin :p
PS : j’ai fourbé comme un crado avec cet ajout dans mes_fonctions.php :
include_spip("inc/detecter_langue");
unset($GLOBALS["ngrams"]['ca']);
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
apparemment encore plus fort que webp : AVIF
▻https://reachlightspeed.com/blog/using-the-new-high-performance-avif-image-format-on-the-web-today
Un autre article à propos du format #AVIF avec des comparaisons assez bluffantes ▻https://jakearchibald.com/2020/avif-has-landed
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 :
define("_HTML5_RESPONSIVE_ACCESSIBLE", false);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…).
On vient de livrer, avec Mosquito, la bande dessinée numérique La Méthode Curie pour le Musée Curie
▻https://lamethodecurie.fr
C’est évidemment sous #SPIP, et c’est réalisé avec mon plugin permettant de fabriquer des cases animées dans l’espace privé (#shameless_autopromo donc).
La Méthode Curie : la bande dessinée numérique du Musée Curie
▻https://curie.fr/actualite/notre-histoire/la-methode-curie-la-bande-dessinee-numerique-du-musee-curie
Le Musée Curie dévoile, ce lundi, un roman graphique au dessin soigné, qui décrit « La méthode curie », une méthode expérimentale, mise en place pour mesurer la radioactivité. Le fonctionnement des appareils utilisés par Marie et Pierre Curie est expliqué avec clarté, humour, et pédagogie. Ce document digital unique a pour vocation de rendre accessible l’histoire et le fonctionnement de la méthode Curie de façon ludique. Grâce à ces explications autour de ce dispositif, il s’agit aussi de rappeler que la recherche scientifique ne s’appuie pas seulement sur des intuitions scientifiques, mais sur la maîtrise d’outils technologiques. L’ambition est triple pour le musée : rendre le visiteur autonome lorsqu’il visite l’exposition sans guide ou animation, sortir des murs du musée et toucher un public plus large, notamment en interessant les adolescents et jeunes adultes.
Depuis leur ordinateur, smartphone ou leur tablette, les lecteurs découvrent ainsi “La méthode Curie” et plongent dans l’univers augmenté de la BD. Ils ont ainsi accès à des archives numérisées, mais aussi à des textes d’approfondissement rédigés par les experts du Musée Curie. Une bonne occasion de « visiter » le Musée Curie de manière renouvelée et virtuelle, en attendant que cette méthode Curie soit accessible « in situ » lors de la réouverture du musée en septembre 2020.
Mon outil d’animation permet d’empiler des images, et pour chaque d’indiquer une position de départ et une position d’arrivée, une durée d’animation… et tout cela est traduit en animations CSS, donc sans Javascript. Les images sont responsive pour s’adapter aux dimensions et résolutions d’écrans, et avec les nouvelles version du #plugin image_responsive, les versions WebP des images sont également fabriquées automatiquement :
Notre première réalisation avec cet outil, c’était Le Portrait d’Esther :
►http://portrait-esther.fr
Ennemi de la routine - Muzeodrome - par Omer Pesquer
▻https://muzeodrome.substack.com/p/ennemi-de-la-routine
2) La bonne méthode 💻💬👌
“A la croisée de la BD, de l’animation, du roman historique et d’une leçon de science, « la méthode Curie » tente de mettre en valeur les instruments scientifiques utilisés par les Curie et faire comprendre leurs recherches sur la radioactivité.”
Basé sur une proposition originale d’Emmanuel Rouillier (directeur de l’atelier Mosquito), ce projet a été réalisé pour le Musée Curie dans le cadre de l’appel à projet 2019 en faveur du tourisme culturel de la Direction Régionale des Affaires Culturelles de la région Île-de-France. Les cinq auteur·e·s du projet sont : Marion Augustin (spécialiste de la médiation culturelle) - Camilla Maiani (physicienne) - Guillaume Reynard (illustrateur) - Emmanuel Rouillier (designer interactif) - Arnaud Martin (développement technique).
Arnaud Martin a été un des pionniers du web français aussi bien du coté technique que du coté social. Je l’ai d’abord connu sous le nom de Arno* en 1997 à l’époque d’uZine et du "Manifeste du Web indépendant" (dont il est un des co-auteurs). A la mi-2000, dans le cadre des évolutions d’uZine, Arno* créait un nouveau gestionnaire de contenu Web (CMS), identifié plus tard sous le nom de SPIP (lire cet entretien avec David Dufresne, autre co-auteur du Manifeste du Web indépendant). Rarement dans la lumière médiatique, Arnaud Martin a continué de développer à sa façon des "choses" avec des technologies Web (comme l’outil de short-blogging SeenThis en 2009).
Arnaud Martin travaille régulièrement avec Emmanuel Rouillier. En janvier 2016, ils mettaient en ligne pour les Musées d’Angers le premier épisode du "Portrait d’Esther", une bande dessinée numérique multi-dispositifs qui utilisait SPIP avec le plugin spécifique CMS COMICS. Plus 500 scènes dessinées ont ainsi été animé pour les 5 épisodes du "Portrait d’Esther" ! Le fait qu’Arnaud Martin soit le concepteur principal de SPIP lui a permis de développer ce projet singulier. “La méthode Curie”, bande dessinée « augmentée » qui s’adresse particulièrement aux adolescents et aux jeunes adultes, a été mise en mouvement avec CMS COMICS.
« La méthode curie » : la nouvelle bd interactive et en ligne, lancée par le musée Curie – Club Innovation & Culture CLIC France
▻http://www.club-innovation-culture.fr/methode-curie-bd-interactive-musee-curie
Le lundi 22 juin 2020, le Musée Curie a publié sur son site web un contenu numérique très original pour permettre de découvrir tout en s’amusant la vie et l’œuvre de Marie et Pierre Curie. À travers une bande dessinée numérique, à la croisée entre BD et roman graphique, ce contenu en ligne offre l’opportunité de plonger au cœur de la méthode Curie, un dispositif mis en place par les époux Curie à la fin du XIX siècle pour mesurer la radioactivité.
Ce nouveau contenu web lamethodecurie.fr est disponible de manière autonome et via le site web du musée musee.curie.fr. Il donne l’occasion de découvrir ou revisiter avec cette fiction digitale l’histoire de cette méthode de mesure inédite et grâce à laquelle les Curie ont découvert deux nouveaux éléments chimiques radioactifs : le polonium et le radium.
Un après Covid-19 différent ? On a raison de ne pas y croire.
Certains rêvent de réformes d’ampleur pour contrer le dérèglement climatique, de reconversion industrielle, d’élargir les pistes cyclables à la façon allemande.
Mais il n’en sera rien. C’est le pouvoir de l’argent.
On se remettra à fumer sorti de la greffe de poumon.
Y’a bien des petites asso qui tentent des trucs, mais c’est que des pétitions.
▻https://france.attac.org/se-mobiliser/que-faire-face-au-coronavirus/article/petition-plus-jamais-ca-signons-pour-le-jour-d-apres
La mentalité du Medef ne changera pas. Les dividendes vont couler à flot.
▻https://www.lemonde.fr/economie/article/2020/04/10/coronavirus-ces-groupes-allemands-qui-veulent-payer-des-dividendes-malgre-le
C’était le chaos rêvé, mais ça n’aura pas suffit.
Relativement d’accord, mais avec une légère nuance : je pense que ce sera bien pire qu’avant.
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…
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
(le site n’est plus en ligne, la pétition a fait son job).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.
Erratum. Je viens de corriger la documentation du #plugin #SPIP microcache :
►https://contrib.spip.net/Plugin-microcache
On (je ?) avait indiqué qu’on pouvait effacer le microcache avec une fonction effacer_microcache. Il fallait lire : supprimer_microcache.
Tout de suite ça fonctionne beaucoup mieux…
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 ;)
▻https://git.spip.net/explore/organizations
Récupérer les données détaillées des repos git de SPIP au format JSON :
– le core : ▻https://git.spip.net/api/v1/orgs/spip/repos
– les plugins : ▻https://git.spip.net/api/v1/orgs/spip-contrib-extensions/repos
– les squelettes : ▻https://git.spip.net/api/v1/orgs/spip-contrib-squelettes/repos
– les thèmes : ▻https://git.spip.net/api/v1/orgs/spip-contrib-themes/repos
– les outils : ▻https://git.spip.net/api/v1/orgs/spip-contrib-outils/repos
– galaxie : ▻https://git.spip.net/api/v1/orgs/spip-galaxie/repos
(source : ▻https://git.spip.net/spip-contrib-outils/git_loader/src/branch/master/git_loader.sh#L81
merci @azerttyu )
#SPIP #git.spip.net #json #plugins
@seenthis « Spam, spam, spam » (+ émoji notes de musique)
@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...
Un aperçu de WP-VCD, la plus grande opération de piratage WordPress actuelle - ZDNet
▻https://www.zdnet.fr/actualites/un-apercu-de-wp-vcd-la-plus-grande-operation-de-piratage-wordpress-actuelle-39
contrib/git_loader - git_loader.sh at master - git_loader - SPIP on GIT
▻https://git.spip.net/contrib/git_loader/src/branch/master/git_loader.sh
Ce script sh s’occupe d’installer/mettre à jour une distribution
SPIP (core + plugins-dist). Soit tout en master soit à une version SPIP (sur la base des tags spip-x.y.z pour les plugins)
#spip #loader #git #plugins-dist #bash
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…
Grosse nouveauté sur mon #plugin #SPIP image_responsive :
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/image_responsive
Le filtre image_responsive est désormais capable de fabriquer les versions WebP des images, en plus des versions usuelles. Ce qui fait que, si on visite le site avec un navigateur qui comprend WebP, ce sont les versions WebP des images que l’on charge, sinon les versions habituelles (JPEG en général). Et c’est tout automatique (autant pour le reste, le plugin est particulièrement utile si on fait des configurations précises avec une belle gestion des media queries, autant pour le WebP tout se fait tout seul…).
Pour activer cela, il faut définir une nouvelle constante dans mes_options.php :
define("_IMAGE_WEBP", true);.htaccess lié à image_responsive pour prendre en compte les nouveaux appels d’images.En gros, par rapport au Jpeg (qualité 80%) généré par SPIP, ça semble me générer des images deux fois plus légères.
Attention : j’en suis aux premiers tests. Faudrait pas que ça te pète ton site…
Notez qu’il faut que votre version de PHP soit capable de fabriquer des images en WebP. Ça me semble le cas désormais à peu près partout.
Notez encore que ce n’est pas anecdotique : d’après CanIUse, le WebP est désormais affiché par 80% des navigateurs.
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) :
<?php
function getDirContents($dir, &$results = array()){
$files = scandir($dir);
foreach($files as $key => $value){
$path = realpath($dir.DIRECTORY_SEPARATOR.$value);
if(!is_dir($path)) {
$results[] = $path;
} else if($value != "." && $value != "..") {
getDirContents($path, $results);
$results[] = $path;
}
}
return $results;
}
$liste = getDirContents("local/cache-responsive");
foreach ($liste as $l) {
if (preg_match("/webp$/", $l)) {
echo "<li>$l";
unlink($l);
}
}
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).
Révision 116199 – SPIP-ZONE
▻https://zone.spip.net/trac/spip-zone/changeset/116199/spip-zone
Documentation provisoire du plugin SPIP « filtres_images_vectorise » qui propose 3 types de filtres de vectorisation d’images bitmaps en SVG.
Utilise soit la lib GeometrizePHP soit la lib PotRace soit une combinaison des 2.
Voir aussi :
– ▻https://github.com/Cerdic/geometrize-php pour GeometrizePHP
– ►https://github.com/Otamay/potracio (+ ►https://seenthis.net/messages/645575) pour PotRace
Ca va dépoter les SVG dans SPIP :-) !
#SVG #vectoriser #PHP #SPIP #filtres_images_vectorise #plugin
C’est beau :)
<BOUCLE_docs(DOCUMENTS){id_document IN 8,9}>
[(#FICHIER|image_reduire{#GET{taille}})]
[(#FICHIER|image_reduire{#GET{taille}}|image_geometrize)]
[(#FICHIER|image_reduire{#GET{taille}}|image_potrace)]
[(#FICHIER|image_reduire{#GET{taille}}|image_geopotrize)]
<hr/>
</BOUCLE_docs>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 ;)
Grosse modification sur mon #plugin #SPIP image_responsive :
▻https://23forward.com/Plugin-SPIP-Image-responsive
Sur écran haute définition (« Retina » dans le jargon Apple), l’image était auparavant une version ultra-compressée (Jpeg à 30%), histoire de gagner énormément de poids sur les fichiers. Mais depuis, la qualité des écrans a encore beaucoup progressé, et même avec des pixels deux fois plus petit, un JPEG à 30% c’est assez dégueulasse.
Du coup, par défaut désormais sur écran Retina le plugin utilise la version « normale » de l’image, mais deux fois plus grande.
Si on veut rester avec le comportement précédent (JPEG ultra-compressé sur écran Retina), on ajoutera :
define("_IMAGE_RESPONSIVE_RETINA_HQ", false);dans son fichier de fonctions.
DSP2 : Authentification forte du client
▻https://stripe.com/fr/guides/strong-customer-authentication
Documentation de Stripe pour le passage à l’authentification forte du client (Strong Customer Authentication, SCA) dans le cadre la réglementation DSP2 applicable en septembre 2019
Voir aussi :
- ▻https://stripe.com/fr/guides/sca-payment-flows
- la doc de l’API concernée : ▻https://stripe.com/docs/payments/payment-intents
#stripe #api #dsp2 #Strong_Customer_Authentication #SPIP #plugin_bank #3D_Secure
Un tout petit chouilla d’auto promo #SPIP -ienne ... :-) #plugin
> ▻https://contrib.spip.net/timecircles-plugin-spip
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.
Ah, une #CSS que je ne connaissais pas : appliquer une image de fond au texte lui-même. Je suis tombé dessus sur les nouvelles pages de chez Apple :
On voit que le paragraphe de texte a une texture orangée. Celle-ci est attribuée avec un très classique background :
background-image: url(https://seenthis.net/"/v/iphone-xs/a/images/overview/copy_texture_1_large.jpg");-webkit-background-clip: text;
color: transparent !important;transparent, de façon à laisser apparaître l’image de fond.D’après CanIUse :
▻https://caniuse.com/#search=background-clip
Firefox, Chrome and Safari support the unofficial -webkit-background-clip: text (only with prefix)
Du coup, c’est plutôt assez largement répandu.
Le hic, malheureusement, c’est que ça se dégrade particulièrement mal quand background-clip n’est pas interprété :
Un fallback CSS à coucher dehors:
▻http://nimbupani.com/using-background-clip-for-text-with-css-fallback.html
body {
color: red;
-webkit-text-fill-color: transparent;
background: -webkit-linear-gradient(transparent, transparent),
url(https://seenthis.net/path/to/bg/image) repeat;
background: -o-linear-gradient(transparent, transparent);
-webkit-background-clip: text;
}
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 :
div {
color: orange;
-spip-text-background: url(https://seenthis.net/../imgs/test.jpg) 100% 100%;
}
Time-saving #CSS techniques to create #responsive #images
▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84f
To Recap
1) Use background-image if your image is not part of the page’s content.
2) Use object-fit if you don’t care about IE.
3) The padded container technique, used by Netflix, works everywhere.
4) In most cases, just add height: auto; in your CSS.
5) If you need fast load times, use srcset to load smaller images on mobile.
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
GitHub - alsacreations/pepin : Structure par défaut de plugin jQuery et plugins variés
▻https://github.com/alsacreations/pepin
Pepin est un modèle (parmi tant d’autres) de plugin jQuery modulaire, accompagné de plugins pratiques (voir liste ci-dessous), propres et respectant la plupart des bonnes pratiques d’accessibilité, avec l’usage d’ARIA.
Pour les plugins proposés : ▻https://github.com/alsacreations/pepin#plugins
#jquery #plugin #modulaire #javascript #tabs #modalbox #slider #scroll #sticky #accordeon #toggle #autocomplete
Un jeune libriste part à l’asso des mauvaises habitudes
►https://framablog.org/2018/07/04/un-jeune-libriste-part-a-lasso-des-mauvaises-habitudes
Neil vient de finir un #Stage d’étudiant au terme duquel il a réussi à faire adopter des outils libres à une #Association. Il livre ici le récit de ses tribulations, c’est amusant et édifiant… On aimerait bien qu’il y en … Lire la suite
#Claviers_invités #Contributopia #Libres_Logiciels #Libres_Services #Migration #adhérents #aide #Asso #base_de_données #BTS #ciné #LibreOffice #mailing #MariaDB #mastodon #Microsoft #migration #plugin #site_web #stagiaire #windev #wordpress
Il y’a quelque temps j’ai commencé a séparer en plugins différents des fonctionnalités du plugin typo_enluminée que j’utilisais sur des sites .
En fait je n’utilisais jamais l’ensemble, et du coup trop de boutons pas forcément utiles et qui perturbe l’utilisateur.
J’avais commencé par les intertitres, qui était vraiment le besoin commun a tous mes projets.
Là j’ai eu le besoin de la mise en évidence de textes ou couleur de surlignage. Donc en tapotant je suis tombé sur des lames du couteau suisse (que je n’utilise pas), et un article de tetue, qui traitait le sujet.
▻https://contrib.spip.net/Decorer-ou-colorer-vos-textes
▻http://romy.tetue.net/stabilo-web
Ayant un client souffrant d’achromatopsie, je me suis dit que les solutions proposées n’étaient en fait pas accessible, si cette mise en évidence devait en plus apporter un sens au contexte.
J’ai donc fait un petit plugin Stabilo, qui reprend cette fonctionnalité, mais en le rendant accessible via un aria-label, afin que cette mise en évidence soit décrite aux lecteurs vocaux , mais aussi signalés au hover pour ceux qui sont daltoniens ou qui ne voient qu’en nuances de gris.
▻https://framapic.org/pDkNGJH05k4G/SniYfn85ukWL
Le nom est relativement mal choisi, car c’est une marque, surligner est déjà utilisé par spip, a voir….
Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
▻https://www.fondationcustodia.fr
Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…
Parmi les points à voir en particulier…
– Un menu hamburger tout mignon.
– Des #longforms pour la présentation des expositions :
▻https://www.fondationcustodia.fr/Georges-Michel
– Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :
– Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
▻https://www.fondationcustodia.fr/Les-portraits-en-miniature-12
Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
►http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images
On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :
– Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :
Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.
– Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
▻https://www.fondationcustodia.fr/les-portraits-en-miniature
– Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.
– Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :
– Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).
– Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.
À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))
Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.
Ce qui donne par exemple, avant chargement de l’image :
et une fois l’image chargée :
Ce que je réalise directement dans le squelette ainsi :
#image_haut {
background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
background: linear-gradient(to bottom,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
);
}
#image_haut:before {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
content: " ";
z-index: 1;
background: linear-gradient(to right,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
[#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
);
mix-blend-mode: soft-light;
}
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 :
$("#menu_flottant a").on("focus", function() {
$("#afficher_menu").prop("checked", true);
});
$("body > *:not(#menu_flottant) a").on("focus", function() {
$("#afficher_menu").prop("checked", false);
});