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` 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>Les ressources pour l'écoconception et la sobriété numérique (archive) — David Larlet</title>
<meta name="description" content="Publication mise en cache pour en conserver une trace.">
<!-- 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>

  <meta name="robots" content="noindex, nofollow">
  <meta content="origin-when-cross-origin" name="referrer">
  <!-- Canonical URL for SEO purposes -->
  <link rel="canonical" href="https://www.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/">

<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>Les ressources pour l'écoconception et la sobriété numérique</h1>
  </header>
  <nav>
    <p class="center">
      <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="https://www.pikselkraft.com/les-ressources-pour-l-ecoconception-et-la-sobriete-numerique/" title="Lien vers le contenu original">Source originale</a>
    </p>
  </nav>
  <hr>
  <p>Cette liste qui sera mise à jour régulièrement et regroupe des liens vers des rapports, ressources et outils qui permettent d'appréhender la sobriété numérique. L'objectif est d'inverser la tendance d'un numérique toujours plus présent, envahissant et lourd au profit d'un numérique plus humain qui peut être assimilé à un outil convivial (terme introduit par Ivan Illich dans La convivialité).</p>
<p>Cette liste n'est pas exhaustive, elle se base sur nos recherches et découvertes, mais ils existent de nombreuses autres ressources disponibles sur le sujet. Si vous voulez partager des ressources avec nous, vous pouvez nous contacter par courriel : com[@]pikselkraft.com.</p>
<h2>Le constat (Pourquoi ?)</h2>
<ul>
<li>Httparchive, <a href="https://httparchive.org/reports/state-of-the-web">State of the Web</a></li>
<li>Keycdn, <a href="https://www.keycdn.com/support/the-growth-of-web-page-size">The Growth of Web Page Size</a></li>
<li>The Shift Project, <a href="https://theshiftproject.org/article/climat-insoutenable-usage-video/">Climat : l’insoutenable usage de la vidéo en ligne</a></li>
<li>The Shift Project, <a href="https://theshiftproject.org/article/deployer-la-sobriete-numerique-rapport-shift/">Déployer la sobriété numérique : le nouveau rapport du Shift sur l’impact environnemental du numérique</a></li>
<li>Ademe, <a href="https://www.ademe.fr/sites/default/files/assets/documents/guide-pratique-face-cachee-numerique.pdf">La face cachée du numérique</a></li>
<li>France Stratégie, <a href="https://www.strategie.gouv.fr/sites/strategie.gouv.fr/files/atoms/files/fs-2020-dt-consommation-metaux-du-numerique-juin.pdf">La consommation de métaux du numérique : un secteur loin d’être dématérialisé</a></li>
<li>Guillaume Pitron, La guerre des metaux rares, éditeur : Les Liens Qui Libèrent</li>
<li>Green IT, <a href="https://www.greenit.fr/etude-empreinte-environnementale-du-numerique-mondial/">Empreinte environnementale du numérique mondial</a></li>
<li>Bertrand Keller, <a href="https://bertrandkeller.info/2020/07/15/effet-rebond-num%C3%A9rique-responsable/">C’est quoi l’effet rebond pour Internet ?</a></li>
<li>Bret Victor, <a href="http://worrydream.com/#!/ClimateChange">What can a technologist do about climate change?</a></li>
</ul>
<h2>Les principes de la sobriété numérique et des low-tech</h2>
<ul>
<li>Frédéric Bordage, Écoconception web : les 115 bonnes pratiques – 3ème édition, éditeur : Eyrolles | <a href="https://collectif.greenit.fr/ecoconception-web/115-bonnes-pratiques-eco-conception_web.html">Version en ligne</a></li>
<li>Philippe Bihouix, L'Âge des low tech. Vers une civilisation techniquement soutenable, éditeur : Seuil</li>
<li>Passerelle n°21, <a href="https://www.ritimo.org/Low-tech-face-au-tout-numerique-se-reapproprier-les-technologies-8264">Low tech : face au tout-numérique, se réapproprier les technologies</a></li>
<li>Small technology, <a href="https://small-tech.org/about/#small-technology">Small Tech is…</a></li>
<li>Lowtechmagazine, <a href="https://solar.lowtechmagazine.com/fr/2018/09/how-to-build-a-lowtech-website.html">Comment créer un site web basse technologie</a></li>
<li>Chez LauDev, <a href="https://ldevernay.github.io/green/2020/05/19/methodo.html">Audits d'écoconception</a></li>
<li><a href="https://www.academie-nr.org/#mooc-nr">MOOC Numérique Responsable</a></li>
<li>Gauthier Roussilhe, <a href="https://situer-le-numerique.netlify.app/">Situer le numérique</a></li>
<li>Gauthier Roussilhe, <a href="https://gauthierroussilhe.com/post/ecoconception-critique.html">Eco-conception, le brouillard à venir</a></li>
<li>Designer Éthique, <a href="https://eco-conception.designersethiques.org/guide/">Le guide d’éco-conception de services numériques</a></li>
<li>L'Institut Paris Region, <a href="https://www.institutparisregion.fr/economie/commerce-et-consommation/la-vie-low-tech-en-2040/">La vie low-tech en 2040</a> </li>
<li>Hundred Rabbits, <a href="https://100r.co/site/about_us.html">resilience and self-reliance through low-tech solutions</a></li>
</ul>
<h2>Recherche en design (déterminer les besoins)</h2>

<h2>Développement</h2>
<p>Il faut choisir les outils en fonction du besoin des utilisateurs et de leur impact. L'important est d'avoir une bonne maîtrise des bases du web (HTML, CSS) et en fonction des besoins de certains langages de programmation. On s'intéresse plus aux ressources qui permettent de suivre les standards d'Internet et non pas des outils précis. Attention aux tendances qui mettent en avant des langages et méthodes sans prendre en compte les besoins réels.</p>

<h2>Accessibilité et vie privée</h2>
<p>Ces domaines s'accordent parfaitement avec la sobriété numérique et sont bien souvent les conséquences d'un service écoconçu.</p>

<h2>Outils de mesure</h2>

<h2>Critique radical, histoire des technologie et technocritiques</h2>
<ul>
<li>Ivan Illich,  La Convivialité, éditeur : seuil (version original : Tools for Conviviality)</li>
<li>Nicolas Alep, Julia Lainae, Contre l'alternumérisme: Pourquoi nous ne proposerons pas d'"écogestes numériques" ni de solutions pour une "démocratie numérique", éditeur : La Lenteur éditions </li>
<li>David Edgerton, Quoi de neuf ? Du rôle des techniques dans l'histoire globale, éditeur : seuil (version original : The Shock Of The Old: Technology and Global History)</li>
<li>Irénée Régnauld, <a href="https://maisouvaleweb.fr/pour-en-finir-avec-le-colonialisme-technologique/">Pour en finir avec le « colonialisme technologique »</a>, Mais où va le Web</li>
<li>La Boite Noire, <a href="https://www.youtube.com/watch?v=1YuKnT_pjUE&amp;ab_channel=LaBoiteNoire">Histoire de la Techno-Utopie</a> (Youtube)</li>
<li>John Naughton, The Guardian, <a href="https://www.theguardian.com/commentisfree/2021/may/29/data-oil-metaphor-tech-companies-surveillance-capitalism">Data isn’t oil, whatever tech commentators tell you: it’s people’s lives</a></li>
</ul>
<h2>Dépasser le numérique, écologie et imaginaire numérique</h2>

<h2>Conférences à voir</h2>
<p>N'hésitez pas à utiliser <a href="https://github.com/SimonBrazell/privacy-redirect">Privacy Redirect</a> pour utiliser une alternative à Youtube qui évite le tracking par Google.</p>
</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>