davidbgk
/
larlet-fr-david

<!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` element
  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,initial-scale=1">
<!-- Required to make a valid HTML5 document. -->
<title>Jour 1 — David Larlet</title>
<meta name="description" content="Malgré la rigueur de ma vie ici, le verre d’eau sur la table me paraît encore a moitié plein… même s’il est plein de glace.">
<!-- That good ol' feed, subscribe :). -->
<link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
<!-- Generated from https://realfavicongenerator.net/ such a mess. -->
<link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
<link rel="manifest" href="/static/david/icons2/site.webmanifest">
<link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
<link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
<meta name="msapplication-TileColor" content="#f7f7f7">
<meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
<meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
<meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
<!-- Documented, feel free to shoot an email. -->
<link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
<!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t4_poly_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: light), (prefers-color-scheme: no-preference)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
<script>
    function toggleTheme(themeName) {
        document.documentElement.classList.toggle(
            'forced-dark',
            themeName === 'dark'
        )
        document.documentElement.classList.toggle(
            'forced-light',
            themeName === 'light'
        )
    }
    const selectedTheme = localStorage.getItem('theme')
    if (selectedTheme !== 'undefined') {
        toggleTheme(selectedTheme)
    }
</script>

<body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">


<article>
<header>
  <h1>Jour 1</h1>
</header>
<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/05/05/" title="Publication précédente : Accessibilité">← Précédent</a> •
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a>
     • <a rel="next" href="/david/2021/05/07/" title="Publication suivante : Jour 2">Suivant →</a>
  </p>
</nav>
<hr>


<blockquote>
<p>Malgré la rigueur de ma vie ici, le verre d’eau sur la table me paraît encore a moitié plein… même s’il est plein de glace.</p>
<p><cite><em>Encabanée</em>, Gabrielle Filteau-Chiba</cite></p>
</blockquote>
<p>Alors que je marche de nouveau dans la forêt, j’imagine une autre forme de partage. Plus proche de ce que pourrait proposer <a href="https://gather.town/">gather.town</a> mais en mode nature. Avec une notion de distance/temps(/météo?!) et la possibilité de consulter des images et des sons pendant un parcours libre sur une carte numérique reflétant une topographie bien physique. Je pourrais même me balader moi aussi sur cet espace à un moment donné pour échanger sur certains des artefacts partagés ou commenter une vidéo en direct.</p>
<p>Cette idée fait son petit bout de chemin pendant que je trace le mien. Enfin, tracer est un bien grand mot, je me rends compte que je suis beaucoup plus en mode <em>camping</em> depuis que je fais des vidéos en utilisant des sentiers et emplacement aménagés. Le sac est plus lourd et le matériel plus fragile, je cède aisément à la facilité dans ces conditions.</p>
<p>Je finis par m’arrêter au bord de l’un des multiples lacs qui ponctuent mon parcours ce jour-là. Ils annoncent des températures négatives dans la nuit, aussi j’essaye de me mettre un minimum à l’abri des arbres. Chaque mètre qui me sépare du lac m’éloigne également de la cacophonie nocturne qui s’en vient…</p>
<p>En dépit de ma <a href="/david/2021/05/04/" title="Touriste">non-intention</a>, je ne résiste pas à l’envie de vous montrer quelques photos. En guise d’immersion du pauvre (on dit <abbr title="Produit Manuellement Vérifiable">MVP</abbr>), je vous propose d’activer la bande son suivante lors de la consultation (le volume est <em>crescendo</em> mais je ne l’ai pas retouché en post-production)&nbsp;:</p>
<audio controls>
    <source src="/static/david/2021/sons-lac-cote-1.mp3" type="audio/mpeg">
    Votre navigateur ne semble pas supporter la balise HTML audio. Vous pouvez toujours la <a href="/static/david/2021/sons-lac-cote-1.mp3">télécharger ici</a> pour une écoute dans l’une de vos applications.
</audio>
<hr />
<figure>
    <a href="#barrage"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/barrage.jpg" alt="Un lac créé par un barrage de castor"
             loading="lazy" width="1600" height="1200" />
    </a>
    <a href="#_" class="lightbox" id="barrage">
        <img src="/static/david/2021/barrage.jpg" alt="Un lac créé par un barrage de castor"
             loading="lazy" width="1600" height="1200" />
    </a>
    <figcaption>J’aime lorsqu’on voit l’endroit exact où l’eau se déverse par-dessus le barrage des castors.</figcaption>
</figure>
<figure>
    <a href="#ruisseau"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/ruisseau.jpg" alt="Un ruisseau au milieu de la forêt canadienne"
             loading="lazy" width="1600" height="1200" />
    </a>
    <a href="#_" class="lightbox" id="ruisseau">
        <img src="/static/david/2021/ruisseau.jpg" alt="Un ruisseau au milieu de la forêt canadienne"
             loading="lazy" width="1600" height="1200" />
    </a>
    <figcaption>La neige a fondue mais les lacs continuent de se déverser les uns dans les autres.</figcaption>
</figure>
<figure>
    <a href="#lichens"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/lichens.jpg" alt="Des lichens sur un rocher"
             loading="lazy" width="1600" height="1200" />
    </a>
    <a href="#_" class="lightbox" id="lichens">
        <img src="/static/david/2021/lichens.jpg" alt="Des lichens sur un rocher"
             loading="lazy" width="1600" height="1200" />
    </a>
    <figcaption>Au printemps, c’est toute une diversité de petites pousses qui croissent sur les rochers.</figcaption>
</figure>
<figure>
    <a href="#grenouille"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/grenouille.jpg" alt="Une petite grenouille sur un tronc"
             loading="lazy" width="1600" height="1200" />
    </a>
    <a href="#_" class="lightbox" id="grenouille">
        <img src="/static/david/2021/grenouille.jpg" alt="Une petite grenouille sur un tronc"
             loading="lazy" width="1600" height="1200" />
    </a>
    <figcaption>En parlant de trucs qui croassent, celle-ci et ses copines (!) se sont faites plaisir cette nuit-là…</figcaption>
</figure>
<figure>
    <a href="#reflet-coucher"
        title="Cliquer pour une version haute résolution">
        <img src="/static/david/2021/reflet-coucher.jpg" alt="Reflets dans le lac au coucher du soleil"
             loading="lazy" width="1600" height="1200" />
    </a>
    <a href="#_" class="lightbox" id="reflet-coucher">
        <img src="/static/david/2021/reflet-coucher.jpg" alt="Reflets dans le lac au coucher du soleil"
             loading="lazy" width="1600" height="1200" />
    </a>
    <figcaption>Ça semble être apaisant et calme mais le chant des divers insectes/batraciens/oiseaux alentours est à la limite du supportable (fin de la bande son).</figcaption>
</figure>
<hr />
<p><mark>Note avant publication&nbsp;:</mark> je découvre qu’il existe une <a href="https://www12.statcan.gc.ca/census-recensement/2021/ref/soundtrack-bandesonore/index-fra.htm">Bande sonore du Recensement de 2021</a>, je me sens tellement dans la <em>hype</em> avec mes idées. Bientôt j’ajoute <em>grosshacker</em> sur mon CV. #PunIntended</p>

<nav>
  <p class="center">
    <a rel="prev" href="/david/2021/05/05/" title="Publication précédente : Accessibilité">← Précédent</a> •
    <a href="/david/2021/" title="Liste des publications récentes">↑ En 2021</a>
     • <a rel="next" href="/david/2021/05/07/" title="Publication suivante : Jour 2">Suivant →</a>
  </p>
</nav>
</article>


<hr>

<footer>
  <p>
    <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
      </svg> Accueil</a> •
    <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
      </svg> Suivre</a> •
    <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
      </svg> Pro</a> •
    <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
      </svg> Email</a> •
    <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
        <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
      </svg> Légal</abbr>
  </p>
  <template id="theme-selector">
      <form>
          <fieldset>
              <legend><svg class="icon icon-brightness-contrast">
                <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
              </svg> Thème</legend>
              <label>
                  <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
              </label>
              <label>
                  <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
              </label>
              <label>
                  <input type="radio" value="light" name="chosen-color-scheme"> Clair
              </label>
          </fieldset>
      </form>
  </template>
</footer>
<script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
<script>
    function loadThemeForm(templateName) {
        const themeSelectorTemplate = document.querySelector(templateName)
        const form = themeSelectorTemplate.content.firstElementChild
        themeSelectorTemplate.replaceWith(form)

        form.addEventListener('change', (e) => {
            const chosenColorScheme = e.target.value
            localStorage.setItem('theme', chosenColorScheme)
            toggleTheme(chosenColorScheme)
        })

        const selectedTheme = localStorage.getItem('theme')
        if (selectedTheme && selectedTheme !== 'undefined') {
            form.querySelector(`[value="${selectedTheme}"]`).checked = true
        }
    }

    const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
    window.addEventListener('load', () => {
        let hasDarkRules = false
        for (const styleSheet of Array.from(document.styleSheets)) {
            let mediaRules = []
            for (const cssRule of styleSheet.cssRules) {
                if (cssRule.type !== CSSRule.MEDIA_RULE) {
                    continue
                }
                // WARNING: Safari does not have/supports `conditionText`.
                if (cssRule.conditionText) {
                    if (cssRule.conditionText !== prefersColorSchemeDark) {
                        continue
                    }
                } else {
                    if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
                        continue
                    }
                }
                mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
            }

            // WARNING: do not try to insert a Rule to a styleSheet you are
            // currently iterating on, otherwise the browser will be stuck
            // in a infinite loop…
            for (const mediaRule of mediaRules) {
                styleSheet.insertRule(mediaRule.cssText)
                hasDarkRules = true
            }
        }
        if (hasDarkRules) {
            loadThemeForm('#theme-selector')
        }
    })
</script>
</body>
</html>