#spip_blog

Toute ma reconnaissance à la communauté SPIP, grâce à laquelle j’ai animé mon site d’accompagnement d’activités informatiques, lilapuce.net, depuis 2005, alors que je n’ai jamais été, je ne suis pas et je ne serai jamais un geek ! Ces derniers jours, depuis que je suis en retraite et que les objectifs de ce site ne sont plus exactement les mêmes, j’ai réorganisé tout le contenu, sans trop de difficulté.

Je viens de refaire un tuto qui me tient particulièrement à cœur, notamment parce que je garde en mémoire, au printemps dernier, le plaisir de ce groupe de gamines, que j’ai eu l’honneur d’accompagner, sur Kdenlive à bidouiller des bouts de vidéo et de musique autours de Whitey’s Lindy Hoppers/Motörhead et Sheila/Michael Jackson :

▻https://www.lilapuce.net/Changer-la-piste-audio-d-une-video#lecture_video

L’agenda Militant Indépendant - Agenda participatif des luttes et mouvements sociaux franciliens
▻https://www.agendamilitant.org

AMI est l’Agenda Militant Indépendant répertoriant les rendez-vous s’inscrivant dans les luttes : manifestations, rassemblements, piquets de grève mais aussi, s’ils ont une portée politique évidente : rencontres, débats, ateliers, lectures, concerts de soutien, projections... Les ambitions d’AMI : permettre de retrouver facilement les informations utiles pour les rediffuser ensuite sur les divers réseaux sociaux rester indépendant de tout parti politique, syndicat, institution, média public ou privé être collaboratif et favoriser les rendez-vous participatifs faciliter les rencontres entre individus et groupes de cultures politiques variées Source : Relevé sur le (...)

SPIP - Le droit à la décompilation des logiciels - « Le livret du petit goûteur » ⋆ Cause Commune - Paris - 93.1 FM
▻https://cause-commune.fm/podcast/libre-a-vous-123

https://cause-commune.fm/wp-content/uploads/2019/11/lav-1200x630-2.jpg

SPIP – Le droit à la décompilation des logiciels découvrir, en savoir plus sur SPIP (logiciel libre destiné à la création de sites web) avec Arnaud Martin (de 23Forward), Anne-lise Martenot (touti) et Jean Galland (chankalan), qui a contribué à la mise en place des sites Libre à vous ! et Libre à lire !

#spip_blog et bravo @touti @arno et @chankalan :)

Les icônes SVG dans SPIP - Programmer avec SPIP 4.0
▻https://programmer.spip.net/Les-icones-SVG-dans-SPIP

Quelques recommandations pour les éléments graphiques (icônes SVG) utilisées dans l’interface SPIP
la page totalement introuvable dans la galaxie SPIP a moins de savoir qu’elle est dans Programmer...

#SVG #SPIP #howto

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

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

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

______________________________________

LES EXEMPLES

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

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

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

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

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

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

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

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

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

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

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

►https://geoculture.fr/musiques-et-danses-traditionnelles-du-limousin tout en SPIP / Noizetier par @rastapopoulos et @drbouvierleduc (cf commentaire)
Site plus archivé mais tjs visible via ►https://web.archive.org/web/20190904140136/https://geoculture.fr/faire-bonne-chere-en-limousin

►https://www.nytimes.com/fr/2022/05/20/world/haiti-france-dette-reparations.html
Pour l’intro et le zoom sur le carte

►https://uploads.knightlab.com/storymapjs/27497e92f064ef5616553b1c97c91106/walking-tour/index.html
pour la navigation dans la carte

►https://www.women-in-type.com
Pour les animations sur les images dans le déroulé de la page (entête et diaporama) et le filtrage des listes (menu en « sticky ») qui identifie bien les parties

►https://fos200ans.fr
Pour la double navigation immersive/cartographique et l’organisation des ressources par périodes.

►https://www.tdg.ch/inegalites-ecologiques-ultrariches-et-superpollueurs-347025086713

►https://media.lesechos.fr/infographie/tenet
Pour la double navigation chronologique (les timelines) / géographique (les flèches sous le globe)

►https://ig.ft.com/generative-ai

►https://tympanus.net/codrops/demos/?tag=scroll
Pas mal d’exemples (attention, il y a à boire et à manger)

______________________________________

LES OUTILS

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

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

Scroll Btween partagé par @b_b
Tween any CSS values on any DOM element in relation with its position into the viewport.
►https://olivier3lanc.github.io/Scroll-Btween

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

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

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

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

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

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

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

______________________________________
TAGS SUR SEENTHIS

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

#webdev #spip_recette

#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

#HTML5up Escape Velocity pour #SPIP

Adaptation pour SPIP du squelette « ESCAPE VELOCITY » de html5up

▻https://contrib.spip.net/HTML5up-Escape-Velocity

https://contrib.spip.net/IMG/jpg/screenshot_2020-10-14_escape_velocity_by_html5_up.jpg https://contrib.spip.net/IMG/jpg/screenshot_2020-10-14_no_sidebar_-_escape_velocity_by_html5_up.jpg

#SPIP_blog #intégration

La gazette des rois et des reines

▻https://blog.spip.net/La-gazette-des-rois-et-des-reines.html

#spip_blog_done

CIWIDGET

La VERSION 2.0 de CIWIDGET offre 15 widgets dont un pour publier des graphiques (colonnes, lignes, radar, etc.). Le plugin CIWIDGET permet d’ajouter des widgets dans le texte des articles.

►https://contrib.spip.net/CIWIDGET

#spip_blog

Rezosocios

Un plugin pour créer autant de liens de réseaux sociaux que l’on souhaite, et permettre de les lier aux contenus.

▻https://contrib.spip.net/Rezosocios-5280

#spip_blog

Historique connexions

Suivre les connexions à l’administration de SPIP

▻https://contrib.spip.net/Historique-connexions

#spip_blog

Territoires, utilisation du plugin

L’objectif du plugin est de fournir un nouvel objet éditorial couvrant l’ensemble des zones géographiques du continent à la subdivision minimale d’un pays. De fait, ce plugin pourrait à terme remplacer les plugins Pays, Continents, COG et Géographie en fournissant un objet unique et servir de pivot à d’autres plugins de géographie comme GIS, Contours ou Cartes Choroplèthes.

▻https://contrib.spip.net/Territoires-utilisation-du-plugin

#spip_blog

Font Awesome 5 - Police

Dans les squelettes, le plugin permet d’insérer facilement des icônes gratuites FontAwesome 5 au format de police de caractères

▻https://contrib.spip.net/Font-Awesome-5-Police-5302

#spip_blog

Fork Awesome - Police

Embarque le bibliothèque libre d’icônes Fork Awesome pour un usage dans les squelettes et pour les rédacteurs.

▻https://contrib.spip.net/Fork-Awesome-Police-5300

#spip_blog

Kamakura

Kamakura est un squelette simple sous Bootstrap4.

– La page d’accueil est simple et affiche les dernières actualités.
– Les pages courantes sont présentées sur une colonne.

Ce squelette est idéal pour de petits sites de clubs, d’associations, de théâtre, ...

▻https://contrib.spip.net/Kamakura-5297

#spip_blog

Agenda : Inscription libre aux événements

Propose un module alternatif aux inscriptions des événements de l’agenda
– les inscriptions sont ouvertes à tous les visiteurs du site sans à avoir à se connecter (pas de création de compte)
– l’inscription se fait en 2 étapes avec l’envoi d’email qui contient un lien pour valider son inscription (pour garantir l’unicité et la validité de l’email soumis)

▻https://contrib.spip.net/Agenda-Inscription-libre-aux-evenements

#spip_blog

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