-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
84 lines (83 loc) · 7.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
<!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>What Is Wikipedia?</title>
<link rel="icon" href="assets/favicon.png">
<link rel="stylesheet" href="style.css">
<meta name="author" content="Gabriel Drozdov">
<meta name="keywords" content="Creative Coding, Data Visualization, Web Design, Wikipedia">
<meta name="description" content="Wikipedia, recontextualized.">
<meta property="og:url" content="https://whatiswikipedia.noreplica.com/">
<meta name="og:title" property="og:title" content="What Is Wikipedia?">
<meta property="og:description" content="Wikipedia, recontextualized.">
<meta property="og:image" content="./assets/opengraph.jpg">
</head>
<body>
<iframe src="https://en.wikipedia.org/wiki/Main_Page" class="wiki-frame"></iframe>
<div class="home">
<div class="home-container">
<img src="assets/wikipedia.png" class="wikipedia">
<div class="box-gray">
<div class="box-heading" onclick="boxToggle(this)">
<h1>What Is Wikipedia?</h1>
<img src="assets/arrow.svg" class="arrow">
</div>
<div class="box-body">
<p>Where to start? The same place we’ll end — Wikipedia.</p>
<p><em>Wikipedia is a multilingual free online encyclopedia written and maintained by a community of volunteers through open collaboration and a wiki-based editing system.</em> [source: <a href="https://en.wikipedia.org/wiki/Wikipedia" target="_blank">Wikipedia</a>]</p>
<p>The humble encyclopedia has mostly been forgotten. In its place is the encyclopedia, the source of all knowledge, the first link on your search. And against all odds, it is a mostly wonderful, quiet place. It is a community run by <a href="https://en.wikipedia.org/wiki/Wikipedia:List_of_Wikipedians_by_number_of_edits#1%E2%80%931000" target="_blank">fervent volunteers</a>, <a href="https://en.wikipedia.org/wiki/Wikipedia:Funding_Wikipedia_through_advertisements" target="_blank">devoid of ads</a>, complete with an interface that never left <a href="https://en.wikipedia.org/wiki/Web_2.0" target="_blank">early web aesthetics</a>. It is a celebration of information for <a href="https://en.wikipedia.org/wiki/List_of_Wikipedias" target="_blank">all cultures and languages</a>. More generally, it is a <a href="https://en.wikipedia.org/wiki/Wikipedia:Size_in_volumes" target="_blank">celebration of information</a>. More specifically, it is a celebration of information as originally orchestrated by <a href="https://en.wikipedia.org/wiki/Founder_of_Wikipedia" target="_blank">two men</a>.</p>
<p>As with all things, Wikipedia was not inevitable. First came the concept of a <a href="https://en.wikipedia.org/wiki/Wiki" target="_blank">wiki</a>, a collaborative publication that lives online. Well, first came a <a href="https://en.wikipedia.org/wiki/Nupedia" target="_blank">peer-reviewed online publication</a> that fostered quality but not quantity. Then came a second draft, in English, on January 15, 2001. Then around a year later, amid external fears of out-of-control monetization, the organization cemented its mission by switching to a “.org” address. Growth from there was exponential, eventually stabilizing into an active user base that ranks <a href="https://www.similarweb.com/top-websites/" target="_blank">seventh of all websites today</a>.</p>
<p>This website and its community have, mostly, stayed true to the founding core values. <a href="https://en.wikipedia.org/wiki/Wikipedia_Seigenthaler_biography_incident" target="_blank">Issues arise</a>, and <a href="https://en.wikipedia.org/wiki/Monkey_selfie_copyright_dispute" target="_blank">arise again</a>, but have yet to lead to any moments of <a href="https://en.wikipedia.org/wiki/Acquisition_of_Twitter_by_Elon_Musk" target="_blank">self-immolation</a>. And while <a href="https://en.wikipedia.org/wiki/Wikipedia:Wikipedia_is_not_a_reliable_source#:~:text=Wikipedia%20is%20not%20a%20reliable%20source%20for%20citations%20elsewhere%20on,in%20progress%2C%20or%20simply%20incorrect." target="_blank">reputability</a> <a href="https://en.wikipedia.org/wiki/Reliability_of_Wikipedia" target="_blank">concerns</a> always exist, even <a href="https://en.wikipedia.org/wiki/Addition#Footnotes" target="_blank">articles on the most basic of topics</a> are troves of scholarly references that any student would be envious of. When a librarian first introduced me to Wikipedia, they also offered a healthy dose of skepticism. That dose remains as healthy as ever, <em>and</em> Wikipedia is the first resource for all my scholarly research, late night deep dives, and frantic fact checking scrambles. An astute researcher does not ignore the first resource — instead, they vet it with that healthy skepticism.</p>
<p>I invite you to Wikipedia with a new set of eyes. Take this thing — this <em>place</em> — that we so often take as trivial or for granted. What is it? Data? Information? Users? A community? A website? An encyclopedia? A book, even? Or just light on a computer screen?</p>
<p>What about Wikipedia makes it a natural part of our lives? Its ubiquity? Its simplicity? Its familiarity? What about its dominance over virtually all narratives?</p>
<p>Whatever it is, it is many things. I am curious about one thing though, which is its physicality. An encyclopedia has bulk, but only so much of Wikipedia is visible or felt at a single moment. Furthermore, Wikipedia is the encyclopedia, the authors, the librarians, the public, and the library. Where is everyone? Where is everything?</p>
<p>This project is a reimagining of Wikipedia as several new spaces with the intention of changing your perception of what the website is or isn’t.</p>
<p>As a <a href="library" style="color: var(--green-bright)">library</a>, Wikipedia is a collection of books. What stories will you find?</p>
<p>As a <a href="cafe" style="color: var(--blue-bright)">café</a>, Wikipedia is a collection of conversations. Who will you bump into?</p>
<p>As a <a href="gallery" style="color: var(--pink-bright)">gallery</a>, Wikipedia is a collection of artworks. What images will you view?</p>
<p>I invite you into this town to see the things you already know, but might not, too.</p>
</div>
</div>
<div class="box-green">
<a href="library" class="box-heading">
<h1>Enter the Library</h1>
<img src="assets/arrow.svg" class="arrow arrow-right">
</a>
</div>
<div class="box-blue">
<a href="cafe" class="box-heading">
<h1>Enter the Café</h1>
<img src="assets/arrow.svg" class="arrow arrow-right">
</a>
</div>
<div class="box-pink">
<a href="gallery" class="box-heading">
<h1>Enter the Gallery</h1>
<img src="assets/arrow.svg" class="arrow arrow-right">
</a>
</div>
<div class="box-gray">
<div class="box-heading" onclick="boxToggle(this)">
<h1>Who made this?</h1>
<img src="assets/arrow.svg" class="arrow">
</div>
<div class="box-body">
<p>Design + Code: <a href="https://www.gabrieldrozdov.com/" target="_blank">Gabriel Drozdov</a> / <a href="https://www.noreplica.com/" target="_blank">No Replica</a></p>
<p>Colophon: Biolinum and Libertine by Philipp H. Poll</p>
<p>Content: Wikipedia (using the <a href="https://www.mediawiki.org/wiki/API:Random" target="_blank">random API</a>)</p>
<p>Advisor: <a href="https://eric.young.li/" target="_blank">Eric Li</a></p>
</div>
</div>
</div>
</div>
<script>
function boxToggle(e) {
e.nextElementSibling.classList.toggle('box-body-show');
e.querySelector('.arrow').classList.toggle('arrow-flip');
}
</script>
</body>
</html>