-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
538 lines (474 loc) · 23.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
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
<!doctype html>
<html lang="nl">
<head>
<!-- default shit -->
<meta charset="utf-8">
<title>Explain the World Wide Web</title>
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
<!-- the creators! -->
<link type="text/plain" rel="author" href="humans.txt"/>
<!-- ICONS - THANKS A LOT APPLE... -->
<link rel="apple-touch-icon" sizes="57x57" href="img/favicon/apple-touch-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="img/favicon/apple-touch-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="img/favicon/apple-touch-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="img/favicon/apple-touch-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="img/favicon/apple-touch-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="img/favicon/apple-touch-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="img/favicon/apple-touch-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="img/favicon/apple-touch-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="img/favicon/apple-touch-icon-180x180.png">
<link rel="icon" type="image/png" href="img/favicon/favicon-32x32.png" sizes="32x32">
<link rel="icon" type="image/png" href="img/favicon/android-chrome-192x192.png" sizes="192x192">
<link rel="icon" type="image/png" href="img/favicon/favicon-96x96.png" sizes="96x96">
<link rel="icon" type="image/png" href="img/favicon/favicon-16x16.png" sizes="16x16">
<link rel="manifest" href="img/favicon/manifest.json">
<!--<link rel="mask-icon" href="img/favicon/safari-pinned-tab.svg" color="#5bbad5">-->
<link rel="shortcut icon" href="img/favicon/favicon.ico">
<meta name="msapplication-TileColor" content="#da532c">
<meta name="msapplication-TileImage" content="img/favicon/mstile-144x144.png">
<meta name="msapplication-config" content="img/favicon/browserconfig.xml">
<meta name="theme-color" content="#ffffff">
<!-- TWITTER -->
<meta name="twitter:card" content="summary_large_image">
<meta name="twitter:site" content="http://explainwww.tk">
<meta name="twitter:creator" content="Groep A IPMEDT2 2015">
<meta name="twitter:title" content="Explain the WWW">
<meta name="twitter:description" content="explaination the world wide web">
<meta name="twitter:image:src" content="http://explainwww.tk/img/ArpaNetSticker.png">
<!-- FACEBOOK -->
<meta property="og:site_name" content="Explain the www">
<meta property="og:url" content="http://explainwww.tk">
<meta property="og:type" content="article">
<meta property="og:title" content="Explain the www">
<meta property="og:description" content="explaination the world wide web">
<meta property="og:image" content="http://explainwww.tk/img/ArpaNetSticker.png">
<!-- CSS -->
<link rel="stylesheet" href="build/css/preloader.css">
<link rel="stylesheet" href="build/css/app.css">
</head>
<body>
<div class="loading-overlay">
<div class="dots-loader"></div>
</div>
<!--[if lt IE 8]>
<p class="browsehappy">You are using an <strong>outdated</strong> browser. Please <a href="http://browsehappy.com/">upgrade
your browser</a> to improve your experience.</p>
<![endif]-->
<main>
<header>
<div class="brand" data-menuanchor="landing">
<a href="#landing">Explain <span class="blue">W</span>orld <span class="blue">W</span>ide <span
class="blue">W</span>eb </a>
</div>
<div id="hamburger">
<span></span>
<span></span>
<span></span>
</div>
<nav class="push-right">
<ul id="menu">
<li data-menuanchor="arpanet"><a href="#arpanet">Arpanet & WWW</a></li>
<li data-menuanchor="domein"><a href="#domein">Rising of the domains</a></li>
<li data-menuanchor="websites"><a href="#websites">Successful websites</a></li>
<li data-menuanchor="wireless"><a href="#wireless">Wireless vs wired</a></li>
<li data-menuanchor="future"><a href="#future">The future</a></li>
</ul>
</nav>
</header>
<div id="fullpage">
<section class="section">
<audio id="ModemSound">
<source src="audio/Dial_up_modem_noises.ogg" type="audio/ogg">
</audio>
<div class="background"></div>
<div id="SwitchImageOverlay">
<div id="introText">
<h2>Everyone uses the internet</h2>
<h2>But what does it do exactly?</h2>
<h2>And where does it come from?</h2>
<h2>Let’s start 60 years ago</h2>
<h2>When the ARPA-net came into existence</h2>
</div>
<div id="landing-txt">
<h1>Explain the World Wide Web</h1>
<h2>Everyone uses it , but where does it come from?</h2>
</div>
<div id="modal-landing">
<div class="connecting">
<div class="text">
CREATING NETWORK
</div>
<div class="box">
<div class="comp"></div>
<div class="con"></div>
<div class="byte"></div>
<div class="server"></div>
</div>
</div>
</div>
<br/>
<button class="btn" id="startReading">Create the internet..</button>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-2" id="part-1">
<h1>Arpanet</h1>
<p>
You are probably asking yourself: “what’s so special about the internet to make a website about
it?” – Well, as you probably know, the internet hasn’t been around for such a long time. Besides
that, people often think that the internet is just some miraculous ‘’thing’’ that just happens
to be there. Well it’s not! We’ve got a short, but fast paced video-clip for you that explains
where the internet comes from, and how it came to be!
</p>
<p>
With the ARPA-network, internet became accessible to the greater public. By clicking on the
button below we will try to make a connection to the internet!
</p>
</div>
<div class="section-2" id="part-2">
<img class="responive-img" id="arpa-img" src="img/Arpanet-Sticker.png" alt="Arpanet">
</div>
<!--
<div class="section-2">
<div class="btn btn-connect">
CONNECT <span class="round">▼</span>
</div>
</div>
-->
</div>
</section>
<section class="section">
<h2 class="hidden">Arpanet video</h2>
<div class="video-wrapper" id="arpa-wrapper">
<div id="apranet-vid"></div>
</div>
</section>
<section class="section transSection">
<div class="container">
<div class="section-2">
<ul class="progress">
<li>
<div class="node blue"></div>
<p>Welcome</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Arpanet</p></li>
<li>
<div class="divider grey change"></div>
</li>
<li>
<div class="node grey change"></div>
<p>Rising of the domains</p></li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>Successful websites</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>Wireless vs wired</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>The future</p>
</li>
</ul>
</div>
<div class="section-2">
<h3>When the public internet, also known as the World Wide Web, became accesible to the greater
public, numerous websites came to light. From here on, things began developing rapidly.
Scrolling down will show the amount of websites that emerged from 1991 until now.</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-2" id="part-3">
<h1>Rising of the domains</h1>
<p> To the right, you can see an overview of the amount of websites that were online during the
last couple of years. Why are we showing you this? – Well, as of today, browsing is made so
easy, and the amount of information you can look up is tremendous, but it hasn’t always been
like that. </p>
<p>
There is a reason for the internet to become so popular. Between 1985 and 1995 the NSF (National
Science Foundation) had created an immense network, founded to promote the educational benefits
of the internet. During this period of time there emerged a couple of ISPs (Internet Service
Providers). Their goal was to make the internet accessible to the average civilian. After a
couple of years, 1991 to be exact, the NSF made an agreement with a couple of these ISPs,
stating they could use their network, providing they would pursue the following three
agreements:
</p>
<ul>
<li>They would never diminish the accessibility of the NFS’s network;</li>
<li>The costs of the project should be evened out by their profits;</li>
<li>Any excess revenues should be used to enhance and extend the internet as it was knows at the
time.
</li>
</ul>
<p>
This is what caused the use of the WWW to start skyrocketing. The amount of websites that aired
started increasing every year, which you can see in the column chart to the left/right. You can
even hover over the chart to see the exact figures!
</p>
</div>
<div class="section-2">
<div id="websitesChart" style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div>
</section>
<section class="section transSection">
<div class="container">
<div class="section-2">
<ul class="progress">
<li>
<div class="node blue"></div>
<p>Welcome</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Arpanet & WWW</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Rising of the domains</p></li>
<li>
<div class="divider grey change"></div>
</li>
<li>
<div class="node grey change"></div>
<p>Successful websites</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>Wireless vs wired</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>The future</p>
</li>
</ul>
</div>
<div class="section-2">
<h3>Since the beginning of the WWW a great number of websites entered the world of internet. Let’s
give you a clear image of the biggest websites out there. Websites that transformed the global
economy and changed the way we look at society.</h3>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-2" id="part-4">
<h1>Successful websites</h1>
<p>
The upswing of the commercial internet also brought forth more and more interest in how to make
use of it. Therefore, a couple of developers started to recognize possibilities and made use of
them.
<br/>
Because of this, you see a great amount of popular and big websites arising around 1994. Most of
these websites are still used every day by people all around the world. But what are the stories
behind these websites? Who made them? What were the developer’s motives to realize these
websites?
<br/>
All these questions can be answered with the bubble chart on the right! Hover over the bubbles
to view additional information about these websites and find the answers to all these questions!
</p>
</div>
<div class="section-2">
<div id="websitesBubble"
style="min-width: 310px; height: 400px; margin: 0 auto"></div>
</div>
</div>
</section>
<section class="section transSection">
<div class="container">
<div class="section-2">
<ul class="progress">
<li>
<div class="node blue"></div>
<p>Welcome</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Arpanet & WWW & WWW</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Rising of the domains</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Successful websites</p>
</li>
<li>
<div class="divider grey change"></div>
</li>
<li>
<div class="node grey change"></div>
<p>Wireless vs wired</p>
</li>
<li>
<div class="divider grey"></div>
</li>
<li>
<div class="node grey"></div>
<p>The future</p>
</li>
</ul>
</div>
<div class="section-2">
<h3>The internet has become something we access at home, on the move, on our phones and even on TV.
It’s become a part of our everyday lives and living without it is out of the question. </h3>
<br/>
<div id="panic-vid"></div>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-2">
<div id="part-5">
<h1> Wireless vs wired</h1>
<p>
Think to yourself: have you ever been in a situation like the man in the video just now? And
did
you think to yourself how it’s possible to stay connected to the internet using your
smartphone?
Again, many people don’t ask themselves these questions. But being able to use a smartphone
is
all thanks to one of the most important developments concerning the internet: the foundation
of
wireless networks, more often referred to as “Wi-Fi”.
</p>
<p>
The very first roots of these wireless network connections go back to the year 1971, but the
very first protocol for these connections didn’t exist until 1997. This protocol was called
802.11-1997 and could only have a link speed of 2 Mbit per second. This is equal to a
download
speed of 250 kilobytes per second. Can you imagine? It hasn’t even been 20 years since we
can
use wireless internet, and it used to be so slow!
</p>
<p>
Soon after the first release in 1997 there would be a new protocol, called
802.11b, which aired in 1999. This new protocol provided the user with way better link
speeds
and better connectivity. Because of that, it resulted in the first real popularity regarding
Wi-Fi connections.
</p>
</div>
</div>
<div class="section-2">
<video id="wirelessVideo" controls poster="img/wirelessvswired.png">
<source src="video/wired-vs-wireless.mp4" type="video/mp4">
<source src="video/wired-vs-wireless.ogg" type="video/ogg">
Your browser does not support this video.
</video>
</div>
</div>
</section>
<section class="section transSection">
<div class="container">
<div class="section-2">
<ul class="progress">
<li>
<div class="node blue"></div>
<p>Welcome</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Arpanet & WWW</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Rising of the domains</p></li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Successful websites</p>
</li>
<li>
<div class="divider blue"></div>
</li>
<li>
<div class="node blue"></div>
<p>Wireless vs wired</p>
</li>
<li>
<div class="divider grey change"></div>
</li>
<li>
<div class="node grey change"></div>
<p>The future</p>
</li>
</ul>
</div>
<h3>What will the future hold? Where will the Web be in twenty years from now? The Internet of Things
(IoT) might bring devices together to enhance our way of living. The next video will show you the
immense opportunities the Internet of Things could bring us.</h3>
</div>
</section>
<section class="section">
<h2 class="hidden">Future video</h2>
<div class="video-wrapper" id="future-wrapper">
<div id="future-vid"></div>
</div>
</section>
<section class="section">
<div class="container">
<div class="section-2" id="part-6">
<h1>What's next?</h1>
<p id="een">The only thing we ask ourselves now is:</p>
<p id="twee">How will the internet advance in the future and what will the impact on our lives be? </p>
<p id="drie">Well, there honestly is no answer to that question.</p>
<p id="vier">What we do know however is that the internet is still young and has more to offer than we
can imagine!</p>
</div>
</div>
</section>
</div>
<footer id="footer">
<p>Copyright © 2015 Team A Mediatechnologie. All Rights Reserved. For an overview of all our sources, check our <a href="https://github.com/spelbreker/ipmedt2" target="_blank">sources</a> page!</p>
</footer>
</main>
<!-- Scripts -->
<script src="build/js/plugins.min.js"></script>
<script src="build/js/scripts.min.js"></script>
</body>
</html>