#plugin_spip

ARNO* @arno ART LIBRE 27/09/2023

4

4

Je viens de mettre en ligne mon #plugin_spip Hotspots (pour #SPIP évidemment) :
▻https://git.spip.net/spip-contrib-extensions/Hotspots
C’est un plugin qui permet d’installer une « grande » image de référence dans une rubrique, et cela fait, chaque article de cette rubrique pourra être positionné dans cette image sous la forme d’un « hotspot » rectangulaire, oval ou ponctuel (un point).
C’est une interface graphique particulièrement originale, et c’est redoutablement efficace à utiliser.
Alors attention : autant c’est facile à utiliser dans l’espace privé, autant pour le site public, vous aurez à sortir l’huile de coude et coder les choses vous-mêmes. J’en ai une utilisation tellement versatile que je n’ai jamais développé d’interface publique « clé-en-main » qu’on pourrait réutiliser telle quelle.
Pour comprendre la logiques des valeurs utilisées pour afficher les hotspots de manière responsive sur l’image de fond, on peut aller regarder le code du fichier :
/formulaires/modifier_hotspot.hml
Sur la page de rubrique, j’installe une grande image de référence (ici apparaissent déjà des hotspots) :
https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/IDHFR831ltyZ/pYtJ2528c79xHgrLOgx3FBOaPblvKDMEzvuZts7F.jpg
Dans chaque article de la rubrique, dans la colonne annexe, une petite vignette de cette image de référence apparaît : il suffit de cliquer dessus pour définir que cet article sera un hotspot.
À ce moment, dans la page de l’article, on peut définir précisément la forme et les limites du hotspot (ici un rectangle) :
https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/h5dhJksqy1vv/3F9Vb1xOn8cwYg3yHHY1FPZI5UI27ydeiGIzaNod.jpg
Ensuite en fonction des besoins, je fabrique plein d’interfaces très différentes. Sur cet exemple, je l’ai utilisé pour fabriquer un « jeu » tactile demandant de replacer des bijoux au bon endroit :
https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/WQqa6siGgQQ6/ZlrkjbnGwK5dhJ6F8A7x5kLc6ztT1O4lwRyigOcA.jpg
Mais mon usage le plus fréquent, c’est de créer les hotspots dans des images panoramiques à 360° (évidemment, là il faut un peu bosser son javascript) :
▻https://musee.info/La-salle-Bazille
https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/zhPNRPE8kBOC/2soXAjbIqYOWI5bhRh6kojVxEi1K8lBF2BfMugOe.jpg
dans ce cas les hotspots sont positionnés dans l’interface du plugin sur une projection équirectangulaire de l’image panoramique :
https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/B06DSII81ILc/5gf8NUoStmgfpcBghr35jMCyr1zuwZoDsk9cAer0.jpg
Ou dans une image « zoomable » :
https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/W1KZI27omF0T/gWdyWAdtQQMRgg0ypSmLTEC2OwzjVv5XzlYjmmnn.jpg
Un usage basique serait, évidemment, de gérer des « image map » (mais c’est quelque chose que je n’utilise rigoureusement jamais).

ARNO* @arno ART LIBRE
- vide @touti 27/09/2023
  
  Excellent, bravo !
  En ce moment justement, j’ai envie de jouer à superposer des cartes, et pouvoir agrandir certains points pour comprendre les stabilités ou les modifications urbaines … Je vais sûrement essayer ton plugin :)
  
  vide @touti
- ARNO* @arno ART LIBRE 27/09/2023
  
  Oui, pour placer des points d’intérêt sur des fonds de carte, c’est extrêmement pratique. C’est notamment ce que j’ai fait pour la tour Tanguy à Brest : dans l’interface de l’écran tactile on peut sélectionner différentes périodes, et sur chacun de ces fonds de carte, j’ai des hotspots :
  https://pixelfed.zoo-logique.org/storage/m/_v2/493728974881341455/ea59ea880-d2aad0/vc9kdQUmxURc/rCdCidOzfruMMOPNaKxL17igiKnspdFbLJ9vLjJW.jpg
  
  ARNO* @arno ART LIBRE
Écrire un commentaire
ARNO* @arno ART LIBRE 26/09/2023

3

3

Je viens de poster sur ►https://git.spip.net mon #plugin_spip de Maquettes multiples :
▻https://git.spip.net/spip-contrib-extensions/maquettes_multiples
C’est l’élément central qui me sert à créer des « formes longues » avec SPIP, comme ici :
►https://musee.info
Le plugin propose 10 compositions pour les articles, permettant de créer des blocs à une colonne, deux, trois ou quatre colonnes, dans différentes configurations.
Alors ce n’est pas le plugin qu’on installe, et hop, vous avez un nouveau site Web public : là il faut fabriquer ses propres squelettes en allant regarder dans /squelettes/inc.
Les CSS sont responsive, par contre c’est assez oldschool. Parce que c’est du code que j’ai fabriqué il y a longtemps, donc pas de flex ni de grid ni de calc(). Mais ça a l’avantage de s’afficher sans risques sur n’importe quel machine.

ARNO* @arno ART LIBRE
- ARNO* @arno ART LIBRE 26/09/2023
  
  Et donc je poste aussi le plugin Textes étendus :
  ▻https://git.spip.net/spip-contrib-extensions/textes_etendus
  Initialement c’était inclus dans mon plugin Maquettes, mais j’ai préféré l’extraire pour en faire un plugin séparé.
  Ce plugin se contente d’ajouter 3 champs texte (#TEXTE2, #TEXTE3 et #TEXTE4) aux articles. Ce qui est bien pratique si on veut faire des articles avec plusieurs colonnes.
  
  ARNO* @arno ART LIBRE
- klaus++ @klaus 26/09/2023
  
  #merci @arno ! Je suis en train de préparer quelques projets de livres plurilingues alors je testerai la gestion des versions de langue et annotations dans les champs supplémentaires et leur mise en forme dans les colonnes de Maquettes multiples :-)
  Puisqu’il s’agit de textes de livres je pense ne pas avoir besoin des fonctions de multilinguisme de SPIP qui sont très utiles pour les sites web en développement constant par une équipe.
  Tu m’a donné l’idée d’un affichage par couches superposées (layer) pour les versions de langue qu’on devrait pouvoir activer et désactiver dans une sorte de navigation verticale alors que la navigation entre chapitres et paragraphes se ferait par déplacement haut/bas du texte sur l’écran.
  #SPIP
  
  klaus++ @klaus
- RastaPopoulos @rastapopoulos CC BY-NC 26/09/2023
  
  Tu peux mettre des exemples de liens où ya 2, 3 et 4 colonnes ? :)
  Plutôt que des champs rajoutés en dur, et qui sont très arbitraires, peut-être qu’un découpage à l’intérieur du texte principal pourrait être fait, avec des plugins du genre de celui de @touti
  ►https://contrib.spip.net/Raccourci-colonne
  (ou une version améliorée si on trouve qu’il manque des classes ou autre, ou qu’on veut pouvoir l’utiliser sans que ça ajoute ses propres CSS)
  
  RastaPopoulos @rastapopoulos CC BY-NC
- ARNO* @arno ART LIBRE 26/09/2023
  
  Sur la page d’accueil de musee.info référencée dans mon message, tu as 2, 3 et 4 colonnes, et aussi une colonne principale et une annexe à droite ou à gauche.
  En fait, pour des formes longues rédactionnelles, j’utilise essentiellement une colonne et les différentes variantes de deux colonnes. Les 3 et 4 colonnes, dans tous les cas les colonnes sont étroites, donc c’est pas adapté à du texte long, mais plus à de la présentation « vitrine » (à la façon de la page d’accueil de Musee.info).
  L’idée est de jouer beaucoup, aussi, avec mon plugin « Insertion avancée d’images ». Par exemple pour un « vrai » longform éditorial :
  ►https://musee.info/L-histoire-de-la-collection-italienne
  ▻https://musee.info/Soulages-a-Montpellier
  ▻https://musee.info/Moyen-age-et-Renaissance
  Pour ce qui est de fonctionner avec une structuration des différentes colonnes avec l’unique champ #TEXTE, c’est ce que j’ai fait très longtemps. J’avais un plugin qui découpait en colonnes selon les intertitres :
  {{{Première colonne}}} {{{# Deuxième colonne}}} {{{## Troisième }}} {{{### Quatrième }}}}
  
  Mais en pratique, ce n’est pas aussi pratique. Des champs multi là-dedans c’est chiant. Déplacer du texte d’une colonne à l’autre c’est chiant. Expliquer au client qu’il faut qu’il bidouille plusieurs colonnes dans un seul champ texte c’est chiant. :-))
  De ce fait, à un moment j’ai recodé mon plugin pour avoir 4 champs texte différents, j’ai même une moulinette pour récupérer depuis l’ancien format.
  
  ARNO* @arno ART LIBRE
- ARNO* @arno ART LIBRE 26/09/2023
  
  Une remarque importante : utilisé avec le plugin Médias responsive, le plugin Maquettes multiples joue énormément avec les possibilités d’alignement hors des colonnes de texte. C’est un gros point fort, à mon goût, de ces maquettes : on peut par exemple afficher les légendes à côte de l’image, en dehors de la colonne de texte, soit avec le pile |large, forcer l’image plus large que la colonne de texte et la légende qui vient se positionner en dessous, toujours en dehors de la colonne.
  C’est particulièrement visible dans le longform sur le collection italienne :
  ►https://musee.info/L-histoire-de-la-collection-italienne
  
  ARNO* @arno ART LIBRE
Écrire un commentaire
vide @touti 8/12/2013

4

4

#Plugin_SPIP #scssphp
téléchargeable sur ►http://plugins.spip.net/scssphp.html
compile en CSS et mets en cache les fichiers .scss
grace à ▻http://leafo.net/scssphp
Permet d’utiliser #SASS, un #préprocesseur_CSS et ses diverses possibilités dans #SPIP,
voir les discussions poursuivies sur seenthis à ce propos
►http://seenthis.net/messages/199765
▻http://seenthis.net/messages/204846
Les @import sont surchargeables dans les squelettes sans avoir à toucher aux originaux des éventuels #frameworks qui disposeraient de fichiers sass, par exemple #knacss
►http://zone.spip.org/trac/spip-zone/browser/_plugins_/knacsss
Le code de ce plugin a été pompé de celui déjà existant pour less
►http://plugins.spip.net/lesscss.html

vide @touti
- kent1 @kent1 ART LIBRE 8/12/2013
  
  J’y connais rien mais je dis #spip_blog quand même... ;)
  
  kent1 @kent1 ART LIBRE
- RastaPopoulos @rastapopoulos CC BY-NC 8/12/2013
  
  Yeah, merci @touti pour cette intégration de librairie à SPIP. Ça faisait longtemps que ça me trottait aussi dans la tête, mais tu as eu le courage et pris le temps de le faire : gloire à toi ! \o/
  Et à nous les super mixins et le HTML qui redevient sémantique !
  
  RastaPopoulos @rastapopoulos CC BY-NC
- vide @touti 8/12/2013
  
  Merci @rastapopoulos et @nicod_, car nos diverses discussions m’ont permis de concrétiser un peu les choses avec scss.
  Le but après avoir tenté de comprendre les imbrications actuelles entre html5/elasticité/grille/css/jsforIE, est de pouvoir simplifier la méthode de fabrication d’un site mais aussi, tenter d’échapper à Bootstrap, et faire que dans tout ce joyeux bordel l’#artisan-web (que je suis) ne se retrouve pas juste bouton pressoir ou assembleur de cascades à la chaine ;)
  Pas sûr cependant que SASS permette de faire du simple, facile pour tous, dont la relecture soit aisée, sans attaches à un framework lourd, et entre autres rêves d’indépendance, autorise à se passer des class le plus possible.
  J’ai aussi très envie d’une optimisation en légèreté avec une css de maximum… 25ko, ce qui devrait être suffisant pour : faire un beau site, alléger le poids des fichiers envoyés au serveur/client et faciliter la prise en main et la maintenance.
  Avec des structures HTML adéquates, et ta piste d’échafaudage @rastapopoulos ▻http://seenthis.net/messages/204846#message205077 que tu nous expliqueras hein ! ça risque d’être bien sympa.
  
  vide @touti
- tetue @tetue CC BY 25/09/2015
  
  @seenthis : y’a un drôle de bug qui fait que je retrouve ce seen systématiquement épinglé en favoris chaque fois que je reviens sur Seenthis…
  
  tetue @tetue CC BY
Écrire un commentaire
ARNO* @arno ART LIBRE 3/05/2011

2

2

Nouvelle version du plugin « CSS imbriqués » :
►http://plugins.spip.net/CSS-imbriques
Le plugin est désormais compatible avec les déclarations @media, permettant de préciser des variantes de classes selon différents critères (support, largeur d’affichage...).
Subtilité : on peut intégrer la déclaration @media à l’intérieur d’une hiérarchie de CSS imbriqués (alors que, normalement, @media n’est présent qu’à la racine). Cela permet de déclarer une variante de media directement dans la structure logique (l’imbrication des CSS), le plugin se chargeant à la fin de regrouper toutes les variantes de classes d’un même @media en fin de feuille de style.
#plugin_spip #SPIP #media_queries #responsive_web_design

ARNO* @arno ART LIBRE
- Nicolas Hoizey @nhoizey CC BY-NC-SA 3/05/2011
  
  Faudrait que je teste un jour, mais j’aime #LESS qui a l’avantage de ne pas être lié à #SPIP...
  Mais pourquoi un tag #responsive_web_design ? Quel rapport ?
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
- ARNO* @arno ART LIBRE 4/05/2011
  
  Parce que si tu veux faire du responsive web design, les media queries sont les bienvenues, et c’est en prévision de ça que j’ai introduit cette façon de procéder (les @media queries hiérarchisées à l’envers) dans le plugin.
  
  ARNO* @arno ART LIBRE
- Fil @fil 4/05/2011
  
  c’est vraiment top mais en effet ce serait encore plus top d’essayer de converger avec #less ►http://lesscss.org ; de ce que j’ai vu rapidement, il y aurait deux ou trois détails de syntaxe + les variables
  
  Fil @fil
- ARNO* @arno ART LIBRE 4/05/2011
  
  Ça ne me semble pas évident :
  – on a déjà une syntaxe dans SPIP,
  – mon plugin permet parfaitement d’utiliser la syntaxe de SPIP.
  La convergence, si elle revient à ajouter une syntaxe tirée de Less à la syntaxe existante de SPIP, ça me semble assez casse-gueule. Les variables de LESS s’ajouteraient aux variables SPIP, et les fonctions de LESS s’ajouteraient aux fonctions de SPIP, avec en plus une syntaxe différente.
  
  ARNO* @arno ART LIBRE
- Nicolas Hoizey @nhoizey CC BY-NC-SA 10/08/2011
  
  @fil @arno L’intérêt de passer plutôt par LESS serait de pouvoir commencer sur SPIP en récupérant telles quelles des intégrations HTML/LESS, ça commence à devenir plus courant...
  
  Nicolas Hoizey @nhoizey CC BY-NC-SA
Écrire un commentaire