241 lines
9.1 KiB
HTML
241 lines
9.1 KiB
HTML
<html>
|
|
<head>
|
|
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
|
|
<meta content="utf-8" http-equiv="encoding">
|
|
<meta http-equiv="Access-Control-Allow-Origin" content="*">
|
|
<title>VVVW</title>
|
|
<link rel="stylesheet" href="static/css/jquery-ui.min.css">
|
|
<link rel="stylesheet" href="static/css/bootstrap.min.css">
|
|
<link rel="stylesheet" href="static/css/style.css">
|
|
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.12.1/css/all.css" crossorigin="anonymous">
|
|
<script src="static/js/jquery-3.5.1.min.js"></script>
|
|
<script src="static/js/jquery-ui.min.js"></script>
|
|
<script src="static/js/bootstrap.min.js"></script>
|
|
<script src="static/js/d3.v3.min.js"></script>
|
|
<script src="static/js/draggable.js"></script>
|
|
|
|
</head>
|
|
<body>
|
|
<div class="container-fluid p-0">
|
|
<div class="bg">
|
|
<div class="row">
|
|
<!-- background audio -->
|
|
<div class="col-md-9" style="position: static;">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<div class="play-stop">
|
|
<div id="tracktime">0:0 / 22:39</div>
|
|
<a id="mBtn" onclick="PSFunction()">(Play)</a>
|
|
<button class="audio-button" onclick="document.getElementById('audioBG').volume -= 0.1">-</button>
|
|
<button class="audio-button" onclick="document.getElementById('audioBG').volume += 0.1">+</button>
|
|
</div>
|
|
<div class="main_audio">
|
|
<audio id='audioBG' ontimeupdate="document.getElementById('tracktime').innerHTML = Math.floor(this.currentTime/60) + ':' + (Math.floor(this.currentTime) - Math.floor(this.currentTime/60)*60) + ' / ' + Math.floor(this.duration/60)+ ':' + (Math.floor(this.duration) - Math.floor(this.duration/60)*60);">
|
|
<source src="static/audio/FreshMythsDifferentTimes_performance_podcast1.mp3" type="audio/mpeg">
|
|
Your browser does not support the audio tag.
|
|
</audio>
|
|
</div>
|
|
<div class="map_legend">
|
|
<div id="box1" onclick="popup_bg(120,group1)"><i class="fas fa-play"></i></div> <p>Folklore literature</p>
|
|
<div id="box2" onclick="popup_bg(300,group2)"><i class="fas fa-play"></i></div><p>Islamic Mysticism</p>
|
|
<div id="box3" onclick="popup_bg(500,group3)"><i class="fas fa-play"></i></div> <p>Contemporary poets</p>
|
|
<div id="box4" onclick="popup_bg(700,group4)"><i class="fas fa-play"></i></div> <p>Contemporary musicians</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
<div class="col-md-3">
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<span id="about">
|
|
<a href="#" >about</a> |
|
|
</span>
|
|
<span id="colophon">
|
|
<a href="#" >colophon</a> |
|
|
</span>
|
|
<span id="how">
|
|
<a href="#" >how to use</a>
|
|
</span>
|
|
<!-- <h1 id="about">Wells of Knowledge</h1> -->
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
<!-- new row should start here -->
|
|
<!-- pop up thesis -->
|
|
<!-- <div class="scaleable-wrapper draggable" id="scaleable-wrapper"> -->
|
|
|
|
<!-- </div> -->
|
|
<!-- map area -->
|
|
<div class="row" id="noflex">
|
|
<div class="col-md-10 offset-md-1">
|
|
<div class="map_area">
|
|
<!-- <p>Related media</p> -->
|
|
<!-- <div class="draggable" id="showdadaloglu"><div class='text_audio'>Bio</div> -->
|
|
<!-- <audio id="audiodadaloglu" controls>
|
|
<source src="static/audio/HNI_Soundinstall_3tracks_together1.mp3" type="audio/mpeg">
|
|
Your browser does not support the audio tag.
|
|
</audio> -->
|
|
<!-- <img src="static/images/poem.png">
|
|
</div> -->
|
|
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
|
|
|
|
<!-- popups about and colophon -->
|
|
<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div>Wells of Knowledge
|
|
This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer.
|
|
From Merves website:
|
|
This project comes together as a result of a research focusing on cultural heritage and transfer of knowledge through artistic production. Inspired by Gezi Park Occupation (2013) in Istanbul Taksim Square, the artist, follows her own memories and questions the infuence of past productions on young generations and possible effects of them on politic movements.
|
|
|
|
From Angeliki's and Alice's concept:
|
|
An essential question from the beginning of this project was how oral knowledge can be 'recorded','documented','transferred' through a digital online space besides a printed format. The main navigation point that the platform is based on is the map of connections. This is inspired by the notion of the common history and references that people in Gezi Park shared, being present together in the square with all their different voices and having slogans and poems as memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?" Through the map, we give the names a position within a context, and also link poets and authors to their inspiration and their subsequent work, by connecting together names, showing their bio and highlighting parts of the thesis of Merve. The platform acts as an active archival space that gives the possibility to revisit the elements in a non-linear historical approach in relation to the written text and audio. </div>
|
|
</div><br>
|
|
<div id="showcolophon" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div>colophon texthjgjhghjgfhdgfhdgfhdsgfhsgfhsgdfjhgdsfhsfgdfjgsfgdshsgfhsgfffffffffffffdfhdsfjsgdfjgjdsgfsjdgfjshgdf</div>
|
|
</div>
|
|
|
|
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div>How to use
|
|
The map shows the connections between various representatives in Turkish culture, traditional or contemporary. The map elements can be rearranged, moved and even isolated by double clicking, to be desplayed only alongside their closest connections. Each name is presented alongside a song, a poem, an image, or a fragment of text or audio.
|
|
|
|
The different groups highlighted in the map (Folklore literature, Islamic Mysticism, etc) are represented by different colors. When clickling on one of the names, the platform or the media connected to that name - it will either scroll to a highlighted part of the thesis of the artist, display a video file, move the audio file to a specific point, or several actions at once.
|
|
|
|
Technical details: We have built the visualization from scratch using a javascript library called D3 Force Graph. The website is created with Bootstrap and D3js. </div>
|
|
</div>
|
|
|
|
<script src="static/js/d3_map.js"></script>
|
|
</div>
|
|
|
|
<div w3-include-html="thesis.html" class="draggable thesis" id="thesis">
|
|
</div>
|
|
<!-- <span onclick="this.parentElement.style.display='none'" id="thesisX" class='topleft'>×</span> -->
|
|
|
|
</div>
|
|
|
|
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<!-- scripts for mouse events -->
|
|
<script>
|
|
var audio = document.getElementById("audioBG");
|
|
var btn = document.getElementById("mBtn");
|
|
|
|
function PSFunction() {
|
|
if (audio.paused) {
|
|
audio.play();
|
|
btn.innerHTML = "(Pause)";
|
|
} else {
|
|
audio.pause();
|
|
btn.innerHTML = "(Play)";
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<script>
|
|
function popup_bg(time,group) {
|
|
var box = document.getElementById("audioBG");
|
|
// if (box.currentTime>0) {
|
|
// box.currentTime = 0;
|
|
// } else {
|
|
box.currentTime = time;
|
|
box.play();
|
|
btn.innerHTML = "(Pause)";
|
|
|
|
};
|
|
</script>
|
|
|
|
<script>
|
|
function includeHTML() {
|
|
var z, i, elmnt, file, xhttp;
|
|
/* Loop through a collection of all HTML elements: */
|
|
z = document.getElementsByTagName("*");
|
|
for (i = 0; i < z.length; i++) {
|
|
elmnt = z[i];
|
|
/*search for elements with a certain atrribute:*/
|
|
file = elmnt.getAttribute("w3-include-html");
|
|
if (file) {
|
|
/* Make an HTTP request using the attribute value as the file name: */
|
|
xhttp = new XMLHttpRequest();
|
|
xhttp.onreadystatechange = function() {
|
|
if (this.readyState == 4) {
|
|
if (this.status == 200) {elmnt.innerHTML = this.responseText;}
|
|
if (this.status == 404) {elmnt.innerHTML = "Page not found.";}
|
|
/* Remove the attribute, and call this function once more: */
|
|
elmnt.removeAttribute("w3-include-html");
|
|
includeHTML();
|
|
}
|
|
}
|
|
xhttp.open("GET", file, true);
|
|
xhttp.send();
|
|
/* Exit the function: */
|
|
return;
|
|
}
|
|
}
|
|
}
|
|
|
|
includeHTML();
|
|
</script>
|
|
|
|
<script>
|
|
$("#about").click(function(){
|
|
$("#showabout").fadeIn()
|
|
console.log("around")
|
|
});
|
|
|
|
$("#colophon").click(function(){
|
|
$("#showcolophon").fadeIn()
|
|
console.log("around")
|
|
});
|
|
$("#how").click(function(){
|
|
$("#showhow").fadeIn()
|
|
console.log("around")
|
|
});
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
<!-- scaleable wrapper -->
|
|
<!-- <script>
|
|
var $el = $("#thesis");
|
|
var elHeight = $el.outerHeight();
|
|
var elWidth = $el.outerWidth();
|
|
|
|
var $wrapper = $("#scaleable-wrapper");
|
|
|
|
$wrapper.resizable({
|
|
resize: doResize
|
|
});
|
|
|
|
function doResize(event, ui) {
|
|
|
|
var scale, origin;
|
|
|
|
scale = Math.min(
|
|
ui.size.width / elWidth,
|
|
ui.size.height / elHeight
|
|
);
|
|
|
|
$el.css({
|
|
transform: "translate(-50%, -50%) " + "scale(" + scale + ")"
|
|
});
|
|
|
|
}
|
|
|
|
var starterData = {
|
|
size: {
|
|
width: $wrapper.width(),
|
|
height: $wrapper.height()
|
|
}
|
|
}
|
|
doResize(null, starterData);
|
|
</script> -->
|
|
|
|
|
|
</div>
|
|
</body>
|
|
</html>
|