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

5 vuotta sitten
123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang=fr>
  4. <!-- Has to be within the first 1024 bytes, hence before the <title>
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset=utf-8>
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Decidim, un projet technopolitique (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/open-source-politics/decidim-un-projet-technopolitique-f23290d84a18">
  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. Decidim, un projet technopolitique (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/open-source-politics/decidim-un-projet-technopolitique-f23290d84a18">Source originale du contenu</a></h3>
  445. <p name="c37b" id="c37b" class="graf graf--p graf-after--h3 graf--trailing"><em class="markup--em markup--p-em">Nous avons traduit une partie du manuel d’administration de Decidim (téléchargeable </em><a href="https://decidim.org/pdf/Decidim_AdminManual_EN_0.10.pdf" data-href="https://decidim.org/pdf/Decidim_AdminManual_EN_0.10.pdf" class="markup--anchor markup--p-anchor" rel="noopener nofollow" target="_blank"><em class="markup--em markup--p-em">ici</em></a><em class="markup--em markup--p-em">), qui récapitule de nombreuses informations cruciales à propos de l’histoire de Decidim, de sa construction et de sa philosophie.</em></p>
  446. <p></div></div></section><section name="e62d" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="366c" id="366c" class="graf graf--p graf--leading">Decidim est un projet technopolitique.</p><p name="ead3" id="ead3" class="graf graf--p graf-after--p">Une plateforme numérique de participation citoyenne pour une ville démocratique, construite de manière ouverte et collaborative à l’aide de logiciels libres.</p><p name="df9d" id="df9d" class="graf graf--p graf-after--p">C’est une infrastructure publique qui rentre dans le champ des communs. Publique car elle bénéficie d’une impulsion institutionnelle évidente et issue des communs car le code est ouvert et libre ; en d’autres termes, tout le monde peut le voir, l’utiliser, le copier ou le modifier.</p><p name="500a" id="500a" class="graf graf--p graf-after--p">C’est une plateforme faite pour coordonner des espaces et des processus participatifs, qui vise à étendre et faciliter l’accès à la participation citoyenne, ouvrir de nouveaux espaces de délibération et de collaboration en vue de la co-construction et de la co-production des politiques publiques.</p><p name="0c49" id="0c49" class="graf graf--p graf-after--p graf--trailing">Elle veut également ouvrir de nouveaux espaces de participation et de démocratie directes, entraînant ainsi la désintermédiation et la coopération entre citoyens, institutions et organisations de la société civile.</p></div></div></section><section name="31c2" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="bdf9" id="bdf9" class="graf graf--h3 graf--leading">1. Principes</h3><p name="5966" id="5966" class="graf graf--p graf-after--h3">La plateforme Decidim a été construite et développée sur la base d’une série de principes qui promeuvent l’exploration et l’innovation démocratique à l’ère du numérique aussi bien que les possibilités d’amélioration, d’ouverture et de développement de politiques de participation citoyenne ainsi que de formes démocratiques de gouvernement à plusieurs niveaux (avec une attention particulière à l’échelon municipal). Ces principes sont listés ci-dessous :</p><h4 name="04ba" id="04ba" class="graf graf--h4 graf-after--p">Hybridation technopolitique</h4><p name="b339" id="b339" class="graf graf--p graf-after--h4">C’est la clé pour éviter ce que nous appelons le “réductionnisme numérique” (Calleja-López, 2017), une variante du technocentrisme qui met l’accent principalement ou exclusivement sur les infrastructures et aspects numériques des nouvelles formes de participations. Ceci sans s’intéresser aux importantes innovations survenant dans les pratiques, les processus et la culture participative par l’hybridation de la participation numérique et physique. Une approche hybride tente de connecter les espaces et activités se déroulant sur decidim.barcelona avec les espaces et activités se déroulant en physique, et considère les multiples variantes qui seraient envisageables dans le but d’encourager de nouvelles formes d’action collective.</p><h4 name="6ca2" id="6ca2" class="graf graf--h4 graf-after--p">Participation améliorée et multi-modale</h4><p name="fbc9" id="fbc9" class="graf graf--p graf-after--h4">Le résultat du “réductionnisme numérique” est l’encouragement de la “participation du clic” (Calleja-López, 2017), dans laquelle la participation devient un phénomène circonscrit d’abord et surtout par son aspect digital, et plus spécifiquement par ses aspects pratiques, de vitesse et de non-interférence avec d’autres acteurs et d’autres idées. Il y a ainsi le besoin de faire émerger des formes d’interaction enrichies entre individus sur decidim.barcelona, ainsi qu’entre les individus, les contenus de la plateforme et les processus participatifs hybrides au sens large. Ceci implique, d’un côté, d’enrichir les processus participatifs avec des fonctionnalités qui vont plus loin que le simple vote (visualisation d’informations et de données, délibération etc). D’un autre côté, cela implique de construire des processus hybrides (par exemple des réunions physiques connectées à la plateforme), qui font de la participation une démarche multimodale, améliorée et exhaustive, plutôt que réduite et simplement “cliquable”.</p><h4 name="132f" id="132f" class="graf graf--h4 graf-after--p">Transparence et traçabilité</h4><p name="5d5e" id="5d5e" class="graf graf--p graf-after--h4">A l’exception des données qui peuvent affecter la vie privée des utilisateurs, les détails de l’activité des processus participatifs sur un média numérique doivent être entièrement traçables et publics si l’on veut atteindre un nouveau stade de transparence de la participation. La transparence de la participation et de la traçabilité sont des conditions nécessaires pour maintenir la confiance en ces nouveaux processus.</p><h4 name="aeae" id="aeae" class="graf graf--h4 graf-after--p">Ouverture / publication</h4><p name="0a75" id="0a75" class="graf graf--p graf-after--h4">Les principes de publication et d’ouverture font d’abord référence au code et aux fonctionnalités de la plateforme, ensuite aux données et contenus des processus et enfin, plus généralement, aux processus eux-mêmes. Ceci implique, dans les deux premiers cas, l’utilisation des standards et licences libres les plus exigeants (par exemple <a href="https://fr.wikipedia.org/wiki/GNU_Affero_General_Public_License" data-href="https://fr.wikipedia.org/wiki/GNU_Affero_General_Public_License" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Affero GPLv3</a> pour le code, <a href="https://fr.wikipedia.org/wiki/Licence_Creative_Commons" data-href="https://fr.wikipedia.org/wiki/Licence_Creative_Commons" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">CreativeCommons</a> pour le contenu, <a href="https://fr.wikipedia.org/wiki/Open_Database_License" data-href="https://fr.wikipedia.org/wiki/Open_Database_License" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Open Access Database Licences</a> pour les données). Decidim doit être une plateforme libre dont tout le monde peut voir, modifier et réutiliser le code sur lequel elle est basée. Dans le cas des processus, ces principes sont reliés à d’autres mentionnés dans cette liste, comme la transparence et l’accessibilité, et ont pour objectif de rendre ces processus aussi participatifs et réutilisables que possible à différentes échelles.</p><figure name="f728" id="f728" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="0*e8CUrI2enDg0ioyc." data-width="6000" data-height="4000" data-action="zoom" data-action-value="0*e8CUrI2enDg0ioyc."><img src="https://cdn-images-1.medium.com/freeze/max/60/0*e8CUrI2enDg0ioyc.?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/0*e8CUrI2enDg0ioyc."><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/0*e8CUrI2enDg0ioyc."></noscript></div></div><figcaption class="imageCaption">Photo by <a href="https://unsplash.com/@kslupski?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com/@kslupski?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-creator nofollow noopener" target="_blank">Chris Slupski</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-source nofollow noopener" target="_blank">Unsplash</a></figcaption></figure><h4 name="1daa" id="1daa" class="graf graf--h4 graf-after--figure">Participation transversale</h4><p name="d2df" id="d2df" class="graf graf--p graf-after--h4">Prenant appui sur plusieurs des clés du succès d’initiatives récentes telles que le 15M [le mouvement des Indignés débuté le 15 mai 2011], le déploiement et les stratégies de communication de decidim.barcelona doivent être dirigées vers la recherche de légitimité d’abord, puis la participation, en se tournant vers le plus de groupes sociaux et politiques possible.</p><h4 name="8793" id="8793" class="graf graf--h4 graf-after--p">Connaissance, technoscience et intelligence collective</h4><p name="c313" id="c313" class="graf graf--p graf-after--h4">Les nouvelles formes de participation doivent pouvoir bénéficier des possibilités offertes à la fois par les connaissances des citoyens et la science des données (tirées à l’occasion des processus participatifs eux-mêmes) pour améliorer la prise de décision et la participation. Une participation informée et experte donc, capable de catalyser la connaissance sociale.</p><h4 name="d57f" id="d57f" class="graf graf--h4 graf-after--p">Participation collective en réseau</h4><p name="4488" id="4488" class="graf graf--p graf-after--h4">Il existe plusieurs défis centraux dès lors que l’on vise l’amélioration de la participation reposant notamment sur le numérique. L’un d’entre eux réside dans la capacité des processus participatifs à favoriser le collectif face aux tendances atomisantes actuelles, qui résultent d’ailleurs souvent de la participation virtuelle, lointaine et déconnectée. Cela implique l’utilisation de fonctionnalités qui encouragent l’interaction entre utilisateurs dans des processus collectifs, que ce soit en physique ou sur une plateforme.</p><h4 name="ee54" id="ee54" class="graf graf--h4 graf-after--p">Orientation public-communs, réappropriation et participation récurrente</h4><p name="560a" id="560a" class="graf graf--p graf-after--h4">Les nouvelles infrastructures numériques de la démocratie doivent être un espace appartenant aux, issu des, et pour les communs. Si l’on veut promouvoir la démocratie, les infrastructures elles-mêmes doivent être foncièrement démocratiques. Cela implique de valoriser un modèle innovant, alternatif par rapport à la privatisation de la sphère publique. Dans ce but, Decidim doit être une infrastructure numérique de construction, propriété et utilisation publique-communs. En d’autres termes, elle doit correspondre à ce que nous définissons comme des “communs technopolitiques” : une technologie ouverte à la participation de tout le monde de par sa construction et son management, gérée par la distribution et avec des modèles de production collective et de partage libre. Comparée aux plateformes fermées et exclusives contrôlées par des grandes entreprises, Decidim est une infrastructure démocratique pour la démocratie.</p><h4 name="9bfb" id="9bfb" class="graf graf--h4 graf-after--p">Accessibilité et formation technopolitique</h4><p name="b399" id="b399" class="graf graf--p graf-after--h4">Elle doit également être un service public, c’est pourquoi il est essentiel de s’assurer que les citoyens ont l’accès et la formation suffisante pour prendre part et exploiter tout le potentiel de la plateforme. Promouvoir son utilisation par les populations locales ainsi que par des groupes sociaux exclus constitue un défi crucial. Decidim.barcelona et les processus participatifs numériques doivent être régis par des standards d’accessibilité plus exigeants (par exemple ceux du Web Accessibility Initiative, WAI).</p><h4 name="d2f1" id="d2f1" class="graf graf--h4 graf-after--p">Indépendance, émancipation et affiliation</h4><p name="cd9f" id="cd9f" class="graf graf--p graf-after--h4 graf--trailing">Si les mouvements sociaux ont démontré quelque chose ces dernières années, c’est le rôle central joué par l’action collective auto-organisée dans le démarrage et l’accompagnement de processus de changement. Dans cette mesure, decidim.barcelona et les processus utilisant la plateforme doivent encourager l’indépendance sociale et l’auto-organisation. De plus, l’affiliation institutionnelle doit être un prérequis de la majorité des processus de la plateforme, étant donné que c’est un élément clé de sa légitimité opérationnelle sur le moyen et long terme. En d’autres termes, les processus d’indépendance sociale aussi bien que bottom-up devraient être affiliés aux institutions publiques.</p></div></div></section><section name="ac4b" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="0c19" id="0c19" class="graf graf--h3 graf--leading">2. Bref rappel historique</h3><p name="f631" id="f631" class="graf graf--p graf-after--h3">Pendant sa présentation publique en septembre 2015, <a href="https://decide.madrid.es/" data-href="https://decide.madrid.es/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Decide Madrid</a>, une plateforme de participation numérique lancée par le Conseil municipal de Madrid et basé sur le logiciel <a href="http://consulproject.org/en/" data-href="http://consulproject.org/en/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Consul</a>, commença à expérimenter plusieurs démarches participatives tels que les débats publics et les propositions de citoyens. Lancé par la mairie de Barcelone, le projet <a href="https://www.decidim.barcelona/" data-href="https://www.decidim.barcelona/" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Decidim Barcelona</a>, qui était aussi basé sur Consul avec d’importantes modifications et adapté à de nouveaux besoins, fut présenté en février 2016. Son objectif originel était de coordonner le processus participatif de rédaction du <a href="https://www.decidim.barcelona/processes/pam" data-href="https://www.decidim.barcelona/processes/pam" class="markup--anchor markup--p-anchor" rel="nofollow noopener" target="_blank">Plan d’Action Municipal</a> (PAM) ainsi que d’autres qui naîtraient dans la ville dans le futur.</p><figure name="8839" id="8839" class="graf graf--figure graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 350px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.7%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="0*3eRnYoc5PhQIji7Z." data-width="5760" data-height="3840" data-action="zoom" data-action-value="0*3eRnYoc5PhQIji7Z."><img src="https://cdn-images-1.medium.com/freeze/max/60/0*3eRnYoc5PhQIji7Z.?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/0*3eRnYoc5PhQIji7Z."><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/0*3eRnYoc5PhQIji7Z."></noscript></div></div><figcaption class="imageCaption">Photo by <a href="https://unsplash.com/@aquachara?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com/@aquachara?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-creator nofollow noopener" target="_blank">AquaChara</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-source nofollow noopener" target="_blank">Unsplash</a></figcaption></figure><p name="c54d" id="c54d" class="graf graf--p graf-after--figure">Environ 25 000 personnes s’inscrivirent en deux mois, 10 680 propositions furent formulées, 410 réunions publiques se déroulèrent et plus de 160 000 votes furent récoltés. De ce fait, un espace de collaboration et de délibération fut ouvert entre les citoyens, les organisations de la société civile et le Conseil municipal de Barcelone.</p><p name="1d61" id="1d61" class="graf graf--p graf-after--p">De nombreuses municipalités exprimèrent leur envie de mettre en oeuvre des processus similaires, tirant profit de la technologie utilisée, étant donné son succès et le fait qu’elle soit libre et réutilisable. Plus spécifiquement : le conseil municipal de La Corogne, à travers sa plateforme de budget participatif A Porta Abierta ; celui d’Oviedo, avec Consulta Oviedo et son espace dédié aux propositions des citoyens ; et enfin le conseil municipal de Valence avec decidimVLC, pour la préparation des budgets participatifs. Il y eut aussi de nombreux exemples d’autorités locales et d’autres institutions qui montrèrent un grand intérêt pour le projet decidim.barcelona et sa mise en oeuvre, comme les conseils municipaux de L’Hospitalet, Badalona, ​​Terrassa et Gavà ainsi que le Conseil provincial de Barcelone et le Consortium Localret.</p><p name="e9aa" id="e9aa" class="graf graf--p graf-after--p">Cette série de changements et d’adaptations entraîna un nouveau besoin technologique nécessitant l’adaptation d’une technologie devant assurer l’indépendance, la diversité des autorités locales et la durabilité à moyen-terme de la plateforme. Fut alors déterminée une stratégie de développement décentralisée (modulable) et évolutive, ce qui rendit le projet entier capable de flexibilité et d’une croissance sur le long terme, mais aussi de générer un développement, un design et une communauté de soutiens appuyés au niveau municipal mais également (plus important encore) intercommunal.</p><p name="0721" id="0721" class="graf graf--p graf-after--p graf--trailing">Cela amena le conseil municipal de Barcelone à reconsidérer sérieusement l’architecture de la plateforme et à engager une réécriture complète du logiciel basée sur les principes et les besoins mentionnés ci-dessus. De cette réécriture naquit le projet Decidim, un framework démocratique participatif, générique, basé sur Ruby on Rails, que n’importe quel groupe, organisation ou institution pourrait utiliser avec un minimum de connaissances techniques.</p></div></div></section><section name="9c8f" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="6dd3" id="6dd3" class="graf graf--h3 graf--leading">3. Développement ouvert et logiciel libre</h3><p name="7984" id="7984" class="graf graf--p graf-after--h3">Le projet de plateforme Decidim a été développé avec des logiciels libres (que ce soit lors de sa phase initiale avec Consul ou après la réécriture complète du code) et tout son développement a été effectué de manière ouverte, le rendant totalement traçable et suivi depuis le début.</p><p name="5eb4" id="5eb4" class="graf graf--p graf-after--p">Sa création grâce au logiciel libre signifie que le code source de la plateforme est sous licence AGPL v3 (GNU Affero General Public Licence), ce qui implique que le code doit intégrer la possibilité d’être consulté, copié, modifié et réutilisé et que la même licence est appliquée à tout travail ou produit qui en serait dérivé. C’est une des licences qui garantissent le plus de liberté et qui mettent en pratique le copyleft. Dans cette mesure, il est parfaitement logique pour les autorités publiques de s’engager clairement en faveur de ce type de logiciel, puisque c’est par ce type de licence que l’on peut recevoir un “rendement social” sur les investissement publics.</p><figure name="603b" id="603b" class="graf graf--figure graf--startsWithDoubleQuote graf--layoutOutsetLeft graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 525px; max-height: 295px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 56.2%;"></div><div class="progressiveMedia js-progressiveMedia graf-image" data-image-id="0*BSvTvPqnNpO3MLIg." data-width="5163" data-height="2904" data-action="zoom" data-action-value="0*BSvTvPqnNpO3MLIg."><img src="https://cdn-images-1.medium.com/freeze/max/60/0*BSvTvPqnNpO3MLIg.?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/0*BSvTvPqnNpO3MLIg."><noscript class="js-progressiveMedia-inner"><img class="progressiveMedia-noscript js-progressiveMedia-inner" src="https://cdn-images-1.medium.com/max/1200/0*BSvTvPqnNpO3MLIg."></noscript></div></div><figcaption class="imageCaption">“A bright red and blue neon reads “open”” by <a href="https://unsplash.com/@stairhopper?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com/@stairhopper?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-creator nofollow noopener" target="_blank">Alex Holyoake</a> on <a href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" data-href="https://unsplash.com?utm_source=medium&amp;utm_medium=referral" class="markup--anchor markup--figure-anchor" rel="photo-source nofollow noopener" target="_blank">Unsplash</a></figcaption></figure><p name="7fe0" id="7fe0" class="graf graf--p graf-after--figure">Accédez par ce <a href="https://github.com/AjuntamentdeBarcelona/decidim/blob/master/LICENSE-AGPLv3.txt" data-href="https://github.com/AjuntamentdeBarcelona/decidim/blob/master/LICENSE-AGPLv3.txt" class="markup--anchor markup--p-anchor" rel="noopener nofollow" target="_blank">lien</a> au fichier texte de la licence.</p><p name="2b78" id="2b78" class="graf graf--p graf-after--p">Le copyleft correspond à une large variété de licences qui peuvent être appliquées à des créations logicielles, artistiques et autres. Les soutiens du copyleft voient le copyright comme un moyen de réduire le droit individuel à produire et distribuer des copies d’un travail. Une licence copyleft, de fait, utilise la législation du copyright pour assurer que tous ceux qui reçoivent une copie ou un produit dérivé peuvent utiliser, modifier et même distribuer à la fois le produit originel et les versions dérivées. Dans un sens strictement non-légal, le copyleft est ainsi l’opposé du copyright (Wikipédia, 2017).</p><p name="1bd2" id="1bd2" class="graf graf--p graf-after--p">Le fait que le logiciel ait été développé de manière ouverte signifie que le processus entier de développement est transparent et accessible. En d’autres termes, chacun peut voir, depuis le début du développement du logiciel, chaque modification, chaque contribution, chaque développeur impliqué, etc. De ce fait, la transparence est en train de devenir un principe fondamental de la participation citoyenne mais également pour le développement de logiciels.</p><p name="66ed" id="66ed" class="graf graf--p graf-after--p graf--trailing">Tout ceci a été effectué sur une plateforme construite pour la collaboration ouverte dans le cadre du développement de logiciels : GitHub. Cette plateforme permet l’accès aux codes et le contrôle du développement du logiciel. GitHub est voué à accueillir des répertoires Git ; il en existe des alternatives, par exemple GitLab.</p></div></div></section><section name="5de8" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="2f6a" id="2f6a" class="graf graf--h3 graf--leading">4. Decidim Barcelona</h3><p name="0e47" id="0e47" class="graf graf--p graf-after--h3">Decidim Barcelona est la première instance de Decidim et demeure l’origine du projet. Decidim Barcelona a vu le jour grâce au besoin du conseil municipal de Barcelone de construire un processus de participation citoyenne soutenu par la technologie pour le Plan d’Action Municipal (PAM), avec trois objectifs principaux : construire un processus transparent et traçable, augmenter la participation grâce à la plateforme numérique et intégrer la participation numérique et physique.</p><p name="1678" id="1678" class="graf graf--p graf-after--p graf--trailing">Ce processus a agrégé plus de 10 000 propositions et plus de 160 000 votes favorables, avec un résultat final de 71% des propositions citoyennes acceptées et incluses dans le PAM, au sein de plus de 1600 initiatives. Decidim était à l’origine construit exclusivement pour ce processus, mais le besoin de l’étendre à d’autres processus participatifs a été rapidement exprimé. C’est à ce moment-là que l’idée du Decidim actuel est née : une plateforme participative qui rend possible autant de processus participatifs que l’on souhaite, divisés en étapes et avec la possibilité d’activer plusieurs fonctionnalités à chaque étape. Une porte a volontairement été laissée ouverte au développement de nouvelles fonctionnalités qui pourraient être rapidement intégrées aux processus (enquêtes, rédaction collaborative de textes, suivi de résultats, etc), ainsi qu’à l’intégration de nouveaux espaces participatifs tels que les initiatives citoyennes et les conseils de participation. Decidim Barcelona accueille au moment de la rédaction de ce document (mai 2018) 12 processus participatifs et compte déjà 28 400 participants, plus de 12 000 propositions, 5340 résultats, 930 réunions physiques et 189 000 votes favorables. Les bons résultats de la plateforme à Barcelone ont entrainé sa dissémination dans plusieurs autres municipalités, telles que L’Hospitalet de Llobregat, Sabadell, Badalona, Terrassa, Gavà, Sant Cugat, Mataró et Vilanova i la Geltrú.</p></div></div></section><section name="c535" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="a456" id="a456" class="graf graf--h3 graf--leading">5. Les communes de Decidim</h3><p name="65cf" id="65cf" class="graf graf--p graf-after--h3">Decidim est un logiciel qui permet d’ouvrir autant de plateformes que nécessaire, avec une seule installation.</p><p name="3761" id="3761" class="graf graf--p graf-after--p graf--trailing">Il y a de nombreux exemples de telles architectures (en anglais <em class="markup--em markup--p-em">multitenant architecture</em>) dans le monde logiciel, par exemple le logiciel libre Wordpress pour les projets de blog. C’est particulièrement utile pour les institutions qui souhaitent fournir Decidim en tant que service tiers. Le cas du Conseil Provincial est particulièrement important puisque Decidim peut être utilisée avec une seule installation — c’est-à-dire qu’elle est maintenue, mise à jour et hébergée par une seule entité — par autant d’autorités locales que l’on souhaite. On réduit ainsi les coûts d’installation et de maintenance, en plus de fournir des solutions technologiques d’amélioration de la participation citoyenne à des institutions de taille réduite ou moyenne qui n’auraient sinon pas eu pareil accès à de telles ressources.</p></div></p>
  447. </article>
  448. </section>
  449. <nav id="jumpto">
  450. <p>
  451. <a href="/david/blog/">Accueil du blog</a> |
  452. <a href="https://medium.com/open-source-politics/decidim-un-projet-technopolitique-f23290d84a18">Source originale</a> |
  453. <a href="/david/stream/2019/">Accueil du flux</a>
  454. </p>
  455. </nav>
  456. <footer>
  457. <div>
  458. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  459. <p>
  460. Bonjour/Hi!
  461. Je suis <a href="/david/" title="Profil public">David&nbsp;Larlet</a>, je vis actuellement à Montréal et j’alimente cet espace depuis 15 ans. <br>
  462. Si tu as apprécié cette lecture, n’hésite pas à poursuivre ton exploration. Par exemple via les <a href="/david/blog/" title="Expériences bienveillantes">réflexions bimestrielles</a>, la <a href="/david/stream/2019/" title="Pensées (dés)articulées">veille hebdomadaire</a> ou en t’abonnant au <a href="/david/log/" title="S’abonner aux publications via RSS">flux RSS</a> (<a href="/david/blog/2019/flux-rss/" title="Tiens c’est quoi un flux RSS ?">so 2005</a>).
  463. </p>
  464. <p>
  465. Je m’intéresse à la place que je peux avoir dans ce monde. En tant qu’humain, en tant que membre d’une famille et en tant qu’associé d’une coopérative. De temps en temps, je fais aussi des <a href="https://github.com/davidbgk" title="Principalement sur Github mais aussi ailleurs">trucs techniques</a>. Et encore plus rarement, <a href="/david/talks/" title="En ce moment je laisse plutôt la place aux autres">j’en parle</a>.
  466. </p>
  467. <p>
  468. Voici quelques articles choisis :
  469. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  470. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  471. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  472. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  473. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  474. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  475. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  476. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  477. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  478. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  479. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  480. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  481. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  482. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  483. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  484. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  485. </p>
  486. <p>
  487. On peut <a href="mailto:david%40larlet.fr" title="Envoyer un courriel">échanger par courriel</a>. Si éventuellement tu souhaites que l’on travaille ensemble, tu devrais commencer par consulter le <a href="http://larlet.com">profil dédié à mon activité professionnelle</a> et/ou contacter directement <a href="http://scopyleft.fr/">scopyleft</a>, la <abbr title="Société coopérative et participative">SCOP</abbr> dont je fais partie depuis six ans. Je recommande au préalable de lire <a href="/david/blog/2018/cout-site/" title="Attention ce qui va suivre peut vous choquer">combien coûte un site</a> et pourquoi je suis plutôt favorable à une <a href="/david/pro/devis/" title="Discutons-en !">non-demande de devis</a>.
  488. </p>
  489. <p>
  490. Je ne traque pas ta navigation mais mon
  491. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  492. conserve des logs d’accès.
  493. </p>
  494. </div>
  495. </footer>
  496. <script type="text/javascript">
  497. ;(_ => {
  498. const jumper = document.getElementById('jumper')
  499. jumper.addEventListener('click', e => {
  500. e.preventDefault()
  501. const anchor = e.target.getAttribute('href')
  502. const targetEl = document.getElementById(anchor.substring(1))
  503. targetEl.scrollIntoView({behavior: 'smooth'})
  504. })
  505. })()
  506. </script>