#spip

How to fight back against Google FLoC | Plausible Analytics
▻https://plausible.io/blog/google-floc

Google is starting to track your site visitors for advertising purposes even when you’re not using Google Analytics or having any relationship with Google.
Here’s a closer look at Google’s Federated Learning of Cohorts (FLoC) initiative and how you can fight back and opt-out as a web user and a web developer.

En anticipation du mouvement « privacy first », la nouvelle embrouille de Google pour tracer les internautes : directement via le navigateur (Chrome et ses dérivés)
Pour mémoire : les stats de répartition des navigateurs (toutes plates-forme confondues) : ▻https://www.w3counter.com/globalstats.php

A noter :
– ce système permet le tracking des utilisateurs de Chrome sur tous les sites et non pas seulement ceux équipés de Analytics
– « accessoirement » cela pourrait permettre à Google de supprimer les cookies tiers de Chrome et donc de rendre les infos de tracking pour les publicitaires totalement dépendante des données collectées via ce nouveau système... (ou comment se construire un monopole)

Le header (.htaccess ou directive du vhost) pour empêcher le tracking :

Frameworks and CMS providers that care about privacy should add this header by default.

ping #SPIP...

#FLoC #google #Chrome #cookie-tiers #publicité #google_analytics

Quelques notes pour les icônes SVG de SPIP
▻https://contrib.spip.net/Quelques-notes-pour-les-icones-SVG-de-SPIP

#SPIP #SVG

mapbox - Leaflet : How to add a text label to a custom marker icon ? - Stack Overflow
▻https://stackoverflow.com/questions/34775308/leaflet-how-to-add-a-text-label-to-a-custom-marker-icon

Leaflet L.DivIcon feature that represents a lightweight icon for markers that uses a simple div element instead of an image

une méthode pour afficher du texte sur les marqueurs Leaflet

Voir aussi :
– pour SPIP + GIS : ▻https://git.spip.net/spip-contrib-extensions/gis/src/branch/master/javascript/leaflet.gis.js#L249
– ▻https://gis.stackexchange.com/questions/59571/how-to-add-text-only-labels-on-leaflet-map-with-no-icon
– ▻https://leafletjs.com/reference-1.7.1.html#divicon

#leaflet #GIS #SPIP #divicon #marqueur

Reprise d’un message de Maieul sur Mastodon
▻https://framapiaf.org/@maieulr/105975333118229567

Gros chantier de doc de certains plugins majeurs de #SPIP ces derniers jours :

Doc d’intro de saisies mise à jour pour refléter les bonnes pratiques ▻https://contrib.spip.net/Saisies
Doc publiée sur « comment créer ses propres saisies » ▻https://contrib.spip.net/Creer-ses-propres-saisies

Doc de champs extra réorganisée pour séparer :
– la doc de l’API ▻https://contrib.spip.net/Champs-Extras
– la doc de l’interface graphique ▻https://contrib.spip.net/Champs-Extras-Interface

En bonus, un petit tuto ▻https://contrib.spip.net/Creer-des-champs-extras-depuis-un-plugin

Pour fêter le printemps inexorable, la dernière #RadioOupah et toutes les précédentes sont en ligne par ici :
▻https://radiooupah.netwazoo.info

https://radiooupah.netwazoo.info/sites/radiooupah.netwazoo.info/IMG/png/radioouph.png

#musique #playlist

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

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

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

#spip_recette #spip_blog

Mise à jour de maintenance :  sortie de SPIP 3.2.11

Si vous suivez l’actualité de git.spip.net, vous avez certainement constaté une grande activité à l’approche de la sortie de SPIP 3.3. Comme discuté sur la liste spip-dev cf ▻https://www.mail-archive.com/spip-dev@rezo.net/msg71320.html cette version nécessitera PHP 7.3 au minimum, en accord avec notre nouveau cycle de release.

Toutefois, afin de chouchouter les personnes souhaitant rester sur la branche 3.2, nous avons décidé de sortir une version de support étendu (ou LTS) qui améliore la compatibilité jusqu’à PHP 7.4 dans cette branche.

SPIP 3.2.11 est donc compatible avec les versions de PHP 5.4 à 7.4.

La version 3.2.10 fut écourtée par la découverte d’une absence de report de quelques modifications intéressantes.

Lire l’annonce complète : ▻https://blog.spip.net/Mise-a-jour-de-maintenance-sortie-de-SPIP-3-2-11.html

L’équipe

On vient de livrer avec Manu (de Mosquito) un nouveau serious game pour le MAD Paris (Musée des Arts décoratifs) : Une histoire des styles et des tendances
▻https://histoiredesstyles.madparis.fr

Il s’agit de reclasser chacun des 5 éléments de mobilier (horloge, lumière, chaise, commode, table) dans sa période (parmi 20 périodes). Et une fois placé le bon meuble dans la bonne période, tu te fais ton agencement qui va bien. Si tu es punk, tu mets les chaises sur les tables, sinon tu fais comme il faut. Si tu as envie de te faire des noeuds dans la tête, tu tentes le mode « Expert », quasiment infaisable… :-)

https://i.imgur.com/972olVL.jpg https://i.imgur.com/8ZqCE1j.jpg

Tu as des aquarelles pour représenter l’appartement-témoin de chaque période (ohhh), et des dessins de Floc’h pour les portraits des donateurs du musée.

C’est donc une Web app entièrement en HTML/javascript/CSS, et devine quoi : ben oui c’est du #SPIP.

#shameless_autopromo

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

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

______________________________________

LES EXEMPLES

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

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

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

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

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

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

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

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

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

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

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

►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)

______________________________________

LES OUTILS

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

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

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

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

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

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

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

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

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

______________________________________
TAGS SUR SEENTHIS

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

#webdev #spip_recette

#132 - Amelioration de |balise_img et |balise_svg pour permettre de forcer une taille - spip - SPIP on GIT
▻https://git.spip.net/spip/spip/pulls/132

Le filtre |balise_img est survitamine
Doc temporaire des filtres |balise_img et |balise_svg
\o/

#spip #image #filtre #balise_img #balise_svg

Le petit #shameless_autopromo du lundi : on vient de publier sur l’App Store pour iPhone et iPad l’application Sur les pas de F. Bazille :
▻https://apps.apple.com/fr/app/sur-les-pas-de-f-bazille/id1554592070

Il s’agit de la version « app » de la web app intégrée au site Fabre dans mon canapé, à l’occasion de l’Hommage à Frédéric Bazille :
►https://fabre.montpellier3m.fr/Sur-les-pas-de-Frederic-Bazille-a-Montpellier

C’est ici une sorte de « Proof of Concept » : la promenade géolocalisée dans Montpellier, je l’ai développée directement dans mes outils Web (c’est donc évidemment du #SPIP) pour la plateforme « Canapé ». Une application avait été développée en 2016 (dont on reprend sur le site Web les contenus textuels et iconographiques), mais la version pour iPhone n’est plus disponible.

La version Android de 2016 est toujours accessible :
▻https://play.google.com/store/apps/details?id=air.opixido.fabre.bazille&hl=fr&gl=US

Comme la version iPhone n’est plus disponible, ma propre version permet de pallier sa disparition, et l’intérêt pour moi c’est de démontrer que ma plateforme, outre un site Web, permet de créer des « apps » dédiées extrêmement facilement, sans se lancer dans le nouveau développement d’une application complète sur smartphone.

I rescued four baby red squirrels [The Squirrels & Me]

▻https://invidious.fdn.fr/watch?v=3tDlh62AVPo

Pas encore vu, mais une personne qui sauve des écureuils ne peut pas être mauvaise :)

#spip

Découverte pratique du jour dans #SPIP

Une balise #NULL quand on a besoin de passer un argument null sur l’appel d’un filtre ou formulaire (évite un #EVAL{null})

▻https://code.spip.net/autodoc/tree/ecrire/public/balises.php.html#function_balise_NULL_dist

Par exemple, quand on on utilise un inclure dans différents contextes et que, selon les contextes, on doit avoir un {id_article} ou non.

Ex : afficher tou·tes les auteur·es du site

ou seulement celles et ceux lié·es à l’article

et dans l’inclure

#spip_astuce

« Un petit bout de sparadrap »
▻http://www.davduf.net/un-petit-bout-de-sparadrap

Les feux de poubelle sur BFM, Nirvana à Issy-les-Moulineaux, les débuts d’Internet, Un pays qui se tient sage, Tarnac, le Canada, les romans, le cinéma, les flics, la vallée des prisons, et un petit bout de sparadrap sur la plaque de Malik Oussekine. 35 ans de vie, et la voix chaude d’un intervieweur parmi les meilleurs, ce ceux qui s’en laissent conter. Sur CinéMutins. Ce soir, il y avait ça, sur la devanture du Chaplin, à Paris. Ce soir, il y a aussi ça, avec les copains des Mutins de Pangée, une (...) Biblio & Filmo Graphie

/ Une, #Spip, #Société_de_contribution, #La_Rafale, Télé, #Revue_de_presse, #Jacques_Brel, New (...)

#Biblio_&_Filmo_Graphie #Télé #New_Moon
▻https://www.cinemutins.com/un-pays-qui-se-tient-sage
▻https://www.franceculture.fr/oeuvre/tchernobyl-forever-carnet-de-voyage-en-enfer

La bonne nouvelle du moment : la toute première version de l’application Points de secours en forêt vient d’être acceptée sur l’App Store (pour iPhone et iPad donc) :
▻https://apps.apple.com/fr/app/points-de-secours-en-forêt/id1535013949

La forêt est caractérisée par son espace naturel étendu, sans population aux alentours. Les personnes qui y travaillent ou la fréquentent sont géographiquement isolés. Conséquence : alors qu’en moyenne, les services de secours arrivent en 13 minutes sur un point d’intervention, ce temps s’élève à 25 minutes en forêt.

La FNEDT, l’UCFF, l’ONF, la FNCOFOR, la FNB, avec le soutien de l’interprofession nationale France Bois Forêt, la CCMSA, l’IGN et les sapeurs-pompiers, ne peuvent se résoudre à cet état de fait.

Trouver en un instant le point de rencontre des secours le plus proche, en cas d’accident en forêt. C’est l’objet d’un projet collaboratif qui se lance, incluant la création d’une application mobile.

Graphisme/ergonomie de @diala, développement général de moi, et @fil a conçu l’aspiration des fonds de carte en local. C’est entièrement du Web, empaqueté dans une app, avec quelques petites fonctionnalités natives (aller chercher un numéro de téléphone dans le carnet d’adresse…).

Le principe est de fournir aux gens qui travaillent en forêt les points de secours les plus proches, où ils pourront se rendre en cas d’accident. L’application pourra aussi être utilisée par les promeneurs. Dans le courant de l’année, ces organisations lanceront une campagne avec leurs adhérents et les services de secours pour généraliser le référencement de ces points de secours (ce qui, en retour, augmentera la finesse du maillage présenté par l’application).

La fonction centrale (outre la géolocalisation et le positionnement des points de secours), c’est évidemment l’aspiration des fonds de carte, puisqu’une fois en forêt, même si tu as été vacciné contre le Covid, tu risques d’avoir du mal à capter la 5G. D’où l’interface en deux parties, qui invite l’usager à « Se préparer », en sélectionnant la zone où il se trouvera, sélectionner un point de secours en cas de problème, indiquer quand il sera sur site, et ensuite à expédier ces informations par SMS à ses proches (ou à son entreprise). Ce qui semble une mesure de précaution (indiquer où on se trouvera), en pratique permet à la app de déclencher le téléchargement des fonds de carte.

De cette façon, une fois dans l’onglet « En forêt », les fonds de carte sont déjà en cache et tu n’as donc pas besoin d’avoir ton vaccin contre le Covid à jour.

Et là tu me demandes : est-ce que c’est fait avec #SPIP ? Alors figure-toi que oui, c’est du SPIP.

#shameless_autopromo

nodeca/pica : Resize image in browser with high quality and high speed
▻https://github.com/nodeca/pica

Un script JS pour redimensionner une image dans le navigateur :

Resize images in browser without pixelation and reasonably fast. Autoselect the best of available technologies: webworkers, webassembly, createImageBitmap, pure JS.
With pica you can:
– Reduce upload size for large images, saving upload time.
– Saves server resources on image processing.
– Generate thumbnails in browser.

#image #redimensionner #upload #javascript #client-side #SPIP

Aujourd’hui on livre une visite virtuelle pour l’exposition Les derniers impressionnistes du Musée de Lodève :
▻https://23forward.com/derniersimpressionnistes

Lodève c’est une petite ville à 35 minutes au nord-ouest de #Montpellier, à l’entrée du Larzac, avec un très beau musée, où se tiennent des expositions temporaires épatantes. Malheureusement l’exposition de cet hiver est restée quasiment tout le temps fermée au public, et donc le musée nous a demandé de réaliser une visite virtuelle avec des photos panoramiques à 360°.

C’est donc réalisé avec ma plateforme sous #SPIP, telle qu’utilisée par ailleurs pour Fabre dans mon canapé, le mini-site concerné étant « aspiré » et transformé en site statique.

#shameless_autopromo

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

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

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

#HTML5UP Spectral v2 pour #SPIP

(ré-)Adaptation pour SPIP du squelette « Spectral » de html5up

▻https://contrib.spip.net/HTML5UP-Spectral-v2

https://pbs.twimg.com/media/EtxWzmgWYAIbTQC.jpg https://pbs.twimg.com/media/EtxW0sUXEAEvERy.jpg

#SPIP_blog #intégration

Un critere {par_ordre_liste champ,#LISTE{...}} qui permet d’ordonner explicitement les resultat d’une boucle selon un tableau · 1b6c328268 - spip - SPIP on GIT
▻https://git.spip.net/spip/spip/commit/1b6c32826813ac67144a96bb94b95ce5e834a290

Doc temporaire d’une nouvelle (super !) feature : le critère par_ordre_liste :

Un critere {par_ordre_liste champ,#LISTE{...}} qui permet d’ordonner explicitement les resultat d’une boucle selon un tableau

Cela donne le meme resultat que si on utilise un {champ IN ...} sauf que
– le critere IN classe uniquement par defaut selon le tableau fournit, et cet ordre est ecrase si on a un autre critere, ou une jointure
– le {par_ordre_liste} permet de separer la selection du classement
– on peut le combiner avec d’autres {par...} dans l’ordre que l’on veut

#spip #critère #par_ordre_liste

Aoto

Aoto est un squelette de présentation de photographies.
Il est idéal pour présenter un portfolio de photos, de dessins, ....

Il utilise la fenêtre modale Fancybox 3 qui est particulièrement adaptée aux présentation de photos avec son lecteur intégré.

– La page d’accueil est minimale et affiche une image en fond de façon aléatoire
– Les pages courantes affichent une photo ou une planche contact
– Le squelette fonctionne aussi très bien sur smartphones (gestion du glisser, des zooms, ...)

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

#spip_blog et merci @erational pour le partage :)

Créer des modèles générant des notes de bas de page

Ce plugin permet de créer des modèles capables de générer des notes de bas de page affichables comme telles.

▻https://contrib.spip.net/Creer-des-modeles-generant-des-notes-de-bas-de-page

#spip_blog

creat2id

Ce plugin a pour objet de permettre la création, dans l’espace public, d’une visiteuse ou d’un visiteur avec une double authentification (vérification en deux étapes, une méthode d’authentification forte).

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

#spip_blog

Libre à lire !
▻https://www.librealire.org

Le groupe Transcriptions de l’April transforme en texte des enregistrements audio et vidéos traitant du logiciel libre et de libertés informatiques en général.

#transcription #accessibilité #logiciel_libre #informatique #April via @chankalan

Que se passe t’il quand une voie ferrée est abandonnée ?
Thread by BB27000 on Thread Reader App – Thread Reader App
▻https://threadreaderapp.com/thread/1352634546420903936.html

https://pbs.twimg.com/media/EsWF7qfW4AUHV43.jpg

une bonne dizaine d’images montrant l’évolution progressive
désolé pour la pub de Thread Reader, sinon, il y a directement le fil Twitter :
BB27000 sur Twitter : "Que se passe t’il quand une voie ferrée est abandonnée ? / Twitter
▻https://twitter.com/BB27000/status/1352634546420903936

Conducteur SNCF au PAC-TER (le SAMU des trains) , élu meilleur train de l’année par Marguerite et Clarabelle ( vaches limousine).