davidbgk
/
larlet-fr-david-cache
Watch 1
Star 0
Fork 0
Code Releases 0 Activity
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.
394 Commits
1 Branch
Branch: master
Branches Tags
${ item.name }
Create branch ${ searchTerm }
from 'master'
${ noResults }
larlet-fr-david-cache/cache/e865c9cf09f4611cfd00d1c7e61.../index.html

index.html 40KB
Raw Permalink Blame History

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634 
  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>Déframasoftisons Internet ! (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. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://framablog.org/2019/09/24/deframasoftisons-internet/">

  32. 

  33. <style>

  34. /* http://meyerweb.com/eric/tools/css/reset/ */

  35. html, body, div, span,

  36. h1, h2, h3, h4, h5, h6, p, blockquote, pre,

  37. a, abbr, address, big, cite, code,

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

  40. dl, dt, dd, ol, ul, li,

  41. fieldset, form, label, legend,

  42. table, caption, tbody, tfoot, thead, tr, th, td,

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

  45. menu, nav, output, ruby, section, summary,

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

  54. /* HTML5 display-role reset for older browsers */

  55. article, aside, details, figcaption, figure,

  56. footer, header, hgroup, menu, nav, section { display: block; }

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

  69. /* http://practicaltypography.com/equity.html */

  70. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */

  71. /* https://www.filamentgroup.com/lab/js-web-fonts.html */

  72. @font-face {

  73.   font-family: 'EquityTextB';

  74.   src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),

  75.        url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

  82.   src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),

  83.        url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

  90.   src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),

  91.        url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

  99.   src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),

  100.        url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

  107. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */

  108. body {

  109.   /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */

  110.   font-family: "EquityTextB", Palatino, serif;

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

  114.   -moz-osx-font-smoothing: grayscale;

  115.   -webkit-font-smoothing: subpixel-antialiased;

  116.   text-rendering: optimizeLegibility;

  117.   font-variant-ligatures: common-ligatures contextual;

  118.   font-feature-settings: "kern", "liga", "clig", "calt";

  119. }

  120. pre, code, kbd, samp, var, tt {

  121.   font-family: 'TriplicateT4c', monospace;

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

  139.     border-bottom: 1vh solid #2d7474;

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

  149.   border-top: 1vh solid #2d7474;

  150.   border-bottom: .2vh dotted #2d7474;

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

  171.       padding: 1rem 1.2rem .6rem 1.2rem;

  172.       border-radius: 0 0 6% 6%;

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

  180.   border-top: .2vh solid #2d7474;

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

  205.   text-decoration-skip-ink: auto;

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

  216.     border-top: .2vh dotted #2d7474;

  217.     margin: -6rem auto 1rem auto;

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

  235.   border-left: .5vw solid #2d7474;

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

  250.   border-top: .2vh solid #2d7474;

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

  261.     border: .5vw solid #323a45;

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

  273.   border-bottom: .2vh solid #07486c;

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

  280. /* https://fvsch.com/code/css-locks/ */

  281. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  282.   font-size: 1rem;

  283.   line-height: calc( 1.5em + 0.2 * 1rem );

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

  287.   line-height: calc( 1.2em + 0.2 * 1rem );

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

  291.   line-height: calc( 1.3em + 0.2 * 1rem );

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

  295.   line-height: calc( 1.4em + 0.2 * 1rem );

  296. }

  297. @media (min-width: 20em) {

  298.   /* The (100vw - 20rem) / (50 - 20) part

  299.      resolves to 0-1rem, depending on the

  300.      viewport width (between 20em and 50em). */

  301.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  302.     font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );

  303.     line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );

  304.     margin-left: 0;

  305.   }

  306.   h1 {

  307.     font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  308.     line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );

  309.   }

  310.   h2 {

  311.     font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  312.     line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );

  313.   }

  314.   h3 {

  315.     font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );

  316.     line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );

  317.   }

  318. }

  319. @media (min-width: 50em) {

  320.   /* The right part of the addition *must* be a

  321.      rem value. In this example we *could* change

  322.      the whole declaration to font-size:2.5rem,

  323.      but if our baseline value was not expressed

  324.      in rem we would have to use calc. */

  325.   p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {

  326.     font-size: calc( 1rem + .6 * 1rem );

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

  333.     font-size: calc( 1.9rem + 1.5 * 1rem );

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

  337.     font-size: calc( 1.5rem + 1.5 * 1rem );

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

  341.     font-size: calc( 1.35rem + 1.5 * 1rem );

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

  360.   body { font-size: 100%; }

  361.   a:after { content: " (" attr(href) ")"; }

  362.   a, a:link, a:visited, a:after {

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

  369.   abbr[title] { border-bottom: 0; }

  370.   abbr[title]:after { content: " (" attr(title) ")"; }

  371.   img { page-break-inside: avoid; }

  372.   @page { margin: 2cm .5cm; }

  373.   h1, h2, h3 { page-break-after: avoid; }

  374.   p3 { orphans: 3; widows: 3; }

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

  385. @media (min-width: 20em) {

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

  390. @media (min-width: 50em) {

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

  398. @media (min-width: 20em) {

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

  403. @media (min-width: 50em) {

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

  443.     -webkit-shape-outside: circle();

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

  448.     border-left: 1px solid #f1c40f;

  449.     border-top: 1px solid #f1c40f;

  450.     border-right: 5px solid #f1c40f;

  451.     border-bottom: 5px solid #f1c40f;

  452.   }

  453. </style>

  454. 

  455. <h1>

  456.   <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>

  457.   Déframasoftisons Internet ! (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://framablog.org/2019/09/24/deframasoftisons-internet/">Source originale du contenu</a></h3>

  463.     <p>Ne hurlez pas tout de suite, mais nous annonçons ici la fermeture progressive, sur plusieurs années, de certains services de « <a href="https://degooglisons-internet.org">Dégooglisons Internet</a> ». Nous voulons le faire en bonne intelligence, afin de concentrer nos énergies vers plus de décentralisation et d’efficacité pour les actrices et les acteurs de la contribution.</p>

  464. 

  465. <p class="well">Cet article est long. Notre réflexion, complexe, ne peut pas se réduire à un tweet. Nous vous recommandons de lire cet article dans son intégralité, mais nous avons essayé d’en extraire les points principaux, que vous retrouverez en bas de cette page.</p>

  466. 

  467. <h2>Qu’est-ce qui se passe ?</h2>

  468. 

  469. <p>On le répète à l’envi : Framasoft est, et souhaite rester, une association à taille humaine, un groupe de passionné·es qui expérimentent pour tenter de changer le monde (un octet à la fois). Il y a 9 salarié⋅es, dans une association qui compte une trentaine de membres depuis plusieurs années. Des membres qui, chaque année, maintiennent des actions auxquelles contribuent 700 à 800 bénévoles (pour une heure ou tout au long de l’année), des actions financées par plus de <a href="https://soutenir.framasoft.org/fr/stats">4 000 donatrices et donateurs</a> (merci &lt;3), et qui bénéficient à des centaines de milliers de personnes chaque mois…</p>

  470. 

  471. <p>Or Framasoft, c’est aussi <a href="https://framablog.org">des dizaines d’articles blogs</a>, une centaine de <a href="https://wiki.framasoft.org/evenements">rencontres, conférences et ateliers</a> par an, une <a href="https://framabook.org">maison d’édition de livres libres</a>, de nombreuses <a href="https://wiki.framasoft.org/speakabout">réponses aux médias</a> qui nous sollicitent, l’animation d’<a href="https://framalibre.org">un annuaire collaboratif de solutions libres</a>, deux gros logiciels en développement (<a href="https://joinpeertube.org">PeerTube</a> et <a href="https://joinmobilizon.org">Mobilizon</a>), et des contributions/partenariats tellement cools et nombreux qu’il va nous falloir trois mois pour tout vous présenter… (rendez-vous en octobre !)</p>

  472. 

  473. <figure id="attachment_18017" class="thumbnail wp-caption aligncenter"><a href="https://framablog.org/wp-content/uploads/2019/09/Framasoft-fan-art.png"><img class="size-full wp-image-18017" src="https://framablog.org/wp-content/uploads/2019/09/Framasoft-fan-art.png" alt="" srcset="https://framablog.org/wp-content/uploads/2019/09/Framasoft-fan-art.png 1280w, https://framablog.org/wp-content/uploads/2019/09/Framasoft-fan-art-300x128.png 300w, https://framablog.org/wp-content/uploads/2019/09/Framasoft-fan-art-768x328.png 768w, https://framablog.org/wp-content/uploads/2019/09/Framasoft-fan-art-1024x438.png 1024w" sizes="(max-width: 1280px) 100vw, 1280px"/></a><figcaption class="caption wp-caption-text">Des parodies complices créées par l’ami JCFrog</figcaption></figure>

  474. 

  475. <p>Une chose est sûre, à Framasoft : nous tenons à notre modèle associatif, nous ne voulons pas croître en mode « la start up qui veut se faire plus grosse que Google ». Si nous voulons garder notre identité sans nous épuiser à la tâche (et là aussi, on en reparlera dans les semaines qui viennent, mais on s’est parfois surmené·es), et si nous voulons continuer d’expérimenter de nouvelles choses, <strong>il faut que nous réduisions la charge qui pèse sur nos épaules</strong>.</p>

  476. 

  477. <h2>Pourquoi fermer certains services ?</h2>

  478. 

  479. <p>Dès le départ, <a href="https://framablog.org/2014/10/07/degooglisons-internet/">Dégooglisons Internet a été annoncé</a> comme une expérimentation, une démonstration, qui devait s’achever fin 2017. Nous n’avions pas prévu que parler de la centralisation du web (qui n’intéressait que les passionné·es, en 2014) susciterait une telle adhésion, et donc autant d’attentes. En clair : <a href="https://degooglisons-internet.org/">Dégooglisons Internet</a>, et l’ensemble des services qui y sont proposés, n’a pas été pensé pour centraliser autant d’utilisateurs et d’utilisatrices, ni pour les enfermer dans des framachins qui dureraient à l’infini (et au delà).</p>

  480. 

  481. <p>Si on exclut les services « pour la vanne » (mais on vous aime, <a href="https://troll.framasoft.org/#">Framatroll</a> et <a href="https://sense.framasoft.org/">Framadsense</a> !), il y a 38 services sur les serveurs de <a href="https://degooglisons-internet.org/">Dégooglisons Internet</a>. C’est beaucoup. Vraiment beaucoup. Cela signifie 35 logiciels différents (chacun avec son rythme de mise à jour, ses communautés qui s’activent ou s’épuisent, etc.), écrits dans 11 langages (et 5 types de bases de données), répartis sur 83 serveurs et machines virtuelles, qu’il faut surveiller, mettre à jour, régler, sauvegarder, déboguer, promouvoir, intégrer à notre support… bref qu’il faut bichonner, comme on nettoie et prépare les chambres d’un hôtel disparate visité par des centaines de milliers de personnes chaque mois.</p>

  482. 

  483. <figure id="attachment_18018" class="thumbnail wp-caption aligncenter"><a href="https://framablog.org/wp-content/uploads/2019/09/2019-09-12-tout-Dégooglisons-Internet.png"><img class="size-full wp-image-18018" src="https://framablog.org/wp-content/uploads/2019/09/2019-09-12-tout-Dégooglisons-Internet.png" alt="" srcset="https://framablog.org/wp-content/uploads/2019/09/2019-09-12-tout-Dégooglisons-Internet.png 1350w, https://framablog.org/wp-content/uploads/2019/09/2019-09-12-tout-Dégooglisons-Internet-300x169.png 300w, https://framablog.org/wp-content/uploads/2019/09/2019-09-12-tout-Dégooglisons-Internet-768x433.png 768w, https://framablog.org/wp-content/uploads/2019/09/2019-09-12-tout-Dégooglisons-Internet-1024x577.png 1024w" sizes="(max-width: 1350px) 100vw, 1350px"/></a><figcaption class="caption wp-caption-text">Même nous nous n’arrivons pas à tenir à jour la liste de tous les services que nous proposons -_-‘…</figcaption></figure>

  484. 

  485. <p>Or il y a des services qui ne marchent quasiment plus (<a href="https://tontonroger.org">Tonton Roger</a>). Des services qui étaient des expérimentations que nous n’avons pas pu poursuivre (<a href="https://framastory.org">Framastory</a>, <a href="https://framaslides.org">Framaslides</a>). Des services dont la dette technique est si lourde que même en y investissant plusieurs jours de développement dessus, on ne fait que retarder leur inévitable effondrement (<a href="https://framacalc.org">Framacalc</a>). Il y a aussi des services qui, si on les laisse faire, peuvent croître de manière illimitée et infinie, ce qui n’est pas tenable (<a href="https://frama.site">Framasite</a>, <a href="https://framabag.org">Framabag</a>, <a href="https://framabin.org">Framabin</a>, etc.). Il y a des services qui demandent beaucoup, beaucoup d’efforts si on veut éviter les utilisations frauduleuses, quand on est aussi visible que Framasoft (<a href="https://frama.link">Framalink</a>, <a href="https://framapic.org">Framapic</a>). Ne parlons pas du cas des médias sociaux fédérés (<a href="https://framapiaf.org">Framapiaf</a>, <a href="https://framasphere.org">Framasphere</a>), qui demandent un lourd travail de modération et fonctionneraient de façon bien plus fluide si nous n’avions pas accueilli autant d’inscriptions.</p>

  486. 

  487. <p>Sans compter que… ce n’est pas sain ! On le sait, c’est hyper pratique de pouvoir dire « tu veux une alternative, va voir les Framachins ! ». C’est rassurant d’avoir tout dans un même endroit, sous un même nom… On le sait, et c’est même pour cela qu’on a utilisé cette technique de la marque « frama », qui pourtant, n’est vraiment pas notre tasse de thé.</p>

  488. 

  489. <p>Mais centraliser des trucs sur Internet, ce n’est pas une bonne idée : non seulement ce réseau n’a pas été pensé pour créer des points de centralisation, mais surtout c’est en mettant toutes nos données dans le même panier que l’on concentre les pouvoirs entre les mains des personnes qui gèrent les serveurs, et c’est sur cette pente glissante que se sont créés des géants du web tels que Google ou Facebook.</p>

  490. 

  491. <p>Il faut donc nous déframasoftiser.</p>

  492. 

  493. <h2>Mettre la décentralisation à portée de clic</h2>

  494. 

  495. <p>Nous allons prendre le temps d’exploiter un des grands avantages du logiciel libre sur le logiciel propriétaire. Quand (au hasard) Google met <a href="https://killedbygoogle.com/">un énième projet dans son cimetière</a>, la plupart du temps, le code est privé : Google <a href="https://framablog.org/2016/05/10/au-revoir-revolv-bonjour-obsolescence-imposee/">prive alors chacun·e d’entre nous de la liberté de reprendre ce code</a> et de l’installer sur nos serveurs.</p>

  496. 

  497. <figure id="attachment_7882" class="thumbnail wp-caption alignleft"><a href="https://chatons.org"><img class="size-medium wp-image-7882" src="https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2-300x300.png" alt="" srcset="https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2-300x300.png 300w, https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2-150x150.png 150w, https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2-768x768.png 768w, https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2-730x730.png 730w, https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2-365x365.png 365w, https://framablog.org/wp-content/uploads/2016/10/logo_chatons_v2.png 1000w" sizes="(max-width: 300px) 100vw, 300px"/></a><figcaption class="caption wp-caption-text">cliquez sur l’image pour découvrir le collectif CHATONS</figcaption></figure>

  498. 

  499. <p>Le logiciel libre, au contraire, permet à d’autres de prendre le relais. Par exemple, <a href="https://framabag.org">Framapic</a> n’est pas exclusif à Framasoft : n’importe qui a le droit d’installer le logiciel Lutim sur un coin de serveur et d’<a href="https://pic.infini.fr/">en faire profiter qui bon lui semble</a>… C’est d’ailleurs dans cette optique de décentralisation que nous avons travaillé sur des outils facilitant l’auto-hébergement (tel que <a href="https://yunohost.org">Yunohost</a>), ainsi qu’avec le collectif d’hébergeurs alternatifs qu’est <a href="https://chatons.org">CHATONS</a>.</p>

  500. 

  501. <p>Notre objectif, en annonçant longtemps à l’avance des fermetures de services comme Framapic, par exemple, est double. Premièrement, nous espérons que cela motivera de nombreux hébergeurs à ouvrir leur instance du logiciel Lutim, donc du même service (nous pensons aux camarades du <a href="https://chatons.org">collectif CHATONS</a>). Et ensuite, cela nous donne le temps de repérer des offres d’hébergement et de les afficher sur la page d’accueil de Framapic. Ainsi, cette page d’accueil vous emmènera, d’un clic, vers le même service, chez un autre hébergeur… et ce, dès l’annonce de la fermeture de Framapic (un an avant qu’il ne ferme).</p>

  502. 

  503. <h2>Comment ça va se passer ?</h2>

  504. 

  505. <p>En douceur, et sur deux ans ! Enfin deux ans… au moins. (Non parce que si on trébuche sur nos claviers et qu’on se foule une phalange, ça peut prendre plus longtemps !)</p>

  506. 

  507. <p>Maintenant que nous nous sommes rassuré·es ensemble, et assuré·es du fait que les services libres et éthiques, c’est chouette… Il est temps de lancer un mouvement de transition pour sortir du réflexe « tout Framasoft ». Mettre les frama-services en retrait pour que vos usages rebondissent ailleurs, c’est un peu comme si nous vous disions :</p>

  508. 

  509. <blockquote><p>Notre AMAP du numérique est au maximum de sa capacité, mais on ne va pas vous laisser comme ça avec votre cabas : nous faisons partie d’un réseau d’AMAPs et d’autres membres du réseau seront ravis de vous accueillir.</p></blockquote>

  510. 

  511. <p>On va vous préparer le terrain. Afin d’agir en toute transparence, nous vous proposons de <a href="https://framaclic.org/h/fermeture-services">télécharger un tableur détaillé du calendrier prévisionnel des fermetures</a>. Et pour les personnes qui veulent juste avoir un regard global, voici un tableau résumant la manière dont nous envisageons ce plan de fermetures.</p>

  512. 

  513. <p><a href="https://framablog.org/wp-content/uploads/2019/09/2019-09-tableau-fermetures-services.png"><img class="aligncenter wp-image-18019 size-full" src="https://framablog.org/wp-content/uploads/2019/09/2019-09-tableau-fermetures-services.png" alt="tableau calendrier des fermetures de servcies. Détail textuel dans ce commentaire https://framablog.org/2019/09/24/deframasoftisons-internet/#comment-80406" srcset="https://framablog.org/wp-content/uploads/2019/09/2019-09-tableau-fermetures-services.png 1120w, https://framablog.org/wp-content/uploads/2019/09/2019-09-tableau-fermetures-services-129x300.png 129w, https://framablog.org/wp-content/uploads/2019/09/2019-09-tableau-fermetures-services-768x1783.png 768w, https://framablog.org/wp-content/uploads/2019/09/2019-09-tableau-fermetures-services-441x1024.png 441w" sizes="(max-width: 1120px) 100vw, 1120px"/></a></p>

  514. 

  515. <p>Si on regarde de plus près, le schéma est le même pour tous les services concernés :</p>

  516. 

  517. <p class="well">Étape 0. D’abord, nous annonçons notre plan de fermeture d’une partie des services (ça, c’est aujourd’hui). Cela permet à chacun·e d’y voir clair, de prendre les devants et de s’auto-gérer pour prendre le relais sur tel ou tel service. Tout au long des mois à venir, nous essaierons, tant que faire se peut, de faciliter la migration vers d’autres hébergeurs de services ;</p>

  518. 

  519. <ol>

  520. <li>Ensuite, on annonce sur chaque service concerné qu’il va bientôt être restreint, puis fermé (1<sup>ère</sup> colonne du tableau). On affiche alors sur la page d’accueil un lien vers des hébergements alternatifs (d’un même logiciel ou équivalent) que nous aurons repérés et sélectionnés ;</li>

  521. <li>Après, on restreint l’usage du service (2<sup>e</sup> colonne). L’idée est de fermer la porte aux nouveaux venus (ne plus pouvoir créer un nouveau compte, un nouveau calc, ou uploader un nouveau fichier) en les redirigeant vers des alternatives disponibles… tout en donnant le temps de pouvoir migrer son compte et ses données aux personnes qui sont encore inscrites sur nos services ;</li>

  522. <li>Enfin, on ferme le service lorsque c’est possible (dernière colonne du tableau) ou alors on l’invisibilise lorsqu’il est nécessaire d’assurer la continuité de ce qui y a été fait (par exemple, les frama.link existants continueront de rediriger vers la bonne adresse web).</li>

  523. </ol>

  524. 

  525. <h2>On ne ferme pas tout, et certainement pas tout de suite (sauf un)</h2>

  526. 

  527. <p><a href="https://framastory.org/">Framastory</a> et <a href="https://framanews.org">Framanews</a>, dont les lourdes contraintes techniques nous forcent à agir rapidement, seront les premiers à suivre cette route avec une restriction début 2020 et une fermeture un semestre plus tard. Pour tous les autres services concernés, les restrictions ne débuteront qu’à l’été 2020 (voire l’été 2021 pour certains), et les premières fermetures n’interviendront pas avant 2021 ; voire, pour certains services, pas avant 2022 !</p>

  528. 

  529. <p>Les seules exceptions à cette façon de faire sont, tout simplement, les services que nous ne fermerons pas (<a href="https://framadate.org">Framadate</a>, les <a href="https://framapad.org">Framapads</a> et <a href="https://mypad.framapad.org">MyPads</a>, <a href="https://framavox.org">Framavox</a>, <a href="https://framagenda.org">Framagenda</a>, <a href="https://framatalk.org">Framatalk</a>, le <a href="https://framindmap.org">Framindmap</a> collaboratif, <a href="https://framacarte.org">Framacarte</a>), auxquels s’ajoutent ceux que nous déplaçons juste dans notre axe « Culture Libre » (<a href="https://framagames.org">Framagames</a> et <a href="https://framinetest.org">Framinetest</a>), ainsi que <a href="https://framadrive.org">Framadrive</a> (qui, lui, a très vite atteint la restriction des 5000 comptes que nous nous étions imposés… ce qui va rester ainsi).</p>

  530. 

  531. <p>Ah, oui…. et puis il y a <a href="https://framabee.org">Framabee</a>, aussi connu sous le nom de <a href="https://tontonroger.org">Tonton Roger</a>, le méta-moteur de recherche qui ne marche vraiment plus. D’aucuns disent qu’il faut l’achever, d’autres pensent qu’il faut lui faire dire que « Google m’a tuer », car malgré nos bidouillages, Google (et ses collègues) recevait trop de requêtes de notre part et s’est mis à les refuser en masse… comme quoi centraliser les usages, même chez Framasoft, ça ne marche vraiment pas ! Nous, on pense lui offrir une retraite anticipée : dès le mois prochain on dit bye bye à Framabee et on offre des charentaises à Tonton Roger !</p>

  532. 

  533. <figure id="attachment_18020" class="thumbnail wp-caption aligncenter"><a href="https://framablog.org/2015/06/30/ca-degooglise-pepere/"><img class="size-full wp-image-18020" src="https://framablog.org/wp-content/uploads/2019/09/framabee_ca_degooglise_pepere.jpg" alt="" srcset="https://framablog.org/wp-content/uploads/2019/09/framabee_ca_degooglise_pepere.jpg 800w, https://framablog.org/wp-content/uploads/2019/09/framabee_ca_degooglise_pepere-300x296.jpg 300w, https://framablog.org/wp-content/uploads/2019/09/framabee_ca_degooglise_pepere-768x757.jpg 768w" sizes="(max-width: 800px) 100vw, 800px"/></a><figcaption class="caption wp-caption-text">Cliquez pour lire le document historique retraçant la soirée où nous avons eu la brillante idée d’avoir 3 noms de domaines pour un moteur de recherche.</figcaption></figure>

  534. 

  535. <h2>Ranger le sac à dos, pour mieux avancer ensemble</h2>

  536. 

  537. <p>Nous avons beaucoup appris. L’expérience de « <a href="https://degooglisons-internet.org">Dégooglisons Internet</a> » a démontré que lorsqu’on ne vous traite pas de consommatrices-ménagères et de clients-rois, vous savez accepter avec grâce qu’un serveur reste planté durant le week-end (parce qu’on n’impose pas d’astreintes à nos admin-sys), qu’un outil soit parfois un poil moins joli ou qu’il faille limiter son utilisation du service afin de partager l’espace avec d’autres… bref : qu’il y a une place, dans vos vies, pour du numérique <em>artisanal</em>, au sens noble du terme.</p>

  538. 

  539. <p>Toutes ces leçons, que nous récoltons depuis 2014, nous mènent à penser qu’il faut entamer une transition. Nous ne voulons certainement pas laisser les gens (vous !) le bec dans l’eau, et donner l’impression que le Libre est une promesse non-tenue. Au contraire, nous avons eu la joie d’attirer votre attention vers des solutions libres et de vous avoir aidé à les adopter (merci pour ces efforts !). Cette confiance, cette appétence pour des outils numériques pensés de manière éthique est précieuse : nous ne voulons pas la décevoir, juste l’accompagner un pas de plus sur le chemin.</p>

  540. 

  541. <figure id="attachment_15203" class="thumbnail wp-caption aligncenter"><a href="https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon.png"><img class="size-full wp-image-15203" src="https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon.png" alt="dessin de Mobilizon par David Revoy" srcset="https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon.png 1513w, https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon-150x150.png 150w, https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon-300x300.png 300w, https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon-768x768.png 768w, https://framablog.org/wp-content/uploads/2018/12/1_Services_MobiliZon-1024x1024.png 1024w" sizes="(max-width: 1513px) 100vw, 1513px"/></a><figcaption class="caption wp-caption-text">Mobilizon, illustré par <a href="http://www.davidrevoy.com">David Revoy</a> – Licence : <a href="https://creativecommons.org/licenses/by/4.0/">CC-By 4.0</a></figcaption></figure>

  542. 

  543. <p>Vous noterez au passage que nous prenons le soin de faire ce que les géants du web n’ont jamais fait : annoncer longtemps à l’avance un plan de fermetures et travailler pour vous accompagner encore plus loin dans votre dégooglisation. Ce grand remue-ménage nous permet aussi de ranger l’ensemble des outils et expériences que nous avons accumulé dans nos sac-à-dos ces dernières années… car cela fera plus de place, plus de disponibilité à ce qui arrive.</p>

  544. 

  545. <p><a href="https://joinpeertube.org">PeerTube</a> et <a href="https://joinmobilizon.org">Mobilizon</a> montrent combien nous souhaitons nous éloigner du modèle de logiciels « pareils-que-google-mais-en-libre ». A partir d’octobre, nous allons prendre trois mois pour faire le point sur nos explorations de la feuille de route « <a href="https://contributopia.org">Contributopia</a> », et vous verrez qu’il y a de nombreuses choses à dire, de nombreux projets qu’on n’avait pas vus, là, tout au fond du sac à dos…</p>

  546. 

  547. <p>C’est un moment très excitant qui s’approche, car nous avons de nombreuses annonces et histoires de contribution à vous partager… rendez-vous mi-octobre, nous, on a hâte !</p>

  548. 

  549. <h2>Un an pour construire une nouvelle proposition</h2>

  550. 

  551. <p>Fort·es de ce que ces années à Dégoogliser Internet nous ont enseigné, nous avons l’intuition qu’il est possible de construire une nouvelle proposition de service moins complexe, et plus pratique, pour les usager⋅es comme pour les hébergeur⋅ses. À force d’observer vos usages et d’écouter vos attentes, nous pensons que <a href="https://nextcloud.com/">Nextcloud</a>, riche de ses nombreuses applications, est une piste (et <a href="https://v3.zaclys.com/cloud/">on</a> <a href="http://colibre.org/le-gouvernement-allemand-devient-open-source-avec-nextcloud/">n’est</a> <a href="https://services-numeriques.univ-larochelle.fr/Nextcloud">pas</a> <a href="https://ent.univ-lille3.fr/">les</a> <a href="https://www.nextinpact.com/news/108156-le-ministere-linterieur-migre-sur-solution-libre-nextcloud.htm">seul·es</a> !). Nous croyons que ce logiciel peut répondre à a majorité des besoins des gens qui contribuent à changer le monde.</p>

  552. 

  553. <figure id="attachment_18021" class="thumbnail wp-caption aligncenter"><a href="https://framablog.org/wp-content/uploads/2019/09/Nextcloud-1.png"><img class="size-full wp-image-18021" src="https://framablog.org/wp-content/uploads/2019/09/Nextcloud-1.png" alt="" srcset="https://framablog.org/wp-content/uploads/2019/09/Nextcloud-1.png 1061w, https://framablog.org/wp-content/uploads/2019/09/Nextcloud-1-300x217.png 300w, https://framablog.org/wp-content/uploads/2019/09/Nextcloud-1-768x555.png 768w, https://framablog.org/wp-content/uploads/2019/09/Nextcloud-1-1024x740.png 1024w" sizes="(max-width: 1061px) 100vw, 1061px"/></a><figcaption class="caption wp-caption-text">Une illustration des nombreuses utilisations possibles du logiciel Nextcloud</figcaption></figure>

  554. 

  555. <p>Nous nous donnons un an pour y contribuer (<a href="https://framablog.org/2016/10/07/framagenda-ne-partagez-plus-votre-planning-ni-vos-contacts-avec-la-nsa/">à nouveau</a>), touiller dedans, expérimenter avec les copines et les copains afin de vous faire une autre proposition qui, nous l’espérons, facilitera encore mieux les dégooglisations…. comme les « <em>déframasoftisations »</em> !</p>

  556. 

  557. <div class="well">

  558. <h4>Pour résumer :</h4>

  559. <ul>

  560. <li>Nous ne voulons pas devenir la « solution par défaut », et centraliser vos usages et vos attentions (c’est comme ça qu’on a créé des géants du web) ;</li>

  561. <li>38 services c’est une trop grande diversité et complexité de logiciels à aborder (pour vous) ainsi qu’à maintenir et promouvoir (pour nous) ;</li>

  562. <li>Nous voulons rester une association à taille humaine, à chaleur humaine… une espèce d’AMAP du numérique ;</li>

  563. <li>Nous proposons donc une nouvelle étape dans la décentralisation des données :

  564. <ul>

  565. <li>Fermer progressivement des frama-services pour en faire des portes qui vous renvoient vers d’autres hébergeurs ;</li>

  566. <li>Prendre le temps de mettre en place une autre proposition simplifiée pour les usager·es (qui offrira par exemple un compte unique).</li>

  567. </ul>

  568. </li>

  569. </ul>

  570. </div>

  571.   </article>

  572. </section>

  573. 

  574. 

  575. <nav id="jumpto">

  576.   <p>

  577.     <a href="/david/blog/">Accueil du blog</a> |

  578.     <a href="https://framablog.org/2019/09/24/deframasoftisons-internet/">Source originale</a> |

  579.     <a href="/david/stream/2019/">Accueil du flux</a>

  580.   </p>

  581. </nav>

  582. 

  583. <footer>

  584.   <div>

  585.     <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">

  586.     <p>

  587.       Bonjour/Hi!

  588.       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>

  589.       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>).

  590.     </p>

  591.     <p>

  592.       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>.

  593.     </p>

  594.     

  595.     <p>

  596.       Voici quelques articles choisis :

  597.       <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,

  598.       <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,

  599.       <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,

  600.       <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,

  601.       <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,

  602.       <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,

  603.       <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,

  604.       <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,

  605.       <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,

  606.       <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,

  607.       <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,

  608.       <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,

  609.       <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,

  610.       <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,

  611.       <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,

  612.       et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>

  613.     </p>

  614.     <p>

  615.       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>.

  616.     </p>

  617.     <p>

  618.       Je ne traque pas ta navigation mais mon

  619.       <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>

  620.       conserve des logs d’accès.

  621.     </p>

  622.   </div>

  623. </footer>

  624. <script type="text/javascript">

  625.   ;(_ => {

  626.     const jumper = document.getElementById('jumper')

  627.     jumper.addEventListener('click', e => {

  628.       e.preventDefault()

  629.       const anchor = e.target.getAttribute('href')

  630.       const targetEl = document.getElementById(anchor.substring(1))

  631.       targetEl.scrollIntoView({behavior: 'smooth'})

  632.     })

  633.   })()

  634. </script>