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

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231
  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` element
  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,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Dégooglisons Internet (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  31. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  32. <link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://degooglisons-internet.org/fr/">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Dégooglisons Internet</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://degooglisons-internet.org/fr/" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <h2>Quels sont les enjeux ?</h2>
  71. <p>Ces dernières années ont vu se généraliser une <strong>concentration des acteurs d’Internet</strong> (Youtube appartient à Google, WhatsApp à Facebook, Skype à Microsoft, etc.). Cette centralisation est nuisible, non seulement parce qu’elle freine l’innovation, mais surtout parce qu’elle entraîne une perte de liberté pour les visiteurs. <strong>Les utilisateurs de ces derniers services ne contrôlent plus leur vie numérique</strong> : leurs comportements sont disséqués en permanence afin de mieux être ciblés par la publicité, et leurs données - pourtant privées (sites visités, mails échangés, vidéos regardées, etc.) - peuvent être analysées par des services gouvernementaux.</p>
  72. <p>La réponse que souhaite apporter Framasoft à cette problématique est simple : mettre en valeur, pour chacun de ces services privateurs de liberté, une alternative Libre, Ethique, Décentralisée et Solidaire.</p>
  73. <h2>Les dangers</h2>
  74. <p>Les services en ligne toujours plus centralisés de géants tentaculaires comme Google, Amazon, Facebook, Apple ou Microsoft (GAFAM) mettent en danger nos vies numériques.</p>
  75. <h3 id="t2-espionnum"><i class="far fa-eye fa-fw fc-g6"></i> <span>Surveillance</span></h3>
  76. <p>Sous le prétexte de fournir une « meilleure expérience utilisateur », nos comportements sur Internet sont espionnés en permanence. Ces informations peuvent servir à afficher de la publicité ciblée, mais les révélations de l’affaire Snowden ont aussi prouvé que les géants de l’Internet étaient contraints de communiquer ces données (parfois extrêmement privées : emails échangés sur GMail, photos partagées sur Facebook, conversations Skype, géolocalisation des téléphones, etc.) à des services gouvernementaux. <strong>Sous prétexte de lutte contre le terrorisme</strong>, les états sont capables aujourd’hui d’obtenir bien plus d’informations qu’un « Big Brother » ne l’aurait jamais rêvé.</p>
  77. <p><img alt="" src="https://degooglisons-internet.org/img/fr/cyberpolicus.png" class="d-block mx-auto"></p>
  78. <h3 id="t2-privatum"><i class="far fa-user-circle fa-fw fc-g6"></i> <span>Vie privée</span></h3>
  79. <p>Nos données sont une extension de nous-mêmes. Elles peuvent indiquer où nous sommes, avec qui, notre orientation politique ou sexuelle, les sites que nous avons visités, notre recette préférée, les sujets qui nous intéressent, etc.<br> Si une donnée seule, prise indépendamment, n’est pas forcément sensible, un ensemble de données peut le devenir (par exemple si vous avez fait des recherches sur le cancer avant de souscrire à une assurance-vie).<br> Dans un monde où tout devient numérique (lecture, TV, téléphonie, musique, réseau social, etc.), <strong>notre vie privée est un élément essentiel de ce qui fait de nous une personne singulière</strong>. Une personne malveillante qui aurait accès à votre smartphone peut en apprendre suffisamment sur vous en quelques minutes pour vous causer des torts très importants (usurpation d’identité sur Facebook, détournement d’informations professionnelles, achats effectués sans votre accord, etc.).</p>
  80. <h3 id="t2-centralisum"><i class="far fa-dot-circle fa-fw fc-g6"></i> <span>Centralisation</span></h3>
  81. <p>Les acteurs majeurs de l’internet sont devenus de véritables pieuvres : Facebook possède WhatsApp et Instagram, Google détient Youtube et Waze, Microsoft distribue Skype, etc.<br> Cette concentration des acteurs pose de multiples problèmes : que se passera-t-il si Facebook met la clé sous la porte ? Comment faire des recherches si Google subit une panne ? <strong>Nous devenons peu à peu dépendants de services fournis par un petit nombre d’acteurs.</strong> Par exemple, Apple (iPhone), Google (Android) et Microsoft (Windows Phone) se partagent la quasi-totalité du marché des systèmes d’exploitation pour smartphones.<br> Par ailleurs, la taille de ces acteurs bride l’innovation : difficile de lancer une start-up face à Apple ou Google (respectivement première et deuxième capitalisations boursières mondiale).<br> Enfin, le manque de diversité de ces géants leur donne aussi la possibilité non seulement de collecter facilement des informations personnelles, mais aussi d’altérer l’information qu’ils diffusent (une recherche Google sur le mot « nucléaire » n’affichera pas les mêmes liens suivant que Google vous perçoit comme un militant écologiste ou un pro-nucléaire).</p>
  82. <h3 id="t2-fermetum"><i class="fas fa-lock fa-fw fc-g6"></i> <span>Fermeture</span></h3>
  83. <p>Les services web affichés sur votre ordinateur ou votre smartphone sont généralement exécutés dans le « cloud » : des serveurs dispersés sur la planète, stockant à la fois vos données (mails, photos, fichiers, etc.) mais aussi le code des applications.<br> Pour les données, cela pose le problème de leur pérennité (que deviennent vos fichiers si Dropbox ferme demain ?) mais aussi de votre capacité à changer de services (comment faire pour récupérer l’ensemble de vos photos sur Facebook ou Picasa, et les réinsérer avec les commentaires dans un autre service ?).<br> Pour les applications, cela implique que <strong>vous êtes à la merci de changements impromptus selon le bon vouloir du fournisseur</strong> (ajout de publicité, modification de l’interface, etc.), mais surtout que vous n’avez quasiment aucun contrôle sur ce que l’application peut faire. Ce sont des « boîtes noires » qui peuvent agir de façon malveillante (envoyer des SMS à votre insu, exécuter du code indésirable, etc.).<br> Bref, ces sociétés nous enferment dans des cages dorées, certes, mais des cages malgré tout !</p>
  84. <h2><span>Ce que nous proposons</span></h2>
  85. <p>Framasoft souhaite faire face à ces dangers menaçant nos vies numériques en proposant des services libres, éthiques, décentralisés et solidaires.</p>
  86. <h3><i class="fas fa-lock-open fa-fw fc-g6"></i> <span>Liberté</span></h3>
  87. <p>L’histoire d’Internet elle-même est une histoire de logiciels libres, tant du point de vue des standards que des protocoles employés. Sa popularité et son potentiel font aussi des envieux, et de grandes entreprises aimeraient s’en attribuer le contrôle en imposant du code fermé dans des systèmes verrouillés et non-interopérables.</p>
  88. <p>Pour qu’Internet reste fidèle à ses principes fondateurs qui l’ont conduit à son succès, nous devons y trouver des applications libres, c’est-à-dire dont le code source est ouvert, accessible et sous licences libres.</p>
  89. <p><strong>Framasoft s’engage à n’utiliser que des logiciels au code source « libre ».</strong></p>
  90. <h3><i class="far fa-eye-slash fa-fw fc-g6"></i> <span>Éthique</span></h3>
  91. <p>Nous plébiscitons un Internet fait de partage et d’indépendance.</p>
  92. <p>L’exploitation, la surveillance, la censure et l’appropriation des données sont des valeurs que nous refusons au profit de la transparence (la probité), de l’exposition claire des conditions d’utilisation des services, et du refus des discriminations.</p>
  93. <p><strong>Framasoft s’engage à ne pas exploiter les données des utilisateurs de ses services, et à promouvoir un Web ouvert et équitable.</strong></p>
  94. <h3><i class="fas fa-share-alt fa-fw fc-g6"></i> <span>Décentralisation</span></h3>
  95. <p>L’intelligence d’Internet doit reposer sur chaque acteur du réseau dans une dynamique de partage de pair à pair, pour éviter de créer un Minitel 2.0.</p>
  96. <p>Pour assurer l’égalité de tous, citoyens comme entrepreneurs, les monopoles doivent non seulement être évités, mais empêchés de s’accaparer les données personnelles ou publiques.</p>
  97. <p><strong>En expliquant, par des tutoriels, comment multiplier les solutions libres permettant un Internet plus équitable, nous facilitons l’essaimage du code et diversifions les usages.</strong></p>
  98. <h3><i class="fas fa-people-carry fa-fw fc-g6"></i> <span>Solidarité</span></h3>
  99. <p>À travers les services que nous déployons, nous promouvons un modèle économique fondé sur la mutualisation des coûts, le partage des ressources, et l’accessibilité au plus grand nombre.</p>
  100. <p>Ce modèle possède aussi un caractère éducatif car nous pensons qu’en documentant le déploiement des services, un grand nombre d’utilisateurs seront en mesure de partager à leur tour ces ressources.</p>
  101. <p><strong>Nous pensons que ne pas infantiliser les utilisateurs et faire partager la responsabilité de l’utilisation des services permettra de réguler les abus.</strong></p>
  102. <h2>Concrètement</h2>
  103. <p>Le projet « Dégooglisons Internet » - qui ne concerne d’ailleurs pas que Google - consiste à <strong>proposer des services alternatifs face à un maximum de services que nous évaluons comme menaçants pour nos vies numériques</strong>.</p>
  104. <p>Google Docs, Skype, Dropbox, Facebook, Twitter, Google Agenda, Youtube, Doodle, Yahoo! Groups, et bien d’autres sont des services extrêmement pratiques, mais <strong>ils sont devenus bien trop gros et nous ont rendus dépendants</strong>. Framasoft souhaite entrer en résistance, et propose un plan de mise en place d’applications alternatives sur plusieurs années.</p>
  105. <p>Ces services sont libres, gratuits, ouverts à tous (dans la limite de nos capacités techniques et financières), tels des <strong> <a href="http://fr.wikipedia.org/wiki/Biens_communs">biens communs</a> numériques</strong>. Dans un souci de décentralisation d’internet et de promotion de l’auto-hébergement, nous ferons le maximum afin que chacun puisse installer ses propres services (pour soi, pour son association, son entreprise).</p>
  106. <p>Évidemment, nous n’avons pas la prétention de <em>concurrencer</em> ces services, nous souhaitons juste proposer un espace numérique neutre, non-commercial et non-agressif envers ses utilisateurs.</p>
  107. </article>
  108. <hr>
  109. <footer>
  110. <p>
  111. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  112. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  113. </svg> Accueil</a> •
  114. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  115. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  116. </svg> Suivre</a> •
  117. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  118. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  119. </svg> Pro</a> •
  120. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  121. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  122. </svg> Email</a> •
  123. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  124. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  125. </svg> Légal</abbr>
  126. </p>
  127. <template id="theme-selector">
  128. <form>
  129. <fieldset>
  130. <legend><svg class="icon icon-brightness-contrast">
  131. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  132. </svg> Thème</legend>
  133. <label>
  134. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  135. </label>
  136. <label>
  137. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  138. </label>
  139. <label>
  140. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  141. </label>
  142. </fieldset>
  143. </form>
  144. </template>
  145. </footer>
  146. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  147. <script>
  148. function loadThemeForm(templateName) {
  149. const themeSelectorTemplate = document.querySelector(templateName)
  150. const form = themeSelectorTemplate.content.firstElementChild
  151. themeSelectorTemplate.replaceWith(form)
  152. form.addEventListener('change', (e) => {
  153. const chosenColorScheme = e.target.value
  154. localStorage.setItem('theme', chosenColorScheme)
  155. toggleTheme(chosenColorScheme)
  156. })
  157. const selectedTheme = localStorage.getItem('theme')
  158. if (selectedTheme && selectedTheme !== 'undefined') {
  159. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  160. }
  161. }
  162. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  163. window.addEventListener('load', () => {
  164. let hasDarkRules = false
  165. for (const styleSheet of Array.from(document.styleSheets)) {
  166. let mediaRules = []
  167. for (const cssRule of styleSheet.cssRules) {
  168. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  169. continue
  170. }
  171. // WARNING: Safari does not have/supports `conditionText`.
  172. if (cssRule.conditionText) {
  173. if (cssRule.conditionText !== prefersColorSchemeDark) {
  174. continue
  175. }
  176. } else {
  177. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  178. continue
  179. }
  180. }
  181. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  182. }
  183. // WARNING: do not try to insert a Rule to a styleSheet you are
  184. // currently iterating on, otherwise the browser will be stuck
  185. // in a infinite loop…
  186. for (const mediaRule of mediaRules) {
  187. styleSheet.insertRule(mediaRule.cssText)
  188. hasDarkRules = true
  189. }
  190. }
  191. if (hasDarkRules) {
  192. loadThemeForm('#theme-selector')
  193. }
  194. })
  195. </script>
  196. </body>
  197. </html>