davidbgk
/
larlet-fr-david-cache
Vērot 1
Pievienot zvaigznīti 0
Atdalīts 0
Kods Laidieni 0 Aktivitāte
A place to cache linked articles (think custom and personal wayback machine)
Nevar pievienot vairāk kā 25 tēmas Tēmai ir jāsākas ar burtu vai ciparu, tā var saturēt domu zīmes ('-') un var būt līdz 35 simboliem gara.
11 Revīzijas
1 Atzars
Koks: ca13d848f6
Atzari Tagi
${ item.name }
Izveidot atzaru ${ searchTerm }
no 'ca13d848f6'
${ noResults }
larlet-fr-david-cache/cache/f7f3a2d06ac8a7d000c7ccfdc2b.../index.html

index.html 40KB
Neapstrādāts Vainot Vēsture

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692 
  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>Sortir le Web des silos (archive) — David Larlet</title>

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  27. 

  28.   <meta name="robots" content="noindex, nofollow">

  29.   <meta content="origin-when-cross-origin" name="referrer">

  30.   <!-- Canonical URL for SEO purposes -->

  31.   <link rel="canonical" href="https://clochix.net/marges/170417-silos">

  32. 

  33. <style>

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

  35. html, body, div, span,

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

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

  38. del, dfn, em, img, ins,

  39. small, strike, strong, tt, var,

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

  41. fieldset, form, label, legend,

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

  43. article, aside, canvas, details, embed,

  44. figure, figcaption, footer, header, hgroup,

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

  46. time, mark, audio, video {

  47.   margin: 0;

  48.   padding: 0;

  49.   border: 0;

  50.   font-size: 100%;

  51.   font: inherit;

  52.   vertical-align: baseline;

  53. }

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

  55. article, aside, details, figcaption, figure,

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

  57. body { line-height: 1; }

  58. blockquote, q { quotes: none; }

  59. blockquote:before, blockquote:after,

  60. q:before, q:after {

  61.   content: '';

  62.   content: none;

  63. }

  64. table {

  65.   border-collapse: collapse;

  66.   border-spacing: 0;

  67. }

  68. 

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

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

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

  72. @font-face {

  73.   font-family: 'EquityTextB';

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

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

  76.   font-weight: 300;

  77.   font-style: normal;

  78.   font-display: swap;

  79. }

  80. @font-face {

  81.   font-family: 'EquityTextB';

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

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

  84.   font-weight: 300;

  85.   font-style: italic;

  86.   font-display: swap;

  87. }

  88. @font-face {

  89.   font-family: 'EquityTextB';

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

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

  92.   font-weight: 700;

  93.   font-style: normal;

  94.   font-display: swap;

  95. }

  96. 

  97. @font-face {

  98.   font-family: 'ConcourseT3';

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

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

  101.   font-weight: 300;

  102.   font-style: normal;

  103.   font-display: swap;

  104. }

  105. 

  106. 

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

  108. body {

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

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

  111.   background-color: #f0f0ea;

  112.   color: #07486c;

  113.   font-kerning: normal;

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

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

  116.   text-rendering: optimizeLegibility;

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

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

  119. }

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

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

  122. }

  123. em {

  124.   font-style: italic;

  125.   color: #323a45;

  126. }

  127. strong {

  128.   font-weight: bold;

  129.   color: black;

  130. }

  131. nav {

  132.   background-color: #323a45;

  133.   color: #f0f0ea;

  134.   display: flex;

  135.   justify-content: space-around;

  136.   padding: 1rem .5rem;

  137. }

  138.   nav:last-child {

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

  140.   }

  141.   nav a {

  142.     color: #f0f0ea;

  143.   }

  144.   nav abbr {

  145.     border-bottom: 1px dotted white;

  146.   }

  147. 

  148. h1 {

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

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

  151.   background-color: #e3e1e1;

  152.   color: #323a45;

  153.   text-align: center;

  154.   padding: 5rem 0 4rem 0;

  155.   width: 100%;

  156.   font-family: 'ConcourseT3';

  157.   display: flex;

  158.   flex-direction: column;

  159. }

  160.   h1.single {

  161.     padding-bottom: 10rem;

  162.   }

  163.   h1 span {

  164.     position: absolute;

  165.     top: 1vh;

  166.     left: 20%;

  167.     line-height: 0;

  168.   }

  169.     h1 span a {

  170.       line-height: 1.7;

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

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

  173.       background: #2d7474;

  174.       font-size: 1.3rem;

  175.       color: white;

  176.       text-decoration: none;

  177.     }

  178. h2 {

  179.   margin: 4rem 0 1rem;

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

  181.   padding-top: 1vh;

  182. }

  183. h3 {

  184.   text-align: center;

  185.   margin: 3rem 0 .75em;

  186. }

  187. hr {

  188.   height: .4rem;

  189.   width: .4rem;

  190.   border-radius: .4rem;

  191.   background: #07486c;

  192.   margin: 2.5rem auto;

  193. }

  194. time {

  195.   display: bloc;

  196.   margin-left: 0 !important;

  197. }

  198. ul, ol {

  199.   margin: 2rem;

  200. }

  201. ul {

  202.   list-style-type: square;

  203. }

  204. a {

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

  206.   text-decoration-thickness: 0.05em;

  207.   text-underline-offset: 0.09em;

  208. }

  209. article {

  210.   max-width: 50rem;

  211.   display: flex;

  212.   flex-direction: column;

  213.   margin: 2rem auto;

  214. }

  215.   article.single {

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

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

  218.     background: #f0f0ea;

  219.     padding: 2rem;

  220.   }

  221.   article p:last-child {

  222.     margin-bottom: 1rem;

  223.   }

  224. p {

  225.   padding: 0 .5rem;

  226.   margin-left: 3rem;

  227. }

  228.   p + p,

  229.   figure + p {

  230.     margin-top: 2rem;

  231.   }

  232. 

  233. blockquote {

  234.   background-color: #e3e1e1;

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

  236.   display: flex;

  237.   flex-direction: column;

  238.   align-items: center;

  239.   padding: 1rem;

  240.   margin: 1.5rem;

  241. }

  242.   blockquote cite {

  243.     font-style: italic;

  244.   }

  245.   blockquote p {

  246.     margin-left: 0;

  247.   }

  248. 

  249. figure {

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

  251.   background-color: #e3e1e1;

  252.   text-align: center;

  253.   padding: 1.5rem 0;

  254.   margin: 1rem 0 0;

  255.   font-size: 1.5rem;

  256.   width: 100%;

  257. }

  258.   figure img {

  259.     max-width: 250px;

  260.     max-height: 250px;

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

  262.     padding: 1px;

  263.   }

  264. figcaption {

  265.   padding: 1rem;

  266.   line-height: 1.4;

  267. }

  268. aside {

  269.   display: flex;

  270.   flex-direction: column;

  271.   background-color: #e3e1e1;

  272.   padding: 1rem 0;

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

  274. }

  275.   aside p {

  276.     max-width: 50rem;

  277.     margin: 0 auto;

  278.   }

  279. 

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

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

  282.   font-size: 1rem;

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

  284. }

  285. h1 {

  286.   font-size: 1.9rem;

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

  288. }

  289. h2 {

  290.   font-size: 1.6rem;

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

  292. }

  293. h3 {

  294.   font-size: 1.35rem;

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

  296. }

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

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

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

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

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

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

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

  304.     margin-left: 0;

  305.   }

  306.   h1 {

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

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

  309.   }

  310.   h2 {

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

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

  313.   }

  314.   h3 {

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

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

  317.   }

  318. }

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

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

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

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

  323.      but if our baseline value was not expressed

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

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

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

  327.     line-height: 1.5em;

  328.   }

  329.   p, li, pre, details {

  330.     margin-left: 3rem;

  331.   }

  332.   h1 {

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

  334.     line-height: 1.2em;

  335.   }

  336.   h2 {

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

  338.     line-height: 1.3em;

  339.   }

  340.   h3 {

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

  342.     line-height: 1.4em;

  343.   }

  344.   figure img {

  345.     max-width: 500px;

  346.     max-height: 500px;

  347.   }

  348. }

  349. 

  350. figure.unsquared {

  351.   margin-bottom: 1.5rem;

  352. }

  353.   figure.unsquared img {

  354.     height: inherit;

  355.   }

  356. 

  357. 

  358. 

  359. @media print {

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

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

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

  363.     text-decoration: underline;

  364.     text-shadow: none !important;

  365.     background-image: none !important;

  366.     background: white;

  367.     color: black;

  368.   }

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

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

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

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

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

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

  375.   img {

  376.     max-width: 250px !important;

  377.     max-height: 250px !important;

  378.   }

  379.   nav, aside { display: none; }

  380. }

  381. 

  382. ul.with_columns {

  383.   column-count: 1;

  384. }

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

  386.   ul.with_columns {

  387.     column-count: 2;

  388.   }

  389. }

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

  391.   ul.with_columns {

  392.     column-count: 3;

  393.   }

  394. }

  395. ul.with_two_columns {

  396.   column-count: 1;

  397. }

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

  399.   ul.with_two_columns {

  400.     column-count: 1;

  401.   }

  402. }

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

  404.   ul.with_two_columns {

  405.     column-count: 2;

  406.   }

  407. }

  408. 

  409. .gallery {

  410.   display: flex;

  411.   flex-wrap: wrap;

  412.   justify-content: space-around;

  413. }

  414.   .gallery figure img {

  415.     margin-left: 1rem;

  416.     margin-right: 1rem;

  417.   }

  418.   .gallery figure figcaption {

  419.     font-family: 'ConcourseT3'

  420.   }

  421. 

  422. footer {

  423.   font-family: 'ConcourseT3';

  424.   display: flex;

  425.   flex-direction: column;

  426.   border-top: 3px solid white;

  427.   padding: 4rem 0;

  428.   background-color: #07486c;

  429.   color: white;

  430. }

  431.   footer > * {

  432.     max-width: 50rem;

  433.     margin: 0 auto;

  434.   }

  435.   footer a {

  436.     color: #f1c40f;

  437.   }

  438.   footer .avatar {

  439.     width: 200px;

  440.     height: 200px;

  441.     border-radius: 50%;

  442.     float: left;

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

  444.     shape-outside: circle();

  445.     margin-right: 2rem;

  446.     padding: 2px 5px 5px 2px;

  447.     background: white;

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

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

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

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

  452.   }

  453. </style>

  454. 

  455. <h1>

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

  457.   Sortir le Web des silos (archive)

  458.   <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>

  459. </h1>

  460. <section>

  461.   <article>

  462.     <h3><a href="https://clochix.net/marges/170417-silos">Source originale du contenu</a></h3>

  463.     <div class="chapo"><p>Avec le récent succès de Mastodon, je trouve utile de ressortir un billet écrit en 2010 décrivant les technologies utilisées par Status.net, son lointain ancêtre. Cet article avait alors été publié sur mon carnet Web, qui n&#39;est plus accessible (il est hébergé par Gandi en http, alors que j&#39;utilise désormais HSTS pour exiger https sur l&#39;ensemble des sous-domaines de <code>clochix.net</code>. Il faudrait que j&#39;exporte une version statique de ce carnet et l&#39;héberge ici même… dès que j&#39;aurais 5 minutes.)</p>

  464. </div>

  465. 

  466. <div vocab="http://schema.org/" about="http://www.clochix.net/post/2010/03/29/Sortir-le-flux-des-silos" typeof="Article" class="cite" itemscope="itemscope" itemtype="http://schema.org/Article" >

  467. 

  468. <p><header>Citation(s) extraite(s) de « <cite><a itemprop="url" href="http://www.clochix.net/post/2010/03/29/Sortir-le-flux-des-silos">sortir le Web des silos</a></cite> » par <span class="author vcard"><span property="dc:contributor" class="fn" itemprop="creator">Clochix</span></span></header>

  469.   <blockquote property="articleBody" cite="http://www.clochix.net/post/2010/03/29/Sortir-le-flux-des-silos">

  470.   <p>Sortir le Web des silos</p></p>

  471. </blockquote>

  472. 

  473. <p></div>

  474.   <p>Alors que de nombreux auteurs de carnets s&#39;étaient assuré du contrôle de leurs données en installant les logiciels nécessaires sur leur propre serveur, l&#39;avènement du micro-blogging et la mode des flux de statuts a ramené tout le monde, geeks y compris, vers des silos : Facebook et Twitter, ou identi.ca pour les intégristes. La <a href="http://status.net/2010/03/04/statusnet-0-9-0-released">sortie de StatusNet 0.9 il y a quelques semaines</a> pourrait bien changer la donne, grâce à son introduction de OStatus, un protocole ouvert et décentralisé permettant d&#39;interagir avec les statuts d&#39;utilisateurs postés sur des serveurs dans le monde entier. Désormais, héberger des pensées, liens et autres bribes sur son propre serveur, tout en continuant la conversation avec les utilisateurs hébergés sur d&#39;autres serveurs, devient possible. OStatus permet de sortir des silos en autorisant une architecture décentralisée qui n&#39;a plus grand chose à envier aux architectures centralisées actuelles.</p>

  475. <p>Cerise sur le gâteau, mais qui pour moi n&#39;a pas de prix: StatusNet 0.9 a levé la limitation à 140c qui, depuis que Twitter a arrêté l&#39;envoi des tweets par SMS dans nos contrées, n&#39;a vraiment plus de raison d&#39;être.</p>

  476. <p>Pour citer Evan Prodromou, <a href="http://status.net/2010/03/07/understanding-ostatus">OStatus est bâti au dessus d&#39;une pile de composants</a>, formats d&#39;échanges et protocoles de communication :</p>

  477. <ul>

  478. <li>Atom pour les flux;</li>

  479. <li>ActivityStreams pour décrire les activités sociales;</li>

  480. <li>PubSubHubbub (PuSH pour les intimes) pour les notifications en temps réel;</li>

  481. <li>Salmon pour la conversation;</li>

  482. <li>WebFinger pour décrire les services disponibles : les flux et les points d&#39;entrée de PuSH et de Salmon;</li>

  483. </ul>

  484. <p>Toutes les communications entre les serveurs utilisent HTTP, dans le cadre d&#39;une &quot;architecture orientée service&quot;, c&#39;est à dire que l&#39;on communique simplement avec des services en appelant l&#39;URL de leur point d&#39;entrée.</p>

  485. <p>Tentative de présentation rapide de ces différents composants.</p>

  486. <h3><a name="Des_formats" href="#Des_formats" class="anchor"># </a>Des formats</h3><h4><a name="Atom" href="#Atom" class="anchor"># </a>Atom</h4><p>Le format de base pour décrire des publications regroupées en collections, les flux. Je vous renvoie à <a href="http://www.clochix.net/post/2009/09/12/Introduction-%C3%A0-Atom-et-AtomPub">mon article</a> d&#39;il y a quelques mois. Atom est extensible, c&#39;est donc le format de base idéal sur lequel bâtir des flux que l&#39;on enrichira d&#39;autres informations.</p>

  487. <h4><a name="Activity_Streams" href="#Activity_Streams" class="anchor"># </a>Activity Streams</h4><p><a href="http://activitystrea.ms/">Activity Streams</a> est une proposition de norme visant à définir un format pour décrire des activités. Une activité est une action réalisée par un auteur sur un objet. Activity Streams se présente comme une extension du format Atom, c&#39;est à dire que les informations sur l&#39;activité peuvent enrichir un flux Atom. Le format est développé et a déjà été adopté par quelques jeunes startups comme Facebook, Google, Microsoft, MySpace, on peut donc espérer qu&#39;il aura un certain avenir.</p>

  488. <p>Deux spécifications sont en cours de rédaction, l&#39;une <a href="http://activitystrea.ms/spec/1.0/atom-activity-01.html">décrivant le format lui-même</a>, l&#39;autre <a href="http://activitystrea.ms/schema/1.0/activity-schema-01.html">proposant des IRI</a> pour des types d&#39;actions (marquer comme favori, apprécier, entrer en contact, rejoindre, publier, partager, étiqueter...) et de cibles (article, commentaire, endroit, etc) classiques.</p>

  489. <p>Pour l&#39;instant, ce protocole est essentiellement utilisé dans StatusNet pour les communications entre serveurs. Par exemple, si l&#39;utilisateur toto du serveur toto.org décide de suivre titi du serveur titi.net, à la fin du processus, après les différents contrôles, le serveur toto.org enverra au point d&#39;entrée du serveur titi.net une notification contenant un enregistrement d&#39;activité:</p>

  490. <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;

  491.  &lt;feed xmlns=&quot;http://www.w3.org/2005/Atom&quot; xmlns:activity=&quot;http://activitystrea.ms/spec/1.0/&quot;&gt;

  492.    &lt;author&gt;

  493.      &lt;name&gt;toto&lt;/name&gt;

  494.      &lt;uri&gt;http://toto.org/toto&lt;/uri&gt;

  495.    &lt;/author&gt;

  496.    &lt;entry&gt;

  497.      &lt;id&gt;follow:totoid:titiid:timestamp&lt;/id&gt;

  498.      &lt;title&gt;toto is following titi&lt;/title&gt;

  499.      &lt;content type=&quot;html&quot;&gt;toto is following titi&lt;/content&gt;

  500.      &lt;activity:verb&gt;http://activitystrea.ms/schema/1.0/follow&lt;/activity:verb&gt;

  501.      &lt;activity:object&gt;

  502.        &lt;activity:object-type&gt;http://activitystrea.ms/schema/1.0/person&lt;/activity:object-type&gt;

  503.        &lt;id&gt;http://titi.net/titi&lt;/id&gt;

  504.      &lt;activity:object&gt;

  505.    &lt;/entry&gt;

  506.  &lt;/feed&gt;

  507. </code></pre><h4><a name="Threading,_geo-localisation..." href="#Threading,_geo-localisation..." class="anchor"># </a>Threading, géo-localisation...</h4><p>StatusNet implémente également d&#39;autres extensions du format Atom:</p>

  508. <ul>

  509. <li>Atom Threading pour lier des contenus entre eux <a href="http://www.ietf.org/rfc/rfc4685.txt">au sein de fils</a>, en permettant de définir, pour chaque entrée, deux séries de liens : les IRI des entrées auxquelles elle répond, et les IRI de ses réponses;</li>

  510. <li><a href="http://www.georss.org">GeoRSS</a> permet elle d&#39;ajouter des données géométriques et géographiques à un flux. Elle est utilisée ici pour donner les coordonnées, latitude et longitude, des différents objets (localisation habituelle de l&#39;auteur, localisation spécifique de chaque entrée: <georss:point>45.5088375 -73.587809</georss:point>;</li>

  511. <li><a href="http://martin.atkins.me.uk/specs/atommedia">Atom Média</a> pour décrire des contenus multimédias;</li>

  512. </ul>

  513. <h3><a name="Des_protocoles" href="#Des_protocoles" class="anchor"># </a>Des protocoles</h3><h4><a name="PubSubHubSub" href="#PubSubHubSub" class="anchor"># </a>PubSubHubSub</h4><p>Le <a href="http://pubsubhubbub.googlecode.com/svn/trunk/pubsubhubbub-core-0.3.html">protocole PubSubHubbub</a>, ou PuSH utilise un concentrateur, ou hub pour permettre de notifier en temps réel d&#39;évènements. Il implémente les concepts de PubSub et de WebHooks dont <a href="http://www.clochix.net/post/2009/10/04/Bidouiller-avec-les-Web-Hooks">j&#39;avais déjà parlé</a> et que j&#39;utilisais dans le <a href="http://www.clochix.net/post/2009/08/30/Nouveau-fan-des-Sixties">projet Sixties</a> (bibliothèque PHP pour jouer avec les fonctions PubSub d&#39;un serveur XMPP).</p>

  514. <p>Le mécanisme est le suivant:</p>

  515. <ul>

  516. <li>un service désirant publier des contenus crée des points d&#39;entrée dans un concentrateur. Ce sont des URL permettant de s&#39;abonner aux mises à jour des contenus;</li>

  517. <li>il rend publique la liste de ces points d&#39;entrée. Par exemple via la balise <link rel="hub" ...> dans un flux Atom;</li>

  518. <li>les utilisateurs qui souhaitent être notifiés de la publication de nouveaux contenus dans le flux ont deux solutions : soit recharger le flux à intervalles réguliers (polling, comme le gamin sur la banquette arrière répétant inlassablement «&nbsp;à quelle heure on arrive ?&nbsp;»), soit s&#39;abonner au Hub. Pour cela, il leur suffit d&#39;envoyer une requête de souscription à l&#39;adresse de son point d&#39;entrée. Cette requête contient une URL de rappel;</li>

  519. <li>lorsqu&#39;un évènement survient sur le serveur d&#39;origine, il en informe le Hub. Celui-ci interroge alors éventuellement le serveur pour récupérer plus d&#39;informations sur l&#39;évènement, puis notifie l&#39;ensemble des abonnés en postant le contenu aux URL de rappel associées à chaque abonnement.</li>

  520. </ul>

  521. <p>L&#39;ensemble des communications est réalisée en HTTP et utilise le format Atom.</p>

  522. <p>StatusNet embarque son propre Hub, il n&#39;est donc pas nécessaire de passer par des services tiers. Ainsi, pour être prévenu immédiatement de la publication d&#39;un nouveau statut, il suffit d&#39;envoyer une requête à l&#39;adresse du hub contenu une URL à appeler. Pour être notifié de mes mises à jours sur identi.ca, un simple GET ressemblant à cela suffit : <a href="http://identi.ca/main/push/hub?hub.callback=http://www.toto.net/callback_url/&amp;hub.topic=http://identi.ca/main/push/hub&amp;hub.mode=subscribe">http://identi.ca/main/push/hub?hub.callback=http://www.toto.net/callback_url/&amp;hub.topic=http://identi.ca/main/push/hub&amp;hub.mode=subscribe</a> (pour sécuriser la transaction, le protocole définit un mécanisme de challenge, d&#39;échange de clés, etc, je n&#39;entre pas dans les détails).</p>

  523. <h4><a name="Salmon" href="#Salmon" class="anchor"># </a>Salmon</h4><p>Salmon vise à notifier un contenu que du contenu en rapport a été publié. Pour utiliser le protocole, un flux doit fournir l&#39;URL d&#39;un point d&#39;entrée à appeler lorsqu&#39;une réponse est publiée. On peut préciser deux URL, l&#39;une pour les réponses (par exemple les commentaires), l&#39;autre pour les références. Un flux pourra contenir ce type de liens:</p>

  524. <pre><code>&lt;feed xmlns=&#39;http://www.w3.org/2005/Atom&#39;&gt;

  525.   (...)

  526.   &lt;link rel=&quot;http://salmon-protocol.org/ns/salmon-replies&quot; href=&quot;http://example.org/all-replies-endpoint&quot;/&gt;

  527.   &lt;Link rel=&quot;http://salmon-protocol.org/ns/salmon-mention&quot; href=&quot;https://example.com/mention-handler&quot; /&gt;

  528.   (...)

  529. &lt;/feed&gt;

  530. </code></pre><p>Lorsqu&#39;un serveur publie une réponse à un contenu publié sur un autre serveur (commentaire sur un article ou réponse à un statut par exemple), le serveur crée une entrée Atom au format Atom Threading et la publie à l&#39;URL fournie dans le flux d&#39;origine, via une requête HTTP POST. Le serveur d&#39;origine peut alors s&#39;il le désire publier la réponse et notifier tous les abonnés via PuSH. La <a href="http://salmon-protocol.googlecode.com/svn/trunk/draft-panzer-salmon-00.html">spécification de Salmon</a> prévoit un mécanisme de signature pour lutter contre le spam et différentes autres protections. Le protocole permet ainsi à des commentaires de remonter le flux jusqu&#39;à sa source, d&#39;où la référence au saumon, pour être ensuite partagé avec tous les abonnés au contenu initial.</p>

  531. <p>Salmon me semble particulièrement intéressant car il répond à au moins deux problématiques:</p>

  532. <ul>

  533. <li>la fragmentation des contenus produits par un utilisateurs: un utilisateur peut désormais héberger sur son propre serveur ses réponses à des contenus publiés partout sur le Net. Il en garde le contrôle;</li>

  534. <li>la fragmentation des discussions : de multiples références à un article dans d&#39;autres articles sont remontées à la source et, pour peu qu&#39;icelle joue le jeu, partagées avec tous les utilisateurs qui la suivent;</li>

  535. </ul>

  536. <h4><a name="WebFinger" href="#WebFinger" class="anchor"># </a>WebFinger</h4><p>WebFinger part du constat que l&#39;on est plus habitué, pour désigner une personne, à utiliser une adresse mail qu&#39;une url. Ou du moins une adresse du type user@server. Malheureusement, à la différence des URL, les adresses mail ne permettent pas d&#39;en savoir plus sur leur propriétaire, par exemple son identité, les adresses des services qu&#39;il utilise, etc. Choses que permet une URI donnant accès par exemple à une page Web ou un profil FOAF.</p>

  537. <p>WebFinger est donc un protocole permettant à partir d&#39;une adresse de type user@server d&#39;obtenir des méta-données sur l&#39;utilisateur qu&#39;elle désigne. Ces méta-données sont exprimées au <a href="http://docs.oasis-open.org/ns/xri/xrd-1.0">format XRD</a>. XRD est un vocabulaire créé par l&#39;OASIS pour décrire toutes les méta-données de n&#39;importe quelle ressource. Il est plus générique que FOAF, spécialisé dans la description des personnes et de leurs liens.</p>

  538. <p>WebFinger s&#39;appuie sur plusieurs autres protocoles en cours de discussion au sein de l&#39;IETF:</p>

  539. <ul>

  540. <li><a href="http://tools.ietf.org/html/draft-nottingham-site-meta">Defining Well-Known URIs</a> propose de regrouper données de service d&#39;un domaine dans un répertoire .well-known situé à la racine de ce domaine. Par exemple les fichiers destinés aux robots d&#39;indexation, le plan du site, l&#39;icône, etc;</li>

  541. <li><a href="http://tools.ietf.org/html/draft-hammer-hostmeta">host-meta: Web Host Metadata</a> propose que les méta-données d&#39;un domaine soient stockées au format XRD dans un fichier host-meta à l&#39;intérieur de ce dossier;</li>

  542. <li><a href="http://tools.ietf.org/html/draft-hammer-discovery">LRDD: Link-based Resource Descriptor Discovery</a> utilise un lien link pour référencer des méta-données sur un document. Ce lien peut être dans les entêtes HTTP d&#39;une réponse à une requête, ou une balise LINK dans un document XML quelconque. Dans le cas des fichiers XRD de description d&#39;un domaine, le lien pointera vers un template permettant d&#39;obtenir des informations sur une ressource : par exemple <Link rel="lrdd" template="https://meta.example.org/?q={uri}" type="application/xrd+xml" /></li>

  543. </ul>

  544. <p>Le mécanisme utilisé par WebFinger pour obtenir un profil à partir d&#39;une adresse est le suivant:</p>

  545. <ol>

  546. <li>transformer l&#39;adresse mail en une XRI, un identifiant universel de ressource1. Cela se fait simplement en la préfixant de acct: pour &#39;account&#39;&#39;;</li>

  547. <li>récupérer le fichier de description du domaine. Soit pour l&#39;adresse acct:clochix@identi.ca le fichier <a href="https://identi.ca/.well-known/host-meta">https://identi.ca/.well-known/host-meta</a>. On notera au passage que l&#39;adresse mail n&#39;a pas à exister. clochix@identi.ca n&#39;est pas une adresse mail, mais l&#39;identifiant de mon compte sur identi.ca;</li>

  548. <li>rechercher dans ce fichier le lien de type lrrd possédant un template : <Link rel="lrdd" template="https://identi.ca/main/xrd?uri={uri}" />;</li>

  549. <li>récupérer la description des données de l&#39;utilisateur via ce template. On obtient un fichier XRD décrivant le profil de l&#39;utilisateur.</li>

  550. </ol>

  551. <h5><a name="En_pratique" href="#En_pratique" class="anchor"># </a>En pratique</h5><p>Google fournit ce type d&#39;information pour tous les utilisateurs de Gmail :</p>

  552. <ul>

  553. <li>GET <a href="https://gmail.com/.well-known/host-meta">https://gmail.com/.well-known/host-meta</a></li>

  554. <li><p>on obtient le fichier suivant:</p>

  555. <p>&lt;?xml version=&#39;1.0&#39; encoding=&#39;UTF-8&#39;?&gt;</p>

  556. <XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'

  557.      xmlns:hm='http://host-meta.net/xrd/1.0'>

  558.   <hm:Host xmlns='http://host-meta.net/xrd/1.0'>gmail.com</hm:Host>

  559.   <Link rel='lrdd' template='http://www.google.com/s2/webfinger/?q={uri}'>

  560.     <Title>Resource Descriptor</Title>

  561.   </Link>

  562. </XRD>

  563. </li>

  564. <li><p>on peut alors consulter le profil de l&#39;adresse toto@gmail.com à l&#39;URL <a href="http://www.google.com/s2/webfinger/?q=acct:toto@gmail.com">http://www.google.com/s2/webfinger/?q=acct:toto@gmail.com</a>. Soit, pour quelqu&#39;un ayant un profil public et activé Buzz, quelque chose comme:</p>

  565. <p>&lt;?xml version=&#39;1.0&#39;?&gt;</p>

  566. <XRD xmlns='http://docs.oasis-open.org/ns/xri/xrd-1.0'>

  567.   <Subject>acct:toto@gmail.com</Subject>

  568.   <Alias><a href="http://www.google.com/profiles/toto">http://www.google.com/profiles/toto</a></Alias>

  569.   <Link rel='http://portablecontacts.net/spec/1.0' href='http://www-opensocial.googleusercontent.com/api/people/'/>

  570.   <Link rel='http://webfinger.net/rel/profile-page' href='http://www.google.com/profiles/toto' type='text/html'/>

  571.   <Link rel='http://microformats.org/profile/hcard' href='http://www.google.com/profiles/toto' type='text/html'/>

  572.   <Link rel='http://gmpg.org/xfn/11' href='http://www.google.com/profiles/toto' type='text/html'/>

  573.   <Link rel='http://specs.openid.net/auth/2.0/provider' href='http://www.google.com/profiles/toto'/>

  574.   <Link rel='describedby' href='http://www.google.com/profiles/toto' type='text/html'/>

  575.   <Link rel='describedby' href='http://s2.googleusercontent.com/webfinger/?q=acct%3Atoto%40gmail.com&amp;fmt=foaf' type='application/rdf+xml'/>

  576.   <Link rel='http://schemas.google.com/g/2010#updates-from' href='http://buzz.googleapis.com/feeds/123456789012345678901/public/posted' type='application/atom+xml'/>

  577. </XRD></p>

  578. <p></li>

  579. </ul>

  580. <p>Ce qui rappelle au passage que Google est fournisseur OpenID. Le fichier contient également les liens vers le profil Google, dont les informations sont disponibles dans plusieurs formats, y compris FOAF et des micro-formats comme hCard et XFN, et le flux des mises à jour de Buzz.</p>

  581. <p>Le même fichier est disponible sur toute installation de StatusNet 0.9. Par exemple, la description de mon compte sur identi.ca:</p>

  582. <pre><code>http://identi.ca/main/xrd?uri=acct:clochix@identi.ca

  583. &lt;XRD&gt;

  584.   &lt;Subject&gt;acct:clochix@identi.ca&lt;/Subject&gt;

  585.   &lt;Alias&gt;http://identi.ca/user/82435&lt;/Alias&gt;

  586.   &lt;Link rel=&quot;http://webfinger.net/rel/profile-page&quot; type=&quot;text/html&quot; href=&quot;http://identi.ca/user/82435&quot;/&gt;

  587.   &lt;Link rel=&quot;http://schemas.google.com/g/2010#updates-from&quot; type=&quot;application/atom+xml&quot; href=&quot;http://identi.ca/api/statuses/user_timeline/82435.atom&quot;/&gt;

  588.   &lt;Link rel=&quot;http://microformats.org/profile/hcard&quot; type=&quot;text/html&quot; href=&quot;http://identi.ca/clochix/hcard&quot;/&gt;

  589.   &lt;Link rel=&quot;http://gmpg.org/xfn/11&quot; type=&quot;text/html&quot; href=&quot;http://identi.ca/user/82435&quot;/&gt;

  590.   &lt;Link rel=&quot;describedby&quot; type=&quot;application/rdf+xml&quot; href=&quot;http://identi.ca/clochix/foaf&quot;/&gt;

  591.   &lt;Link rel=&quot;http://salmon-protocol.org/ns/salmon-replies&quot; href=&quot;http://identi.ca/main/salmon/user/82435&quot;/&gt;

  592.   &lt;Link rel=&quot;http://salmon-protocol.org/ns/salmon-mention&quot; href=&quot;http://identi.ca/main/salmon/user/82435&quot;/&gt;

  593.   &lt;Link rel=&quot;http://ostatus.org/schema/1.0/subscribe&quot; template=&quot;http://identi.ca/main/ostatussub?profile={uri}&quot;/&gt;

  594. &lt;/XRD&gt;

  595. </code></pre><p>On trouve ici les liens vers mon profil, encore une fois disponible à plusieurs formats, ma timeline, les points d&#39;entrées pour Salmon et pour s&#39;abonner à mes mises à jour via OStatus.</p>

  596. <h3><a name="OStatus" href="#OStatus" class="anchor"># </a>OStatus</h3><p>OStatus s&#39;appuie sur les précédents protocoles pour définir un format d&#39;échange entre des serveurs.</p>

  597. <h4><a name="Les_statuts" href="#Les_statuts" class="anchor"># </a>Les statuts</h4><p>Chaque statut correspond à une activité au format Activity Streams, donc à une entrée Atom. L&#39;action retenue est la publication (post) d&#39;un objet qui peut être une note, c&#39;est à dire un court billet ne contenant qu&#39;un corps (à la différence d&#39;un article qui contient lui également un titre et un résumé), un statut ou un commentaire. Notes et statuts sont similaires, la différence est sémantique, le contenu d&#39;un statut se rapportant à son auteur quant une note peut traiter de n&#39;importe quel sujet.</p>

  598. <p>Un statut peut être lié à :</p>

  599. <ul>

  600. <li>d&#39;autres contenus auxquels il répond, via Atom Threading s&#39;il constitue une réponse : <thr:in-reply-to ref="http://identi.ca/notice/1" href="http://identi.ca/notice/1"></thr:in-reply-to></li>

  601. <li>des personnes : <link rel="ostatus:attention" href="http://server/user"/> lorsque je m&#39;adresse à quelqu&#39;un;</li>

  602. <li>d&#39;autres statuts s&#39;il fait partie d&#39;une conversation: <link rel="ostatus:conversation" href="http://server/conversation/1"/></li>

  603. </ul>

  604. <h4><a name="Les_flux" href="#Les_flux" class="anchor"># </a>Les flux</h4><p>L&#39;activité d&#39;un utilisateur est regroupée au sein de flux Atom. Chaque flux doit posséder un point d&#39;entrée PuSH fournissant l&#39;URL où s&#39;abonner à ses mises à jour. Il peut également fournir des point d&#39;entrée Salmon où être notifié des réponses et des mentions.</p>

  605. <p>Par exemple, voici un extrait du flux d&#39;Evan Prodromou, le créateur de StatusNet :</p>

  606. <pre><code>&lt;?xml version=&quot;1.0&quot; encoding=&quot;UTF-8&quot;?&gt;

  607. &lt;feed xml:lang=&quot;en-US&quot; xmlns=&quot;http://www.w3.org/2005/Atom&quot;&gt;

  608.   &lt;id&gt;http://evan.status.net/api/statuses/user_timeline/1.atom&lt;/id&gt;

  609.   &lt;title&gt;evan timeline&lt;/title&gt;

  610.   &lt;author&gt;

  611.     &lt;name&gt;evan&lt;/name&gt;

  612.     &lt;uri&gt;http://evan.status.net/user/1&lt;/uri&gt;

  613.   &lt;/author&gt;

  614.   &lt;link href=&quot;http://evan.status.net/&quot; rel=&quot;alternate&quot; type=&quot;text/html&quot;/&gt;

  615.   &lt;link href=&quot;http://evan.status.net/main/push/hub&quot; rel=&quot;hub&quot;/&gt;

  616.   &lt;link href=&quot;http://evan.status.net/main/salmon/user/1&quot; rel=&quot;http://salmon-protocol.org/ns/salmon-replies&quot;/&gt;

  617.   &lt;link href=&quot;http://evan.status.net/main/salmon/user/1&quot; rel=&quot;http://salmon-protocol.org/ns/salmon-mention&quot;/&gt;

  618.   &lt;link href=&quot;http://evan.status.net/api/statuses/user_timeline/1.atom&quot; rel=&quot;self&quot; type=&quot;application/atom+xml&quot;/&gt;

  619.   (...)

  620. </code></pre><h4><a name="Les_communications" href="#Les_communications" class="anchor"># </a>Les communications</h4><p>Les communications entre les serveurs utilisent WebFinger pour découvrir les adresses des flux des utilisateurs, PuSH et Salmon pour échanger des messages.</p>

  621. <p>Lorsqu&#39;un utilisateur publie un nouveau statut, son serveur notifie l&#39;ensemble des abonnés de la mise à jour via PuSH.</p>

  622. <p>Les serveurs recourent à Salmon pour échanger entre eux des évènements concernant leurs utilisateurs:</p>

  623. <ul>

  624. <li>lorsqu&#39;un utilisateur publie un contenu à l&#39;attention d&#39;un autre utilisateur (en utilisant par exemple la syntaxe @toto qui se traduira par un link rel=&quot;ostatus:attention&quot; dans le flux), son serveur envoie une notification au serveur du destinataire via le point d&#39;entrée Salmon;</li>

  625. <li>idem pour les réponses;</li>

  626. <li>lorsqu&#39;un utilisateur s&#39;abonne ou se désabonne aux mises à jour d&#39;un autre utilisateur, rejoint ou quitte un groupe, ajoute le statut d&#39;un autre utilisateur à ses favoris ou le re-publie, son serveur notifie de même le serveur de l&#39;utilisateur ou du groupe concerné.</li>

  627. </ul>

  628. <p>Ouf ! Le repas était copieux, il va falloir un peu de temps pour assembler les pièces du puzzle et digérer tout ça. Mais je suis pour la première fois depuis longtemps optimiste en ce qui concerne les silos de données : bien sûr OStatus n&#39;attaquera pas la suprématie de Facebook et Twitter, mais pour qui souhaite reprendre la main sur ses flux, une solution existe à présent qui me semble crédible, ou en passe de le devenir. Ne reste plus qu&#39;à attendre que Facebook et Twitter implémentent OStatus pour permettre au monde libre de dialoguer avec leurs prisonniers. Vont-ils le faire ?</p></p>

  629.   </article>

  630. </section>

  631. 

  632. 

  633. <nav id="jumpto">

  634.   <p>

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

  636.     <a href="https://clochix.net/marges/170417-silos">Source originale</a> |

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

  638.   </p>

  639. </nav>

  640. 

  641. <footer>

  642.   <div>

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

  644.     <p>

  645.       Bonjour/Hi!

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

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

  648.     </p>

  649.     <p>

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

  651.     </p>

  652.     

  653.     <p>

  654.       Voici quelques articles choisis :

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  671.     </p>

  672.     <p>

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

  674.     </p>

  675.     <p>

  676.       Je ne traque pas ta navigation mais mon

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

  678.       conserve des logs d’accès.

  679.     </p>

  680.   </div>

  681. </footer>

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

  683.   ;(_ => {

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

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

  686.       e.preventDefault()

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

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

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

  690.     })

  691.   })()

  692. </script>