Alpha (HTML5 UP)
#Squelette_SPIP adapté du thème Alpha de HTML5 UP
▻https://html5up.net/alpha
#spip
-
-
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 ?
-
tu as donné les droits publics ?
sur un navigateur, si j’entre
▻https://vimeo.com/304775757
j’ai
403 Forbidden
SPIP n’y est pour rien :) -
Apparemment, Vimeo a des coups de mou. Des fois j’ai des messages de son nginx.
Mais le rejet des vidéos par SPIP est systématique. En fait, en local, ça passe. Mais sur un serveur Web en ligne, je me fais jeter (copie d’écran ci-dessus).
J’ai joué avec ecrire/inc/distant.php, et j’ai trouvé qu’en modifiant à partir de la ligne 440 ainsi, ça refonctionne :
// si on a pas deja recuperer le contenu par une methode detournee
if (!$result['length']) {
$res = recuperer_body($handle, $options['taille_max'], $gz ? $gz : $copy);
fclose($handle);
if ($copy) {
$result['length'] = $res;
$result['file'] = $copy;
} elseif ($res) {
$result['status'] = 200;
if (!$result['headers']) $result['headers'] .= "Content-Type: text/html";
$result['page'] = &$res;
$result['length'] = strlen($result['page']);
}
}C’est-à-dire que si j’ai $res (recuperer_body a répondu avec du contenu), je force status et headers dans la réponse.
Mais j’ignore si c’est la bonne méthode (pour le status, ça me semble logique ; pour headers déjà nettement moins). J’ai expédié un mail à spip-dev, si quelqu’un de plus calé que moi veut valider ou invalider mon hack, ce serait bien.
-
-
Lancement aujourd’hui de la nouvelle refonte du site #SPIP de ▻http://pensezsauvage.org #shameless_autopromo donc
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 !
-
C’est très très chouette.
Par contre je trouve pas très pratique ce gros header fixe qui me prend un bon tiers de l’écran [edit]si > 1600px de large[/edit] et du coup limite le contenu du catalogue sous les yeux à 1 ligne, assez bas, comme on le voit sur ta dernière capture justement.
-
-
-
@marcimat merci de tes retours
effectivement, je préfère aussi le mode <1600px
je vais peut-être tenter de « dézoomer » la page quand on est >1600px
Et pour « Les autres trucs » c’est tout bêtement les articles en pied de page ! mais c’est pas bien clair, je vais remettre ce titre pour mieux comprendre :) -
-
-
-
-
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 -
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...
