Ce petit billet rapide, parce que je viens de réparer un petit objet web réalisé l’an passé, Constellation, qui était cassé depuis un moment, suite à un changement dans l’API de Gallica que je n’avais pas repéré. C’est ça le web, ça vieillit vite, et la plupart des choses que j’ai commises ont fini par disparaître. Bon, on maintient ce qu’on peut, quand on peut… En tout cas, ce qui m’a fait plaisir c’est de voir toutes ces réactions sympathique à sa réouverture !

Le titre est grossièrement volé à Mallarmé, dans Un coup de dés jamais n’abolira le hasard, parce que la précision d’un moteur de recherche ne surmontera pas notre désir de flânerie et de découverte. J’ai imaginé ces étagères infinies de livres sur lesquelles on en prendrait un au hasard. Un coup de dés.

Constellation, qui est ici (et qui ne mérite pas d’explication particulière pour jouer avec, en fait) est une interface sur les ouvrages scientifiques proposés par Gallica, qui, au contraire du très bon moteur de recherche fourni par Gallica même, ne permet pas de trouver ce qu’on cherche, mais précisément ce qu’on ne cherche pas. Elle invite à fouiller dedans comme chez un bouquiniste, et à laisser faire le hasard, ou l’obstination… Personnellement, ça me fascine et j’aime bien saisir un ouvrage sur ses rayons, j’y fais des découvertes, et je m’amuse souvent.

Car c’est aussi intriguant de voir à quel point ce qui relevait de la science la plus sérieuse il y a un siècle, prête parfois à sourire maintenant. On peut imaginer qu’il en sera de même plus tard avec ce que nous écrivons aujourd’hui le plus doctement du monde.

Le projet a été réalisé pour les 50 ans d’Inria. Cette bibliothèque imaginaire, virtuellement infinie, vous propose donc de passer les cinquante prochaines années dans la lecture d’ouvrages scientifiques… Inspirée par Borges, Queneau et Mallarmé, elle pose sur ses étagères environ 13000 ouvrages scientifiques de la Bibliothèque nationale de France, complètement accessibles numériquement par Gallica. Mais cette quantité augmente rapidement et qui sait combien d’ouvrages seront disponibles quand vous en serez au dernier ?

Est-ce un hasard si nous avons attendu un livre sur le thème de l’addiction pour changer notre manière de faire des livres et employer des logiciels libres de bout en bout ? Pas sûr. En effet depuis la PAO nous nous sommes habitués à un flux de production devenu traditionnel et dont nous avons dit ailleurs à quel point il pouvait devenir problématique. Ce post raconte l’histoire d’une collection que nous désirions depuis un moment produire avec les techniques ouvertes du web. Car oui, on peut aussi fabriquer un livre dans son navigateur. Making-of.

Une collection neuve

Addiction sur ordonnance est le premier volume de la collection interventions. Petits volumes à petit prix et à pagination raisonnable (autour de 128 pages), cette collection aborde des sujets chauds d’actualité pour lesquels C&F Éditions peut apporter les lumières qu’elle sait apporter, avec toujours une forme originale et soignée. Vous pouvez le voir ici.

Le cœur de l’ouvrage est l’enquête de Patrick Radden Keefe « Un empire bâti sur la douleur », et est assorti d’un dossier. C’est le récit impressionnant de la résistible ascension de la famille Sackler, Arthur et ses frères, experts en marketing ayant acquis un petit laboratoire pharmaceutique et modifié sa production pour devenir milliardaires en vendant légalement la drogue la plus addictive qui soit : les opioïdes de synthèse. Ils ont abouti en quelques années au double résultat stupéfiant, si j’ose dire, d’une fortune colossale, agrémentée d’une image de philanthropes, et surtout d’une catastrophe sanitaire sans précédent avec plus de 400000 morts aux États-Unis. Et ce n’est pas fini, l’entreprise étant aujourd’hui en quête d’expansion sur le marché mondial pour étendre ses profits (et forcément ses dégâts).

Nous avions le projet depuis quelques années de développer une collection produite différemment, avec des outils ouverts et libres, et un flux de production plus collaboratif, qui permette par exemple de travailler en collectif très rapidement sur de petits ouvrages produits à chaud, au plus près de l’événement. Mais toujours dans l’urgence, il n’est pas si évident de faire de la R&D pour une petite structure poussée par son programme éditorial ambitieux et limitée par des moyens restreints. Mais nous avons finalement tenu la promesse que nous nous étions faite, et cet ouvrage inaugure le procédé. il faut noter que nous sommes également dans le même esprit que celui qui nous a fait élaborer la licence édition équitable qui défend les droits de nos lecteurs.

Des différentes manières de faire un livre

Enseignant l’édition dans le master d’édition de l’Université de Caen, je m’intéresse évidemment de très près aux différentes manières de faire des livres. Je rêve même de vous raconter tout ça un jour, car c’est un sujet passionnant et qui n’est vraiment abordé dans aucun manuel, à ma connaissance. En voici quelques unes, par exemple :

• On peut faire des livres avec des caractères en plomb dans un composteur, et les imprimer sur une presse typographique. Vous croyez que je plaisante ? Regardez ce que fait Jean-Renaud Dagon au Cadratin par exemple.
• On peut utiliser un outil de PAO WYSIWYG propriétaire comme InDesign ou Quark Xpress ou le nouveau venu Affinity Publisher, c’est la manière la plus répandue aujourd’hui.
• On peut aussi utiliser un outil de PAO sémantique propriétaire comme FrameMaker. Il était le roi du temps où on imprimait de gros manuels d’utilisation, qu’on glissait dans les emballages du matériel et du logiciel par exemple.
• On peut encore utiliser le logiciel libre balisé LaTeX. C’est l’outil de prédilection des scientifiques et des chercheurs pour leurs articles et thèses, et certains éditeurs l’emploient, comme O’Reilly ou Le Robert. C’est pointu, c’est sérieux et ça marche.
• On peut également utiliser le logiciel libre WYWIWYG Scribus, si non a pas trop de notes de bas de page. Il est prometteur, mais son développement est très lent et desservi par des bugs.
• À la fac, par exemple, nous utilisons le flux Métopes du pôle document numérique. Il est basé sur XML-TEI, permet de produire un fichier pivot pérenne et interopérable, tout en bénéficiant du savoir faire des maquettiste et de terminer la manifestation imprimée dans une maquette InDesign.
• Enfin (mais cet “enfin” ne concerne que cette petite liste partielle et ne clôt certainement pas les différentes manières de faire un livre), les CSS étant très au point, on peut utiliser le code html + css et tenter de générer un PDF, soit au moyen du logiciel propriétaire Prince, qui existe depuis une bonne dizaine d’années, et est assez efficace, soit au moyen du nouveau venu sous licence libre (MIT) : Paged.js. C’est cette toute dernière solution que j’ai choisi de tester pour réaliser ce livre, car j’avais envie de voir ce qu’on peut faire dans un navigateur web. Il existe d’autres logiciels dans cette branche, comme par exemple les outils HTML2PRINT produits par la talentueuse équipe OSP.

On pourrait et on devrait continuer ce panorama, et une page ressources a été ouverte par prepostprint. On pourra aussi se perdre dans la timeline réalisée par Julie Blanc.

Paged media

Paged.js est un ensemble de scripts javascript qui est destiné à compléter le fonctionnement des navigateurs web afin qu’ils supportent mieux les spécifications CSS du W3C pour réaliser des feuilles de styles destinées aux médias paginés. Ce genre de patch s’appele un polyfill. Il essaie de combler les trous, ce qui est d’autant plus nécessaire qu’il semble qu’un certain lobbying s’exerce au sein du W3C pour ralentir cet aspect (par exemple Håkon Wium Lie, le patron de Prince, logiciel propriétaire, a fait tout ce qu’il pouvait contre CSS Regions et obtenu son abandon). Car en théorie, on peut vraiment faire de la PAO correctement avec CSS, on y prend même goût et cela rend des outils comme InDesign bien laborieux et obsolètes.

Paged.js est donc produit par la Fondation Coko (pour collaborative knowledge) de Adam Hyde, gourou voyageur des Booksprints et des Flossmanuals. Qui cherche à produire des méthodes, des flux et des plateformes de production de publications, ciblant notamment le monde académique, mais pas que. Paged.js est ainsi une brique au sein d’un projet plus large : Editoria. Deux de mes amis ont rejoint sa petite équipe : Julien Taquet et Julie Blanc. Le développement est assuré par Fred Chasen. Tous deux sont extrêmement passionnés et compétents dans ce domaine, et on se retrouve parfois au sein du collectif Pre post print imaginé par Sarah Garcin et Raphaël Bastide, autres grands talents du design libre et alternatif. Voilà pour la photo de famille.

Bon, avant de me lancer, j’ai pris le temps de préparer la couverture avec Inkscape, logiciel libre très convainquant, et mérite qu’on y passe le temps d’apprentissage un peu rugueux qu’il demande, tout en restant proche de la PAO traditionnelle et du logiciel de dessin vectoriel concurrent que je ne nommerai pas.

Se lancer avec Paged.js

Avant de commencer, RTFM (Read the fucking manual) semble une approche nécessaire mais insuffisante : en plein développement, Paged.js ne bénéficie que d’une documentation assez sommaire. On peut télécharger l’outil sur le Gitlab de paged media. Et ainsi bénéficier du contact avec les développeurs.

Mon choix initial étant de respecter le précepte de Richard Stallman selon lequel il n’est pas si bien d’utiliser un logiciel libre sur un OS privateur, j’ai installé linux Xubuntu sur une machine virtuelle, ce qui est très bien pour commencer. Xubuntu a l’avantage d’être léger, sans effets graphiques, et très facile à installer. On peut avec VirtualBox créer facilement un pc virtuel sur un mac, si on ne dispose pas de PC. Cela permet d’apprendre le logiciel libre et de s’y essayer quand on est un graphiste, souvent équipé d’un mac. Les performances sont un peu moins bonnes que sur un petit PC. Ensuite il est toujours temps de passer sur une vraie machine. Je pourrai vous raconter ça dans un autre post si ça vous intéresse (signalez-le en commentaire) et Davduf a produit une très jolie Petite histoire d’une libération personnelle.

Cuisine et dépendances

Passons aux pages intérieures et c’est là le plus important. La plaie de bien des logiciels, ce sont les librairies et les dépendances qui rendent leur installation parfois plus douloureuse que leur utilisation même. Paged.js n’y échappe pas dans la mesure où il a besoin d’un serveur web. L’installation propose de le faire avec des modules node et il faut savoir jouer un peu du terminal pour installer ces derniers. Il faut notamment ledit petit serveur web qui peut s’installer par :

  sudo npm install -g http-server
  http-server (start)

Puis on voit son projet

  http://localhost:8080

Bref : git et npm sont des éléments qui semblent indispensables et demandent une petite culture du développement [edit : si vous avez déjà apache installé sur votre machine pour faire du http://localhost alors c’est inutile]. C’est dommage, car ensuite, coder un livre en html et en css est une chose assez logique et simple.

Julien Taquet propose une version prépackagée un peu différente de paged.js sous la forme d’un boilerplate qu’il a appelé bookstyler et qui repose sur grunt (une autre dépendance à installer ainsi :).

  npm install -g grunt-cli

ensuite on se rend dans le projet, on lance la commande grunt et on peut accéder à son projet dans le navigateur web à cette adresse :

  http://localhost:9000/dist/

Pour mon projet, j’ai choisi deux autres dépendances, typographiques celles-là, que sont les polices libres Zilla-Slab de peter Bil’ak et Nikola Djurek de Typotheque et le Chunk Five de Meredith Mandel.

À propos de ces dépendances, polices et scripts, j’insiste (contrairement à ce que dit Julien Tacquet dans son git) sur le fait qu’il est important de ne jamais recourir aux CDN (liens internet pointant ces ressources, collé dans votre code) mais de les télécharger et de les inclure localement dans votre projet. Les CDN posent plein de problèmes imprévisibles dans la chronologie de l’exécution du javascript et sont en général une mauvaise pratique d’un point de vue pragmatique, éthique et sécuritaire.

Paged.js a besoin aussi du navigateur Chromium, malheureusement, notamment pour l’export du PDF final, Firefox ne respectant pas le format de page défini par la CSS lors de cette étape. Il faudra aussi, hélas, passer par Acrobat pour ajouter des traits de coupe et convertir le produit final depuis l’espace RVB vers le noir et blanc (ou le CMJN selon le cas). Il existe peut-être d’autres moyens pour cela, mais je ne les connais pas et suis preneur de vos éventuels conseils.

Avanti, pas-à-pas

Une fois tout cela installé dans le projet, il suffit d’un éditeur de code (n’importe lequel, à votre goût, personnellement j’utilise Sublime text sous linux, mais on peut utiliser un IDE ou un simple éditeur de texte) et de commencer à baliser son contenu en html. Des sections, des titres, des paragraphes. Rien d’autre qu’une structure sémantique du texte. Il est important de comprendre que le html source n’est pas le html rendu dans le navigateur. Les scripts le transforment profondément, mais le fichier source lui-même n’est pas transformé. C’est dans la mémoire du navigateur que le fichier final demeure le temps de l’affichage. On peut ouvrir l’inspecteur pour voir les modifications profondes subies par celui-ci pour faire le livre.

Quelques détails : les notes doivent être insérées en ligne dans le texte au sein d’un élément span. Comme il s’agit d’un livre, il est important de contrôler un peu ses espaces. On peut utiliser des entités unicode pour les différentes espaces, cela fonctionnera si ces espaces sont incluses dans la police de caractères.

• espace insécable   ou  
• espace fine insécable  

Il existe quelques autres signes qui peuvent être encodés ainsi : tirets moyens (– –) et il faut veiller à utiliser de vraies apostrophes et non les chiures de mouche que l’éditeur de code ne manquera pas d’insérer à la place. Après quelques rechercher-remplacer, tout rentre dans l’ordre.

Du côté de la CSS, on peut styler les éléments ou employer des classes. Julien Taquet a séparé la CSS en modules plus spécialisés, ce qui est bien pratique et il suffit d’éditer les préférences. Important, il m’a précisé que paged.js fonctionne mieux avec des tailles de polices en pixels. Attention toutefois, le pixel CSS est beaucoup plus gros qu’un pixel écran et cela ne donne pas des résultats très fins.

La vraie magie de Paged.js, c’est qu’il va faire marcher de bout en bout des classes et propriétés CSS comme

  @page {
    size: 140mm 200mm;
    margin: 1in 2in .5in 2in;
  }

On dispose aussi de différents gabarits de page et de tout un tas de zones dans la marge pour les titres courants, les folios etc. Les détails sont ici en attendant une documentation plus étoffée.

On peut aussi générer facilement du contenu par la CSS, par exemple les folios :

  @page {
    @bottom-left {
      content: counter(page);
    }
  }

Et pour une table des matières toujours fraîche :

  a.tdm::after {
    content: ", page " target-counter(attr(href), page );
  }

Il est possible de contrôler les sauts de pages ainsi :

  h2 {
    break-before: page;
    break-after: avoid;
  }

Il y a plein d’autres petits détails qui permettent facilement de contrôler sa maquette. Ça fonctionne bien.

Les seuls vrais problèmes sont liés à la gestion du texte de lecture lui-même. C’est amusant de constater que c’est la base qui pose le plus de problèmes, quand bien même on peut faire des choses très élaborées visuellement.

En effet, la césure et la justification ne sont pas le point fort des navigateurs web. Même si les CSS proposent des propriétés pour les veuves, les orphelines, et la césure. Sous mac, Chromium sait un peu couper les mots, mais sous linux ce n’est pas le cas. On peut utiliser un script hyphenator, mais il faut le raffiner. J’ai eu du mal. En gros, ce script ajoute des traits d’union conditionnels partout dans le texte, et il faut le limiter un peu pour protéger les noms propres, etc.

Enfin, malheureusement, les notes de bas de page ne sont pas encore au point et donnaient trop de bugs de positionnement. J’ai dû y renoncer pour le moment, et opter pour… (malédiction) les notes de fin de section (gasp). Julien Taquet a fait une petite modification du script de gestion des notes pour que cela fonctionne. Je peux dire que je n’ai pas lâché l’affaire facilement et n’ai pas compté mes nuits, mais j’ai fini par lâcher. Il le fallait, car le projet n’était pas qu’un exercice de style, c’était un vrai livre qui devait paraître.

Concluons

Le livre obtenu n’est donc pas parfait, mais au final, le livre est là ! Il paraît la semaine prochaine (j’éditerai ce post pour ajouter quelques images de l’objet imprimé et façonné, j’espère qu’il est beau). Et comme l’annonce le Colophon : « Il n’est jamais trop tôt pour l’émancipation et nous espérons que nos lecteurs nous pardonneront les quelques limitations typographiques que cela implique pour ce premier volume. Suivre cette collection, ce sera suivre les progrès de cette méthode libre de mise en page. » En attendant, je vous propose de télécharger le spécimen pour jauger le résultat.

Télécharger le Spécimen Addiction sur ordonnance au format PDF.

Personnellement je suis emballé par le procédé et prêt à surmonter ses petits défauts pour continuer. Je reconnais qu’il est un peu prématuré d’envisager de basculer toute la production de la maison dedans, mais pour une collection pilote c’est convaincant. En tant que graphiste, je pense que la pratique des logiciels libres est un plus essentiel sur notre pratique et permet également de développer des marchés bâsés sur la durabilité et la confiance. À faire.

Les avantages

• La clarté et la simplicité du html pour ceux qui aiment le balisage sémantique.
• La joie de voir toutes ces belles propriétés CSS dédiées au média paginé fonctionner grâce à l’astuce des développeurs de Paged.js. C’est satisfaisant.
• Le plaisir de naviguer dans des planches de pages et de voir sa composition typographique dans la fenêtre du navigateur, fidèle au PDF obtenu.
• L’emploi d’outils simples comme éditeur de code, pour décrire clairement ce qu’on veut, plutôt que se perdre dans le cliquodrome aux palettes et fenêtres infinies d’options et des sous-options à cliquer de votre logiciel de PAO habituel.
• La libération du livre des solutions de PAO propriétaires bien-sûr.
• La version ePub à portée de quelques éditions mineures et rapides.
• Un fichier source propre et dénué de mise en forme, pérenne et interopérable.
• La possibilité d’ajouter ses petites modifications et modules perso au moyen de Hooks. C’est ça le logiciel libre.
• L’engagement des acteurs et des développeurs pour la cause du livre, et leur proximité.

Les inconvénients

• Des petits soucis d’ergonomie. Par exemple, on ne peut atteindre facilement une page, utiliser le hash dans l’adresse serait bien pratique pour ce faire. En revanche, on peut tout à fait ne compiler qu’une partie du livre, pour gagner du temps, il suffit de commenter les autres sections dans le html.
• Une mise en place un peu lourde si vous n’avez pas un serveur web actif sur votre machine, avec des dépendances. Cela nécessite pour le moment un peu de culture du développement (ne serait-ce que Git), mais l’équipe travaille à simplifier ça.
• Pas de notes de bas de page pour le moment, trop instable et imprévisible, mais l’équipe y travaille. Souhaitons qu’ils surmontent rapidement toutes les difficultés que cela pose. Car c’est loin d’être simple.
• Un manque d’intelligence linguistique (C&J – césure & justification – du français) des outils logiciels, qui n’est pas du tout évident à contourner. Ceci dit, sur certains points, on a déja dépassé InDesign qui est assez crétin sur certains détails.
• Au final, on a bien un PDF, mais il n’est pas encore tout à fait fini : c’est un fichier en RVB qu’il faut penser à convertir en noir ou en CMJN, ce qui demande une version professionnelle d’Acrobat, d’autant plus qu’il faut ajouter ses traits de coupe pour l’imprimeur. Bon après ce n’est pas un drame absolu, et je sais bien que le fichier final passera encore entre les mains de logiciels privateurs chez l’imprimeur, par exemple celui du RIP, donc sachons déjà être content de ce qu’on a.

Mais tout cela est en plein développement et je suppose que cela va beaucoup évoluer dans les mois qui viennent. Un grand bravo pour tout le travail accompli dans pagedjs, et un grand merci aux développeurs pour le soutien dans les moments de doute :-)

Maintenant, on peut feuilleter le livre, imprimé, et le mieux est encore de se procurer un exemplaire !

Addictions sur Ordonnance, la crise des antidouleurs. Patrick Radden keefe – C&F éditions, 16 € – ISBN 978- 2-915825-90-9 – (Collection interventions).

Rétrospective de 6 années de travail comme designer d’applications, le nez dans les données du Web, dans l’épique-équipe d’Internet Memory Research de Julien Masanès…

C’était demain (Time after time) est un titre volé à film steam punk des années 80 de Nicholas Meyer sur H.G. Wells et la machine à remonter le temps. Parce que c’est un peu mon sujet, justement, les machines à remonter le temps du web (avec de gros gros problèmes de design dedans), et c’est aussi une pensée sur le paradoxe qu’est le fait de travailler en permanence sur des projets, ou avec des méthodes, qui pouvaient sembler pointus et futuristes hier, devenus tout à fait banals aujourd’hui.

Expériences récentes, donc. J’ai pu travailler pour la fondation IMF, puis ses start-ups et spin-off, sur des projets très intéressants avant que cela ne se ralentisse, faute de moyens. Pas vraiment une success story, mais il paraît que les échecs, ça construit aussi alors… Si je ne sais vraiment pas encore complètement quoi en penser, autant essayer de rassembler quelques notes, du moins ce qui a été déjà rendu public, car pour le reste, j’ai signé un NDA. C’est un peu technique, il y a aussi un peu de jargon que je laisse comme témoin de son temps… immersion dans la nouvelle industrie du siècle, on s’installe dans l’open space.

Le changement c’était maintenant

Il y a cinq ans de cela, j’ai décidé, à l’occasion de bouleversements dans mon atelier, et du départ de Kathleen Ponsard pour son autre vie dans le dessin animé, de changer aussi assez profondément mon activité. J’ai accepté de rejoindre à temps partiel, une équipe très technique et cosmopolite (avec sa douzaine de nationalités) concentrée sur l’archivage du web, pour y travailler comme designer d’applications.

Rejoindre en tant que designer de service, l’équipe pluridisciplinaire, multi-nationale, ingénieuse et brillante de Julien Masanès, m’a semblé une expérience à faire. Il y avait d’abord l’objet, le web, abordé tout à fait différemment que dans une agence, puisque c’était vraiment notre objet, à comprendre, apprivoiser, conserver, analyser. Il y avait aussi la densité de ce travail en équipe et des échanges, qui tranchait avec l’activité relativement solitaire d’indépendant, même en atelier. J’aime le travail graphique car il conduit à de nombreuses rencontres et missions empathiques avec une diversité de commanditaires, mais, même en s’entourant d’autres graphistes, j’avais l’impression, après une quinzaine d’années de pratique, d’avoir besoin de nourriture, de stimulation, de changement, y compris vers plus de difficulté. On dit avoir besoin de sortir de sa zone de confort. Soit. L’open Space requiert quand même un casque quand la Halle, magnifique par ailleurs, se fait un peu trop bruyante.

J’ai commencé à travailler 80% du temps en anglais, déjà, ça change : oral et écrit, dico toujours ouvert pour développer le vocabulaire. Une autre surprise, la joie et le confort du salariat, retrouvé après quinze années de travail indépendant. Différent et appréciable, les tickets resto, les congés payés, le partage des responsabilités. Tout ce qui entoure le temps de travail. J’avais la chance d’être dans un management qu’on peut qualifier d’éclairé, on expérimentait le travail à distance à la carte, par exemple. À part ça, beaucoup de travail, mais avec un vrai temps dédié à la R&D, qui a permis de beaucoup débroussailler. Petite rétrospective.

Les beaux projets

J’avais envie d’ouvrir ici un album de certains projets disparus, et de garder une trace de cette évolution qui traverse les projets au fil des pivots, leur abandon pour une nouvelle idée qui y a germé…

Arcomem

Lorsque je suis arrivé certains projets étaient en cours, c’était le cas de ce projet de recherche européen, un train en marche à prendre, l’un d’entre eux était un système de monitorage thématique des réseaux sociaux, à fin d’archivage. L’occasion de réaliser un tableau de bord. Pour simplifier les choses, car c’était très riche, j’ai imaginé de travailler par briques, dans un espace restreint, ce qui permet de cacher beaucoup d’information tant qu’elle n’est pas utile. Je me suis inspiré d’Automator, ce système de programmation par blocs dans le mac (un peu comme blockly aussi, issu de Scratch, qui permet d’apprendre aux enfants à programmer). Nous avons fait avec France Lasfargues un système qui permettait de fouiller les réseaux sociaux sur tel ou tel mot hashtag, ou compte, pour ensuite constituer une archive thématique. Nous avions aussi réalisé un mode tutoriel qui permettait d’apprendre à utiliser une application directement en la pratiquant. Mais je reviens à ce sujet dans quelques lignes…

Interfaces dynamiques pour les archives du web

Dans la foulée, j’ai terminé la navigation dans les archives du web de Internet Memory Foundation. Les archives du web permettent de remonter le temps pour consulter une page web à différentes dates. J’avais déjà une expérience en la matière, ayant travaillé sur l’interface de l’archive de la BNF (dans un graphisme général du studio Des Signes de Franklin Desclouds). J’avais notamment cherché à sortir du principal défaut de l’interface de la Wayback Machine d’Internet Archive : un tableau qui grandit dans deux dimensions, et donc très peu pratique avec le temps, dans une fenêtre de navigateur.

Pour ce nouveau projet, j’ai préparé la première archive du web qui se comporte comme une web application, c’est à dire qui fait mouliner le client web avec des programmes en javascript, lui délégant la composition de l’interface et ne faisant transiter sur le réseau que les métadonnées en JSON, et évidemment les données archivées. Cela nous a permis de résoudre le très difficile problème de l’inclusion d’une page web tierce dans une interface… web, et le problème d’encombrement que pose la navigation dans le temps.

Nous avons pu réaliser cette interface reposant sur un système modulaire assez complexe en coulisses et même proposer une version responsive et accessible, déclinant une version sans scripts. Les institutions partenaires pouvaient choisir leurs fonctionnalités dans un catalogue et on pouvait facilement leur proposer une personnalisation graphique. Au fil du temps, cette interface a été déployée par Florent Carpentier pour tous les partenaires de la fondation, à leurs couleurs. L’idée était aussi de proposer différentes vues et accès sur l’archive, car je croyais déjà à une approche globale et non pas seulement en page-à-page. Stats, visualisations à la carte.

j’ai pu produire des interfaces permettant de naviguer dans des archives de réseaux sociaux, et d’introduire du chargement asynchrone dans l’archivage, jusqu’ici très statique, pour reproduire la navigation fluide à laquelle on commençait à s’habituer en les utilisant : OurTube, ou Twits. Des imitations volontaires, pour la bonne cause, celle d’intégrer au maximum les éléments archivés par telle ou telle organisation et de restituer une navigation fluide et proche de ce que les utilisateurs de ces plateformes connaissent. Réappropriation des contenus sociaux.

Il n’y avait pas encore beaucoup de librairies pour gérer les interfaces dynamiques, et on s’est aperçu de la difficulté et surtout de la grande complexité qu’elles génèrent au fil du temps d’utilisation. En même temps j’ai basculé sur IMR, spin-off destinée à proposer des services et produits appuyés sur les données à l’échelle du web que nous conservions et traitions dans notre propre data center, lui aussi original puisque dépouillé de toute climatisation et reposant sur un principe simple de convexion pour évacuer la chaleur des machines, qui ressemblaient un peu à des fleurs, chaque machine étant un pétale d’un cercle qui en comptait 6, le tout empilé en tours circulaires. Même notre datacenter était atypique, entre steampunk et low-cost.

Plus récemment, du côté des archives, j’ai pu réaliser des interfaces différentes, moins basées sur l’accès page-à-page, mais sur le traitement de données massives et la datavisualisation, qui permettent par exemple de comparer le même site à deux moments différents et de détecter la similarité et les différences. Pratique pour voir par exemple ce que l’administration Trump a modifié dans un gros site comme celui de la maison blanche. Les sections fermées, les ajouts, les modifications…

Percolable

Un premier essai de service mené de A à Z, lorsque nous avons été déçus et énervés que Google décide de tuer le RSS en arrêtant unilatéralement son service Reader en 2013 (un événement sans doute oublié maintenant, malgré les millions d’utilisateurs que ce service comptait). Nous avons candidement imaginé produire une alternative en un temps très court. Le bon côté : une carte blanche pour imaginer l’interface idéale d’un hub d’information RSS permettant de gérer et consulter tous ses feeds RSS.

L’occasion de pratiquer le dogfooding, puisque moi-même utilisateur de RSS, j’adoptais l’outil et le dotai de toutes les fonctionnalités rêvées. Branding, marketing, on est sortis et on a été à la rencontre des utilisateurs. C’était un beau projet. Le mauvais côté, le délai très court dont nous disposions et des bugs trop persistants. Même si nous avons livré nos versions dans les temps à chaque fois, c’est le temps qui a fini par gagner. La gestion de plus en plus tendue du débuggage qui nous obligeait à procrastiner des choses qui semblaient pourtant importantes pour le designer que j’étais soucieux de l’experience utilisateur (dont on commençait à parler), mais trop longues à effectuer en développement. Au final, peu d’utilisateurs, pas de modèle économique. Et surtout une idée avait germé et avait été expérimentée dans ce projet, celle de flux thématiques intelligents, que nous y avions ajoutée. Pivot.

Newstretto

Le problème des réseaux sociaux c’est le bruit : si on y cherche quelque chose de précis, on ne parvient pas à le détecter dans le flux de conversation, rendu extrêmement dense et rapide, par le piaillement généralisé. Le problème de RSS c’est la redondance : quand on s’intéresse à un sujet précis, comme le chocolat au lait et aux amandes par exemple, on s’abonne à des fils spécialisés, et dès qu’il se passe quelque chose dans ce champ, on reçoit l’info 5 fois, 10, autant que de sources, en fait. Et on ne découvre pas facilement de nouvelles sources. Nous avons imaginé de procéder autrement : à partir de mots-clés de recherche, notre algorithme parcourait les réseaux sociaux, cherchant des tweets sur ce thème. Ensuite il tâchait d’évaluer le degré de spécialisation de leurs auteurs, leur popularité sur ce thème. Il regardait aussi la popularité et la crédibilité du tweet, en suivant le lien vers la page, en archivant celle-ci et en l’analysant pour voir si elle était bien sur le sujet et pas sur un autre thème, et si on n’avait pas déjà cette source. Si c’était le cas, (un auteur de la tweetosphère porté sur le chocolat tweete une info fraîche portant, elle sur le chocolat au lait et aux amandes), l’info apparaissait dans mon fil illustré “chocolat au lait et aux amandes” avec un lien vers l’article. Newstretto proposait ainsi assez rapidement (disons en quelques heures) un flux thématique assez pointu et de bonne qualité, sans aucun bruit et avec très peu de redondance. Nous avons réalisé une application mobile pour iPhone, et nous sommes initiés aux douleurs du maniement de l’itunes store que les développeurs d’apps connaissent bien.

Newstretto a été lancé, nous pensions proposer un petit abonnement, mais cela n’était pas du tout pratiqué, payer pour son info n’était pas envisagé par nombre d’utilisateurs (c’était avant le débat sur les fake news, et encore aujourd’hui beaucoup acceptent un journal gratuit à l’entrée du métro sans trop réfléchir à ce que cela implique). Nous, nous étions publiphobes donc pas vraiment d’autre voie. C’était mon chouchou. Ultra simple en facade, ultra élaboré en cuisine.

Après le rapide développement d’une version Pro de Percolable pour aider les content managers, nous avons bifurqué avec Chloé Martin vers le Marché professionnel (B2B) avec Mignify et différents services associés aux Big data issues du web. Le plus important a été Outwatch, un service d’analyse du commerce en ligne orienté sur la data-visualisation, présentant de visualiser des segments de marché et des prix pour permettre à des vendeurs de se positionner, essentiellement quand ils débarquent sur un nouveau marché. Moi j’étais moins porté par le sujet, je le reconnais.

Bomerce

Mais en parallèle, nous avons développé une belle application pour le grand public. Bomerce est vraiment original Conçu par Julien Masanès et développée par Sameh Chafik, toujours designée par bibi. ON était tous énervés par le Yield Management et le Dynamic Pricing, pratiques des commerçants qui consiste à faire leur prix selon la demande et même à la tête du client. L’idée que nous avions était de se mettre du côté des consommateurs pour leur donner de l’information sur le commerce en ligne et les aider dans leurs projets d’achat. Plus qu’un comparateur de prix, cette application permet de choisir, en agrégeant des informations utiles sur les produits, et les vendeurs, et surtout en conservant les traces de sa recherche, pour permettre de les partager par exemple.

À la base, l’app web et mobile Bomerce se comporte comme un panier d’achat, mais transversal et fonctionnant sur tous les sites. Quand on est sur une page web, on peut cliquer dessus, Bomerce reconnait le produit, son image, nom, prix. Il s’assure que le site ne triche pas en pratiquant ce qu’on appelle le pricing (le produit change de prix instantanément à la tête du client, par exemple 10% plus cher s’il a un mac…) et apparaît dans son interface sous la forme d’une carte. On peut ensuite classer ces cartes entre lesquelles on hésite, voir plus d’information, partager, par exemple en couple ou avec des amis, consulter les réseaux sociaux, etc. Au final c’est vraiment pratique, par exemple pour choisir un gîte pour les vacances, en groupe.

L’interface se veut simple et affordante. Le modèle économique est plus clair : c’est l’affiliation, en cas d’achat, Bomerce apparaît au vendeur comme son referer et, ça se pratique, un petit pourcentage lui est accordé, sur remise, c’est à dire sans impact pour le consommateur. Bien que je ne sois pas un gros fan de la consommation, je reconnais que cette application permet d’acheter mieux, et donc potentiellement moins, en transformant chaque achat en projet, plus réfléchi, plus partagé et mieux informé. Mais c’est du coup un (probablement trop) intégré, qui fait trop de choses pour se positionner simplement.

Au final, il y a tant de cas d’utilisation (neuf, occase, gîtes, services, partage en groupe fermé ou via les réseaux sociaux…) que le positionnement est un peu difficile pour un outil généraliste, et son fonctionnement est un peu délicat, reposant sur une analyse massive de données et des milliers de cas particuliers à contourner. Au final nous avons abandonné ce projet qui je crois était notre dernier projet grand public.

Pour finir

Ça fait beaucoup de projets en 6 ans, à temps partiel en plus, et tout n’est pas ici. Tous très innovants, nous avons été reconnus et primés pour ça (mais malheureusement pas suffisamment par des investisseurs). Il a fallu se calmer sérieusement. On voit qu’on glisse très vite du design d’interface au design de produit car finalement il n’y a qu’un design, et qu’un bon design me semble être conçu de manière participative, ou au moins empathique.

En conclusion, je dirais que j’ai beaucoup appris ces années. Appris avec des gens absolument brillants (bon pas forcément en business, c’est peut-être vrai), appris à avancer humblement (poubelle ouverte), à prendre le temps de l’essai, ou à avancer par Sprints de malades. Bon c’était plus souvent les sprint de malades, talonné par la prod, que la R&D en amont et le videoprototyping cher à mon cœur. Appris aussi à percevoir des manières différentes de proposer des services sur les logiques de traitement de données similaires. J’ai quand même souffert de voir régulièrement tout le travail fait jeté à la corbeille, car c’est humiliant quand on est habitué à produire des choses, certes éphémères, mais utiles ou du moins utilisables. La sensation d’avoir perdu son temps lors d’un pivot est en partie inévitable et peut rester une blessure. Surtout quand on s’est attaché à sa production, comme un artisan.

Ces années ont aussi été l’occasion d’approfondir beaucoup la culture du design numérique, et les méthodes. Ce monde s’est considérablement industrialisé. Ce qu’on pouvait faire en artisan, quand ce n’est pas en bricoleur, passe aujourd’hui par des procédures, des méthodes et des outils assez contraignants. Je vois beaucoup d’individus essayer de s’adapter à ça en intégrant des librairies, dépendances et packages à leurs projets, et je reste persuadé que la bonne voie est de garder les choses simples, en s’en tenant au principe KISS (Keep it simple stupid).

J’ai appris à travailler en anglais, joué le jeu des stand-up meetings quotidiennes, de l’Agile, du Scrum, du Business Canvas et de la Value proposition. Sans parler du reporting, des tickets Jira, du basculement dans Slack et ses bots qui causent parmi les humains et de tous les systèmes de gestion de versions, de git à mercurial, qui finissent par gommer complètement les frontières entre design et développement… Au final, cette immersion dans la nouvelle industrie de ce siècle, me fait penser que la simplicité est la clé (relire le petit livre de John Maeda à ce sujet est utile) et m’a donné envie de revenir à des outils, pratiques et recherches plus simples. Cela m’a fait aussi apprécier mon autre casquette, celle d’éditeur de livres imprimés sur du bon vieux papier ;-)

J’ai appris à travailler en équipe, avec des satisfactions quand tout se met à fonctionner comme par magie, et des déceptions, le sentiment d’avoir été trompé parfois quand on n’avançait plus, parce que les choses avaient mal été pensées (oups), ou mal réalisées (grr). J’ai aussi, je crois, compris que pour réussir, il faut commencer tôt, mais surtout pas trop, pas avant qu’une question ne soit actuelle. Il nous est arrivé de nous planter en partant trop tôt… par exemple avec C&F et notre Polifile (ePub pour tous). Il vaut mieux disposer des moyens qui permettent d’aller vite, de garder un rythme, car quand on est petit on peut tout à fait à la fois commencer (trop) tôt ET arriver (trop) tard. Et ça c’est difficile. Cela nous arrive tout le temps et je crois que le seul moyen de ne pas le vivre comme un boucle infinie, c’est vraiment de penser à la simplicité pour prendre des raccourcis, ou bien d’avoir des moyens, hum…