-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy patharticle.html
140 lines (138 loc) · 26.3 KB
/
article.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
<html lang="fr">
<head>
<title>Mettre le web en page(s)</title>
<meta name=author content="Lucie Anglade">
<meta name=author content="Guillaume Ayoub">
<meta name=dcterms.created content="2022-12-16">
<meta name="keywords" content="CSS, HTML, PDF, Print">
</head>
<body>
<article class="post">
<header class="post-header">
<h1 class="post-title">Mettre le web en page(s)</h1>
<div class="post-aside post-aside--start">
<p class="post-metas">
<span class="post-meta post-meta--author">Lucie Anglade et Guillaume Ayoub</span>
<time class="post-meta post-meta--date" datetime="2022-12-16T17:16:00+00:00">16 décembre 2022</time>
<span class="post-meta post-meta--length"><span aria-label="Temps de lecture : environ">~</span> 14 minutes</span>
</p>
</div>
<div class="post-aside post-aside--end">
<p class="post-meta post-meta--share">Partager : <a class="post-share-link post-share-link--facebook" href="https://www.facebook.com/sharer.php?u=https://www.24joursdeweb.fr/?p=6932" title="Partager cet article sur Facebook" onclick="_gaq.push(['_trackEvent', 'Partage', 'Partager sur Facebook', '']);">Facebook</a><a class="post-share-link post-share-link--twitter" href="http://www.twitter.com/share?text=Mettre le web en page(s) (via @24joursdeweb)&url=https://www.24joursdeweb.fr/?p=6932" title="Partager cet article sur Twitter" onclick="_gaq.push(['_trackEvent', 'Partage', 'Partager sur Twitter', '']);">Twitter</a></p>
</div>
</header>
<div class="post-entry">
<p>Nous sommes Lucie et Guillaume, et comme beaucoup de gens nous travaillons tous les jours avec les technologies du web.</p>
<p>Comme beaucoup de gens, nous aimons créer de belles architectures en <abbr class="abbr" title="Hyper Text Markup Language">HTML</abbr> pour y insérer notre contenu. Comme beaucoup de gens, nous adorons peindre de belles couleurs et construire de belles structures avec nos fichiers <abbr class="abbr" title="Cascading Style Sheet">CSS</abbr>.</p>
<p>Mais notre travail est un peu différent de celui de beaucoup de gens : nous ne créons pas de sites internet. Notre HTML et notre CSS ne sont pas affichés dans des navigateurs. Ils sont transformés en fichiers <abbr class="abbr" title="Portable Document Format">PDF</abbr> pour être imprimés, lus sur des téléphones et des ordinateurs, ou tout simplement archivés.</p>
<p><strong>En d’autres termes : nous mettons littéralement le web en pages.</strong></p>
<p>Comment ? Pourquoi ? Nous allons voir plus en détail que cette idée n’est pas aussi étrange qu’elle en a l’air…</p>
<div class="section">
<h2>Un peu d’histoire</h2>
<h3>Les faiblesses des outils classiques</h3>
<p>Soyons francs : utiliser du HTML et du CSS pour créer des fichiers PDF, ce n’était pas notre première idée. Il existe déjà une tonne d’outils pour faire de beaux documents, de Microsoft Word à LaTeX, de LibreOffice Writer à Google Docs, en passant par Adobe InDesign… Ces logiciels sont généralement amplement suffisants pour répondre à une large liste de besoins, qui vont de la simple lettre écrite en deux minutes au magazine prêt à partir à l’impression.</p>
<p>Pourtant, il existe un cas auquel tous ces outils sont assez peu adaptés : la génération automatique de documents.</p>
<p>Imaginons que vous ayez un site de vente en ligne. Vous adorez créer de superbes bols en céramique 🥣️ que vous présentez au monde entier sur votre boutique. Les clients adorent ce que vous faites, et vous vendez rapidement des dizaines et des dizaines de bols. Bravo ! Les utilisateurs remplissent leur panier, ils entrent les chiffres de leur carte bleue pour payer, et… ils aimeraient bien avoir une facture.</p>
<p>Hum… Vous n’allez tout de même pas écrire toutes vos factures à la main ! La mise en page est toujours la même, mais le contenu varie un peu : désignation, prix, adresse… Comment faire ?</p>
<div id="attachment_7507" style="width: 440px" class="wp-caption alignnone"><img class="size-medium wp-image-7507" src="https://media.24joursdeweb.fr/2022/12/invoices-thumbnail-430x269.png" alt="Image de factures" width="430" height="269" srcset="https://media.24joursdeweb.fr/2022/12/invoices-thumbnail-430x269.png 430w, https://media.24joursdeweb.fr/2022/12/invoices-thumbnail-768x480.png 768w, https://media.24joursdeweb.fr/2022/12/invoices-thumbnail-860x538.png 860w, https://media.24joursdeweb.fr/2022/12/invoices-thumbnail.png 1040w" sizes="(max-width: 430px) 100vw, 430px"><p></p>
<p class="wp-caption-text">Mais dites donc, vos factures sont aussi jolies que vos bols !</p>
</div>
<p>La même question se pose si vous développez un site de création de cartes de visite en ligne, où vous aimeriez que vos clients choisissent parmi de nombreux styles différents, dans lesquels ils pourraient modifier les couleurs, les polices de caractères ou le logo. Pareil si vous souhaitez générer des affichettes promotionnelles ou des étiquettes électroniques pour votre magasin. Encore pareil si vous voulez imprimer des diplômes, des bulletins ou des emplois du temps dans votre école.</p>
<p>Bref… Vous voyez l’idée 😁️.</p>
<p><strong>C’est là que la possibilité d’utiliser les technologies du web pour générer des documents imprimables commence à prendre forme.</strong></p>
<p>Après tout, dans chacun de ces cas, il faut générer à la volée un document dont la structure et la mise en page sont bien définies. Pour afficher du contenu venant d’une base de données, HTML n’a plus à faire ses preuves. Vous avez à disposition une pléthore d’outils, de <span lang="en">frameworks</span>, de bibliothèques et autres langages pour créer toutes les pages que vous souhaitez. Et pour mettre en page ce HTML, quoi de mieux que du CSS ? Vous pourrez créer une ou plusieurs feuilles de style selon vos envies, que vous pourrez même personnaliser avec des variables ou un préprocesseur (comme <a href="https://sass-lang.com/" hreflang="en">Sass</a>) si cela vous chante.</p>
<p>D’accord, on voit bien comment tout cela marche pour afficher des sites avec un navigateur. Mais pour un document paginé, très franchement, ce ne serait pas un peu tiré par les cheveux ?</p>
<h3>Les forces des technologies du web</h3>
<p>À vrai dire, et aussi étonnant que cela puisse paraître, ça ne l’est pas du tout, et pas uniquement pour générer quelques factures pour vos jolis bols. Il y a même de bonnes chances que vous ayez dans la bibliothèque de votre salon, sans le savoir, un livre fait en HTML/CSS ! Les éditeurs restent souvent assez discrets sur les technologies qu’ils utilisent, mais certains comme <a href="https://www.xml.com/articles/2017/02/20/beyond-xml-making-books-html/" hreflang="en">Hachette (Anglais)</a> en parlent publiquement. De vrais livres faits en HTML/CSS, vendus à de vrais clients, sans que personne ne s’en rende compte !</p>
<p>Alors, si de grands éditeurs mondiaux utilisent ces technos « pour de vrai », il est possible que cela marche pour d’autres, non ?</p>
<p>Ce n’est d’ailleurs pas le fruit du hasard… Il est temps de faire un peu d’archéologie, revenons un moment en 1996. Le monde de l’informatique ne jure que par Windows 95, le nouveau système d’exploitation de Microsoft, qui n’a même pas de navigateur internet installé par défaut. 90% des internautes (qui ne sont pas bien nombreux) utilisent Netscape, qui va cette année-là intégrer un langage créé à la hâte en 10 jours : JavaScript.</p>
<p>C’est également en cette année de grâce 1996 qu’est publiée <a href="https://www.w3.org/TR/WD-CSS2-971104/cover.html" hreflang="en">la première version de la spécification CSS 2 (Anglais)</a>. Dans l’idée de construire un standard ouvert et interopérable, le <abbr class="abbr" title="World Wide Web Consortium">W3C</abbr> rédige un document qui sert encore de référence plus de 25 ans après. On trouve dedans une définition claire de la syntaxe, des sélecteurs, et un bon nombre des propriétés de base que l’on utilise encore aujourd’hui. Mais ce n’est pas tout…</p>
<p>On y trouve également <a href="https://www.w3.org/TR/WD-CSS2-971104/page.html#h-12.1" hreflang="en">un chapitre entier sur la génération de documents paginés (Anglais)</a>.</p>
<p>Les créateurs de CSS voient loin et adorent penser en dehors des clous. Le format n’a pas été seulement pensé pour être affiché sur les tubes cathodiques des PC et des Mac de 1996, ni à être uniquement manipulé avec une souris et un clavier. On pense déjà à afficher des sites sur une télévision, sur des plage braille, sur des terminaux portables (le premier iPhone sortira plus de 10 ans après), à lire ce contenu avec des synthétiseurs vocaux… ou, bien sûr, à imprimer des documents !</p>
<p>Si l’idée est louable (et incroyablement visionnaire), elle pose cependant de nombreux problèmes concrets. Découper automatiquement un document web sur plusieurs pages dont la taille est fixe comporte des problématiques spécifiques, et CSS 2 en couvre une partie : forcer ou éviter les coupures de pages, ajouter des marges et y insérer des numéros de pages, définir un format pour l’impression. C’est un bon début, mais ce n’est pas suffisant. Sans que l’on ne s’en rende toujours compte, les tonnes de documents imprimés qui nous entourent chaque jour fourmillent de petits détails dont il faut prendre soin pour atteindre une mise en page de qualité.</p>
</div>
<h2>La pratique</h2>
<p>Alors à quoi ça ressemble de mettre le web en pages ?</p>
<p>Lorsque l’on crée un document, que ce soit une lettre, une affiche, un livre ou autre chose, de nombreux choix s’offrent à nous. Par exemple, le format : mon document va-t-il être rendu sur une page A4, une page A6, en 15cm x 24cm, en portrait, en paysage ? C’est quelque chose qui est facilement définissable en CSS. Choisissons le format A4 :</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token atrule"><span class="token rule">@page</span></span> <span class="token punctuation">{</span>
<span class="token property">size</span><span class="token punctuation">:</span> A4<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>C’était plutôt facile !</p>
<p>Avez-vous déjà remarqué que, sur un document de plusieurs pages, les marges ne sont souvent pas les mêmes selon si l’on est sur une page de gauche ou de droite, et que les numéros de pages ne sont pas toujours du même côté ? Ça aussi, c’est facilement définissable en CSS :</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token atrule"><span class="token rule">@page</span> <span class="token punctuation">:</span>left</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">mm</span> <span class="token number">10</span><span class="token unit">mm</span> <span class="token number">20</span><span class="token unit">mm</span> <span class="token number">15</span><span class="token unit">mm</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@bottom-left</span></span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
<span class="token atrule"><span class="token rule">@page</span> <span class="token punctuation">:</span>right</span> <span class="token punctuation">{</span>
<span class="token property">margin</span><span class="token punctuation">:</span> <span class="token number">20</span><span class="token unit">mm</span> <span class="token number">15</span><span class="token unit">mm</span> <span class="token number">20</span><span class="token unit">mm</span> <span class="token number">10</span><span class="token unit">mm</span><span class="token punctuation">;</span>
<span class="token atrule"><span class="token rule">@bottom-right</span></span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">counter</span><span class="token punctuation">(</span>page<span class="token punctuation">)</span>
<span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Vous avez saisi l’idée, <strong>CSS permet de répondre à des problématiques aussi bien pour du web que pour des documents paginés.</strong> Essayons avec d’autres problématiques encore plus spécifiques aux documents 🤯 !</p>
<div id="attachment_7511" style="width: 440px" class="wp-caption alignnone"><img class="size-medium wp-image-7511" src="https://media.24joursdeweb.fr/2022/12/sixteen-miles-out-oUEXqJBY2dg-unsplash-1-430x306.jpg" alt="Photo d’un livre ouvert" width="430" height="306" srcset="https://media.24joursdeweb.fr/2022/12/sixteen-miles-out-oUEXqJBY2dg-unsplash-1-430x306.jpg 430w, https://media.24joursdeweb.fr/2022/12/sixteen-miles-out-oUEXqJBY2dg-unsplash-1-768x546.jpg 768w, https://media.24joursdeweb.fr/2022/12/sixteen-miles-out-oUEXqJBY2dg-unsplash-1-860x611.jpg 860w, https://media.24joursdeweb.fr/2022/12/sixteen-miles-out-oUEXqJBY2dg-unsplash-1.jpg 1556w" sizes="(max-width: 430px) 100vw, 430px"><p></p>
<p class="wp-caption-text">C’est beau un livre</p>
</div>
<p>Vous voyez ce que sont les lignes de conduite ? Mais si, ce sont ces petits points que l’on trouve dans les tables des matières, qui relient le titre d’un chapitre à son numéro de page. Bon, OK, ce ne sont pas tout le temps des points, mais vous avez saisi le concept. Eh bien, ça aussi c’est prévu en CSS :</p>
<pre class="language-css" tabindex="0"><code class="language-css"><span class="token selector"><span class="token id">#table-of-content</span> a<span class="token pseudo-element">::after</span></span> <span class="token punctuation">{</span>
<span class="token property">content</span><span class="token punctuation">:</span> <span class="token function">leader</span><span class="token punctuation">(</span><span class="token string">'.'</span><span class="token punctuation">)</span> <span class="token string">' '</span> <span class="token function">target-counter</span><span class="token punctuation">(</span><span class="token function">attr</span><span class="token punctuation">(</span>href<span class="token punctuation">)</span><span class="token punctuation">,</span> page<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre>
<p>Ça peut paraître un peu barbare comme ça, regardons d’un peu plus près.</p>
<p><code>target-counter()</code> permet de récupérer le numéro de la page à laquelle commence le chapitre. Et <code>leader()</code>, c’est notre star de la table des matières, c’est cette fonction (oui, il y a des fonctions en CSS) qui va permettre de mettre des petits points entre le nom du chapitre et son numéro de page. Chaque ligne aura le bon nombre de points selon l’espace disponible, et les points de toutes les lignes seront parfaitement alignés : <code>leader()</code> fait les choses bien.</p>
<p>Nous n’allons pas faire un tour exhaustif de tout ce qu’il est possible de faire, mais CSS regorge de fonctionnalités et propriétés qui vont nous aider à mitonner un document aux petits oignons. Que vous vouliez définir si l’on peut couper ou non à l’intérieur d’un bloc, que vous souhaitiez intégrer des notes de bas de page, du texte sur de multiples colonnes, des en-têtes reprenant le titre du chapitre en cours, des références croisées (avec automatiquement le nom du chapitre dont on parle et le numéro de page où le trouver), des pages de garde, du texte en filigrane de la page, ou que sais-je encore, vous trouverez souvent une manière d’arriver à vos fins.</p>
<p><strong>En créant des documents avec HTML/CSS, vous bénéficiez de toutes ces choses spécifiques aux documents paginés déjà prévues par CSS, mais vous avez aussi à votre disposition toute la puissance du CSS que vous utilisez déjà pour vos sites !</strong></p>
<p>Quitte à mettre des exemples de CSS dans cet article, nous nous en sommes servis pour générer <a href="https://github.com/CourtBouillon/24joursdeweb-2022/raw/main/article.pdf">un simple PDF à partir de cet article</a> 😄. Si vous voulez voir le code plus en détails, le CSS est disponible dans <a href="https://github.com/CourtBouillon/24joursdeweb-2022/">ce dépôt</a>.</p>
<div id="attachment_7514" style="width: 440px" class="wp-caption alignnone"><img class="size-medium wp-image-7514" src="https://media.24joursdeweb.fr/2022/12/Capture-d’écran-du-2022-11-26-20-16-03-430x399.png" alt="L’article transformé en PDF" width="430" height="399" srcset="https://media.24joursdeweb.fr/2022/12/Capture-d’écran-du-2022-11-26-20-16-03-430x399.png 430w, https://media.24joursdeweb.fr/2022/12/Capture-d’écran-du-2022-11-26-20-16-03-768x712.png 768w, https://media.24joursdeweb.fr/2022/12/Capture-d’écran-du-2022-11-26-20-16-03-860x797.png 860w, https://media.24joursdeweb.fr/2022/12/Capture-d’écran-du-2022-11-26-20-16-03.png 1017w" sizes="(max-width: 430px) 100vw, 430px"><p></p>
<p class="wp-caption-text">L’article mis en pages</p>
</div>
<div class="section">
<h2>Les outils pour faire vos documents</h2>
<p>Alors c’est bien beau, on a notre contenu dans du HTML et un style magnifique dans du CSS, mais comment générer un PDF avec ça ?</p>
<p><strong>Il existe de nombreux outils différents qui permettent de transformer du HTML/CSS en PDF.</strong> Chacun de ces outils a ses forces et ses faiblesses, mais tous restent un minimum interopérables car utilisant ces mêmes standards HTML et CSS.</p>
<p>Parmi ces outils, le premier que vous pouvez essayer facilement n’est rien d’autre que… votre navigateur.</p>
<p>Imprimer votre page HTML vers un document PDF va, sans grande surprise, vous donner un PDF. Cette solution est très pratique et ne nécessite pas d’installer quoi que ce soit sur votre ordinateur.</p>
<p>La génération de fichiers PDF avec votre navigateur préféré a ses limites. La principale est que votre navigateur est conçu pour vous permettre de naviguer sur le web. C’est sa fonctionnalité principale (vous le saviez déjà) et c’est ce qui fait que les navigateurs sont loin d’intégrer toutes les propriétés et fonctions CSS spécifiques à l’impression, comme les notes de bas de page.</p>
<p>C’est pour cela que des outils spécifiques ont été développés. Contrairement aux navigateurs, ces outils sont spécifiquement développés pour générer des documents paginés, et sont plus regardants concernant les fonctionnalités spécifiques à ce médium.</p>
<p>Mais, quels sont ces outils ? On peut citer par exemple <a href="https://pagedjs.org/" hreflang="en">PagedJS</a>, <a href="https://vivliostyle.org/" hreflang="en">Vivliostyle</a>, <a href="https://www.princexml.com/" hreflang="en">PrinceXML</a>, <a href="https://www.pdfreactor.com/" hreflang="en">PDFreactor</a>, <a href="https://www.antennahouse.com/" hreflang="en">Antenna House</a> ou encore <a href="https://weasyprint.org/" hreflang="en">WeasyPrint</a>.</p>
<p>Parmi ces outils, certains sont libres et facilement accessibles :</p>
<ul>
<li>PagedJS est une bibliothèque JavaScript qui, en plus de transformer votre HTML/CSS en PDF, vous permet de voir le rendu de votre document en direct dans le navigateur.</li>
<li>Vivliostyle est lui en TypeScript, utilisable en ligne de commande directement depuis votre terminal et vous permet de prévisualiser également votre PDF. Mention spéciale pour Vivliostyle qui gère particulièrement bien l’écriture de droite à gauche et de haut en bas (et oui, il y a aussi ça à prendre en compte quand on fait des documents).</li>
<li>Quant à WeasyPrint, il s’agit d’une bibliothèque Python qui s’utilise directement en ligne de commande ou que vous pouvez appeler depuis votre application Python. Et c’est un outil qui vaut particulièrement le coup d’être essayé, puisque c’est nous qui le développons 😉️.</li>
</ul>
<p>Si vous voulez voir ce que sont capables de générer ces outils, n’hésitez pas à jeter un œil aux:</p>
<ul>
<li><a href="https://pagedjs.org/made-with-paged.js.html" hreflang="en">livres créés avec PagedJS (Anglais)</a> ;</li>
<li><a href="https://vivliostyle.org/samples/" hreflang="en">livres et magasines créés avec Vivliostyle (Anglais)</a> ;</li>
<li><a href="https://weasyprint.org/#samples" hreflang="en">livres, rapport, lettres et autres créés avec WeasyPrint (Anglais)</a>.</li>
</ul>
<p>Ça donne un peu envie d’essayer, non ?</p>
</div>
<h2>La diversité du web</h2>
<p>La création de documents PDF avec les technologies du web est une niche, certes, mais elle fourmille d’idées, d’outils, de solutions. Les personnes de ce microcosme partagent souvent des valeurs et des envies, et confrontent parfois avec véhémence leurs points de vue antagonistes. Tout le monde n’est pas d’accord, bien évidemment 😁, mais au moins les choses avancent grâce à l’implication des personnes derrière les standards, des développeurs d’outils et de leurs utilisateurs.</p>
<p>Ce monde qui bouillonne, c’est le monde du web tel que nous le connaissons, tout du moins à présent. Les plus anciennes et les plus anciens d’entre vous se rappellent sans aucun doute les heures sombres du web du début des années 2000, avec Internet Explorer 6 et ses 90% de parts de marché, qui n’avait que faire de l’interopérabilité et de l’innovation comme tout ogre omnipotent qui se respecte.</p>
<p>La <a href="https://gs.statcounter.com/browser-market-share" hreflang="en">position actuelle de Chrome (Anglais)</a> se rapproche chaque jour un peu plus d’une situation quasi monopolistique. À court ou moyen terme, cela pourrait replonger un écosystème particulièrement innovant dans la torpeur et les contraintes imposées par un despote. Google prend de moins en moins de pincettes pour pousser dans son navigateur des outils de surveillance et pour favoriser la publicité en ligne. L’entreprise ne le fait pas par pure méchanceté, elle le fait pour une raison simple : accroître ses revenus. Alors qu’un relatif équilibre avait été trouvé avec les autres implémentations, les tendances actuelles (désamour pour Firefox, utilisation du moteur de rendu de Chrome par Edge et Opera) laissent à penser que le rapport de force n’existe plus vraiment pour contrer l’agenda assumé du moteur de recherche.</p>
<p>Face à cela, il nous semble important de continuer à jouer le jeu de l’interopérabilité. Le web, et internet en général, fonctionnent grâce à de nombreux outils qui reposent tous sur les mêmes protocoles, langages et formats, comme <abbr class="abbr" title="Transmission Control Protocol/Internet Protocol">TCP/IP</abbr>, <abbr class="abbr" title="Hypertext Transfer Protocol">HTTP</abbr>, HTML, CSS, JavaScript… Une des forces de ces technologies réside dans leurs multiples implémentations : que vous fassiez un site statique, une API REST, un <span lang="en">scraper</span>, une web app ou un service de streaming, vous allez pouvoir choisir les langages que vous aimez et les outils que vous préférez. Tout cela est possible parce que ces technologies sont le fruit de consensus au sein de consortiums, qui tentent de privilégier au mieux l’intérêt des usagers sur l’intérêt d’un acteur privé ou public particulier. <strong>Et au final, pour nous, participer aux consensus en développant cet usage alternatif est une manière modeste mais sincère de tenter de faire vivre ce web ouvert.</strong></p>
<p>Nous sommes Lucie et Guillaume, et comme beaucoup de gens nous travaillons tous les jours avec les technologies du web. Nous aimerions que cela continue longtemps, nous aimerions pouvoir encore inventer et mettre en pages nos contenus, indépendamment des volontés de gros acteurs dont nous ne partageons pas forcément les objectifs. Alors, à notre toute petite échelle, avec nos jolis documents débordant de belles lettres et de couleurs harmonieuses, avec nos outils libres et nos standards ouverts, avec notre passion et notre bonne humeur, nous tentons de faire vivre cette diversité du web 🌱.</p>
</div>
<footer class="post-footer">
<div class="post-author">
<div class="post-author-avatar">
<img alt="Lucie Anglade et Guillaume Ayoub" src="https://secure.gravatar.com/avatar/59a1678631170a0211c11fbee3b77dc7?s=150&d=mm&r=g" srcset="https://secure.gravatar.com/avatar/59a1678631170a0211c11fbee3b77dc7?s=300&d=mm&r=g 2x" class="avatar avatar-150 photo" height="150" width="150"> </div>
<div class="post-author-text">
<div class="post-author-text-content">
<h2 class="post-author-title">À propos de Lucie Anglade et Guillaume Ayoub</h2>
<p class="post-author-description">Professionnels de la mise en pages du web à <a href="https://www.courtbouillon.org/">CourtBouillon</a>, nous sommes également tous deux développeurs de logiciels libres, amateurs de cuisine et toujours partants pour discuter autour d’un verre !
Nous organisons aussi les <a href="https://www.meetup.com/fr-FR/Python-AFPY-Lyon/">Meetup Python</a> de Lyon.</p>
</div>
</div>
</div>
</footer>
</article>
</body>
</html>