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
#spip
-
-
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
-
-
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 :)
-
-
-
Oups... j’ai oublié les « Méthodes alternatives pour installer SPIP » : ▻https://www.spip.net/fr_article6441.html
-
-
-
-
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-
>> utilisez le filtre |url_nettoyer{200} <<
Rrooh punaize ! Je me souviens d’une nuit sur IRC où l’on cherchait le meilleur moyen de créer ce genre de filtre de nettoyage avec R3alET ^^
-
Merci pour ce code.
J’avais utilisé la boucle URL pour ça :
<code class="spip">
<BOUCLE_scroll(RUBRIQUES){id_parent}{par num titre, titre}>
<BOUCLE_url(https://seenthis.net/URLS){type=rubrique}{id_objet=#ID_RUBRIQUE}>
[(#SET{url,#GET{url}|array_merge{#ARRAY{rub#ID_RUBRIQUE,#URL}}})]
</BOUCLE_url>
<li class="item"><a href="/tag/spip#[(#GET{url}|table_valeur{rub#ID_RUBRIQUE})]">#TITRE< ;/a></li>
</BOUCLE_scroll>
</code>BOUCLE_scroll : on construit le menu à partir des sous rubriques.
BOUCLE_url : pour chaque entrée du menu, on rentre son url (sans les + et le .html) dans un tableau (rub1 > url_de_la_rubrique_1... etc)Et pour générer l’ancre dans la page (dans une boucle RUBRIQUES) :
<code class="spip">id="[(#GET{url}|table_valeur{rub#ID_RUBRIQUE})]"</code>
-
@seenthis : les balises ne <code class="xxx"> ne fonctionnent pas dans les posts ?
Et la BOUCLE_url fait un truc chelou : l’adresse du site apparait en lieu et place de URL.
Voir la boucle originale : ▻http://spip.pastebin.fr/55209 -
-
C’est surtout que je ne connaissais pas |url_nettoyer :)
Par contre, quid de la permanence des ancres si le titre change ?
C’était la raison pour laquelle j’étais parti sur URL... -
-
Je pense aux liens envoyés par mail ou depuis d’autres sites par ex. Si on change le titre d’un article, l’ancre change et le lien n’amène plus à l’ancre.
Bon, c’est pas bien méchant vu qu’il amène toujours sur la bonne page.
-
-
#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-
Les deux, cela dépend du type de projets sur lesquels tu travailles.
C’est l’exact raison pour laquelle j’ai conçu Intégraal, parce que Zpip ou SpipR ne convenait pas du tout dans les cas où on avait des clients différents, avec des graphismes dédiés à chaque fois, où il faut intégrer des maquettes précises, qui n’ont rien à voir les unes avec les autres.
Dans ce cas, l’avantage d’avoir un plugin commun se réduit drastiquement, pour deux raisons :
1) tu finis par surcharger au moins 50% du truc de base
2) quand il y a une mise à jour du plugin central, ça peut très souvent te péter ton intégration, puisque tu avais basé du graphisme sur une structure qui peut bouger à tout moment !Voilà donc pourquoi cela fait des années que l’on travaille avec Intégraal et désormais sa commande spip-cli qui permet en 2s d’avoir la structure d’intégration, qu’ensuite on modifie directement.
En revanche, attention, si une partie du travail concerne tout un ensemble de clients qui se ressemblent au moins un peu, et aussi si tu arrives à avoir des bases génériques ET configurables (noisettes ou autre), alors dans ce cas là ça peut de nouveau être intéressant d’avoir un plugin-squelette qui est le même pour tout le monde, et sur lequel tu ne fais que plaquer des styles (et pour ça il faut que tes classes CSS soient génériques aussi, quand je parle de générique, c’est pas juste au niveau des squelettes, <inclure>, etc).
Actuellement, en plus de continuer à utiliser Intégraal, nous sommes en train de réfléchir à un plugin commun aussi, pour d’autres besoins.
En simplifiant :
Intégraal = site à façon, où on conçoit un ensemble de fonctionnalités, une ergonomie et un graphisme propre à ce site, puis on l’intègre tel qu’on l’a conçu.
Plugin = site où on propose aux gens des fonctionnalités qui sont déjà à moitié intégré, parce que ça rentre vraiment dans le périmètre de leurs besoins, et sur lesquels on change juste quelques petites différences graphiques (palette de couleur, typo, header, etc).
-
Mais du coup, si on change son boiler plate en plugin spécifique au nouveau projet, ça veut dire que chaque nouvelle fonctionnalité ajoutée en cours de développement (donc dans le nouveau projet, tout le monde suit ?) doit être reportée dans le boiler plate source pour profiter au prochain projet.
Ça veut peut être dire qu’il faut attendre que le boiler plate soit arrivé à maturité avant de fonctionner comme ça...
bon, work in progress quoi...
-
Bah oui, mais seulement si c’est une fonctionnalité générique. Le principe du boiler plate c’est qu’ensuite tu modifies en fonction de ton projet précis. Mais à tout moment, et surtout au début bien sûr, tu peux détecter que tel ajout va te servir dans d’autres futurs projets, donc tu l’ajoutes à ton projet en cours, tu le testes, tu trouves ça cool, et alors tu le reportes sur le boiler plate. C’est ce qu’on fait dans Intégraal depuis le début (même si on n’est pas forcément très rigoureux, ya sûrement plein de choses encore à reporter).
-
Oui, c’est reporter les évolutions qui semble contraignant.
Je vais tester ce fonctionnement pour mon prochain projet.
A suivre donc...
-
-
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 -
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.
-
« [...] Bienvenue dans #SPIP » (cœur avec les doigts)
-
Salut b_b :-) Belle intro ! Pour une plus grande facilité de lecture il faudrait sans doute supprimer la virgule après le « par exemple » (je suis resté bloqué 10 secondes en attendant ce qu’il avait après le par exemple...). ++
-
@_cym_ je t’invite à commenter dans le forum de l’article sur spip.net plutôt qu’ici ;)
-
Ajouté à la liste suivante ▻https://www.contributor-covenant.org/adopters sur les conseils de @touti :
▻https://github.com/ContributorCovenant/contributor_covenant/commit/815a4bd4f39b13fa0b6b659f5d50d33f95013814
-
-
markdown/README.md at master · Cerdic/markdown · GitHub
▻https://github.com/Cerdic/markdown/blob/master/README.mdCe 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> -
GitHub - mistergraphx/spip_moncompte : Gestion de compte utilisateur/visiteur coté publique du site
▻https://github.com/mistergraphx/spip_moncompteGestion 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
-
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.
-
HTML Minifier
Compresseur de code avec tout plein d’options d’optimisation.
-
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
-
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 produitsEt à côté :
– les points de ventes
– la présentationHistoires 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-.htmlUn 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-.htmlEn 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-.htmlUne 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-.htmlLa 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.htmlCertains « 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 recettesJ’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 :)
-
-
#spip_recette ? Pas de contre avis ? Feu alors !
-
-
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/bahreinLa 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-greshLa 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-uniConverser é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-
-
Yeah super ! Ça mériterait aussi les « jolis soulignements » de Medium (et de nombreux autres médias désormais), dans les corps de textes principaux tout du moins. :)
-
Salut @arno,
merci pour ce décorticage, toujours intéressant, de projet et beau résultat !
Un petit retour : il semble y avoir les balises html dans le title de certaines page, par ex ▻https://orientxxi.info/magazine/colloque-du-deni-de-palestine-a-l-apartheid,2674
-
Erreur de copier/coller, c’est cette adresse qui a un title chelou : ►https://orientxxi.info/outils/selections/les-pays/pays-du-levant,2316
-
-
C’est beau, bravo et merci. Il y a une chose que vous avez modifiée, et que je regrette, c’est que dans la séquence des identifiants de l’article, prenons aujourd’hui par exemple : « Israël/Palestine > Médias > Eyal Hareuveni > 29 octobre 2018 », il n’y a plus « Orient XXI ». C’est dommage, parce que quand on fait un copié-collé, ça permet de garder l’identification du journal dont vient l’article...
-
Le nouveau tag #spip_recette pour recenser les retour d’expérience.
-
-
Controleur - Vue avec SPIP
▻https://contrib.spip.net/Controleur-Vue-avec-SPIPControleur - Vue avec ajaxReload
un exemple d’utilisation d’ajaxReload dans un squelette SPIP#spip #ajaxReload #ajax
-
HTML Minifier - Ladnet
▻https://ladnet.net/html-minifierSite officiel du plugin HTML-minifier pour SPIP
et son dépot git : ▻https://gitea.ladnet.net/ladnet/htmlminifier-
Bientôt sur la zone & contrib pour une publication dans #spip_blog ;)
-
-
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");
L’astuce pour que ce fond ne s’applique aux caractères du texte, c’est cette CSS :-webkit-background-clip: text;
color: transparent !important;
La CSS #background-clip indique que l’image de fond devra s’appliquer uniquement au texte, et la seconde ligne force la couleur du texte àtransparent, de façon à laisser apparaître l’image de fond.D’après CanIUse :
▻https://caniuse.com/#search=background-clipFirefox, 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-clipn’est pas interprété :
Je ne vois pas d’autre solution qu’un test Javascript, du coup, beurk (à moins que quelqu’un ait une meilleure solution).-
Un fallback CSS à coucher dehors:
▻http://nimbupani.com/using-background-clip-for-text-with-css-fallback.htmlbody {
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_imbriquesOn 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%;
}
Et cela fabriquera le CSS qui va bien avec le fallback compliqué.
-
-
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. -
Des squelettes SPIP pour les thèmes html5up
Le site ►http://html5up.net propose de beaux thèmes dont certains ont été adaptés pour SPIP.
▻https://contrib.spip.net/Des-squelettes-SPIP-pour-les-themes-html5up
-
Vu sur le web ... La revue Ethnographiques - Fidèle à #SPIP depuis 2002
–---
Ethnographiques.org fait « peau neuve »
Chères lectrices, chers lecteurs,
Nous avons le plaisir de vous annoncer que le site de la revue ethnographiques.org vient d’être entièrement rénové afin de le rendre facilement accessible depuis tous vos appareils connectés (ordinateurs, tablettes, téléphones mobiles).
Avec ce progrès technique, le projet éditorial d’ethnographiques.org prend un nouvel élan. Depuis 2002, la revue offre sur Internet des ethnographies riches, nourries d’éléments multimédias et souvent composées selon des dispositifs de narration originaux. Il s’agit de donner à lire et à penser des recherches actuelles de qualité en soulignant que toute grande réflexion sur la vie sociale gagne à s’ériger sur la base d’une attention précise aux faits, sans pour autant tomber dans un positivisme étriqué qui négligerait de considérer ce que la construction des faits doit au contexte du terrain, aux théories à la mode du jour, à la subjectivité du chercheur, au genre…
Née d’une collaboration entre universitaires français et suisses, la revue a été d’emblée considérée comme une entreprise internationale ouverte aux différentes orientations de l’anthropologie d’aujourd’hui, traduisant par exemple régulièrement des contributions de chercheurs étrangers. Grâce à Internet, les internautes d’Europe, mais aussi d’Afrique, d’Asie, d’Amérique, d’Océanie, consultent sans restriction les 35 numéros déjà publiés et nous œuvrons pour que les prochaines parutions, à raison de deux livraisons par an, restent en libre accès afin que tous — anthropologues, sociologues ou simples citoyens du monde — puissent directement accéder à une partie des travaux contemporains en sciences humaines et sociales.
Qu’une entreprise de savoir critique et réflexif soit librement diffusée sur Internet ne signifie pas pour autant qu’elle flotte dans les limbes d’une virtualité dénuée de toute considération matérielle et sans acteurs humains.
Sans retracer ici l’histoire ou l’ethnographie d’une revue en ligne, il suffit d’indiquer que, comme la plupart des publications scientifiques, ethnographiques.org fonctionne avec un comité de direction qui pilote la politique éditoriale et avec l’aide de nombreux relecteurs qui participent à l’évaluation (et souvent aux demandes de réécriture) des contributions reçues. Celles retenues sont ensuite intégrées à un système de publication sur Internet.
Depuis quasiment ses débuts, notre revue a accordé sa confiance à la communauté de développement du système de publication #Spip (www.spip.net) qui milite pour un Web indépendant où la liberté d’expression reste réelle. En accord avec cette philosophie, nous avons tenu à réaliser la refonte de notre site en poursuivant notre aventure intellectuelle et technique sur le logiciel Spip. Nous avons pour cela fait appel à l’un des membres de cette communauté, *****, et sommes heureux d’apporter, à notre mesure, notre contribution à ce projet de logiciel libre. La diversité des systèmes de publication et des portails d’accès est pour nous congruente à l’étude et au respect de la diversité humaine et culturelle.
Ce renouveau d’ethnographiques.org a aussi été rendu possible grâce aux institutions qui soutiennent directement la revue et que nous remercions ici vivement. L’Institut des sciences humaines et sociales du CNRS fournit un mi-temps d’éditrice en la personne de Marie Berjon. Une subvention du Département du pilotage de la recherche et de la politique scientifique (Ministère de la Culture, France) nous a apporté le financement nécessaire à cette refonte. Le Musée d’ethnographie de Neuchâtel et l’Institut d’ethnologie de l’Université de Neuchâtel (Suisse), qui ont toujours contribué au rayonnement de la revue, sont restés fidèles à leur immémoriale réputation d’innovation iconoclaste.
Ces soutiens institutionnels ont ainsi permis aux membres du comité de direction, en particulier Jean-Christophe Monferran (IIAC - LAHIC, CNRS - EHESS) dont l’action a été déterminante, et à Marie Berjon d’œuvrer à la refonte du site que vous allez pouvoir aujourd’hui découvrir.
Que ce soit sur votre téléphone mobile pendant un trajet dans les transports publics ou sur votre ordinateur de bureau, nous vous invitons donc à retrouver, avec un nouveau confort de lecture, les centaines d’articles et de comptes-rendus déjà publiés et de vous replonger dans nos dossiers (pour ne citer que les quatre derniers : Vieillir en institution, Philanthropies, Retours aux rituels, Enquêtes collectives).
Bonne lecture et à bientôt pour le prochain numéro : Jouer avec les animaux !
Sophie Chevalier, Thierry Wendling et le comité de direction d’ ▻https://www.ethnographiques.org
-
Google Analytics API
Ce plugin permet d’utiliser l’API Google Analytics V4, en PHP, afin de récupérer des statistiques de votre site SPIP.
▻https://contrib.spip.net/Google-Analytics-API
#spip_blog même si google...
-
Time-saving #CSS techniques to create #responsive #images
▻https://medium.freecodecamp.org/time-saving-css-techniques-to-create-responsive-images-ebb1e84fTo 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
-
-
Spip et SVG
▻https://contrib.spip.net/Spip-et-SVGLa page du carnet de SPIP-contrib pour tout ce qui touche à l’intégration de SVG en SPIP
-
GitHub - darylldoyle/svg-sanitizer : A PHP SVG/XML Sanitizer
►https://github.com/darylldoyle/svg-sanitizerLibrairie PHP pour sécuriser les SVG
-
Référencé ici aussi ▻https://seenthis.net/messages/621498 par un certain @cy_altern ^^
-
-
ah m*** ! j’ai vraiment un problème avec les doublons dans Seenthis...
-
Deux conseils :
– toujours vérifier la présence de la tite flèche à côté des liens (sous le message) avant de poster
– utiliser la formidable extension seenthis pour Firefox qui te permet de fouiller rapidement dans tes postsEt hop :)
-
