davidbgk
/
larlet-fr-david-cache


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691
							<!doctype html><!-- This is a valid HTML5 document. -->
<!-- Screen readers, SEO, extensions and so on. -->
<html lang=fr>
<!-- Has to be within the first 1024 bytes, hence before the <title>
  See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
<meta charset=utf-8>
<!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
<!-- The viewport meta is quite crowded and we are responsible for that.
  See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
<meta name=viewport content="width=device-width,minimum-scale=1,initial-scale=1,shrink-to-fit=no">
<!-- Required to make a valid HTML5 document. -->
<title>Noir sur blanc (archive) — David Larlet</title>
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons/favicon-16x16.png">
<link rel="manifest" href="/manifest.json">
<link rel="mask-icon" href="/static/david/icons/safari-pinned-tab.svg" color="#5bbad5">
<link rel="shortcut icon" href="/static/david/icons/favicon.ico">
<meta name="apple-mobile-web-app-title" content="David Larlet">
<meta name="application-name" content="David Larlet">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-config" content="/static/david/icons/browserconfig.xml">
<meta name="theme-color" content="#f0f0ea">
<!-- That good ol' feed, subscribe :p. -->
<link rel=alternate type="application/atom+xml" title=Feed href="/david/log/">

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://nrkn.fr/blog/2017/01/28/noir-sur-blanc/">

<style>
/* http://meyerweb.com/eric/tools/css/reset/ */
html, body, div, span,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, address, big, cite, code,
del, dfn, em, img, ins,
small, strike, strong, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section { display: block; }
body { line-height: 1; }
blockquote, q { quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
  content: '';
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

/* http://practicaltypography.com/equity.html */
/* https://calendar.perfplanet.com/2016/no-font-face-bulletproof-syntax/ */
/* https://www.filamentgroup.com/lab/js-web-fonts.html */
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Regular-webfont.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Italic-webfont.woff') format('woff');
  font-weight: 300;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: 'EquityTextB';
  src: url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff2') format('woff2'),
       url('/static/david/css/fonts/Equity-Text-B-Bold-webfont.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'ConcourseT3';
  src: url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff2') format('woff2'),
       url('/static/david/css/fonts/concourse_t3_regular-webfont-20190806.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}


/* http://practice.typekit.com/lesson/caring-about-opentype-features/ */
body {
  /* http://www.cssfontstack.com/ Palatino 99% Win 86% Mac */
  font-family: "EquityTextB", Palatino, serif;
  background-color: #f0f0ea;
  color: #07486c;
  font-kerning: normal;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: subpixel-antialiased;
  text-rendering: optimizeLegibility;
  font-variant-ligatures: common-ligatures contextual;
  font-feature-settings: "kern", "liga", "clig", "calt";
}
pre, code, kbd, samp, var, tt {
  font-family: 'TriplicateT4c', monospace;
}
em {
  font-style: italic;
  color: #323a45;
}
strong {
  font-weight: bold;
  color: black;
}
nav {
  background-color: #323a45;
  color: #f0f0ea;
  display: flex;
  justify-content: space-around;
  padding: 1rem .5rem;
}
  nav:last-child {
    border-bottom: 1vh solid #2d7474;
  }
  nav a {
    color: #f0f0ea;
  }
  nav abbr {
    border-bottom: 1px dotted white;
  }

h1 {
  border-top: 1vh solid #2d7474;
  border-bottom: .2vh dotted #2d7474;
  background-color: #e3e1e1;
  color: #323a45;
  text-align: center;
  padding: 5rem 0 4rem 0;
  width: 100%;
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
}
  h1.single {
    padding-bottom: 10rem;
  }
  h1 span {
    position: absolute;
    top: 1vh;
    left: 20%;
    line-height: 0;
  }
    h1 span a {
      line-height: 1.7;
      padding: 1rem 1.2rem .6rem 1.2rem;
      border-radius: 0 0 6% 6%;
      background: #2d7474;
      font-size: 1.3rem;
      color: white;
      text-decoration: none;
    }
h2 {
  margin: 4rem 0 1rem;
  border-top: .2vh solid #2d7474;
  padding-top: 1vh;
}
h3 {
  text-align: center;
  margin: 3rem 0 .75em;
}
hr {
  height: .4rem;
  width: .4rem;
  border-radius: .4rem;
  background: #07486c;
  margin: 2.5rem auto;
}
time {
  display: bloc;
  margin-left: 0 !important;
}
ul, ol {
  margin: 2rem;
}
ul {
  list-style-type: square;
}
a {
  text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.05em;
  text-underline-offset: 0.09em;
}
article {
  max-width: 50rem;
  display: flex;
  flex-direction: column;
  margin: 2rem auto;
}
  article.single {
    border-top: .2vh dotted #2d7474;
    margin: -6rem auto 1rem auto;
    background: #f0f0ea;
    padding: 2rem;
  }
  article p:last-child {
    margin-bottom: 1rem;
  }
p {
  padding: 0 .5rem;
  margin-left: 3rem;
}
  p + p,
  figure + p {
    margin-top: 2rem;
  }

blockquote {
  background-color: #e3e1e1;
  border-left: .5vw solid #2d7474;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1rem;
  margin: 1.5rem;
}
  blockquote cite {
    font-style: italic;
  }
  blockquote p {
    margin-left: 0;
  }

figure {
  border-top: .2vh solid #2d7474;
  background-color: #e3e1e1;
  text-align: center;
  padding: 1.5rem 0;
  margin: 1rem 0 0;
  font-size: 1.5rem;
  width: 100%;
}
  figure img {
    max-width: 250px;
    max-height: 250px;
    border: .5vw solid #323a45;
    padding: 1px;
  }
figcaption {
  padding: 1rem;
  line-height: 1.4;
}
aside {
  display: flex;
  flex-direction: column;
  background-color: #e3e1e1;
  padding: 1rem 0;
  border-bottom: .2vh solid #07486c;
}
  aside p {
    max-width: 50rem;
    margin: 0 auto;
  }

/* https://fvsch.com/code/css-locks/ */
p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
  font-size: 1rem;
  line-height: calc( 1.5em + 0.2 * 1rem );
}
h1 {
  font-size: 1.9rem;
  line-height: calc( 1.2em + 0.2 * 1rem );
}
h2 {
  font-size: 1.6rem;
  line-height: calc( 1.3em + 0.2 * 1rem );
}
h3 {
  font-size: 1.35rem;
  line-height: calc( 1.4em + 0.2 * 1rem );
}
@media (min-width: 20em) {
  /* The (100vw - 20rem) / (50 - 20) part
     resolves to 0-1rem, depending on the
     viewport width (between 20em and 50em). */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.5em + 0.2 * (100vw - 50rem) / (20 - 50) );
    margin-left: 0;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.2em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.3em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * (100vw - 20rem) / (50 - 20) );
    line-height: calc( 1.4em + 0.2 * (100vw - 50rem) / (20 - 50) );
  }
}
@media (min-width: 50em) {
  /* The right part of the addition *must* be a
     rem value. In this example we *could* change
     the whole declaration to font-size:2.5rem,
     but if our baseline value was not expressed
     in rem we would have to use calc. */
  p, li, pre, code, kbd, samp, var, tt, time, details, figcaption {
    font-size: calc( 1rem + .6 * 1rem );
    line-height: 1.5em;
  }
  p, li, pre, details {
    margin-left: 3rem;
  }
  h1 {
    font-size: calc( 1.9rem + 1.5 * 1rem );
    line-height: 1.2em;
  }
  h2 {
    font-size: calc( 1.5rem + 1.5 * 1rem );
    line-height: 1.3em;
  }
  h3 {
    font-size: calc( 1.35rem + 1.5 * 1rem );
    line-height: 1.4em;
  }
  figure img {
    max-width: 500px;
    max-height: 500px;
  }
}

figure.unsquared {
  margin-bottom: 1.5rem;
}
  figure.unsquared img {
    height: inherit;
  }


@media print {
  body { font-size: 100%; }
  a:after { content: " (" attr(href) ")"; }
  a, a:link, a:visited, a:after {
    text-decoration: underline;
    text-shadow: none !important;
    background-image: none !important;
    background: white;
    color: black;
  }
  abbr[title] { border-bottom: 0; }
  abbr[title]:after { content: " (" attr(title) ")"; }
  img { page-break-inside: avoid; }
  @page { margin: 2cm .5cm; }
  h1, h2, h3 { page-break-after: avoid; }
  p3 { orphans: 3; widows: 3; }
  img {
    max-width: 250px !important;
    max-height: 250px !important;
  }
  nav, aside { display: none; }
}

ul.with_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_columns {
    column-count: 2;
  }
}
@media (min-width: 50em) {
  ul.with_columns {
    column-count: 3;
  }
}
ul.with_two_columns {
  column-count: 1;
}
@media (min-width: 20em) {
  ul.with_two_columns {
    column-count: 1;
  }
}
@media (min-width: 50em) {
  ul.with_two_columns {
    column-count: 2;
  }
}

.gallery {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-around;
}
  .gallery figure img {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .gallery figure figcaption {
    font-family: 'ConcourseT3'
  }

footer {
  font-family: 'ConcourseT3';
  display: flex;
  flex-direction: column;
  border-top: 3px solid white;
  padding: 4rem 0;
  background-color: #07486c;
  color: white;
}
  footer > * {
    max-width: 50rem;
    margin: 0 auto;
  }
  footer a {
    color: #f1c40f;
  }
  footer .avatar {
    width: 200px;
    height: 200px;
    border-radius: 50%;
    float: left;
    -webkit-shape-outside: circle();
    shape-outside: circle();
    margin-right: 2rem;
    padding: 2px 5px 5px 2px;
    background: white;
    border-left: 1px solid #f1c40f;
    border-top: 1px solid #f1c40f;
    border-right: 5px solid #f1c40f;
    border-bottom: 5px solid #f1c40f;
  }
</style>

<h1>
  <span><a id="jumper" href="#jumpto" title="Un peu perdu ?">?</a></span>
  Noir sur blanc (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="https://nrkn.fr/blog/2017/01/28/noir-sur-blanc/">Source originale du contenu</a></h3>
    <p>Il est plus que temps d’écrire le dernier chapitre de cette trilogie improvisée en guise de réponse à la réflexion lancée par Antoine : “<a href="https://www.quaternum.net/2017/01/06/interroger-nos-pratiques-de-publication-en-ligne/">Interroger nos pratiques de publication en ligne</a>“. <br/></p>

<p>Après avoir exposé <a href="https://nrkn.fr/blog/2017/01/17/interroger-nos-pratiques-de-publication-en-ligne/">ce que représentait pour moi la démarche de publier dans un environnement auto-hébergé et auto-géré</a>, je me suis risqué à <a href="https://nrkn.fr/blog/2017/01/18/l-insoutenable-legerete-de-l-etre/">me demander ce qui pouvait bien pousser une grande majorité à préférer des plateformes comme Medium ou Facebook</a>, par exemple. J’ai émis autant de réserves dans cette démarche que j’en ai extrait de suppositions, compte tenu de mon absence de compétences dans le domaine des sciences humaines et sociales. J’insiste d’autant sur ce terme de “<i>suppositions</i>” puisque certaines de ces dernières me servent en partie de postulats pour la suite de cet article.</p>

<p>Je m’offre encore le temps d’une dernière précision avant d’entrer dans le vif du sujet. Histoire de rajouter un morceau de contexte dans ce qui va suivre. Pour ceux qui ne le sauraient pas, puisqu’au fond je n’ai pas trop laissé de traces, j’ai fait partie de l’équipe “<i>canal historique</i>” du projet <a href="https://fr.dotclear.org/">Dotclear</a>. J’étais présent lors de l’accouchement de la première version stable (1.2) par <a href="https://neokraft.net/">Olivier</a>. J’étais encore dans la bande pendant la longue et douloureuse gestation de Dotclear 2 et les premiers pas de ce nouveau bébé. J’ai également trouvé le moyen de verser dans le lobbying pro-<a href="https://fr.dotclear.org/association">association</a> alors que j’avais déjà un pied et demi en dehors du projet.</p>

<p>Maintenant que toutes les réserves et précisions d’usage ont été émises, nous pouvons passer à la suite…</p>

<h3><span class="caps">TL</span>;<span class="caps">DR</span></h3>

<blockquote><p>C’est génial !<br/>Faut tout refaire.</p><p><a href="https://neokraft.net/">Olivier Meunier</a><br/></p></blockquote>

<h3>Et si nous devions revoir nos copies ?</h3>

<p>Je compte parler de notre façon de concevoir les outils de publication en ligne, en tant que développeurs / contributeurs. Mais aussi de la manière de les promouvoir, de les diffuser et de les rendre séduisants auprès du plus grand nombre , en tant que projets ouverts et libres. Cela risque d’impliquer de gros mots et beaucoup de choses sales pour les plus libristes et plus évangélisateurs du lot. Du moins, c’est ce que je crois. Mais sans débat, nous n’avancerons pas.</p>

<p>D’abord, nous parlons - en tout cas, je parle - souvent d’outils. Ce terme, “outil”, n’est pas sans connotations. Il y a un petit côté bricoleur. Un côté artisan et/ou passionné. Et en parlant d’outils, nous nous adressons directement à des “utilisateurs”. En face de nous, on nous toise avec des “services” et l’on s’adresse alors à des “usagers”, plus qu’à des utilisateurs. Quand il s’agit de mesurer, on parle plus volontiers de “comptes actifs” ou d‘“abonnés”, là où nous utilisons encore et toujours, presque systématiquement… “utilisateurs”. Et si cette fixation sur l‘“outil” était tellement profonde chez nous qu’elle nous aurait fait louper un glissement essentiel. À rabâcher “outil”, n’en oublions-nous pas de penser “produit” (et/ou “service”) ?</p>

<p>Prenons donc l’un de nos “outils” et son projet associé et considérons désormais cela comme un produit et des services liés et voyons ce que nous pouvons en retirer. Ce sont des dents qui commencent à grincer, que j’entends ? Je n’espère pas, il est encore tôt…</p>

<h3>Penser différemment le produit</h3>

<p>Voilà, j’enfonce le clou avec une masse !</p>

<p>Prenons comme cobaye notre blogware ou <span class="caps">CMS</span> favori. Je fais l’impasse, pour l’instant, sur la phase d’installation. Mais nous y reviendrons. Disons que l’engin est installé et fonctionnel et que nous souhaitions maintenant nous immerger enfin dans ce monde merveilleux. Bien souvent, la première impression est un “<i>humpf!</i>“…</p>

<h4><span class="dquo">“</span>Cachez cette administration que je ne saurais voir !”</h4>

<p>La grande majorité des moteurs de blog et autres <span class="caps">CMS</span> présente ce même “travers” : vous tombez par défaut sur une interface d’administration et/ou un tableau de bord. La liste des derniers articles publiés, des dernières réactions reçues, etc. Ce n’est plutôt pas mal me direz-vous. Surtout si vous êtes actuellement blogueur. Oui, vous avez été conditionné ou vous vous êtes conformé à un certain moule…</p>

<p>Si les versions successives sont devenues un peu plus “<i>user friendly</i>” avec le temps, elles demeurent l’incarnation d’une certaine pensée “geek et technique” de leurs créateurs. Mais ne jetons pas la pierre à qui que ce soit : cette bonne vielle page de tableau de bord reste très pratique. Je ne la remets d’ailleurs pas en question. C’est sa prédominance que je trouve gênante.</p>

<p>Avec un peu de recul, avec l’expérience de certains réseaux sociaux ou autres services de publication, j’estime désormais que nous lui avons vraisemblablement accordé une place trop importante. Pour quelle raison principe nous connectons-nous à ce back-office ? Pour administrer, surveiller ou… Publier ? On pourra toujours me rétorquer “pour modérer les commentaires”, mais ça restera un petit morceau de mauvaise foi.</p>

<h4>Rendre sa priorité à l’acte de publier</h4>

<p>D’ailleurs, très tôt dans le cycle de vie de Dotclear, Olivier avait introduit une zone “<i>QuickPost</i>” au sein de ce fameux tableau de bord. L’idée a depuis été abandonnée - me semble-t-il - car elle n’avait pas les faveurs du plus grand nombre. Sans doute parce que son intégration était un peu prématurée, ou maladroite, ou contre nature compte tenu de ce qui l’accompagnait alors</p>

<p>Mais maintenant - bien plus qu’alors, je l’avoue -, je pense qu’il s’agissait d’une très bonne idée.</p>

<p>Ainsi, en lieu et place d’une entrée “Nouveau billet” dans un menu ou sous forme de bouton dans le tableau de bord, pourquoi ne pas réintroduirions-nous pas une telle zone de saisie ? Réfléchissons à comment la rendre flexible mais surtout simple et efficace. Comment faire en sorte de lever un frein et favoriser le passage à l’acte ? Comment inciter notre utilisateur/usager à créer et diffuser son contenu en lui facilitant la tâche ? Tout cela dans le but évident que cette tâche soit réalisée sur son système, sur son serveur, dans sa demeure.</p>

<p>J’ai glissé, en catimini, la notion de flexibilité dans l’une des phrases précédentes. Ce n’était pas innocent. C’était même un complot pour tordre le cou à ce bon vieux “<i>Billet</i>” ou “<i>Article</i>“. Oui, oui, si je continue à m’en prendre à toutes ces parties qui caractérisent tant nos systèmes actuels, ça risque de finir en génocide, non ?</p>

<p>Pour l’instant, je vous laisse avec l’idée d’une réponse de normand.<br/></p>

<h4>Du contenu. Pas des billets ou des articles. Du contenu, bon sang !</h4>

<p>Le weblog a toujours été vu comme la transposition sur le Web du principe de journal ou de carnet papier, comme certains d’entre nous pouvaient en tenir (et en tiennent toujours, à mon avis). Dans mes carnets, je ne laisse pas que de longues litanies sur mes émois ou de longues (et pseudo) réflexions métaphysiques. Il y a également de simples notes. Des listes de tâches. Des post-it en guise de pièces rapportées qui peuvent contenir des choses exotiques (si, si, j’ai des post-it avec des adresses <span class="caps">IP</span> et des numéros de ports, par exemple). Des schémas ou autres dessins. Etc.</p>

<p>Si tout cela n’a pas forcément sa place sur un blog, en partie publique qui plus est, cet inventaire est tout de même transposable dans ce contexte. Nous avons besoin de publier des “trucs” dans des tailles et des formats hétéroclites. Dès lors, pourquoi vouloir tout faire rentrer dans la notion de “billet”. Évidemment, le “post” anglo-saxon est sans doute moins marqué “article”. Dans la même veine, il y a déjà des systèmes qui proposent des types de “posts” différents ou qui permettent de construire des déclinaisons. Mais ce que j’en ai vu jusqu’à maintenant, tant chez Dotclear que chez <a href="https://wordpress.org/">WordPress</a>, ne me parait pas suffisamment intuitif pour tout un chacun.</p>

<p>Oh ? Mais…</p>

<p>… Entre le “<i>QuickPost</i>” et les multiples types de contenus traités sur un mode d’égal à égal, ne serait-ce pas <a href="https://www.tumblr.com">Tumblr</a> que je décrirais tranquillement là ?<br/></p>

<h4>Un modèle nommé Tumblr ?</h4>

<p>Mais pourquoi pas ?</p>

<p>S’il y a bien une plateforme que je serais apte à qualifier de “<i>micro-blogging</i>“, c’est indiscutablement Tumblr. Aussi ludique que Twitter à l’utilisation mais bien plus riche et plus souple au niveau du contenu publiable. J’utilise sciemment le qualificatif “ludique”, puisque le but de ma réflexion, je vous le rappelle, est de déterminer comment attirer et de “<i>capt(iv)er</i>” le plus grand nombre possible d’usagers. Présenté comme cela, ça pourrait néanmoins être réduit au fait de proposer un moteur de blog auto-hébergé orienté grand public. S’arrêter là serait, à mon avis, dommage et n’aurait pas fait avancer le schmilblick d’un poil.</p>

<p>Surtout sans parler de la notion d’abonnés et d’abonnements que nous retrouvons sur ces deux services (mais également sur ton bon réseau social digne de ce nom). Car, si j’essaie d’être logique avec moi-même - chose pas toujours très évidente, je vous le concède -, il faudrait penser notre solution non plus pour un(e) auteur(e) à tendance ours(s) solitaire mais également pour un animal social à tendance colibri. Pour ceux qui n’auraient pas suivi, je fais allusion <a href="https://nrkn.fr/blog/2017/01/18/l-insoutenable-legerete-de-l-etre/">au fameux besoin d’appartenance que je soupçonne et que j’ai rapidement abordé dans le “volume” précédent</a>.<br/></p>

<p>Notre outil/produit ne pourra fort logiquement pas adresser cet aspect-là à lui tout seul. Mais nous pourrions déjà lui adjoindre un pan en lui faisant embarquer l’agrégation de flux <span class="caps">RSS</span>/Atom, dans un premier temps. Au passage, nous pourrions envisager de nous débarrasser d’un autre service tiers tel qu’un Feedly, par exemple, pour ceux qui comme moi y ont recours. Un tel système embarqué permettrait d’envisager 2 changements majeurs : l’introduction d’une fonction “reblog”, très proche de ce que propose Tumblr ou sous une forme un peu plus édulcorée et surtout plus saine pour remonter à l’origine du contenu, ainsi qu’une notion de… <i>&lt; roulements de tambour &gt;</i>… timeline !</p>

<p>Oui, oui ! Une timeline en guise de cœur battant du back-office. <br/></p>

<h4>Non, je ne suis pas en plein trip sous <span class="caps">LSD</span>…</h4>

<p>Faisons juste preuve d’un petit peu d’imagination. Au-delà du “<i>reblog</i>“/”<i>repost</i>“, nous pourrions également implémenter une méthode pour commenter depuis chez soi, sans avoir à faire un véritable post soi-même. En gros, une sorte de webmention qui ne dirait pas son nom et qui serait également l’équivalent d’une réponse sur Twitter. Poussons le bouchon jusqu’à intégrer ce cher “<i>Like</i>“. Vous voyez le tableau ou je dois vous faire un dessin ?</p>

<p>Non, je ne parle pas d’héberger l’équivalent d’un réseau social chez vous, sur votre machine personnelle ou sur un bout de serveur dédié. Cela reviendrait à faire un nouveau silo, à la pérennité plus fragile et à l’intérêt moindre. Cette approche-là existe déjà ou a déjà été tentée. Si cela peut avoir un peu de sens au sein d’une entreprise, par exemple, je n’en vois aucun en dehors de ce contexte. Ce dont je parle, c’est de transformer (ou adapter) votre demeure en nœud d’un réseau social entièrement décentralisé.</p>

<p>Introduisons maintenant les <a href="https://www.w3.org/TR/activitystreams-core/">Activity Streams</a>. Publier devient une activité. Commenter depuis chez vous, devient une activité, etc. Notre cher produit/outil ne se contenterait plus de créer un fil <span class="caps">RSS</span>/Atom, il pourrait également publier un fil de votre activité. Et au même titre que nous parlions un peu plus haut d’agréger des fils de contenus, nous pourrions intégrer ces fils d’activités en provenance des systèmes compatibles utilisés par vos pairs. Un bon vieux principe d’abonnements/d’abonnés.</p>

<p>Comme nous ne changerons pas les habitudes de tous du jour au lendemain, ni ne devons nous couper du monde des silos, il faudrait également que nos solutions puissent aisément émettre des notifications vers les différents réseaux sociaux. De nombreuses solutions existent déjà pour répondre à ce besoin, telles que Buffer, <span class="caps">IFTTT</span> ou Zapier. Mieux : nous avons même des alternatives libres qui apparaissent. N’est-ce pas, <a href="https://trigger-happy.eu/">Trigger Happy</a> ? N’est-ce pas, <a href="https://brid.gy/">Bridgy</a> ?</p>

<p>Techniquement, les charges d’agrégations et de notifications devraient pouvoir trouver des réponses acceptables, à court terme, en travaillant sur la base de <a href="https://pubsubhubbub.github.io/PubSubHubbub/pubsubhubbub-core-0.4.html">PubSubHubbub</a>. Idéalement, l’outil/produit devrait pouvoir fonctionner autant en client qu’en serveur PuSH.  Mais un mode dégradé pourrait être possible, en déléguant une partie de cette mécanique.</p>

<p>Et la boucle est presque bouclée.<br/></p>

<h4>Pour un choix ajouté, 10 choix masqués</h4>

<p>Voilà une offre alléchante, n’est-ce pas ?</p>

<p>De fait, le choix est typiquement la médaille et son revers des offres actuelles (je parle toujours de nos outils “libres”). Pour une grosse poignée d’utilisateurs, les choix sont synonymes de liberté et de contrôle. Au moment de l’installation et du paramétrage, l’outil va présenter une multitude d’options. Au moment de la personnalisation, l’outil va présenter une multitude d’options. Au moment de publier, l’outil va présenter une multitude d’options. Bien entendu, il y a un peu d’aide et quelques recommandations pour faire les bons, pour ne retenir parmi toutes ces options que les bonnes, c’est-à-dire celles qui nous intéressent. Je fais partie de cette grosse poignée, je l’avoue.</p>

<p>Mais, parfois, je me laisserais bien aller à un peu plus de facilité. Et je comprends alors l’épouvante que peut subir une plus grosse poignée d’utilisateurs potentiels. Trop de choix, ça fait peur. Ça demande de réfléchir et de comprendre avant même de pouvoir faire quoi que ce soit. Avant même d’être certain que le choix déjà fait pour choisir l’outil est bien le bon. Et si nous simplifions tout cela ? Et si je faisais hurler quelques uns d’entre vous en proposant non pas d’enlever des options mais d’en choisir les valeurs par défaut, passant ainsi de l’opt-in systématique à l’opt-out ?</p>

<p>Notre utilisateur devenu usager se verrait peu à peu confier les pleines responsabilités. Quand il se sentirait prêt. Quand il serait impliqué et intéressé. Il découvrirait qu’il pourrait choisir un tout autre thème pour son chez lui et pas seulement un bandeau et une palette. Il découvrirait qu’il pourrait restreindre les commentaires et les rétroliens sur chaque billet s’il le souhaitait. Qu’il pourrait protéger l’accès à une section entière ou à une page, s’il le souhaitait. Qu’il pourrait décider de mettre une description complémentaire / alternative, s’il le souhaitait. Qu’il pourrait décider d’apprendre, de devenir utilisateur/artisan/passionné, s’il le souhaitait. Ou d’occulter tout cela à tout jamais, s’il le souhaitait.</p>

<p>Et pour en revenir au point central de l’interface back-office, il y aurait un nouveau choix à prévoir et à laisser bien visible selon moi : le mode d’utilisation. Choisir entre un mode “live”, qui serait cet affichage en <i>timeline</i> façon Twitter avec du post rapide façon Tumblr, et un mode “zen”, qui serait une interface d’écriture proche de ce qu’offre <a href="https://medium.com/">Medium</a>.<br/></p>

<h4>C’est bon, là ? Ou il y en a encore ?</h4>

<p>Il y en aurait encore beaucoup, à mon avis. D’ailleurs, j’espère qu’il y en aura encore beaucoup suite à la lecture de ce billet et aux réactions que cela pourrait susciter. <br/></p>

<p>Notez, pour l’exemple, que j’ai volontairement évité de discuter d’éventuelles applications mobiles natives. Pourtant, plus j’y réfléchis, plus que je crois que ce passage serait obligé. Ce ne serait pas des applications complètes qui viendraient singer ce que nous pouvons obtenir au sein d’un navigateur. Ce serait plutôt des compléments permettant de s’intégrer profondément et parfaitement dans les usages du système mobile hôte.</p>

<p>Mais, au delà de l’outil/produit, il y a le projet, comme nous l’appelons souvent.<br/></p>

<h3>Réorienter le projet et redéfinir ses services</h3>

<p>Actuellement, derrière chaque outil, il y a une équipe, une communauté, un écosystème complet - ou presque -. C’est tout cela que je case sous l’étiquette “projet et services associés” afin de me simplifier la vie pour la suite de mon exposé.</p>

<p>Nous retrouvons majoritairement des bénévoles et cela ne va pas sans poser de problèmes. Problèmes de disponibilité, risques de lassitude - quand cela ne frôle pas le burn-out -, absences de moyens, etc. Pourtant, je vais trouver le culot de leur charger encore un peu plus la mule. Drôle de remerciement, n’est-ce pas ?</p>

<p>Car, oui, au-delà du code de l’outil, de la documentation et du support, d’autres tâches attendent ces braves troupes si nous voulons envisager une reconquête du Web. Et nous y trompons pas : si cela n’apparait qu’en filigrane, c’est pourtant bien ce dont il s’agit. Avec un tel objectif, quelques tâches techniques supplémentaires seront nécessaires. Côté développement - évidemment - mais également sur des aspects d’exploitation et d’opérations.</p>

<p>Mais les défis à relever ne seront pas exclusivement techniques ou documentaires. En cela, les projets actuels auraient tout intérêt à séduire et recruter d’autres types de profils.<br/></p>

<h4><span class="dquo">“</span>Notre produit est bon. Mais attendez de voir nos services…”<br/></h4>

<p>Nous pourrions convenir que les services qu’offre un projet tiennent dans cette liste : la production et la distribution du produit, la documentation et le support (essentiellement sur la base d’un forum et d’une <span class="caps">FAQ</span>). Et si cela n’était en fait que le package produit ? Tiens, d’ailleurs, je pousse la provocation jusqu’à l’affirmer ouvertement. Mais alors quels seraient les services ?</p>

<p>Sur l’infrastructure du projet, nous pourrions avoir un principe d’annuaire. Cet annuaire serait alimenté automatiquement à chaque création d’un nouveau site avec l’outil. Au moment de l’installation de l’outil, ou de la création d’un nouveau site avec ce dernier (pour les outils multi-sites), une entrée serait créée dans l’annuaire (pour peu que l’<span class="caps">URL</span> du nouveau site soit publique, bien entendu). Et régulièrement, les thématiques associées à ce site seraient évaluées et mises à jour en fonction des publications.</p>

<p>La bonne vieille blogroll telle que nous la connaissions pourrait se transformer de fait en une liste d’abonnements. Ces abonnements pourraient alors être vérifiés auprès de l’annuaire du projet (en premier lieu, mais pas que) et deviendraient alors actifs. Cela déclencherait ainsi l’agrégation des contenus et, éventuellement, des activités en provenance de chacun de ses abonnements. Chaque source recevrait également une notification d’un nouvel abonné (et l’<span class="caps">URL</span> du site correspondant, au minimum).</p>

<p>De cet annuaire, le projet pourrait également en décliner un portail de contenus : simplement un gros “<i>Planet</i>” présentant les extraits agrégés, renvoyant directement vers la source de chacun mais également indexant le contenu de chacune (en total respect du fichier <i>robots.txt</i>, cela va de soi) et pouvant ainsi servir de moteur de recherche.</p>

<p>L’image se fait-elle plus nette ?<br/></p>

<h4>L’union fait la force (et l’oignon, la soupe)</h4>

<p>J’ai soupé des querelles de clochers qui polluent régulièrement les projets libres. Qu’il s’agisse des débats houleux et stériles sur le mode “telle techno est meilleure que telle autre” ou encore “<span class="caps">XXX</span> sucks! <span class="caps">YYY</span> rocks!”. Sérieusement ? Nous ne serions pas de sérieuses bandes de cons ? Le mode interrogatif n’est là que pour la rhétorique. Désolé pour le spoiler.</p>

<p>La charge de travail nécessaire pour assurer la mise en œuvre et le bon fonctionnement des quelques services donnés en exemple dans le paragraphe précédent justifierait qu’elle soit partagée. Que les travaux soient mutualisés et qu’une véritable collaboration sur ces aspects s’installe entre des projets “concurrents”. Trois d’entre eux reposent sur <span class="caps">PHP</span> ? Parfait ! Il y a 3 groupes de développeurs en mesure de travailler sur une implémentation de référence commune dans ce langage. Rien n’empêche ensuite chacun de ces groupes de travailler sur une surcouche de spécialisation propre à son produit, si son projet le juge souhaitable. Mais pitié… Arrêtons de réinventer la roue à chaque fois, de chaque côté.</p>

<p>Et évitons également le communautarisme. Je parlais d’annuaire et d’abonnés/d’abonnements. Connectons-les entre eux ! Qu’est-ce qui a fini par vous échapper dans le sens premier d’”<i>Internet</i>” ? Faut-il vraiment que je vous dessine une toile d’araignée pour que vous vous rappeliez ce qu’il y a derrière le terme “<i>Web</i>” ? Nous crions à la liberté et à l’ouverture. Franchement, notre propre application de l’ouverture n’est pas uniquement discutable. Elle en devient parfois risible. Nos discours sont beaux. Passons aux actes et à la pleine mise en application. Prouvons en montrant l’exemple. Et ce sera également l’occasion de vérifier si nous ne nous trompons pas.<br/></p>

<h4><span class="dquo">“</span>T’es gentil, Bibi. Mais… Il faut du monde et des moyens pour tes idioties !”</h4>

<p>Effectivement. Je n’ai dit ni le contraire ni que ce serait facile.</p>

<p>D’après moi, il faudrait commencer par les nouvelles recrues. Et là aussi, beaucoup des équipes actuelles pourraient être amenées à faire preuve d’une plus grande ouverture. De nouveaux profils, de nouvelles compétences : des gestionnaires, des négociateurs, des vendeurs et des acheteurs, des juristes et des avocats. Comble du comble : même des “<i>marketeux</i>“ !</p>

<p><i>&lt; Hérésie ! Hérésie ! &gt;</i></p>

<p>Et pourtant… Ce serait peut-être le premier type de profils à recruter. Justement pour nous aider à attirer les autres. Les dernières neiges de l’utopie du Web sont en train de fondre très rapidement. L’horloge tourne vite et nous devons admettre que l’évangélisation seule prend trop de temps. Pire, elle ne suffira jamais. Il faut lui adjoindre des techniques d’influence et de séduction. Notre discours, notre démarche doivent être affutés, alignés sur les standards actuels de notre société. Il n’est pas question d’en changer le fond mais les formes.</p>

<p>Nos projets ont besoin de gagner en visibilité et en notoriété pour pouvoir grimper en “puissance”. Ne serait-ce que pour ces questions de moyens nécessaires pour assurer de bons niveaux de services. Il y aura besoin de connectivité, de serveurs, de stockage. Dans des proportions que les seuls dons ou cotisations aux associations ne pourront sans doute suffire à couvrir. Il faudra donc aller négocier du sponsoring, du partenariat. Faire comprendre aux hébergeurs indépendants qu’ils ont tout à gagner en fournissant gracieusement quelques VMs et gigaoctets à des projets qui sont les derniers remparts face à des silos qui ne leur confieront jamais la gestion de leurs infrastructures. En tout cas jamais dans des conditions financières saines. <br/></p>

<h4>Travailler à l’instauration d’un cercle vertueux<br/></h4>

<p>Les Google, Microsoft, Facebook, Amazon et autres (ne nous limitons pas aux seuls GAFAs, Ok ?) remettent en question un bon nombre de libertés mais menacent également tout un écosystème : petits éditeurs, hébergeurs indépendants et même certains vendeurs de noms de domaines. Autant d’alliés qu’il nous faudrait gagner. Il faudra donc parfois également savoir parler d’argent. Comprendre qu’il en faut, c’est comme ça et nous n’y changerons rien d’un coup de baguette magique. Comprendre que rentabilité ne signifie pas forcément profit. Qu’un peu de profit pour alimenter les investissements, ce n’est pas sale. Arrêter de se raconter des craques et de se contenter de se bercer d’illusions. Ainsi, il faudra jouer le jeu commercial et savoir renvoyer la balle.</p>

<p>Un hébergeur aura tout à gagner à s’associer avec un projet si ce dernier lui permet également de gagner de nouveaux clients. Tout cela peut se faire intelligemment. Des équipes mixtes peuvent se concentrer sur le bon déploiement et les bonnes performances de l’outil chez l’hébergeur. Le projet peut émettre des recommandations auprès des utilisateurs en quête d’une solution d’hébergement. Il n’y a aucun mal à cela tant que cela se fait dans la transparence et dans l’intérêt premier des utilisateurs mais également des autres parties prenantes. Je vous invite à relire le paragraphe juste au dessus si vous ressentez déjà l’envie de maugréer.</p>

<p>Et de tels alliés pourraient également aider à porter d’autres projets un peu fous. Pourquoi ne pas imaginer un soutien à l’<a href="https://www.eff.org/"><span class="caps">EFF</span></a> en vue d’une démarche auprès de l’<span class="caps">ICANN</span> et de l’<span class="caps">IANA</span> destinée à la création d’une extension générique ? L’<span class="caps">EFF</span> pourrait alors gérer ce nouveau registre afin de fournir des noms de domaines aux <i>Netizens</i> enfin retrouvés, à la façon qui se répand actuellement pour les certificats avec <a href="https://letsencrypt.org/">LetsEncrypt</a>.</p>

<p>Ne pas se bercer d’illusions n’implique pas non plus d’arrêter de rêver…<br/></p>

<h3>Concevons les réponses ensemble</h3>

<p>Je m’imaginais être en mesure de faire un texte plus bref, plus condensé. Malheureusement, je manque de pratique et je ne souhaitais pas laisser trainer cela plus longtemps. J’aurais encore beaucoup à dire. Beaucoup à écrire, à corriger, à préciser. Beaucoup trop pour une personne seule. Avec beaucoup trop de risques d’une approche condamnée à être biaisée, pour cette dernière raison. Et puis cette grosse montagne pourrait bien n’accoucher que d’une minuscule souris (sans fil ?).<br/></p>

<p>Ne vous y trompez pas. Ce texte n’est pas un manifeste. Je n’ai fait que mettre noir sur blanc une grosse poignée d’idées et de réflexions qui me traversent la tête ou m’occupent l’esprit depuis plusieurs années, de manière récurrente. Tout cela a ressurgi avec l’incitation d’Antoine à réfléchir et débattre du propos de la publication en ligne. Je me suis donc précipiter par l’entrebâillement de porte ainsi présenté.</p>

<p>Pour les plus “techos” d’entre vous, vous aurez noté que je ne parle pas de Blockchain, d’<span class="caps">IPFS</span>, etc. C’est volontaire. Il y a sans doute de vrais gros et beaux potentiels derrière tout cela. Je garde d’ailleurs un œil rivé sur tout ce qui peut porter une étiquette “<i>Decentralized Web</i>“. Mais tout ceci est encore trop loin de la maturité et nous manquons cruellement de retours d’expériences. Ce qui n’est pas le cas de ces bons <span class="caps">HTTP</span>, <span class="caps">JSON</span>, <span class="caps">XML</span> et consorts, protocoles et formats avec lesquels les vieux routards du Web sont familiers.</p>

<p>Tout ce qui figure dans ce texte est critiquable et devrait être critiqué. La seule condition étant de le faire dans une démarche constructive. D’ailleurs, je vous invite tous à envisager <a href="http://www.christian-faure.net/2013/06/05/lapproche-pre-mortem-dun-projet/">une approche pre-mortem</a>. Pour chaque frein identifié, essayez de livrer des pistes pour tenter de le lever. Et pour lever toute ambiguïté, en cas de besoin si ça peut servir, <a href="https://creativecommons.org/licenses/by/4.0/">ce texte est sous licence Creative Commons 4.0 - Attribution (<span class="caps">CC</span>-<span class="caps">BY</span>)</a>.</p>

<p>Sinon…<br/>On en rediscute ensemble quand vous voulez !<br/></p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="https://nrkn.fr/blog/2017/01/28/noir-sur-blanc/">Source originale</a> |
    <a href="/david/stream/2019/">Accueil du flux</a>
  </p>
</nav>

<footer>
  <div>
    <img src="/static/david/david-larlet-avatar.jpg" loading="lazy" class="avatar" width="200" height="200">
    <p>
      Bonjour/Hi!
      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>
      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>).
    </p>
    <p>
      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>.
    </p>
    
    <p>
      Voici quelques articles choisis :
      <a href="/david/blog/2019/faire-equipe/" title="Accéder à l’article complet">Faire équipe</a>,
      <a href="/david/blog/2018/bivouac-automnal/" title="Accéder à l’article complet">Bivouac automnal</a>,
      <a href="/david/blog/2018/commodite-effondrement/" title="Accéder à l’article complet">Commodité et effondrement</a>,
      <a href="/david/blog/2017/donnees-communs/" title="Accéder à l’article complet">Des données aux communs</a>,
      <a href="/david/blog/2016/accompagner-enfant/" title="Accéder à l’article complet">Accompagner un enfant</a>,
      <a href="/david/blog/2016/senior-developer/" title="Accéder à l’article complet">Senior developer</a>,
      <a href="/david/blog/2016/illusion-sociale/" title="Accéder à l’article complet">L’illusion sociale</a>,
      <a href="/david/blog/2016/instantane-scopyleft/" title="Accéder à l’article complet">Instantané Scopyleft</a>,
      <a href="/david/blog/2016/enseigner-web/" title="Accéder à l’article complet">Enseigner le Web</a>,
      <a href="/david/blog/2016/simplicite-defaut/" title="Accéder à l’article complet">Simplicité par défaut</a>,
      <a href="/david/blog/2016/minimalisme-esthetique/" title="Accéder à l’article complet">Minimalisme et esthétique</a>,
      <a href="/david/blog/2014/un-web-omni-present/" title="Accéder à l’article complet">Un web omni-présent</a>,
      <a href="/david/blog/2014/manifeste-developpeur/" title="Accéder à l’article complet">Manifeste de développeur</a>,
      <a href="/david/blog/2013/confort-convivialite/" title="Accéder à l’article complet">Confort et convivialité</a>,
      <a href="/david/blog/2013/testament-numerique/" title="Accéder à l’article complet">Testament numérique</a>,
      et <a href="/david/blog/" title="Accéder aux archives">bien d’autres…</a>
    </p>
    <p>
      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>.
    </p>
    <p>
      Je ne traque pas ta navigation mais mon
      <abbr title="Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33.184162340">hébergeur</abbr>
      conserve des logs d’accès.
    </p>
  </div>
</footer>
<script type="text/javascript">
  ;(_ => {
    const jumper = document.getElementById('jumper')
    jumper.addEventListener('click', e => {
      e.preventDefault()
      const anchor = e.target.getAttribute('href')
      const targetEl = document.getElementById(anchor.substring(1))
      targetEl.scrollIntoView({behavior: 'smooth'})
    })
  })()
</script>