-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
197 lines (164 loc) · 12.1 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>EcoDev</title>
<!-- Appel CSS -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0/css/materialize.min.css">
!
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<!--HEADER -->
<header>
<nav>
<div class="nav-wrapper">
<a href="index.html"><img src="images/logo-sforever.png" alt="logo simplonfe" /></a>
<ul id="nav-mobile" class="right hide-on-med-and-down">
<li><a href="index.html"> Pollution Numérique</a></li>
<li><a href="#competences"> Éco Conception</a></li>
<li><a href="#"> Qui Sommes-nous</a></li>
</ul>
</div>
</nav>
</header>
<!--MAIN CONTENT-->
<section id="presentation">
<div class="container">
<h1>L'Éco Conception Web au quotidien des dévs</h1>
</div>
<a class="bvideo" href="video/breff-eco.mp4" ="560"
iframe allowfullscreen="" frameborder="0" height="315" ></iframe>
Video</a>
</div>
</section>
<main class="container">
<!--DEFINITION-->
<section id="definition">
<p>C'est quoi : L'<strong>éco-conception web</strong> est une prise en compte des critères environnementaux dans la phase de conception et de réalisation d'un site internet.
C'est aux développeuses(rs) d'écrire leurs codes de manière "simplifiée" pour lutter contre le surplus numérique et l'obsolescence en réduisant l'empreinte carbone. C'est-à-dire en consommant le moins possible de ressources physiques : mémoire vive, processeurs, cartes graphiques, bande passante…
</p>
</section>
<!--début pollution numérique -->
<section id="resume">
<h2>La pollution numérique</h2>
<p> L'incroyable impact de la pollution numérique La pollution numérique ne se limite pas à nos requêtes internet. Elle est le reflet de la mondialisation et de l'exploitation des hommes et de nos ressources naturelles. De la fabrication à la consommation d'internet.</p>
<article class="clear">
<h3>Internet :</h3>
<img src="images/3-4.jpg" width="400" height="225" alt="chiffre pollution" />
<p>Internet : En matière d’émissions de CO2, internet pollue 1,5 fois plus que le transport aérien. La moitié des gaz à effet de serre produits par internet provient de l’utilisateur, l’autre moitié étant divisée entre le réseau et les data centers. Cette croissance du web est telle qu’elle constitue un véritable enjeu environnemental pour les années à venir. Dans un climat de transition énergétique où l’on tend vers la fin du nucléaire, il paraît essentiel de prendre en compte la consommation exponentielle du numérique, qui risque d’être dure à alimenter avec des énergies renouvelables. L’empreinte écologique des internautes : N’oublions pas l’utilisateur, responsable de 50 % des gaz à effet de serre d’internet ! Nous étions 3,9 milliards d’internautes en 2016 (47 % de la population mondiale) et d’après Google nous dépasserons les 5 milliards en 2020 (+30%). Il est donc nécessaire de sensibiliser les internautes sur leur impact écologique et les gestes permettant de réduire leur empreinte carbone.</p>
</article>
<article class="clear">
<h3>L'empreinte écolo des internautes :</h3>
<img src="images/3-4.jpg" width="400" height="225" alt="chiffre pollution" />
<p>L’empreinte écologique des internautes : N’oublions pas l’utilisateur, responsable de 50 % des gaz à effet de serre d’internet ! Nous étions 3,9 milliards d’internautes en 2016 (47 % de la population mondiale) et d’après Google nous dépasserons les 5 milliards en 2020 (+30%). Il est donc nécessaire de sensibiliser les internautes sur leur impact écologique et les gestes permettant de réduire leur empreinte carbone. Les emails aussi constitue un problème majeur dans la pollution du web chez l'utilisateur. Plus de 12 milliards de mails sont envoyés chaque heure dans le monde, émettant au total 50 Giga Watt Heure, soit la production électrique de 18 centrales nucléaires pendant une heure. L’envoi d’un mail avec une pièce jointe de 1 Mo dégage 19 grammes de CO2 et sa consommation électrique est équivalente à celle d’une ampoule pendant une heure.</p>
</article>
<article class="clear">
<h3>Les datas center :</h3>
<img src="images/3-4.jpg" width="400" height="225" alt="chiffre pollution" />
<p>Les data center : Les centres de stockage de données ne cessent d'accroitre leur volume d'informations collectées, de ce fait leur consommation en énergie pour les stocker et les traiter augmente de jours en jours. L'accélération de cette consommation par les clouds, les appareils connectés fonctionnent par cloud : ils se connectent à des serveurs distants sur internet pour fonctionner. Il faut bien entendu alimenter en électricité les nombreux appareils, mais elle est principalement disipée sous forme de chaleur lorsqu'elle passe dans des matériaux conducteurs, ce qu'on appelle « l'effet joule ». De ce fait 50% de la facture d'électricité d'un data center tiens à la climatisation. Pour réduire leurs couts, les data center ont alors tout interet à maximiser le refroidissement naturel en utilisant l'air frais naturel ou en immergent les data center dans de l'eau.</p>
</article>
<article class="clear">
<h3>Fabrication de matériaux :</h3>
<img src="images/3-3.jpg" alt="" />
<p> La fabrication de nos appareils numériques pollue de manière exponentielle. Par exemple, pour la fabrication d'un ordinateur, il faut 16 fois son poids en matériaux pour le fabriquer et ce ratio est parfois beaucoup plus important pour certains composants ce qui entraine une augmentation de l'épuisement des ressources, de la pollution de de la terre, de l'air et des eaux. Les ressources naturelles utilisées pour fabriquer nos appareils sont une catastrophe pour la nature mais aussi pour l'homme. En République Démocratique du Congo l'extraction de coltan fait des ravages sur l'humain, le travail des enfant souvent enlevés sur le chemin de l'école, ils sont forcés de travailler dans des mines de fortune, à la manière, sans aucune sécurité. Chaque jour les mines avalent des vies. De même en Amérique du Sud l'extraction du lithium présent dans nos batterie engendre une pollution et la destruction de terres. Ce que nous consommons ici est source de malheurs ailleurs. Cette fabrication intensive d'appareils numériques et l'obsolescence programmée entraine une augmentation de l'épuisement des ressources, la pollutions de la terre, de l'air, de l'eau. En effet les appareils informatiques représentent 50% de la consommation mondiale de l'électricité dans le secteur des nouvelles technologies, 60 millions de tonnes de ces appareils sont jetées chaque année et seulement 5% de leurs composants sont réutilisés/reconditionnés.
</p>
</article>
<!--fin pollution numérique-->
<!--début ecoconcevoir-->
<section id="resume">
<h2>Éco-concevoir</h2>
<p> Toi développeuse web comment peux-tu coder ton futur sans trop pourrir la planète ! En lisant le paragraphe sur la pollution numérique, tu as pu te rendre compte combien il est urgent de changer de pratiques. Tu dois élaborer un code “sobre” ! Par effet de cascades; tu vas pouvoir agir sur une réduction de l’empreinte carbonne, sur une diminution de ta consommation électrique, sur une baisse de ???</p>
<p><strong>Que faire ???</strong></p>
<article class="clear">
<h3>Côté code :</h3>
<img src="images/01code.png" alt="illustration code" />
<ul><li>Valider les pages auprès du W3C. Le code HTML des pages doit être bien formé. Dans le cas
contraire, le navigateur corrige dynamiquement un certain nombre d'éléments pour afficher au
mieux la page. Ce qui consomme inutilement des ressources.</li>
<li>Les images dans le code c’est sympathique mais il faut penser à les optimiser. Ce processus consiste à diminuer la taille du fichier et donc d’accélérer le chargement de la page. Préfères ces formats: SVG puis JPEG, PNG ou GIF.
Outils : Compressor, ezGif, TinyJPG, TinyPNG</li>
<li>Minifer = terme de programmation idéal pour l’éco conception. Minifier les fichiers HTML,
CSS & JavaScript: supprime les espaces, les sauts de lignes, les commentaires et les séparateurs
de bloc donc réduit le code qui sera transféré sur le web.
Outils : YUI Compressor, textfixer (à tester), minify. Le module Apache PageSpeed de Google
permet d'automatiser cette opération.</li></ul>
</article>
<article class="clear">
<h3>Côté hébergement :</h3>
<img src="images/02hebergement.jpg" alt="illustration hebergement" />
<ul><li>Tes pages de code sont riches en ressources (grand nombre et petite taille), en JavaScript, en CSS…
Elles deviennent <strong>gourmandes en ressources réseau</strong>.
En utilisant un CDN (Content Delivery Network), on externalise l’hébergement de ces ressources
dans un endroit plus stratégique (Marseille par exemple). Cela rapproche les internautes grâce
à un gain de bande passante: accès plus rapide, plus grande disponibilité, plus grande souplesse.
</li>
<li>Les cookies: trouver la bonne recette correspond à optimiser la taille de ceux-ci.
Lorsqu'un cookie est déposé sur le navigateur client, il est transféré dans chaque requête HTTP.
Il faut donc maximiser la taille du cookie. Lorsque la présence d'un cookie n'est plus obligatoire,
il faut le supprimer.</li></ul>
</article>
<article class="clear">
<h3>Côté matériel :</h3>
<img src="images/03materiel.png" alt="illustration matériel" />
<ul><li>tu n’es pas obligée d’avoir le pc dernier cri. Une machine recyclée peut tout aussi bien faire l’affaire pour écrire ton code,</li>
<li>met en veille et éteint tes appareils et rallonges électriques,</li>
<li>privilégies des ordinateurs portant un logo environnemental :</li></ul>
</article>
</section>
<!--fin ecoconcevoir-->
<!--Qui sommes nous -->
<section id="services">
<h2>Qui sommes-nous ?</h2>
<article class="service">
<img src="images/icones/ou.svg">
<h3>Qui</h3>
<p>L’entreprise “SimplonForEver” est une entreprise fictive qui réalise des campagnes de sensibilisation auprès d’apprenants en web développement.</p>
</article>
<article class="service">
<img src="images/icones/pourquoi.svg">
<h3>Pourquoi</h3>
<p>Nous sommes une équipe féminine de web-développeuses qui travaillons un site de la même manière que si nous étions en entreprise. </p>
</article>
<article class="service">
<img src="images/icones/ou.svg">
<h3>Où - Quand</h3>
<p>Nous sommes basés à Marseille dans un endroit merveilleux. <br>Cherchez Le Cloître - St Jérome. <br>“SimplonForEver” existe depuis février 2019</p>
</article>
</section>
<!--fin qui sommes nous-->
</main>
<footer>
<div class="footer">
<div class="contain">
<div class="col">
<h1> Adresse </h1>
<ul>
<li>20 bd Madelaine Rémuzat 13014 Marseille</li>
<li><a href="/Users/f.b/ecoconception/ml.html" target="_blank">Mentions legales</a></li>
<li><a href="/Users/f.b/ecoconception/licence.html" target="_blank">Licence</a></li>
</ul>
</div>
</div>
<div class="col">
<h1> Nous suivre </h1>
<div class="Picto">
<div class="one"> <img src="images/icones/twitter.svg"> </div>
<div class="two"> <img src="images/icones/facebook.svg"> </div>
<div class="three"> <img src="images/icones/insta.svg"> </div>
</div>
</div>
<div class="col">
<h1> Nous contacter </h1>
<ul>
<li> <img src="images/icones/mobile-phone.svg"> 00.00.00.00.00 </li>
<li> <img src="images/icones/email.svg"> Staff@simplonforever.xyz </li>
</ul>
</div>
<div class="clearfix">
</div>
</div>
</footer>
</body>
</html>