A place to cache linked articles (think custom and personal wayback machine)
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

index.html 20KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368
  1. <!doctype html><!-- This is a valid HTML5 document. -->
  2. <!-- Screen readers, SEO, extensions and so on. -->
  3. <html lang="fr">
  4. <!-- Has to be within the first 1024 bytes, hence before the `title` element
  5. See: https://www.w3.org/TR/2012/CR-html5-20121217/document-metadata.html#charset -->
  6. <meta charset="utf-8">
  7. <!-- Why no `X-UA-Compatible` meta: https://stackoverflow.com/a/6771584 -->
  8. <!-- The viewport meta is quite crowded and we are responsible for that.
  9. See: https://codepen.io/tigt/post/meta-viewport-for-2015 -->
  10. <meta name="viewport" content="width=device-width,initial-scale=1">
  11. <!-- Required to make a valid HTML5 document. -->
  12. <title>Pollution numérique (archive) — David Larlet</title>
  13. <meta name="description" content="Publication mise en cache pour en conserver une trace.">
  14. <!-- That good ol' feed, subscribe :). -->
  15. <link rel="alternate" type="application/atom+xml" title="Feed" href="/david/log/">
  16. <!-- Generated from https://realfavicongenerator.net/ such a mess. -->
  17. <link rel="apple-touch-icon" sizes="180x180" href="/static/david/icons2/apple-touch-icon.png">
  18. <link rel="icon" type="image/png" sizes="32x32" href="/static/david/icons2/favicon-32x32.png">
  19. <link rel="icon" type="image/png" sizes="16x16" href="/static/david/icons2/favicon-16x16.png">
  20. <link rel="manifest" href="/static/david/icons2/site.webmanifest">
  21. <link rel="mask-icon" href="/static/david/icons2/safari-pinned-tab.svg" color="#07486c">
  22. <link rel="shortcut icon" href="/static/david/icons2/favicon.ico">
  23. <meta name="msapplication-TileColor" content="#f7f7f7">
  24. <meta name="msapplication-config" content="/static/david/icons2/browserconfig.xml">
  25. <meta name="theme-color" content="#f7f7f7" media="(prefers-color-scheme: light)">
  26. <meta name="theme-color" content="#272727" media="(prefers-color-scheme: dark)">
  27. <!-- Documented, feel free to shoot an email. -->
  28. <link rel="stylesheet" href="/static/david/css/style_2021-01-20.css">
  29. <!-- See https://www.zachleat.com/web/comprehensive-webfonts/ for the trade-off. -->
  30. <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>
  31. <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>
  32. <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>
  33. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_regular.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  34. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_bold.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  35. <link rel="preload" href="/static/david/css/fonts/triplicate_t3_italic.woff2" as="font" type="font/woff2" media="(prefers-color-scheme: dark)" crossorigin>
  36. <script>
  37. function toggleTheme(themeName) {
  38. document.documentElement.classList.toggle(
  39. 'forced-dark',
  40. themeName === 'dark'
  41. )
  42. document.documentElement.classList.toggle(
  43. 'forced-light',
  44. themeName === 'light'
  45. )
  46. }
  47. const selectedTheme = localStorage.getItem('theme')
  48. if (selectedTheme !== 'undefined') {
  49. toggleTheme(selectedTheme)
  50. }
  51. </script>
  52. <meta name="robots" content="noindex, nofollow">
  53. <meta content="origin-when-cross-origin" name="referrer">
  54. <!-- Canonical URL for SEO purposes -->
  55. <link rel="canonical" href="https://www.hydroquebec.com/a/decarboner.html">
  56. <body class="remarkdown h1-underline h2-underline h3-underline em-underscore hr-center ul-star pre-tick" data-instant-intensity="viewport-all">
  57. <article>
  58. <header>
  59. <h1>Pollution numérique</h1>
  60. </header>
  61. <nav>
  62. <p class="center">
  63. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  64. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  65. </svg> Accueil</a> •
  66. <a href="https://www.hydroquebec.com/a/decarboner.html" title="Lien vers le contenu original">Source originale</a>
  67. </p>
  68. </nav>
  69. <hr>
  70. <div role="main">
  71. <div class="accueil-image"></div>
  72. <section class="hq-section hq-bloc-bleu">
  73. <div class="row">
  74. <div class="columns medium-12">
  75. <header>
  76. <h1>Diminuer la pollution numérique, c’est&nbsp;possible</h1>
  77. <p>
  78. La pollution numérique causée par le téléchargement, le stockage et le partage des données est en grande partie due à l’utilisation de serveurs très énergivores. Invisible, elle génère pourtant 4&nbsp;%<sup>1</sup> des émissions mondiales de gaz à effet de serre (GES). Ensemble, nous pouvons contribuer à la&nbsp;réduire.
  79. </p>
  80. </header>
  81. </div>
  82. </div>
  83. </section>
  84. </div>
  85. <section id="donnees-ges" class="hq-section">
  86. <div class="row">
  87. <div class="columns small-12 marginbottom-30">
  88. <h2>Ces données génératrices de&nbsp;GES</h2>
  89. <p>La circulation d’information sur Internet a un impact environnemental important. Son empreinte carbone est, entre autres, gonflée par les grandes quantités d’énergies fossiles utilisées pour alimenter les centres de données qui assurent cette circulation. Et ce trafic croît à une vitesse fulgurante. Encore plus depuis le début de la pandémie de&nbsp;COVID&#8209;19. </p>
  90. <p>Au cours des derniers mois, partout sur la planète, les gens se sont en effet davantage tournés vers leur connexion Internet pour le travail, les divertissements et autres activités. Cette hausse de la circulation Web a fait bondir la consommation d’énergie qui y est&nbsp;associée.</p>
  91. <p>Selon différents scénarios, cette consommation pourrait représenter de 8 % à 21 % des besoins mondiaux en électricité d’ici 2030. La lecture en continu de vidéos, par exemple, compte à elle seule pour 60&nbsp;%<sup>2</sup> du trafic Web et génère près de 1 % des émissions mondiales de gaz carbonique<sup>3</sup>. Sachant qu’actuellement, 64 % de la production d’électricité provient de sources fossiles, principales émettrices de GES, cela a de quoi&nbsp;inquiéter.</p>
  92. <ul>
  93. <li class="no-bullet note"><sup>1</sup> Agence de la transition écologique, France, mars 2020</li>
  94. <li class="no-bullet note"><sup>2</sup> Agence de la transition écologique, France, mars 2020</li>
  95. <li class="no-bullet note"><sup>3</sup> Groupe de réflexion The Shift Project</li>
  96. </ul>
  97. </div>
  98. </div>
  99. <div class="row ">
  100. <div class="columns small-12">
  101. <div class="graph graph1">
  102. <div class="marginbottom-30">
  103. <h3 class="title-h5">Prévisions de la demande en&nbsp;énergie</h3>
  104. <p>Des prévisions largement diffusées suggèrent que la demande totale en électricité imputable aux technologies de l’information et des communications (TIC) s’accélérera dans les années 2020, et que la part des centres de données&nbsp;augmentera.</p>
  105. <figure class="centrer">
  106. <img src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Graph1-EnergiePrevision@2x.png" alt="Graphique démontrant que la demande en energie entre 2010 et 2030 augmentera dans tous les secteurs des TIC. L'augmentation la plus importante sera pour les réseaux cablés et sans fil qui compterons pour 20,9% de la demande totale projetté en 2030.">
  107. </figure>
  108. </div>
  109. <div>
  110. <h3 class="title-h5">Sources de production de l’électricité dans le&nbsp;monde</h3>
  111. <figure class="centrer">
  112. <img width="400" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Graph2-Energieproduction@2x.png" alt="Graphiqhe circulaire des sources de production d'electricité dans le monde: 25 % Renouvelable, 10 % Nucléaire et 64 % Fossile. ">
  113. </figure>
  114. <p class="note centrer">Sources : Sites Internet de la U.S. Energy and Information Administration et de Ressources naturelles&nbsp;Canada</p>
  115. </div>
  116. </div>
  117. </div>
  118. </div>
  119. </section>
  120. <section id="centre-donnees" class="hq-section hq-bloc-bleu">
  121. <div class="row">
  122. <div class="columns small-12">
  123. <h2>Des centres de données au Québec : bon pour la&nbsp;planète</h2>
  124. </div>
  125. <div class="columns small-12 medium-8">
  126. <p>La bonne nouvelle ? Nous pouvons tous jouer un rôle pour réduire l’empreinte environnementale du trafic Internet, notamment en adoptant au quotidien des habitudes qui font preuve d’une certaine sobriété&nbsp;numérique.</p>
  127. <p>Hydro-Québec fait, elle aussi, partie de la solution. En incitant des centres de traitement de données à s’installer ici pour profiter de notre énergie propre, nous pouvons en effet contribuer à rendre le trafic Internet plus&nbsp;vert.</p>
  128. <p>Notre électricité provient à plus de 99,8 % de sources renouvelables. De plus, nos tarifs sont parmi les plus bas d’Amérique du Nord. Ajoutons à cela que le climat québécois et l’abondance d’eau fraîche facilitent le refroidissement des serveurs, ce qui se traduit par d’importantes économies d’énergie pour les exploitants de centres de&nbsp;données.</p>
  129. <h3>Chaque année, un centre de données de 100 GWh déployé au Québec évite l’émission&nbsp;de</h3>
  130. <div class="row hq-donnees-row">
  131. <div class="columns small-12 medium-4 hq-donnees border-white">
  132. <p><span class="big-block">41&nbsp;000 tonnes</span><span class="med-block">de&nbsp;GES</span><span class="small-block">comparativement à une installation semblable en&nbsp;Virginie</span></p>
  133. </div>
  134. <div class="columns small-12 medium-4 hq-donnees no-pad border-white">
  135. <p><span class="big-block">42&nbsp;000 tonnes</span> <span class="med-block">de&nbsp;GES</span><span class="small-block">comparativement à une installation semblable en Caroline du&nbsp;Nord</span></p>
  136. </div>
  137. <div class="columns small-12 medium-4 hq-donnees no-border">
  138. <p><span class="big-block">40&nbsp;000 tonnes</span><span class="med-block">de&nbsp;GES</span><span class="small-block">comparativement à une installation semblable à&nbsp;Toronto</span></p>
  139. </div>
  140. <div class="columns small-12">
  141. <p class="note">*Source: Energy Information Administration, 2015</p>
  142. </div>
  143. </div>
  144. </div>
  145. <div class="columns small-12 medium-4">
  146. <div class="hq-bloc-gris">
  147. <div class="row marginbottom-10 ">
  148. <div class="columns small-6 medium-8 text-box">
  149. <h4>Une appli d’ici pour favoriser la sobriété&nbsp;numérique </h4>
  150. </div>
  151. <div class="columns small-6 medium-4 logo-box">
  152. <figure class="centrer">
  153. <img width="150" src="https://www.hydroquebec.com/themes/landing/images/eec/poisson.png" alt="" >
  154. </figure>
  155. </div>
  156. </div>
  157. <p>Recherches Web, visioconférence, visionnement en continu, courriels : nous pouvons tous mieux consommer l’énergie utilisée pour alimenter nos activités numériques&nbsp;quotidiennes.</p>
  158. <p>Afin de nous aider à prendre conscience de nos habitudes, une application pour téléphones intelligents propose une expérience de sobriété numérique. Ce parcours ludique de 30 jours systématise chacun des gestes pro-environnementaux que nous faisons et il en mesure&nbsp;l’impact.</p>
  159. <p>Cette application a été conçue par <a href="http://ecoistclub.com/">Ecoist Club</a>. Cette jeune entreprise québécoise est la gagnante du défi Hydro-Québec <em>Comment mettre à profit notre énergie propre et notre énergie humaine pour rendre notre société encore plus résiliente ?</em>, lancé dans le cadre du <a href="https://cooperathon.ca/">Coopérathon 2020</a>.</p>
  160. </div>
  161. </div>
  162. </div>
  163. <div class="row marginbottom-40">
  164. <div class="columns small-12 medium-8">
  165. <p>Le Québec a également l’avantage d’être situé à un temps de latence* de cinq à dix millisecondes de la plupart des grandes villes du nord-est des États-Unis, une région où circule jusqu’à 80 % du trafic Internet mondial. Notre province est donc une destination de rechange intéressante pour des entreprises possédant des serveurs dans des villes comme Ashburn en Virginie, par exemple, où l’électricité provient à 52 % de combustibles fossiles fortement émetteurs de&nbsp;GES.</p>
  166. <p>Déjà, des géants du Web reconnaissent notre province comme un emplacement de choix pour entreprendre ici leur virage écologique : notamment Google, OVH et Amazon Web Services, qui y ont des&nbsp;installations. </p>
  167. <p>En faisant du Québec le pôle Internet propre du Nord-Est américain, nous contribuons à transformer ce secteur de l’économie afin qu’il soit plus&nbsp;propre.</p>
  168. <p class="margintop-20 marginbottom-20"><a href="https://www.hydroquebec.com/centre-donnees/">Pour en apprendre davantage sur les centres de données au Québec</a></p>
  169. <p class="note">*Temps nécessaire à un paquet de données pour qu’il passe de la source à la destination en empruntant un&nbsp;réseau.</p>
  170. </div>
  171. <div class="columns small-12 medium-4">
  172. <div class="hq-bloc-gris">
  173. <h4>Le Québec mondialement&nbsp;reconnu</h4>
  174. <p>En plus d’avoir été nommée <a href="https://www.realwire.com/releases/12th-Datacloud-Global-Awards-winners-announced"><em>2019 Data Center Location of the Year</em></a> par les <em>Datacloud Global Awards</em> et d’avoir reçu le <a href="https://www.fdiintelligence.com/article/76409"><em>2019 Data Centres AI Specialism Award</em></a> des <em>Financial Times</em> fDi Strategy Awards, la grande région de Montréal a obtenu la première place dans le palmarès <a href="https://www.fdiintelligence.com/article/78347"><em>Tier 2 Cities of the Future 2020/21 Foreign Direct Investment (FDI) Strategy category of&nbsp;fDi’s</em></a>.</p>
  175. </div>
  176. </div>
  177. </div>
  178. <div class="row">
  179. <div class="columns small-12">
  180. <div class="graph graph2">
  181. <h3 class="title-h5 marginbottom-40">L’électricité d’Hydro&#8209;Québec&nbsp;: <br>l’une des plus faiblement émettrices de carbone du&nbsp;monde</h3>
  182. <figure>
  183. <img src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Graph3-ProduitCarbone@2x.png" alt="
  184. Graphique démontrant que le Québec fait parti des plus bas emetteurs de GES au monde et la meilleure province au Canada.">
  185. </figure>
  186. </div>
  187. </div>
  188. </div>
  189. </section>
  190. <section id="astuces" class="hq-section">
  191. <div class="row">
  192. <div class="columns small-12">
  193. <h2>Réduire votre pollution numérique&nbsp;: le&nbsp;saviez-vous&nbsp;?</h2>
  194. </div>
  195. <div class="columns small-12 medium-4 tuile">
  196. <figure>
  197. <img alt="" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Icon-Courriel-bleu@2x.png">
  198. </figure>
  199. <h3 class="title-h6">Correspondance</h3>
  200. <p>La messagerie instantanée consomme moins que les&nbsp;courriels.</p>
  201. </div>
  202. <div class="columns small-12 medium-4 tuile">
  203. <figure>
  204. <img alt="" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Icon-RechercheWeb-bleu@2x.png">
  205. </figure>
  206. <h3 class="title-h6">Recherches&nbsp;Web</h3>
  207. <p>La recherche sur le Web émet quatre fois plus de GES que l’accès direct à un site : il est donc préférable de taper le nom du site dans la barre d’adresse ou d’utiliser les favoris et l’historique pour s’y&nbsp;rendre.</p>
  208. </div>
  209. <div class="columns small-12 medium-4 tuile">
  210. <figure>
  211. <img alt="" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Icon-Reunions-bleu@2x.png">
  212. </figure>
  213. <h3 class="title-h6">Réunions</h3>
  214. <p>Les audioconférences consomment 1 000 fois moins de bande passante que les&nbsp;visioconférences.</p>
  215. </div>
  216. </div>
  217. <div class="row">
  218. <div class="columns small-12 medium-4 tuile">
  219. <figure>
  220. <img alt="" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Icon-Films-bleu@2x.png">
  221. </figure>
  222. <h3 class="title-h6">Divertissement</h3>
  223. <p>L’écoute de séries télévisées et de films sur un ordinateur portable est beaucoup moins énergivore que sur un téléviseur intelligent ou un téléviseur combiné à une console de&nbsp;jeu.</p>
  224. </div>
  225. <div class="columns small-12 medium-4 tuile">
  226. <figure>
  227. <img alt="" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Icon-Connexion-bleu@2x.png">
  228. </figure>
  229. <h3 class="title-h6">Connexion</h3>
  230. <p>Le Wifi ou une connexion filaire consomme tout simplement moins que le réseau&nbsp;cellulaire.</p>
  231. </div>
  232. <div class="columns small-12 medium-4 tuile">
  233. <figure>
  234. <img alt="" src="https://www.hydroquebec.com/themes/landing/images/eec/HQ-Decarboner-Icon-Nuage-bleu@2x.png">
  235. </figure>
  236. <h3 class="title-h6">Nuage</h3>
  237. <p>Il est bon de stocker uniquement le nécessaire sur les sites infonuagiques, et encore mieux d’utiliser le disque de l’ordinateur ou un disque&nbsp;externe.</p>
  238. </div>
  239. </div>
  240. <div class="row">
  241. <div class="columns small-12">
  242. <p class="note centrer">
  243. Source&nbsp;: Agence de la transition écologique, France, mars&nbsp;2020
  244. </p>
  245. <p class="centrer margintop-40"><a class="lien" href="https://www.hydroquebec.com/developpement-durable/">Pour en apprendre plus sur le développement durable au cœur de nos activités</a></p>
  246. </div>
  247. </div>
  248. </section>
  249. </article>
  250. <hr>
  251. <footer>
  252. <p>
  253. <a href="/david/" title="Aller à l’accueil"><svg class="icon icon-home">
  254. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-home"></use>
  255. </svg> Accueil</a> •
  256. <a href="/david/log/" title="Accès au flux RSS"><svg class="icon icon-rss2">
  257. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-rss2"></use>
  258. </svg> Suivre</a> •
  259. <a href="http://larlet.com" title="Go to my English profile" data-instant><svg class="icon icon-user-tie">
  260. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-user-tie"></use>
  261. </svg> Pro</a> •
  262. <a href="mailto:david%40larlet.fr" title="Envoyer un courriel"><svg class="icon icon-mail">
  263. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-mail"></use>
  264. </svg> Email</a> •
  265. <abbr class="nowrap" title="Hébergeur : Alwaysdata, 62 rue Tiquetonne 75002 Paris, +33184162340"><svg class="icon icon-hammer2">
  266. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-hammer2"></use>
  267. </svg> Légal</abbr>
  268. </p>
  269. <template id="theme-selector">
  270. <form>
  271. <fieldset>
  272. <legend><svg class="icon icon-brightness-contrast">
  273. <use xlink:href="/static/david/icons2/symbol-defs.svg#icon-brightness-contrast"></use>
  274. </svg> Thème</legend>
  275. <label>
  276. <input type="radio" value="auto" name="chosen-color-scheme" checked> Auto
  277. </label>
  278. <label>
  279. <input type="radio" value="dark" name="chosen-color-scheme"> Foncé
  280. </label>
  281. <label>
  282. <input type="radio" value="light" name="chosen-color-scheme"> Clair
  283. </label>
  284. </fieldset>
  285. </form>
  286. </template>
  287. </footer>
  288. <script src="/static/david/js/instantpage-5.1.0.min.js" type="module"></script>
  289. <script>
  290. function loadThemeForm(templateName) {
  291. const themeSelectorTemplate = document.querySelector(templateName)
  292. const form = themeSelectorTemplate.content.firstElementChild
  293. themeSelectorTemplate.replaceWith(form)
  294. form.addEventListener('change', (e) => {
  295. const chosenColorScheme = e.target.value
  296. localStorage.setItem('theme', chosenColorScheme)
  297. toggleTheme(chosenColorScheme)
  298. })
  299. const selectedTheme = localStorage.getItem('theme')
  300. if (selectedTheme && selectedTheme !== 'undefined') {
  301. form.querySelector(`[value="${selectedTheme}"]`).checked = true
  302. }
  303. }
  304. const prefersColorSchemeDark = '(prefers-color-scheme: dark)'
  305. window.addEventListener('load', () => {
  306. let hasDarkRules = false
  307. for (const styleSheet of Array.from(document.styleSheets)) {
  308. let mediaRules = []
  309. for (const cssRule of styleSheet.cssRules) {
  310. if (cssRule.type !== CSSRule.MEDIA_RULE) {
  311. continue
  312. }
  313. // WARNING: Safari does not have/supports `conditionText`.
  314. if (cssRule.conditionText) {
  315. if (cssRule.conditionText !== prefersColorSchemeDark) {
  316. continue
  317. }
  318. } else {
  319. if (cssRule.cssText.startsWith(prefersColorSchemeDark)) {
  320. continue
  321. }
  322. }
  323. mediaRules = mediaRules.concat(Array.from(cssRule.cssRules))
  324. }
  325. // WARNING: do not try to insert a Rule to a styleSheet you are
  326. // currently iterating on, otherwise the browser will be stuck
  327. // in a infinite loop…
  328. for (const mediaRule of mediaRules) {
  329. styleSheet.insertRule(mediaRule.cssText)
  330. hasDarkRules = true
  331. }
  332. }
  333. if (hasDarkRules) {
  334. loadThemeForm('#theme-selector')
  335. }
  336. })
  337. </script>
  338. </body>
  339. </html>