Durant ce workshop, nous allons constituer un collectif éphémère pour créer une micro maison d'édition pirate. En nous appuyant sur des livres disponibles en ligne, telles que les lybers, nous réinventerons la chaîne éditoriale de manière participative et pirate. Il s'agira de penser l'édition en jouant avec les limites de la réappropriation de contenus disponibles sur le web.
Pour cela, nous allons utiliser une extension web qui nous permettra de collaborer sur la mise en page des livres à plusieurs mains, en travaillant avec le langage CSS et la technologie web to print et à partir de pads partagés.
Nous allons aussi devoir nous interroger sur notre manière de travailler ensemble en tant que collectif. Quelle mode de gouvernance adopter, comment prendre des décisions en groupe, comment communiquer et s'organiser collectivement?
Lyber
Le concept de « lyber », proposé par Michel Valensi en 2000, vise à créer une cohabitation entre le livre papier et le livre numérique. Le terme « lyber » provient du mot latin « liber », qui signifie à la fois « libre », « livre », « enfant » et « vin » et fait référence à Dionysos, dieu de la liberté et du vin dans les cités.
L’idée de Michel Valensi est de proposer une version numérique gratuite et accessible en ligne de chaque ouvrage imprimé, afin de renforcer l’accès à la lecture tout en soutenant les ventes des versions papier. Cette démarche répond à un débat en France concernant le prêt payant en bibliothèque et exprime le besoin de réévaluer le rôle des supports à l’ère du numérique.
Michel Valensi souligne que le numérique ne remplacera jamais le livre papier, mais doit trouver sa place en complément, offrant aux lecteur⸱ices une forme de « droit de lecture ». En effet, ses études montrent que le lyber aide les ventes des ouvrages stagnants et que les livres les plus consultés en ligne sont souvent ceux qui se vendent le mieux. Le modèle de « lyber » s’oppose aussi aux « livres d’une heure », qui perdraient ainsi leur utilité commerciale en librairie.
Julie Blanc, Si Jan Tschichold avait connu les feuilles de style en cascade : plaidoyer pour une mise en page comme programme, lien
Julie Blanc, Composer avec les technologies du web. Genèses instrumentales collectives pour le développement d’une communauté de pratique de designers graphiques, lien
Julie BLANC et Antoine FAUCHIÉ, (Re)Penser les chaînes éditoriales : soutenabilité et émancipation, lien
Quelques éléments de discussion
Quelle ligne éditorial prenons-nous?
Comment nous organisons-nous en tant que collectif?
Comment prenons-nous les décisions en groupe? Quelle gouvernance choisit-on?
Quels types de livres choisit-on?
Comment documenter le workshop?
Quel nom nous donne-on?
Quels éléments graphiques avons-nous en commun sur l'ensemble des éditions?
Comment utiliser la particularité de notre méthode de mise en page pour questionner l'esthétique des objets que nous produisons?
Tiphanie Blanc, Ramaya Tegegne (éds.), Wages For Wages Against – Volume 2 – Tout ce qu’on tait on sait, L’Amazone et Privilege, 148 × 210 mm, 366 pp.
Collectif, Cantines – Précis d’organisation de cuisine collective, auto-édition, 2016 (réimpression 2024), 140 × 220 mm, environ 200 pp.
Collectif, Nous sommes partout, Abrupt, 2021, 143 × 220 mm, 648 pp.
Collectif des Typotes (éds.), Voix Off : imprimerie de femmes, 2021, 120 × 190 mm, 196 pp.
Le monde à l’envers (éds.), Détruire les villes avec poésie et subversion, 2022, 170 × 230 mm, 552 pp.
Marie Preston, Inventer l'école, penser la co-création, CAC Brétigny, Tombolo Presses, 2021, 135 × 205 mm, 305 pp.
Programme du workshop
Lundi 4 novembre
10h - 12h
Présentation du workshop
Références
Programme
12h - 13h
Pause déjeuner
13h - 15h30
Introduction aux langages HTML et CSS
Installation de l'extension web
15h30 - 15h45
Pause
15h45- 18h
Premiers tests
Lecture de textes et préselection
Mardi 5 novembre
10h - 12h
Tour de table (choisir 2 textes des Éditions Zones et expliquer brièvement ce qui vous plait dans ce texte)
Définition de la ligne éditoriale et des groupes de travail
Quel est notre fonctionnement en collectif (réunion, retour, etc.) ?
Todolist et planning des prochains jours
12h - 13h
Pause déjeuner
13h - 15h30
Travail
15h30 - 15h45
Pause
15h45 - 18h
Travail
Mercredi 6 novembre
10h - 12h
Discussions
12h - 13h
Pause déjeuner
13h - 15h
Travail
15h - 15h15
Pause
15h15 - 17h
Travail
Mardi 12 novembre
10h - 12h
Discussions
12h - 13h
Pause déjeuner
13h - 15h30
Travail
15h30 - 15h45
Pause
15h45 - 18h
Travail
Mercredi 13 novembre
11h00 - 12h30
Finissage mise en page
12h30 - 13h30
Pause déjeuner
13h30 - 15h30
Finalisation de la mise en page
15h30 - 15h45
Pause
15h45 - 18h
Impressions
Jeudi 14 novembre
10h - 12h
Dernières impressions
Installation
12h - 13h
Pause déjeuner
13h - 14h45
Finissage installation
14h45 - 15h
Pause
15h - 18h
Restitution !
18h - ?
Apéro ?
Bases HTML et CSS
Langage HTML
Le HTML (pour HyperText Markup Language) est le langage de balisage conçu pour représenter les pages web. Ce langage permet d’écrire de l’hypertexte (d’où son nom), de structurer sémantiquement une page web, de mettre en forme du contenu, de créer des formulaires de saisie ou encore d’inclure des ressources multimédias dont des images, des vidéos, et des programmes informatiques.
Pour faire simple, un fichier .html va permettre de communiquer à votre navigateur Internet comment interpréter tel ou tel type de contenu (ceci sera un titre très important, cela un paragraphe, etc.)
Pour structurer un fichier .html on utilise des balises (il en existe une grande quantité) dans lequel on écrit le contenu de la page.
Dans un fichier .html, les balises sont structurées comme ceci :
hypertexte : Un hypertexte est un document ou un ensemble de documents informatiques qui permet de passer d'une information à l'autre grâce à un système de renvois appelés hyperliens, ou liens hypertextes.
exemple d'un fichier .html
Langage CSS
Le CSS (pour Cascading Style Sheets ou Feuille de style en cascade en français) est un langage de programmation déclaratif. Il permet d'attribuer des styles sur les balises en HTML, un peu comme les styles dans Indesign. Pour chaque balise, il est possible d'assigner différentes propriétés et de leur attribuer une valeur.
Dans un fichier .css les styles sont appelés comme ceci :
nom-de-la-balise{propriété : valeur;}
exemple d'un fichier .css
Sélecteurs de class et id
À chaque balise HTML il est possible d’attribuer un id et des class afin de cibler l'élément et lui appliquer des styles CSS spécifiques.
Les class permettent de cibler plusieurs éléments HTML à la fois alors qu'un id est spécifique à un élément du document.
background permet d'attribuer des fond (couleurs, images, motif répété, etc.).
color permet de spécifier la couleur des contenus textuels de la balise.
border pour paramétrer tout ce qui concerne les contours de votre balise. Il existe plein de spécifications permettant d'agir sur la couleur, l'épaisseur, le style de contour, etc.
gradient plein de propriétés existent pour travailler les dégradés en CSS, regardez en détail pour toutes les possibilités. vous pouvez aussi utiliser un outil visuel en ligne comme CCS gradient pour générer et intégrer vos dégradés.
box-shadow pour travailler des ombres portées sur des éléments.
font-size pour déterminer la taille de de caractère.
@font-face permet de définir une police d'écriture particulière à utiliser pour afficher le texte de pages web. Cette police peut être chargée depuis un serveur distant ou depuis l'ordinateur de l'utilisateur·ice.
text-shadow pour des ombres portées sur des éléments de texte.
margin définit la taille des marges sur les quatre côtés de l'élément. C'est une propriété raccourcie qui permet de manipuler les autres propriétés de marges (margin-top, margin-right, margin-bottom et margin-left). Il est possible d'utiliser des valeurs négatives pour chacun des côtés.
padding est une propriété raccourcie qui permet de définir les différents écarts de remplissage sur les quatre côtés d'un élément. Elle synthétise padding-top, padding-right, padding-bottom, padding-left.
transform vous permet des transformations à votre balise tel des rotations (rotate), des changements d'échelle (scale) ou encore des déplacements du point d'origine (translate).
z-index pour positionner par dessus ou par dessous un élément. Un petit nombre sera toujours en dessous d'un nombre plus grand.
content permet d'ajouter des éléments textuels directement dans le CSS.
image
Pour importer des images, puisque vous ne pouvez pas intervenir sur le html, une solution s'offre à vous qui consiste à utiliser la propriété CSS background-image qui vous permet de définir une ou plusieurs images comme arrière(s)-plan(s) pour un élément.
filter pour appliquer des filtres css comme l'opacité, le flou gaussien et autres.
pseudo-classe
Une pseudo-classe est un mot-clé qui peut être ajouté à un sélecteur afin d'indiquer l'état spécifique dans lequel l'élément doit être pour être ciblé par la déclaration. La pseudo-classe :hover, par exemple, permettra d'appliquer une mise en forme spécifique lorsque l'utilisateur survole l'élément ciblé par le sélecteur (changer la couleur d'un bouton par exemple).
:hover permet de décrire un élément lorsqu'on le survol avec le curseur.
:nth-of-type correspond à des éléments d'un type donné, en fonction de leur position au sein d'un groupe d'éléments identiques. Par exemple: div:nth-of-type(2) sélectionnera la deuxième div.
les animations
Il est possible de travailler l’animation de certaines propriétés CSS (en voici la liste). Il faut tout d'abord décrire son animation en haut de votre fichier CSS avec @keyframesen décrivant le nom de votre animation et ses différentes étapes. Ensuite votre animation est appelée dans votre classe par la propriété animation oùvous pourrez décrire entre autres le temps, la répétition et la vitesse de votre animation.
CSS print
page-break-after ajuste les sauts de page après l'élément courant.
La règle @page pour gérer le format et les marges de la page.
Vous pouvez définir des marges spécifiques aux pages de gauche, de droite ou à la première page en utilisant les pseudo-classes @page:left, @page:right et @page:first.
Puisque nous utilisons la bibliothèque PagedJs, nous avons la possibilité d'utiliser des fonctionnalités supplémentaires tels que l'insertion de la pagination, d'en-têtes et de pieds de page. Ces fonctionnalités sont documentées en détail sur cette page.
liens utiles pour aller plus loin
CSS grid generator un générateur de grille css qui vous permet de positioner des élément dessus et récupérer le code déterminant leur position. Cela peut vous être utile si vous êtes totalement perdu·es pour disposer votre jeu sur votre ficher.css.
CSS tricks une bonne ressources sur le CSS avec des guides par thématiques.
CSS gradient un générateur de dégradés CSS vous permettant de les composer visuellement puis de récupérer le code.
Border-radiusun outil visuel pour travailler précisément les arrondis de coin d'éléments.
Clippy permet de créer des formes qui agissent telles des masques d'écretage, avec la possibilité d'y intégrer des images ou des background particuliers.
Shapes en CSS une liste de formes créées uniquement en CSS.
Ici une liste de propriétés permettant de faire des animations en CSS.
Dans Firefox, tapez dans la barre d'url about:debugging.
Cliquez sur « Ce Firefox », cliquez sur « Chargez un module complémentaire temporaire… », puis sélectionnez le fichier manifest.json dans le dossier de l'extension.
Le module est dorénavant installé et persistera jusqu'à ce que vous redémarriez Firefox.
Si vous effectuez des modifications à l'extension, il faudra la recharger en cliquant sur « Actualiser » dans la page about:debugging.
Utiliser l'extension
Créez un nouveau pad sur un des services suivants :
Cliquez sur la petite pièce du puzzle en haut à droite de votre navigateur puis sur l'extension. Cela va ouvrir une pop-up dans laquelle vous pourrez insérer l'url de votre pad.
Vous pouvez maintenant écrire du CSS dans le pad, celui-ci s'appliquera sur les site des lybers (Zones, Dans nos histoires, Éclat).
Si vous choisissez un ouvrage d'une autre source, il faudra modifier une ligne dans le code de l'extension. Dites le nous et nous verrons ensemble.
Autres outils
Pour utiliser vos propres typographies, vous pouvez vous servir de ce CDN qui liste les fontes utilisables. Pour ajouter de nouvelles fontes, vous pouvez les glisser dans le dossier "fontes" sur le nextcloud de Luuse. Signalez nous les ajouts afin qu'on les importe sur la page.
Dans le même dossier, vous trouverez un dossier "screenshots" dans lequel on vous encourage à glisser vos expérimentations, erreurs, surprises, etc :)
Liens
Ici le html de cette page, Là le css de cette page.
