Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
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 31KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843
  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>Testament numérique — 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. <!-- Canonical URL for SEO purposes -->
  28. <link rel="canonical" href="https://larlet.fr/david/blog/2013/testament-numerique/">
  29. <!-- SEO/Semantic metadata -->
  30. <meta name="description" content="Anticiper ce moment permet de relativiser la valeur numérique actuelle de mes données et de leurs usages." />
  31. <meta name="twitter:description" property="og:description" itemprop="description" content="Anticiper ce moment permet de relativiser la valeur numérique actuelle de mes données et de leurs usages." />
  32. <meta name="twitter:title" property="og:title" itemprop="name" content="Testament numérique" />
  33. <meta name="twitter:card" content="summary" />
  34. <meta name="twitter:creator" content="@davidbgk" />
  35. <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2013/testament-numerique/" />
  36. <meta property="og:type" content="article" />
  37. <meta property="og:site_name" content="David Larlet (@davidbgk)" />
  38. <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/david-larlet-avatar-thumbnail.jpg" />
  39. <style>
  40. /* http://meyerweb.com/eric/tools/css/reset/ */
  41. html, body, div, span,
  42. h1, h2, h3, h4, h5, h6, p, blockquote, pre,
  43. a, abbr, address, big, cite, code,
  44. del, dfn, em, img, ins,
  45. small, strike, strong, tt, var,
  46. dl, dt, dd, ol, ul, li,
  47. fieldset, form, label, legend,
  48. table, caption, tbody, tfoot, thead, tr, th, td,
  49. article, aside, canvas, details, embed,
  50. figure, figcaption, footer, header, hgroup,
  51. menu, nav, output, ruby, section, summary,
  52. time, mark, audio, video {
  53. margin: 0;
  54. padding: 0;
  55. border: 0;
  56. font-size: 100%;
  57. font: inherit;
  58. vertical-align: baseline;
  59. }
  60. /* HTML5 display-role reset for older browsers */
  61. article, aside, details, figcaption, figure,
  62. footer, header, hgroup, menu, nav, section { display: block; }
  63. body { line-height: 1; }
  64. blockquote, q { quotes: none; }
  65. blockquote:before, blockquote:after,
  66. q:before, q:after {
  67. content: '';
  68. content: none;
  69. }
  70. table {
  71. border-collapse: collapse;
  72. border-spacing: 0;
  73. }
  74. /* http://practicaltypography.com/equity.html */
  75. /* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
  76. /* https://www.filamentgroup.com/lab/js-web-fonts.html */
  77. @font-face {
  78. font-family: 'EquityTextB';
  79. src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
  80. url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  81. font-weight: 300;
  82. font-style: normal;
  83. font-display: swap;
  84. }
  85. @font-face {
  86. font-family: 'EquityTextB';
  87. src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
  88. url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  89. font-weight: 300;
  90. font-style: italic;
  91. font-display: swap;
  92. }
  93. @font-face {
  94. font-family: 'EquityTextB';
  95. src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
  96. url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  97. font-weight: 700;
  98. font-style: normal;
  99. font-display: swap;
  100. }
  101. @font-face {
  102. font-family: 'ConcourseT3';
  103. src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
  104. url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  105. font-weight: 300;
  106. font-style: normal;
  107. font-display: swap;
  108. }
  109. /* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
  110. body {
  111. /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  112. font-family: "EquityTextB", Palatino, serif;
  113. background-color: #f0f0ea;
  114. color: #07486c;
  115. font-kerning: normal;
  116. -moz-osx-font-smoothing: grayscale;
  117. -webkit-font-smoothing: subpixel-antialiased;
  118. text-rendering: optimizeLegibility;
  119. font-variant-ligatures: common-ligatures contextual;
  120. font-feature-settings: "kern", "liga", "clig", "calt";
  121. }
  122. pre, code, kbd, samp, var, tt {
  123. font-family: 'TriplicateT4c', monospace;
  124. }
  125. em {
  126. font-style: italic;
  127. color: #323a45;
  128. }
  129. strong {
  130. font-weight: bold;
  131. color: black;
  132. }
  133. nav {
  134. background-color: #323a45;
  135. color: #f0f0ea;
  136. display: flex;
  137. justify-content: space-around;
  138. padding: 1rem .5rem;
  139. }
  140. nav:last-child {
  141. border-bottom: 1vh solid #2d7474;
  142. }
  143. nav a {
  144. color: #f0f0ea;
  145. }
  146. nav abbr {
  147. border-bottom: 1px dotted white;
  148. }
  149. h1 {
  150. border-top: 1vh solid #2d7474;
  151. border-bottom: .2vh dotted #2d7474;
  152. background-color: #e3e1e1;
  153. color: #323a45;
  154. text-align: center;
  155. padding: 5rem 0 4rem 0;
  156. width: 100%;
  157. font-family: 'ConcourseT3';
  158. display: flex;
  159. flex-direction: column;
  160. }
  161. h1.single {
  162. padding-bottom: 10rem;
  163. }
  164. h1 span {
  165. position: absolute;
  166. top: 1vh;
  167. left: 20%;
  168. line-height: 0;
  169. }
  170. h1 span a {
  171. line-height: 1.7;
  172. padding: 1rem 1.2rem .6rem 1.2rem;
  173. border-radius: 0 0 6% 6%;
  174. background: #2d7474;
  175. font-size: 1.3rem;
  176. color: white;
  177. text-decoration: none;
  178. }
  179. h2 {
  180. margin: 4rem 0 1rem;
  181. border-top: .2vh solid #2d7474;
  182. padding-top: 1vh;
  183. }
  184. h3 {
  185. text-align: center;
  186. margin: 3rem 0 .75em;
  187. }
  188. hr {
  189. height: .4rem;
  190. width: .4rem;
  191. border-radius: .4rem;
  192. background: #07486c;
  193. margin: 2.5rem auto;
  194. }
  195. time {
  196. display: bloc;
  197. margin-left: 0 !important;
  198. }
  199. ul, ol {
  200. margin: 2rem;
  201. }
  202. ul {
  203. list-style-type: square;
  204. }
  205. a {
  206. text-decoration-skip-ink: auto;
  207. text-decoration-thickness: 0.05em;
  208. text-underline-offset: 0.09em;
  209. }
  210. article {
  211. max-width: 50rem;
  212. display: flex;
  213. flex-direction: column;
  214. margin: 2rem auto;
  215. }
  216. article.single {
  217. border-top: .2vh dotted #2d7474;
  218. margin: -6rem auto 1rem auto;
  219. background: #f0f0ea;
  220. padding: 2rem;
  221. }
  222. article p:last-child {
  223. margin-bottom: 1rem;
  224. }
  225. p {
  226. padding: 0 .5rem;
  227. margin-left: 3rem;
  228. }
  229. p + p,
  230. figure + p {
  231. margin-top: 2rem;
  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. figure {
  249. border-top: .2vh solid #2d7474;
  250. background-color: #e3e1e1;
  251. text-align: center;
  252. padding: 1.5rem 0;
  253. margin: 1rem 0 0;
  254. font-size: 1.5rem;
  255. width: 100%;
  256. }
  257. figure img {
  258. max-width: 250px;
  259. max-height: 250px;
  260. border: .5vw solid #323a45;
  261. padding: 1px;
  262. }
  263. figcaption {
  264. padding: 1rem;
  265. line-height: 1.4;
  266. }
  267. aside {
  268. display: flex;
  269. flex-direction: column;
  270. background-color: #e3e1e1;
  271. padding: 1rem 0;
  272. border-bottom: .2vh solid #07486c;
  273. }
  274. aside p {
  275. max-width: 50rem;
  276. margin: 0 auto;
  277. }
  278. /* https://fvsch.com/code/css-locks/ */
  279. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  280. font-size: 1rem;
  281. line-height: calc( 1.5em + 0.2 * 1rem );
  282. }
  283. h1 {
  284. font-size: 1.9rem;
  285. line-height: calc( 1.2em + 0.2 * 1rem );
  286. }
  287. h2 {
  288. font-size: 1.6rem;
  289. line-height: calc( 1.3em + 0.2 * 1rem );
  290. }
  291. h3 {
  292. font-size: 1.35rem;
  293. line-height: calc( 1.4em + 0.2 * 1rem );
  294. }
  295. @media (min-width: 20em) {
  296. /* The (100vw - 20rem) / (50 - 20) part
  297. resolves to 0-1rem, depending on the
  298. viewport width (between 20em and 50em). */
  299. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  300. font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
  301. line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
  302. margin-left: 0;
  303. }
  304. h1 {
  305. font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  306. line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  307. }
  308. h2 {
  309. font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  310. line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  311. }
  312. h3 {
  313. font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
  314. line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  315. }
  316. }
  317. @media (min-width: 50em) {
  318. /* The right part of the addition *must* be a
  319. rem value. In this example we *could* change
  320. the whole declaration to font-size:2.5rem,
  321. but if our baseline value was not expressed
  322. in rem we would have to use calc. */
  323. p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  324. font-size: calc( 1rem + .6 * 1rem );
  325. line-height: 1.5em;
  326. }
  327. p, li, pre, details {
  328. margin-left: 3rem;
  329. }
  330. h1 {
  331. font-size: calc( 1.9rem + 1.5 * 1rem );
  332. line-height: 1.2em;
  333. }
  334. h2 {
  335. font-size: calc( 1.5rem + 1.5 * 1rem );
  336. line-height: 1.3em;
  337. }
  338. h3 {
  339. font-size: calc( 1.35rem + 1.5 * 1rem );
  340. line-height: 1.4em;
  341. }
  342. figure img {
  343. max-width: 500px;
  344. max-height: 500px;
  345. }
  346. }
  347. figure.unsquared {
  348. margin-bottom: 1.5rem;
  349. }
  350. figure.unsquared img {
  351. height: inherit;
  352. }
  353. @media print {
  354. body { font-size: 100%; }
  355. a:after { content: " (" attr(href) ")"; }
  356. a, a:link, a:visited, a:after {
  357. text-decoration: underline;
  358. text-shadow: none !important;
  359. background-image: none !important;
  360. background: white;
  361. color: black;
  362. }
  363. abbr[title] { border-bottom: 0; }
  364. abbr[title]:after { content: " (" attr(title) ")"; }
  365. img { page-break-inside: avoid; }
  366. @page { margin: 2cm .5cm; }
  367. h1, h2, h3 { page-break-after: avoid; }
  368. p3 { orphans: 3; widows: 3; }
  369. img {
  370. max-width: 250px !important;
  371. max-height: 250px !important;
  372. }
  373. nav, aside { display: none; }
  374. }
  375. ul.with_columns {
  376. column-count: 1;
  377. }
  378. @media (min-width: 20em) {
  379. ul.with_columns {
  380. column-count: 2;
  381. }
  382. }
  383. @media (min-width: 50em) {
  384. ul.with_columns {
  385. column-count: 3;
  386. }
  387. }
  388. ul.with_two_columns {
  389. column-count: 1;
  390. }
  391. @media (min-width: 20em) {
  392. ul.with_two_columns {
  393. column-count: 1;
  394. }
  395. }
  396. @media (min-width: 50em) {
  397. ul.with_two_columns {
  398. column-count: 2;
  399. }
  400. }
  401. .gallery {
  402. display: flex;
  403. flex-wrap: wrap;
  404. justify-content: space-around;
  405. }
  406. .gallery figure img {
  407. margin-left: 1rem;
  408. margin-right: 1rem;
  409. }
  410. .gallery figure figcaption {
  411. font-family: 'ConcourseT3'
  412. }
  413. footer {
  414. font-family: 'ConcourseT3';
  415. display: flex;
  416. flex-direction: column;
  417. border-top: 3px solid white;
  418. padding: 4rem 0;
  419. background-color: #07486c;
  420. color: white;
  421. }
  422. footer > * {
  423. max-width: 50rem;
  424. margin: 0 auto;
  425. }
  426. footer a {
  427. color: #f1c40f;
  428. }
  429. footer .avatar {
  430. width: 200px;
  431. height: 200px;
  432. border-radius: 50%;
  433. float: left;
  434. -webkit-shape-outside: circle();
  435. shape-outside: circle();
  436. margin-right: 2rem;
  437. padding: 2px 5px 5px 2px;
  438. background: white;
  439. border-left: 1px solid #f1c40f;
  440. border-top: 1px solid #f1c40f;
  441. border-right: 5px solid #f1c40f;
  442. border-bottom: 5px solid #f1c40f;
  443. }
  444. </style>
  445. <h1 class="single">
  446. <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  447. Testament numérique
  448. <time>Publié le 16 janvier 2013</time>
  449. </h1>
  450. <article class="single">
  451. <blockquote>
  452. <p>There's an old joke among programmers about who will maintain the code when its author gets hit by a truck. This page is here so that if for some reason I'm no longer able to keep my web services running, people will know what to do.</p>
  453. <p><cite> Aaron Swartz, <em><a href="http://www.aaronsw.com/2002/continuity">If I get hit by a truck…</a></em></cite></p>
  454. </blockquote>
  455. <p>J'ai découvert cette page après avoir appris le suicide de l'auteur. <a href="http://www.aaronsw.com/">Aaron a fait énormément de choses durant les 26 années de sa vie</a>, dont <a href="http://webpy.org/">web.py</a> qui m'avait fait découvrir le développement web <em>avec Python</em>, chose que je pensais impossible à l'époque mais aussi <a href="https://public.resource.org/open_government_meeting.html">participé à la définition</a> de l'<em>OpenData</em> en 2007. Les circonstances de sa mort sont clairement <a href="http://lessig.tumblr.com/post/40347463044/prosecutor-as-bully">honteuses</a>.</p>
  456. <p>Ce contexte sordide m'amène à me questionner sur cette notion de <em>testament numérique</em>, ou plutôt d'<em>héritage numérique</em>. À qui confier une telle tâche ? Pour quelles raisons ? À quels coûts ?</p>
  457. <p>Allons-y par catégories, si je venais à ne plus être en mesure de gérer mon identité numérique :</p>
  458. <ul>
  459. <li><em>annonce</em> : je souhaite qu'Émilie s'occupe de l'annonce de mon décès aux personnes me contactant directement par mail et publie la page d'accueil dédiée sur ce site avec la commande <code>cd ~/Sites/larlet/ &amp;&amp; workon larlet &amp;&amp; fab dead</code> ;</li>
  460. <li><em>données personnelles</em> : je souhaite que mes mails soient supprimés définitivement et que mes comptes de services web soient fermés, un mois après la précédente annonce ;</li>
  461. <li><em>écrits</em> : je souhaite que l'intégralité de mes écrits numériques soient élevés dans le domaine public, ceci incluant le site internet ci-présent, les d'articles en cours sont confiés à Émilie qui est libre de les publier en l'état ;</li>
  462. <li><em>media</em> : je souhaite que les media (photos et vidéos) soient confiés à Émilie qui est libre d'en publier certaines selon son bon jugement ;</li>
  463. <li><em>code</em> : je souhaite que le code non libéré en <code>open-source</code> soit supprimé, excepté le code en cours pour des clients qui leur revient (même s'ils ont normalement déjà accès au dépôt du projet), le <em>copyright</em> du code est transféré à <a href="http://scopyleft.fr">scopyleft</a> ;</li>
  464. <li><em>gestion</em> : je souhaite que <a href="http://www.la-grange.net/">Karl Dubost</a> s'occupe de gérer la pérennité de la publication du site et du nom de domaine associé aussi longtemps qu'il le juge nécessaire, cela représente 100 Mo de fichiers statiques et 1 Go de bande passante par mois à ce jour, le domaine <code>larlet.fr</code> est réservé jusqu'au 26 juillet 2015 et son certificat <code>SSL</code> valide jusqu'au 25 décembre 2015 (coût pour l'ensemble d'environ 25€ par an avec un crédit pré-payé de 50€ chez Gandi) ;</li>
  465. <li><em>matériel</em> : je souhaite que le matériel informatique qui n'appartient pas à <a href="http://scopyleft.fr">scopyleft</a> soit donné à une association dans l'éducation et le web, après formatage bas niveau des disques durs.</li>
  466. </ul>
  467. <p>En rédigeant ce testament, je me rends compte à quel point certaines choses sont futiles et d'autres extrêmement importantes pour assurer cette transmission (accès, documentation, etc). <strong>Anticiper ce moment permet de relativiser la valeur numérique actuelle de mes données et de leurs usages.</strong></p>
  468. <p><em>Dans le cas où Karl serait inapte lui-même à ce moment là, je laisse son propre héritier numérique (<a href="http://www.la-grange.net/2013/01/18/testament">Olivier à ce jour</a>) gérer ce moment.</em></p>
  469. <p><em>PS : cette page fait office de référence et sera mise à jour au cours du temps. Voir le <a href="/david/blog/2013/mort-anticipation/">billet relatif</a> également.</em></p>
  470. </article>
  471. <section>
  472. <h3>Discussion suite à l’article :</h3>
  473. <article id="comment-1" class="comment">
  474. <blockquote>
  475. <p>Les circonstances de sa mort sont clairement honteuses.</p>
  476. </blockquote>
  477. <p>Alors d’accord, il était poursuivi parce que le MIT n’avait pas abandonné sa plainte, mais en gros, ce que dit Lessig c’est : qu’Aaron voulait aller au procès, il mélange dans une seule et même relation sa santé et sa santé financière (il était quand même quasi milliionaire il y a 6 ans), et omet de préciser qu’il a connu dans le passé, et bien avant ses installations sauvages de portables dans les armoires, des épisodes dépressifs. Après pour les millions et les années de prisons, on rappelle que DSK encourait 74 années de prison, Mitnick a été condamné à 5 ans de prison sur 460 encourus, et Madoff condamné à 150 ans de prison... Donc "clairement honteux", c’est un peu fort à mon sens :-)</p>
  478. <p><cite>Damien B, le <a href="#comment-1">2013-01-16 à 23:56</a></cite></p>
  479. </article>
  480. <article id="comment-2" class="comment">
  481. <p>Quelques poursuites volontaires et involontaires par rapport à ce texte :</p>
  482. <ul>
  483. <li>18 janvier 2013 - <a href="http://www.la-grange.net/2013/01/18/testament">Des scories numériques</a></li>
  484. <li>31 janvier 2013 - <a href="http://www.tierslivre.net/spip/spip.php?article3351">de choisir son emplacement dans les grands cimetières</a></li>
  485. <li>1er février 2013 - <a href="http://www.la-grange.net/2013/02/01/cimetiere">à la poursuite d’un grand trou</a></li>
  486. <li>2 février 2013 - <a href="http://liber-libri.blogspot.fr/2013/02/vestiges.html">Vestiges</a></li>
  487. </ul>
  488. <p>Et peut-être d’autres non détectés.</p>
  489. <p><cite>Karl Dubost, le <a href="#comment-2">2013-02-04 à 11:58</a></cite></p>
  490. </article>
  491. <article id="comment-3" class="comment">
  492. <blockquote>
  493. <p>Et peut-être d'autres non détectés.</p>
  494. </blockquote>
  495. <p>Et ça continue :)</p>
  496. <ul>
  497. <li>6 février 2013 : <a href="http://www.tierslivre.net/spip/spip.php?article3389">tu fais quoi de ton site après mourir ?</a></li>
  498. <li>7 février 2013 : <a href="http://n.survol.fr/n/carte-de-donneur-au-domaine-public">Carte de donneur au domaine public</a></li>
  499. <li>7 février 2013 : <a href="http://nota-bene.org/Pratique-du-testament-numerique">Pratique du testament numérique</a></li>
  500. <li>7 février 2013 : <a href="http://blog.tcrouzet.com/2013/02/07/le-testament-ne-fait-pas-loeuvre/">Le testament ne fait pas l’œuvre</a></li>
  501. <li>19 octobre 2010 : <a href="https://unviolondingres.wordpress.com/2010/10/19/traces/">Traces</a></li>
  502. <li>11 avril 2013 : <a href="http://dataliberation.blogspot.fr/2013/04/plan-your-digital-afterlife-with.html">Plan your digital afterlife with Inactive Account Manager</a></li>
  503. </ul>
  504. <p>La proposition d'Éric compte-tenu de l'engouement pour la problématique est intéressante : <strong>un framework d'héritage numérique</strong> pour faciliter la transmission. Se pose toujours la question des identifiants / mots de passe qui pourrait être facilitée par des clés <code>SSH</code>.</p>
  505. <p><cite>David Larlet, le <a href="#comment-3">2013-02-07 à 22:09</a></cite></p>
  506. </article>
  507. </section>
  508. <nav id="jumpto">
  509. <p>
  510. <a rel=prev href="/david/blog/2013/villes-transitions/">← Villes en transitions</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2013/mort-anticipation/">Mort et anticipation →</a>
  511. </p>
  512. </nav>
  513. <footer>
  514. <div>
  515. <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
  516. <p>
  517. Bonjour/Hi!
  518. 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>
  519. 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>).
  520. </p>
  521. <p>
  522. 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>.
  523. </p>
  524. <p>
  525. Les dernières publications hebdomadaires sont :
  526. </p>
  527. <ul class="with_columns">
  528. <li>
  529. <a href="/david/stream/2019/12/31/">Merci</a>
  530. </li>
  531. <li>
  532. <a href="/david/stream/2019/12/27/">Intemporels</a>
  533. </li>
  534. <li>
  535. <a href="/david/stream/2019/12/24/">Outils</a>
  536. </li>
  537. <li>
  538. <a href="/david/stream/2019/12/17/">Origines</a>
  539. </li>
  540. <li>
  541. <a href="/david/stream/2019/12/10/">Publier</a>
  542. </li>
  543. <li>
  544. <a href="/david/stream/2019/12/03/">En forêt</a>
  545. </li>
  546. <li>
  547. <a href="/david/stream/2019/11/26/">Ecocentric</a>
  548. </li>
  549. <li>
  550. <a href="/david/stream/2019/11/19/">Se livrer</a>
  551. </li>
  552. <li>
  553. <a href="/david/stream/2019/11/12/">Dépendances</a>
  554. </li>
  555. <li>
  556. <a href="/david/stream/2019/11/05/">Positif</a>
  557. </li>
  558. <li>
  559. <a href="/david/stream/2019/10/29/">Dettes</a>
  560. </li>
  561. <li>
  562. <a href="/david/stream/2019/10/22/">Privilèges</a>
  563. </li>
  564. <li>
  565. <a href="/david/stream/2019/10/15/">Discrétion</a>
  566. </li>
  567. <li>
  568. <a href="/david/stream/2019/10/08/">Désespérance</a>
  569. </li>
  570. <li>
  571. <a href="/david/stream/2019/10/01/">Présent</a>
  572. </li>
  573. <li>
  574. <a href="/david/stream/2019/09/24/">Manifester</a>
  575. </li>
  576. <li>
  577. <a href="/david/stream/2019/09/17/">Arpenter</a>
  578. </li>
  579. <li>
  580. <a href="/david/stream/2019/09/10/">Nostalgie</a>
  581. </li>
  582. <li>
  583. <a href="/david/stream/2019/09/03/">Déconstruire</a>
  584. </li>
  585. <li>
  586. <a href="/david/stream/2019/08/27/">Documenter</a>
  587. </li>
  588. <li>
  589. <a href="/david/stream/2019/08/20/">Frustration</a>
  590. </li>
  591. <li>
  592. <a href="/david/stream/2019/08/13/">Holisme</a>
  593. </li>
  594. <li>
  595. <a href="/david/stream/2019/08/06/">1%</a>
  596. </li>
  597. <li>
  598. <a href="/david/stream/2019/07/30/">Exemplarité</a>
  599. </li>
  600. <li>
  601. <a href="/david/stream/2019/07/23/">Timelines</a>
  602. </li>
  603. <li>
  604. <a href="/david/stream/2019/07/16/">Écoute</a>
  605. </li>
  606. <li>
  607. <a href="/david/stream/2019/07/02/">Anxiété</a>
  608. </li>
  609. <li>
  610. <a href="/david/stream/2019/06/21/">À lier</a>
  611. </li>
  612. <li>
  613. <a href="/david/stream/2019/06/14/">Pauvreté</a>
  614. </li>
  615. <li>
  616. <a href="/david/stream/2019/06/07/">Amateur</a>
  617. </li>
  618. <li>
  619. <a href="/david/stream/2019/05/31/">Pollution</a>
  620. </li>
  621. <li>
  622. <a href="/david/stream/2019/05/24/">Apaisement</a>
  623. </li>
  624. <li>
  625. <a href="/david/stream/2019/05/10/">Folie</a>
  626. </li>
  627. <li>
  628. <a href="/david/stream/2019/05/03/">Sympathie</a>
  629. </li>
  630. <li>
  631. <a href="/david/stream/2019/04/12/">Péremption</a>
  632. </li>
  633. <li>
  634. <a href="/david/stream/2019/04/05/">Définitions</a>
  635. </li>
  636. <li>
  637. <a href="/david/stream/2019/03/29/">Acceptation</a>
  638. </li>
  639. <li>
  640. <a href="/david/stream/2019/03/22/">Dissonance</a>
  641. </li>
  642. <li>
  643. <a href="/david/stream/2019/03/15/">Reconnaissance</a>
  644. </li>
  645. <li>
  646. <a href="/david/stream/2019/03/08/">Lecture</a>
  647. </li>
  648. <li>
  649. <a href="/david/stream/2019/03/01/">Journaux</a>
  650. </li>
  651. <li>
  652. <a href="/david/stream/2019/02/22/">Écriture</a>
  653. </li>
  654. <li>
  655. <a href="/david/stream/2019/02/15/">Kyriarchie</a>
  656. </li>
  657. <li>
  658. <a href="/david/stream/2019/02/08/">Mots-serrures</a>
  659. </li>
  660. <li>
  661. <a href="/david/stream/2019/02/01/">Sans voie</a>
  662. </li>
  663. <li>
  664. <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>
  665. </li>
  666. <li>
  667. <a href="/david/stream/2019/01/18/">Agilité</a>
  668. </li>
  669. <li>
  670. <a href="/david/stream/2019/01/11/">Métaphores</a>
  671. </li>
  672. <li>
  673. <a href="/david/stream/2019/01/04/">Balbutiements</a>
  674. </li>
  675. </ul>
  676. <p>
  677. Voici quelques articles choisis :
  678. <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
  679. <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
  680. <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
  681. <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
  682. <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
  683. <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
  684. <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
  685. <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
  686. <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
  687. <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
  688. <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
  689. <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
  690. <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
  691. <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
  692. <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
  693. et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
  694. </p>
  695. <p>
  696. 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>.
  697. </p>
  698. <p>
  699. Je ne traque pas ta navigation mais mon
  700. <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
  701. conserve des logs d’accès.
  702. </p>
  703. </div>
  704. </footer>
  705. <script type="text/javascript">
  706. ;(_ => {
  707. const jumper = document.getElementById('jumper')
  708. jumper.addEventListener('click', e => {
  709. e.preventDefault()
  710. const anchor = e.target.getAttribute('href')
  711. const targetEl = document.getElementById(anchor.substring(1))
  712. targetEl.scrollIntoView({behavior: 'smooth'})
  713. })
  714. })()
  715. </script>
  716. <script>
  717. /* Service workers */
  718. if (navigator.serviceWorker) {
  719. window.addEventListener('load', function () {
  720. var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'
  721. function sendLinks (selector) {
  722. var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {
  723. return link.getAttribute('href')
  724. })
  725. links.push(location.pathname) // Put the current page in cache too.
  726. navigator.serviceWorker.controller.postMessage({ links: links })
  727. }
  728. navigator.serviceWorker.getRegistration()
  729. .then(function (registration) {
  730. if (!registration || !navigator.serviceWorker.controller) {
  731. return navigator.serviceWorker.register('/serviceworker.js')
  732. .then(navigator.serviceWorker.ready)
  733. .then(function () {
  734. console.log('[ServiceWorker] Ready to go!')
  735. })
  736. .catch(console.error.bind(console))
  737. } else {
  738. console.log('[ServiceWorker] Send links via registration')
  739. sendLinks(selector)
  740. }
  741. })
  742. navigator.serviceWorker.addEventListener('controllerchange', function () {
  743. console.log('[ServiceWorker] Send links via controller change')
  744. sendLinks(selector)
  745. })
  746. navigator.serviceWorker.addEventListener('message', function (event) {
  747. var link = document.querySelector('a[href="' + event.data.link + '"]')
  748. if (event.data.status && link) {
  749. link.style.backgroundColor = '#2d7474'
  750. link.style.color = '#f0f0ea'
  751. link.setAttribute('title', 'En cache pour consultation sans connexion')
  752. }
  753. })
  754. })
  755. } else {
  756. console.warn('[ServiceWorker] No cache for old browsers.')
  757. }
  758. </script>