davidbgk
/
larlet-fr-david-cache
Suivre 1
Ajouter aux favoris 0
Bifurcation 0
Code Versions 0 Activité
A place to cache linked articles (think custom and personal wayback machine)
Vous ne pouvez pas sélectionner plus de 25 sujets Les noms de sujets doivent commencer par une lettre ou un nombre, peuvent contenir des tirets ('-') et peuvent comporter jusqu'à 35 caractères.
123 Révisions
1 Branche
Aborescence: 66734fb386
Branches Tags
${ item.name }
Créer la branche ${ searchTerm }
de '66734fb386'
${ noResults }
larlet-fr-david-cache/cache/7fed10e51622e3e4f28b861beb8.../index.html

index.html 33KB
Brut Annotations Historique

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620 
  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>Hygiène et écologisme numérique (archive) — David Larlet</title>

  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->

  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">

  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">

  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">

  17. <link rel="manifest" href="/manifest.json">

  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">

  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">

  20. <meta name="apple-mobile-web-app-title" content="David Larlet">

  21. <meta name="application-name" content="David Larlet">

  22. <meta name="msapplication-TileColor" content="#da532c">

  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">

  24. <meta name="theme-color" content="#f0f0ea">

  25. <!-- That good ol' feed, subscribe :p. -->

  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  27. 

  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://clochix.net/marges/181014-cvp2018-10-14">

  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.   Hygiène et écologisme numérique (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://clochix.net/marges/181014-cvp2018-10-14">Source originale du contenu</a></h3>

  463.     <div class="chapo"><p><em>Je me suis fait piéger pour papoter lors du premier <a href="http://cafe-vie-privee-lannion.bzh/">Café Vie Privé de Lannion</a>. Pour me convaincre de sortir de ma grotte, les organisateurs m’avaient promis que ça se passerait dans l’arrière salle d’un bistro ne pouvant pas contenir plus de trois personnes. Et depuis quelques jours ils ont de pleines pages dans tous les titres de la presse locale pour annoncer l’évènement. Je stresse évidemment, ayant horreur de ce genre d’exercice, donc j’ai essayé de résumer par écrit ce que je pourrais raconter. Vos avis sont plus que bienvenus.</em></p>

  464. </div>

  465. 

  466. <p>Remarque liminaire : je préfère parler d’intimité que de vie privée. On a parfois l’impression que la vie privée ne concerne que les personnes publiques ou les gens qui ont des choses à cacher. En parlant d’intimité, j’espère que davantage de gens se sentent concerné·e·s.</p>

  467. 

  468. <h3><a name="Ceci_n’est_pas_une_liste_a_puce_d’outils_pour_proteger_votre_intimite." href="#Ceci_n’est_pas_une_liste_a_puce_d’outils_pour_proteger_votre_intimite." class="anchor"># </a>Ceci n’est pas une liste à puce d’outils pour protéger votre intimité.</h3>

  469. 

  470. <p>En réfléchissant à ce que j’allais conseiller pour protéger son intimité, je me suis rendu compte que j’abordais le problème à l’envers. Parler de techniques et d’outils pour protéger son intimité n’est que la dernière étape du processus, avant d’en arriver là, il faut d’abord réfléchir à ce que l’on veut protéger et de qui ou quoi on veut le protéger.</p>

  471. 

  472. <h3><a name="Qu’est_ce_que_l’intimite_numerique_et_pourquoi_la_proteger_?" href="#Qu’est_ce_que_l’intimite_numerique_et_pourquoi_la_proteger_?" class="anchor"># </a>Qu’est ce que l’intimité numérique et pourquoi la protéger ?</h3>

  473. 

  474. <p>L’intime est ce qui nous définit en tant qu’individu et motive une grande partie de nos actes.</p>

  475. 

  476. <p>L’intimité, c’est un endroit où l’on est seul avec soi-même (ou avec un nombre très restreint de personnes en qui on a confiance), et qui nous permet, à l’abri de tout regard, de tout jugement externe, de se construire, d’exister, de prendre des décisions, etc.</p>

  477. 

  478. <p>L’intimité, ce sont aussi nos rêves, et les carnets où parfois on les note. Ce sont nos projets fous que l’on élabore dans notre tête longtemps avant d’oser en parler à quiconque. Et qui ne pourraient pas naître à la lumière.</p>

  479. 

  480. <p>L’intimité n’a rien à voir avec des actions illicites.</p>

  481. 

  482. <p>L’intimité, ce sont aussi des choses sans conséquence mais dont on a un peu honte. Se curer le nez, roter, ce sont des choses que l’on s’autorise lorsqu’on est seul chez soi, mais qu’on peut avoir honte de voir exposer sur la place publique. Imaginez l’inconfort d’être dans une cellule de prison où vous devez faire vos besoins au vu et au su de vos co-détenu·e·s. Être privé d’intimité déshumanise, affecte l’image que l’on a de soi.</p>

  483. 

  484. <p>Dernier exemple de lieu intime : l’isoloir. Il est depuis longtemps acquis que le secret du vote est important dans une démocratie. Il est vital d’avoir la possibilité que certaines choses restent secrètes.</p>

  485. 

  486. <p>L’intimité numérique, ce sont toutes les traces de notre intimité sur des outils numériques. C’est naturellement notre correspondance, les informations qui révèlent directement nos pensées intimes. Mais c’est aussi tout ce qui, de manière plus large, permet indirectement, par des recoupements, d’accéder à notre intimité. Nos recherches en ligne, nos achats, nos rendez-vous médicaux, nos errances dans la rue (tiens, il fait souvent un détour pour passer dans la rue où habite X, cherche-t-il à lae croiser ?). Nos téléphones qui suivent chacune de nos activités permettent de savoir si nous fréquentons un lieu de culte, un local syndical ou un bar, et à quelle fréquence…</p>

  487. 

  488. <p>L’intimité est un besoin vital pour les humains, en être privé nous prive d’une partie de notre humanité. En être privé, être toujours sous la menace du regard et du jugement d’autrui, c’est perdre la capacité de penser par soi même, d’exister, de se comporter en tant qu’individu indépendant, autonome. Priver les citoyen·ne·s d’intimité est une des caractéristiques des régimes totalitaires qui cherchent à nier les individualités pour gérer que des robots déshumanisés.</p>

  489. 

  490. <p>Protéger son intimité est donc essentiel. Mais il faut aussi veiller à ce que la société garantisse à chacun et chacune le droit à l’intimité.</p>

  491. 

  492. <h3><a name="Ok,_mais_de_qui_ou_de_quoi_faut-il_la_proteger_?" href="#Ok,_mais_de_qui_ou_de_quoi_faut-il_la_proteger_?" class="anchor"># </a>Ok, mais de qui ou de quoi faut-il la protéger ?</h3>

  493. 

  494. <p>Les menaces sur notre droit à l’intimité sont très nombreuses, selon les contextes. Attention, il ne faut pas croire que sont uniquement le fait de gens qui cherchent explicitement à nous nuire. En fait, l’essentiel des risques n’est pas lié à la malveillance, mais à la simple utilisation de nos données pour influencer notre vie. Petite liste non exhaustive :</p>

  495. 

  496. <ul>

  497. <li>votre employeur actuel : pour avoir certaines conversations avec des collègues, mieux vaut éviter d’utiliser les outils internes de l’entreprise ;</li>

  498. <li>vos futurs employeurs : celleux-ci pourraient apprécier de différentes manières de découvrir sur notre fil Facebook que l’on participe à toutes les journées de grève et applaudit aux actions des syndicats ;-)</li>

  499. <li>vos proches : compagnon ou compagne qui pourrait être blessé·e de découvrir que l’on discute encore avec ses « ex ». Ados ne souhaitant pas que leurs parents écoutent leurs conversations avec leurs potes ou connaissent les sites qu’ils consultent (« pourquoi as-tu fait des recherches sur la contraception ??? » ;</li>

  500. <li>le harcèlement : le phénomène est de plus en plus courant, dans les cours de récréation comme parmi les adultes. Si pour une raison quelconque vous devenez la cible de harcèlement, toutes les informations disponibles en ligne sur vous pourront être utilisées contre vous. Votre adresse, pour vous menacer. Vos proches, pour s’en prendre à elleux… Personne n’est à l’abri, et ça peut être très violent ;</li>

  501. <li>des escrocs : les informations que l’on peut trouver en ligne sur nous peuvent permettre à des escrocs d’usurper notre identité, pour nous faire payer leurs amendes, pour souscrire des services à notre place, pour escroquer nos proches en se faisant passer pour nous, etc ;</li>

  502. <li>du marketing : plus quelqu’un nous connait, plus iel sera en mesure d’influencer nos actes, voire nos opinions, par exemple pour nous pousser à acheter une marchandise dont on n’avait pas forcément besoin, ou à voter pour un·e candidat·e dont on n’avait pas forcément besoin ;</li>

  503. <li>des décisions nous concernant prises en se basant sur ce que l’on sait ou croit savoir de nous (« gouvernance algorithmique »). Si vous avez été malade et avez évoqué cette maladie sur Internet, une banque pourra des années plus tard vous refuser un prêt, une assurance pourra vous faire payer des primes supérieures… Imaginez qu’un site collecte l’ensemble de nos rendez-vous médicaux, imaginez le nombre de décisions qui pourraient être prise à notre insu à partir de ces informations par un employeur (elle vient de tomber enceinte, ne lui proposons pas de CDI), un banquier (il consulte un psy donc n’est pas stable, refusons-lui ce prêt)…</li>

  504. <li>de l’état : avoir un aéroport ou une usine chimique qui veut s’installer dans notre jardin, ça peut arriver à tout le monde. Tout le monde peut avoir un jour ou l’autre besoin de devenir ZADiste et de s’organiser contre le pouvoir en place, pas besoin d’habiter en Chine pour cela ;</li>

  505. <li>…</li>

  506. </ul>

  507. 

  508. <p>Chacun de ces exemples appelle une réponse particulière, des réponses qui sont parfois contradictoires. Par exemple, GMail offre un bon niveau de protection des correspondances contre les attaques de gens de notre entourage, employeur, conjoint·e, etc. Par contre, il sera obligé de répondre aux demandes de la justice. Héberger ses courriels chez des potes peut-être une bonne idée si on participe à une ZAD. Par contre selon leurs compétences en informatique, la sécurité sera peut-être moindre. Et en cas d’embrouille avec elleux, iels pourraient accéder à nos informations.</p>

  509. 

  510. <p>Donner de fausses informations en ligne peut relativement nous protéger des tentatives d’influencer nos actes. Mais peut aussi nous nuire le jour où des décisions nous concernant seront prises en se basant sur ces informations.</p>

  511. 

  512. <p>Et pour protéger son intimité, il faut adopter quelques règles d’hygiène. Mais pour cela il faut d’abord définir son « modèle de menace », c’est à dire ce qui selon vous menace le plus votre intimité, afin de choisir des solutions qui répondent à vos besoins.</p>

  513. 

  514. <h3><a name="Hygiene_pour_vous…_et_pour_les_autres" href="#Hygiene_pour_vous…_et_pour_les_autres" class="anchor"># </a>Hygiène pour vous… et pour les autres</h3>

  515. 

  516. <p>L’hygiène n’est pas qu’une pratique égoïste. On ne se lave pas les mains juste pour éviter de tomber malade, mais aussi pour éviter de contaminer les autres. Il en va de même pour l’hygiène numérique. Même si vous ne vous sentez pas concerné·e, peut-être aurez-vous envie d’adopter certaines règles d’hygiène par respect ou affection pour vos proches qui se sentent concerné. Par exemple, si vous permettez à une application ou un site Web d’accéder à votre carnet d’adresse, vous divulguez sans leur consentement des données personnelles sur vos proches. Si un·e ami m’a référencé dans son répertoire téléphonique en tant que Clochix et un·e autre en tant que Papa-de-XXXX, un site accédant à ces deux répertoires pourra faire le lien entre mes différentes identités, et mettrez à bas les efforts que je fais pour me protéger.

  517. Si vous mettez en ligne des photos de vos proches, vous perdez le contrôle sur ces photos et ne savez pas quels usages pourront en être faits demain.</p>

  518. 

  519. <p>Avoir de l’hygiène, c’est donc aussi protéger ses proches, ses collègues…</p>

  520. 

  521. <h3><a name="De_l’hygiene_individuelle_a_l’ecologisme" href="#De_l’hygiene_individuelle_a_l’ecologisme" class="anchor"># </a>De l’hygiène individuelle à l’écologisme</h3>

  522. 

  523. <p>Parmi les risques évoqués plus haut, certains nous concernent directement. D’autres affectent plus globalement la société dans son ensemble, par exemple lorsque nos informations sont utilisées à grande échelle pour influencer nos votes. Il est possible que les élections d’Obama et de Trump, entre autres, aient été influencées par des outils se basant sur la masse d’informations que nous laissons en ligne.</p>

  524. 

  525. <p>La surveillance de masse, qu’elle soit réelle ou supposée, nous pousse à l’auto-censure. Est-ce que si je cherche « Daesh » sur Internet, je ne vais pas devenir suspect ? Est-ce qu’une opinion exprimée aujourd’hui sur Twitter dans un certain contexte ne pourra pas être ressortie demain, dans un autre contexte, et me nuire ? Tout cela pousse à l’auto-censure et sclérose peu à peu le débat démocratique.

  526. Un autre risque est ce que l’on appelle les bulles de filtres, même si leur existence fait débat. Une bulle de filtres, c’est lorsque tous les sites que nous consultons détectent les informations qui nous plaisent et ne nous affichent plus que celles-ci. Cela nous donne du monde une vision biaisée.</p>

  527. 

  528. <p>Ces enjeux dépassent donc largement nos situations individuelles.</p>

  529. 

  530. <p>Lorsqu’on parle d’hygiène, on pense d’abord à des mesures de protection individuelles, comme se laver les mains ou bloquer les cookies. Mais il ne faut pas oublier que l’hygiène est aussi un enjeu collectif : « l’hygiène est un enjeu de santé publique, l’accès à un environnement propre et sain étant une condition première du développement durable. » (Wikipedia). L’hygiène numérique ne peut donc se limiter à des actions reposant sur les individus, ça n’est pas que de notre responsabilité. Il faut aussi penser ces questions et prendre des mesures au niveau de la collectivité. Et, de manière plus globale, il faudrait réfléchir à la notion d’écologisme numérique. L’espace numérique fait partie intégrante de l’environnement dans lequel évolue l’espèce humaine, et comme tel doit être protégé.</p>

  531. 

  532. <h3><a name="Ok_et_a_present,_qu’est-ce_qu’on_fait_?" href="#Ok_et_a_present,_qu’est-ce_qu’on_fait_?" class="anchor"># </a>Ok et à présent, qu’est-ce qu’on fait ?</h3>

  533. 

  534. <p>Il n’y a pas d’outils magiques. Utiliser des outils sans avoir un minimum de compréhension du contexte technique, c’est se tirer pratiquement à coup sûr une balle dans le pied. Un faux sentiment de sécurité incite à l’imprudence. C’est comme croire qu’une fois la porte fermée on peu se promener à poil chez soi, parce qu’on ignore l’existence des fenêtres.</p>

  535. 

  536. <p>La meilleure des protections, c’est l’éducation. C’est acquérir une compréhension du fonctionnement des outils numériques. Connaître les techniques qui permettent de porter atteinte à notre intimité. Les techniques qui, à partir de nos informations intimes, permettent de nous influencer ou de décider de nos vies. Donc : éduquons nous !</p>

  537. 

  538. <p>Il ne faut pas se le cacher, se protéger demande une vigilance de tous les instants, souvent épuisante. Il faut donc être convaincu·e de l’importance d’adopter une certaine discipline.</p>

  539. 

  540. <p>La seule information qui ne pourra pas être utilisée, c’est celle qui n’existe pas (et encore…). Il faut donc selon moi essayer de réduire au maximum son empreinte, les traces que l’on laisse. Le numérique permet de compiler une foule d’informations insignifiantes pour en extraire du sens. Avoir accès à un de vos tickets de caisse ne dit pas forcément grand chose de vous. Avoir accès à tous vos tickets de caisse permet de connaître votre situation familiale (tiens, iel achète des gâteaux pour enfants une semaine sur deux) ou financière, vos convictions (iel a arrêté d’acheter de la viande de porc et de l’alcool, signe de radicalisation…). C’est donc une gymnastique quotidienne pour essayer de réduire au maximum ce que l’on dévoile : bloquer systématiquement tous les cookies sauf pour les sites sur lesquels c’est indispensable (et c’est là qu’on en vient à la nécessaire compréhension du fonctionnement), refuser si possible les cartes de fidélité, désactiver le Wifi et le Bluetooth sur son téléphone lorsqu’on ne les utilise pas… C’est une gymnastique contraignante.</p>

  541. 

  542. <p>Essayez aussi de compartimenter : si vous tenez un carnet Web sur un sujet polémique, essayez d’éviter qu’on puisse faire le lien avec notre état civil (sur le long terme, c’est très très difficile à tenir). <em>A minima</em>, avoir plusieurs profils / plusieurs adresses mail, etc, et ne pas les lier entre elles permet de réduire les risques. Quelqu’un qui vous ciblera pourra faire le lien, mais les programmes de collecte automatique de données ne chercheront pas forcément à recouper.</p>

  543. 

  544. <p>Compartimentez aussi vos outils : par exemple, utilisez deux navigateurs différents (ou un navigateur avec deux profils) : dans l’un, bloquez tout ce qui permet de vous pister et accédez aux sites qui n’ont pas besoin de savoir qui vous êtes. Utilisez l’autre, moins protégé, uniquement pour les sites nécessitant une connexion (webmail, réseaux sociaux, etc).</p>

  545. 

  546. <p>Méfiez-vous comme de la peste des photos et des vidéos. De vous, de vos proches, de quiconque. Demain, en cherchant votre nom, il sera possible de vous identifier sur cette photo prise voilà 20 ans où vous montriez vos fesses. Avez-vous vraiment envie que vos enfants vous voient ainsi ? Demain, en cherchant le nom de votre enfant, ses camarades de classe pourront retrouvé une vidéo de ellui à deux ans sur le pot. Hier vous trouviez cette photo adorable, aujourd’hui elle va lui valoir des torrents de moqueries.</p>

  547. 

  548. <p>Contre la malveillance, il faut naturellement utiliser des pratiques et outils qui relèvent davantage de la sécurité informatique : par exemple des mots de passe complexes, différents pour chaque service.</p>

  549. 

  550. <p>Pour aller plus loin, je vous encourage à vous renseigner sur le chiffrement : de vos communications, de vos données. Attention, le chiffrement est un sujet relativement complexe, ça n’est à utiliser qu’en ayant une vague idée de ce que vous faites.</p>

  551. 

  552. <p>Et, naturellement, portez en toutes circonstances un chandail à capuche noir et une cagoule, histoire de rester discret.</p>

  553. 

  554. <p>Et pour terminer, parce que nous ne sommes que des nains sur l’épaule de géants, <a href="https://mastodon.xyz/@bayartb/100884102257891893">une citation</a> que je vous laisse méditer :</p>

  555. 

  556. <p>«<strong> la solution est forcément dans une articulation entre politique (parce que c’est un problème de société) et technique (parce que les outils actuels permettent). Et il faut bien les deux volets, un seul, ça ne sert à rien. </strong>» (Benjamin Bayart).</p>

  557.   </article>

  558. </section>

  559. 

  560. 

  561. <nav id="jumpto">

  562.   <p>

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

  564.     <a href="https://clochix.net/marges/181014-cvp2018-10-14">Source originale</a> |

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

  566.   </p>

  567. </nav>

  568. 

  569. <footer>

  570.   <div>

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

  572.     <p>

  573.       Bonjour/Hi!

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

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

  576.     </p>

  577.     <p>

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

  579.     </p>

  580.     

  581.     <p>

  582.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  599.     </p>

  600.     <p>

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

  602.     </p>

  603.     <p>

  604.       Je ne traque pas ta navigation mais mon

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

  606.       conserve des logs d’accès.

  607.     </p>

  608.   </div>

  609. </footer>

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

  611.   ;(_ => {

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

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

  614.       e.preventDefault()

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

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

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

  618.     })

  619.   })()

  620. </script>