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 39KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533
  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>Dessine-moi un commun numérique (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://medium.com/@matti_sg_fr/dessine-moi-un-commun-num%C3%A9rique-8d921451be31">
  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. Dessine-moi un commun numérique (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://medium.com/@matti_sg_fr/dessine-moi-un-commun-num%C3%A9rique-8d921451be31">Source originale du contenu</a></h3>
  445. <section name="5bbf" class="section section--body section--first"><div class="section-content"><div class="section-inner sectionLayout--insetColumn">
  446. <p name="5f8d" id="5f8d" class="graf graf--p graf-after--h3">Les « communs numériques » sont à la mode. Le terme s’invite dans le discours politique et administratif, de feu le « <a href="https://www.nextinpact.com/news/98142-contre-communs-argumentaire-fleur-pellerin-adresse-a-deputes.htm" data-href="https://www.nextinpact.com/news/98142-contre-communs-argumentaire-fleur-pellerin-adresse-a-deputes.htm" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">domaine commun</a> » de la Loi pour une République Numérique à l’<a href="http://www.henriverdier.com/2016/04/pour-une-economie-politique-des-communs.html" data-href="http://www.henriverdier.com/2016/04/pour-une-economie-politique-des-communs.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">analyse par l’économie politique</a> du DINSIC en passant par les <a href="https://www.laquadrature.net/fr/propositions" data-href="https://www.laquadrature.net/fr/propositions" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">propositions</a> de la Quadrature. Tant mieux, car l’enjeu est de taille : derrière ce terme, il s’agit de <strong class="markup--strong markup--p-strong">garantir un usage libre, juste et pérenne des outils logiciels qui contribuent au bien commun</strong>.<br>Mais comme à chaque fois qu’un mot devient porteur, le risque est grand de voir ses mésusages dépasser le changement qu’il pourrait faire advenir… et de trouver des portes repeintes mais fermées là où on espérait en ouvrir.</p></div><div class="section-inner sectionLayout--fullWidth"><figure name="ce1b" id="ce1b" class="graf graf--figure graf--layoutFillWidth graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 29.2%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*7DnatBw3kURyuyv_TFBFgg.jpeg" data-width="3888" data-height="1137" data-is-featured="true"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*7DnatBw3kURyuyv_TFBFgg.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/2000/1*7DnatBw3kURyuyv_TFBFgg.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*7DnatBw3kURyuyv_TFBFgg.jpeg"></noscript></div></div><figcaption class="imageCaption">« Poussez. Si cela ne marche pas, tirez. Si cela ne marche toujours pas c’est parce que nous sommes fermés. » Porte. Castellar, Alpes-Maritimes, France, 2017.</figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><h4 name="31a1" id="31a1" class="graf graf--h4 graf-after--figure">Le problème</h4><p name="7d3e" id="7d3e" class="graf graf--p graf-after--h4">Dans cette diffusion du terme se cache en effet aussi un risque : la dilution des concepts qui y sont associés. Car le vocabulaire des communs est (inutilement) complexe, fragmenté, et souvent mal compris.</p><figure name="5386" id="5386" class="graf graf--figure graf--iframe graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 37%;"></div><div class="progressiveMedia js-progressiveMedia"><img src="https://i.embed.ly/1/display/resize?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCzP0joGXEAAi8ZI.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07&amp;width=40" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" data-src="/media/53c74bebc97a99bb3fff78cb74ba5670?postId=8d921451be31" data-media-id="53c74bebc97a99bb3fff78cb74ba5670" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCzP0joGXEAAi8ZI.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" class="progressiveMedia-iframe js-progressiveMedia-iframe" allowfullscreen frameborder="0"></IFRAME></div><noscript class="js-progressiveMedia-inner"><div class="iframeContainer"><IFRAME data-width="500" data-height="185" width="500" height="185" src="/media/53c74bebc97a99bb3fff78cb74ba5670?postId=8d921451be31" data-media-id="53c74bebc97a99bb3fff78cb74ba5670" data-thumbnail="https://i.embed.ly/1/image?url=https%3A%2F%2Fpbs.twimg.com%2Fmedia%2FCzP0joGXEAAi8ZI.jpg%3Alarge&amp;key=a19fcc184b9711e1b4764040d3dc5c07" allowfullscreen frameborder="0"></IFRAME></div></noscript></div></div><figcaption class="imageCaption">Ça se dit en un tweet, ça met un an à expliquer.</figcaption></figure><p name="d28a" id="d28a" class="graf graf--p graf-after--figure">Pour avoir travaillé à construire et répandre des communs numériques depuis l’intérieur de l’administration (notamment <a href="http://openfisca.org/fr/" data-href="http://openfisca.org/fr/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">OpenFisca</a>), j’ai pu voir à quel point la définition que chaque acteur en a peut varier. D’un vague équivalent de « logiciel libre » à l’idée d’une agora permanente de personnes qui auraient décidément beaucoup de temps à perdre, l’espace conceptuel recouvert par le terme est énorme… au point de le mettre en danger.</p><p name="8410" id="8410" class="graf graf--p graf-after--p">Le risque est celui d’acteurs qui se féliciteront, lors de la simple ouverture du code source d’un logiciel, d’avoir créé « un nouveau commun numérique » (si vous ne voyez pas le problème, continuez à lire). Il suffira de deux ou trois cas de ce type, qui ne manqueront pas d’être dénoncés comme des escroqueries, pour réduire ce fameux espace conceptuel de tout à rien.</p><blockquote name="b855" id="b855" class="graf graf--pullquote graf-after--p">De l’espoir d’un changement à son regret, il n’y a qu’un faux pas.</blockquote><p name="b141" id="b141" class="graf graf--p graf-after--pullquote">Le pire, c’est que l’erreur n’aura probablement pas été mal intentionnée ! Simplement mal informée. Malheureusement, entre des erreurs involontaires et du <em class="markup--em markup--p-em">commonwashing</em>, il nous faudra ensuite des années avant de trouver un nouveau terme à diffuser pour répandre l’idée d’une gestion démocratique de ressources mises en partage entre (co-)producteurs et (co-)utilisateurs.</p></div><div class="section-inner sectionLayout--outsetColumn"><figure name="ac24" id="ac24" class="graf graf--figure graf--layoutOutsetCenter graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 1000px; max-height: 484px;">
  447. <div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.4%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*zYMs1r29cENQnegHOt45ig.jpeg" data-width="3264" data-height="1581" data-action="zoom" data-action-value="1*zYMs1r29cENQnegHOt45ig.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*zYMs1r29cENQnegHOt45ig.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/2000/1*zYMs1r29cENQnegHOt45ig.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/2000/1*zYMs1r29cENQnegHOt45ig.jpeg"></noscript></div></div><figcaption class="imageCaption">« Si ça marche, ça, c’est génial ! ». Note manuscrite à Futur en Seine 2014. Paris, France, 2014.</figcaption></figure></div><div class="section-inner sectionLayout--insetColumn"><h4 name="0e31" id="0e31" class="graf graf--h4 graf-after--figure">La solution idéale mais compliquée</h4><p name="ba01" id="ba01" class="graf graf--p graf-after--h4">Je crois que ce qui manque en premier lieu pour encourager et clarifier, ce sont des exemples concrets des communs numériques. Il n’y a qu’en les pointant du doigt qu’on pourra dire « <em class="markup--em markup--p-em">ça</em>, c’en est un » (et donc, pas <em class="markup--em markup--p-em">ça</em>).</p><p name="e17e" id="e17e" class="graf graf--p graf-after--p">Dans les discours actuels, on continue à ne parler que de Wikipédia, ou au mieux d’OpenStreetMap ou de la <a href="https://adresse.data.gouv.fr" data-href="https://adresse.data.gouv.fr" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Base Adresse Nationale</a>. Des biens communs informationnels, certes, mais dont il faut d’autres occurrences. Et surtout, il est temps de démontrer la viabilité de <em class="markup--em markup--p-em">services numériques communs</em>.</p><blockquote name="4272" id="4272" class="graf graf--pullquote graf-after--p">Les services numériques sont des systèmes socio-techniques rendant un service à des humains et comprenant des interactions avec un logiciel.</blockquote><p name="0bcd" id="0bcd" class="graf graf--p graf-after--pullquote">C’est sur cette même définition de base que j’avais introduit la notion de « service public numérique » (ce qui est fait chez <a href="https://beta.gouv.fr" data-href="https://beta.gouv.fr" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">beta.gouv.fr</a>). La déclinaison où l’on remplace « public » par « commun » implique un changement de gouvernance, depuis la gestion par un acteur public maître vers une communauté (qui peut inclure des acteurs publics). Et c’est bien celle-là qui manque le plus !</p><h4 name="a4c8" id="a4c8" class="graf graf--h4 graf-after--p">Une solution intermédiaire</h4><p name="c1d1" id="c1d1" class="graf graf--p graf-after--h4">Pour faciliter l’émergence des services communs numériques, et surtout pour éviter que le concept ne s’écroule sous sa propre popularité avant même qu’il n’ait fini de se déployer, je crois qu’il nous faudrait <strong class="markup--strong markup--p-strong">une référence qui explique de manière claire le vocabulaire et les enjeux</strong>, et vers laquelle on puisse donner des liens. Une référence qui comprenne aussi des exemples et des bonnes pratiques. Et qui soit éditable par la communauté, bien sûr ! Malheureusement, je n’ai pas réussi à trouver une telle ressource en ligne.<br>Alors, après avoir lu la recherche que je pouvais trouver, j’ai décidé de créer et d’ouvrir cette ressource.</p><h4 name="d2e4" id="d2e4" class="graf graf--h4 graf-after--p">Vous trouverez donc un <strong class="markup--strong markup--h4-strong">livre blanc sur les communs numériques sur</strong> <a href="https://communs.mattischneider.fr" data-href="https://communs.mattischneider.fr" class="markup--anchor markup--h4-anchor" rel="nofollow noopener" target="_blank">communs.mattischneider.fr</a>.</h4><p name="7106" id="7106" class="graf graf--p graf-after--h4">Son contenu est fourni sous licence <a href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr" data-href="https://creativecommons.org/licenses/by-sa/4.0/deed.fr" class="markup--anchor markup--p-anchor" rel="noopener nofollow" target="_blank">CC-BY-SA</a> et est <a href="https://github.com/MattiSG/livre-blanc-communs-numeriques" data-href="https://github.com/MattiSG/livre-blanc-communs-numeriques" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">éditable sur GitHub</a>.</p><figure name="bf15" id="bf15" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 438px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.5%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*zo08GN5TEV7PCiUYHuLgAA.jpeg" data-width="3379" data-height="2112" data-action="zoom" data-action-value="1*zo08GN5TEV7PCiUYHuLgAA.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*zo08GN5TEV7PCiUYHuLgAA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1600/1*zo08GN5TEV7PCiUYHuLgAA.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1600/1*zo08GN5TEV7PCiUYHuLgAA.jpeg"></noscript></div></div><figcaption class="imageCaption">Quitte à écrire un petit livre qui appartienne au peuple, j’ai bien pensé à le faire rouge plutôt que blanc, mais c’était déjà pris. Shanghaï, République populaire de Chine, 2017.</figcaption></figure><h3 name="168f" id="168f" class="graf graf--h3 graf-after--figure">Ce que vous trouverez dans le livre blanc « Construire des communs numériques »</h3><h4 name="2c7f" id="2c7f" class="graf graf--h4 graf-after--h3">1. Concepts</h4><p name="296e" id="296e" class="graf graf--p graf-after--h4">Avant de dérouler le raisonnement, j’éclaircis le <a href="https://communs.mattischneider.fr/1-concepts_utilises/1-communs.html" data-href="https://communs.mattischneider.fr/1-concepts_utilises/1-communs.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">vocabulaire et les concepts</a> nécessaires à sa bonne compréhension, et fournis des <a href="https://communs.mattischneider.fr/6-annexes/1-metaphores.html" data-href="https://communs.mattischneider.fr/6-annexes/1-metaphores.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">métaphores</a> dans le monde physique pour rendre les enjeux plus compréhensibles.</p><h4 name="0478" id="0478" class="graf graf--h4 graf-after--p">2. Constituants</h4><p name="3d51" id="3d51" class="graf graf--p graf-after--h4">J’énonce ensuite les différents <a href="https://communs.mattischneider.fr/2-constituants" data-href="https://communs.mattischneider.fr/2-constituants" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">types de ressources</a> qui doivent nécessairement être mises en partage pour qu’un service numérique puisse être administré en commun, au-delà de l’évidence du code source. Pour chacun de ces types, je justifie la nécessité de la mise en partage, fournis <em class="markup--em markup--p-em">le</em> commun associé, et suggère <em class="markup--em markup--p-em">un</em> commun qui le met en œuvre (ce n’est pas clair ? Il faudra probablement lire le chapitre précédent 😉).</p><h4 name="b6c8" id="b6c8" class="graf graf--h4 graf-after--p">3. Gouvernance</h4><p name="ff4a" id="ff4a" class="graf graf--p graf-after--h4">Les communs n’existent que lorsqu’ils sont effectifs, et une charte théorique ne saurait être suffisante pour s’en rapprocher. C’est pourquoi, après une description des enjeux, je suggère des <a href="https://communs.mattischneider.fr/3-gouvernance/" data-href="https://communs.mattischneider.fr/3-gouvernance/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">règles de gouvernance</a> qui permettent d’actionner des pouvoirs sans ralentir l’évolution du service.</p><h4 name="1ed3" id="1ed3" class="graf graf--h4 graf-after--p">4. Acteurs et statuts</h4><p name="9108" id="9108" class="graf graf--p graf-after--h4">Au-delà des règles théoriques de gouvernance et des rôles nécessaires à l’application du commun se pose la question concrète des acteurs qui vont endosser ces rôles. Or, certains statuts juridiques sont plus adaptés que d’autres à la prise en charge de certains rôles. Cette partie suggère donc les <a href="https://communs.mattischneider.fr/5-acteurs_et_statuts/" data-href="https://communs.mattischneider.fr/5-acteurs_et_statuts/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">statuts de droit français</a> qui semblent les plus adaptés pour chacune des missions explicitées dans la partie Gouvernance.</p><blockquote name="1125" id="1125" class="graf graf--blockquote graf-after--p">C’est la partie la moins détaillée à ce jour, car les retours d’expérience sont peu nombreux et difficile à explorer en détails. Encore une fois, vos retours seront cruciaux pour compléter et améliorer ce manuel !</blockquote><h4 name="62ec" id="62ec" class="graf graf--h4 graf-after--blockquote">5. Références</h4><p name="6115" id="6115" class="graf graf--p graf-after--h4">Les sources qui m’ont mené à la rédaction de ce contenu, et donc normalement tout ce qu’il faut pour le remettre en question ou le compléter !</p><h4 name="c496" id="c496" class="graf graf--h4 graf-after--p">6. Annexes</h4><p name="0286" id="0286" class="graf graf--p graf-after--h4">Des <a href="https://communs.mattischneider.fr/6-annexes/2-exemples/" data-href="https://communs.mattischneider.fr/6-annexes/2-exemples/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">exemples</a> qui prennent la grille d’analyse décrite par le document, et l’appliquent à des cas réels pour en vérifier et en démontrer l’utilité. Et oui, il y a bien sûr une <a href="https://communs.mattischneider.fr/6-annexes/2-exemples/1-wikipedia.html" data-href="https://communs.mattischneider.fr/6-annexes/2-exemples/1-wikipedia.html" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">analyse de Wikipédia</a> 😉 J’ai découvert beaucoup des rouages qui font que l’encyclopédie communautaire fonctionne en la réalisant !</p><h3 name="1f11" id="1f11" class="graf graf--h3 graf-after--p">Espoirs</h3><p name="5258" id="5258" class="graf graf--p graf-after--h3">J’espère que « <a href="https://communs.mattischneider.fr" data-href="https://communs.mattischneider.fr" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Construire des communs numériques</a> » vous sera utile. Et j’espère que vous l’enrichirez de vos propres expériences au fil de la lecture !</p><p name="9202" id="9202" class="graf graf--p graf-after--p">Le premier public visé sont celles et ceux qui ont l’intention et l’opportunité d’organiser des communs, pour les aider à confirmer leurs intuitions, à communiquer avec un vocabulaire unifié et référençable, et à convaincre leurs pairs. J’entends par là que, si vous avez déjà une expérience de gestion de communs, vous aurez probablement des pratiques plus spécifiques et plus adaptées à votre contexte. Les recommandations sont des bonnes pratiques qui permettent d’éviter les écueils les plus fréquents ; il ne s’agit pas du seul moyen de faire émerger des communs.</p><p name="6bba" id="6bba" class="graf graf--p graf-after--p graf--trailing">Si ce livre blanc vous est utile, aidez la cause qu’il sert : diffusez-le, citez-le, complétez-le, et renforçons la place et la solidité conceptuelle des communs numériques… avant que des cabinets de consultants le fassent à notre place !<br>Si ce n’est pas le cas, tentons de corriger le tir ensemble : <a href="https://github.com/MattiSG/livre-blanc-communs-numeriques" data-href="https://github.com/MattiSG/livre-blanc-communs-numeriques" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">proposez une amélioration</a>, <a href="https://github.com/MattiSG/livre-blanc-communs-numeriques/issues/new" data-href="https://github.com/MattiSG/livre-blanc-communs-numeriques/issues/new" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">décrivez vos besoins</a>, ou <a href="mailto:gh@mattischneider.fr" data-href="mailto:gh@mattischneider.fr" class="markup--anchor markup--p-anchor" target="_blank">écrivez-moi</a> directement 🙂</p></div></div></section>
  448. <section name="0a1f" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><blockquote name="bc89" id="bc89" class="graf graf--blockquote graf--leading graf--trailing">Cet article vous a plu ? Vous pourriez également être intéressé·e par ma contribution au Conseil d’État, <a href="https://medium.com/@matti_sg_fr/construire-des-plateformes-num%C3%A9riques-publiques-et-communes-comme-alternative-%C3%A0-l-uberisation-ea4f6163495d" data-href="https://medium.com/@matti_sg_fr/construire-des-plateformes-num%C3%A9riques-publiques-et-communes-comme-alternative-%C3%A0-l-uberisation-ea4f6163495d" class="markup--anchor markup--blockquote-anchor" target="_blank">Construire des plateformes numériques publiques et communes comme alternative à l’« uberisation »</a>.</blockquote></div></div></section>
  449. <section name="4aa1" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><figure name="b220" id="b220" class="graf graf--figure graf--layoutOutsetLeft graf--leading"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 517px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 98.4%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="1*IhGQ56_02gy1vNetTqvADA.jpeg" data-width="1161" data-height="1143" data-action="zoom" data-action-value="1*IhGQ56_02gy1vNetTqvADA.jpeg"><img src="https://cdn-images-1.medium.com/freeze/max/60/1*IhGQ56_02gy1vNetTqvADA.jpeg?q=20" crossorigin="anonymous" class="progressiveMedia-thumbnail js-progressiveMedia-thumbnail"><canvas class="progressiveMedia-canvas js-progressiveMedia-canvas"></canvas><img class="progressiveMedia-image js-progressiveMedia-image" data-src="https://cdn-images-1.medium.com/max/1200/1*IhGQ56_02gy1vNetTqvADA.jpeg"><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/1*IhGQ56_02gy1vNetTqvADA.jpeg"></noscript></div></div></figure><h4 name="992a" id="992a" class="graf graf--h4 graf-after--figure graf--leading">Remerciements</h4><p name="cff5" id="cff5" class="graf graf--p graf-after--h4 graf--trailing"><em class="markup--em markup--p-em">Je n’ai pas fait ce travail seul. Il est le fruit de nombreuses lectures, expériences, et d’intenses discussions. Je remercie chaleureusement toutes les personnes qui ont donné de leur temps pour le relire, l’améliorer, et qui m’ont donné l’opportunité de le présenter au sein de la DINSIC : Laurent, Henri, Mauko, David, l’autre Laurent, Laure, Philippe, Sandra, Thomas, et Vincent « tough love » B.<br>Et bien sûr, à l’équipe OpenFisca pour sa patience et confiance ! </em>💝</p></div></div></section>
  450. </article>
  451. </section>
  452. <nav id="jumpto">
  453. <p>
  454. <a href="/david/blog/">Accueil du blog</a> |
  455. <a href="https://medium.com/@matti_sg_fr/dessine-moi-un-commun-num%C3%A9rique-8d921451be31">Source originale</a> |
  456. <a href="/david/stream/2019/">Accueil du flux</a>
  457. </p>
  458. </nav>
  459. <footer>
  460. <div>
  461. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  462. <p>
  463. Bonjour/Hi!
  464. 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>
  465. 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>).
  466. </p>
  467. <p>
  468. 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>.
  469. </p>
  470. <p>
  471. Voici quelques articles choisis :
  472. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  473. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  474. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  475. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  476. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  477. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  478. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  479. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  480. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  481. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  482. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  483. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  484. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  485. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  486. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  487. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  488. </p>
  489. <p>
  490. 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>.
  491. </p>
  492. <p>
  493. Je ne traque pas ta navigation mais mon
  494. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  495. conserve des logs d’accès.
  496. </p>
  497. </div>
  498. </footer>
  499. <script type="text/javascript">
  500. ;(_ => {
  501. const jumper = document.getElementById('jumper')
  502. jumper.addEventListener('click', e => {
  503. e.preventDefault()
  504. const anchor = e.target.getAttribute('href')
  505. const targetEl = document.getElementById(anchor.substring(1))
  506. targetEl.scrollIntoView({behavior: 'smooth'})
  507. })
  508. })()
  509. </script>