-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
369 lines (324 loc) · 23.2 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
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
<!DOCTYPE html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>The Gateway Arch</title>
<meta name="description"
content="Le Gateway Arch de Saint-Louis (Missouri), historique et caractérisques du bâtiment">
<link rel="icon" type="image/png" href="/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="/favicon-32x32.png" sizes="32x32">
<link rel="apple-touch-icon" href="/gateway-arch.png">
<link rel="stylesheet" href="./css/main.css">
<link rel="stylesheet" href="./css/responsive.css">
<link rel="stylesheet" href="./css/fontello.css">
<link rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Righteous&family=Work+Sans:ital,wght@0,100..900;1,100..900&display=swap">
</head>
<body>
<header id="accueil" class="fluid">
<picture>
<source srcset="./img/gateway-arch-large.jpg" media="(min-width: 1200px)">
<source srcset="./img/gateway-arch-small.jpg" media="(max-width: 800px)">
<img src="./img/gateway-arch-medium.jpg" alt="" />
</picture>
<div class="hero">
<h1>The Gateway Arch</h1>
<h2>La porte de l'Ouest</h2>
</div>
</header>
<div id="wrapper" class="fluid">
<div id="menu">
<input type="checkbox" id="nav-toggle" class="nav-toggle">
<nav>
<ul>
<li><a href="#accueil" class="selected">Accueil</a></li>
<li><a href="#intro">Intro</a></li>
<li><a href="#batiment">Bâtiment</a></li>
<li><a href="#histoire">Histoire</a></li>
<li><a href="#science">Science</a></li>
<li><a href="#tramway">Tramway</a></li>
</ul>
</nav>
<label for="nav-toggle" class="nav-toggle-label">
<span></span>
</label>
</div>
<main>
<div class="contenu">
<section id="intro">
<h1>Intro</h1>
<p>La <em>Gateway Arch</em> (« arche passerelle ») est située dans le centre-ville de Saint-Louis
dans l'État du Missouri, aux États-Unis. Symbole de la ville, cette arche recouverte d'acier
inoxydable mesure 192 mètres de hauteur, ce qui en fait le plus grand monument qui peut se
visiter dans l'État, la plus grande arche du monde et le monument artificiel le plus haut du
pays. Elle est consacrée à la conquête de l'Ouest, comme le mémorial dont elle fait partie.</p>
<p>L'arche est située sur la rive ouest du fleuve Mississippi, quelques kilomètres après sa
confluence avec la rivière Missouri et presque sur un axe nord-sud, où la ville de Saint-Louis a
été fondée en 1764. Elle a été conçue par l'architecte <em>Eero Saarinen</em>,
tandis que <em>Hannskarl Bandel</em> en est l'ingénieur structurel.</p>
<p>La construction commencée le 12 février 1963 — après le décès de son concepteur — est achevée le
28 octobre 1965. Le monument à lui seul a coûté plus de 13,4 millions de dollars à l'époque,
soit près de 96 millions de dollars en 2013. Il a été ouvert partiellement au public le 10
juillet 1967 et inauguré officiellement le 25 mai 1968.</p>
</section>
<section id="batiment">
<article>
<h1>Un bâtiment hors normes</h1>
<p>La largeur et la hauteur de l'arche sont de 192 mètres, soit plus de deux fois la hauteur de
la Statue de la Liberté21. L'arche est le plus grand mémorial aux États-Unis et le plus
grand monument en acier inoxydable dans le monde.</p>
<p>Les sections des jambes de l'arche sont des triangles équilatéraux, allant de 16 mètres de
côté en bas à 5,2 mètres en haut. Chaque paroi est constituée d'un revêtement en acier
inoxydable couvrant un ensemble de deux parois en acier au carbone avec du béton armé du sol
au milieu (91 mètres), avec des compléments d'acier au carbone jusqu'au sommet. L'arche est
creuse pour y loger un <a href="#tramway">système de tramway</a> unique qui emmène les
visiteurs du sol à une zone et terrasse d'observation au sommet.</p>
<p>La charge de structure est supportée par une conception à revêtement particulier. Chaque
jambe est noyée dans 23 570 tonnes de béton soit 13 mètres d'épaisseur et 18 mètres de
profondeur. Vingt pieds de la fondation sont dans la roche. L'arche est résistante aux
tremblements de terre et est conçue pour se balancer jusqu'à 23 centimètres dans les deux
sens. Cela permet de résister à des vents allant jusqu'à 240 km/h. La structure pèse 38 898
tonnes, dont 25 980 tonnes de béton, 1 957 tonnes de structures d'acier intérieures et 804
tonnes de panneaux en acier inoxydable qui couvrent l'extérieur de l'arche. Cette quantité
d'acier inoxydable est atypique et même la plus importante utilisée dans un projet.</p>
</article>
<article class="animArche">
<a href="#" id="btnPlay"><i class="icon-play-circled"></i></a>
<diV class="scene">
<div class="troncon tron1">
<div class="side side1"></div>
<div class="side side2"></div>
<div class="side side3"></div>
<div class="larg">16 mètres</div>
</div>
<div class="troncon tron2">
<div class="side side1"></div>
<div class="side side2"></div>
<div class="side side3"></div>
<div class="larg">5,2m</div>
</div>
<div class="grass"></div>
</diV>
</article>
</section>
<section id="histoire">
<h1>Historique du projet</h1>
<p>Le projet du Gateway Arch est profondément lié à l'histoire : il a été voulu comme une
célébration des pionniers et de la conquête de l'Ouest du <span
class="smallCaps">XIX</span><sup>e</sup>, mais il traverse aussi un grande partie de
l'histoire du <span class="smallCaps">XX</span><sup>e</sup> siècle des USA, de la crise de 1929
en passant par la deuxième guerre mondiale jusqu'au boom des années 60.</p>
<p>L'idée d'un bâtiment est née de la crise de 29, au-delà de l'hommage aux pionniers, le chantier
devait fournir du travail et aider au développement de Saint-Louis.</p>
<p>Mis en sommeil pendant la deuxième guerre mondiale, le projet n'est jamais abandonné et est
relancé dès la fin de la guerre. Avant que l'arche ne puisse être construite, il va falloir
déplacer et enterrer des voies ferrées qui longent le Mississipi.</p>
<p>La construction proprement dite de l'arche ne démarre qu'en 1963, trente ans après l'idée
originale.</p>
<h2 class="chrono">Chronologie</h2>
<div class="timeline">
<article class="topic">
<div class="date white-shadow">décembre 1933</div>
<h2 class="white-shadow">Début du projet</h2>
<p>L'idée est lancée de construire un monument permettant à la fois de relancer l'attrait
pour la rive du Mississipi et de stimuler l'économie locale</p>
</article>
<article class="topic">
<div class="date white-shadow">décembre 1935</div>
<h2 class="white-shadow">Approbation du projet</h2>
<p>Le président Roosevelt signe un décret présidentiel approuvant le mémorial et
l'allocation de la zone de 82 hectares afin qu'il devienne le premier site historique
national.</p>
</article>
<article class="topic">
<div class="date white-shadow">septembre 1938</div>
<h2 class="white-shadow">Acquisition des terrains</h2>
<p>Le National Park Service acquiert les bâtiments situés sur le site, à travers
l'expropriation plutôt que le rachat classique, afin de les faire démolir.</p>
</article>
<article class="topic">
<div class="date white-shadow">octobre 1939</div>
<h2 class="white-shadow">Début de la démolition</h2>
</article>
<article class="topic">
<div class="date white-shadow">janvier 1945</div>
<h2 class="white-shadow">Annonce d'un concours architectural</h2>
</article>
<article class="topic">
<div class="date white-shadow">mai 1947</div>
<h2 class="white-shadow">Ouverture officielle du concours architectural</h2>
<p>Le concours comprend deux étapes : la première pour présélectionner cinq propositions et
la seconde pour choisir un seul architecte et son œuvre.</p>
</article>
<article class="topic">
<div class="date white-shadow">février 1948</div>
<h2 class="white-shadow">Fin du concours</h2>
<p>Le jury choisit le projet d'arche de Eero Saarinen à l'unanimité</p>
</article>
<article class="topic">
<div class="date white-shadow">janvier 1951</div>
<h2 class="white-shadow">Avancée des plans</h2>
<p>Saarinen a déjà créé 21 dessins, dont des profils de l'arche, des dessins à l'échelle des
musées et des restaurants, plusieurs propositions de zones de stationnement, le rendu du
tunnel de voies ferrées au pied de l'arche, les fondations de l'arche, la voie rapide et
la structure interne et externe de l'arche.</p>
</article>
<article class="topic">
<div class="date white-shadow">septembre 1958</div>
<h2 class="white-shadow">Financement du projet</h2>
<p>Le président Eisenhower signe la loi qui assure le financement.</p>
</article>
<article class="topic">
<div class="date white-shadow">septembre 1961</div>
<h2 class="white-shadow">Décès de l'architecte Eero Saarinen</h2>
</article>
<article class="topic">
<div class="date white-shadow">janvier 1962</div>
<h2 class="white-shadow">Lancement de l'appel d'offres pour la construction de l'arche</h2>
</article>
<article class="topic">
<div class="date white-shadow">février 1963</div>
<h2 class="white-shadow">Début de la construction</h2>
<p>Le premier morceau triangulaire d'acier est mis en place sur la jambe sud du monument.
</p>
</article>
<article class="topic">
<div class="date white-shadow">octobre 1965</div>
<h2 class="white-shadow">Fin de la construction</h2>
</article>
<article class="topic">
<div class="date white-shadow">juillet 1967</div>
<h2 class="white-shadow">Ouverture au public</h2>
</article>
<article class="topic">
<div class="date white-shadow">mai 1968</div>
<h2 class="white-shadow">Inauguration officielle</h2>
</article>
</div>
</section>
<section id="science">
<h1>Mathématiques et science</h1>
<p>La forme géométrique de la structure est créée par des équations mathématiques offertes à
Saarinen par Hannskarl Bandel. Le tracé d l'arche ressemble à une parabole mais ça n'en est pas
une, il s'agit d'une fonction cosinus hyperbolique qui est plus aplatie à son sommet qu'une
parabole</p>
<p>L'équation de l'arche fait intervenir en paramètres à la fois la hauteur maximale du centre de
gravité, la section transversale maximale de l'arche à la base, la taille minimale des sections
du haut de l'arche, et la moitié de la largeur du centre de gravité à la base.</p>
<p>Elle décrit la forme d'une <em>chaînette</em> (ou d'une <em>caténaire</em>). Une chaîne qui ne
supporte que son propre poids forme une chaînette, dans cette configuration, la chaîne est
purement en tension. De même, une arche-chaînette inversée qui ne prend en charge que son propre
poids est purement en compression, sans cisaillement. L'arche-chaînette est la plus stable de
toutes les arches car la poussée qui passe à travers les jambes est absorbée dans les
fondations, alors que dans d'autres types d'arches, la pression tend à écarter les jambes. La
Gateway Arch est une chaînette inversée pondérée, les jambes de l'arche sont plus épaisses au
niveau de ses deux bases qu'à son sommet. Saarinen choisit une chaînette pondérée sur une courbe
chaînette normale, car elle avait l'air moins pointue et moins raide, et plus esthétique.</p>
<p>C'est cette caractéristique qui assure donc la remarquable robustesse de l'arche, au-delà de son
aspect esthétique. Mais réaliser une telle construction a représenté un défi technique
incroyable : pour être sûr par exemple que les deux parties se rejoignent parfaitement au
sommet, la base de chaque jambe au niveau du sol devait avoir une tolérance géométrique de 0,4
millimètre.</p>
<p>Les images de la construction de l'arche donnent une idée des défis qu'il a fallu relever pour hisser chaque section jusqu'au sommet.</p>
<article id="carousel">
<div id="gallery">
<img src="./img/carousel/gateway-construction-01.jpg" id="image-01" class="gallery-img"
alt="Contruction de l'arche, image 1" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-02.jpg" id="image-02" class="gallery-img"
alt="Contruction de l'arche, image 2" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-03.jpg" id="image-03" class="gallery-img"
alt="Contruction de l'arche, image 3" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-04.jpg" id="image-04" class="gallery-img"
alt="Contruction de l'arche, image 4" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-05.jpg" id="image-05" class="gallery-img"
alt="Contruction de l'arche, image 5" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-06.jpg" id="image-06" class="gallery-img"
alt="Contruction de l'arche, image 6" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-07.jpg" id="image-07" class="gallery-img"
alt="Contruction de l'arche, image 7" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-08.jpg" id="image-08" class="gallery-img"
alt="Contruction de l'arche, image 8" loading="lazy" width="426" height="400">
<img src="./img/carousel/gateway-construction-09.jpg" id="image-09" class="gallery-img"
alt="Contruction de l'arche, image 9" loading="lazy" width="426" height="400">
</div>
<nav id="navGal">
<ul>
<li><a href="#image-01"></a></li>
<li><a href="#image-02"></a></li>
<li><a href="#image-03"></a></li>
<li><a href="#image-04"></a></li>
<li><a href="#image-05"></a></li>
<li><a href="#image-06"></a></li>
<li><a href="#image-07"></a></li>
<li><a href="#image-08"></a></li>
<li><a href="#image-09"></a></li>
</ul>
</nav>
</article>
</section>
<section id="tramway">
<h1>Un tramway/ascenceur intérieur</h1>
<p>Il y a trois modes de transport jusqu'au sommet de l'arche : deux escaliers d'urgence comptant 1
076 marches et situés dans chacune des jambes du monument, un ascenseur d'une capacité de 12
passagers permettant d'atteindre 113 mètres de hauteur et un <em>tramway</em>, là aussi dans
chaque jambe.</p>
<p>Chaque tramway est un ensemble de huit compartiments en forme d'œuf d'une capacité unitaire de
cinq places avec une petite fenêtre sur les portes. Comme chaque tramway a une capacité de 40
passagers et qu'il y en a deux, 80 personnes peuvent être transportées en une seule fois. Les
départs se font toutes les dix minutes. Les tramways, à l'instar d'une grande roue, se balancent
et lorsqu'un tramway monte, l'autre descend. Ce mode de mouvement est inspiré donc à la fois
d'une grande roue et d'un ascenseur. Le voyage vers le sommet prend quatre minutes et la
descente trois.</p>
<p>Près du sommet de l'arche, les passagers quittent le tram et montent une légère pente pour entrer
dans la zone d'observation. Cette zone arquée mesure 20 mètres de long sur 2,1 mètres de large.
Elle peut contenir au maximum environ 160 personnes, soit l'équivalent de quatre tramways. Seize
fenêtres permettent de voir de chaque côté, la vue peut atteindre 48 kilomètres par beau temps.
</p>
<video controls poster="./img/poster.jpg" preload="metadata">
<source src="/media/gateway-tramway.mp4" type="video/mp4">
<source src="/media/gateway-tramway.webm" type="video/webm">
<p>Votre navigateur ne prend pas en charge les vidéos HTML5.
Voici <a href="./media/gateway-tramway.mp4">un lien pour télécharger la vidéo</a>.</p>
</video>
</section>
</div>
<picture>
<source srcset="./img/gateway-arch-large.jpg" media="(min-width: 1200px)">
<source srcset="./img/gateway-arch-small.jpg" media="(max-width: 800px)">
<img src="./img/gateway-arch-medium.jpg" alt="" />
</picture>
</main>
</div>
<footer class="fluid">
<nav>
<ul>
<li><a href="#accueil">Accueil</a></li>
<li><a href="#intro">Intro</a></li>
<li><a href="#batiment">Bâtiment</a></li>
<li><a href="#histoire">Histoire</a></li>
<li><a href="#science">Science</a></li>
<li><a href="#tramway">Tramway</a></li>
</ul>
</nav>
<article>
<h2>Sources utilisées :</h2>
<ul id="references">
<li><a href="https://fr.wikipedia.org/wiki/Gateway_Arch" rel="external"><i
class="icon-wikipedia-w"></i>Article Wikipedia</a></li>
<li><a href="https://youtu.be/mI77W2PjyKI" rel="external"><i class="icon-youtube"></i>Documentaire sur
la construction de la Gateway Arch</a></li>
<li><a href="https://youtu.be/kkNGdzo_3EA" rel="external"><i class="icon-youtube"></i>La Sagrada Familia
(avec explication de la courbe de la chaînette)</a></li>
<li><a href="https://collinscoopercarusi.com/2017/08/25/st-louis-gateway-arch/" rel="external"><i
class="icon-globe"></i>St. Louis Gateway Arch : 3 Tech Innovations that Make Saarinen’s
Design Possible</a></li>
<li><i class="icon-book"></i><cite>Mathématiques et Architecture</cite>, éditions POLE (2017)</li>
<li><i class="icon-music"></i><cite>Tramodyssee</cite>, Johnny D (2008)</li>
</ul>
</article>
<p class="copy">Alain Gourvès © 2020</p>
</footer>
<script src="./js/main.js"></script>
</body>
</html>