You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
260 lines
8.3 KiB
260 lines
8.3 KiB
<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
|
|
href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css"
|
|
rel="stylesheet" type='text/css'>
|
|
<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="row">
|
|
<div class="col-md-1">
|
|
<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button></div>
|
|
<div class="col-md-5">
|
|
<audio id="audioBG"
|
|
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
|
|
<source src="static/audio/output.webm" type="audio/mpeg">
|
|
</audio>
|
|
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 200px">
|
|
</div>
|
|
</div>
|
|
<div class="row">
|
|
<div class="col-md-12">
|
|
<br>
|
|
<div class="map_legend">
|
|
<div id="box1" onclick="popup_bg(10)"><i class="fa fa-play"></i></div> <p>Folklore literature</p>
|
|
<div id="box2" onclick="popup_bg(300)"><i class="fa fa-play" aria-hidden="true"></i></div><p>Islamic Mysticism</p>
|
|
<div id="box3" onclick="popup_bg(500)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary poets</p>
|
|
<div id="box4" onclick="popup_bg(700)"><i class="fa fa-play" aria-hidden="true"></i></div> <p>Contemporary musicians</p>
|
|
</div>
|
|
</div>
|
|
</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><h2>Wells of Knowledge</h2><p>
|
|
This web platform is a publishing moment/fragment of the work "Volitional Volutions of the Volatile Waters" by Merve Kilicer. <br>
|
|
How can oral knowledge can be 'recorded', 'documented', 'transferred' through a digital online space? This is the question that drove the research behind this website, which has the map of connections as the main navigation point. The visualisation is inspired by the common history and references that people in Gezi Park shared during the 2013 occupation. Their presence together in the square became a melange of their different voices, slogans, poems and memories. "Could the accumulation of these voices and words be the forming substances of Gezi Spirit?"
|
|
<br>
|
|
Through the map, we give shape to a common context in Turkish culture. The map 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. </p>
|
|
|
|
</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><h2>How to use</h2><p>
|
|
The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary. Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.<br>
|
|
When double clicking, a name is isolated and displayed alongside its closest connections. <br>
|
|
When clickling once on one of the names, various kinds of media appear in connection to that name. The colors represent different categories (Folklore literature, Islamic Mysticism, etc).<br> All the elements of the map can be rearranged and moved. </p></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>
|
|
function popup_bg(time) {
|
|
var box = document.getElementById("audioBG");
|
|
if (box.paused) {
|
|
box.play();
|
|
};
|
|
box.currentTime = time;
|
|
};
|
|
</script>
|
|
<script>
|
|
var aud1= document.getElementById('audioBG');
|
|
var dur1= document.getElementById('dur1');
|
|
function mDur(dur,aud){dur.max= aud.duration};
|
|
function mPlay(dur,aud){dur.value=aud.currentTime};
|
|
function mSet(dur,aud){aud.currentTime=dur.value};
|
|
|
|
|
|
function playpause(podcast){
|
|
var myAudio = document.getElementById(podcast);
|
|
var myIcon = document.querySelector("."+podcast);
|
|
if (myAudio.paused) {
|
|
myIcon.className = podcast+" fa fa-pause";
|
|
myAudio.play();
|
|
} else {
|
|
myIcon.className = podcast+" fa fa-play";
|
|
myAudio.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>
|
|
|
|
|
|
|
|
function closevideo (){
|
|
$("#showvideo").hide()
|
|
$('iframe').each(function(index) {
|
|
$(this).attr('src', $(this).attr('src'));
|
|
return false;
|
|
});
|
|
}
|
|
|
|
|
|
$("#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>
|
|
|