Julie Blanc
Fabriquer des outils ad hoc
</>
Des écologies techniques situées ,
Le Web
Je préfère me concenter sur tout ce qui touche au code avec le web. Et particulièrement vous présenter en quoi le web est une des plus puissante technologie d’édition.
Je vais commencer par une très courte histoire du web, pour recontextualiser ceette utopie.
1. Le Web comme technologie d’édition
1991
.
1. Le Web comme technologie d’édition
“The WorldWideWeb (W3) is a wide-area hypermedia information retrieval initiative aiming to
give universal access to a large universe of documents”
Tim Berners-Lee
Il écrit: Le WorldWideWeb (W3) est une initiative de recherche d'informations hypermédia à grande échelle visant à
donner un accès universel à un vaste univers de documents.
1. Le Web comme technologie d’édition
“The [WWW] project is based on the philosophy that much academic information should be freely
available to anyone”
Tim Berners-Lee
Il tente de créer un réseau de documents connectés, en particulier des articles scientifiques, qu'il souhaite
mettre gratuitement à la disposition des scientifiques du monde entier.
1. Le Web comme technologie d’édition
cette époque, le World Wide Web est à la fois une idée et un navigateur web .
Vous pouvez voir sur cette image le premier navigateur web, appelé World Wide Web, et le premier site web
publié par Tim Berners Lee.
1. Le Web comme technologie d’édition
HTML
Hypertext Markup Language
1991
Ainsi, pour fonctionner partout et sur toutes les machines, vous avez besoin d'un langage simple, lisible et accessible.
Il s'agit du HTML, le langage de balisage hypertexte.
1. Le Web comme technologie d’édition
C'est ce qu'on appelle un langage de balisage qui permet de représenter la structure d'un document web à l'aide de
balises ajoutées entre les phrases ou les mots pour indiquer le rôle du texte.
CSS
Cascading Style Sheets
1994
En 1994, Håkon Wium Lie, un informaticien norvégien, rejoint par Bert Bos, un informaticien néerlandais,
a formulé une proposition de feuille de style en cascade, le CSS.
So, it’s an exemple of CSS, you can see at the top, h2 that indicate all the style applied to html
title element level 2
1. Le Web comme technologie d’édition
And here, this is the previous HTML page with some CSS styles applied to it
Separation du contenu et de la présentation
Ainsi, la principale caractéristique du web est la séparation entre le contenu, la structure sémantique d'un
document et la présentation, le rendu visuel, afin de pouvoir être affiché sur la plus grande variété d’appareils possible.
Comment faire un livre et un site
D6cor, Terminal ,
Le principe du single source publishing est qu’à partir d’un même contenu, des fichiers de textes structurés (n’importe quel format structuré), on peut optenir différents supports.
On écrit deux gabarits : l'un produit le HTML du site, l'autre le HTML du livre. Chacun reçoit sa propre feuille de style CSS. Les transformations sont générées automatiquement, c’est pour ça que le texte doit être structuré.
Un CMS est une interface d'administration, un peu comme un formulaire, où l'on saisit les contenus sans toucher au code : titre, auteur·ice, texte, images.
Le CMS sépare clairement deux choses :
- **le contenu**, saisi par l'équipe éditoriale dans des champs ;
- **les gabarits** (templates), écrits par la designer-développeuse, qui disent comment ce contenu s'affiche.
Le CMS permet de transformer les gabarits en des pages uniques.
Il existe beaucoup de CMS, avec des particularités, des fonctionnalités et des structures très différentes
Ici, nous utilisons **Kirby**, un CMS libre et très simple à prendre en main.
À propos du travail collaboratif,
Les sculptures de la villa romaine de Chiragan ,
Le musée Saint-Raymond, à Toulouse, conserve plus de 700 sculptures romaines provenant de la villa Chiragan. Le musée voulait un catalogue numérique et un catalogue imprimé à partir d'un même contenu. Le projet a duré d'octobre 2018 à juin 2020.
Je vais pas forcément m’étendre sur le site et le livre. En tous cas, c’est un des premiers livre que j’ai fait en CSS print et qui a été imprimé en offset
CIci on voit le rendu dans le navigateur de la version print
C’est aussi un projet en single source publishing, même principe que Decor. Sauf que là, nous avons utilisé un peu plus de briques logiciels.
Ici, vous pouvez voir Jeckyll, le CMS que nous avons utilisé.
Versionnement
Garder l’historique de chaque modification
Déploiement continu
Mettre automatiquement chaque amélioration
Le versionnement est un principe de développement informatique: il consiste à suivre précisément toutes les modifications apportées au code d’un logiciel. Pour cela, on utilise des outils dédiés, le plus connu étant Git. Il y a énormément de fonctionnalité: savoir qui a écrit quelle ligne quand, donner des messages, revenir en arrière, comparer du code.
Interface de forestry.io (CMS)
Nous avons choisi Forestry, les utilisateurs peuvent écrire en Markdown ou utiliser des boutons pour structurer le texte
On peut voir ici les modifications faites par le musée.
C'est aussi par git et gitlab que nous travaillons les fichiers HTML et CSS du site ainsi que les configuratin. Ici, on peut voir un moment où Antoine et moi sommes en train de travailler
Nous avons aussi utilisé les services de gitlab pour échanger sur notre travail via des issues. Bien spur, nous avons aussi fait des échanges par mail ou par visio conférence
Ce qui est intéressant ici, c’est qu’il y a vraiemnt eu un travail collaboratif. Dans une chaîne classique, la mise en page commence quand les textes sont terminés. Toute correction tardive passe par des allers-retours de PDF annotés. Ici, je n'ai pas attendu les textes finalisés. Les auteur·ices écrivaient pendant que je construisais les gabarits, et ils et elles voyaient tout de suite leur texte mis en page, sur le site comme dans le livre. Les quatre personnes travaillaient sur les mêmes fichiers, en même temps, pendant toute la durée du projet.
Qu’est ce que le CSS print permet,
(Qui n’est pas pertinent avec un logiciel de PAO)
Botascopia , 2024
Botascopia
Projet de recherche
collaboratif pour connaître
et reconnaître
les plantes à fleurs
dans un espace donné.
(INRIA, Université de Lyon 1
Université Paris-Saclay
Université de Rennes)
Botascopia est un projet de recherche qui réunit botanique, informatique et sciences sociales. Il produit des **flores de terrain** ...
Guide dʼidentification de plantes
.. de petits livrets imprimés qui contiennent une **clé d'identification** (une suite de questions qui mène au nom d'une plante) et des **fiches descriptives** des espèces. Chaque livret est adapté à un lieu précis : une cour d'école, un jardin, un parc, un campus.
Clé de détermination
Arbre de questions/réponses générées automatiquement à partir dʼune collection
ça c’est à quoi la clé ressemble au départ
Clé de détermination (principe graphique)
Le projet organise plus de quarante animations en 2024 et 2025, chacune avec un livret différent. Il n'est pas possible qu'une graphiste mette en page chaque livret. La mise en page doit donc se faire **toute seule**, à partir des données.
Clé de détermination (principe graphique)
Clé de détermination (principe graphique)
1. une **base de connaissances** participative décrit plus de 900 espèces, avec environ 1 000 caractères botaniques, soit plus de 100 000 données ;
À propos d’autonomie, pour et avec
Bifurcation/s , Revue des écologies politiques émancipatrices,
Le CSS print peut-il être un outil d'apprentissage du code ?
Géoproject , labo2 du Carré d'Art Bibliothèque, 2026
Géoproject est une plateforme libre d'édition de **récits cartographiques**. Il permet aux participantes de placer des événements sur une carte et raconter une histoire. Les récits peuvent être documentaires, fictionnels, poétiques ou pédagogiques. Le plus souvent pendant des ateliers
L’an dernier nous avons été appelé par Alexandre pour uen refonte totale de l’outil et de la plateforme
Avant, ils utilisaient un Wordpress assez dur à prendre en main, on a tout basculé sur Kirby. Là vous pouvez voir l’endroit où on édite une carte
Ici l’endroit où on édite le contenu
Cela permet de publier des récits cartographiques en sur des pages seb dédiées, où on peut un peu paramétrer l présentation, comme par exemple les couleurs et la typographie
Mais la partie la plus importante du projet sont les livrets imprimés qui peuvent être mis en page à partir d’un navigateur. Pour cela, la plateforme propose :
- une **interface de programmation visuelle**, pour commencer sans écrire de code ;
Question de la documentation et des tutoriels
Place de la designer
met en page
Décor, Chiragan
écrit les règles de mise en page
Bifurcation/s, Botascopia
donne les moyens de mettre en page
Géoproject
Dans les projets que je vous ai montrés, on voit que ma place de designer suit une progression.
Les outils du studio
Dans la première partie, j'ai parlé des outils que nous fabriquons pour les autres : des chaînes éditoriales pensées projet par projet. Je voudrais maintenant tourner le regard vers l'intérieur du studio, vers ce qui reste d'habitude hors champ : les outils avec lesquels nous travaillons, et ce qui se passe entre le moment où un contenu est produit et celui où il arrive sur un écran ou sur une page imprimée.
Les outils de travail ne sont pas l'arrière-plan de la pratique.
Une chaîne ad hoc pour chaque projetad hoc pour le studio
Mon hypothèse est que les outils de travail ne sont pas l'arrière-plan de la pratique, mais son prolongement. Le geste est le même à deux échelles: il y a les outils had hoc pour chaque porjet mais il y a aussi toute l’infrastructure had hoc pour le studio
Pour chaque projet, nous proposons des outils située et nous assemblons une chaîne adaptée : c'est le cercle du centre, dont je viens de parler. Pour le studio, nous faisons la même chose avec notre infrastructure : c'est l'anneau tout autour. Tout un ensemble d’outils, souvent libres, que nous installons ou fabriquons et qui nous servent au quodien dans notre pratique.
Je De plus en plus de personnes avec qui nous travaillons veulent quitter les grandes plateformes et héberger leurs vidéos sur leur propre site. C'est un souhait que nous partageons. Mais elles ne savent pas toujours ce que cela implique.
Une minute de vidéo filmée en 4K sur un téléphone pèse facilement 300 à 400 mégaoctets. Si l'on met ce fichier tel quel sur un site, chaque personne qui lance la vidéo le télécharge en entier ou presque. Sur une connexion mobile moyenne, la vidéo ne démarre pas ou saccade. Sur un forfait limité, elle consomme une part importante des données du mois. Et le serveur doit envoyer 400 mégaoctets à chaque visite.
C'est le premier rôle de notre convertisseur. On lui donne le fichier d'origine, et il produit plusieurs versions : une version haute qualité pour les grands écrans, des versions plus légères pour les petits écrans et les connexions lentes, et une image fixe qui s'affiche avant la lecture. Le navigateur de la personne qui visite le site choisit la version qui lui convient.
Le gain est spectaculaire : on passe de 400 mégaoctets à moins de 10 pour la personne qui regarde sur son téléphone dans le train. À l'œil, sur un petit écran, la différence est imperceptible.
ça s’arrête pas à la vidéo, pour un projet de plateforme européenne à propos de la céramique... beaucoup de visuels 3D, ça demande encore plus d’optimisation
Quelques outils que nous avons mis en place. Forge, convertisseur...
Service plus connu: github qui appartient à microsoft, nourrit l’IA
décisions techniques
Tout au long de cette présentation, j'ai parlé de choix qui semblent techniques : écrire en Markdown ou dans Word, générer un PDF depuis le web, faire un choix de CMS.
Ce sont des décisions de design. Elles disent pour qui et avec qui on conçoit. Quelles sont les contraintes de la situation ? Quelles sont les capacités techniques de ceux et celles qui vont intervenir ? Quel sont les valeurs portées par l’objet que l’on met en public ?
Penser avec la technique,
Le code, c’est une culture, pas seulement une compétence. L’enjeu n’est pas de former des programmeurs, mais des designers capables de penser avec la technique.
Kirby · 11ty · Pandoc · Paged.js · Forgejo
construire, entretenir, documenter
Je ne voudrais pas laisser croire que tout cela est simple, ni que nous fabriquons tout nous-mêmes. Toutes nos briques reposent sur le travail d'autres personnes : Kirby, 11ty, Pandoc, Paged.js, Forgejo..
Et ces outils ont un coût. Il faut les construite, les entretenir, les documenter, ... Il y a tout un travail caché
Bibliothèque JavaScript libre et open source
pagedjs.org
Paged.js est bibliothèque JavaScript libre et open source
qui affiche un contenu paginé dans un navigateur
en prenant en charge le code CSS pour l'impression. Qu’est-ce que ça veut dire ?
Je vous ai dit toute la présentation que l’on pouvait utiliser CSS pour l’impression. Mais en réalité, on ne peut pas le faire directement dans un navigateur car ces syntaxes, bien que décidées par les créateurices de CSS, le W3C, ne sont pas encore prises en compte dans les navigateurs. En ajoutant PAged.js a une page web, on peut utiliser CSS print, c’est une sorte de hack, de patch pour le navigateur.
Paged.js est développé par une petite communauté de développeurs et designers. Chacun y apporte des plugins, des morceaux de code qui ajoutent des fonctionnalités : gestion des notes en marge, imposition pour l’impression, pagination avancée, etc.
Ces contributions s’accumulent et forment peu à peu un outil partagé. Il y a aussi tout un travail de documentation, de maintenance, de pédadogie avec le partage de starters kit par exemple. Développer un outil ce n’est pas du tout seulement coder
Proposer de nouvelles spécifications CSS au W3C
J’irais même plus loin et vous dire qu’on peut designer au niveau institutionnel. Je participe par exemple à améliorer CSS en proposant de nouvelles spécifications de notes... mais c’est un peu technique donc je ne m’étends pas dessus.
Communs techniques mutualisation réciprocité
Pour conclure, je dirais que Designer, ce n’est plus seulement concevoir un outil, c’est aussi un travail social, de **mutualisation** et de **réciprocité**. C'est ici que se construisent vraiment des **communs techniques** et une communauté de pratique.
Déplacer l'idée qu'il faut « fabriquer ses outils » vers la construction de communautés de pratiques et leurs ressources, permettrait de contribuer à créer une société dans laquelle les individus sont acteur·rice·s d'un système qu'ils·elles modèlent en prenant part aux pratiques collectives. [...]
Julie Blanc, « Collaborer à grande échelle dans des communautés de pratique en design graphique », ourcollaborative.tool (2024)
Je vais conclure par un extrait d’un article que j’ai écrit à propos de la collaboration dans les communautés de pratique
Merci
julie-blanc.fr / studio-variable.com
julieblancfr
contact@julie-blanc.fr
Made with HTML & CSSslides.julie.blanc.fr
my slides are online but some images may be missing, they'll be ready tomorrow.
