A place to cache linked articles (think custom and personal wayback machine)
您最多选择25个主题 主题必须以字母或数字开头,可以包含连字符 (-),并且长度不得超过35个字符

index.html 24KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548
  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>Réponse à la lettre ouverte de @Feliwyn (archive) — David Larlet</title>
  13. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  14. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
  15. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
  16. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
  17. <link rel="manifest" href="/manifest.json">
  18. <link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
  19. <link rel="shortcut icon" href="/static/david/icons/favicon.ico">
  20. <meta name="apple-mobile-web-app-title" content="David Larlet">
  21. <meta name="application-name" content="David Larlet">
  22. <meta name="msapplication-TileColor" content="#da532c">
  23. <meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
  24. <meta name="theme-color" content="#f0f0ea">
  25. <!-- That good ol' feed, subscribe :p. -->
  26. <link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">
  27. <meta name="robots" content="noindex, nofollow">
  28. <meta content="origin-when-cross-origin" name="referrer">
  29. <!-- Canonical URL for SEO purposes -->
  30. <link rel="canonical" href="https://framabin.org/?ff4fa1bd25041a64#3JSPp4mNxT5f8NWIo3knJOUJMq0lEMaIP6HehEcWzsI=">
  31. <style>
  32. /* http://meyerweb.com/eric/tools/css/reset/ */
  33. html, body, div, span,
  34. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  35. a, abbr, address, big, cite, code,
  36. del, dfn, em, img, ins,
  37. small, strike, strong, tt, var,
  38. dl, dt, dd, ol, ul, li,
  39. fieldset, form, label, legend,
  40. table, caption, tbody, tfoot, thead, tr, th, td,
  41. article, aside, canvas, details, embed,
  42. figure, figcaption, footer, header, hgroup,
  43. menu, nav, output, ruby, section, summary,
  44. time, mark, audio, video {
  45. margin: 0;
  46. padding: 0;
  47. border: 0;
  48. font-size: 100%;
  49. font: inherit;
  50. vertical-align: baseline;
  51. }
  52. /* HTML5 display-role reset for older browsers */
  53. article, aside, details, figcaption, figure,
  54. footer, header, hgroup, menu, nav, section { display: block; }
  55. body { line-height: 1; }
  56. blockquote, q { quotes: none; }
  57. blockquote:before, blockquote:after,
  58. q:before, q:after {
  59. content: '';
  60. content: none;
  61. }
  62. table {
  63. border-collapse: collapse;
  64. border-spacing: 0;
  65. }
  66. /* http://practicaltypography.com/equity.html */
  67. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  68. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  69. @font-face {
  70. font-family: 'EquityTextB';
  71. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  72. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  73. font-weight: 300;
  74. font-style: normal;
  75. font-display: swap;
  76. }
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: italic;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  89. font-weight: 700;
  90. font-style: normal;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'ConcourseT3';
  95. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  96. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  97. font-weight: 300;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  102. body {
  103. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  104. font-family: "EquityTextB", Palatino, serif;
  105. background-color: #f0f0ea;
  106. color: #07486c;
  107. font-kerning: normal;
  108. -moz-osx-font-smoothing: grayscale;
  109. -webkit-font-smoothing: subpixel-antialiased;
  110. text-rendering: optimizeLegibility;
  111. font-variant-ligatures: common-ligatures contextual;
  112. font-feature-settings: "kern", "liga", "clig", "calt";
  113. }
  114. pre, code, kbd, samp, var, tt {
  115. font-family: 'TriplicateT4c', monospace;
  116. }
  117. em {
  118. font-style: italic;
  119. color: #323a45;
  120. }
  121. strong {
  122. font-weight: bold;
  123. color: black;
  124. }
  125. nav {
  126. background-color: #323a45;
  127. color: #f0f0ea;
  128. display: flex;
  129. justify-content: space-around;
  130. padding: 1rem .5rem;
  131. }
  132. nav:last-child {
  133. border-bottom: 1vh solid #2d7474;
  134. }
  135. nav a {
  136. color: #f0f0ea;
  137. }
  138. nav abbr {
  139. border-bottom: 1px dotted white;
  140. }
  141. h1 {
  142. border-top: 1vh solid #2d7474;
  143. border-bottom: .2vh dotted #2d7474;
  144. background-color: #e3e1e1;
  145. color: #323a45;
  146. text-align: center;
  147. padding: 5rem 0 4rem 0;
  148. width: 100%;
  149. font-family: 'ConcourseT3';
  150. display: flex;
  151. flex-direction: column;
  152. }
  153. h1.single {
  154. padding-bottom: 10rem;
  155. }
  156. h1 span {
  157. position: absolute;
  158. top: 1vh;
  159. left: 20%;
  160. line-height: 0;
  161. }
  162. h1 span a {
  163. line-height: 1.7;
  164. padding: 1rem 1.2rem .6rem 1.2rem;
  165. border-radius: 0 0 6% 6%;
  166. background: #2d7474;
  167. font-size: 1.3rem;
  168. color: white;
  169. text-decoration: none;
  170. }
  171. h2 {
  172. margin: 4rem 0 1rem;
  173. border-top: .2vh solid #2d7474;
  174. padding-top: 1vh;
  175. }
  176. h3 {
  177. text-align: center;
  178. margin: 3rem 0 .75em;
  179. }
  180. hr {
  181. height: .4rem;
  182. width: .4rem;
  183. border-radius: .4rem;
  184. background: #07486c;
  185. margin: 2.5rem auto;
  186. }
  187. time {
  188. display: bloc;
  189. margin-left: 0 !important;
  190. }
  191. ul, ol {
  192. margin: 2rem;
  193. }
  194. ul {
  195. list-style-type: square;
  196. }
  197. a {
  198. text-decoration-skip-ink: auto;
  199. text-decoration-thickness: 0.05em;
  200. text-underline-offset: 0.09em;
  201. }
  202. article {
  203. max-width: 50rem;
  204. display: flex;
  205. flex-direction: column;
  206. margin: 2rem auto;
  207. }
  208. article.single {
  209. border-top: .2vh dotted #2d7474;
  210. margin: -6rem auto 1rem auto;
  211. background: #f0f0ea;
  212. padding: 2rem;
  213. }
  214. article p:last-child {
  215. margin-bottom: 1rem;
  216. }
  217. p {
  218. padding: 0 .5rem;
  219. margin-left: 3rem;
  220. }
  221. p + p,
  222. figure + p {
  223. margin-top: 2rem;
  224. }
  225. blockquote {
  226. background-color: #e3e1e1;
  227. border-left: .5vw solid #2d7474;
  228. display: flex;
  229. flex-direction: column;
  230. align-items: center;
  231. padding: 1rem;
  232. margin: 1.5rem;
  233. }
  234. blockquote cite {
  235. font-style: italic;
  236. }
  237. blockquote p {
  238. margin-left: 0;
  239. }
  240. figure {
  241. border-top: .2vh solid #2d7474;
  242. background-color: #e3e1e1;
  243. text-align: center;
  244. padding: 1.5rem 0;
  245. margin: 1rem 0 0;
  246. font-size: 1.5rem;
  247. width: 100%;
  248. }
  249. figure img {
  250. max-width: 250px;
  251. max-height: 250px;
  252. border: .5vw solid #323a45;
  253. padding: 1px;
  254. }
  255. figcaption {
  256. padding: 1rem;
  257. line-height: 1.4;
  258. }
  259. aside {
  260. display: flex;
  261. flex-direction: column;
  262. background-color: #e3e1e1;
  263. padding: 1rem 0;
  264. border-bottom: .2vh solid #07486c;
  265. }
  266. aside p {
  267. max-width: 50rem;
  268. margin: 0 auto;
  269. }
  270. /* https://fvsch.com/code/css-locks/ */
  271. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  272. font-size: 1rem;
  273. line-height: calc( 1.5em + 0.2 * 1rem );
  274. }
  275. h1 {
  276. font-size: 1.9rem;
  277. line-height: calc( 1.2em + 0.2 * 1rem );
  278. }
  279. h2 {
  280. font-size: 1.6rem;
  281. line-height: calc( 1.3em + 0.2 * 1rem );
  282. }
  283. h3 {
  284. font-size: 1.35rem;
  285. line-height: calc( 1.4em + 0.2 * 1rem );
  286. }
  287. @media (min-width: 20em) {
  288. /* The (100vw - 20rem) / (50 - 20) part
  289. resolves to 0-1rem, depending on the
  290. viewport width (between 20em and 50em). */
  291. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  292. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  293. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  294. margin-left: 0;
  295. }
  296. h1 {
  297. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  298. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  299. }
  300. h2 {
  301. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  302. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  303. }
  304. h3 {
  305. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. }
  309. @media (min-width: 50em) {
  310. /* The right part of the addition *must* be a
  311. rem value. In this example we *could* change
  312. the whole declaration to font-size:2.5rem,
  313. but if our baseline value was not expressed
  314. in rem we would have to use calc. */
  315. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  316. font-size: calc( 1rem + .6 * 1rem );
  317. line-height: 1.5em;
  318. }
  319. p, li, pre, details {
  320. margin-left: 3rem;
  321. }
  322. h1 {
  323. font-size: calc( 1.9rem + 1.5 * 1rem );
  324. line-height: 1.2em;
  325. }
  326. h2 {
  327. font-size: calc( 1.5rem + 1.5 * 1rem );
  328. line-height: 1.3em;
  329. }
  330. h3 {
  331. font-size: calc( 1.35rem + 1.5 * 1rem );
  332. line-height: 1.4em;
  333. }
  334. figure img {
  335. max-width: 500px;
  336. max-height: 500px;
  337. }
  338. }
  339. figure.unsquared {
  340. margin-bottom: 1.5rem;
  341. }
  342. figure.unsquared img {
  343. height: inherit;
  344. }
  345. @media print {
  346. body { font-size: 100%; }
  347. a:after { content: " (" attr(href) ")"; }
  348. a, a:link, a:visited, a:after {
  349. text-decoration: underline;
  350. text-shadow: none !important;
  351. background-image: none !important;
  352. background: white;
  353. color: black;
  354. }
  355. abbr[title] { border-bottom: 0; }
  356. abbr[title]:after { content: " (" attr(title) ")"; }
  357. img { page-break-inside: avoid; }
  358. @page { margin: 2cm .5cm; }
  359. h1, h2, h3 { page-break-after: avoid; }
  360. p3 { orphans: 3; widows: 3; }
  361. img {
  362. max-width: 250px !important;
  363. max-height: 250px !important;
  364. }
  365. nav, aside { display: none; }
  366. }
  367. ul.with_columns {
  368. column-count: 1;
  369. }
  370. @media (min-width: 20em) {
  371. ul.with_columns {
  372. column-count: 2;
  373. }
  374. }
  375. @media (min-width: 50em) {
  376. ul.with_columns {
  377. column-count: 3;
  378. }
  379. }
  380. ul.with_two_columns {
  381. column-count: 1;
  382. }
  383. @media (min-width: 20em) {
  384. ul.with_two_columns {
  385. column-count: 1;
  386. }
  387. }
  388. @media (min-width: 50em) {
  389. ul.with_two_columns {
  390. column-count: 2;
  391. }
  392. }
  393. .gallery {
  394. display: flex;
  395. flex-wrap: wrap;
  396. justify-content: space-around;
  397. }
  398. .gallery figure img {
  399. margin-left: 1rem;
  400. margin-right: 1rem;
  401. }
  402. .gallery figure figcaption {
  403. font-family: 'ConcourseT3'
  404. }
  405. footer {
  406. font-family: 'ConcourseT3';
  407. display: flex;
  408. flex-direction: column;
  409. border-top: 3px solid white;
  410. padding: 4rem 0;
  411. background-color: #07486c;
  412. color: white;
  413. }
  414. footer > * {
  415. max-width: 50rem;
  416. margin: 0 auto;
  417. }
  418. footer a {
  419. color: #f1c40f;
  420. }
  421. footer .avatar {
  422. width: 200px;
  423. height: 200px;
  424. border-radius: 50%;
  425. float: left;
  426. -webkit-shape-outside: circle();
  427. shape-outside: circle();
  428. margin-right: 2rem;
  429. padding: 2px 5px 5px 2px;
  430. background: white;
  431. border-left: 1px solid #f1c40f;
  432. border-top: 1px solid #f1c40f;
  433. border-right: 5px solid #f1c40f;
  434. border-bottom: 5px solid #f1c40f;
  435. }
  436. </style>
  437. <h1>
  438. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  439. Réponse à la lettre ouverte de @Feliwyn (archive)
  440. <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
  441. </h1>
  442. <section>
  443. <article>
  444. <h3><a href="https://framabin.org/?ff4fa1bd25041a64#3JSPp4mNxT5f8NWIo3knJOUJMq0lEMaIP6HehEcWzsI=">Source originale du contenu</a></h3>
  445. <p>Réponse à la lettre ouverte de @Feliwyn : http://feliwyn.fr/Lettre-a-Framasoft.html</p>
  446. <h1>TL;DR :</h1>
  447. <ul>
  448. <li>pourquoi devrai-je avoir confiance en Framasoft ? : parce qu'on se fiche de vos données (ce n'est pas notre "modèle économique", qu'on fait de notre mieux pour les protéger, et qu'on engage ce que l'on est sur ce point.</li>
  449. <li>décentraliser mes données chez Framasoft, n'est pas juste déplacer le problème ? : Non. C'est à notre sens une première étape vers la réappropriation de vos données, par l'utilisation de solutions Libres (donc respectant VOS libertés) pour un hébergement collectif (de votre famille, entreprise, asso, administration, localité, etc.) et/ou un auto-hébergement.</li>
  450. </ul>
  451. <h1>Réponse détaillée :</h1>
  452. <p>Bonjour Feliwyn,</p>
  453. <p>Tes questions sont importantes, et comme elles sont posées publiquement et méritent de prendre plus de caractères que quelques tweets, nous avons décidé d'utiliser Framabin (en ouvrant les commentaires).</p>
  454. <p>Les soucis que tu relèves avec l'utilisation massive des services de GAFAM (centralisation et non-anonymisation des données) sont en effet primordiaux dans leurs modèles économiques et de fonctionnement. Leur principe est de connaître au mieux possible les utilisateurs et utilisatrices (quitte à exploiter les données des gens avec qui ils et elles sont en contact) et de construire un profil si détaillé qu'il deviendra une manne aussi bien dans la vente directe de services (Microsoft, Apple, Amazon etc.) que dans l'exploitation publicitaire de ces profils ultra-détaillés (Google, Facebook, etc.).</p>
  455. <p>Tu l'as bien compris, notre but est de sensibiliser les gens à ces enjeux, de proposer ( = de "faire goûter à") des alternatives et d'essaimer. C'est beaucoup plus logique pour quelqu'un-e d'auto-héberger son owncloud ou d'utiliser les services de Indie Hosters, la mère Zaclys et autres lorsque cette personne a déjà essayé et qu'il ou elle s'est habitué-e à owncloud.</p>
  456. <p>Concernant la protection des données mises sur nos serveurs, elle nous semble meilleure que chez GAFAM sur plusieurs points :</p>
  457. <p>1) Nous utilisons du logiciel Libre. Cela signifie que le code source (la recette de cuisine du logiciel) est disponible, et donc auditable. Toutes les personnes (qui en ont la capacité) peuvent le lire, déterminer s'il y a des portes dérobées visant à de l'espionnage publicitaire et/ou gouvernemental, ou encore trouver des failles de sécurité (c'est du code : il y en a toujours) et aider à les réparer. Personne (à part ces entreprises) ne peut assurer la même chose quant aux codes de Dropbox, GoogleDrive, OneDrive, Icloud...</p>
  458. <p>2) Nous sommes des "petits". Héberger 1500 comptes Owncloud est une grosse affaire pour nous, mais c'est une peccadille pour Google (pour info, notre budget représente 2.7 secondes du chiffre d'affaire annuel de Google ^^). Cela signifie que pour une agence gouvernementale ou pour un hacker/une hackeuse, nous sommes une cible franchement moins intéressante. L'essaimage des hébergements (et donc des données) a cet énorme avantage de sécurité face aux solutions centralisantes. De plus, nos admin-sys utilisent toutes les techniques à leur portée pour sécuriser vos données (utilisation de SSL/TLS, pare-feu, supervision et mises à jour, etc.). Il n'y a jamais de risque 0, mais nous tenons à protéger ce que vous nous confiez.</p>
  459. <p>3) Nos serveurs sont hébergés en Allemagne, alors que notre siège social dépend de la juridiction Française. Cela permet une complexité juridique de plus si jamais une agence gouvernementale nous oblige à fournir les données d'une personne nous les confiants. Néanmoins, nous avons précisé dans nos CGU que nous respecterons la loi et que nous demandons à qui utilise nos services de faire de même, quoi que l'on puisse en penser. Pour comparer, la plupart des services de GAFAM sont hébergés aux USA, dépendant donc des lois étasuniennes, où les agences gouvernementales ont une espèce d' "open bar" sur nos données (surtout si ce sont celles de personnes étrangères aux USA -_-).</p>
  460. <p>4) Nous utilisons, tant que faire se peut, le chiffrement de vos données (framapic, framabin, framadrop, etc.) Ce n'est pas le cas pour ton exemple sur Framadrive : un tel paramétrage nous aurait demandé des ressources (puissance, espace disque, etc) que nous n'avons pas. Cela aurait aussi imposé aux utilisatrices et utilisateurs une complexité qui peut aller à l'encontre de notre volonté d'éducation populaire au Libre. Mais surtout, dans ce cas précis, les clés de chiffrement auraient été sur le serveur, ce qui est finalement contre-productif (en cas de compromission du serveur, les clés l'auraient été aussi). Nous nous sommes posé la question, avons voté au sein de l'association, et nous sommes mis d'accord pour ne pas mettre en place cette solution pour l'instant pour Framadrive.</p>
  461. <p>5) Nous dépendons de vous (le public, les bénéficiaires de nos services). Framasoft est une association loi 1901, qui existe depuis 14 ans, et dont 80 % du budget dépend des dons (le reste est de la vente de goodies, et quelques prestations autour des projets Framakey ou Framapad). Si un jour nous "déconnons" avec vos données, cela se saura, se dira, les gens cesseront de nous faire confiance et donc de nous faire des dons... et l'asso comme nos projets mourront. Nous ne dépendons que de vous, c'est aussi simple que cela. Ce modèle économique fait notre fierté, car il nous rend indépendant de la pub, la vente de produits enfermant/privatifs et de l'exploitation des données, modèle cher à GAFAM.</p>
  462. <p>6) Enfin, et c'est le plus important : nous nous estimons dignes de confiance (sans avoir les chevilles qui gonflent, hein ^^). Hors de l'auto-hébergement, dès que l'on utilise un service web, on confie ses données à quelqu'un : le cloud n'existe pas, ce n'est que l'ordinateur d'autrui. Nous avons pleinement conscience que, dans le monde numérique, la réputation est un valeur souvent bien plus importante que l'argent. Des centaines (milliers ?) de personnes participant aux projets Framasoft ont aidé à construire cette réputation, et nous ne désirons pas l'engager à la légère. Lorsque nous engageons le nom de Framasoft sur une charte https://n1.framasoft.org/nav/html/charte.html et sur des conditions générales d'utilisation https://n1.framasoft.org/nav/html/cgu.html , ce n'est pas à la légère. Tout dans ces textes expliquent que nous n'avons que faire de vos données. Nous avons la chance d'avoir une communauté fidèle et exigeante, qui sait nous indiquer quand nous risquons de faire fausse route... et nous y sommes de fait très attentifs.</p>
  463. <p>Donc voilà : nous faisons de notre mieux avec vos données. Il se peut que ce ne soit pas suffisant : rien n'est jamais sûr à 100 %... on fait, simplement, du mieux que nous pouvons.</p>
  464. <p>Concernant la re-centralisation des données (quitter Google pour Framasoft), nous travaillons activement à faciliter l'essaimage de projet comme le nôtre, qui n'est d'ailleurs pas le premier : (lire cette BD http://framablog.org/2014/10/10/geektionnerd-degooglisons-internet/ ). Cela prendra du temps, car nous devons lutter contre des habitudes ancrées chez les utilisateurs, et contre des géants de l'internet qui ont infiniment plus de moyens que nous. Mais nous souhaitons faire notre part et continuer à agir pour faire découvrir au public des logiciels libres de qualité. Que certains considèrent cette qualité comme moindre n'en fait pas une faiblesse, mais un potentiel d'amélioration, et surtout un espace pour de la pédagogie, de la découverte, et une meilleure confrontation à des ergonomies, des logiques, mais surtout des valeurs différentes de celles proposées par GAFAM.</p>
  465. <p>Nous avons donné la plus grande attention à ce que notre mode de fonctionnement, nos façons de faire et nos outils correspondent à nos engagements et à nos valeurs. Tu me diras : GAFAM aussi (google assume le fait de lire tes emails et les pdf attachés afin de personnaliser Gmail et la pub que tu y trouves). Mais si tes données sont plus sûres chez nous que chez eux, nous pensons que c'est fondamentalement une question de valeurs.</p>
  466. <p>L'équipe Framasoft.</p>
  467. </article>
  468. </section>
  469. <nav id="jumpto">
  470. <p>
  471. <a href="/david/blog/">Accueil du blog</a> |
  472. <a href="https://framabin.org/?ff4fa1bd25041a64#3JSPp4mNxT5f8NWIo3knJOUJMq0lEMaIP6HehEcWzsI=">Source originale</a> |
  473. <a href="/david/stream/2019/">Accueil du flux</a>
  474. </p>
  475. </nav>
  476. <footer>
  477. <div>
  478. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  479. <p>
  480. Bonjour/Hi!
  481. 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>
  482. 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>).
  483. </p>
  484. <p>
  485. 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>.
  486. </p>
  487. <p>
  488. Voici quelques articles choisis :
  489. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  490. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  491. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  492. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  493. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  494. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  495. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  496. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  497. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  498. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  499. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  500. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  501. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  502. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  503. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  504. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  505. </p>
  506. <p>
  507. 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>.
  508. </p>
  509. <p>
  510. Je ne traque pas ta navigation mais mon
  511. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  512. conserve des logs d’accès.
  513. </p>
  514. </div>
  515. </footer>
  516. <script type="text/javascript">
  517. ;(_ => {
  518. const jumper = document.getElementById('jumper')
  519. jumper.addEventListener('click', e => {
  520. e.preventDefault()
  521. const anchor = e.target.getAttribute('href')
  522. const targetEl = document.getElementById(anchor.substring(1))
  523. targetEl.scrollIntoView({behavior: 'smooth'})
  524. })
  525. })()
  526. </script>