Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 19KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430
  1. <!DOCTYPE html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>
  13. Thèse
  14. — David Larlet</title>
  15. <script>
  16. function toggleTheme(themeName) {
  17. document.documentElement.classList.toggle(
  18. 'forced-dark',
  19. themeName === 'dark'
  20. )
  21. document.documentElement.classList.toggle(
  22. 'forced-light',
  23. themeName === 'light'
  24. )
  25. }
  26. const selectedTheme = localStorage.getItem('theme')
  27. if (selectedTheme !== 'undefined') {
  28. toggleTheme(selectedTheme)
  29. }
  30. </script>
  31. <!-- Documented, feel free to shoot an email. -->
  32. <link rel="stylesheet" href="/static/david/css/style_2024-03-09.css">
  33. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  34. <link rel="preload"
  35. href="/static/david/css/fonts/century_supra_ot_a_regular.woff2"
  36. as="font"
  37. type="font/woff2"
  38. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  39. crossorigin>
  40. <link rel="preload"
  41. href="/static/david/css/fonts/century_supra_ot_a_bold.woff2"
  42. as="font"
  43. type="font/woff2"
  44. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  45. crossorigin>
  46. <link rel="preload"
  47. href="/static/david/css/fonts/century_supra_ot_a_italic.woff2"
  48. as="font"
  49. type="font/woff2"
  50. media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)"
  51. crossorigin>
  52. <link rel="preload"
  53. href="/static/david/css/fonts/century_supra_ot_b_regular.woff2"
  54. as="font"
  55. type="font/woff2"
  56. media="(prefers-color-scheme: dark)"
  57. crossorigin>
  58. <link rel="preload"
  59. href="/static/david/css/fonts/century_supra_ot_b_bold.woff2"
  60. as="font"
  61. type="font/woff2"
  62. media="(prefers-color-scheme: dark)"
  63. crossorigin>
  64. <link rel="preload"
  65. href="/static/david/css/fonts/century_supra_ot_b_italic.woff2"
  66. as="font"
  67. type="font/woff2"
  68. media="(prefers-color-scheme: dark)"
  69. crossorigin>
  70. <meta name="description" content="Cette thèse porte sur les processus d’édition en considérant qu’ils sont constitutifs de la production du sens et qu’ils reflètent des visions du monde plurielles. Nous considérons le phénomène de fabrique d’édition comme un acte éditorial qui comprend autant la formalisation d’un texte que la constitution des outils permettant ce travail. Les dimensions techniques de l’édition sont ainsi imbriquées, telles que la construction de procédés de fabrication et de production de formes, d’objets et d’artefacts que sont les livres, ou telles que des opérations sur le texte comme l’architecture des contenus, la structuration sémantique et la composition typographique.">
  71. <!-- That good ol' feed, subscribe :). -->
  72. <link rel="alternate"
  73. type="application/atom+xml"
  74. title="Feed"
  75. href="/david/log/">
  76. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  77. <link rel="apple-touch-icon"
  78. sizes="180x180"
  79. href="/static/david/icons2/apple-touch-icon.png">
  80. <link rel="icon"
  81. type="image/png"
  82. sizes="32x32"
  83. href="/static/david/icons2/favicon-32x32.png">
  84. <link rel="icon"
  85. type="image/png"
  86. sizes="16x16"
  87. href="/static/david/icons2/favicon-16x16.png">
  88. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  89. <link rel="mask-icon"
  90. href="/static/david/icons2/safari-pinned-tab.svg"
  91. color="#07486c">
  92. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  93. <meta name="msapplication-TileColor" content="#f7f7f7">
  94. <meta name="msapplication-config"
  95. content="/static/david/icons2/browserconfig.xml">
  96. <meta name="theme-color"
  97. content="#f7f7f7"
  98. media="(prefers-color-scheme: light)">
  99. <meta name="theme-color"
  100. content="#272727"
  101. media="(prefers-color-scheme: dark)">
  102. <!-- Is that even respected? Retrospectively? What a shAItshow…
  103. https://neil-clarke.com/block-the-bots-that-feed-ai-models-by-scraping-your-website/ -->
  104. <meta name="robots" content="noai, noimageai">
  105. <!-- To get attribution when linking on mastodon. -->
  106. <meta name="fediverse:creator" content="@david@larlet.fr">
  107. <style type="text/css">
  108. .tippy-content {
  109. min-width: 280px;
  110. padding: .5rem;
  111. font-size: calc(var(--fluid-0) * 0.8);
  112. font-family: var(--labor-font);
  113. letter-spacing: initial;
  114. text-align: left;
  115. }
  116. .tippy-content h3 {
  117. margin-top: 0;
  118. }
  119. .tippy-content h3 img {
  120. max-width: 2rem;
  121. max-height: 2rem;
  122. display: inline-block;
  123. }
  124. .tippy-content .tippy-links {
  125. display: flex;
  126. justify-content: space-around;
  127. }
  128. .tippy-content a {
  129. padding: .4rem;
  130. color: #F06048;
  131. }
  132. </style>
  133. <body data-instant-intensity="viewport-all">
  134. <article>
  135. <header>
  136. <hgroup>
  137. <h1>Thèse</h1>
  138. <p>Le <time datetime="2024-01-23">23 janvier 2024</time></p>
  139. </hgroup>
  140. </header>
  141. <nav>
  142. <p>
  143. <a rel="prev"
  144. href="/david/2024/01/22/"
  145. title="Publication précédente : Légitimité">← Précédent</a> •
  146. <a href="/david/" title="Aller à l’accueil" rel="up">Accueil</a>
  147. <a href="/david/recherche/"
  148. title="Aller à la page de recherche"
  149. rel="search" data-no-instant>Recherche</a>
  150. • <a rel="next"
  151. href="/david/2024/01/24/"
  152. title="Publication suivante : Taille">Suivant →</a>
  153. </p>
  154. </nav>
  155. <blockquote>
  156. <p>Cette thèse porte sur les processus d’édition en considérant qu’ils sont constitutifs de la production du sens et qu’ils reflètent des visions du monde plurielles. Nous considérons le phénomène de fabrique d’édition comme un acte éditorial qui comprend autant la formalisation d’un texte <mark>que la constitution des outils permettant ce travail.</mark> Les dimensions techniques de l’édition sont ainsi imbriquées, telles que la construction de procédés de fabrication et de production de formes, d’objets et d’artefacts que sont les livres, ou telles que des opérations sur le texte comme l’architecture des contenus, la structuration sémantique et la composition&nbsp;typographique.</p>
  157. <p><cite><em><a data-link-domain="these.quaternum.net" href="https://these.quaternum.net/">Fabriquer des éditions
  158. Éditer des fabriques - Reconfiguration des processus techniques éditoriaux et nouveaux modèles épistémologiques</a></em>, Antoine&nbsp;Fauchié</cite></p>
  159. </blockquote>
  160. <p>J’assiste en direct à une soutenance de thèse pour la première fois de ma vie. Il s’agit d’un exercice moins facile que ce que je m’imaginais mais pas toutes les soutenances ne se font dans un tel contexte si j’ai bien réussi à lire entre les lignes. En tout cas, j’étais impressionné par la pertinence des réponses d’Antoine à chaud et sa faculté à recentrer les&nbsp;discussions.</p>
  161. <p>Les questions que j’aurais aimé&nbsp;poser&nbsp;:</p>
  162. <ol>
  163. <li>Comment transformer ces fabriques de logiciels <em>open-source</em> en communs numériques impliquant une gouvernance partagée&#8239;? Comment sont impliquées les différentes parties&nbsp;prenantes&#8239;?</li>
  164. <li>Quelle est la littéracie numérique nécessaire pour devenir auteur·ice aujourd’hui&#8239;? Quelle est l’in·accessibilité de ces fabriques sous cet angle&nbsp;là&#8239;?</li>
  165. <li>Le rôle de l’éditeur·ice devient-il également celui d’un·e accompagnateur·ice technique&#8239;? Quelle part pour l’éthique dans ce choix&nbsp;d’intermédiaire&#8239;?</li>
  166. </ol>
  167. <p>Niveau technique, dommage qu’il ne soit pas possible de faire référence à des passages particuliers vu qu’ils sont déjà numérotés dans la version HTML (mais en&nbsp;CSS).</p>
  168. <p><mark>@nnotation(contexte)</mark>&nbsp;: J’ai <a href="/david/2023/12/08/">participé au développement</a> d’une partie des outils présentés dans la thèse et on se connait depuis un moment avec&nbsp;Antoine.</p>
  169. <a href="#hr-45" title="Lien vers cette section de la page"><hr id="hr-45" /></a>
  170. <blockquote>
  171. <p>La sociologie parle de «&nbsp;dépossession économique&nbsp;» et de «&nbsp;dépossession culturelle&nbsp;» pour nommer la manière dont la société limite les capacités d’accès à certaines ressources et les expériences qu’elles rendent possibles. Ne pourrait-on pas suggérer qu’il y a aussi, à côté de ces deux phénomènes, ce que l’on pourrait désigner comme des mécanismes de dépossession existentielle&#8239;? Subir la forme-de-vie qui s’empare de nous et nous fait être ce que nous sommes, c’est subir sa vie et subir certains modes d’existence alors que d’autres auraient pu beaucoup mieux nous convenir et nous rendre plus heureux. C’est même, en un sens, se faire voler son existence par la société et les autres — et peut-être même par soi-même, par une certaine version de&nbsp;soi-même.</p>
  172. <p><mark>Nous ne devons jamais, comme dit Adorno, confondre ce que nous sommes et ce que la société a fait de nous.</mark> Nous ne sommes pas de toute éternité ce que nous avons été amenés à devenir. Il n’y a donc pas de projet qui vise à mettre en place une analytique oppositionnelle de l’ordre social et de notre inscription à l’intérieur de celui-ci qui pourrait faire l’économie d’une investigation de l’existence — d’une interrogation sur les formes de la vie et le tissu relationnel qui nous&nbsp;constitue.</p>
  173. <p><cite><em>Une aspiration au dehors</em>, Geoffroy de&nbsp;Lagasnerie</cite></p>
  174. </blockquote>
  175. <p>D’une certaine manière, je vis une <em>dépossession existentielle</em> choisie en assistant à cet exercice après avoir bifurqué d’une carrière&nbsp;universitaire.</p>
  176. <p>Merci Antoine pour&nbsp;l’invitation.</p>
  177. <p><em>Antoine a <a data-link-domain="quaternum.net" href="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/" hreflang="fr"
  178. title="Consultation de l’article">répondu le 2&nbsp;février</a>
  179. <a href="/david/cache/2024/e58d4c2ceeab475aba6a179c035852f8/" hreflang="fr"
  180. data-tippy data-description="David a assisté à la soutenance de ma thèse de doctorat, il m&rsquo;a posé trois questions via un billet de blog, à défaut d&rsquo;avoir pu le faire pendant la soutenance."
  181. data-source="https://www.quaternum.net/2024/02/02/trois-reponses-sur-ma-these/"
  182. data-date="2024-02-18"
  183. data-favicon=""
  184. data-domain="quaternum.net"
  185. ><svg xmlns="http://www.w3.org/2000/svg"
  186. width="24" height="24" viewBox="0 0 24 24" fill="none"
  187. stroke="currentColor" stroke-width="2" stroke-linecap="square"
  188. stroke-linejoin="round"><circle cx="12" cy="12" r="10"></circle>
  189. <path d="M9.09 9a3 3 0 0 1 5.83 1c0 2-3 3-3 3"></path>
  190. <line x1="12" y1="17" x2="12.01" y2="17"></line>
  191. </svg>
  192. <span class="sr-only">[archive]</span></a>.</em></p>
  193. <nav>
  194. <p>
  195. <a href="/david/2024/commun/"
  196. title="Liste de tous les articles 2024 associés à cette étiquette"
  197. rel="tag">#commun</a>
  198. <a href="/david/2024/experience/"
  199. title="Liste de tous les articles 2024 associés à cette étiquette"
  200. rel="tag">#expérience</a>
  201. <a href="/david/2024/processus/"
  202. title="Liste de tous les articles 2024 associés à cette étiquette"
  203. rel="tag">#processus</a>
  204. <a href="/david/2024/#tags" title="Liste de toutes les étiquettes 2024">tous ?</a>
  205. </p>
  206. </nav>
  207. <nav>
  208. <p>
  209. <a rel="prev"
  210. href="/david/2024/01/22/"
  211. title="Publication précédente : Légitimité">← Précédent</a> •
  212. <a href="/david/2024/" title="Liste des publications récentes">↑ En 2024</a>
  213. • <a rel="next"
  214. href="/david/2024/01/24/"
  215. title="Publication suivante : Taille">Suivant →</a>
  216. </p>
  217. </nav>
  218. <form action="/david/recherche/" method="get">
  219. <fieldset>
  220. <legend>Recherche</legend>
  221. <label for="input-search">Termes de votre recherche :</label>
  222. <input id="input-search" type="search" name="s" aria-describedby="indexation-infos" required>
  223. <input type="submit" value="Chercher">
  224. <p id="indexation-infos">
  225. <small>
  226. Seuls les contenus de ces 8 dernières années sont indexés.
  227. </small>
  228. </p>
  229. </fieldset>
  230. </form>
  231. <aside>
  232. <theme-toggle></theme-toggle>
  233. </aside>
  234. </article>
  235. <hr>
  236. <footer>
  237. <p>
  238. <a href="/david/" title="Aller à l’accueil">Accueil</a>
  239. <a href="/david/log/" title="Accès au flux RSS">Suivre</a>
  240. <a href="http://larlet.com"
  241. title="Go to my English profile"
  242. data-instant>Pro</a>
  243. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">Email</a>
  244. <abbr title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340">Légal</abbr>
  245. </p>
  246. <template id="theme-selector">
  247. <form>
  248. <style type="text/css">
  249. fieldset div {
  250. text-align: center;
  251. }
  252. </style>
  253. <fieldset>
  254. <legend>Thème</legend>
  255. <div>
  256. <label>
  257. <input type="radio" value="auto" name="chosen-color-scheme" checked>
  258. Auto
  259. </label>
  260. <label>
  261. <input type="radio" value="dark" name="chosen-color-scheme">
  262. Foncé
  263. </label>
  264. <label>
  265. <input type="radio" value="light" name="chosen-color-scheme">
  266. Clair
  267. </label>
  268. </div>
  269. </fieldset>
  270. </form>
  271. </template>
  272. </footer>
  273. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  274. <script>
  275. class ThemeToggle extends HTMLElement {
  276. constructor() {
  277. super()
  278. const themeSelectorTemplate = document.querySelector('#theme-selector')
  279. const form = themeSelectorTemplate.content.firstElementChild
  280. this.attachShadow({ mode: 'open' })
  281. this.shadowRoot.appendChild(form.cloneNode(true))
  282. }
  283. connectedCallback() {
  284. const form = this.shadowRoot.querySelector('form')
  285. form.addEventListener('change', (e) => {
  286. const chosenColorScheme = e.target.value
  287. localStorage.setItem('theme', chosenColorScheme)
  288. toggleTheme(chosenColorScheme)
  289. })
  290. const selectedTheme = localStorage.getItem('theme')
  291. if (selectedTheme && selectedTheme !== 'undefined') {
  292. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  293. }
  294. }
  295. }
  296. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  297. window.addEventListener('load', () => {
  298. let colorsLayer = undefined
  299. let hasDarkRules = false
  300. for (const styleSheet of Array.from(document.styleSheets)) {
  301. let mediaRules = []
  302. for (const layerRule of styleSheet.cssRules) {
  303. if (!(layerRule instanceof CSSLayerBlockRule)) {
  304. continue
  305. }
  306. if (layerRule.name === 'colors') {
  307. colorsLayer = layerRule
  308. }
  309. for (const cssRule of layerRule.cssRules) {
  310. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  311. continue
  312. }
  313. // WARNING: Safari does not have/supports `conditionText`.
  314. if (cssRule.conditionText) {
  315. if (cssRule.conditionText !== prefersColorSchemeDark) {
  316. continue
  317. }
  318. } else {
  319. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  320. continue
  321. }
  322. }
  323. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  324. }
  325. }
  326. // WARNING: do not try to insert a Rule to a styleSheet you are
  327. // currently iterating on, otherwise the browser will be stuck
  328. // in a infinite loop…
  329. for (const mediaRule of mediaRules) {
  330. // Safari requires the `0` second parameter (even if default).
  331. colorsLayer.insertRule(mediaRule.cssText, 0)
  332. hasDarkRules = true
  333. }
  334. }
  335. if (hasDarkRules) {
  336. if ('customElements' in window && !customElements.get('theme-toggle')) {
  337. customElements.define('theme-toggle', ThemeToggle)
  338. }
  339. }
  340. })
  341. </script>
  342. <script src="/static/david/js/popper-2.11.8.min.js"></script>
  343. <script src="/static/david/js/tippy-bundle-6.3.7.umd.min.js"></script>
  344. <script>
  345. tippy('[data-tippy]', {
  346. content(reference) {
  347. reference.addEventListener('click', (e) => e.preventDefault())
  348. return `
  349. <h3 lang="fr">
  350. <img src="${reference.dataset.favicon}" loading="lazy">
  351. <a href="${reference.dataset.source}"
  352. >Article sur ${reference.dataset.domain}</a></h3>
  353. <p lang="${reference.hreflang}"><em>${reference.dataset.description}</em></p>
  354. <div class="tippy-links" lang="fr">
  355. <a href="${reference.href}">Archive au ${reference.dataset.date}</a>
  356. </div>
  357. `
  358. },
  359. allowHTML: true,
  360. interactive: true,
  361. delay: [150, 700],
  362. hideOnClick: false
  363. })
  364. </script>
  365. <script type="module">
  366. import { annotate } from '/static/david/js/rough-notation-0.5.1.esm.min.js'
  367. const markObserver = new IntersectionObserver((entries, observer) => {
  368. const computedStyle = getComputedStyle(document.documentElement)
  369. const markBackground = computedStyle.getPropertyValue('--mark-background')
  370. for (const entry of entries) {
  371. if (entry.intersectionRatio === 0) continue
  372. const markElement = entry.target
  373. markElement.style.backgroundColor = 'inherit'
  374. const annotation = annotate(
  375. markElement, {
  376. type: 'highlight',
  377. multiline: true,
  378. color: markBackground,
  379. // animate: !window.matchMedia('(prefers-reduced-motion: reduce)').matches
  380. animate: false
  381. }
  382. )
  383. annotation.show()
  384. observer.unobserve(markElement)
  385. }
  386. }, {threshold: 1.0})
  387. for (const markElement of document.querySelectorAll('mark')) {
  388. markObserver.observe(markElement)
  389. }
  390. </script>
  391. </body>
  392. </html>