davidbgk
/
larlet-fr-david-cache

<!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>Guide de conversion numérique au low tech (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="http://gauthierroussilhe.com/fr/posts/convert-low-tech">

<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>
  Guide de conversion numérique au low tech (archive)
  <time>Pour la pérennité des contenus liés. Non-indexé, retrait sur simple email.</time>
</h1>
<section>
  <article>
    <h3><a href="http://gauthierroussilhe.com/fr/posts/convert-low-tech">Source originale du contenu</a></h3>
    <p><em>Veuillez noter que le site web présent est en version dynamique, nous allons bientôt re-uploader la version statique. Merci de votre patience.</em></p>

<p>En mars 2019 j'ai mis en ligne mon nouveau site web en suivant des principes de conception "low tech". Je me suis décidé à faire cela car, premièrement, j'ai été impressionné par la refonte de <a href="https://solar.lowtechmagazine.com">solar.lowtechmagazine.com</a>. Leur site est devenu extrêmement léger grâce à une approche esthétique et technique sensée. De plus ils ont pensé au système énergétique : le serveur est alimenté par un panneau solaire et une batterie, ce qui veut dire que si la batterie est à plat et si le temps est mauvais alors le site n'est plus en ligne. Deuxièmement, depuis 2 ans je m'intéresse au concept d'Anthropocène, aux politiques de transition sociale et écologique et à l'impact du numérique sur les écosystèmes. Ces recherches et travaux de terrain m'ont permis de refonder complètement ma pratique et j'avais envie de développer un outil qui pourrait démontrer ce changement dans ma pratique de designer et inspirer d'autres personnes à faire de même.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/2712248589-1552478904/low16.png"/><figcaption>Low Tech Magazine, cet héraut</figcaption></figure>

<p>J'ai essayé à travers ce guide de dérouler toute la logique derrière la conception numérique de ce site low tech et ainsi de lister tous les outils et les références utiles pour porter ce genre de projets.</p>

<h1>Table des matières</h1>

<ol>
<li><a href="#introduction">Point de départ</a></li>
<li><a href="#principles">Principes de conception</a></li>
<li><a href="#server">Quel type d'hébergement ?</a></li>
<li><a href="#site">Faire son site avec Kirby</a></li>
<li><a href="#design">Design</a></li>
<li><a href="#content">Adapter son contenu</a><br/>
a. <a href="#image">Images</a><br/>
b. <a href="#video">Vidéos</a></li>
<li><a href="#energy">Calculer l'énergie consommée et les émissions de CO2</a></li>
<li><a href="#results">Les résultats</a></li>
<li><a href="#doc">Outils et documentation</a></li>
</ol>

<h1>Point de départ<a name="introduction"/></h1>

<p>Une grande partie de ma démarche a été affectée par le rapport "Lean ICT : Pour une sobriété numérique" du Shift Project. Les conclusions du rapport<sup id="fnref1:1"/> ramènent sur Terre :</p>

<ol>
<li><strong>La tendance à la surconsommation numérique n'est pas soutenable au regard de l'approvisionnement en énergie et en matériaux qu'elle requiert.</strong> Trop forte demande d'énergie, trop d'électricité consommée, augmentation des émissions de GES, explosion des usages vidéo et multiplication des périphériques, la transition numérique se place en porte-à-faux de la transition sociale et écologique.</li>
<li><strong>L'intensité énergétique de l'industrie numérique augmente mondialement, à l'inverse de l'intensité énergétique du PIB mondial</strong>. À titre d'exemple la consommation d'énergie directe occasionnée par un euro de numérique a augmenté de 37% par rapport à 2010. Pour faire clair l'efficacité relative permise par le numérique ne se fait que parce qu'on injecte de plus en plus d'énergie dans le système.<sup id="fnref1:2"/></li>
<li><strong>La consommation numérique actuelle est très polarisée.</strong> Les pays développés surconsomment les services numériques et l'investissement dans le numérique n'a pas d'effet observé sur le PIB pour l'instant.</li>
<li><strong>L'impact environnemental de la transition numérique devient gérable si elle est plus sobre.</strong> On peut s'appuyer sur l'existant pour freiner l'augmentation de la consommation énergétique et essayer de stabiliser les émissions de GES liées.</li>
</ol>

<p>Au-delà de ces conclusions, le rapport met en évidence que la consommation énergétique du numérique se situe majoritairement à la production des équipements et que la consommation globale (production et usage) explose.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/692779089-1552409616/low1.png"/><figcaption>Consommation d'énergie du numérique par poste en 2017</figcaption></figure>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/1860862593-1552409494/low2.png"/><figcaption>Consommation d'énergie du numérique par rapport  à la consommation d'énergie mondiale</figcaption></figure>

<h1>Principes de conception<a name="principles"/></h1>

<p>Comment utiliser ce rapport pour faire émerger des réponses pratiques à ces constats ? Vu que la question du renouvellement et de la durabilité des équipements est prioritaire alors il s'agit de leur faire subir le moins de charge possible en nécessitant le moins d'espace possible. On peut supposer que, à trafic égal, si la taille des fichiers hébergés est réduite alors il y aura moins de données à transporter; moins de calcul associé, on ne participe pas à l'augmentation du parc et structurellement on consomme moins d'énergie.</p>

<ol>
<li>Côté hébergeur, réduire le poids du site, la demande de calcul et le flux de données à son <em>maximum</em> et côté client, réduire le poids moyen d'une page à son <em>maximum</em>;</li>
<li>Faire des choix techniques qui mobilisent le moins d'équipements possibles ou qui distribuent l'effort sur des équipements existants et durables;</li>
<li>Ramener à <em>l'essentiel</em> le contenu du site et réduire de façon drastique le poids des contenus restants;</li>
<li>Rendre visible la démarche et la documenter.</li>
</ol>

<p>Dans les principes énoncés ci-dessus. Il y a deux relatifs que j'aimerais expliquer, "maximum" et "essentiel". Je parle de réduire le poids moyen d'une page à son "maximum", cela veut en fait dire jusqu'où je suis prêt à aller pour réduire le contenu du site et par rapport à quelle valeur antécédente. À défaut de pouvoir correctement calculer la consommation électrique de mon site et de me donner un objectif en kWh, j'ai décidé de me donner un budget moyen de 500kb/page en me basant sur les tendances  de poids du web développées <a href="https://mobiforge.com/research-analysis/the-web-is-doom">ici</a> et <a href="https://idlewords.com/talks/website_obesity.htm">ici</a>. Avoir une poids moyen de 500kb/page ramène à la moyenne de 2010 et cela me laisserait assez de marge pour intégrer quelques images pour chaque projet. Cette négociation personnelle pour s'imposer une limite structurelle (énergie/poids) me paraît extrêmement importante car elle va structurer le contenu comme nous le verrons plus tard.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/3786045217-1552410460/low4.png"/><figcaption>Évolution de poids des pages web par objet</figcaption></figure>

<p>De façon générale ce projet repose déjà sur les principes développés par Philippe Bihouix<sup id="fnref1:3"/> ainsi que sur la <a href="https://solar.lowtechmagazine.com/2018/09/how-to-build-a-lowtech-website.html">documentation</a> de Low Tech Magazine et les <a href="https://www.greenit.fr/2009/05/12/5-regles-pour-un-site-web-plus-respectueux-de-l-environnement/">conseils</a> de Frédéric Bordage de greenit, je me permets juste de réitérer ce qu'ils ont développé et d'ajouter humblement ma pierre à l'édifice.</p>

<h1>Quel type d'hébergement ?<a name="server"/></h1>

<p>J'ai tout de suite pensé à quitter mon hébergement existant chez OVH et à souscrire à une offre d'hébergement "vert". Finalement j'ai commencé par faire un audit des équipements que je mobilise. Il s'avère que je loue un espace chez Linode (datacenter situé à Londres) pour héberger la version interactive du documentaire <a href="http://www.ethicsfordesign.com/watch">Ethics for Design</a>. Après un an et demi de diffusion j'ai une connaissance plus précise du trafic et j'ai décidé de réduire mon hébergement chez eux. J'en ai aussi profité pour annuler mon hébergement chez OVH et rapatrier tous mes sites vers Linode afin de maximiser l'usage de ce serveur. En fin de compte grâce à ce petit exercice j'ai réduit mes coûts et réduit mes usages côté hébergeur.</p>

<p>Voici les étapes (très classiques) que j'ai suivi :</p>

<ol>
<li>Faire un audit des équipements que je mobilise;</li>
<li>Redimensionner les usages de ces équipements par rapport au trafic et aux usages observés;</li>
<li>Vérifier que le centre de données est géographiquement proche;</li>
<li>Obtenir des informations sur l'approvisionnement énergétique du centre de données, son PUE, sa politique d'achat et de recyclage (échec);</li>
<li>Changer vers une offre plus transparente dès que possible;</li>
<li>Essayer de récupérer les données de consommation électrique du site et la méthologie de calcul.</li>
</ol>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/3704250001-1552409494/low5.png"/><figcaption>Spécifications du vilain serveur qui ne donne aucune information sur son fonctionnement</figcaption></figure>

<p>J'ai décidé de rester avec Linode pour l'instant même si je n'ai pu obtenir aucune information convaincante sur les data centers qu'ils utilisent car je dois continuer à répondre au trafic généré par le documentaire et je veux opérer en douceur sur ce point. Il ne me semble pas intéressant de m'auto-héberger car cela impliquerait de l'achat de matériel plus ou moins neuf que je ne peux pas réparer. Avoir un peu d'espace sur un serveur mutualisé reste bien plus sobre à mon avis.</p>

<p>Pour le choix du bon hébergeur je conseille encore de lire les <a href="https://www.greenit.fr/2009/05/18/quels-criteres-pour-identifier-un-hebergeur-vert/!">conseils</a> de Frédéric Bordage. Ayant cela en tête voici quelques d'hébergeurs "verts" à tester :</p>

<h1>Faire son site avec Kirby<a name="site"/></h1>

<p>Le Homebrewserver Club a déjà très bien documenté la façon dont ils ont monté le site pour Low Tech Magazine et je conseille de lire de près cet <a href="https://homebrewserver.club/low-tech-website-howto.html">article</a> qui aborde autant l'hardware que le software. Cependant avec mon ami développeur, <a href="http://gauthierroussilhe.com/afivos.com">Fivos Avgerinos</a>, nous avons voulu testé <a href="https://getkirby.com">Kirby</a> comme gestionnaire de contenu (CMS) au lieu de Pelican pour deux raisons. Premièrement nous voulions tester la comptabilité de Kirby avec les principes de la low tech. Deuxièmement, nous aimerions développer une solution accessible aux acteurs sans grande capacité budgétaire (villages, associations, etc.) afin qu'ils déploient des outils numériques sobres et faciles à entretenir.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/2785676785-1552409494/low7.png"/><figcaption>Kirby, un amour de backend</figcaption></figure>

<p>Il s'avère que Kirby est très facile d'accès, n'a pas besoin d'une base de données (flat-file), est très léger (install de 5mb), a une communauté active et est open-source. De plus nous avons eu accès à un outil (cookbook) pour transformer les sites fait avec Kirby en site statique. Pour le dire simplement, un site statique pre-génère toutes ses pages en html et les envoie tel quel. Un site dynamique génère la page à chaque visite. Un site statique c'est une page générée une fois pour 1000 requêtes, un site dynamique c'est une page générée 1000 fois pour 1000 requêtes. Alors un site low tech c'est forcément un site statique. Nous avons donc développé notre site normalement et une fois le développement fini nous avons passé le site en statique en utilisant ce <a href="https://limits-drive.mycozy.cloud/public?sharecode=NXkXbuSGsdEp"><strong>cookbook</strong></a>.</p>

<p>Il est important de noter que de nombreuses solutions existent pour faire un site statique : <a href="https://gohugo.io/">Hugo</a>, <a href="https://jekyllrb.com/">Jekyll</a>, <a href="https://blog.getpelican.com/">Pelican</a>, etc... Chacun est libre de faire son choix en fonction des contraintes de son projet et de ses besoins de gestion de contenu.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/3859405789-1552409494/low15.png"/><figcaption>Écrire un article en markdown avec Kirby</figcaption></figure>

<p>Kirby est un excellent gestionnaire de contenu qui est aussi facile à prendre en main pour le ou la bénévole d'association que pour l'employé de mairie ou le designer chevronné. Le poids total du site sur notre serveur est maintenant de 22Mb (contre 200Mb sur mon ancien site géré avec un Wordpress). Je gère la "base de données" avec le Finder via GitHub et le back-end est très rapide. Globalement Kirby répond à tous nos critères de low tech et nous allons continuer à utiliser l'outil dans ce sens : Kirby est résolument un CMS sobre et accessible pour tous. Son seul défaut actuel est sa résilience et son entretien dans le temps. Wordpress a beaucoup plus de chances de continuer à être maintenu et mis à jour dans les dizaines années à venir que Kirby, il s'agit donc d'un pari sur l'avenir. </p>

<h1>Design<a name="design"/></h1>

<p>Le contrainte fixé par le poids moyen des pages implique de travailler différemment avec les images/vidéos qui constituent généralement 90% du poids d'un site. Ca veut dire moins d'images, moins grandes et traitées différemment. J'ai aussi mis de côté tous les éléments stylistiques superficiels (animation) et réduit au maximum l'usage de Javascript. De façon générale j'ai grandement été inspiré par l'approche de Low Tech Magazine qui reste la référence principale pour l'instant et par le site du <a href="https://www.monde-diplomatique.fr">Monde Diplomatique</a> pour la gestion des textes. Tout comme Low Tech magazine je n'ai pas de logo, j'utilise des polices installées par défaut sur le terminal, il n'y a pas d'outils de tracking ou de service tiers.</p>

<p>Le design du site est assez standard et est surtout orienté vers une lecture agréable des textes souvent longs qui y sont présents. Pour ceux qui aimerait approfondir les aspects du design de Low Tech Magazine je conseille cet <a href="https://github.com/lowtechmag/solar/wiki/Solar-Web-Design">article</a>.</p>

<p>En termes de design le low tech offre des nombreux champs encore inexploités qui vont demander beaucoup d'imagination et d'innovation pour s'adapter aux contraintes structurelles de systèmes techniques et énergétiques. Tout est à faire et j'espère que de plus en plus de designers chevronnés s'en saisiront pour proposer des nouvelles esthétiques et expériences.</p>

<h1>Adapter son contenu<a name="content"/></h1>

<h2>Image<a name="image"/></h2>

<p>Le traitement des images a répondu à un impératif de poids. Je me suis fixé une limite de 100kb par image. En sachant que j'ai 500kb disponible en moyenne par page je m'autorise à 3-4 images par page en moyenne. Pour réduire le poids j'ai donc suivi la méthode utilisée par le Low Tech Magazine en exportant pour le web mes images avec les paramètres suivants :</p>

<div class="grid">
    <div class="col-6_sm-6">
        <figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/1766403709-1552411130/low13.png"/><figcaption>exporter pour le web en niveaux de gris avec Photoshop/Illustrator</figcaption></figure></div>
    <div class="col-6_sm-6">
        <figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/3681153645-1552409494/low14.png"/><figcaption>exporter pour le web en sélectif si des couleurs doivent apparaître</figcaption></figure></div>
</div>

<p>Certaines images, notamment les schémas, tournent aux alentours de 16kb par image donc j'ai pu redescendre ma moyenne par rapport à d'autres pages qui la dépassent. Cela me permet aussi d'intégrer plus d'images dans un post prioritaire comme celui-ci. Pour tout ce qui touche aux diagrammes et textes que je génère depuis Illustrator ou autre j'exporte directement en svg sans recommandation particulière.</p>

<p>Voici les deux formats que j'utilise:</p>

<ul>
<li>photographies, images non vectorisées : PNG-8 dithered (~5-100kb)</li>
<li>textes et diagrammes vectorisés : SVG (~10kb)</li>
</ul>

<p>Ce régime des images ne m'a pas spécialement impacté car les projets que je présente sur ce site nécessitent majoritairement la lecture du texte et les images ne font office que de support. Modifier la qualité des images par le dithering ne réduit pas leur fonction de support, au contraire elles appuient le message. Cependant un de mes projets a pour rendu des séries de cartographies, il était donc important de maintenir une haute qualité d'image pour permettre la lecture des cartes. Ma solution a été d'afficher une ou deux cartes tant en essayant de les compresser au maximum de leur lisibilité. Le reste des cartes n'est pas affiché et il suffit de cliquer manuellement sur un lien pour les ouvrir. Cela me permettra de limiter le nombre de requêtes seulement aux personnes réellement intéressées par ces cartes.</p>

<p>Si vous ne souhaitez pas passer par la technique du dithering et donc maintenir vos images dans leur esthétique première alors vous pouvez utiliser un service de compression comme <a href="https://resmush.it">reSmushit</a> ou <a href="https://imagecompressor.com">ImageCompressor</a>.</p>

<h2>Video<a name="video"/></h2>

<p>C'est sur ce point que je ferai ma contribution majeure vue que c'est sur la vidéo que j'ai le plus d'expertise. La première chose à entreprendre c'est de faire un audit des vidéos qui sont hébergées sur des services tiers pour moi (Vimeo, Youtube majoritairement) et déterminer le poids total de mes vidéos sur ces services. J'avais plus de 14Go de vidéo hébergés sur Vimeo mais cela reste le poids théorique car entre la redondance des serveurs et les multiples copies de qualité inférieure on peut allègrement doubler le poids théorique.</p>

<p>Ces 14Go de vidéo que j'ai mis en ligne sur un service d'hébergement vidéo peuvent être expliquer par plusieurs facteurs:</p>

<ol>
<li>Je cherche à exporter mes vidéos depuis Premiere et After Effects avec une qualité maximum par défaut (1920*1080, 25fps, format mov, H264);</li>
<li>Je ne réfléchis pas l'usage réel de ces vidéos, je les mets juste sur Vimeo puis je les intègre au besoin;</li>
<li>La seule limite proposée par l'hébergeur est un quota hebdomadaire de 5Go;</li>
<li>Je n'ai jamais associé auparavant un volume de données à une consommation électrique et donc à des émissions de gaz à effet de serre (GES).</li>
</ol>

<p>De plus si je prends l'exemple de la version anglaise du documentaire (1.6Go) sur Vimeo, je génère 3862 lectures par an avec un taux de visionnaire moyen de 28% (448Mo envoyé en moyenne). Cela veut dire que cette vidéo a déjà mobilisé l'envoi de 1730Go, à cela s'ajoute le téléchargement direct à hauteur de 174.5Go (210 téléchargements de 830.9Mo en moyenne). J'en arrive presque à 2To de données envoyées en 1 an (1904.7Go) juste pour la version du documentaire sur Vimeo donc ce n'est pas qu'une image partielle du trafic réel. Le coût énergétique et les émissions de GES liées à ce trafic sera discuté plus bas.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/423277456-1552409494/low9.png"/></figure>

<p>J'ai trouvé un outil très satisfaisant pour réduire considérablement le poids de mes vidéos sans perte de qualité apparente, il s'agit de <a href="https://handbrake.fr">Handbrake</a>. C'est un outil de conversion vidéo miraculeux et assez facile à prendre en main si on a les bons paramètres. J'ai suivi les <a href="http://www.benoitlabourdette.com/IMG/pdf/2018_outils_handbrake_01.pdf">conseils</a> de Benoit Labourdette sur les réglages à suivre pour obtenir une vidéo légère et de bonne qualité.</p>

<figure class="img-full"><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/2751970336-1552846857/low8.svg"/><figcaption>Handbrake, les docteurs le haissent</figcaption></figure>

<p>Je crois que les chiffres sont assez parlants. J'ai donc réduit de 75% le poids des vidéos hébergées et si le trafic reste stable j'aurais réduit de 75% le transfert des données vidéo. Ces chiffres sont aussi dus à quelques choix techniques, j'ai par exemple décidé que le format 720p (1280*720) était largement nécessaire à la bonne compréhension des vidéos. Maintenant je travaille avec des textes plus gros quand je fais de l'animation ou des vidéos afin d'éviter toute problème de lecture (juste au cas où).</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/787043501-1552409494/low10.png"/><figcaption>Ne soyez pas effrayé, Benoit Labourdette explique très bien les paramètres de Handbrake</figcaption></figure>

<p>Il me reste à trouver les bons réglages pour le documentaire "Ethics for Design" car mes premières tentatives n'ont pas été concluantes. Cela s'explique par le fait que le documentaire mélange vidéo et animation et différents profils de caméra. J'ai donc des pertes de qualité surprenantes soit sur l'animation soit sur la vidéo en fonction des réglages que j'utilise. Je pense trouver le bon réglage dans pas longtemps !</p>

<h1>Calculer l'énergie et les émissions de CO2<a name="energy"/></h1>

<p>Estimer la consommation d'énergie finale d'un site web est extrêmement compliqué. Quelle échelle choisir ? Est-ce qu'on fait rentrer les émissions liées à l'exploitation du caoutchouc qui viendra enrober les câbles sous-marins de fibre optique ? Comme d'habitude avec les analyses de cycle de vie le sujet principal est l'échelle qu'on définit. On se base généralement sur ces modèles de calcul de l'intensité énergétique par GB transmis pour comptabiliser la consommation électrique du numérique, on obtient alors un ratio de kWh consommé par GB transmis (kWh/GB). Les résultats différent par facteur 20000 en fonction des échelles choisies et des méthodes de calcul<sup id="fnref1:4"/> donc autant dire qu'on n'a pas fini de se poser des questions.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/327777565-1552409494/low11.png"/><figcaption>Il y a à boire et à manger pour tout le monde</figcaption></figure>

<p>Quoi qu'il soit la formule générale est la suivante pour déterminer combien de dioxide de carbone est émis par GB : déterminer votre valeur d'intensité énergétique (kWh/GB) (bonne chance), déterminer votre mix énergétique de référence (le pays où se situe les équipements) et finalement regarder le facteur d'émissions CO2 de l'énergie produite dans ce pays.</p>

<p>Par exemple, disons que je me base sur le modèle de Weber et al. (2010) qui situe mon intensité énergétique à 7kWh/GB. Ensuite je sais que mon serveur est basé à Londres donc ma production énergétique de référence sera celle du Royaume-Uni. Sachant cela je regarde sur le site de l'Agence Européenne de l'Environnement le facteur d'émissions CO2 du Royaume-Uni, il est de 281.1g CO2/kWh.<sup id="fnref1:5"/> J'ai juste à multiplier mon intensité énergétique par le facteur d'émissions CO2 et j'obtiens mes émissions CO2 par GB, dans mon cas 1977.7g CO2/GB, soit 2 kilos de CO2 par GB. Si je me fis au modèle de Coroma et al. (2013) je serais sûrement aux alentours de 56 grammes par GB.</p>

<p>Dans le cas de mes vidéos hébergées sur Vimeo, probablement dans un data center américain,  je dois recalculer mes émissions par rapport à la production énergétique américaine. Le facteur d'émissions CO2 aux États-Unis est d'environ 576g CO2/kWh selon les derniers chiffres de l'EPA<sup id="fnref1:6"/>, cela est du à leur production énergétique très dépendante des énergies fossiles. Si je reprends les chiffres du trafic de mon documentaire sur Vimeo invoqués plus haut (1904.7Go/an) alors l'année dernière j'aurais émis selon le modèle Weber et al. (2010) : (7x1904.7)x576, soit 7.7 tonnes de CO2. Selon le modèle de Coroma et al. (2013) j'aurais émis 219.4 kilos de CO2. En France, suivant le même modèle, j'aurais émis 22.3 kilos de CO2 (le nucléaire est considéré comme un énergie bas-carbone donc le mix énergétique français est très peu carboné).</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/479506109-1552846857/low17.svg"/></figure>

<p>Au delà du poids des vidéos le choix de l'hébergeur et de son approvisionnement énergétique est donc important. J'ai tenté d'héberger mes vidéos sur peertube pour me soustraire de la consommation électrique des datacenters et ainsi distribuer l'effort sur plusieurs terminaux personnels mais l'expérience a tournée court car mes vidéos se sont fait supprimer rapidement par l'administrateur de l'instance choisie. Je n'ai aucune idée si l'utilisation d'un réseau d'hébergement p2p est plus sobre mais je vais tenter de continuer l'expérience plus tard. Pour l'instant je suis toujours sur Vimeo avec des vidéos 75% moins lourdes.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/513351532-1552846857/low18.png"/><figcaption>The Shift Project semble avoir un modèle solide pour calculer les émissions de carbone générées par une action numérique</figcaption></figure>

<p>La seule façon de traquer correctement la consommation électrique d'un site serait d'utiliser les services de WattImpact ou de Greenspector mais ces services sont plutôt réservés aux entreprises qui doivent faire leurs bilans RSE ou faire du rachat de crédit carbone pour réduire leur impact. À compter 100€ minimum pour avoir Wattimpact actif sur votre site.</p>

<h1>Les résultats<a name="results"/></h1>

<p>Cela fait 6 ans maintenant que je travaille comme designer, j'ai touché à la production vidéo, dirigé des projets digitaux, pratiqué un peu d'UI/UX, pourtant ce projet a été la première fois que j'ai ressenti l'hyper-matérialité de ma pratique : j'ai repensé la façon dont je négocie avec des systèmes électrique, énergétique et technique derrière la conception et la mise en ligne de ce site. J'ai enfin eu des contraintes énergétiques et matérielles réelles sur lesquelles m'appuyer et cela fait énormément de bien, mieux encore, cela donne du sens à la démarche. "Réel" veut dire ici que les contraintes sont établies par rapport à une reconnaissance des systémes complexes qui maintiennent ce site et par rapport aux impacts négatifs que ces systémes ont sur les écosystèmes terrestres et sur les objectifs de transition.</p>

<p>Si on fait le bilan : j'ai réduit le poids de mon site par 10, le poids moyen d'une page par 3 et j'ai réduit le poids de mes vidéos sur les services tiers par 4. J'ai un site extrêmement simple à administrer, très léger donc très rapide, qui consomme très peu d'électricité et émet donc peu de GES. Le site suit aussi tous les canons du design numérique d'aujourd'hui : mobile-first, accessibilité, rapidité de chargement. En fait il est assez surprenant de se rendre compte que des limitations structurelles (poids/énergie) ramènent à des expériences de navigation beaucoup plus accessibles à tous les publics quelque soit leur équipement, leur connexion ou leur impératif de motricité ou de vision.</p>

<p>Voici quelques résultats à la volée sur quelques outils standards pour mesurer le poids et la vitesse de pages web.</p>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/2607424577-1552409494/low6.png"/><figcaption>Bon élève sur Pingdom, peut mieux faire avec la version statique</figcaption></figure>

<figure><img alt="" src="http://gauthierroussilhe.com/media/pages/posts/convert-low-tech/1411975117-1552409494/low12.png"/><figcaption>Choucou de PageSpeed Insights</figcaption></figure>

<p>Nous avons encore un peu de travail pour rendre ce site exemplaire. Je dois mettre en ligne une nouvelle version du site statique et nous devons améliorer le code pour bien redimensionner les images de façon native au lieu d'utiliser html.</p>
  </article>
</section>


<nav id="jumpto">
  <p>
    <a href="/david/blog/">Accueil du blog</a> |
    <a href="http://gauthierroussilhe.com/fr/posts/convert-low-tech">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>