-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
449 lines (383 loc) · 21.6 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
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
<!DOCTYPE html>
<html lang="fr">
<head>
<link rel="stylesheet" type="text/css" href="font/Avenir/fonts.css">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css.map">
<link rel="stylesheet" type="text/css" href="css/bootstrap.css">
<link rel="stylesheet" type="text/css" href="css/jquery.fullPage.css" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="icon" type="image/png" href="favicons/favicon-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="favicons/favicon-160x160.png" sizes="160x160">
<link rel="icon" type="image/png" href="favicons/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="favicons/favicon-16x16.png" sizes="16x16">
<link rel="icon" type="image/png" href="favicons/favicon-32x32.png" sizes="32x32">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="/mstile-144x144.png">
<meta charset="UTF-8">
<title>Mille ans</title>
</head>
<body>
<a href="#firstSlide"><div id="logo"></div></a>
<div class="error"><p>Résolution trop petite pour ce site</p></div>
<div id="bar-top"></div>
<div id="bar-right"></div>
<div id="bar-bottom"></div>
<div id="bar-left"></div>
<button class="fullscreen"></button>
<div id="fullpage">
<div class="section">
<div id="thirdbutton" class="button"></div>
<div class="title-video">
<h2>— Chapitre 1</h2>
<p>Découverte</p>
</div>
<video id="thirdVideo" class="video">
<source src="" type='video/mp4'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="thirdprogressBar" class="progressBar">
<span class="thirdprogress"></span>
<span class="thirdbuffer"></span>
</div>
<div class="lightbox2">
<div id="poll">
<h3>Pensez vous pouvoir vivre plus de 1000 ans ?</h3>
<form>
<label class="question" for="poll-oui">Oui</label>
<input type="radio" name="vote" class="vote" id="poll-oui" value="1">
<label class="question" for="poll-non">Non</label>
<input type="radio" name="vote" class="vote" id="poll-non" value="0">
</form>
</div>
</div>
</div>
<div class="section fondinteractif">
<div class="interaction1"></div>
<div class="interaction2"></div>
<div class="interaction3"></div>
<div class="interaction4"></div>
<div class="lightbox">
<div class="texte1 texte hide">
<p class="titre">L'ordinateur</p>
<p>
Il offre, avec Internet, une approche complètement différente du réel, où tout est automatisé, stocké et connecté. L’arrivée des ordinateurs personnels dans les années 80 a permis de généraliser ce monde virtuel auprès du grand public. Depuis, il n’a cessé d’évoluer à la recherche du plus petit et du plus puissant. Un ordinateur moyen offre une puissance d’éxécution et une rapidité de calcul sans précédent, à la portée de Monsieur Tout Le Monde. Combiné à Internet, il offre à l’Homme un accès immédiat à un savoir infini.
</p>
</div>
<div class="texte2 texte hide">
<p class="titre">Le Smartphone</p>
<p>
Le téléphone nouvelle génération ne sert plus uniquement à téléphoner. Cette fonction archaïque est d’ailleurs aujourd’hui largement reléguée au détriment d’une utilisation plus utilitaire. Performant et intelligent, le smartphone se veut être le meilleur ami de l’Homme. Les usages qu’on lui prête sont parfois déroutants. Tantôt réveil, tantôt carnet de note, tantôt agenda, calculatrice ou véritable console de jeu portable, il n’existe pratiquement aucune limite.
</p>
<p>
Il permet d’être en contact avec l’humanité, rassemble l'ensemble de l’information à porté de main. Complètement connecté à Internet, le smartphone, véritable ordinateur de poche, offre à son détenteur un pouvoir d’omniscience, d’omnipotence et d’omniprésence inégalée.
</p>
</div>
<div class="texte3 texte hide">
<p class="titre">Les lunettes</p>
<p>
Une simple monture et deux verres grossissants. Voilà comment un objet si simple répond à un handicap qui touche près d’un million et demi de français.
Dans sa quête de la perfection, l’Homme abordant une paire de lunette repousse les limites imposées par son propre corps. Ce désir de “santé parfaite” est somme toute justifié : nous ne voulons pas être diminué.
</p>
<p>
Au delà de la simple paire de lunettes que nous connaissons tous, l’invention du verre grossissant a permis à l’Homme de découvrir de nouveaux astres dans le ciel et de nouveaux objets au dessus de la Terre. Une invention qui a immédiatement répondu à la soif de connaissance qui anime l’Homme depuis toujours.
</p>
</div>
<div class="texte4 texte hide">
<p class="titre">Les objets connectés</p>
<p>
L’exemple le plus simple de “wearable technology”, comprenez “technologie mettable”. Un appareil connecté au même titre qu’un smartphone, mais qui, contrairement à son grand frère, se porte comme un vêtement. Les informations perçues par ces objets nous parviennent directement sans que nous n’ayons le moindre effort à fournir. Ces technologies tendent à devenir le prolongement logique de notre corps, toujours dans un but d’omniscience, d’omnipotence et d’omniprésence. Avec l’arrivée imminente de la réalité augmentée, notre vie ordinaire se retrouve secondée d’une couche logiciel constamment connecté. Impossible alors de rater la moindre information, aussi importante soit-elle, puisqu’elle apparaîtra directement en surimpression de notre entourage.
</p>
</div>
</div>
</div>
<div class="section">
<div id="fourthbutton" class="button"></div>
<div class="title-video">
<h2>— Chapitre 2</h2>
<p>Réflexion</p>
</div>
<video id="fourthVideo" class="video" autoplay="false">
<source src="" type='video/mp4'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="fourthprogressBar" class="progressBar">
<span class="fourthprogress"></span>
<span class="fourthbuffer"></span>
</div>
</div>
<div class="section">
<div class="back col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="back2 col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="back3 col-xs-4 col-sm-4 col-md-4 col-lg-4">
</div>
<div class="lightbox lightbox3">
<div class="texte1 texte hide">
<p class="titre">La rétine artificielle</p>
<p>
Le principe consiste à remédier à la perte des photorécepteurs. Les photorécepteurs sont des cellules qui transforment la lumière en signal électrique au sein de la rétine. Ce signal remonte ensuite au cerveau qui va l’interpréter sous forme d’image.
</p><p>
Cette technologie à pour but de soigner la non voyance et la DMLA (dégénérecance maculaire liée à l’âge) par exemple.
</p><p>
Des spécialistes affirment que la rétine artificielle ira bientôt plus loin et rendra l’oeil humain obsolète. Il sera bientôt possible de générer une image de meilleur qualité qui permettrait à l’homme de mieux percevoir son environnement. Un parallèle est tracé entre l’oeil humain traditionnel et celui d’une caméra haute définition, qui peut recevoir des millions de pixels.
</p><p>
Aujourd’hui le dispositif se présente sous forme de lunettes avec une micro caméra captant les images à la place des yeux. Les images sont ensuite retranscrite à la rétine artificielle greffée au fond de l’oeil.
</p><p>
Le défi est donc d’arriver à mettre au point un dispositif compact pouvant être directement inséré dans l’oeil et placé contre la rétine. De nombreux détails importants restent à être mis au point dans le but de compacter le dispositif. Mais il a déjà été prouvé que ça marche et que les spécialistes savent reconstituer l’image dans un système essentiellement aveugle.
</p>
</div>
<div class="texte2 texte hide">
<p class="titre">Le coeur imprimé en 3D</p>
<p>
Jusqu’ici, l’imprimante 3D a permis de recréer certaines parties du coeur. Le docteur Williams, biologiste cellulaire à l’Université de Louisville dans le Kentucky, souhaite créer un organe fonctionnel en prélevant des cellules de graisse sur le patient et en les utilisant comme matériau. Couche par couche, les différentes parties du coeur seraient imprimées et assemblées. Les cellules vivantes se développeraient ensuite pour former le tissu cardiaque. Pour le Dr Williams, faire fonctionner ensemble les cellules assemblées artificiellement est la difficulté principale d’une telle opération.
</p><p>
Et si les médecins arrivaient à franchir cette étape ? Selon le Dr Williams, le risque de rejet de greffe serait moins probable que dans le cas d’un don d’organe par exemple. Puisque le coeur imprimé en 3D sera conçu à partir des cellules du patient, l’utilisation de médicaments serait inutile. Si tout se passe bien, l’assemblage du premier coeur imprimé en 3D devrait être possible d’ici 3 à 5 ans, et la première transplantation pourrait avoir lieu dans les 10 ans qui viennent.
</p>
</div>
<div class="texte3 texte hide">
<p class="titre">Les prothèses bioniques</p>
<p>
Comment le corps peut-il contrôler un membre bionique par la pensée ? Grâce aux impulsions envoyées par le cerveau. Le principe de base est très simple : même amputé, un membre n’enlève pas au cerveau la mémoire de ce que ce membre effectuait. En les munissant d’électrodes, les scientifiques parviennent à recréer différents mouvement. Ainsi, il est possible de différencier le fait de tourner le poignet, fermer la main ou encore saisir un objet avec deux doigts.
</p><p>
Tous ces signaux électriques sont analysés par une puce. Les batteries, microprocesseurs et circuit de contrôle prennent par la suite le relais pour faire fonctionner la prothèse le mieux possible.
</p><p>
Sur certains modèles, les doigts sont même équipés de capteurs de pression qui permettent au bras de déceler les caractéristiques des objets et de s’adapter à la situation, comme la saisie d’un verre et de celle d’une feuille de papier.
</p>
</div>
</div>
</div>
<div class="section">
<div id="fifthbutton" class="button"></div>
<div class="title-video">
<h2>— Chapitre 3</h2>
<p>Recherche</p>
</div>
<video id="fifthVideo" class="video" autoplay="false">
<source src="" type='video/mp4'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="fifthprogressBar" class="progressBar">
<span class="fifthprogress"></span>
<span class="fifthbuffer"></span>
</div>
</div>
<!-- VIDEO 6 - CHAPITRE 4 - SLIDE 6 -->
<div class="section">
<div id="sixbutton" class="button"></div>
<div class="title-video">
<h2>— Chapitre 4 - 1ère partie</h2>
<p>Ouverture</p>
</div>
<video id="sixVideo" class="video" autoplay="false">
<source src="" type='video/mp4'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="sixprogressBar" class="progressBar">
<span class="sixprogress"></span>
<span class="sixbuffer"></span>
</div>
</div>
<!-- VIDEO - SLIDE 7 -->
<div class="section">
<div id="button" class="button"></div>
<div class="title-video">
<h2>— Chapitre 4 - 2ème partie</h2>
<p>Rencontres</p>
</div>
<video id="video" class="video" autoplay="false">
<source src="videos/chapitre-4.2.mp4" type='video/mp4' >
<p>
Your user agent does not support the HTML5 Video element.
</p>
</video>
<div class="hide element1"></div>
<div class="hide element2"></div>
<div class="hide element3"></div>
<div id="progressBar" class="progressBar">
<span class="progress"></span>
<span class="buffer"></span>
</div>
</div>
<div class="section">
<div id="secondbutton" class="button"></div>
<div class="title-video">
<h2>— Chapitre 4 - 3ème partie</h2>
<p>Interview</p>
</div>
<video id="secondVideo" class="video" autoplay="false">
<source src="videos/interview1.mp4" type='video/mp4'>
<p>
Your user agent does not support the HTML5 Video element.
</p>
</video>
<div id="secondprogressBar" class="progressBar">
<span class="secondprogress"></span>
<span class="secondbuffer"></span>
</div>
</div>
<div class="section">
<div id="sevenbutton" class="button"></div>
<div class="title-video">
<h2>— Chapitre 5</h2>
<p>Conclusion</p>
</div>
<video id="sevenVideo" class="video" autoplay="false">
<source src="" type='video/mp4'>
<p>Your user agent does not support the HTML5 Video element.</p>
</video>
<div id="sevenprogressBar" class="progressBar">
<span class="sevenprogress"></span>
<span class="sevenbuffer"></span>
</div>
</div>
<div class="section fondinteractif2">
<div class="inter1"></div>
<div class="inter2"></div>
<div class="inter3"></div>
<div class="inter4"></div>
<div class="inter5"></div>
<div class="texte1 texte hide">
<p class="titre">
Le cerveau, une infinité de ligne de code.
</p>
<p>
Aujourd’hui des recherches sont en cours aux Etats-Unis pour restaurer la mémoire humaine de soldats blessés. Ce projet imaginé par le Pentagone, dévoilerait des avancées vers la mise au point d'un implant dans le cerveau améliorerant la mémoire d'une personne blessée. Il serait d’ailleurs un remède pour combattre Alzheimer. En effet, des scientifiques ont pu stimuler la mémoire d'individus souffrant d'Alzheimer.
Anecdotiquement, une fois que nous aurons compris comment la pratique d'une compétence transforme le cerveau, il serait possible de “télécharger” des compétences.
</p>
<p>
Les chercheurs essayent aussi de “stimuler”, d’activer ou d’inhiber certaines zones du cerveau afin de le rendre plus efficace. Cela est utile pour soigner la dépression ou encore d’améliorer la concentration par le biais de neuroprothèses (DARPA).
</p>
<p>
Toutefois, ces recherchent soulèvent des questions éthiques sur le fait de savoir si l'esprit humain devrait être manipulé sous prétexte de le rendre plus performant ou de le soigner.
</p>
</div>
<div class="texte2 texte hide">
<p class="titre">
Nos sens, de nouveaux pouvoirs.
</p>
<p>
Imaginez vous aveugle, sourd ou muet, vous perdez une partie de vos facultées fondamentales. Qui ne rèverait pas alors de retrouver la vue, ou l’ouïe. Donner la possibilité à un homme aveugle ou mal entendant de retrouver ses sens est un des combats majeurs du mouvement transhumaniste.
</p>
<p>
La science permet aujourd’hui de redonner nos sens. Larry Hester, un Américain qui avait perdu la vue il y a 33 ans après l’apparition d’une rétinite pigmentaire, il a pu revoir ses proches grâce à l’implantation d’un oeil bionique.
Par ailleurs, les implants cochléaires, qui existent déjà, permettent aux personnes implantées de percevoir des sons par stimulation électrique des fibres nerveuses de la cochlée. C’est un moyen pour combattre la surdité.
</p>
</div>
<div class="texte3 texte hide">
<p class="titre">
Au nanonième de mètre près.
</p>
<p>
Le transhumanisme porte aussi une grande foi dans les nanotechnologies. Grâce aux progrès de l’infiniment petit, nous devrions pouvoir faire entrer dans notre corps des nanorobots et des nanomédicaments. Ils feront l’analyse de notre état de santé, ou réaliseront de petites opérations, dans des zones de notre corps difficiles d’accès.
</p>
<p>
Concrètement, à Zurich, des chercheurs conçoivent certains de ces robots microscopiques, qui se déplacent grâce à des électroaimants, et qui sont destinés à pratiquer de petites opérations, à l’aide d’une minuscule aiguille.
En parallèle, des chercheurs du MIT conçoivent une insuline intelligente, un nanomédicaments, qui délivre aux diabétiques la bonne dose d’insuline, au bon moment. L’utopie d’une santé parfaite n’est pas si loin.
</p>
</div>
<div class="texte4 texte hide">
<p class="titre">
De la réparation à l’amélioration.
</p>
<p>
Les prothèses, implants et exosquelettes ont pour but de réparer l’humain (personnes amputées). Leurs prix sont très élevés actuellement (plusieurs dizaines ou centaines de milliers d'euros), mais devraient diminuer avec leur généralisation.
</p>
<p>
A titre d’exemple, un bras articulé commandé par la pensée a été développé au Royaume-Uni et implanté sur le caporal Andrew Garthwaite, blessé en Afghanistan. Ce bras bionique est relié aux nerfs de l’épaule et aux muscles pectoraux et transmettent six signaux à une unité centrale de calcul qui les transcrit en mouvements pour le bras articulé.
Ces prothèses, à l’avenir permettraient de surpasser les capacités physiquement humaines.
</p>
</div>
</div>
<div class="section" id="source">
<div class="content">
<h2>Médiathèque</h2>
<h4>— Définitions</h4>
<ul>
<li><a target="_blank" href="http://www.capital.fr/a-la-une/interviews/l-homme-qui-vivra-mille-ans-est-deja-ne-951957">"L'homme qui vivra mille ans est déjà né"</a></li>
</ul>
<h4>— Sociologiques</h4>
<ul>
<li><a target="_blank" href="http://www.01net.com/editorial/629903/immortalite-google-y-croit-a-mort/">Immortalité : ils y croient à mort !</a></li>
<li><a target="_blank" href="http://rue89.nouvelobs.com/2014/10/29/supporte-plus-quand-google-vend-limmortalite-plan-255764">« Je ne supporte plus quand Google vend l’immortalité sur plan »</a></li>
</ul>
<h4>— Technologiques</h4>
<ul>
<li><a target="_blank" href="http://www.journaldunet.com/solutions/dsi/10-implants-cerebraux-aux-super-pouvoirs.shtml">10 incroyables super-pouvoirs grâce aux implants cérébraux</a></li>
<li><a target="_blank" href="http://sante.lefigaro.fr/actualite/2012/02/09/17290-stimulation-electrique-cerveau-dope-memoire">La stimulation électrique du cerveau dope la mémoire</a></li>
</ul>
<h4>— Philosophiques</h4>
<ul>
<li><a target="_blank" href="http://www.agoravox.fr/actualites/technologies/article/internet-des-objets-et-144845">Internet des objets et « Transhumanisme », ou comment l’homme devient une machine</a></li>
<li><a target="_blank" href="http://leplus.nouvelobs.com/contribution/1286499-intelligence-artificielle-transhumanisme-la-technique-ne-doit-pas-remplacer-la-medecine.html">Intelligence artificielle, transhumanisme : la technique ne doit pas remplacer la médecine</a></li>
</ul>
</div>
</div>
<div class="section" id="about">
<div class="content">
<div id="project">
<h2>Mille ans</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam,
quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse
cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non
proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
</div>
<div id="thanks">
<div class="thanks-id">
<p>Chef de projet</p>
<p>Maxime Planchou</p>
</div>
<div class="thanks-id">
<p>Réalisation</p>
<p>Clément Lesaicherre</p>
</div>
<div class="thanks-id">
<p>Designer & Front-End</p>
<p>Richard Truong</p>
</div>
<div class="thanks-id">
<p>Designer & Front-End</p>
<p>Jérémy Réveillé</p>
</div>
<div class="thanks-id">
<p>Développement</p>
<p>Alexis Zrihen</p>
</div>
</div>
<div id="sociaux">
<p>Faites vivre l'expérience sur les réseaux sociaux</p>
<div class="fb-share-button" data-href="http://68e573c9fb.url-de-test.ws/" data-layout="button_count"></div>
<div class="twitter"><a href="https://twitter.com/share" class="twitter-share-button" data-url="http://68e573c9fb.url-de-test.ws/" data-via="AZ_FirstOne">Tweet</a></div>
</div>
</div>
</div>
<div id="fb-root"></div>
</div>
<script src="//code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript" src="js/fullscreen.js"></script>
<script type="text/javascript" src="js/jquery.fullPage.js"></script>
<script type="text/javascript" src="js/js.js"></script>
<!-- FACEBOOK -->
<script>
window.fbAsyncInit = function() {
FB.init({
appId : '1542577652625752',
xfbml : true,
version : 'v2.2'
});
};
(function(d, s, id){
var js, fjs = d.getElementsByTagName(s)[0];
if (d.getElementById(id)) {return;}
js = d.createElement(s); js.id = id;
js.src = "//connect.facebook.net/en_US/sdk.js";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));
</script>
<!-- TWEETER -->
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+'://platform.twitter.com/widgets.js';fjs.parentNode.insertBefore(js,fjs);}}(document, 'script', 'twitter-wjs');
</script>
</body>
</html>