Au fil du Web

/au-fil-du-web

  • 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

  • @nidal a annoncé le lancement du site @OrientXXI la semaine dernière :
    http://seenthis.net/messages/180554

    C’est donc là :
    http://orientxxi.info

    Comme c’est bibi qui l’a fait, un petit coup de #shameless_autopromo pour détailler quelques aspects techniques…

    – C’est évidemment du #SPIP_3, #HTML5 et #responsive. Donc évidemment, je travaille avec mon plugin « CSS imbriqués » :
    http://www.paris-beyrouth.org/tutoriaux-spip/article/plugin-spip-css-imbriques-pre

    – L’un des aspects que j’ai pu beaucoup plus travailler que d’habitude, c’est la typographie des textes des articles. C’est drôlement gros (de base sur mon ordinateur : 19px), et c’est rend la lecture à l’écran vraiment fluide. Sur tablette, je trouve que c’est carrément épatant.

    – Pour l’occasion, j’ai aussi pas mal bossé les tags meta destinés à informer les réseaux sociaux du contenu de la page. Les petits pavés qui apparaissent sur Twitter et Facebook quand quelqu’un partage un article sont vraiment attrayants.

    – Le pavé « Lire aussi » dans la colonne de droite des articles est totalement automatique : c’est un calcul basé sur les mots-clés utilisés par chaque article. Ça marche pas mal pour créer de la navigation transversale.

    – Je fais passer mon plugin « Détecter langue » (conçu initialement pour Seenthis) sur les textes, cette fois paragraphe par paragraphe, pour pouvoir publier des articles multilingues (avec de l’arabe, ça devient indispensable) :
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/plugins_seenthis/detecter_langue

    On peut le voir à l’œuvre par exemple sur ce poème traduit de Mahmoud Darwich :
    http://orientxxi.info/magazine/mahmoud-darwich-for-ever-le-discours-du-dictateur-0328

    – Sur ce site, je force le retour chariot façon SPIP 2 (il faut sauter deux lignes) ; parce que plus ça va (depuis que je suis sur SPIP 3), plus je constate que laisser le retour à la ligne simple sur un site éditorial conduit rapidement à la catastrophe.

    – Pour le pavé de Une (fond bleu) de la page d’accueil, une sélection manuelle grâce avec mon vieux plugin « Sélection d’articles » :
    http://zone.spip.org/trac/spip-zone/browser/_plugins_/selection_d_articles

    – Comme expliqué par @nidal, le site intègre directement le flux Seenthis du groupe (via l’importation de RSS de SPIP) :
    http://orientxxi.info/au-fil-du-web

    – J’utilise mon vieux plugin « Lire aussi » pour pouvoir créer des « Dossiers » :
    http://orientxxi.info/magazine/oslo-20-ans-apres,0345
    (donc, bien comprendre : sur ce site le pavé « Lire aussi » du site public se construit automatiquement ; le plugin « Lire aussi » n’est pas utilisé pour créer ce pavé, mais pour constituer des « Dossiers » éditoriaux)

    – Dans la rubrique « Cartographie », j’affiche des cartes géantes zoomables de @reka, l’interface fonctionnant avec #leaflet.js. Ajout : un véritable mode plein écran (#fullscreen_api du HTML5, avec alternative en position:fixed pour les navigateurs qui ne l’acceptent pas). En revanche, par rapport à @fil, je n’ai pas de script coté serveur pour fabriquer les briques graphiques des cartes, j’utilise directement Zoomify et j’installe les briques sur le serveur.

    Le détail sympa : la carte est consultable seule dans sa page :
    http://orientxxi.info/cartographie/egypte-bassin-du-nil
    mais il y a de plus un modèle SPIP pour intégrer la carte dans le texte d’un article :
    http://orientxxi.info/magazine/tensions-autour-du-nil,0297
    (et ça c’est carrément cool).

    • C’est classe d’avoir ce genre d’explications sur des sites. Deux-trois retours :
      – +1 pour la question des retours lignes. C’était un peu embêtant avant, fallait s’y faire, mais maintenant sur Spip 3 c’est pire :p
      – Pour les réseaux sociaux, le rendu est top, cf https://twitter.com/OrientXXI/status/387504642331901952
      – moi aussi je veux un bouton de partage vers Seenthis. C’est le bouton pour navigateur intégré sur le site, c’est ça ?
      – au niveau typo, je pense qu’on gagne vraiment à remplacer les dernières Arial qui traînent.
      – sur la page d’accueil, les trois colonnes ça fait très classe, mais le web ne sait toujours pas justifier du coup ça éclate le texte chez moi. A l’inverse, j’aime beaucoup la page magazine non justifiée.
      – le corps 19 pour le texte, ça fonctionne bien, mais par contre le corps 26 pour le chapô, c’est un peu trop gros pour moi.
      – j’ai pas compris l’intérêt du plugin « lire aussi » pour constituer des dossiers éditoriaux par rapport à un groupe de mots-clés spécifique.
      – le mode plein écran pour les cartes est vraiment impressionnant, et les cartes dans les articles sont bien aussi. Ca pourrait bien intéresser sous-surveillance. Manque peut-être juste un bouton pour revenir à une taille optimale dans le bloc quand t’as déjà zoomé.

      Merci en tout cas pour les infos, joli boulot !
      #spip_blog

    • Sur « Lire aussi » et les « Dossiers »…

      – D’abord, tu dois savoir que je suis persuadé (de manière quasiment religieuse désormais) qu’il ne faut jamais utiliser les mots-clés pour gérer des statuts éditoriaux. La seule utilisation viable des mots-clés, c’est la thématisation.

      À chaque fois que j’ai vu (ou qu’on m’a obligé à le faire) des mots-clés utilisés pour gérer la page de Une, la colonne de droite, les trucs qu’on fait apparaître plus gros… ça rend le site vraiment bordélique à gérer.

      – Donc ici, oui, il y a des mots-clés, mais ce sont bien des mots-clés thématiques. Par exemple, les Accords d’Oslo :
      http://orientxxi.info/accords-d-oslo

      Mais il faut bien voir que les mots-clés, ce sont des thèmes « ouverts » : à tout moment quelqu’un peut ajouter tel mot-clés à tel nouvel article, et donc la page « Accords d’Oslo » évoluera selon ces ajouts.

      – Ce dont j’avais besoin ici, c’est de créer des « Dossiers » figés. Un objet éditorial regroupant plusieurs articles, qu’on n’enrichira plus par la suite.

      Donc pas des mots-clés. Sinon ça veut dire qu’on a un groupe de mots-clés dédiés à cela, et qu’on fabrique un mot-clé à usage unique pour chaque « Dossier ». Pour moi, c’est clairement un détournement des mots-clés, destinés à faire des manipulations éditoriales.

      Ça n’est pas le pire détournement possible, mais c’est à éviter.

      – Le plugin « Lire aussi » est explicitement destiné à gérer ces regroupements, au lieu de créer des « mots-clés à usage unique ». Il est construit sur le même principe que les liens de traduction : il y a un article de référence, et les articles qui lui sont liés. Dans chaque article concerné, je vois la liste des articles liés, et quel est l’article de référence.

      Du coup, ici, c’est facile : l’article de référence est considéré comme la porte d’entrée du dossier (ce ne serait pas facile à faire avec des mots-clés), et je pourrais aussi décider de ne plus intégrer les articles secondaires du dossier dans la navigation, ou de manière différente (je n’ai pas fait ça, mais c’est une possibilité).

    • Coucou,

      Plein de belles choses. Mignon la petite image « dossier » qui se colle sur le logo de l’article d’accueil du dossier.

      Quelques bugs ou remarques :
      – le logo est un peu pixélisé sur les autres pages que la page d’accueil (ff20/linux)
      – quand y’a pas de logo pour les articles dans les listes de « Lire aussi », ça fait un peu bizarre. ici par ex : http://orientxxi.info/magazine/barack-obama-et-hassan-rohani,0381
      – c’est peut-être voulu, mais chez moi les thèmes ne sont pas stylés. Ça me fait penser aux sites de journaux américains, qui raffolent de liens bleus http://www.nytimes.com

      Une petite question. Comment sont fabriquées les url ? Le numéro à la fin, c’est pour google (j’ai un vague souvenir que google demande un nombre unique pour chaque page dans l’url) ?

      C’est super de présenter ses réalisations de sites et leur entrailles. Ça devrait être une rubrique sur le blog de SPIP ou sur spip-contrib, pour inviter tout le monde à le faire.

    • @arno oui c’est un truc « rapide » qui marche, mais du coup :
      1) je trouve que ça enlaidie les URLs pour une histoire uniquement technique (en plus même pas pour un standard reconnu mais juste pour faire plaisir à une entreprise particulière)
      2) si jamais le site a des objets éditoriaux différents (article, rubrique, événement, patate) : deux objets peuvent avoir le même nombre donc il n’est pas unique (ce qui normalement fait partie de la demande).

      Lorsqu’on ne veut pas modifier ses URLs, la solution est de fournir à Google un sitemap particulier, propre à #Google-News. Il y a quelques obligations à respecter, et possiblement des infos en plus quand on les a sous la main (voir la doc).
      https://support.google.com/news/publisher/answer/74288?hl=fr

      J’ai fait ça dans un mini-plugin tout con qui ajoute ça au robot.txt de SPIP et qui fournit un « sitemap_news » basique qui fonctionne. On peut le surcharger ensuite chez soi si on a plus d’infos à y mettre.
      http://zone.spip.org/trac/spip-zone/browser/_plugins_/sitemap_news/trunk

    • @arno : merci, je vais tester. Sur Rebellyon, les articles en manchette ont le mot-clé « manchette », ceux en « une », le mot-clé « une ». Et quand on a beaucoup d’articles sur un même sujet, on crée un mot-clé de dossier. Tout cela fonctionne, mais c’est pas forcément aisé à transmettre comme fonctionnement.

    • Je pense qu’il faut créer ou améliorer un plugin pour ces besoins, car il y a de plus en plus de sites où il y n’y a pas que les « articles » comme objets éditoriaux.

      Par exemple pour le besoin de « mettre en une » (que ce soit pour l’accueil complet ou l’accueil d’une rubrique), si on veut mettre en avant des articles et des événements dans la même liste, c’est galère. Ou même si on a un site composé presque que d’événements (un site culturel par ex) et que c’est ça le contenu éditorial principal du site.

      Bref, ce type de plugin devrait être agnostique au niveau des objets à manipuler.

    • Pour gérer les Unes, j’utilise généralement deux solutions :

      – la plus efficace et agréable à gérer, ce que je fais sur ce site-là, c’est le plugin « Sélection d’articles » ; c’est rapide, ça marche bien…

      – quand le site est plus compliqué, et que justement il faut pouvoir mettre en page d’accueil un peu tout et n’importe quoi (des articles, des rubriques, des « événements », des calendriers, des formulaires d’inscription à des trucs…), je fais dans le lourd : une « rubrique technique » (dont je fais généralement commencer le nom par un dièse), avec éventuellement des sous-rubriques (si la page d’accueil est très structurée), et là-dedans on installe des articles virtuels (des articles qui pointent directement vers une autre URL). C’est encore avec ça que j’ai les résultats les plus puissants et le plus de liberté, même si c’est assez contraignant.

  • Chers amis,

    Ça y est, c’est aujourd’hui !

    Après quelques mois de préparation, nous lançons aujourd’hui un nouveau magazine d’information consacré au monde arabe, Orient XXI :
    http://orientxxi.info

    Pour en savoir plus sur les intentions du site :
    http://orientxxi.info/informations/pourquoi-ce-site,0288

    Le site est constitué d’articles de fond, constituant la rubrique « Magazine » :
    http://orientxxi.info/magazine

    L’actualité commentée, des recensions d’articles, des référencements documentés… sur « Lu, vu, entendu » :
    http://orientxxi.info/lu-vu-entendu

    Notre flux commun de partages de sources :
    http://orientxxi.info/au-fil-du-web

    De magnifiques cartographies interactives, zoomables en plein écran :
    http://orientxxi.info/cartographie

    Et, en travaux permanent, des ressources documentaires en ligne :
    http://orientxxi.info/ressources-en-ligne

    Le site est indépendant et sans publicités, il repose sur le militantisme et la bonne volonté des participants et, bien entendu, sur l’enthousiasme des lecteurs et des contributeurs.