davidbgk
/
larlet-fr-david
ウォッチ 1
スター 0
フォーク 0
コード リリース 0 アクティビティ
Repository with sources and generator of https://larlet.fr/david/ https://larlet.fr/david/
選択できるのは25トピックまでです。 トピックは、先頭が英数字で、英数字とダッシュ('-')を使用した35文字以内のものにしてください。
100 コミット
1 ブランチ
ツリー: 09ceb349c0
ブランチ タグ
${ item.name }
ブランチ ${ searchTerm } を作成
'09ceb349c0' から
${ noResults }
larlet-fr-david/david/blog/2016/opendata-liens-casses/index.html

index.html 37KB
Raw Blame 履歴

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784785786787788789790791792793794795796797798799800801802803804805806807808809810811812813814815816817818819820821822823824825826827828829830831832833834835836837838839840841842843844845846847848849850851852 
  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>Opendata et liens cassés — 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.   <!-- Canonical URL for SEO purposes -->

  29.   <link rel="canonical" href="https://larlet.fr/david/blog/2016/opendata-liens-casses/">

  30.   <!-- SEO/Semantic metadata -->

  31.   <meta name="description" content="Le Web est un mandala sur lequel on souffle en continu." />

  32.   <meta name="twitter:description" property="og:description" itemprop="description" content="Le Web est un mandala sur lequel on souffle en continu." />

  33.   <meta name="twitter:title" property="og:title" itemprop="name" content="Opendata et liens cassés" />

  34.   <meta name="twitter:card" content="summary" />

  35.   <meta name="twitter:creator" content="@davidbgk" />

  36.   <meta name="twitter:url" property="og:url" content="https://larlet.fr/david/blog/2016/opendata-liens-casses/" />

  37.   <meta property="og:type" content="article" />

  38.   <meta property="og:site_name" content="David Larlet (@davidbgk)" />

  39. 

  40.   <meta name="twitter:image" property="og:image" itemprop="image" content="https://larlet.fr/static/david/blog/2016/opendata-liens-casses.jpg" />

  41. 

  42. 

  43. <style>

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

  45. html, body, div, span,

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

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

  48. del, dfn, em, img, ins,

  49. small, strike, strong, tt, var,

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

  51. fieldset, form, label, legend,

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

  53. article, aside, canvas, details, embed,

  54. figure, figcaption, footer, header, hgroup,

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

  56. time, mark, audio, video {

  57.   margin: 0;

  58.   padding: 0;

  59.   border: 0;

  60.   font-size: 100%;

  61.   font: inherit;

  62.   vertical-align: baseline;

  63. }

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

  65. article, aside, details, figcaption, figure,

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

  67. body { line-height: 1; }

  68. blockquote, q { quotes: none; }

  69. blockquote:before, blockquote:after,

  70. q:before, q:after {

  71.   content: '';

  72.   content: none;

  73. }

  74. table {

  75.   border-collapse: collapse;

  76.   border-spacing: 0;

  77. }

  78. 

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

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

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

  82. @font-face {

  83.   font-family: 'EquityTextB';

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

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

  86.   font-weight: 300;

  87.   font-style: normal;

  88.   font-display: swap;

  89. }

  90. @font-face {

  91.   font-family: 'EquityTextB';

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

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

  94.   font-weight: 300;

  95.   font-style: italic;

  96.   font-display: swap;

  97. }

  98. @font-face {

  99.   font-family: 'EquityTextB';

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

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

  102.   font-weight: 700;

  103.   font-style: normal;

  104.   font-display: swap;

  105. }

  106. 

  107. @font-face {

  108.   font-family: 'ConcourseT3';

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

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

  111.   font-weight: 300;

  112.   font-style: normal;

  113.   font-display: swap;

  114. }

  115. 

  116. 

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

  118. body {

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

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

  121.   background-color: #f0f0ea;

  122.   color: #07486c;

  123.   font-kerning: normal;

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

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

  126.   text-rendering: optimizeLegibility;

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

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

  129. }

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

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

  132. }

  133. em {

  134.   font-style: italic;

  135.   color: #323a45;

  136. }

  137. strong {

  138.   font-weight: bold;

  139.   color: black;

  140. }

  141. nav {

  142.   background-color: #323a45;

  143.   color: #f0f0ea;

  144.   display: flex;

  145.   justify-content: space-around;

  146.   padding: 1rem .5rem;

  147. }

  148.   nav:last-child {

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

  150.   }

  151.   nav a {

  152.     color: #f0f0ea;

  153.   }

  154.   nav abbr {

  155.     border-bottom: 1px dotted white;

  156.   }

  157. 

  158. h1 {

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

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

  161.   background-color: #e3e1e1;

  162.   color: #323a45;

  163.   text-align: center;

  164.   padding: 5rem 0 4rem 0;

  165.   width: 100%;

  166.   font-family: 'ConcourseT3';

  167.   display: flex;

  168.   flex-direction: column;

  169. }

  170.   h1.single {

  171.     padding-bottom: 10rem;

  172.   }

  173.   h1 span {

  174.     position: absolute;

  175.     top: 1vh;

  176.     left: 20%;

  177.     line-height: 0;

  178.   }

  179.     h1 span a {

  180.       line-height: 1.7;

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

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

  183.       background: #2d7474;

  184.       font-size: 1.3rem;

  185.       color: white;

  186.       text-decoration: none;

  187.     }

  188. h2 {

  189.   margin: 4rem 0 1rem;

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

  191.   padding-top: 1vh;

  192. }

  193. h3 {

  194.   text-align: center;

  195.   margin: 3rem 0 .75em;

  196. }

  197. hr {

  198.   height: .4rem;

  199.   width: .4rem;

  200.   border-radius: .4rem;

  201.   background: #07486c;

  202.   margin: 2.5rem auto;

  203. }

  204. time {

  205.   display: bloc;

  206.   margin-left: 0 !important;

  207. }

  208. ul, ol {

  209.   margin: 2rem;

  210. }

  211. ul {

  212.   list-style-type: square;

  213. }

  214. a {

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

  216.   text-decoration-thickness: 0.05em;

  217.   text-underline-offset: 0.09em;

  218. }

  219. article {

  220.   max-width: 50rem;

  221.   display: flex;

  222.   flex-direction: column;

  223.   margin: 2rem auto;

  224. }

  225.   article.single {

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

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

  228.     background: #f0f0ea;

  229.     padding: 2rem;

  230.   }

  231.   article p:last-child {

  232.     margin-bottom: 1rem;

  233.   }

  234. p {

  235.   padding: 0 .5rem;

  236.   margin-left: 3rem;

  237. }

  238.   p + p,

  239.   figure + p {

  240.     margin-top: 2rem;

  241.   }

  242. 

  243. blockquote {

  244.   background-color: #e3e1e1;

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

  246.   display: flex;

  247.   flex-direction: column;

  248.   align-items: center;

  249.   padding: 1rem;

  250.   margin: 1.5rem;

  251. }

  252.   blockquote cite {

  253.     font-style: italic;

  254.   }

  255.   blockquote p {

  256.     margin-left: 0;

  257.   }

  258. 

  259. figure {

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

  261.   background-color: #e3e1e1;

  262.   text-align: center;

  263.   padding: 1.5rem 0;

  264.   margin: 1rem 0 0;

  265.   font-size: 1.5rem;

  266.   width: 100%;

  267. }

  268.   figure img {

  269.     max-width: 250px;

  270.     max-height: 250px;

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

  272.     padding: 1px;

  273.   }

  274. figcaption {

  275.   padding: 1rem;

  276.   line-height: 1.4;

  277. }

  278. aside {

  279.   display: flex;

  280.   flex-direction: column;

  281.   background-color: #e3e1e1;

  282.   padding: 1rem 0;

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

  284. }

  285.   aside p {

  286.     max-width: 50rem;

  287.     margin: 0 auto;

  288.   }

  289. 

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

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

  292.   font-size: 1rem;

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

  294. }

  295. h1 {

  296.   font-size: 1.9rem;

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

  298. }

  299. h2 {

  300.   font-size: 1.6rem;

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

  302. }

  303. h3 {

  304.   font-size: 1.35rem;

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

  306. }

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

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

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

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

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

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

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

  314.     margin-left: 0;

  315.   }

  316.   h1 {

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

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

  319.   }

  320.   h2 {

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

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

  323.   }

  324.   h3 {

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

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

  327.   }

  328. }

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

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

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

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

  333.      but if our baseline value was not expressed

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

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

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

  337.     line-height: 1.5em;

  338.   }

  339.   p, li, pre, details {

  340.     margin-left: 3rem;

  341.   }

  342.   h1 {

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

  344.     line-height: 1.2em;

  345.   }

  346.   h2 {

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

  348.     line-height: 1.3em;

  349.   }

  350.   h3 {

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

  352.     line-height: 1.4em;

  353.   }

  354.   figure img {

  355.     max-width: 500px;

  356.     max-height: 500px;

  357.   }

  358. }

  359. 

  360. figure.unsquared {

  361.   margin-bottom: 1.5rem;

  362. }

  363.   figure.unsquared img {

  364.     height: inherit;

  365.   }

  366. 

  367. 

  368. 

  369. @media print {

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

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

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

  373.     text-decoration: underline;

  374.     text-shadow: none !important;

  375.     background-image: none !important;

  376.     background: white;

  377.     color: black;

  378.   }

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

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

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

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

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

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

  385.   img {

  386.     max-width: 250px !important;

  387.     max-height: 250px !important;

  388.   }

  389.   nav, aside { display: none; }

  390. }

  391. 

  392. ul.with_columns {

  393.   column-count: 1;

  394. }

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

  396.   ul.with_columns {

  397.     column-count: 2;

  398.   }

  399. }

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

  401.   ul.with_columns {

  402.     column-count: 3;

  403.   }

  404. }

  405. ul.with_two_columns {

  406.   column-count: 1;

  407. }

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

  409.   ul.with_two_columns {

  410.     column-count: 1;

  411.   }

  412. }

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

  414.   ul.with_two_columns {

  415.     column-count: 2;

  416.   }

  417. }

  418. 

  419. .gallery {

  420.   display: flex;

  421.   flex-wrap: wrap;

  422.   justify-content: space-around;

  423. }

  424.   .gallery figure img {

  425.     margin-left: 1rem;

  426.     margin-right: 1rem;

  427.   }

  428.   .gallery figure figcaption {

  429.     font-family: 'ConcourseT3'

  430.   }

  431. 

  432. footer {

  433.   font-family: 'ConcourseT3';

  434.   display: flex;

  435.   flex-direction: column;

  436.   border-top: 3px solid white;

  437.   padding: 4rem 0;

  438.   background-color: #07486c;

  439.   color: white;

  440. }

  441.   footer > * {

  442.     max-width: 50rem;

  443.     margin: 0 auto;

  444.   }

  445.   footer a {

  446.     color: #f1c40f;

  447.   }

  448.   footer .avatar {

  449.     width: 200px;

  450.     height: 200px;

  451.     border-radius: 50%;

  452.     float: left;

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

  454.     shape-outside: circle();

  455.     margin-right: 2rem;

  456.     padding: 2px 5px 5px 2px;

  457.     background: white;

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

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

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

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

  462.   }

  463. </style>

  464. 

  465. <h1 class="single">

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

  467.   Opendata et liens cassés

  468.   <time>Publié le 26 février 2016</time>

  469. </h1>

  470. <article class="single">

  471.   <p><em>Ceci est un résumé de mon intervention à <a href="https://confoo.ca">Confoo</a>.</em></p>

  472. <blockquote>

  473. <p>The quantity and variety of information we now produce has outpaced our ability to preserve it for the future. Librarians are the only ones who are making sure that our collective memory is preserved. And they, along with small teams of digital historians elsewhere, are still trying to understand the scope of myriad challenges involved in modern preservation. If today’s born-digital news stories are not automatically put into library storehouses, these stories are unlikely to survive in an accessible way.</p>

  474. <p><cite><em><a href="http://www.theatlantic.com/technology/archive/2015/11/the-irony-of-writing-about-digital-preservation/416184/">The Irony of Writing About Digital Preservation</a></em> (<a href="/david/cache/b74e15baff22ce27ad96166f56bdff36/">cache</a>)</cite></p>

  475. </blockquote>

  476. <p><strong>Le Web est un mandala sur lequel on souffle en continu.</strong> Nous serons potentiellement tous jugés pour crime contre le Web à force de participer à des <a href="/david/biologeek/archives/20091202-discussions-sur-les-applications-web-libres/">datacides</a> en cassant volontairement des liens. Que faire individuellement et collectivement pour en prendre conscience et inverser la tendance ?</p>

  477. <h2>Obsolescence numérique</h2>

  478. <blockquote>

  479. <p>In addition to improving the usability of the temporal web and helping to ensure the preservation of collective cultural heritage, designing for archivability will also tend to optimize your website for access by other crawlers, boost website performance, enhance usability for contemporary users, and improve the likelihood that you’ll be able to refer to and/or recover historical versions of your own web content.</p>

  480. <p><cite><em><a href="https://library.stanford.edu/projects/web-archiving/archivability">Stanford University Libraries</a></em> (<a href="/david/cache/5aa82a2b410df7ea8a2debd82d0502c4/">cache</a>)</cite></p>

  481. </blockquote>

  482. <p>Je ne vais pas reprendre les arguments <a href="/david/blog/2014/un-web-omni-present/">déjà détaillés par ailleurs</a>, la question n’est plus de savoir si vos données vont être hackées et/ou perdues mais quand. Est-ce qu’il s’agira d’un accident ? D’une attaque frontale ? D’un manque de soin apporté aux données ? D’une décision stratégico-économique ? D’une revente ?</p>

  483. <p>Quelle qu’en soit la raison, il faut apprendre à vivre avec.</p>

  484. <h2>Cacher le Web</h2>

  485. <blockquote>

  486. <p>The ability to follow links down and around and through an idea, landing hours later on some random Wikipedia page about fungi you cannot recall how you discovered, is one of the great modes of the web. It is, I’ll go so far to propose, one of the great modes of human thinking. </p>

  487. <p><cite><em><a href="http://aworkinglibrary.com/writing/follow-the-links/">Follow the links</a></em> (<a href="/david/cache/cbbb6529f7412868ba45d5e8b32323a5/">cache</a>)</cite></p>

  488. </blockquote>

  489. <p>Il existe <a href="http://archive.is/">des outils permettant</a> de <a href="https://archive.org/web/">cacher une page web</a>, et même d’y accéder avec <a href="http://oldweb.today/">un navigateur de l’époque</a> ou <a href="http://timetravel.mementoweb.org/">d’y voyager</a>. Cela fait maintenant <a href="/david/stream/2015/01/05/">plus d’un an</a> que je mets en cache les articles qui sont liés sur cet espace les considérant comme importants pour la réflexion qu’ils initient. Il est depuis possible d’installer <a href="http://amberlink.org/">un plugin Wordpress/Drupal</a> qui semble faire la même chose.</p>

  490. <p>La question des <a href="http://aworkinglibrary.com/writing/hypertext-for-all/">productions non textuelles</a> (<a href="/david/cache/ebd8dc34d8feec38a2810883d6741189/">cache</a>) reste de mise et nécessiterait d’augmenter la taille du cache de plusieurs ordres de grandeurs. Celle <a href="http://wolfslittlestore.be/2012/11/archivability-of-the-web/">du design</a> (<a href="/david/cache/76bd309dac6c1ddcb4dc3ee097a1bcb5/">cache</a>) également et pose une vraie contrainte technique quand aux moteurs de rendus qui évoluent.</p>

  491. <p>Que se passerait-il si cela devenait une pratique courante ? À quel point les <a href="/david/stream/2015/11/24/">service workers</a> vont-ils permettre d’automatiser cela ? <strong>Cacher une page non pas pour un rendu hors-ligne mais pour un rendu pérenne et/ou versionné.</strong></p>

  492. <p><em>Je me demande par exemple si l’intégration de <a href="https://github.com/kpdecker/jsdiff">jsdiff</a> permettrait d’afficher les évolutions du <a href="/david/lexique/">lexique</a> de manière personnalisée à partir de la version précédemment mise en cache.</em></p>

  493. <h2>Informer et éduquer</h2>

  494. <blockquote>

  495. <p>The aim of this project is to provide a way to check HTTP resources: hunting 404s, updating redirections and so on.</p>

  496. <p>For instance, given a website that stores a list of external resources (html, images or documents), this product allows the owner to send its URLs in bulk and retrieve information for each URL fetched in background (status code and useful headers for now). This way he can be informed of dead links or outdated resources and acts accordingly.</p>

  497. <p><cite><em><a href="https://github.com/davidbgk/croquemort">Croquemort</a></em></cite></p>

  498. </blockquote>

  499. <p>Je travaille sur <a href="https://www.data.gouv.fr/fr/">data.gouv.fr</a> depuis un an. La stratégie de la dernière version était de référencer plus que de dupliquer les données déjà hébergées par ailleurs. Nous manquions cruellement de visibilité sur la disponibilité de ces ressources distantes et nous avons décidé de développer un outil qui nous permette d’avoir des métriques à ce sujet. Ces données nous permettent d’avertir les producteurs en cas d’indisponibilité, d’informer les visiteurs de la non-disponibilité d’une ressource de manière quasi-synchrone et d’avoir un tableau de bord avec un score par producteur.</p>

  500. <p>Croquemort va <a href="/david/blog/2015/croquer-liens/">croquer les orteils des liens</a> à intervalles réguliers pour s’assurer qu’ils retournent toujours un <em>status code</em> pertinent. Il ne s’agit pas de culpabiliser ou de blamer les producteurs mais de les sensibiliser et de les responsabiliser pour avoir une discussion sur les origines de ces indisponibilités et trouver une solution ensemble.</p>

  501. <h2>5 ♥ de l’Opendata</h2>

  502. <p>Après les <a href="http://5stardata.info/en/">5 ★ de Tim Berners-Lee</a>, qui ont <a href="https://www.w3.org/DesignIssues/LinkedData.html">bientôt 6 ans</a> (<a href="/david/cache/8df6b7af9ac944275a13f0d0e97ad7d7/">cache</a>), il est temps de passer aux 5 ♥ plus contemporains (merci Twitter). Voici mes modestes propositions à challenger :</p>

  503. <ul>

  504. <li><strong>★ données disponibles (PDF) → ♥ pour longtemps</strong> : il ne s’agit plus de rendre uniquement les données disponibles à un instant t mais d’assurer une disponibilité dans le temps et le cas échéant les redirections appropriées.</li>

  505. <li><strong>★★ données structurées (XLS) → ♥♥ et (ré)utilisées</strong> : plus que leur structuration, c’est <a href="https://github.com/Quartz/bad-data-guide">la garantie</a> qu’elles sont déjà (ré)utilisées en interne qui leur donne de la valeur.</li>

  506. <li><strong>★★★ données non-propriétaires (CSV) → ♥♥♥ et documentées</strong> : si le format permet de <em>parser</em> plus rapidement les données, leur documentation permet de les comprendre plus rapidement et donc de les (ré)utiliser.</li>

  507. <li><strong>★★★★ données avec URI (RDF) → ♥♥♥♥ et redondantes</strong> : le fait d’introduire des URI donne une grande responsabilité aux producteurs, un cache décentralisant doit être mis en place pour assurer la continuité de <em>liaison</em>.</li>

  508. <li><strong>★★★★★ données avec liens (LOD) → ♥♥♥♥♥ et versionnées</strong> : les relations évoluent dans le temps et il faut penser le graphe des données en 3D dès son initiation, les <a href="https://www.mercurial-scm.org/">outils</a> <a href="http://git-scm.com/">techniques</a> existent pour avoir une traçabilité et un historique des modifications.</li>

  509. </ul>

  510. <p>Avec cette itération des recommandations, l’accent est mis sur la qualité des données plus que leur quantité. Trop de portails Opendata exposent des données inutilisables. <strong>L’objectif de l’Opendata n’est pas de publier des données mais de <a href="/david/blog/2013/opendata-citoyennete/">créer des synergies</a> entre les citoyens, les administrations et les entreprises.</strong></p>

  511. <h2>Date de péremption</h2>

  512. <blockquote>

  513. <p>“Les traces que les utilisateurs laissent derrière eux sont radioactives, elles continuent à pouvoir avoir un effet négatif jusque des années plus tard.” La plupart des données échappent à tout contrôle sérieux. “Elles sont échangées, modifiées, revendues. Mais surtout, comme les déchets nucléaires, elles restent.”</p>

  514. <p><cite><em><a href="http://www.internetactu.net/2015/10/20/faut-il-une-date-de-peremption-pour-les-donnees/">Faut-il une date de péremption pour les données ?</a></em> (<a href="/david/cache/8f33334066da6322f51118b15e39e482/">cache</a>)</cite></p>

  515. </blockquote>

  516. <p>D’un autre côté, il y a des données que l’on voudrait oublier et qui persistent, à notre insu. Comment introduire les notions de version et de temporalité dans les liens ? Cette question reste ouverte à ce jour et je ne connais pas d’initiative pour proposer un standard sur le sujet. Les <a href="/david/stream/2015/10/21/">journaux évoluent</a> et vont devoir se poser ces questions s’ils vont <a href="/david/blog/2014/avenir-liberation/">vers de la co-construction</a>.</p>

  517. <h2>Parfaitement cassé</h2>

  518. <blockquote>

  519. <p>In closing, there’s a great book called <em>Small Pieces, Loosely Joined</em>. It’s about the web, and it’s about how the web is, by David Weinberger, who wrote this phrase, “the web is perfectly broken,” which I think is an interesting phrase, “perfectly broken,” because it’s messy deliberately. It’s not meant to be simple or easy; uniform and centralize. It’s supposed to be hacked together, distributed, customized, and remixed. It’s supposed to be human.</p>

  520. <p><cite><em><a href="https://medium.com/civic-technology/rethinking-data-portals-30b66f00585d">Let’s Move Beyond Open Data Portals</a></em> (<a href="/david/cache/75c259bed30f5a31bf42e01f5d11fe6a/">cache</a>)</cite></p>

  521. </blockquote>

  522. <p>Son impermanence est peut-être aussi ce qui fait la beauté du Web au même titre que l’éphémérité de la vie. Une donnée est là et du jour au lendemain elle traverse la rue et son lien est rompu. C’est fini et il fallait l’apprécier alors qu’elle était encore disponible. La bonne nouvelle c’est que le clonage de données est (presque) gratuit si l’on sait s’y prendre à l’avance ;-).</p>

  523. <h2>Résilience</h2>

  524. <blockquote>

  525. <p>Can the web <em>now</em> be a proper archive? No. You can’t have a permanent access (stable URLs) to the data released (by WikiLeaks). Once you have piece of human knowledge, how do you keep it? How do you share it?</p>

  526. <p><cite>Julian Assange, <a href="/david/blog/2015/enmi/">Entretiens du Nouveau Monde Industriel</a></cite></p>

  527. </blockquote>

  528. <p>Avoir une connexion permanente et rapide n’est pas suffisamment contraignante pour que l’on innove dans ce domaine. La résilience du réseau sera peut-être à trouver du côté des innovation issues de la contrainte dans le pays qui <a href="http://www.lowtechmagazine.com/2015/10/how-to-build-a-low-tech-internet.html">ne disposent pas de connexions permanentes</a> (<a href="/david/cache/d629418c0d8fcf72c54e0a3c27d29ea6/">cache</a>). Dans ces contextes, la mise en cache est beaucoup plus agressive et le réseau davantage distribué. Il serait tellement intéressant que la solution émerge de ces pratiques là…</p>

  529. <h2>Et la suite ?</h2>

  530. <blockquote>

  531. <p>But while HTTP has achieved many things, it’s usefulness as a foundation for the distribution and persistence of the sum of human knowledge isn’t just showing some cracks, it’s crumbling to pieces right in front of us. The way HTTP distributes content is <strong>fundamentally flawed</strong>, and no amount of performance tuneups or forcing broken CA SSL or whatever are going to fix that. HTTP/2 is a welcome improvement, but it’s a conservative update to a technology that’s beginning to show its age. To have a better future for the web, we need more than a spiced up version of HTTP, we need a new foundation. And per the governance model of cyberspace, that means we need a new protocol. IPFS, I’m strongly hoping, becomes that new protocol. </p>

  532. <p><cite><em><a href="https://blog.neocities.org/its-time-for-the-permanent-web.html">HTTP is obsolete. It’s time for the distributed, permanent web</a></em> (<a href="/david/cache/3faaf2e57b062c8f0c8dd1fcb47faa58/">cache</a>)</cite></p>

  533. </blockquote>

  534. <p><a href="https://ipfs.io/">IPFS</a> (InterPlanetary File System) est une solution possible, la question étant toujours de savoir si ça passe à l’échelle en terme de performance et de bande passante pour avoir des contenus récents et/ou mis à jour. Je ne sais pas non plus quelle pourrait être la démarche d’adoption d’un tel protocole quand on voit l’inertie qu’il peut y avoir pour IPv6 par exemple…</p>

  535. <p><strong>La solution sera probablement multiple. Expérimentez, documentez et échangez. Apprenez. Recommencez.</strong> Même de petites expériences insignifiantes peuvent avoir le pouvoir d’actionner de nouvelles idées chez d’autres personnes. C’est aussi cela la force du Web. </p>

  536. <p><em>Il y avait une vingtaine de personnes durant la session et voici <a href="/static/david/blog/opendata-liens-casses-retours.pdf">les retours</a> proposés par Confoo dans l’heure qui suit (!) par email.</em></p>

  537. </article>

  538. 

  539. 

  540.   <figure class="image" property="schema:image">

  541.     <img src="/static/david/blog/2016/opendata-liens-casses.jpg" alt="" />

  542.   </figure>

  543. 

  544. 

  545. 

  546. <nav id="jumpto">

  547.   <p>

  548.     <a rel=prev href="/david/blog/2016/minimalisme-esthetique/">← Minimalisme et esthétique</a> | <a href="/david/blog/" title="Retour à la liste des expériences">↑</a> | <a rel=next href="/david/blog/2016/javascript-reduit/">JavaScript réduit →</a>

  549.   </p>

  550. </nav>

  551. 

  552. <footer>

  553.   <div>

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

  555.     <p>

  556.       Bonjour/Hi!

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

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

  559.     </p>

  560.     <p>

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

  562.     </p>

  563. 

  564.       <p>

  565.         Les dernières publications hebdomadaires sont :

  566.       </p>

  567.       <ul class="with_columns">

  568. 

  569.           <li>

  570.             <a href="/david/stream/2019/12/31/">Merci</a>

  571.           </li>

  572. 

  573.           <li>

  574.             <a href="/david/stream/2019/12/27/">Intemporels</a>

  575.           </li>

  576. 

  577.           <li>

  578.             <a href="/david/stream/2019/12/24/">Outils</a>

  579.           </li>

  580. 

  581.           <li>

  582.             <a href="/david/stream/2019/12/17/">Origines</a>

  583.           </li>

  584. 

  585.           <li>

  586.             <a href="/david/stream/2019/12/10/">Publier</a>

  587.           </li>

  588. 

  589.           <li>

  590.             <a href="/david/stream/2019/12/03/">En forêt</a>

  591.           </li>

  592. 

  593.           <li>

  594.             <a href="/david/stream/2019/11/26/">Ecocentric</a>

  595.           </li>

  596. 

  597.           <li>

  598.             <a href="/david/stream/2019/11/19/">Se livrer</a>

  599.           </li>

  600. 

  601.           <li>

  602.             <a href="/david/stream/2019/11/12/">Dépendances</a>

  603.           </li>

  604. 

  605.           <li>

  606.             <a href="/david/stream/2019/11/05/">Positif</a>

  607.           </li>

  608. 

  609.           <li>

  610.             <a href="/david/stream/2019/10/29/">Dettes</a>

  611.           </li>

  612. 

  613.           <li>

  614.             <a href="/david/stream/2019/10/22/">Privilèges</a>

  615.           </li>

  616. 

  617.           <li>

  618.             <a href="/david/stream/2019/10/15/">Discrétion</a>

  619.           </li>

  620. 

  621.           <li>

  622.             <a href="/david/stream/2019/10/08/">Désespérance</a>

  623.           </li>

  624. 

  625.           <li>

  626.             <a href="/david/stream/2019/10/01/">Présent</a>

  627.           </li>

  628. 

  629.           <li>

  630.             <a href="/david/stream/2019/09/24/">Manifester</a>

  631.           </li>

  632. 

  633.           <li>

  634.             <a href="/david/stream/2019/09/17/">Arpenter</a>

  635.           </li>

  636. 

  637.           <li>

  638.             <a href="/david/stream/2019/09/10/">Nostalgie</a>

  639.           </li>

  640. 

  641.           <li>

  642.             <a href="/david/stream/2019/09/03/">Déconstruire</a>

  643.           </li>

  644. 

  645.           <li>

  646.             <a href="/david/stream/2019/08/27/">Documenter</a>

  647.           </li>

  648. 

  649.           <li>

  650.             <a href="/david/stream/2019/08/20/">Frustration</a>

  651.           </li>

  652. 

  653.           <li>

  654.             <a href="/david/stream/2019/08/13/">Holisme</a>

  655.           </li>

  656. 

  657.           <li>

  658.             <a href="/david/stream/2019/08/06/">1%</a>

  659.           </li>

  660. 

  661.           <li>

  662.             <a href="/david/stream/2019/07/30/">Exemplarité</a>

  663.           </li>

  664. 

  665.           <li>

  666.             <a href="/david/stream/2019/07/23/">Timelines</a>

  667.           </li>

  668. 

  669.           <li>

  670.             <a href="/david/stream/2019/07/16/">Écoute</a>

  671.           </li>

  672. 

  673.           <li>

  674.             <a href="/david/stream/2019/07/02/">Anxiété</a>

  675.           </li>

  676. 

  677.           <li>

  678.             <a href="/david/stream/2019/06/21/">À lier</a>

  679.           </li>

  680. 

  681.           <li>

  682.             <a href="/david/stream/2019/06/14/">Pauvreté</a>

  683.           </li>

  684. 

  685.           <li>

  686.             <a href="/david/stream/2019/06/07/">Amateur</a>

  687.           </li>

  688. 

  689.           <li>

  690.             <a href="/david/stream/2019/05/31/">Pollution</a>

  691.           </li>

  692. 

  693.           <li>

  694.             <a href="/david/stream/2019/05/24/">Apaisement</a>

  695.           </li>

  696. 

  697.           <li>

  698.             <a href="/david/stream/2019/05/10/">Folie</a>

  699.           </li>

  700. 

  701.           <li>

  702.             <a href="/david/stream/2019/05/03/">Sympathie</a>

  703.           </li>

  704. 

  705.           <li>

  706.             <a href="/david/stream/2019/04/12/">Péremption</a>

  707.           </li>

  708. 

  709.           <li>

  710.             <a href="/david/stream/2019/04/05/">Définitions</a>

  711.           </li>

  712. 

  713.           <li>

  714.             <a href="/david/stream/2019/03/29/">Acceptation</a>

  715.           </li>

  716. 

  717.           <li>

  718.             <a href="/david/stream/2019/03/22/">Dissonance</a>

  719.           </li>

  720. 

  721.           <li>

  722.             <a href="/david/stream/2019/03/15/">Reconnaissance</a>

  723.           </li>

  724. 

  725.           <li>

  726.             <a href="/david/stream/2019/03/08/">Lecture</a>

  727.           </li>

  728. 

  729.           <li>

  730.             <a href="/david/stream/2019/03/01/">Journaux</a>

  731.           </li>

  732. 

  733.           <li>

  734.             <a href="/david/stream/2019/02/22/">Écriture</a>

  735.           </li>

  736. 

  737.           <li>

  738.             <a href="/david/stream/2019/02/15/">Kyriarchie</a>

  739.           </li>

  740. 

  741.           <li>

  742.             <a href="/david/stream/2019/02/08/">Mots-serrures</a>

  743.           </li>

  744. 

  745.           <li>

  746.             <a href="/david/stream/2019/02/01/">Sans voie</a>

  747.           </li>

  748. 

  749.           <li>

  750.             <a href="/david/stream/2019/01/25/">Auto-diagnostic</a>

  751.           </li>

  752. 

  753.           <li>

  754.             <a href="/david/stream/2019/01/18/">Agilité</a>

  755.           </li>

  756. 

  757.           <li>

  758.             <a href="/david/stream/2019/01/11/">Métaphores</a>

  759.           </li>

  760. 

  761.           <li>

  762.             <a href="/david/stream/2019/01/04/">Balbutiements</a>

  763.           </li>

  764. 

  765.       </ul>

  766. 

  767.     <p>

  768.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  785.     </p>

  786.     <p>

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

  788.     </p>

  789.     <p>

  790.       Je ne traque pas ta navigation mais mon

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

  792.       conserve des logs d’accès.

  793.     </p>

  794.   </div>

  795. </footer>

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

  797.   ;(_ => {

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

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

  800.       e.preventDefault()

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

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

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

  804.     })

  805.   })()

  806. </script>

  807. 

  808.   <script>

  809.   /* Service workers */

  810.   if (navigator.serviceWorker) {

  811.     window.addEventListener('load', function () {

  812.       var selector = 'a[href^="/david/cache/"], a[rel=prev], a[rel=next]'

  813.       function sendLinks (selector) {

  814.         var links = [].slice.call(document.querySelectorAll(selector)).map(function (link) {

  815.           return link.getAttribute('href')

  816.         })

  817.         links.push(location.pathname)  // Put the current page in cache too.

  818.         navigator.serviceWorker.controller.postMessage({ links: links })

  819.       }

  820.       navigator.serviceWorker.getRegistration()

  821.         .then(function (registration) {

  822.           if (!registration || !navigator.serviceWorker.controller) {

  823.             return navigator.serviceWorker.register('/serviceworker.js')

  824.               .then(navigator.serviceWorker.ready)

  825.               .then(function () {

  826.                 console.log('[ServiceWorker] Ready to go!')

  827.               })

  828.               .catch(console.error.bind(console))

  829.           } else {

  830.             console.log('[ServiceWorker] Send links via registration')

  831.             sendLinks(selector)

  832.           }

  833.         })

  834.       navigator.serviceWorker.addEventListener('controllerchange', function () {

  835.         console.log('[ServiceWorker] Send links via controller change')

  836.         sendLinks(selector)

  837.       })

  838.       navigator.serviceWorker.addEventListener('message', function (event) {

  839.         var link = document.querySelector('a[href="' + event.data.link + '"]')

  840.         if (event.data.status && link) {

  841.           link.style.backgroundColor = '#2d7474'

  842.           link.style.color = '#f0f0ea'

  843. 

  844.             link.setAttribute('title', 'En cache pour consultation sans connexion')

  845. 

  846.         }

  847.       })

  848.     })

  849.   } else {

  850.     console.warn('[ServiceWorker] No cache for old browsers.')

  851.   }

  852. </script>