A place to cache linked articles (think custom and personal wayback machine)
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.

4 年之前
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  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>
  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,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Mutation numérique de l’écrit : du fixe & du mouvant (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="http://www.tierslivre.net/spip/spip.php?article4287">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Mutation numérique de l’écrit : du fixe & du mouvant (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="http://www.tierslivre.net/spip/spip.php?article4287">Source originale du contenu</a></h3>
  445. <p>Je rappelle le contexte, merci de lire mes notes d’il y a quelques mois : </p>
  446. <p><a href="spip.php?article4224" class="spip_in">qu’est-ce que le web change à l’auteur de littérature ?</a><p>.</p><p>En ligne de mire : une reprise de <a href="spip.php?rubrique63" class="spip_in">Après le livre</a> (Seuil, 2011), dans une configuration, à 5 ans de distance, où notre approche notamment du <i>livre numérique</i> s’est déplacée en profondeur, et nous rendrait même presque inutile ce concept – les liens ci-dessous renvoient aux chapitres correspondants d’<i>Après le livre</i>.</p><p>La route : j’ai la chance cette année de pouvoir m’exprimer plusieurs fois sur ces questions, donc de remettre en chantier, sur toute une saison, une prise de parole qui sera toujours une réimprovisation sur thème (ce qui ne facilite pas la trouille, ni l’atterrissage à la fin). D’autres rendez-vous à suivre, Lyon en mars, université d’Artois en avril, Sophia Antipolis en mai, puis Copenhague et Montréal en mai.</p><p>Ce lundi 14 décembre, à l’invitation de Pierre-Henri Cubaud, j’interviens au CNAM dans le cadre de <a href="http://recherche.cnam.fr/demi-journee-prospective-et-assemblee-generale-773877.kjsp" class="spip_out" rel="external">l’assemblée générale de CEDRIC</a>, et demain 15 décembre à l’IRI, à l’invitation de Bernard Stiegler, sous le beau titre de <a href="http://enmi-conf.org/wp/enmi15/" class="spip_out" rel="external">La toile que nous voulons</a>.</p><p>Ci-dessous, les notes qui me serviront de grille pour la prise de parole. Disons que je brasse toujours la même chose, mais qu’à force de touiller ça épaissit.</p><p>FB</p><p>Photo ci-dessus : mon bureau en 2003, anciennes <a href="http://www.tierslivre.net/wcam/ANC/photo51.html" class="spip_out" rel="external">pages images</a> de Tiers Livre.</p></div><h3 class="spip"> </h3><div align="center"><small><blockquote><em>En 12 points, allant du général au détail par cercles concentriques, donc sans fin sinon le temps imparti.</em></blockquote></small><p/></div><h3 class="spip"> </h3><p>Qu’est-ce ce que le web change à l’auteur de littérature ?</p><p align="center"><strong>| 1 |</strong></p><p>Et si l’essentiel de ce qu’on avait à faire n’était pas de tirer du présent, mouvant et obscur, des données prédictives, mais simplement de s’accroître dans l’instant présent, pour apprendre mieux le vocabulaire de ce qui change – si le saut dans l’inconnu, aussi minime qu’il soit, est déjà un critère fixe, et non mouvant ?</p><p align="center"><strong>| 2 |</strong></p><p>A priori une tâche modeste : ce qui change, fissures, effritement, mais aussi permanence, goût du nouveau et résistivité de nos propres usages, participe de notre expérience immédiate, et le seul problème, donc, que cette expérience même ait été mise en mouvement permanent, amplifié, accéléré. Mais est-ce que le premier axiome ne serait pas : vivre depuis 20 ans une mutation aussi décisive pour l’écrit que les grandes mutations de l’écrit qui nous ont précédé, et considérer comme une chance, non une contrainte, que cela nous soit offert ?</p><p align="center"><strong>| 3 |</strong></p><p>« Convaincre est infécond », disait Walter Benjamin, de la matière molle qu’est l’instance présente de la mutation, je me refuse à faire démonstration. Sinon que sous une apparente stabilité ce qu’on nomme métiers du livre subit une reconfiguration intérieure de grande ampleur, qui affecte aussi bien les usages de lecture que les objets qu’ils conçoivent et distribuent, que les modes de récit, format, syntaxe, représentation, qui en constituent la forme dominante. Le problème n’étant pas que d’aucuns disent le contraire, mais qu’une pression constante soit exercée à l’encontre même de ce qui pourrait sembler leur intérêt direct : protectionnisme d’État compris.</p><p align="center"><strong>| 4 |</strong></p><p>C’est de l’intérieur de cette mutation qu’il nous faut apprendre à parler, avec un renversement : comment établir ce premier jeu de réflexion – avec l’ambiguïté qu’il est déjà la littérature même, si la littérature n’a pas d’autre définition que le langage mis en réflexion – depuis l’intérieur même d’où nous ne reconnaissons pas nos pratiques, qu’elles ne nous offrent plus de stabilité, et donc sans les reconstituer comme prévisibles ?</p><p align="center"><strong>| 5 |</strong></p><p>Ici, le champ et les tenseurs de ce dont nous disposons. Un, que l’histoire des mutations de l’écrit est un ensemble dénombrable, mais surtout un ensemble considérablement restreint, rapporté aux autres formes de mutation, sociales, politiques, urbanistiques. Le passage de l’oralité à l’écriture, la construction d’une complexité repérée par autant d’éléments simples dans les presque <a href="spip.php?article2370" class="spip_in">3000 ans d’histoire de la tablette d’argile</a>, le passage au <a href="spip.php?article2346" class="spip_in">rouleau</a> de papyrus collé, où s’invente notamment la notion de « livre », le passage du rouleau au codex, le passage du codex à l’imprimerie, enfin, de l’irruption de la presse à l’arrivée du livre de poche, la mise en avant d’un concept de « publication » incrémenté par une temporalité susceptible aujourd’hui encore de se contracter. Deux, et pour moi c’est indissociable, le fait que ce que nous nommons « livre numérique », premiers dépôts du Gutenberg Project, a bientôt 50 ans, que nos premières tentatives francophones, ABU ici-même au CNAM et Athena à Genève, ont exactement 20 ans, donc l’irruption d’une micro-histoire suffisamment riche pour être analysée. Ainsi, le constat irrécusable qu’elle est l’histoire de sa propre non-prédictibilité : comment l’<a href="spip.php?article2328" class="spip_in">ADSL</a> a tué le CD-ROM, comment le <a href="spip.php?article2336" class="spip_in">bureau multi-tâche</a> a été une révolution des usages plus décisive que l’apparition des supports dédiés, comment la viralité du texte peut primer sur ses contenus même en devenant une instance textuelle à elle seule.</p><p align="center"><strong>| 6 |</strong></p><p>Corollaire de ces deux tenseurs, pour en accroître la rémanence : que tout cela a surgi alors même que nous n’avions pas appris à constituer l’histoire du livre comme élément de l’histoire du récit (on en confiait le champ, depuis le magnifique travail de Lucien Febvre dans les années 60, « L’apparition du livre », aux formations techniques et non aux formations littéraires), mais surtout sans concevoir cette histoire même (c’est là aussi où il est bon de relire Lucien Febvre) comme histoire de ses transitions – non, définitivement, ce n’est pas Gutenberg qui a inventé l’imprimerie. Quel saut mental a-t-il fallu impliquer, au moins rétrospectivement, et dans chacune des phases considérées, pour initier cette transition ? Ainsi, il est absolument récent que nous apprenions à étudier l’histoire très complexe non pas même des transitions, mais des jeux réciproques qu’initie sur chaque forme (un des paradoxes de l’histoire de l’écrit, c’est que chaque forme a survécu à l’apparition de la nouvelle) leur juxtaposition pendant un temps déterminé. Rabelais par exemple est une étude qui revient comme déterminante, parce que ses 4 livres se publient dans l’intérieur même d’une telle juxtaposition. Pour le second tenseur, le fait qui reste écrasant d’une interdépendance totalisée, sans précédent même dans l’irruption commerciale du papyrus à échelle de l’ensemble des rives de Méditerranée, de chaque micro-élément de ce qui, a priori, ne concernerait que formes de la poésie et formes du récit, avec un champ politique globalisé (seul exemple que je donnerais : la classification par mots-clés du commerce du livre), un champ économique totalement sauvage (quel rapport entre les camions Samsung, de breveter l’arrondi des coins, et la césure typographique), enfin écologique – les terres rares de nos appareils et là où on les extrait, la conservation de données mémorielles dans les anciennes plateformes de forage pétrolier, et que cette banque de données généralisée, mais privative, devienne la bibliothèque collective.</p><p align="center"><strong>| 7 |</strong></p><p>Pas question d’entrer dans les exemples, c’est une caractéristique de la pensée web, bien au-delà de la classique fractalité, que je ne maîtrise pas : chaque élément est infiniment complexe, et contient tous les autres. Par exemple : la notion de reproductibilité, le clou dans le fond des maisons et la disparition de <a href="spip.php?article2325" class="spip_in">centaines d’oeuvres</a> d’Eschyle et Sophocle. Par exemple, et c’est Italo Calvino qui le premier en a écrit, lors d’une des premières grandes expositions de l’écriture mésopotamienne par Bottéro dans les années 70, c’est tout récent, développant le rôle de la vitesse dans la binarisation de l’outil, le calame à la pointe taillée en biais, pour le passage de l’écriture iconique à l’écriture syllabique. Par exemple, l’écriture manuscrite du scribe de François 1er, Ange Vernèce, survivant dans les <a href="spip.php?article2708" class="spip_in">poinçons de Garamont</a>, et l’usage que nous continuons d’en faire. Par exemple, le fait que la miniaturisation de la police (un caractère 11) appris à Venise par Aldo Manuccio des techniques de peinture sur soie des marchands coréens, et prouver qu’on ne pouvait distinguer ses livres imprimés de ceux produits par recopie manuelle dans l’industrie vénitienne, a permis que le livre tienne dans la poche, soit tiré à 1000 exemplaires et pas 200, et disparaisse de l’oeil des censures. Paradoxe secondaire : qu’un des outils le plus fascinant pour appréhender cette histoire de la lecture (il y a aussi Alberto Manguel) ce soit les « Petits Traités » de Pascal Quignard, écrits en amont de l’irruption web.</p><p align="center"><strong>| 8 |</strong></p><p>Et probablement apprenons-nous encore des paramètres qui jusqu’ici nous semblaient invisibles, parce que nous n’en avions pas besoin. La dimension anthropomorphe des supports d’écriture leur est native, depuis le premier pâton d’argile où l’écriture s’est enroulée en spirale sans bord, jusqu’aux premières publicités pour l’iPad, ordinateur qu’on peut emmener sur son canapé pour travailler en chaussettes. Par exemple, mais il y en a mille à tenir ensemble, le rapport d’une lecture graphique, susceptible d’inclure le rythme et la longueur d’une phrase en visualisant ses éléments diacritiques, est analysée par les Encyclopédistes : <a href="spip.php?article2325" class="spip_in">ancrage de l’oeil</a> qui balaye sur la marge en haut à gauche, et s’invente le livre moderne. Mais c’est poser de façon adventice le rôle du lecteur, et un élément de détail comme l’espace blanc entre les mots, remplacé par les Grecs par un point minuscule, le stigme, inconcevable par les Tiffinegs dont l’écriture s’inscrit sur le sable pour les nomades qui surviendront après le départ des scripteurs, et qui revient (l’espace blanc entre les mots) seulement vers 1100 de notre ère dans le Codex. Les Encyclopédistes définissent le nombre optimal de caractères que doit contenir une ligne pour cette saisie graphique : mais nos écrans sont passés en 16/9 parce que c’est la vidéo qui en est le premier commerce. et la pratique du MSN a appris à nos étudiants à s’expédier des lignes de 180 ou 200 caractères : d’évidence, ils se sont appropriés mentalement, pour la compréhension et la remémoration, ce qui était pour nous, éduqués pas le livre, une barrière. Détail certainement, mais qui pose dans la reconstitution linéaire du lire, depuis le balayage qui s’établit par zone, des questions de fréquence qui rejoignent les normes bousculées du cinéma – on a l’illusion d’une vision continue à partir de 18 images seconde, mais tous les films que nous voyons, même faits avec nos téléphones, sont à 50 ou 60 images seconde.</p><p align="center"><strong>| 9 |</strong></p><p>Un point décisif, je crois, de ce type d’approche, c’est comment il nous contraint à mettre au premier plan le lien, lui aussi comme natif, des formes de récit et des supports qui les matérialisent, mais que cette tension relativement bien connue ne peut s’appréhender sans les usages qui les définissent à la fois en amont et en aval. De « l’enquête » d’Hérodote aux fables sur les <a href="spip.php?article2338" class="spip_in">rhinocéros</a>, qui engendreront le merveilleux de la licorne aux temps féodaux, collectées par Pline l’ancien auprès des légionnaires romains, ce qui est en amont de l’écriture, en ce qu’il procède d’une expérience, déborde la figure beaucoup plus restreinte et contingente de « l’écrivain », mot forgé au XVIIe siècle (travaux d’Alain Viala), et constitué dans sa symbolique actuelle au XIXe (travaux d’Alain Chartier). Si cet amont est occulté chez Balzac, il s’expose à cru chez Flaubert, devient le matériau même de Proust. Dans la complexité invisible du réel mou qui nous entoure, pour représenter nous avons à déranger – le concept d’expérience touche désormais la littérature comme il a bousculé l’ensemble des autres disciplines. Et bien sûr l’aval, les pratiques de lecture. La forme épistolaire devient roman dans les « Liaisons dangereuses » parce qu’elle est forme sociale de construction illusoire de réalité. Et chez <a href="spip.php?article2345" class="spip_in">Sévigné</a>, où la lecture des lettres devient sociale sans passer ni par le livre, ni même par la destinataire des lettres, le choix de la forme de récit est aussi ce qui permet de contourner la censure politique.</p><p align="center"><strong>| 10 |</strong></p><p>Tout cela nous éloignerait de l’immédiat présent ? Ces problématiques de conjonction du champ formel et du champ technique nous sont familières depuis l’oeuvre – qui reste centrale – de <a href="spip.php?article4177" class="spip_in">Gilbert Simondon</a> (merci Gilles Deleuze et Bernard Stiegler de nous l’avoir réappris). Mais prenez une tentative comme celle du hongrois Vilém Flusser : pour analyser l’image, il met en avant la constante médiation technique de sa figure matérielle, depuis l’origine. Il conçoit alors l’apparition de l’écriture comme une des modalités non du récit oral, dans sa constitution généalogique ou mythologique, mais comme une modalité propre de l’image, dont le récit se serait emparé en acceptant la contrainte de se faire image. C’est une fiction. Je rappelle que Copernic, pour développer l’idée que la terre tournait autour du soleil et non l’inverse, commence son texte par « voici une fiction qui pourrait être utile aux navigateurs », ce à quoi <a href="spip.php?article2337" class="spip_in">Tycho Brahé</a>, qui décrivait l’univers à l’oeil nu comme suite de sphères ptoléméennes dont il était le centre, avait beau jeu de répondre que ses calculs étaient plus exacts que ceux de Copernic. Flusser a besoin de cette fiction pour analyser – voir son magnifique livre « Gestes » écrit directement en français – ce qui sépare par exemple le geste de photographier du geste de filmer, notion de gestuelle qui revient elle aussi au premier plan avec brutalité lorsqu’il s’agit de remplacer l’<a href="spip.php?article2519" class="spip_in">épaisseur du livre</a>, et son repérage objet 6 surfaces 8 angles, par la séquence de lecture web. Mais considérons un invariant : le carnet de l’écrivain, avec ses listes, ses échanges épistolaires, ses relevés d’informations, ce qui s’y associe d’une pluralité de dictionnaires, et de tout temps aussi les représentations iconiques, dessins et gribouillis de Kafka ou de Baudelaire. Le carnet reste en amont du livre, lorsqu’il devient oeuvre et transmission, parce que le livre ne sait pas techniquement l’accepter. Lorsque nous apprenons progressivement à lire le monde par le web, cette pluralité technique est consubstantielle à notre usage, de même que la socialité que nous y importons, photographie dans le statut Facebook, live stream via Periscope, lien transmis à celle ou celui qui habite votre propre maison, dans la pièce à côté ou de l’autre côté du salon. La littérature comme langage mis en réflexion : où l’industrie du livre parle de « livre augmenté », nous avons fait « retour amont », selon le beau titre de René Char, pour composer notre récit directement depuis cette pluralité native et de l’enquête et de la « projection » (au sens fort de projet et intention d’une part, de construction mentale imaginaire de réel d’autre part), pour nous greffer sur des usages miroirs des nôtres propres (retour à une idée d’auteur en amont de celle éphémère et mangée aux vers de l’écrivain) dans des objets qui subvertissent ces usages pour contraindre, à distance et à nouveau – c’est un zeugme – à une reconstruction mentale du réel qu’il ne produit pas de lui-même, et ainsi nous questionne dans notre devenir.</p><p align="center"><strong>| 11 |</strong></p><p>Ce qui a tant d’impacts concrets que nous ne saurions mesurer encore. Partons de cette projection. Cela déplace par exemple l’appui sur un concept temporalisé et généralisé de publication. La temporalité est lente, et l’objet dans une distribution commerciale fermée : Sainte-Beuve invente la notion de critique dans l’intérieur de cette médiation, dont le support est en lui-même – son feuilleton du lundi dans la presse – une publication non pas intermédiaire, mais qui constitue son intervention et sa matière autonome depuis le champ de cette médiation : étonnez-vous que l’univers de la presse soit si hostile à l’univers de la littérature sur web. La temporalité rapide oblige à prendre en compte une économie de l’attention, là où l’étude – voir les représentations de Saint-Augustin écrivant – n’avait pas à justifier de son temps illimité devant le livre ? Contraintes qu’on a à s’imposer à soi-même, vacuoles de la lecture comme travail, et ce que cela impose dans la transmission : j’enseigne l’écriture, et qu’elle soit politique et invention, je n’enseigne pas les livres – cela signifie que je reviens à une tâche autrement ancienne de la littérature (langage mis en réflexion) dans ses fonctions de représentation et de conduite. Une histoire récente ? Relire le « Peintre de la vie moderne » de Baudelaire, sur la reproduction qu’il dit « simultanée » (<a href="spip.php?article2330" class="spip_in">à 9 jours près</a>) des croquis faits sur les champs de bataille de Crimée par Constantin Guys : ce qui terrifie Baudelaire, c’est que puisse se reproduire sans la médiation du récit ce qui reste hors de notre perception sensible, grâce précisément à cette simultanéité.</p><p align="center"><strong>| 12 |</strong></p><p>Ainsi, dans cette notion de publication, deux autres notions pour moi indissociables : ce avec quoi nous écrivons, bibliothèque généralisée qui n’a jamais été (cabinets de curiosités, rôle des faunes et des flores dès l’invention de l’imprimerie, diffusion des estampes) uniquement l’accumulation des récits sous leur différentes formes matérielles de reproduction, mais accumulation aussi des traces matérielles, du caillou ramassé à l’objet de guerre ou l’épave, et cela probablement dès les plus anciens modes de circulation d’objets à valeur symbolique, y compris les monnaies, et qui devient aujourd’hui bibliothèque contributive (comment se gère et se hiérarchise cet univers contributif dans Wikipedia interagit en permanence avec nos pratiques), facilité iconographique (encore bien limitée) mais laissant se développer des failles tout à fait neuves (le vidéo blog appliqué à la vie quotidienne, et hiérarchie des accès sociaux selon qu’ils soient sans éditorialisation ou avec, et quelle éditorialisation). Ainsi, dans l’accroissement des usages web pour accéder à la bibliothèque générale, la plongée dans les livres par l’occurrence plutôt que par la table synoptique, et le paradoxe qu’à rééditorialiser le patrimoine écrit on quitte la figure fixe transmise, l’oeuvre complète en volumes, pour l’impression d’être beaucoup plus près de la table d’écriture – Baudelaire, Kafka, Flaubert nous seraient ainsi beaucoup plus près en les abordant par l’écosystème web. Selon ce même principe, je suis l’auteur d’un seul livre : <a href="spip.php?article2355" class="spip_in">mon site web</a>, mais cela pourrait être partiellement remis en cause lorsque ce concept de publication fait passer le viral avant le sédiment. Ainsi, de façon indissociable, dans cette notion de publication, mais non pas première par rapport à elle, la matérialité (et bien évidemment matérialité ouverte, comme de toujours le livre a été ouvert à ses modes de socialité et d’annotations) de l’objet publié. Ainsi, pratiquant le traitement de texte depuis plus de 25 ans (le révolutionnaire Rédacteur conçu pour Libération par de jeunes Toulousains vers 1988), la rigidité de l’évolution des <a href="spip.php?article2319" class="spip_in">traitements de texte</a> bureautiques (Word en 1993 et Word en 2015 les menus n’ont pas changé), la séparation des outils de publication (InDesign) par rapport à ceux de rédaction (traitements de texte) comme les fonction en sont séparées dans l’édition traditionnelle, là où la photo (passage de Photoshop à Lightroom) ou le cinéma (Première ou Final Cut) ont privilégié le saut vers des outils d’après base de données, comme le sont nos boîtes mails. Nos étudiants écrivent sur des bases de données en ligne (Google Drive) et pour beaucoup n’ont plus de traitements de texte sur leurs ordinateurs : moi-même, n’utilisant plus de traitement de texte du type Word ou Pages, mais écrivant directement sur Ulysses, sans constitution intermédiaire de fichiers de texte, qu’est-ce que mentalement cela change ? Et qu’est-ce que cela change aussi à la transmission, démontage en texte brut UTF-8 (je dois retarder), styles en cascade (feuilles CSS), métadonnées (inventées par les Romains sur le bouchon gravé sur les rouleaux dans leurs étuis de cuir), données non textuelles, images mais aussi liens, e-mails, « extraits » (qui étaient une pratique très codée, voir les fiches de <a href="spip.php?article2335" class="spip_in">Walter Benjamin</a>), et comment ces invariants valent pour le livre imprimé comme ils valent pour l’epub, le webdoc ou le site web, qu’ils valent aussi dans l’outil réseau qui nous en dépossède partiellement (Tumblr, Facebook) pour mieux garder leurs frontières dans leur combat de plateforme à plateforme, mais qui peut aller jusqu’à s’interroger : et si je fais de Final Cut mon logiciel d’écriture, et diffuse l’objet <a href="https://www.youtube.com/channel/UCyhmq2FXs8JxwkFLUgQ2n4w" class="spip_out" rel="external">qui en résulte sur YouTube</a>, est ce que je « n’écris » pas encore ?</p></p>
  447. </article>
  448. </section>
  449. <nav id="jumpto">
  450. <p>
  451. <a href="/david/blog/">Accueil du blog</a> |
  452. <a href="http://www.tierslivre.net/spip/spip.php?article4287">Source originale</a> |
  453. <a href="/david/stream/2019/">Accueil du flux</a>
  454. </p>
  455. </nav>
  456. <footer>
  457. <div>
  458. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  459. <p>
  460. Bonjour/Hi!
  461. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  462. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  463. </p>
  464. <p>
  465. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  466. </p>
  467. <p>
  468. Voici quelques articles choisis :
  469. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  470. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  471. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  472. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  473. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  474. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  475. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  476. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  477. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  478. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  479. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  480. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  481. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  482. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  483. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  484. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  485. </p>
  486. <p>
  487. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  488. </p>
  489. <p>
  490. Je ne traque pas ta navigation mais mon
  491. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  492. conserve des logs d’accès.
  493. </p>
  494. </div>
  495. </footer>
  496. <script type="text/javascript">
  497. ;(_ => {
  498. const jumper = document.getElementById('jumper')
  499. jumper.addEventListener('click', e => {
  500. e.preventDefault()
  501. const anchor = e.target.getAttribute('href')
  502. const targetEl = document.getElementById(anchor.substring(1))
  503. targetEl.scrollIntoView({behavior: 'smooth'})
  504. })
  505. })()
  506. </script>