Julie Blanc
Concevoir des publications multisupport:
du design, du code et des outils
</>
Université de Caen, 6 novembre 2025
Design graphique
Code
Recherche
Le Web comme technologie d’édition
Publications web
CSS print (ou web-to-print)
Chaînes éditoriales, publications multisupports
Spécifications CSS
Théorie et critique
Le Web comme technologie d’édition
1. Le Web comme technologie d’édition
1991
Je vais commencer par parler d'une utopie. Celle du World Wide Web. Aujourd'hui, lorsque nous pensons au web, nous pensons aux sites web commerciaux, aux applications fermées et aux réseaux sociaux mais nous oublions que le web a été principalement créé pour la publication de documents.
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
l 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.
D'ailleurs, deux ans plus tard, le Web a été placé dans le domaine public, signe de la volonté d'ouverture et d'universalisme du projet.
L'histoire du Web est une belle histoire.
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.
1. Le Web comme technologie d’édition
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.
1. Le Web comme technologie d’édition
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
1. Le Web comme technologie d’édition
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.
Publications web
Une bonne partie de mon travail aujourd’hui est de faire des publications web et des sites web, je travaille beaucoup pour des projets de recherche. Je fais le design des sites et je les code
Une publication web, c’est quoi ?
Couverture
Structure et navigation
Design responsive
Animations
Éléménts multimédias et interactifs
Une publication web, c’est quoi ?
Couverture
Structure et navigation
Design responsive
Animations
Éléménts multimédias et interactifs
Une publication web, c’est quoi ?
Couverture
Structure et navigation
Design responsive
Animations
Éléménts multimédias et interactifs
Une publication web, c’est quoi ?
Couverture
Structure et navigation
Design responsive
Animations
Éléménts multimédias et interactifs
Une publication web, c’est quoi ?
Couverture
Structure et navigation
Design responsive
Animations
Éléménts multimédias et interactifs
Concevoir avec une sobriété
No fonts
No images
No javascript
Bibliothèque JavaScript libre et open source
pagedjs.org
Découper un flux en page
Because, besides all this, there are also more technical issues about using HTML and CSS to printed publication.
Paged.js
Open-source (MIT licence)
Basé sur les standards du web
Prévisualisation dans le navigateur web
Of course it’s open-source and based on W3C standards.
Paged.js
Paged.js creates a visual preview of your publication directly in the browser. We simply implement
the missing printed CSS specifications, so you can use all the regular CSS available in browsers for
design. And most importantly, you have access to development tools. Those who code in the room know
just how crucial that is for debugging.
Rechtstexte & Zeitschriften journals (2023)
Journal de droit suisse (Université de Zurich)
To show you how it works, I'll give you an example of a project I was commissioned
to do not long ago. It concerns two Swiss law journals.
Voici la mise en page que j’ai proposée. La numérotation des paragraphes est obligatoire dans les revues juridiques, tout comme la numérotation spécifique des titres.
Présentation par défaut dans le navigateur web
Métadonnées, choix du layout
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)
Guide dʼidentification de plantes
Base de données (Langage Ocalm), 400 contributeur·ices, animations publiques
Clé de détermination
Arbre de questions/réponses générées automatiquement à partir dʼune collection
Clé de détermination (principe graphique)
Clé de détermination (principe graphique)
Clé de détermination (principe graphique)
Bifurcation/s
Revue des écologies politiques émancipatrices
3 numéros
I also create a custom web tool for the cover
PrePostPrint
PrePostPrint highlights experimental publications made with free software.
prepostprint.org
Gradually, there are more and more graphic designers who have started to work with alternative
processes. And this is how, in two thousand and seventeen, SArah Garcin and Raphël Bastide founded
PrePostPrint
Web to print library
coordonnée par Lucile Haute, avec Quentin Juhel and Antoine Lefebvre
http://web.2print.org
Some of these publications are hard to find. There was a need to collect material versions of the
publications, so as to be able to share them better. The web to print library was created by Lucile
Aute and Quentin Juhel. It's a mobile piece of furniture that can be transported from event to
event. There's also a website, but it's not working very well at the moment.
Chaînes éditoriales, publications multisupports
Multisupport Publishing
Single source publishing
To do this, you need to understand the principle of single-source publishing. you have a single
source of content, which can be in different formats, but most of the time, we use markdown, which
is very simple to write and can be learned in less than an hour. From there, we use programmed
scripts that transfrom the content to adapt it to the needs of each medium.
Single source publishing
Une chaîne éditoriale
Collaborative
Une interface d'entrée des contenus pour l'équipe éditoriale (reliée à GIT)
Utilisation du système de versionnemet GIT
Nombre de commits par participant·e·s en
fonction de la durée du projet
Une chaîne éditoriale
Légére et modulaire
Une chaîne éditoriale
Ouverte
Open Source
Multisupport Publishing
Antoon Van Dyck, catalogue raisonné des tableaux du musée du Louvre ,
2023
The project I've just shown you was made in 2018, it was a one-shot editorial chain f
or this specific book. Editions du Musée du Louvre saw
it and took inspiration from it to create their
own editorial chain for multi-media catalogs: print,
epub and web.
Multisupport Publishing
Some friends worked on it,
as I was writing my thesis at the time. But here's the result,
a very nice catalog released last year
Build your own tools
Designing new CSS specifications
Seul les footnotes sont possibles en CSS
Build your own tools
Designing new CSS specifications
Journal Bifurcation/s , coming soon (2024) / Graphic design: Julie Blanc
Build your own tools
Designing new CSS specifications
Mourat & all, Le champs des
possibles , 369 éditions, 2023 / Graphic design: Sarah Garcin
Build your own tools
Designing new CSS specifications
Wim Nijenhuis, The Riddle of the Real city , 2017 / Graphic design: Open
Source Publishing
Build your own tools
Designing new CSS specifications
Working on new specifications for CSS notes
Build your own tools
Designing new CSS specifications
Build your own tools
Designing new CSS specifications
Build your own tools
Designing new CSS specifications
Build your own tools
Designing new CSS specifications
Théorie et critique
Let's talk a little about the theoretical and critical background to these practices.
As graphic designers who use these technologies, we are inscribing ourselves in political
practices.
In this commonality, there is much reflection on the social, political, economic or ecological
impact of the design and technological practice
http://recherche.julie-blanc.fr/timeline-publishing/
Avertissement : le regard ici porté sur le web est empreint d’une grande naïveté. La confiance affichée envers l’universalisme fondateur du web, l’opensource et le libre, le partage de la connaissance, le « libéralisme » philosophique qui a conduit à son développement est d’une nature qui confine à la croyance. C’est une naïveté tout à fait volontaire et assumée : elle choisit parmi les fondements philosophiques, moraux ou politiques de ces technologies d’en garder ce qui semble être le meilleur, le plus enthousiasmant, le plus émancipateur.
Julien Bidoret
Avant de continuer, j’aimerais ajouter un petit avertissement sur ce que je vais développer. Un avertissement emprunter à mon ami Julien Bidoret.
Theorical & critical background
Logiciel libre (F/LOSS)
Possibilité d’inspecter, modifier et dupliquer son code source
Licence ouverte
Culture
Réciprocité («contre don technologique»)
promotion d’un rapport actif et créatif aux objets techniques
Apprentissage collectif
Dans unn frameworkk plus large, je place mes idées dans la culture du logcigiel libre.
Theorical & critical background
Collaboration
L’utilisation des technologies du web permet aux designers graphiques de bénéficier de l’écosystème de travail collaboratif des métiers de la programmation (git, forum, codepen, jsfiddle...)
La collaboration est très importante et change la donne dans le domaine du graphisme.Les développeurs réfléchissent depuis des années à la manière de travailler ensemble, et c'est un tout nouveau mondequi s'ouvre à eux. L'utilisation des technologies web permet aux graphistes de bénéficier de l'écosystème de travail collaboratif des professions de la programmation (git, forum, codepen, jsfiddle...).
Un design du web
À l’échelle humaine
Un code simple, qu’une seule personne est capable de comprendre entièrement
Ouvert et accessible
Device agnostic, resisting obsolescence, web’s principle of decentralization
Léger & soutenable
Qui prennent en compte les ressources à notre disposition, HTML/CSS (pas de frameworks)
Je défends un certain design du web. Une manière de le concevoir.
Je ne me concentre pas sur la conception de grands systèmes, la création d'outils automatisés
ou la performance et la vitesse, souvent considérées comme les principaux
avantages du code. Au contraire, j'aborde le code du point de vue d'une designer, en l'adaptant
spécifiquement aux besoins de chaque projet. Chaque contenu mérite sa propre forme unique,
Theorical & critical background
Craft Practice
In today’s highly commercialized web of multinational corporations, proprietary applications,
read-only devices, search algorithms, Content Management Systems, WYSIWYG editors, and digital
publishers, it becomes an increasingly radical act to hand-code and self-publish experimental
web art and writing projects.
J.R. Carpenters
I recognize myself very much in the political practice of artist and researcher Carpenters and her
idea of home made web :
In today’s highly commercialized web of multinational corporations, proprietary applications,
read-only devices, search algorithms, Content Management Systems, WYSIWYG editors, and digital
publishers, it becomes an increasingly radical act to hand-code and self-publish experimental web
art and writing projects.
Phd Thesis
Thèse de doctorat (2017-2023)
Composer avec les technologies du web
Genèses instrumentales collectives pour le développement d’une communauté de pratique de designers graphiques
phd.julie-blanc.fr
Ergonomie
Approche anthropocentrée de la technique
La technique c'est la façon dont quelqu'un fait quelque chose a écrit l'historien Lynn White dans une formule dont l'intérêt, souligne Sigaut (1991) est de nous rappeler que le « quelqu'un est essentiel », parce que c'est lui qui nous indique la bonne échelle. Une technique n'existe que lorsqu'elle est pratiquée, c'est-à-dire lorsqu'elle passe par quelqu'un qui, l'ayant apprise ou inventée, la met en œuvre de façon efficace. Il n'y a pas de technique sans cette efficacité et les habiletés humaines qu'elle implique. C'est donc là où ces habiletés sont produites qu'il faut observer les techniques.
Pierre Rabardel, Les hommes et les technologies. Approche cognitive des instruments contemporains ,
Activité humaine en situation
Développement de l'activité
Problématique
Transformation et développement
Cadre conceptuel
Pierre Rabardel, Les hommes & les technologies: Approche cognitive des instruments contemporains , Armand Colin, 1995.
Yrjö Engeström Learning by Expanding : An Activity-Theoretical Approach to Developmental Research (2e éd.), Cambridge University Press, 2014.
PhD thesis
Depuis une dizaine d’années, des designers graphiques développent de nouvelles pratiques autour de l’utilisation des technologies du web pour la mise en forme de publications imprimées et multisupports. Situées dans la culture du logiciel libre et de l’open-source, ces démarches sont au cœur d’enjeux conceptuels, politiques et esthétiques pour le design graphique. Comment comprendre alors ce que l’utilisation réelle du code change dans la pratique des designers graphiques et en quoi ce changement technique participe-t-il à la construction et au développement d’une communauté 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.
