Version du 30 avril 1547
This commit is contained in:
parent
644f94828b
commit
e1b1d68403
BIN
assets/img/bg-water.jpg
Executable file
BIN
assets/img/bg-water.jpg
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 2.2 MiB |
@ -20,9 +20,11 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
|
||||
<div class="flex-col p-8">
|
||||
<div class="w-fit mx-auto mb-4 border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<SectionTitle dark=false>
|
||||
"Énergie: le nerf de la guerre"
|
||||
</SectionTitle>
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=false>
|
||||
"Énergie: le nerf de la guerre"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mr-72 ml-72">
|
||||
<p class="text-justify mb-10 mt-8">
|
||||
@ -37,8 +39,8 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex bg-zinc-200 max-h-[450px] flex-row justify-center items-center">
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
|
||||
<div class="flex bg-zinc-200 h-[450px] max-[1150px]:h-fit max-[1150px]:flex-col flex-row justify-center items-center">
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
|
||||
<img src="/img/electricity-icon.png" class="mx-auto"/>
|
||||
<div class="flex justify-center items-center">
|
||||
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
|
||||
@ -49,7 +51,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
|
||||
<img src="/img/water-icon.png" class="mx-auto"/>
|
||||
<div class="flex justify-center items-center">
|
||||
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
|
||||
@ -60,7 +62,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
|
||||
<img src="/img/tree-icon.png" class="mx-auto"/>
|
||||
<div class="flex justify-center items-center">
|
||||
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
|
||||
@ -71,7 +73,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
|
||||
<img src="/img/coin-icon.png" class="mx-auto"/>
|
||||
<div class="flex justify-center items-center">
|
||||
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
|
||||
@ -82,7 +84,7 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
|
||||
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6 max-[1415px]:scale-75 max-[1340px]:p-0 max-[1150px]:scale-100 max-[1150px]:p-8">
|
||||
<img src="/img/group-icon.png" class="mx-auto"/>
|
||||
<div class="flex justify-center items-center">
|
||||
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
|
||||
@ -97,9 +99,11 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
|
||||
<div class="justify-center items-center flex h-[250px] bg-cover bg-center opacity-75 bg-[url('/img/server-wires-page3.png')]">
|
||||
<div class="h-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<SectionTitle dark=true>
|
||||
"Qu'est-ce qu'un centre de données"
|
||||
</SectionTitle>
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=true>
|
||||
"Qu'est-ce qu'un centre de données"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col bg-indigo-950">
|
||||
@ -120,10 +124,12 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
<div class="p-8 w-fit h-fit pb-24 mr-72 ml-72">
|
||||
<div class="w-fit pt-4 pb-4 border-l-8 border-indigo-500 pl-2">
|
||||
<div class="flex-col">
|
||||
<h4 class="font-Lato w-48 whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">
|
||||
"Consommation d'énergie"
|
||||
</h4>
|
||||
<div class="flex justify-start pb-4">
|
||||
<SubsectionTitle dark=true>
|
||||
"Centres de données grande échelle (CDGE)"
|
||||
</SubsectionTitle>
|
||||
</div>
|
||||
<div class="flex justify-start pb-4 text-white">
|
||||
"Un CDGE est une unité constituée de milliers, voire de millions de serveurs centralisés sous un même toît. De tels serveurs sont généralement contenus dans d’énormes bâtiments exclusivement dédiés à l’hébergement de serveurs, ce qui requiert des systèmes de refroidissement énergivores."
|
||||
</div>
|
||||
</div>
|
||||
@ -134,9 +140,11 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
|
||||
<div class="flex flex-col bg-zinc-200 justify-center p-8">
|
||||
<div class="mx-auto h-fit w-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<SectionTitle dark=false>
|
||||
"Pourquoi des centres de données durables?"
|
||||
</SectionTitle>
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=false>
|
||||
"Pourquoi des centres de données durables?"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-justify p-4 mb=32 ml-72 mr-72">
|
||||
"Une publication de l’Agence internationale de l’énergie (AIE) indiquait en septembre 2022 que la demande énergétique des centres de données et des réseaux de transmission des données représentait de 2% à 3% de la consommation mondiale d’électricité, soit près de 1% des émissions de gaz à effet de serre du secteur énergétique (Kamiya, 2022)."
|
||||
@ -186,6 +194,179 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
|
||||
|
||||
<div class="flex flex-col justify-center">
|
||||
</div>
|
||||
|
||||
<div class="flex-col p-8">
|
||||
<div class="mx-auto h-fit w-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=false>
|
||||
"CDGE:5 problèmes actuels de l'indsutrie?"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row max-[1060px]:flex-col max-[1060px]:space-y-20 justify-center mt-16">
|
||||
<div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
|
||||
<img src="/img/electricity-icon.png" class="transform mx-auto"/>
|
||||
<h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
|
||||
"Consommation d'énergie démesurée"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
|
||||
<img src="/img/water-icon.png" class="transform mx-auto"/>
|
||||
<h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold"> "Consommation d'eau démesurrée"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
|
||||
<img src="/img/tree-icon.png" class="transform mx-auto"/>
|
||||
<h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold"> "Impact environnemental majeur"
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-row max-[1060px]:flex-col min-[1060px]:pt-16 max-[1060px]:space-y-20 max-[1060px]:mt-20 justify-center">
|
||||
<div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
|
||||
<img src="/img/coin-icon.png" class="transform mx-auto"/>
|
||||
<h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
|
||||
"Coûts exorbitants"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pl-40 pr-40 max-[1460px]:pl-16 max-[1460px]:pr-16">
|
||||
<img src="/img/group-icon.png" class="transform mx-auto"/>
|
||||
<h4 class="font-Lato mx-auto text-center w-64 p-4 text-blue-950 text-3xl font-bold">
|
||||
"Impact social négatif"
|
||||
</h4>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col bg-zinc-200 justify-center p-8">
|
||||
<div class="mx-auto h-fit w-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=false>
|
||||
"Consommation d'énergie démesurée"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
|
||||
<p class="text-justify p-4 mb=32">
|
||||
"On estime qu’en 2030, les technologies de l’information et de la communication, qui sont principalement basées sur l’utilisation de serveurs informatiques, pourraient dans le pire des cas consommer 51% l’électricité mondiale et, dans le meilleur des cas, 8% de l’électricité mondiale (Andrae & Edler, 2015; Jones, 2018). On estime que 50% de l’électricité consommée par les CDGE sert au refroidissement des serveurs (The Impact of Data Centers on The Environment, 2022). Cette consommation d’énergie est non seulement excessive, mais aussi hautement inefficiente. À titre illustratif, les résultats d’une simulation réalisée dans le cadre d’une étude chinoise réalisée en 2018 indiquaient que la charge cumulative annuelle de refroidissement d’un CD était beaucoup plus élevée que la charge cumulative annuelle de chaleur (Yu et al., 2019, p. 154). Le potentiel de réutilisation de la chaleur est donc énorme, de même que le gaspillage énergétique actuel."
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
|
||||
<p class="text-right p-4 mb=32">
|
||||
"L’énergie consommée par l’industrie des CD provient non seulement de l’exploitation des centres de données, mais aussi de leur construction. En effet, le déploiement de telles infrastructures nécessite des travaux d’envergure utilisant de grandes quantités d’énergies fossiles."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="justify-center items-center flex h-[250px] bg-cover bg-center opacity-90 bg-[url('/img/bg-water.jpg')]">
|
||||
<div class="h-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=true>
|
||||
"Consommation d'eau démesurée"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="bg-indigo-950 h-fit p-4">
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
|
||||
<p class="text-right p-4 text-white">
|
||||
"La consommation annuelle d’eau des centres de données est passée de 738.2 millions de litres en 2015 à près de 840 milliards de litres en 2021 (Holger, 2022), soit une augmentation de plus de 113 690% en 6 ans. Google révélait avoir utilisé à elle seule 16.28 milliards de litres d’eau en 2021 afin de refroidir et humidifier ses centres de données (Our Commitment to Climate-Conscious Data Center Cooling, 2022), ce qui équivaut à environ 6 400 piscines olympiques. Ces données sont préoccupantes, d’autant plus que la majorité de l’eau utilisée provient de sources potables."
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col bg-zinc-200 justify-center p-8">
|
||||
<div class="mx-auto h-fit w-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=false>
|
||||
"Impact environnemental majeur"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<p class="text-justify mb-12 mt-8 ml-72 mr-72">
|
||||
"Quant aux émissions de gaz à effet de serre (GES) des géants du web, le tableau suivant résume la situation en 2021 pour Amazon, Microsoft, Alphabet et Meta. À titre indicatif, l’empreinte carbone per capita aux États-Unis est d’environ 16 tonnes métriques d’équivalent CO2 (tCO2e) et l’empreinte per capita à l’échelle planétaire est d’environ 4 tCO2e (What Is Your Carbon Footprint? | Carbon Footprint Calculator, n.d.)"
|
||||
</p>
|
||||
<p class="text-justify ml-72 mr-72">
|
||||
"Les géants du web, nommément AWS, Azure, GCP, et Meta, déploient leurs centres de données sur d’énormes pans de territoires. À titre illustratif, AWS possède plus de 125 CDGE couvrant plus de 26 000 pi2 (Zhang, 2022b), soit l’équivalent d’environ 454 terrains de football américain. Une telle utilisation du territoire porte nécessairement atteinte à la biodiversité."
|
||||
</p>
|
||||
</div>
|
||||
<div class="bg-zinc-200 pb-8">
|
||||
<h4 class="flex justify-center font-Lato text-blue-950 text-3xl font-extrabold">
|
||||
"Émissions totales de GES"
|
||||
</h4>
|
||||
<h4 class="flex pb-4 justify-center font-Lato text-blue-950 text-2xl font-bold">
|
||||
"d'Amazon, Microsoft, Alphabet et Meta"
|
||||
</h4>
|
||||
<div class="bg-zinc-200 grid grid-cols-4 grid-rows-3 gap-y-4 ml-[450px] mr-[450px]">
|
||||
<h4 class="flex fit-content items-center justify-center w-fit max-h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
|
||||
"Catégories d'émissions"
|
||||
</h4>
|
||||
<div class="flex fit-content border-b-4 border-r-2 border-black pb-4">
|
||||
<h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
|
||||
"Scope 1"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex fit-content border-b-4 border-r-2 border-black pb-4">
|
||||
<h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
|
||||
"Scope 2"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flexfit-content border-b-4 border-black pb-4">
|
||||
<h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
|
||||
"Scope 3"
|
||||
</h4>
|
||||
</div>
|
||||
<h4 class="flex fit-content items-center justify-center max-h-[68px] rounded-lg font-Lato bg-white mx-auto text-center w-fit p-4 text-blue-950 text-xl font-bold -translate-y-1">
|
||||
"Quantité (tCO2e)"
|
||||
</h4>
|
||||
<div class="flex fit-content border-r-2 pt-4 border-black -translate-y-5">
|
||||
<h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
|
||||
"9 837 398"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex fit-content border-r-2 pt-4 border-black -translate-y-5">
|
||||
<h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
|
||||
"6 347 350"
|
||||
</h4>
|
||||
</div>
|
||||
<h4 class="flex items-center justify-center w-[142px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold">
|
||||
"74 566 000"
|
||||
</h4>
|
||||
<h4 class="flex items-center justify-center max-h-[68px] rounded-lg font-Lat bg-white mx-auto text-center p-4 text-blue-950 text-xl font-bold max-w-[175px] translate-y-1">
|
||||
"Quantité totale (tCO2e)"
|
||||
</h4>
|
||||
<div class="flex border-t-4 pt-4 border-black -translate-y-3">
|
||||
""
|
||||
</div>
|
||||
<div class="flex fit-content border-t-4 pt-4 border-black -translate-y-3">
|
||||
<h4 class="flex items-center justify-center w-[300px] h-[68px] rounded-lg font-Lato bg-white mx-auto text-center p-4 text-blue-950 text-2xl font-bold">
|
||||
"90 750 748"
|
||||
</h4>
|
||||
</div>
|
||||
<div class="flex border-t-4 pt-4 border-black -translate-y-3">
|
||||
""
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="flex flex-col justify-center p-8">
|
||||
<div class="mx-auto h-fit w-fit border-t-4 border-b-4 border-orange-400 p-4">
|
||||
<div class="ml-32 mr-32">
|
||||
<SectionTitle dark=false>
|
||||
"Coûts exorbitants"
|
||||
</SectionTitle>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mt-16 mr-72 ml-72 border-l-8 border-blue-400">
|
||||
<p class="text-justify p-4 mb=32">
|
||||
"Le coût de construction, d’exploitation et d’entretien d’un CDGE est extrêmement élevé. En effet, le coût de construction oscille entre $7 millions et $12 millions par mégawatt (MW) (Zhang, 2022a). Sachant que les centres de données de Google Cloud Platform (GCP) consomment en moyenne 20 MW, on parle d’un coût de construction entre $140 M et $240 M."
|
||||
</p>
|
||||
</div>
|
||||
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mb-12 mt-16 mr-72 ml-72 border-r-8 border-blue-400">
|
||||
<p class="text-right p-4 mb=32">
|
||||
"Or, la consommation électrique d’un CD en MW ne représente pas nécessairement sa capacité de stockage ou de traitement des données. En effet, leur consommation électrique est non seulement liée au fonctionnement des équipements informatiques, mais aussi en grande partie aux besoins de refroidissement et de distribution d'énergie. Cette consommation d’électricité augmente donc rapidement avec la taille des centres de données. "
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
}
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user