A place to cache linked articles (think custom and personal wayback machine)
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。

index.html 30KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586
  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>Le professeur et le processeur. La modération est une ponctuation. (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://www.affordance.info/mon_weblog/2019/02/la-moderation-est-une-ponctuation.html">
  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. Le professeur et le processeur. La modération est une ponctuation. (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://www.affordance.info/mon_weblog/2019/02/la-moderation-est-une-ponctuation.html">Source originale du contenu</a></h3>
  445. <p>Les révélations et les scandales autour des politiques de modération des grandes plateformes se multiplient. </p>
  446. <h2>Sisyphe et les Danaïdes.</h2>
  447. <p>Dans une vidéo devenue virale <a href="https://www.francetvinfo.fr/internet/reseaux-sociaux/on-vous-explique-l-affaire-des-reseaux-pedophiles-qui-agite-youtube_3206817.html" rel="noopener" target="_blank">un homme dénonce les commentaires et la structuration de réseaux pédophiles qui accompagnent nombre de vidéos d'enfants postées sur Youtube</a>. Il dénonce également les marques associées à ces vidéos dans le cadre de la régie publicitaire de la firme (mode d'action des <a href="https://sites.google.com/view/slpng-giants-fr/" rel="noopener" target="_blank">Sleeping Giants</a>). Et déclenche une suppression massive de ces contenus, un verrouillage tout aussi massif des commentaires sous certains vidéos. Nombre d'annonceurs publicitaires choisissent également de se retirer. </p>
  448. <p>Une <a href="https://www.theverge.com/2019/2/25/18229714/cognizant-facebook-content-moderator-interviews-trauma-working-conditions-arizona" rel="noopener" target="_blank">enquête édifiante de The Verge</a> vient une nouvelle fois pointer les conditions de travail d'extrême violence psychologique de ces modérateurs qui bossent (notamment) pour Facebook sur le territoire américain. Elle s'ajoute aux travaux universitaires dénonçant l'exploitation des travailleurs du clic qu'ils soient ou non liés à des questions de modération (dont <a href="http://www.seuil.com/ouvrage/en-attendant-les-robots-antonio-a-casilli/9782021401882" rel="noopener" target="_blank">ceux pionniers d'Antonio Casilli</a>), ainsi qu'au documentaire là encore édifiant sur les conditions de travail de modérateurs aux Philippines : "<a href="http://www.thecleaners-film.de/" rel="noopener" target="_blank">The Cleaners</a>". </p>
  449. <p>Dans le Financial Times on apprend que <a href="https://www.ft.com/content/1c2aab18-3337-11e9-bd3a-8b2a211d90d5" rel="noopener" target="_blank">Facebook rejoint Amazon et Google dans un programme ayant pour vocation de doper encore davantage la capacité des processeurs informatiques associés à de l'intelligence artificielle</a>, notamment pour répondre aux immenses ressources que nécessite la modération en temps-réel de contenus vidéos.</p>
  450. <p>La pression des États et de l'opinion est également de plus en plus pressante pour la suppression quasi-immédiate de contenus relevant de discours de haine. J'ai moi-même beaucoup traité et relayé ces sujets en essayant de proposer sinon des solutions, au moins un cadre d'analyse permettant d'en faire émerger quelques-unes (<a href="https://affordance.typepad.com/mon_weblog/2018/10/lutter-contre-la-haine-sur-le-web.html" rel="noopener" target="_blank">voir notamment dans cet article</a>) : par exemple en s'attaquant à la fois au modèle économique et à la nature spéculative de ces discours de haine, ainsi qu'aux architectures techniques toxiques qui les entretiennent et les visibilisent. J'ai aussi signifié plusieurs fois qu'il était des robinets que les plateformes pouvaient aisément et définitivement fermer si elles en avaient <em>réellement</em> envie, <a href="https://www.affordance.info/mon_weblog/2019/01/jack-dorsey-appliquez-vos-propres-regles.html" rel="noopener" target="_blank">et ce en appliquant simplement leurs propres règles</a> ...</p>
  451. <p>Mais demeure l'impression d'un immense tonneau des Danaïdes que quelques-uns s'échinent à vider à la petite cuillère lors même qu'il est demeure posé sous les flots d'une inextinguible cascade.</p>
  452. <p>Concernant la modération on a donc deux logiques, se combinant parfois : celle d'une modération humaine (coûteuse, lente, éprouvante psychologiquement, et souvent délocalisée dans des pays où le coût la main d'oeuvre est indexé sur celui de la misère), et une modération algorithmique faite de "deep learning" et autres routines d'intelligence artificielle.</p>
  453. <p>Deux logiques aussi. Une modération "professorale" (c'est à dire reposant sur une approche "culturelle") et une autre "processorale" (reposant sur la capacité de processeurs à traiter d'immenses quantités de données et surtout à y appliquer des règles décisionnelles déterministes <a href="https://affordance.typepad.com/mon_weblog/2018/09/algorithmes-frankenstein.html" rel="noopener" target="_blank">quoi qu'en dise le discours marketing débilitant qui entoure la notion de "l'apprentissage"</a>).</p>
  454. <p>Le <em>professeur</em> et le <em>processeur</em>.</p>
  455. <h2>Et si on mangeait les enfants ?</h2>
  456. <p>L'exemple est tant connu qu'il peut paraître lassant mais le seul ajout d'une virgule dans la phrase "<em>Et si on mangeait les enfants ?</em>" peut en changer radicalement le sens. "<em>Et si on mangeait, les enfants ?</em>"</p>
  457. <p>A la modération aussi il faut une séquence de ponctuation. Qui soit une ponctuation culturelle (pour la modération humaine) ou contextuelle (pour la modération algorithmique). Je vous explique et essaie de clarifier.</p>
  458. <p><strong>La ponctuation culturelle nécessaire à la modération "professorale"</strong>, ne peut en aucun cas être sous-traitée à des pays ou des sociétés culturellement différentes. Le documentaire "<a href="http://www.thecleaners-film.de/" rel="noopener" target="_blank">The Cleaners</a>" en était une illustration édifiante où l'on voyait, aux Philippines, des modératrices confrontés à des contenus pornographiques mais qui ignoraient tout de l'existence même de simples sextoys. Les mêmes, hommes ou femmes, qui ensuite devaient modérer la photographie d'une peinture représentant Donald Trump nu (avec un micro pénis) "simplement" comme celle d'un homme nu : en ignorant qu'il s'agissait du président des Etats-Unis, ils ne pouvaient pas interpréter la dimension politique qui allait faire du trouble de la modération une forme claire de censure d'une oeuvre d'art. </p>
  459. <p><a class="asset-img-link" href="https://www.affordance.info/.a/6a00d8341c622e53ef022ad39f4ffa200c-pi"><img alt="Donald-trum-nu" class="asset asset-image at-xid-6a00d8341c622e53ef022ad39f4ffa200c img-responsive" src="https://www.affordance.info/.a/6a00d8341c622e53ef022ad39f4ffa200c-500wi" title="Donald-trum-nu"/></a></p>
  460. <p>La "virgule" de la phrase  est donc ici celle d'une culture politique et artistique manquante. Sans cette double culture, l'image ci-dessus est lue comme la phrase "Et si on mangeait les enfants ?" Mais si l'on dispose de cette double culture, alors les choses reviennent dans un ordre relatif et l'on peut y lire "Et si on mangeait, les enfants ?" </p>
  461. <p><strong>Quant à la modération contextuelle nécessaire à la modération "processorale"</strong>,  telle qu'opérée par les plateformes, elle nécessite là aussi une prise en compte du contexte global de l'élément à modérer, à la fois en publication et en réception (du doubles point de vue donc de l'émetteur et du récepteur), mais elle doit dans le même temps jouer sur des routines d'inférences peu propices à distinguer ce qui relève de l'exception ou de la règle. Et tout cela est fait avec une granularité sans cesse mouvante à l'échelle de pics attentionnels que les plateformes structurent elles-mêmes et dont elles sont, surtout, les premières bénéficiaires.</p>
  462. <p>Pour revenir sur l'exemple cité au début de cet article, si l'on prend ces vidéos, non sexualisées, d'enfants filmés en train de danser et postées sur Youtube par un membre de leur famille, il est, hélas, bien sûr possible que ces vidéos puissent recevoir des commentaires explicitement pédophiles ou implicitement suspects (par exemple si dans l'historique de navigation cette consultation est précédée de la consultation de vidéos à caractère pornographique avéré). Mais il est de la même manière possible que ce que l'algorithme considérera comme un commentaire "simplement" tendancieux ne le soit pas, tout comme l'enchaînement d'une séquence de visionnage ne peut pas suffire à garantir et à prouver une "intentionnalité". Le risque d'erreur, de "faux-positif" est bien trop élevé, et les implications judiciaires et morales bien trop grandes pour accepter de faire de ce risque une norme. Voilà d'ailleurs pourquoi passé un certain seuil dans l'opinion, les plateformes préfèrent, au moins temporairement, suspendre ou supprimer ou bloquer totalement et les vidéos, et les commentaires, et les comptes associés. La rythmicité, la fréquence, la volumétrie de l'ensemble des visionnages et de l'apparat discursif qu'ils agglutinent, et la possibilité de les voir à chaque fois dupliqués dans ces contextes et des environnements différents accompagnés de tout ou partie de ce même apparat discursif, tout cela fait qu'un processeur pas plus qu'un professeur n'est infaillible dans la place qu'il donnera à la virgule et donc au sens général du contenu à modérer.   </p>
  463. <h2>Ponctuation de la séquence des faits. </h2>
  464. <p>Au moment où, après la seconde guerre mondiale, du côté de Palo Alto, s'inventaient l'essentiel des théories modernes de la communication, le troisième des cinq axiomes réunis par Paul Watzlawick, Janet Helmick Beavin et Don Jackson dans  leur ouvrage "Une logique de la communication" est celui dit de la '"ponctuation de la séquence des faits". L'idée est que la nature d'une relation dépend de la ponctuation (rythme, enchaînement, postures) des séquences de communication entre les différents partenaires. Ou plus précisément (je souligne) : </p>
  465. <blockquote>
  466. <p><em>" (...) dans une longue séquence d’échange, les organismes intéressés, surtout s’il s’agit d’êtres humains, ponctueront de fait la séquence de manière que l’un ou l’autre paraîtra avoir l’initiative, ou la prééminence, ou un statut de dépendance, ou autres choses du même genre. Ce qui veut dire qu’ils établiront entre eux des modèles d’échange (sur lesquels ils peuvent être ou non d’accord), et ces modèles seront en réalité des règles régissant l’échange des rôles dans le renforcement. (...)</em></p>
  467. <p><em>C’est en effet une évidence indiscutable que la ponctuation structure les faits de comportement, et qu’elle est donc essentielle à la poursuite d’une interaction.<strong> Du point de vue culturel, nous avons en commun beaucoup de conventions de ponctuation. Elles ne sont ni plus ni moins exactes que d’autres manières de ponctuer les mêmes faits, mais elles servent à structurer des séquences d’interaction à la fois banales et importantes.</strong> Nous disons par exemple que dans un groupe un individu se comporte en « leader », et un autre individu en « suiveur », mais à la réflexion, il est difficile de dire qui commence, et ce que deviendrait l’un sans l’autre."</em></p>
  468. </blockquote>
  469. <p>Voilà pourquoi pour paraphraser Watzlawick, Beavin et Jackson, la nature (et la légitimité) d'une modération dépend d'abord de la ponctuation des séquences de communication entre les partenaires. Des séquences dont la multiplicité, la complexité et la densité ne peuvent être ponctuées que par la vitesse d'un processeur et des algorithmes qu'il entraîne. Et des séquences qui malgré cela ne demeurent interprétables et lisibles à chacune de leur instanciation qu'à la lueur d'une clé de lecture avant tout culturelle. Ou pour le (re)dire encore différemment : dans le rapport que nous avons avec la modération comme barrière protectrice ou censure castratrice entre nous et le monde, il y a toute la logique et toute la dynamique de ponctuation d'une "séquence" dans laquelle ce sont avant tout des conventions culturelles qui sont en jeu. Et qui sont l'enjeu.  </p>
  470. <p>Il n'y a donc pas à choisir entre l'approche <em>professorale</em> et l'approche <em>processorale</em>. Il semble par contre évident que ce n'est que culturellement qu'un algorithme, un processeur, une intelligence artificielle ou tout autre type de puissance calculatoire pourra prétendre à une efficacité significative, parce que son efficacité sera toujours située culturellement. </p>
  471. <h2>La culture sans modération.</h2>
  472. <p>Cherchant une métaphore ou une image suffisamment claire pour terminer cet article, il me revenait l'histoire que j'ai souvent raconté à mes étudiant(e)s.</p>
  473. <p>Il y a plus de 15 ans de cela, quand Facebook n'existait pas encore et que Google commençait à révolutionner nos usages, lorsque quelqu'un tapait le mot "nazi" sur la version allemande du moteur (www.google.de) c'étaient des sites d'historiens de la Shoah ou ceux de mémoriaux traitant de la question juive et de l'holocause qui apparaissaient en première page de résultat du moteur de recherche. Mais la même requête, le même mot, les mêmes quatre lettres, "nazi", saisies cette fois sur la version américaine du moteur (www.google.com) et c'était le site du parti nazi américain qui ressortait en premier. </p>
  474. <p>Aucun modérateur humain n'était pourtant intervenu. Ni même aucun calcul algorithmique voulant initier ou singer une quelconque forme de modération. Simplement, culturellement, historiquement, l'algorithme du moteur ne faisait que révéler la topologie, le tracé culturel d'une notion, d'une idée, d'un mot. Et c'était là tout son génie et toute son utilité sociale. Cela ne lui prenait, à l'époque déjà, que quelques secondes pour le faire. Mais à chacune de nos requêtes, depuis chacun de nos pays et dans chacune de nos langues, le moteur et son algorithme rendaient compte d'une culture située dans un temps (relativement) long. </p>
  475. <p>Et puis il y a aussi cette histoire que l'on raconte et dont chacun retiendra la version ponctuée qui lui plaira.</p>
  476. <p>L'algorithme dit : "le modérateur humain est idiot." <br/>"L'algorithme, dit le modérateur humain, est idiot." </p>
  477. </article>
  478. </section>
  479. <nav id="jumpto">
  480. <p>
  481. <a href="/david/blog/">Accueil du blog</a> |
  482. <a href="https://www.affordance.info/mon_weblog/2019/02/la-moderation-est-une-ponctuation.html">Source originale</a> |
  483. <a href="/david/stream/2019/">Accueil du flux</a>
  484. </p>
  485. </nav>
  486. <footer>
  487. <div>
  488. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  489. <p>
  490. Bonjour/Hi!
  491. 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>
  492. 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>).
  493. </p>
  494. <p>
  495. 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>.
  496. </p>
  497. <p>
  498. Voici quelques articles choisis :
  499. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  500. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  501. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  502. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  503. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  504. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  505. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  506. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  507. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  508. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  509. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  510. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  511. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  512. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  513. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  514. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  515. </p>
  516. <p>
  517. 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>.
  518. </p>
  519. <p>
  520. Je ne traque pas ta navigation mais mon
  521. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  522. conserve des logs d’accès.
  523. </p>
  524. </div>
  525. </footer>
  526. <script type="text/javascript">
  527. ;(_ => {
  528. const jumper = document.getElementById('jumper')
  529. jumper.addEventListener('click', e => {
  530. e.preventDefault()
  531. const anchor = e.target.getAttribute('href')
  532. const targetEl = document.getElementById(anchor.substring(1))
  533. targetEl.scrollIntoView({behavior: 'smooth'})
  534. })
  535. })()
  536. </script>