version 28 avril

This commit is contained in:
Olivier Jacob 2023-04-28 05:30:52 +00:00
parent 5410328596
commit 644f94828b
12 changed files with 314 additions and 49 deletions

BIN
assets/img/ONU-1.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 23 KiB

BIN
assets/img/ONU-2.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 27 KiB

BIN
assets/img/ONU-3.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 30 KiB

BIN
assets/img/ONU-4.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 33 KiB

BIN
assets/img/ONU-5.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 28 KiB

BIN
assets/img/ONU-6.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 35 KiB

BIN
assets/img/ONU-7.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 43 KiB

BIN
assets/img/ONU-8.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 22 KiB

BIN
assets/img/ONU-9.png Executable file

Binary file not shown.

After

Width:  |  Height:  |  Size: 39 KiB

View File

@ -5,18 +5,21 @@ use leptos::*;
pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
view! { cx,
<div class="max-w-[1600px] mx-auto">
<div class="flex flex-col min-h-[700px] p-28 bg-cover bg-[url('/img/bg-page1.png')]">
<h1 class="text-orange-400 text-7xl font-extrabold mb-14">
<div class="flex flex-col min-h-[700px] p-28 bg-cover bg-[url('/img/bg-page1.png')]">
<h1 class="text-orange-400 text-7xl font-extrabold mb-14">
"Micro centres de données"
</h1>
<Subtitle class="grow">
<span class="max-w-lg inline-block">"Pourquoi les centres de données grande échelle sont-ils voués à disparaître?"</span>
</Subtitle>
<img src="/img/NationTech-logo.png" class="mx-auto opacity-50 w-1/4"/>
</div>
</h1>
<Subtitle class="grow">
<span class="max-w-lg inline-block">
"Pourquoi les centres de données grande échelle sont-ils voués à disparaître?"
</span>
</Subtitle>
<img src="/img/NationTech-logo.png" class="mx-auto opacity-50 w-1/4"/>
</div>
<div class="flex-col p-8">
<div class="mb-4 border-t-4 border-b-4 border-orange-400 p-4">
<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>
@ -34,67 +37,154 @@ pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
</div>
</div>
<div class="flex bg-zinc-200 flex-col min-h-[450px] max-w-row-page3:flex-row justify-center items-center">
<div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-8">
<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">
<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">"1"</h3>
<h4 class="font-Lato whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Consommation
d'énergie"</h4>
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
"1"
</h3>
<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>
</div>
<div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-8">
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
<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">"2"</h3>
<h4 class="font-Lato whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Consommation
d'eau"</h4>
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
"2"
</h3>
<h4 class="font-Lato p-4 w-48 text-blue-950 text-xl font-medium my-auto">
"Consommation d'eau"
</h4>
</div>
</div>
<div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-8">
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
<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">"3"</h3>
<h4 class="font-Lato whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Impact
environnemental"</h4>
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
"3"
</h3>
<h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">
"Impact environnemental"
</h4>
</div>
</div>
<div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-8">
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
<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">"4"</h3>
<h4 class="font-Lato whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">"Impact
économique"</h4>
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
"4"
</h3>
<h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">
"Impact économique"
</h4>
</div>
</div>
<div class="shrink-0 p-4 xl:p-8 2xl:p-12 mt-8 mb-8">
<div class="p-4 mt-8 mb-8 transform min-[1550px]:p-10 max-[1550px]:p-6">
<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">"5"</h3>
<h4 class="font-Lato whitespace-pre-wrap p-4 text-blue-950 text-xl font-medium my-auto">
<h3 class="p-4 text-blue-950 text-5xl font-semibold">
"5"
</h3>
<h4 class="font-Lato w-36 p-4 text-blue-950 text-xl font-medium my-auto">
"Impact social"
</h4>
</h4>
</div>
</div>
</div>
<div class="justify-center items-center flex h-[280px] bg-cover bg-center opacity-75 bg-[url('/img/server-wires-page3.png')]">
<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>
"Qu'est-ce qu'un centre de données"
</SectionTitle>
</div>
</div>
<div class="flex flex-col bg-blue-950">
<div class="flex-col mr-72 ml-72">
<SubsectionTitle dark=true>
"Micro centres de données (MCD)"
</SubsectionTitle>
<p class="text-right text-white">
"Un MCD est une unité de serveurs de petite taille pouvant être installée dans nimporte quel immeuble, tant les maisons unifamiliales que les gratte-ciels ou les usines. Sa taille est adaptée aux besoins énergétiques de limmeuble qui labrite. Les rejets énergétiques, le plus souvent sous forme de chaleur, sont réutilisés au maximum dans limmeuble pour le chauffer. Ils peuvent également être utilisée pour chauffer leau, ou même regénérer de lélectricité dans certains cas. Ce type de déploiement réduit également les besoins de climatisation du centre de données puisque la chaleur est transférée à dautres usages. Lénergie totale consommée par le centre de données est donc déjà réduite."
<div class="flex flex-col bg-indigo-950">
<div class="p-8 w-fit h-fit mr-72 ml-72">
<div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2">
<div class="flex-col">
<div class="flex justify-end pb-4">
<SubsectionTitle dark=true>
"Micro centres de données (MCD)"
</SubsectionTitle>
</div>
<p class="text-right mr-2 text-white">
"Un MCD est une unité de serveurs de petite taille pouvant être installée dans nimporte quel immeuble, tant les maisons unifamiliales que les gratte-ciels ou les usines. Sa taille est adaptée aux besoins énergétiques de limmeuble qui labrite. Les rejets énergétiques, le plus souvent sous forme de chaleur, sont réutilisés au maximum dans limmeuble pour le chauffer. Ils peuvent également être utilisée pour chauffer leau, ou même regénérer de lélectricité dans certains cas. Ce type de déploiement réduit également les besoins de climatisation du centre de données puisque la chaleur est transférée à dautres usages. Lénergie totale consommée par le centre de données est donc déjà réduite."
</p>
</div>
</div>
</div>
<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">
"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 à lhébergement de serveurs, ce qui requiert des systèmes de refroidissement énergivores."
</div>
</div>
</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">
<SectionTitle dark=false>
"Pourquoi des centres de données durables?"
</SectionTitle>
</div>
<p class="text-justify p-4 mb=32 ml-72 mr-72">
"Une publication de lAgence 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)."
</p>
<p class="text-justify p-4 ml-72 mr-72">
"Cest pourquoi NationTech défend lidée de remplacer les CDGE par les MCD, ces derniers étant plus durables. Ci-contre sont énumérés les Objectifs de développement durables (ODD) fixés par lONU dont les MCD favorisent latteinte."
</p>
<h5 class="pb-16 mx-auto text-center font-Lato w-[545px] p-4 text-blue-950 text-4xl font-bold">
"Objectifs du développement durable (ODD)"
</h5>
<div class="justify-center flex flex-row">
<img src="/img/ONU-1.png" class="p-2"/>
<img src="/img/ONU-2.png" class="p-2"/>
<img src="/img/ONU-3.png" class="p-2"/>
</div>
<div class="justify-center flex flex-row">
<img src="/img/ONU-4.png" class="p-2"/>
<img src="/img/ONU-5.png" class="p-2"/>
<img src="/img/ONU-6.png" class="p-2"/>
</div>
<div class="justify-center flex flex-row">
<img src="/img/ONU-7.png" class="p-2"/>
<img src="/img/ONU-8.png" class="p-2"/>
<img src="/img/ONU-9.png" class="p-2"/>
</div>
<p class="text-justify pb-12 p-4 ml-72 mr-72">
"Le ministère de lEnvironnement, de la Lutte contre les changements climatiques, de la Faune et des Parcs (MELCCFP) offre une perspective intéressante du DD. Il définit le concept comme suit."
</p>
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mr-72 ml-72 border-l-8 border-blue-400">
<p class="w-fit text-left italic">
"Repenser les rapports quentretiennent les êtres humains entre eux et avec la nature est une aspiration que partage un nombre grandissant de femmes et dhommes. Ils posent un regard critique sur un mode de développement qui, trop souvent, porte atteinte à lenvironnement et relègue la majorité de lhumanité dans la pauvreté. Le développement durable est issu de cette idée que tout ne peut pas continuer comme avant, quil faut remédier aux insuffisances dun modèle de développement axé sur la seule croissance économique en reconsidérant nos façons de faire compte tenu de nouvelles priorités. Il faut donc :"
</p>
<p class="pt-4 w-fit text-left italic">
"Maintenir l'intégrité de l'environnement pour assurer la santé et la sécurité des communautés humaines et préserver les écosystèmes qui entretiennent la vie;"
</p>
<p class="pt-4 w-fit text-left italic">
"Assurer l'équité sociale pour permettre le plein épanouissement de toutes les femmes et de tous les hommes, lessor des communautés et le respect de la diversité;"
</p>
<p class="pt-4 w-fit text-left italic">
"Viser l'efficience économique pour créer une économie innovante et prospère, écologiquement et socialement responsable."
</p>
<p class="pt-4 w-fit text-left italic">
"(Développement Durable: Définition et Objectifs, 2023)"
</p>
</div>
</div>
<div class="flex flex-col justify-center">
</div>
</div>
}

View File

@ -0,0 +1,181 @@
use super::components::*;
use leptos::*;
#[component]
pub fn WhyMicroDatacenters(cx: Scope) -> impl IntoView {
view! { cx,
<div class="max-w-[1600px] mx-auto">
<div class="flex flex-col min-h-[700px] p-28 bg-cover bg-[url('/img/bg-page1.png')]">
<h1 class="text-orange-400 text-7xl font-extrabold mb-14">
"Micro centres de données"
</h1>
<Subtitle class="grow">
<span class="max-w-lg inline-block">"Pourquoi les centres de données grande échelle sont-ils voués à disparaître?"</span>
</Subtitle>
<img src="/img/NationTech-logo.png" class="mx-auto opacity-50 w-1/4"/>
</div>
<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>
<div class="mr-72 ml-72">
<p class="text-justify mb-10 mt-8">
"Tous les systèmes économiques sont basés sur deux variables fondamentales: le temps et lénergie. Depuis des millénaires lor est dispendieux. Parce quil requiert beaucoup de temps et dénergie à trouver. Depuis toujours leau a une valeur différente à différents endroits de la planète et moments de lannée, en fonction du temps et de lénergie requis pour la trouver. Dailleurs, lénergie est souvent représentée comme fonction du temps. Lunité dénergie choisie par le Système International, le Joule, sexprime en Kilogramme X Mètre2 X Seconde2. "
</p>
<p class="text-justify mb-10">
"Il convient donc de considérer lénergie comme fondement principal des différents systèmes économiques. Ce livre blanc vise à étudier les caractéristiques économiques selon différentes métriques naturelles, dont lénergie est la plus importante, des différentes technologies de déploiement de centres de données. Cette analyse vise plus particulièrement à comparer lefficacité énergétique, et donc économique, des déploiements de centres de données à très petite et très grande échelle."
</p>
<p class="text-right font-bold">
"Limpact global sera calculé en fonction des 5 métriques présentées ci-dessous."
</p>
</div>
</div>
<div class="flex bg-zinc-200 flex-col min-h-[450px] max-w-row-page3:flex-row justify-center items-center">
<div class="shrink-0 p-4 xl:p-10 mt-8 mb-8 transform">
<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">"1"</h3>
<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>
</div>
<div class="shrink-0 p-4 xl:p-10 mt-8 mb-8 transform">
<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">"2"</h3>
<h4 class="font-Lato p-4 w-48 text-blue-950 text-xl font-medium my-auto"> "Consommation d'eau"
</h4>
</div>
</div>
<div class="shrink-0 p-4 xl:p-10 mt-8 mb-8 transform">
<img src="/img/tree-icon.png" class="mx-auto"/>
<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">"3"</h3>
<h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">
"Impact environnemental"
</h4>
</div>
</div>
<div class="shrink-0 p-4 xl:p-10 mt-8 mb-8 transform scale-75">
<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">"4"</h3>
<h4 class="font-Lato w-48 p-4 text-blue-950 text-xl font-medium my-auto">
"Impact économique"
</h4>
</div>
</div>
<div class="shrink-0 p-4 xl:p-10 mt-8 mb-8 transform scale-75">
<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">"5"</h3>
<h4 class="font-Lato w-36 p-4 text-blue-950 text-xl font-medium my-auto">
"Impact social"
</h4>
</div>
</div>
</div>
<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>
</div>
<div class="flex flex-col bg-indigo-950">
<div class="p-8 w-fit h-fit mr-72 ml-72">
<div class="w-fit pt-4 pb-4 border-r-8 border-indigo-500 pr-2">
<div class="flex-col">
<div class="flex justify-end pb-4">
<SubsectionTitle dark=true>
"Micro centres de données (MCD)"
</SubsectionTitle>
</div>
<p class="text-right mr-2 text-white">
"Un MCD est une unité de serveurs de petite taille pouvant être installée dans nimporte quel immeuble, tant les maisons unifamiliales que les gratte-ciels ou les usines. Sa taille est adaptée aux besoins énergétiques de limmeuble qui labrite. Les rejets énergétiques, le plus souvent sous forme de chaleur, sont réutilisés au maximum dans limmeuble pour le chauffer. Ils peuvent également être utilisée pour chauffer leau, ou même regénérer de lélectricité dans certains cas. Ce type de déploiement réduit également les besoins de climatisation du centre de données puisque la chaleur est transférée à dautres usages. Lénergie totale consommée par le centre de données est donc déjà réduite."
</p>
</div>
</div>
</div>
<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">
"Un CDGE est une unité constituée de milliers, voire de millions de serveurs centralisés sous un même toît. De tels serveu<div class="flex flex-col justify-center p-24">
<img src="/img/tree-icon.png" class="mx-auto transform scale-150"/>
<h4 class="font-Lato w-96 p-8 text-blue-950 text-4xl font-bold text-center">
"Impact environnemental majeur"
</h4>
</div>
rs sont généralement contenus dans dénormes bâtiments exclusivement dédiés à lhébergement de serveurs, ce qui requiert des systèmes de refroidissement énergivores."
</p>
</div>
</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">
<SectionTitle dark=false>
"Pourquoi des centres de données durables?"
</SectionTitle>
</div>
<p class="text-justify p-4 mb=32 ml-72 mr-72">
"Une publication de lAgence 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)."
</p>
<p class="text-justify p-4 ml-72 mr-72">
"Cest pourquoi NationTech défend lidée de remplacer les CDGE par les MCD, ces derniers étant plus durables. Ci-contre sont énumérés les Objectifs de développement durables (ODD) fixés par lONU dont les MCD favorisent latteinte."
</p>
<h5 class="pb-16 mx-auto text-center font-Lato w-[545px] p-4 text-blue-950 text-4xl font-bold">
"Objectifs du développement durable (ODD)"
</h5>
<div class="justify-center flex flex-row">
<img src="/img/ONU-1.png" class="p-2"/>
<img src="/img/ONU-2.png" class="p-2"/>
<img src="/img/ONU-3.png" class="p-2"/>
</div>
<div class="justify-center flex flex-row">
<img src="/img/ONU-4.png" class="p-2"/>
<img src="/img/ONU-5.png" class="p-2"/>
<img src="/img/ONU-6.png" class="p-2"/>
</div>
<div class="justify-center flex flex-row">
<img src="/img/ONU-7.png" class="p-2"/>
<img src="/img/ONU-8.png" class="p-2"/>
<img src="/img/ONU-9.png" class="p-2"/>
</div>
<p class="text-justify pb-12 p-4 ml-72 mr-72">
"Le ministère de lEnvironnement, de la Lutte contre les changements climatiques, de la Faune et des Parcs (MELCCFP) offre une perspective intéressante du DD. Il définit le concept comme suit."
</p>
<div class="flex flex-col justify-center pt-4 pb-4 pl-2 mr-72 ml-72 border-l-8 border-blue-400">
<p class="w-fit text-left italic">
"Repenser les rapports quentretiennent les êtres humains entre eux et avec la nature est une aspiration que partage un nombre grandissant de femmes et dhommes. Ils posent un regard critique sur un mode de développement qui, trop souvent, porte atteinte à lenvironnement et relègue la majorité de lhumanité dans la pauvreté. Le développement durable est issu de cette idée que tout ne peut pas continuer comme avant, quil faut remédier aux insuffisances dun modèle de développement axé sur la seule croissance économique en reconsidérant nos façons de faire compte tenu de nouvelles priorités. Il faut donc :"
</p>
<p class="pt-4 w-fit text-left italic">
"Maintenir l'intégrité de l'environnement pour assurer la santé et la sécurité des communautés humaines et préserver les écosystèmes qui entretiennent la vie;"
</p>
<p class="pt-4 w-fit text-left italic">
"Assurer l'équité sociale pour permettre le plein épanouissement de toutes les femmes et de tous les hommes, lessor des communautés et le respect de la diversité;"
</p>
<p class="pt-4 w-fit text-left italic">
"Viser l'efficience économique pour créer une économie innovante et prospère, écologiquement et socialement responsable."
</p>
<p class="pt-4 w-fit text-left italic">
"(Développement Durable: Définition et Objectifs, 2023)"
</p>
</div>
</div>
<div class="flex flex-col justify-center">
</div>
</div>
}
}

View File

@ -10,15 +10,9 @@ module.exports = {
},
plugins: [],
theme: {
extend: {
screens: {
'max-w-row-page3': '1342px',
},
},
},
padding: {
'18': '4.5rem',
},
}