forked from emainguelag/Project_1_Metaverse
-
Notifications
You must be signed in to change notification settings - Fork 0
/
page1_history.html
184 lines (158 loc) · 8.83 KB
/
page1_history.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>La petite histoire des mondes virtuels</title>
<link href="main.css" rel="stylesheet">
<link href="page1_history.css" rel="stylesheet">
<link rel="stylesheet" href="footer.css">
<link rel="stylesheet" href="header.css">
</head>
<body>
<header>
<nav>
<div id="mySidenav" class="sidenav">
<a id="closeBtn" href="#" class="close">×</a>
<ul>
<li><a href="index.html">Accueil</a></li>
<li><a href="page1_history.html">Historique</a></li>
<li><a href="page2_actors.html">Métavers</a></li>
<li><a href="page3_news.html">Actualités</a></li>
<li><a href="page4_quiz.html">Quiz</a></li>
</ul>
</div>
<a href="#" id="openBtn">
<span class="burger-icon">
<span></span>
<span></span>
<span></span>
</span>
</a>
<div id="logo">
<img id="imagelogo" src="pictures/logo-metavers-news-h50px-transparent.png" alt="" />
</div>
</nav>
</header>
<!-- l'id 'haut' sur le h1 permet d'activer la flèche de retour vers le haut -->
<h1 id="haut">Un peu d'histoire...</h1>
<p class="h1-subtitle">Remontons aux origines des mondes virtuels...</p>
<ul class="summary">
<li><a href="#definition">Définition</a></li>
<li><a href="#demonstration">Immersion</a></li>
<li><a href="#history">Histoire</a></li>
<li><a href="#societal-issues">Enjeux & Risques</a></li>
</ul>
<section class="history-section">
<article class="history-article" id="definition">
<h2>Qu'est-ce qu'un métavers ?</h2>
<div class="picture-display">
<img src="pictures/hands-in-digital-universe-background-400px.jpg" width="100%"
alt="Le 16 août 2022, Mark Zuckerberg avait publié un selfie de son avatar dans le métavers devant la Tour Eiffel et la Sagrada Família.">
</div>
<p>Un métavers (calque de l'anglais metaverse) est un monde virtuel. Le terme est régulièrement utilisé pour
décrire une version future d'Internet où des espaces virtuels, persistants et partagés sont accessibles via
interaction 3D ou 2D en visioconférence.</p>
<p>Une autre définition conçoit le métavers comme l'ensemble des mondes virtuels connectés à Internet, lesquels
sont perçus en réalité augmentée.</p>
<p>Le terme de « métavers » est issu de la contraction de meta et universe. Le métavers est donc un
méta-univers, ou un univers qui va au-delà de celui que nous connaissons. Il s'agit donc d'un monde virtuel
structuré et ouvert.</p>
<p>Source : <a target="_blank" href="https://fr.wikipedia.org/wiki/M%C3%A9tavers">Wikipedia</a></p>
</article>
<article class="history-article" id="demonstration">
<h2>Suivez le guide !</h2>
<p>
Les trois principaux métavers ont pour nom <strong>Decentraland</strong>, <strong>The Sandbox</strong> et
<strong>Roblox</strong>.
</p>
<p>Ce qui est frappant, c'est de constater à quelle échelle certains de ces projets se sont développés.</p>
<p>The Sandbox comme Decentraland ont été pris d'assaut par des créatifs comme par des sociétés avant gardistes
qui en ont rapidement perçu le potentiel. Ces écosystèmes ont donc rapidement pris de l'expansion.</p>
<p>Découvrez sans plus attendre l'univers de The Sandbox avec cette vidéo :</p>
<div class="video-wrap">
<div class="video-container">
<iframe src="https://www.youtube.com/embed/0Jquhzr4d4k" title="YouTube video player" frameborder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
allowfullscreen></iframe>
</div>
</div>
<!-- div wrap > div container > iframe
pour bien intégrer la vidéo Youtube en responsive -->
<p>À voir : <a href="page2_actors.html">Les principaux Métavers</a></p>
<p>Source : <a target="_blank"
href="https://www.futura-sciences.com/tech/questions-reponses/cryptomonnaie-sandbox-decentraland-sont-principaux-metavers-17021/">Futura
Sciences</a></p>
</article>
<article class="history-article" id="history">
<h2>Un peu d'histoire ...</h2>
<p>La première apparition du terme metaverse a été dans Snow Crash, « Le Samouraï virtuel » de Neil Stephenson.
Dans ce roman visionnaire publié en 1992, les citoyens utilisent des avatars numériques pour explorer un monde
virtuel en ligne - ce qui est pour eux une façon comme une autre d'échapper à la réalité.</p>
<h3>Second Life, pionnier des métavers</h3>
<div class="picture-display">
<img src="pictures/Second_Life_Logo.svg.png" width="100%" alt="Second Life : le 1er des Metaverses">
</div>
<p><strong>Second Life</strong> est un vaste monde virtuel généré en 3D et une plate-forme remplie de contenu
généré par les utilisateurs où les gens peuvent interagir les uns avec les autres en temps réel. Il héberge
également une économie mondiale florissante. La plate-forme a été officiellement lancée au publicpar Linden
Lab le 23 juin 2003, mais son développement remonte au moins à la fin des années 1990.</p>
<p>L'aspect le plus révolutionnaire de Second Life est que les résidents peuvent faire presque tout ce que les
gens font dans la vraie vie, comme regarder des films, écouter de la musique, jouer à des jeux, aller à des
fêtes, acheter ou vendre des choses et créer de nouveaux contenus, qu'il s'agisse d'objets ou même de
bâtiments. En fait, la plupart du contenu, des points de repère et même des animations du monde sont créés par
les résidents.</p>
<p>À bien des égards, Second Life est la base à laquelle nous pensons lorsque nous réfléchissons ce qu'est le
métaverse.</p>
<p>Source : <a target="_blank"
href="https://www.savoirdanslavie.com/what-is-second-life-history-metaverse/">savoirdanslavie.com</a></p>
</article>
<article class="history-article" id="societal-issues">
<h2>Enjeux et risques</h2>
<div class="picture-display">
<img src="pictures/horizon-worlds.png" width="100%"
alt="Le 16 août 2022, Mark Zuckerberg avait publié un selfie de son avatar dans le métavers devant la Tour Eiffel et la Sagrada Família.">
</div>
<h3>Enjeux politiques et économiques</h3>
<p>L’entreprise américaine Meta, nouveau nom de Facebook, affiche la volonté de s’implanter en Europe : on parle
même de la création de 10 000 postes sur 5 ans sur le Vieux Continent dans le but de faire de ce dernier un
noyau dur du Metaverse.</p>
<p>La Chine, malgré sa censure constante et permanente, notamment sur les réseaux sociaux, et sa politique
d’interdiction de l’utilisation de crypto-monnaies, développe son propre Métaverse.</p>
<h3>Risques de dérive</h3>
<p>Les risques induits par le développemnt du Metaverse sont de diverses natures. Nous pouvons citer entre
autres:
<ul>
<li>Les risques sécuritaires sur le traitement des données personnelles, notamment biométriques</li>
<li>La consommation énergétique du Métavers, liée au stockage de données</li>
<li>Le danger psychologique lié à la double vie dans le Metaverse</li>
<li>Le harcèlement moral et sexuel dans le Metaverse</li>
<li>Toutes les dérives de comportement humain, exacerbées par la virtualité</li>
<li>Les risques financiers dûs à un défaut de régulation des transactions dans le Métaverse</li>
</ul>
</p>
<p>Source : <a target="_blank"
href="https://deep-dive.fr/social-media/metaverse-quels-sont-les-enjeux-et-les-risques-de-la-realite-augmentee/">deep-drive.fr</a>
</p>
</article>
</section>
<footer>
<div>
<img id="logo-site" src=".\pictures\logo-metavers-news-h50px--rose-transparent.png" alt="">
</div>
<div id="text-footer">
<p>Copyright © 2022. Metanews, Tous droits réservés.</p>
</div>
<div id="social-networks">
<a href="#"><img id="insta-img" src=".\pictures\logo-insta.png" alt="insta-logo"></a>
<a href="#"><img id="facebook-img" src=".\pictures\logo-fb.png" alt="facebook-logo"></a>
<a href="#"><img id="twitter-img" src=".\pictures\logo-twitter-bleu-blanc.png" alt="twitter-logo"></a>
</div>
</footer>
<!-- div conteant la flèche de retour vers le haut, invisible par défaut. -->
<div><a id="cRetour" class="cInvisible" href="#haut"></a></div>
<script src="script.js"></script>
<script src="header.js"></script>
</body>
</html>