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.

index.html 28KB

5 years ago
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569
  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>Épisode VIII : Les Derniers Écriveurs (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="https://arthurperret.fr/2018/02/16/episode-viii-les-derniers-ecriveurs/">
  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. Épisode VIII : Les Derniers Écriveurs (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="https://arthurperret.fr/2018/02/16/episode-viii-les-derniers-ecriveurs/">Source originale du contenu</a></h3>
  445. <p>Je suis passé de l’autre côté du miroir. Après une longue carrière d’apprenant, me voilà enseignant, c’est-à-dire que j’apprends à d’autres à apprendre. Et j’apprends des tas de choses au passage.</p>
  446. <p>Il peut y avoir un côté grisant à passer de l’autre côté du miroir. J’ai travaillé un peu dans l’animation après être parti en colo l’été pendant des années et il y a un aspect magique à cela : on revit l’émerveillement que l’on avait éprouvé en étant gamin, tout en ayant la joie de voir des enfants émerveillés à leur tour. Une année, j’ai organisé une course de petits bateaux fabriqués avec des bouchons et des cure-dents dans un bout de rivière qui avait débordé sur un chemin ; non seulement j’étais heureux que ça marche (c’est pas si évident que ça d’équilibrer des bouchons, essayez un peu pour voir) mais il aurait été difficile de dire avec certitude qui s’amusait le plus des enfants ou de moi.</p>
  447. <p>Je ne sais pas si mes étudiants et moi pouvons en dire autant du langage XML et de sa syntaxe.</p>
  448. <p>Enseigner dans le supérieur après avoir été soi-même étudiant peut être assez grisant aussi mais je ne dirais pas que c’est la première chose qui me vienne à l’esprit. C’est d’abord l’apprentissage constamment renouvelé de nouvelles formes de lassitude : jambes de plomb, voix qui flanche, incidents techniques, étudiants dissipés… Durant mes années de fac, je suis souvent sorti épuisé de certaines journées marathon : une matinée de cours magistraux, des révisions inconfortables dans une BU bondée, puis une longue séance de travaux pratiques passée à rédiger du code sur un clavier dur comme du bois tout en me faisant ronger le cerveau par les grésillements d’un néon cassé juste au-dessus de ma tête. Eh bien tout ça, c’est du pipi de chat en comparaison de l’épuisement physique que l’on ressent après avoir donné six heures de cours presque d’affilée.</p>
  449. <p>Heureusement, il y a aussi la découverte ou la confirmation de toutes les sources de satisfaction intrinsèques à ce métier. Par exemple, la personne qui vous dit en début de séance « Je n’y arriverai jamais, je comprends rien… » et qui finit par expliquer les solutions aux autres. Peu importe la fatigue quand on reçoit ce genre de récompense à la fin de la journée.</p>
  450. <p>***</p>
  451. <p>Je suis tombé sur <a href="https://www.franceinter.fr/emissions/grand-bien-vous-fasse/grand-bien-vous-fasse-16-fevrier-2018">une émission de radio</a> où les intervenants débattaient de liberté (vive le service public !) et quelqu’un a soulevé un point qui me concerne désormais au premier chef : cette idée que notre société glisse lentement de l’éducation vers la qualification, en formant de moins en moins des citoyens libres et de plus en plus des travailleurs assujettis à un contrôle toujours plus lourd. L’argument était que l’hyper complexité du monde génère son lot d’angoisses et d’insatisfaction face auxquelles nous préférons renoncer à nos libertés fondamentales pour une liberté de consommation qui nous réconforte. En d’autres termes, la grande université des Lumières attire moins que le grand Apple Store des Champs-Élysées. À l’école obligatoire de Jules Ferry, on préfère désormais l’école 42 de Xavier Niel.</p>
  452. <p>Les cyniques, les dépressifs, les autoritaires, les soumis… beaucoup de monde s’y retrouve mais pas moi. Même si notre tradition scolaire a ses travers (élitisme, culte du diplôme, ségrégation sociale), elle reste à mes yeux l’un de nos biens les plus précieux, précisément parce qu’elle nous pousse à rechercher la liberté. Même si on peut critiquer le poids démesuré des maths et la présence d’enseignements archaïques déconnectés du quotidien, il y a dans l’éducation que j’ai reçue une trame à ne pas détricoter : l’idée que la liberté est une conquête, notamment sur ses propres tendances au conformisme, à l’immobilisme et à la soumission (ce que rappelait judicieusement un auditeur de l’émission, bon lecteur de Spinoza). Et que cette conquête doit souvent se faire à marche forcée ; ce n’est pas pour rien que l’école est obligatoire.</p>
  453. <p>***</p>
  454. <p>J’ai 25 ans. Je suis un <em>digital native</em>. J’ai quatre écrans chez moi (dont zéro télés), je suis abonné à de la <a href="https://beta.lapresselibre.fr">presse en ligne</a> et je travaille mes grilles de jazz avec <a href="https://irealpro.com">iReal Pro</a>. Pourtant, je donne des cours de culture générale durant lesquels ordinateurs et smartphones sont poliment renvoyés à leur mode veille et où des textes sont imprimés, lus à haute voix et annotés à la main.</p>
  455. <p>Les étudiants font un peu la tronche et tous mes collègues disent « Ça leur fait du bien ! » mais ma démarche n’est ni un exercice de sadisme ni un trip rétro.</p>
  456. <p>Le seul objectif pédagogique évalué ici est la capacité de réaliser un commentaire de texte. En concevant le cours, j’avais d’abord imaginé un format composite, avec utilisation d’images et de vidéos, écriture collaborative et QCM pour la progression. Et puis j’ai reposé le crayon et j’ai réalisé que j’étais en train de commettre la même erreur que bien des développeurs de jeu vidéo, en empilant les systèmes et les interactions sans avoir défini la substantifique moelle de mon projet. J’ai donc fait ce qu’on appelle dans le jargon une Fumito Ueda, c’est-à-dire tout reprendre à partir d’une idée unique et la développer de façon profonde en éliminant tout ce qui ne s’y rattache pas. Comme le créateur d’<em>Ico</em>, <em>Shadow of the Colossus</em> et <em>The Last Guardian</em>, il y a des bugs dans mon expérience minimaliste mais je ressens le besoin d’en passer par là pour réaliser quelque chose de véritablement significatif.</p>
  457. <p>Car le but ici n’est pas de confronter une variété de supports et de discours ou de laisser les étudiants gérer leur temps de travail en autonomie. Le but est de commenter des textes. C’est un cours qui tourne autour de l’écrit, des idées et de la réflexion ; c’est un moment consacré exclusivement à la pensée d’un auteur et à la capacité de compréhension du lecteur. C’est une séance de musculation pour le cerveau. <em>In fine,</em> je n’ai besoin de rien d’autre que de calme : je reconquiers du temps de cerveau disponible pour mes auteurs.</p>
  458. <p>En parallèle de cours hyper techniques sur le langage XML et le format EPUB, je refuse donc d’abdiquer les fondamentaux qui consistent à lire, réfléchir et écrire, si possible les trois en même temps. Or il faut adapter l’environnement à chaque nouvelle activité. On est bien d’accord que la littératie numérique ne s’apprend pas au tableau mais sur un écran. En revanche, pour la littératie tout court, la souplesse du papier, du crayon et de la voix reste imbattable en matière de simultanéité. Toute l’énergie que j’aurais pu disperser dans différentes activités et technologies, je l’ai concentrée dans le texte : en préparant soigneusement mon analyse des arguments, la méthodologie transmise aux étudiants et surtout en peaufinant la mise en page. Car si non seulement ils sont coincés devant un bout de papier mais que ce dernier est moche et chiant à annoter, alors c’est doublement l’échec : lorsque tout tourne autour d’un matériau unique, on ne peut pas se permettre que celui-ci pique les yeux et entrave la réflexion.</p>
  459. <p><img data-attachment-id="1588" data-permalink="https://arthurperret.fr/2018/02/16/episode-viii-les-derniers-ecriveurs/merzeau/" data-orig-file="https://arthurperret.files.wordpress.com/2018/02/merzeau.png" data-orig-size="536,755" data-comments-opened="1" data-image-meta="{&quot;aperture&quot;:&quot;0&quot;,&quot;credit&quot;:&quot;&quot;,&quot;camera&quot;:&quot;&quot;,&quot;caption&quot;:&quot;&quot;,&quot;created_timestamp&quot;:&quot;0&quot;,&quot;copyright&quot;:&quot;&quot;,&quot;focal_length&quot;:&quot;0&quot;,&quot;iso&quot;:&quot;0&quot;,&quot;shutter_speed&quot;:&quot;0&quot;,&quot;title&quot;:&quot;&quot;,&quot;orientation&quot;:&quot;0&quot;}" data-image-title="merzeau" data-image-description="" data-medium-file="https://arthurperret.files.wordpress.com/2018/02/merzeau.png?w=213&amp;h=300" data-large-file="https://arthurperret.files.wordpress.com/2018/02/merzeau.png?w=536" class="alignright size-medium wp-image-1588" src="https://arthurperret.files.wordpress.com/2018/02/merzeau.png?w=213&amp;h=300" alt="merzeau" srcset="https://arthurperret.files.wordpress.com/2018/02/merzeau.png?w=213&amp;h=300 213w, https://arthurperret.files.wordpress.com/2018/02/merzeau.png?w=426&amp;h=600 426w, https://arthurperret.files.wordpress.com/2018/02/merzeau.png?w=106&amp;h=150 106w" sizes="(max-width: 213px) 100vw, 213px"/></p>
  460. <p>Voilà ce que ça donne.</p>
  461. <p>J’ai repris et adapté un modèle de document déjà utilisé pour <a href="http://www.enssib.fr/bibliotheque-numerique/index-des-auteurs?selecAuteur=Perret,%20Arthur">mon mémoire</a> : le texte est sur une colonne, avec une marge très large à droite pour les notes, citations et annotations. La mise en page reflète toute la construction du cours, soit la mise en valeur d’un flux d’idées que l’on va progressivement décortiquer, augmenter, critiquer. Simple, mais rudement efficace.</p>
  462. <p>***</p>
  463. <p>Paul Otlet est l’un des premiers à avoir abordé de façon systématique le problème de l’organisation de l’information. Il avait compris avant l’heure que nous sommes prompts à nous décourager face à la masse croissante de connaissances disponibles, préférant renoncer à explorer le monde et nous contentant de jeux d’ombres sur la paroi d’une caverne. Il avait étudié les phénomènes réactionnaires à l’encontre du savoir et perçu les enjeux de la mise à disposition raisonnée de celui-ci. Apaiser et libérer, tel était son humanisme et son ambition.</p>
  464. <p>À ma petite échelle, je poursuis son œuvre. Plutôt que Microsoft, Google et Adobe, je parle d’Internet Archive, Wikipédia ou OpenStreetMap aux étudiants. Je leur demande de retenir les enjeux du partage d’informations et de l’édition numérique plutôt que la liste complète des différences entre EPUB 2 et 3. Je vais chercher des textes en libre accès et j’abuse de l’exception pédagogique au droit d’auteur. Et je leur fais lire du <a href="http://merzeau.net">Louise Merzeau</a>.</p>
  465. <p>Mais surtout, je leur pose des contraintes et les oblige à faire des efforts. J’ai choisi la liberté d’impression plutôt que leur envoyer le texte au format PDF. En apparence, mon cours semble <em>déconnecté</em> ; en réalité, je tente de rétablir des connexions primaires. Connexion entre l’auteur et le lecteur, entre le regard et la main, entre une idée contenue dans le texte et une idée enfouie dans la tête. Entre prof et étudiant par l’intermédiaire du texte, plutôt que par l’intermédiaire d’une fenêtre ouverte sur l’inattention. Entre lecteurs et entre écriveurs. Ça ne marche pas à tous les coups : mon cours n’est pas toujours réussi et il me faut reprendre certains éléments pour les retravailler, modifier mes consignes, revoir l’ordre de certains textes, préciser mes explications, améliorer mon débit et mon phrasé, corriger les éternelles coquilles…</p>
  466. <p>Si apprendre, c’est devenir libre, alors apprendre à d’autres à apprendre, c’est favoriser les conditions d’émergence de cette liberté. Or la philosophie fondamentale pour moi est la même qu’en jazz : il y a une logique dont on se joue, une partition qu’on déjoue, un jeu autour des bords du cadre. Il faut donc d’abord poser ledit cadre. Être enseignant-chercheur, c’est bâtir ce cadre tout en le repoussant de l’intérieur. C’est épuisant. C’est grisant. C’est de l’équilibrisme. Je suis moins certain de cette approche que de ἕν οἶδα ὅτι οὐδὲν οἶδα, <em>cogito ergo sum</em> ou du caractère inévitable de la mort et des impôts. Mais il faut essayer, car le jeu en vaut la chandelle.</p>
  467. </article>
  468. </section>
  469. <nav id="jumpto">
  470. <p>
  471. <a href="/david/blog/">Accueil du blog</a> |
  472. <a href="https://arthurperret.fr/2018/02/16/episode-viii-les-derniers-ecriveurs/">Source originale</a> |
  473. <a href="/david/stream/2019/">Accueil du flux</a>
  474. </p>
  475. </nav>
  476. <footer>
  477. <div>
  478. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  479. <p>
  480. Bonjour/Hi!
  481. 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>
  482. 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>).
  483. </p>
  484. <p>
  485. 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>.
  486. </p>
  487. <p>
  488. Voici quelques articles choisis :
  489. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  490. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  491. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  492. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  493. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  494. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  495. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  496. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  497. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  498. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  499. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  500. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  501. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  502. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  503. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  504. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  505. </p>
  506. <p>
  507. 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>.
  508. </p>
  509. <p>
  510. Je ne traque pas ta navigation mais mon
  511. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  512. conserve des logs d’accès.
  513. </p>
  514. </div>
  515. </footer>
  516. <script type="text/javascript">
  517. ;(_ => {
  518. const jumper = document.getElementById('jumper')
  519. jumper.addEventListener('click', e => {
  520. e.preventDefault()
  521. const anchor = e.target.getAttribute('href')
  522. const targetEl = document.getElementById(anchor.substring(1))
  523. targetEl.scrollIntoView({behavior: 'smooth'})
  524. })
  525. })()
  526. </script>