• À l’instant, mise en ligne de la nouvelle interface graphique du World Nuclear Industry Status Report :
    https://www.worldnuclearreport.org

    C’est un site #SPIP très simple, mais avec quelques détails originaux.

    – Une « difficulté » ici : quasiment pas d’images, et une structure courte (en gros : trois rubriques quasiment « à plat »), du coup pour faire vivre la maquette graphique, il faut faire autrement que sur les sites que l’on fait d’habitude. Du coup, jouer sur un aspect épuré, très aéré, et accentuer le constraste des polices de caractères. En même temps, tenter de créer un graphisme moderne, plus dynamique, mais qui respecte l’aspect la crédibilité et le sérieux des informations.

    – En page d’accueil, le logo SVG se « dessine » tout seul.

    – Pour chaque pays abordé, il y a désormais un mot-clé auquel on attribue (par des modèles SPIP) des petits graphiques indiquant les nombres de réacteurs, l’âge moyen des réacteur avec indication du plus récent et du plus vieux, la part du nucléaire et son évolution, et le facteur de charge annuel :
    https://www.worldnuclearreport.org/+-France-+.html
    Comme ce sont des modèles SPIP, ça se modifie facilement dans l’espace privé, et « graphiquement » c’est « dessiné » en HTML.

    – Du coup dans les articles, quand l’article traite d’un seul pays, on affiche le rappel des indicateurs de ce pays en colonne de droite :
    https://www.worldnuclearreport.org/U-S-Pilgrim-Nuclear-Reactor-Closes-13-Years-Before-License-Expir

    – Refonte des pages des articles de la revue de presse :
    https://www.worldnuclearreport.org/IEA-urges-advanced-economies-to-support-nuclear-as-renewables-co
    Un petit détail : aller chercher une copie d’écran de la page référencée. Comme, sur ce site, il n’y a jamais de « logo d’article », ça permet d’introduire un peu de repères visuels et de rythme dans des pages qui seraient sinon très austères.

    – Du coup, la page de rubrique « WNISR in the Media » est nettement plus « habillée » qu’avant :
    https://www.worldnuclearreport.org/-WNISR-in-the-Media-.html
    on retrouve les prévisualisations, mais aussi l’indication en surtitre du média référencé, éventuellement un nom d’auteur (utile dans l’autre rubrique) et, également nouveau, la mention de la langue (quand ce n’est pas en anglais).

    – Du coup, avec la gestion dans SPIP de la langue, on se retrouve avec la typo automatique en fonction des langues, c’est toujours plus propre :
    https://www.worldnuclearreport.org/Nucleaire-Les-centrales-de-poche-vont-elles-sauver-la-filiere.ht
    Le petit détail ici, c’est que même si l’article est en français ou en allemand, il faut continuer à afficher les dates en anglais, parce que l’interface générale du site est volontairement en anglais.

    – Une petite difficulté était que le site a des contenus pas forcément responsive. Notamment des tableaux réalisés avec « tableau.com ». Du coup j’ai bidouillé un petit script pour rendre « responsive » l’affichage de ces graphiques :
    https://www.worldnuclearreport.org/Nuclear-Power-Strategic-Asset-Liability-or-Increasingly-Irreleva
    (au passage sur cette page, il y a aussi l’ajout automatique de la nouvelle façon de présenter les images dans les articles avec mon plugin « Insertion avancée d’images », et une présentation un peu plus moderne de présenter des documents PDF.

    #shameless_autopromo


  • Avec Diala on vient de réaliser le nouveau site de l’Ihédate (Institut des hautes études d’aménagement des territoires) :
    https://ihedate.org

    #shameless_autopromo donc, sous #SPIP évidemment.

    Le site est essentiellement consitué de #longforms pour les entrées principales, permettant de présenter les informations institutionnelles comme des pages longues, rythmées par de grandes images qui se fondent dans le texte, et avec des maquettes multiples (1 colonne, 1 colonne large, 2 colonnes, 3 ou 4…). Rythmer par la présence d’images de différents formats (prévisualisation de vidéos, visages dans des cercles, petits logos vectoriels animés…). Par exemple :
    https://ihedate.org
    https://ihedate.org/l-ihedate
    https://ihedate.org/le-cycle-annuel

    On a créé une petite collection de « raccourcis » (des modèles SPIP) pour gérer certaines informations, dans ces longues pages, de manière semi-automatique : l’affichage de l’agenda, des liens vers des articles et des rubriques, des petits raccourcis « auteur » avec leur trombine, le dernier article de telle rubrique avec un visuel ou un PDF, un « témoignage » d’un ancien…

    Il y a par ailleurs plusieurs pages ave des développements spécifiques, comme par exemple l’« annuaire des auditeurs » qui, outre un moteur de recherche, affiche les régions françaises avec, directement tiré de la base de données, le nombre d’anciens pour chaque région :
    https://ihedate.org/l-annuaire-des-auditeurs

    Et évidemment, des « articles » très classiques au sens de SPIP (un article sur une page…), mais avec une maquette de texte un peu « moderne » (une seule colonne, « gros » texte, grandes images qui « sortent » de la colonne de texte, responsive…) :
    https://ihedate.org/la-fin-de-la-paix-territoriale

    La principale originalité du site est de gérer des publications publiques et à accès réservé, alors qu’auparavant c’était réalisé sur deux sites séparés (il existait le site public officiel, et un site dédié aux annonces protégées par mot de passe). De fait, il y a pas mal de subtilités pour gérer ça. Techniquement c’est amusant : ici on affiche par exemple les liens quand on n’est pas identifié, mais les liens ouvrent le formulaire d’identification. Au niveau du workflow, ça a demandé un peu de réflexion pour que ce soit facile à gérer et qu’on évite les erreurs « humaines » dans la gestion des documents publics/privés.

    Une partie centrale, c’est la publication des programmes des « cycles annuels » :
    https://ihedate.org/cycle-2019-geographies-de-l-argent
    Il y a là toute une gestion de ce qui est public et ce qui est privé (les visiteurs identifiés ont accès au détail de chaque session, avec éventuellement l’accès aux vidéos de chaque conférence). C’est l’aspect le plus complexe dans la réalisation de ce site.

    Plus simple à gérer, mais avec des petites spécificités : la « médiathèque » présente les documents et les vidéos en accès libre
    https://ihedate.org/les-documents-en-acces-libre

    Travail un peu original sur les « pages des auteurs », où il faut gérer les accès publics et privés :
    https://ihedate.org/marchandise-jacques-francois

    Non visible par le grand public, on a développé toute une gestion des promotions et des « auditeurs » :
    https://ihedate.org/toutes-les-promotions
    Chaque personne (ainsi que les administrateurs évidemment) peut modifier ses informations personnelles et décider de partager chaque information avec les autres auditeurs ou non (formulaires spécifiques donc pour gérer adresses et téléphones perso et professionnels).

    Par ailleurs on a conçu un « espace collaboratif », sous forme de forums structurés (par cycles annuels et par thèmes) pour permettre les échanges d’information (tout à est privé). Les forums eux, sont des forums SPIP. L’originalité est de déterminer le forum principal de chaque personne (en fonction de son année de participation à un cycle), et de permettre la participation ou non à chaque thème (on peut voir tous les « thèmes », mais on ne peut participer qu’en « s’abonnant » à ce thème, auquel cas on verra dans son propre espace personnel les derniers messages qui s’y rattachent.

    Un aspect technique intéressant, c’est qu’on a récupéré le contenu des deux sites précédents (public et privé), ainsi que leurs bases d’auteurs, de « visiteurs identifiés », de documents, de mots-clés, etc., et qu’il a fallu fusionner ces différentes sources. Ça a été assez coton à faire, avec différentes « moulinettes » pour tenter de recoller des sources hétérogènes. Mais du coup, on a tout récupéré, et ça fait énormément d’informations qu’il n’y a pas eu besoin de ressaisir.

    Pour le détail : les vidéos sont intégrées dans les articles, depuis des années, directement en iframe en HTML, et évidemment ce n’est pas nativement responsive. Du coup j’ai développé des petits outils PHP pour transformer ces codes dans les articles en codes responsive. Et aussi pour « extraire » la vignette de la vidéo pourtant intégrée directement en HTML dans l’article, pour fabriquer les vignettes de navigation de ces articles (voir la médiathèque).


  • 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 !


  • #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

    • 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).


  • 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


  • Avec Mosquito, on vient de livrer le site de la Fondation Custodia :
    https://www.fondationcustodia.fr

    Comme d’habitude, c’est du #SPIP, #HTML5 #responsive et tout ça…

    Parmi les points à voir en particulier…

    – Un menu hamburger tout mignon.

    – Des #longforms pour la présentation des expositions :
    https://www.fondationcustodia.fr/Georges-Michel

    – Dans ces longforms, on peut présenter des collections d’œuvres avec mon raccourci <ligne>, qui présente les images sur une ou plusieurs lignes, en adaptant la taille des images pour occuper la largeur de l’écran :

    – Ou avec mon raccourci <slide>, qui présente les documents les uns à côté des autres sur une ligne.
    https://www.fondationcustodia.fr/Les-portraits-en-miniature-12

    Pour rappel, « ligne » et « slide », c’est dans mon #plugin « Insertion avancée d’images », documenté ici :
    http://www.paris-beyrouth.org/Plugin-SPIP-Insertion-avancee-d-images

    On trouvera même quelques habillages automatiques de formes irrégulières, toujours avec ce même plugin, et le raccourci <img|shape> :


    C’est pas toujours évident à utiliser à bon escient, mais là ça donne un aspect « imprimé » particulièrement chic je trouve.

    – Dans les « formes longues », un problème usuel, c’est la navigation verticale « trop » longue, et donc l’utilisation d’une sorte de table des matières pour pouvoir naviguer rapidement. Mine de rien, c’est toujours assez problématique. Là j’ai développé une solution que je trouve bien sympathique, avec une table des matières en haut à gauche de l’écran, qui se plie/déplie, au fur et à mesure du scroll, et au survol, pour indiquer où on est et qui, évidemment, permet de naviguer au clic :

    Détail mignon : pour réaliser le graphisme de ce petit menu, il n’y a pas une seule image, c’est entièrement réalisé en CSS.

    – Il y a une maquette assez sympa pour la présentation des « Collections », avec des panneaux qui défilent horizontalement (et c’est responsive, la présentation change assez radicalement sur téléphone ou tablette) :
    https://www.fondationcustodia.fr/les-portraits-en-miniature

    – Il y a aussi une présentation avec un « méga-zoom » sur les images, pour la présentation des œuvres des « Catalogues », mais comme le contenu n’est pas encore en ligne, alors je reposterai un message pour que tu ailles voir quand ce sera prêt.

    – Quand on clique sur la loupe de recherche, hop un grand pavé recouvre l’écran :

    – Enfin, sur ce site, je me suis particulièrement astreint à ce que toutes les animations/interactions/transitions soient autant que possible réalisées sans Javascript. Du coup, on peut naviguer sur le site avec Javascript désactivé, avec un minimum de dégradations (essentiellement : des images responsive qui vont rester en basse définition). Mais le menu hamburger se déploie, avec ses sous-menus animés, comme si de rien n’était ; le système de « table des matières » des longforms fonctionne très bien, avec ses animations au survol, les sliders un peu partout fonctionnent de manière transparente… (et évidemment : des interactions « au doigt » moins riches sans Javascript).

    – Enfin la page d’accueil obtient un score de 100/100 sur mobile avec PageSpeed, et 97/100 sur ordinateur, c’est chouette.

    À l’intérieur du site, j’ai le plugin Saisies qui me fait chuter la moyenne sur quelques pages, en m’insérant violemment des appels à un fichier CSS et un fichier Javascript (ah, c’est vache !). :-))

    #shameless_autopromo

    • Un effet que j’aime bien sur ce site : j’ai mis des dégradés colorés sous les grandes images, pour avoir quelque chose qui s’affiche avant que les images soient chargées.

      Ce qui donne par exemple, avant chargement de l’image :

      et une fois l’image chargée :

      Ce que je réalise directement dans le squelette ainsi :

      #image_haut {
              background-color: [#(#LOGO_ARTICLE_RUBRIQUE|couleur_extraire)];
              background: linear-gradient(to bottom,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,1})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,5})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,15})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,19})] 100%
              );
      }
      #image_haut:before {
              position: absolute;
              top: 0;
              left: 0;
              width: 100%;
              height: 100%;
              content: " ";
              z-index: 1;
              background: linear-gradient(to right,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{1,10})] 0%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{5,10})] 25%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{10,10})] 50%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{15,10})] 75%,
                      [#(#LOGO_ARTICLE_RUBRIQUE|image_proportions{16,9, focus}|couleur_extraire{19,10})] 100%
              );
               mix-blend-mode: soft-light;
      }
    • @realet Je viens de mettre en ligne une détection du focus en javascript, pour plier ou déplier le menu hamburger selon qu’on est sur un lien dans le menu ou en dehors.

      Je fais ceci :

              $("#menu_flottant a").on("focus", function() {
                      $("#afficher_menu").prop("checked", true);
              });
              $("body > *:not(#menu_flottant) a").on("focus", function() {
                      $("#afficher_menu").prop("checked", false);
              });