-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathindex.html
53 lines (47 loc) · 4.06 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="functions.js" defer></script>
<script src="searchfunction.js" defer></script>
<script src="portraitfunction.js" defer></script>
<link rel="stylesheet" type="text/css" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Open+Sans" rel="stylesheet">
<script async defer src="https://buttons.github.io/buttons.js"></script>
<title>🔍 MUSEUM MIX</title>
</head>
<body>
<div class="header" id="mix">
<h1><a href="index.html">MUSEUM MIX</a></h1>
</div>
<div class="container2">
<ul class="menu">
<li class="sub" onclick="expandOrCollapsePanel1()">HOW DOES IT WORK?</li>
<div id="myDIV1">
Welcome to Museum Mix, where you can mix up museum collections!<br><br>
You can enter queries in the search bar, or explore the case study about portraits below. This platform is meant for a broad audience. However, it might specifically appeal to art history students and professors in the context of overview courses which normally make use of costly online image databases. It also serves as an example of mixing up open cultural data.<br><br>
For now, data from the <a target="_blank" href="https://www.rijksmuseum.nl/en/api">Rijksmuseum API</a> and <a target="_blank" href="https://collection.cooperhewitt.org/api/">Smithsonian Design Museum</a> were included. Museum Mix was not developed by, for or through the intercession of these organizations (they supported the app in no other way than opening up their data). This website does not own any of the images, but they are all licensed under <a target="_blank" href="https://creativecommons.org/share-your-work/public-domain/cc0/">CC0</a>. Awesome!<br><br>
</div>
<li class="sub" onclick="expandOrCollapsePanel2()">THE CASE FOR PORTRAITS</li>
<div id="myDIV2">
<i>The first image was a portrait. In classical mythology, a lovely youth named Narcissus lay beside a pool gazing in adoration at his own reflection. Ignoring the loving attention of the nymph Echo, he wasted away, died and was metamorphosed into a flower bearing his name.</i><br><br>(Joanna Woodall, Facing the Subject, 1997)<br><br>
A portrait is a representation of a person by another person. Being more than just a record, portraits can express the sitter's beauty, status or emotion. It might emphasize (un)flattering characteristics. It might give an abstract or more detailed impression. It might even tell a story about social and artistic conventions. To celebrate the broadness of portraits, find some examples here:<br><br><br>
<a id="button" onclick ="portrait()">SHOW ME PORTRAITS</a><br><br><br>
</div>
<li class="sub" onclick="expandOrCollapsePanel3()">ABOUT THE PROJECT</li>
<div id="myDIV3">
This website was developed as part of my <a target="_blank" href="https://drive.google.com/drive/folders/1RlFbNn3Tiiks41i8G2OOpZg_5bAbIoUq?usp=sharing">master's thesis</a> where I am exploring digital tools. I am a student in digital humanities with a background in art history and my aim is to, one day, bring together many museum collections and cultural datasets in this interactive platform. Data visualizations and some sort of recommendation tool would be nice.<br><br>Even though my programming experience is a bit limited for now, I strongly believe in what open data can bring to the cultural world. Feel free to fork my project on GitHub. Your thoughts are most welcome!
<br><br>
<a class="github-button" href="https://github.com/anaschultze" aria-label="Follow @anaschultze on GitHub">View on GitHub</a>
</div>
</ul>
</div>
<div class="container">
<div class="field-input">
<input type="text" placeholder="mix it up..." id="searchbar"><span id="mag" onclick = "search(searchbar.value)">
</div>
</div>
<div id="images">
</div>
</body>