#spip

J’ai pas envie de faire un billet de blog détaillé pour ça tout de suite maintenant, mais ici, pour l’instant, ça le fait.

à propos de #SPIP, donc. en se basant sur les mesures instantanées de ce jour de ►https://stats.spip.net

Les deux images ci-dessous montre la distribution des versions PHP identifiées pour les versions SPIP 3.0 et 3.1.

ça permet d’évaluer la proportion (en vert) des sites qui pourraient (sur la seule base de la version PHP) passer en SPIP3.2 (qui est la version stable depuis octobre 2017) mais qui ne l’ont toujours pas fait.

https://media.discordapp.net/attachments/536889987078029313/546677348737482772/Repartition_des_versions_PHP_pour_SPIP3.0.png https://media.discordapp.net/attachments/536889987078029313/546680352631160841/Repartition_des_versions_PHP_pour_SPIP3.1.png?width=757&height=468

Légende :
– en gris : ne dit pas sa version #PHP (via les entêtes http collectées)
– en rouge : affiche une version incompatible avec la version SPIP mesurée (en gros PHP<5.1)
– en jaune : peut passer en 3.1 ou y rester, mais nécessitera un upgrade de PHP pour passer à une version supérieure de SPIP
– en vert : peut passer à la dernière version stable de SPIP
(toujours sur la seule base de la version PHP)
– en mauve : a priori version incompatible avec la version SPIP mesurée (site probablement pété/abandonné)

En valeur absolue, ça fait 1853 SPIP3.1 et 1601 SPIP3.0 qui pourraient migrer.

Je n’ai jamais vraiment fait de #SPIP, mais là, je cherche à bidouiller dans du #grav (un super #CMS en flat-file, vachement réputé, qui a reçu pleins de prix et qui est LIBRE).
Mais je n’arrive pas à comprendre leur logique...

Alors je suis retourné lire une vieille page d’introduction à SPIP, où je retrouve mes petits
▻http://www.sarka-spip.net/spip.php?article265

Mais GRAV... c’est surement très bien, mais j’y sens une odeur de dev (oui, alors vous imaginez les pizzas et la sueur, mais non), du genre hyster qui kiffe le CSS et qui trouve normal de bidouiller dans un FTP pour composer sa page.
Sauf que c’est contradictoire avec le reste.
Ce CMS est vachement bien fait, il ont « presque » pensé à tout. Les interfaces d’admin sont claires, les procédures sont simples...
Tant qu’on ne fait QUE de la page... du blog...
Mais là, je cherche juste à ajouter une image dans le bandeau principal de tout le site, et j’en chie.
Je sais bidouiller, mais j’ai tellement l’impression de ne pas le faire de la bonne manière.
Trop d’UX tue l’UX...
J’ai tellement l’impression qu’il devrait y avoir un « truc » pour faire ça que je m’interdis toute bidouille.

Droits voisins et seenthis

#CopyrightMadness : quand La France Insoumise veut taxer l’usage des œuvres du domaine public
►https://www.numerama.com/pop-culture/456485-copyrightmadness-quand-la-france-insoumise-veut-taxer-lusage-des-oe

Mon (droit) voisin le tueur. L’année 2018 a été marquée par la bataille autour des articles 13 et 11 de la future réforme européenne relative au droit d’auteur. Le texte n’est pas encore adopté définitivement, mais en bonne élève la France a pris les devants et a proposé une loi permettant l’application de la directive sans perdre de temps. David Assouline et quelques autres sénateurs PS ont rédigé une proposition de loi adoptée par la commission culturelle du Sénat. Pour rappel, l’article 11 prévoit d’accorder des droits aux éditeurs de presse sur la réutilisation de leurs contenus. Cela a été conçu contre Google et les portails d’actualité qui, d’après les éditeurs de presse, génèrent des pertes. L’article 11 prévoit que l’extension du droit voisin ne s’applique que pour les plateformes majeures du web, mais la version française souhaite appliquer ce principe à l’ensemble du web. Autrement dit, au moindre blog ou commentaire qui renverrait vers un article de presse. Puis, comme le veut l’expression « impossible n’est pas français », les sénateurs prévoient que la durée de protection s’étende sur 20 ans, alors que le texte initial fixe une période de cinq ans. Enfin pour couronner le tout, la transposition française envisage de déployer un DRM sur l’information. La législation en matière de propriété intellectuelle en France, c’est comme pour le maintien de l’ordre : être offensif.

La privatisation de l’information par la propriété intellectuelle | Cairn.info
▻https://www.cairn.info/revue-internationale-de-droit-economique-2006-4-page-361.htm

Il faut donc se pencher sur les usages déviants, sur les pratiques marginales de la propriété intellectuelle, ceux et celles qui sans doute ne relèvent pas des belles constructions académiques mais tissent le quotidien et lui impriment une marque nouvelle.

Cela implique de se plier à deux impératifs auxquels invite d’ailleurs l’intitulé sur la « privatisation » de l’information, à connotation plus économique que juridique [35]
.
Le premier est de ne pas s’en tenir à une approche formelle. « Ceci n’est pas une propriété. » Un peu comme le célèbre « Ceci n’est pas une pipe » de Magritte

« Information wants to be free », vous vous souvenez ?
▻https://scinfolex.com/2012/11/23/information-wants-to-be-free-vous-vous-souvenez
▻https://scinfolex.com/?s=information

Il se trouve que la science-fiction a déjà exploré cette possibilité et la vision qu’elle nous livre est assez troublante. Elle donne beaucoup à réfléchir sur cette crispation que l’on constate à propos du droit de l’information.

Dans sa nouvelle d’anticipation « Le monde, tous droits réservés« figurant dans le recueil éponyme, l’auteur Claude Ecken imagine justement un monde dans lequel l’information pourrait être copyrightée et les conséquences que cette variation pourrait avoir sur les médias et la société dans son ensemble.

Dans un futur proche, l’auteur envisage que la loi a consacré la possibilité de déposer un copyright sur les évènements, d’une durée de 24 heures à une semaine, qui confère un droit exclusif de relater un fait, empêchant qu’un concurrent puisse le faire sans commettre un plagiat. A l’inverse de ce qui se passe aujourd’hui avec la reprise des dépêches des agences AFP ou Reuters, les organes de presse se livrent à une lutte sans merci pour être les premiers à dénicher un scoop sur lequel elles pourront déposer un copyright.

L’intérêt de la nouvelle est de développer dans le détail les implications juridiques et économiques d’un tel mécanisme. Les témoins directs d’un évènement (la victime d’une agression, par exemple) disposent d’un copyright qu’ils peuvent monnayer auprès des journalistes. Lorsqu’une catastrophe naturelle survient, comme un tremblement de terre, c’est cette fois le pays où l’évènement s’est produit qui détient les droits sur l’évènement, qu’elle vendra à la presse pour financer les secours et la reconstruction.

Alpha (HTML5 UP)

#Squelette_SPIP adapté du thème Alpha de HTML5 UP
▻https://html5up.net/alpha

▻https://contrib.spip.net/Alpha-HTML5-UP

https://contrib.spip.net/IMG/jpg/accueil-8.jpg

#spip_blog

Problème sur tous mes sites #SPIP : impossible de « référencer » une vidéo Viméo depuis quelques jours. Quand on essaie de joindre l’URL d’une page Vidéo, ça répond systématiquement « fichier distant n’a pas pu être trouvé ».

Qu’est-ce qu’il se passe ?

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

Lancement aujourd’hui de la nouvelle refonte du site #SPIP de ▻http://pensezsauvage.org #shameless_autopromo donc

http://seenthis.io0oi.net/seenthis/pensezsauvage.jpg

Depuis quelques années, l’association pensezsauvage fait pousser des plantes potagères, des fleurs curieuses et rares pour récolter les graines à redistribuer et à revendre sur les marchés ou sur internet.

Jusque là, le site disposait du theme_greeny de @marcimat (merci :*) avec un squelette légèrement modifié. Mais l’asso souhaitait quelque chose de plus clair et de responsive, avec une navigation compréhensible à tout·es. C’est finalement Mikou de pensez sauvage lui même qui a dessiné la maquette style Kraft. Pas évident du tout, mais j’estime que c’est bien la technique qui doit se plier aux idées créatives et non l’inverse. J’ai refait l’architecture du site et réalisé les fonctionnalités et l’intégration SPIP html/css/js sur une base zcore. J’ai créé une boutique minimaliste avec trois plugins SPIP : prix, panier et paypal, il n’y a ni compte client ni stockage de coordonnées, bref, rien d’autre qu’un document de l’article avec un champ ’prix’ à remplir.

L’idée est celle d’un onepage où l’internaute navigue par ancres, un petit JS perso permet de tester si l’ancre existe, sinon de renvoyer vers l’URL demandée pour éviter les impasses de navigation et permettre au site d’évoluer à son rythme. Bon, j’avoue que j’étais pas réjouit de mettre tout le catalogue sur l’accueil, mais j’ai trouvé des astuces pour alléger.
Il m’aurait été parfaitement impossible de faire cela sans #CSS3 il n’y a que serait-ce 5 ans et je me suis pas mal amusée à vrai dire.

Le plugin panier a été modifié pour faire apparaitre les sachets de graines au fur et à mesure de leur mise au panier, avec un peu d’ajax perso on reste sur la même page le plus souvent possible. Le plugin lazysizes permet de ne faire apparaitre les images au format définitif que lorsque la vue visiteur est en face.

Comme l’asso et les visiteurs préfèrent de loin les chèques, qui évitent de laisser des données sur internet, le panier une fois remplit peut être imprimé avec un montant qui déduit les frais de paypal.
Pour cela j’ai créé une page reprise par le plugin Dompdf qui créé le pdf du panier de session du visiteur à la volée.

La recherche est en autocompletion sur l’ensemble du catalogue des graines, la page glisse ensuite vers le sachet choisi.

Merci à @jacotte qui a bien voulu revoir de ses yeux de lynx les défauts restants à corriger. Par exemple la font choisie par Mikou ne disposait pas d’apostrophes et de virgules correctes. Je suis donc passée par FontForge pour corriger cela avant l’intégration en base64 dans la CSS.

Merci aussi à @james qui m’a poussé à écrire ce billet !

http://seenthis.io0oi.net/seenthis/pensezsauvage_refonte.jpg

Déploiement de la nouvelle charte graphique #galactic dans les sites de la galaxie #SPIP, toujours en cours ! Aujourd’hui, c’est au tour de #SPIPcontrib d’y passer !
#redesign #SPIPgalaxie #SPIPrevolution

▻https://contrib.spip.net

Un tout petit chouilla d’auto promo #SPIP -ienne ... :-) #plugin
> ▻https://contrib.spip.net/timecircles-plugin-spip

Tout le monde s’en fout, mais cette année, j’aurai rédigé 5 des 9 billets publiés sur ►https://blog.spip.net et la totalité des articles (un peu plus techniques) de ►https://spip.lerebooteux.fr

et euh ... voilà, c’est tout :)

#spip #shameless_autopromo

Code JS , lien mené à l’ancre sinon à la page

Au clic sur un lien possédant une ancre, teste si la cible de l’ancre existe bien dans la page avant de réécrire le lien en ancre simple. Le but est d’avoir une navigation par ancre très rapide mais avec une alternative en dur.

<code>

jQuery(document).ready(function(){
$(“a[href*=’#']”).click(function() {
var href = $(this).attr(’href’);
anchor = href.split(’#')[1];
var $myDiv = $(’#'+anchor);
if ($myDiv.length) {
$(this).attr(’href’, ’#'+anchor);
}
});
});

</code>
<code>

Et pour créer des #ancres sur des titres SPIP en retirant les accents et ajoutant des tirets inter mots, utilisez le filtre |url_nettoyer{200} sans oublier d’inclure la fonction reprise de SPIP (plugin dist urls_etendues)
include_spip(’action/editer_url’) ;

</code>
Code touti

#jQuery #anchors_html #SPIP

#Intégration / #développement : Plugin vs #boiler_plate

Vous êtes plutôt l’un ou plutôt l’autre vous ?

Il y a 1 an, j’attaquais mon squelette perso, celui qui me sert aujourd’hui de base pour la structure html et quelques styles css de bases et qui repose sur ZPIP V2. Ce squelette est (plus que) largement inspiré de Intégraal de @rastapopoulos et SPIPr de Cédric et @ben.

Je commence à avoir quelque chose d’assez adapté à mes besoins. Outre une structure html5, ça permet de gagner beaucoup de temps : une grille à mettre en place ? <INCLURE{fond=inclure/liste/grille,...> + les bons paramètres et le tour est joué.

La question qui se pose maintenant, c’est le fonctionnement : boilerplate ou plugin.

Le plugin , c’est un squelette qu’on surcharge avec un squelette/plugin propre à chaque nouveau projet. Le boilerplate , c’est un squelette qu’on modifie directement pour chaque nouveau projet.

L’avantage du 1er, c’est qu’on partage les évolutions entre tous les sites qui l’utilisent mais l’inconvénient, c’est qu’il faut conserver une compatibilité descendante sous peine, soit de casser le site, soit de ne plus pouvoir profiter des évolutions.
Le 2nd, ben c’est exactement l’inverse.

Au début, le fonctionnement plugin m’allait très bien : je développais mon plugin en même temps que les sites et chacun profitait donc des mise à jour de la structure et des styles de bases. Mais à force de bouger des choses, je me rends compte que ça devient galère de garder cette compatibilité descendante.

Donc voilà, si vous avez des retours d’expérience...

Liens :
SPIPr : ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/spipr-dist/trunk
Integraal : ▻https://zone.spip.net/trac/spip-zone/browser/spip-zone/_squelettes_/integraal
integraal (principe) : ▻https://zone.spip.net/trac/spip-zone/changeset/83559/spip-zone
Repo de mon plugin : ▻https://gitlab.com/jmoupah/zcm
Doc de mon plugin : ►https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html

#SPIP_recette #SPIP

Ressourcothèque

Le squelette « Ressourcothèque » permet de classer, trier et retrouver des ressources documentaires.

▻https://contrib.spip.net/Ressourcotheque-Presentation-Generale
▻https://contrib.spip.net/Ressourcotheque-Installation
▻https://contrib.spip.net/Ressourcotheque-guide-de-redaction

#spip_blog

Charte d’accueil de SPIP

La communauté SPIP est un collectif informel, constitué par les personnes contribuant au projet au sens large, comme par exemple, et de façon non limitative, au logiciel, aux plugins, aux traductions, aux productions graphiques, comme aux échanges dans les différents espaces de la galaxie, ou à l’animation du groupe. Indépendante de toute association, fondation ou entreprise, la communauté SPIP s’organise autour de la mutualisation de toutes ces contributions.

▻https://www.spip.net/fr_article6431.html

#spip_blog

markdown/README.md at master · Cerdic/markdown · GitHub
▻https://github.com/Cerdic/markdown/blob/master/README.md

Ce plugin permet d’utiliser la syntaxe MarkDown dans un article SPIP.
Un formulaire de configuration permet de choisir le fonctionnement du plugin :
- Appliquer la syntaxe SPIP par défaut et la syntaxe MarkDown dans les blocs <md>..</md>
- Appliquer la syntaxe MarkDown par défaut et la syntaxe SPIP dans les blocs <spip>..</spip>

#SPIP #markdown #text_wheel #syntaxe

GitHub - mistergraphx/spip_moncompte : Gestion de compte utilisateur/visiteur coté publique du site
▻https://github.com/mistergraphx/spip_moncompte

Gestion de compte utilisateur/visiteur coté publique du site (avant RGPD). Extensible sous forme de dashboards à ajouter via pipelines

En relation avec la gestion des RGPD dans SPIP, cf ▻https://contrib.spip.net/Gestion-Mon-Compte et ▻https://contrib.spip.net/Recap-RGPD-webmestres-SPIP

#mon-compte #SPIP #RGPD #dashboard #pipeline

Boucler sur les réponses de Formidable

Le plugin Formidable permet d’enregistrer les réponses. Mais comment récupérer ces réponses ? Par des boucles SPIP, qui possèdent quelques spécificités.

▻https://contrib.spip.net/Boucler-sur-les-reponses-de-Formidable

#spip_blog

CVT Upload

CVT Upload fournit un interface générique de programmation (API), qui permet de gérer l’envoi d’un ou plusieurs fichiers par formulaire CVT. En cas d’erreur lors de la soumission du formulaire, les fichiers envoyés sont conservés temporairement dans SPIP afin que l’utilisateur·trice n’ait pas à les recharger.

▻https://contrib.spip.net/CVT-Upload

#spip_blog

HTML Minifier

Compresseur de code avec tout plein d’options d’optimisation.

▻https://contrib.spip.net/HTML-Minifier

#spip_blog

Importeur/Exporteur de configuration PLUS

Ce plugin apporte à IE config des exports supplémentaires de configurations ou d’objets.

▻https://contrib.spip.net/Importeur-Exporteur-de-configuration-PLUS

#spip_blog

Je viens de mettre en ligne le site de Bord à Bord, Recettes de cuisine et produits aux algues bio de Bretagne ▻https://www.bord-a-bord.fr.

Pour ce site, j’ai eu pas mal recours à la communauté #SPIP (assez présente ici) via les docs et les listes et je me dis qu’un petit retour d’expérience (à la manière de ceux d’@arno que je lis toujours avec intérêt) serait le bienvenu. Ne le voyez donc surtout pas comme un autopromo déguisée.

Et bien sûr, tout retour est bienvenu.

Graphisme

Toute la partie graphique, conception et identité visuel, a été crée par Oui design - bureau de design graphique, je suis uniquement intervenu sur des questions d’ergonomie ou de faisabilité technique.

Principe

Comme les produits ne sont pas en vente directe mais via des magasins, l’idée du site a été de mettre l’accent sur la présentation des algues et de fournir des recettes avec ces produits pour que les gens sachent quoi faire avec.

Et on navigue à travers tout ça de façon horizontale : dans une recette on retrouve les liens vers les produits utilisés ainsi que vers les algues qu’ils contiennent. Depuis une page algue, on accède aux produits qu’elle compose et aux recettes faites avec, etc... Ces liens fonctionnent avec des mot-clefs.

Donc 3 parties principales :
– histoires d’algues
– Les recettes du bord
– les produits

Et à côté :
– les points de ventes
– la présentation

Histoires d’algues : le choix esthétique à été de faire une page à défiler (type « one page »).
▻https://www.bord-a-bord.fr/-Histoires-d-algues-.html

Un menu en haut de page permet de voir ce que la page contient et d’y accéder en scrollTo avec le plugin Ancres douces. La structure de la page est donc une rubrique affichant tous ses articles sur un même page.

Recettes : la page affiche par défaut les dernières recettes.
▻https://www.bord-a-bord.fr/-Les-recettes-du-bord-.html

En haut de page, on retrouve le diaporama permettant de mettre en avant certaines recettes (en fonction des saisons, des nouveaux produits...) puis un champs de recherche et 3 possibilités de filtre (par produit, ingrédient ou temps de cuisson).

Ces filtres sont des <select> de mot-clefs gérés avec Chosen. Comme tous les mots clefs ne sont pour l’instant pas utilisés, j’ai fait une jointure mot-clefs et articles de la rubrique recette pour n’afficher que les mots clefs effectivement ajoutés à des recettes et ne pas avoir de résultat vide.

Chaque recette a des Champs extras pour les durées de préparation.

Pour gérer l’affichage du visuel dans la grille de la page rubrique (toutes les recettes) et sur la page article (une recette), j’ai utilisé Rôles de documents : visuel grille + visuel présentation.
Une difficulté pour moi a été de créer les rôles via mon plugin squelette (merci à @rastapopoulos et Tcharlss pour le SAD sur le forum du plugin).

Il y a aussi des recettes similaires, pour favoriser la circulation entre les recettes, avec A2A permettant de lier des articles entre eux.

Les produits : une page rubrique affichant tous les articles rangés en sous-rubriques pour pouvoir gérer les gammes de produits (Gamme Fraîche > Les tartares > Le Classique).
▻https://www.bord-a-bord.fr/-Les-produits-.html

Une des questions ici a été la structure HTML5 : qu’est-ce qui est <section> et <article>. Le choix a été de faire un article par type de produit (tartares, moutardes...) avec les différents produits (le classique, le provençal...) en <nav>.

Ici aussi les différents visuels fonctionnent avec Rôles de documents et des champs extras permettent d’afficher le conditionnement du produit. On retrouve également un diaporama Slick en entête pour mettre en avant certains produits.

Points de vente : on affiche avec GIS une carte avec clustering des points et possibilité de se géolocaliser.
▻https://www.bord-a-bord.fr/-Points-de-vente-.html

La difficulté a été ici de trouver un fonctionnement permettant au client de mettre à jour facilement les points de vente à partir de son doc tableur source. Je détaille la démarche par ici ▻https://contrib.spip.net/Tutoriel-Afficher-sur-une-carte-GIS-des-points-dont-on (poke @b_b :) )

Les autres principaux plugins utilisés :
– Multilang + Menu de langues avec liens : le site est prévu pour être multilingue mais la traduction est en cours
– Big upload pour facilité l’ajout des documents par drag and drop
– centre image pour définir le centre d’intérêt des images et recadrer en fonction
– court-circuit pour afficher directement l’article d’une rubrique s’il est seul
– favicon pour gérer les favicons en fonction des appareils
– Image responsive et Insertion avancée d’images pour gérer les images en fonction des types d’affichage (HD ou pas) et des tailles d’écran le tout en HTML5 (<picture>)
– Manuel de rédaction du site pour laisser un mode d’emploi détaillé aux utilisateurs
– Métas+ pour les méta-données openGraph et DublinCore pour un meilleur affichage sur les réseaux sociaux
– Responsive Nav pour le menu burger sur petits écrans
– ZCore
– ZCM, mon plugin squelette perso pour ZCore que je vais tenter de documenter au fur et à mesure par ici ►https://notes.cousumain.info/ZCM-Squelette-modulaire-SPIP-ZCore.html

Certains « détails » auxquels il a fallu penser :
– ne pas afficher dans le sitemap et le plan du site les articles et rubriques n’ayant pas vocation à être vu tels quels
– backend : n’afficher que les recettes

J’ai également commencé à utiliser les svg pour ce site, mais ce n’était que le début, donc certains pictos sont en svg, d’autres non.

Voilà pour mon retour d’expérience, je me dis que ça serait une chouette ressource si d’autres dev faisait de même. On pourrait même trouver un hashtag :)

Lancement aujourd’hui de la nouvelle maquette d’Orient XXI (@orientxxi, #shameless_autopromo donc) :
►https://orientxxi.info

Évidemment c’est du pur #SPIP, et un aspect était d’assurer la continuité sans douleur avec les 2000 articles déjà publiés sur ce magazine. Boulot graphique affiné avec @diala. Travail sur la structure éditoriale avec Michel Raffoul.

Notre premier axe a été de travailler la lisibilité des pages d’articles. Les articles d’Orient XXI étant longs, c’est l’aspect primordial de la maquette. J’ai choisi la police Lora, que je trouve très lisible à l’écran, avec une certaine légèreté dans le gris typographique :
▻https://fonts.google.com/specimen/Lora
Avec un critère important : une italique joliment dessinée, clairement différenciée, et très lisible.

Pour faire le contraste, les éléments de navigation du site utilisent la police Raleway de The League of Movable Type :
▻https://www.theleagueofmoveabletype.com/raleway
utilisée en capitales, et en jouant sur une opposition marquée entre une version très grasse (black) et une version plutôt maigre (regular).

Pour la maquette du texte, le choix désormais classique d’une colonne unique, au maximum 700 pixels de large, et un corps de texte courant assez massif (environ 21px sur grand écran). L’idée étant, encore une fois, de privilégier le confort de lecture de textes longs. (Références : Medium.com, le mode « Lecteur » de Safari, et lecture Zen du Monde.)

Parmi les petites astuces dans les articles :
– les notes de bas de page s’affichent en colonne de droite quand on clique sur le numéro d’appel de note,
– un calcul un peu rigolo pour insérer à l’intérieur du corps du texte un bandeau d’inscription à la newsletter,
– les liens hypertexte vers l’extérieur ont un graphisme plus nettement différencié des liens internes,
– la maquette des intitulés des images, en dehors de la colonne de texte (parfois à côté de l’image, parfois sous l’image quand elle-même dépasse de la colonne de texte).

Autre aspect important sur les pages d’article : l’entrée de page est travaillée pour introduire rapidement la lecture : titre, chapeau, chemin de fer, boutons de partage, tout ça massif mais « above the fold ».

L’idée est de donner une impression de magazine, et non de quotidien. Ce qui donne des choix graphiques et tygraphiques forcément différents.

Pour le bandeau de navigation de haut de page :
– refonte du logo (l’emblème rond n’est pas de moi),
– petit jeu du menu qui se « décroche » en version plus compacte, et qui redevient visible quand on scroll vers le haut (désormais classique, mais efficace je trouve),
– menu de navigation dont deux éléments ont un sous-menu. Ce menu passe dans le hamburger sur petit écran et sur système qui ne gère pas le survol).

Au niveau de la structuration du site, très gros changement : la structure par rubriques est remplacée par une structure thématique et par pays. Cela repose certes sur les mots-clés de SPIP, mais les « thèmes » et les « continents » ne sont ni des mots-clés SPIP ni des groupes de mots-clés :
►https://orientxxi.info/outils/selections/les-pays/pays-du-levant,2316
Ce qui permet à la fois des thémes qui se croisent, et une sorte de fil d’ariane sur les mots-clés un peu plus profond qu’avec l’outil classique de SPIP (par exemple : Pays > Pays du Golfe > Bahreïn) tout en réutilisant la thématisation manuelle des 2000 articles déjà publiés :
▻https://orientxxi.info/fr/bahrein

La page d’accueil essaie de mettre en avant plus de contenu, avec des calculs un peu sympas pour savoir quels grands thèmes mettre en avant en fonction de l’actualité des publications.

Systématisation de l’utilisation de mon plugin « Centre d’intérêt d’images » :
►https://www.paris-beyrouth.org/Plugin-centre_image
qui permet d’indiquer directement dans l’espace privé le point « central » d’une image et de faire plein de recadrages différents sans couper n’importe comment.

Toujours sur la page d’accueil, une sorte de « player vidéo » qui présente toutes les vidéos directement là, sans changer de page. Assez rigolo à faire.

Travail sur les pages d’auteurs, avec autant que possible utilisation de photos des auteurs :
▻https://orientxxi.info/fr/auteur/alain-gresh

La récupération du flux Seenthis d’@OrientXXI est toujours là :
▻https://orientxxi.info/au-fil-du-web
qui permet de publier un suivi d’actualité de manière vraiment simple.

On conserve également mon outil qui permet d’animer simplement des illustrations :
►https://orientxxi.info/va-comprendre/pourquoi-les-etats-unis-cessent-ils-de-financer-l-agence-des-nations-uni

Converser également cette possibilité, largement utilisée sur les articles historiques du site, d’installer de grandes images en haut de page, avec un jeu de dégradé, ce qui donne un aspect très « magazine » :
▻https://orientxxi.info/lu-vu-entendu/le-canal-de-suez-un-enjeu-toujours-actuel,2557

Controleur - Vue avec SPIP
▻https://contrib.spip.net/Controleur-Vue-avec-SPIP

Controleur - Vue avec ajaxReload
un exemple d’utilisation d’ajaxReload dans un squelette SPIP

#spip #ajaxReload #ajax

HTML Minifier - Ladnet
▻https://ladnet.net/html-minifier

Site officiel du plugin HTML-minifier pour SPIP
et son dépot git : ▻https://gitea.ladnet.net/ladnet/htmlminifier

#html-minifier #optimisation #SPIP

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 :

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

On voit que le paragraphe de texte a une texture orangée. Celle-ci est attribuée avec un très classique background :

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é :

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

GIS : légende par mots clés

Une carte s’interprète d’après une légende.
Sur une carte web, des éléments de cette légende peuvent permettre à l’utilisateur de choisir ceux qu’il veut voir afficher : gares, écoles, ...
Dans SPIP les objets peuvent être liés à des mots clés. Les mots clés peuvent être munis d’un logo.
Ce tutoriel propose d’utiliser ces logos de mots clés comme éléments de légende pour les objets « géotagués » (ayant un points gis) sur la carte. Un formulaire permettant de choisir les éléments à afficher.

▻https://contrib.spip.net/GIS-legende-par-mots-cles

#spip_blog