unsuccesful try outs
This commit is contained in:
parent
95339fbc98
commit
a7840f331e
25
index.html
25
index.html
@ -23,14 +23,8 @@
|
|||||||
<div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
|
<div class="col-md-4"><div id="title_website">Wells of Knowledge</div></div>
|
||||||
<div class="col-md-3 offset-md-5" id="menu">
|
<div class="col-md-3 offset-md-5" id="menu">
|
||||||
<span id="about">
|
<span id="about">
|
||||||
<a href="#" >about</a> |
|
<a href="#" >about</a>
|
||||||
</span>
|
</span>
|
||||||
<span id="colophon">
|
|
||||||
<a href="#" >colophon</a> |
|
|
||||||
</span>
|
|
||||||
<span id="how">
|
|
||||||
<a href="#" >how to use</a>
|
|
||||||
</span>
|
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
@ -54,7 +48,7 @@
|
|||||||
<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
|
<button onclick="playpause('audioBG')" type="button" name="button"><i class="audioBG fa fa-play"></i></button>
|
||||||
<audio id="audioBG"
|
<audio id="audioBG"
|
||||||
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
|
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
|
||||||
<source src="static/audio/HNI_Soundinstall_3tracks_together.webm" type="audio/mpeg">
|
<source src="static/audio/HNI_Soundinstall_3tracks_together.webm">
|
||||||
</audio>
|
</audio>
|
||||||
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
|
<input id="dur1" type="range" name="rng" min="0" step="0.25" value="0" onchange="mSet(dur1,audioBG)" style="width: 150px">
|
||||||
</div>
|
</div>
|
||||||
@ -83,7 +77,6 @@ preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur
|
|||||||
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
|
<!-- <img src="static/images/test_small.jpeg" alt="poem"> -->
|
||||||
|
|
||||||
<!-- popups about and colophon -->
|
<!-- popups about and colophon -->
|
||||||
</div>
|
|
||||||
<div id="showabout" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div><h2>Wells of Knowledge</h2><p>
|
<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>
|
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?"
|
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?"
|
||||||
@ -139,7 +132,7 @@ Through the map, we give shape to a common context in Turkish culture. The map a
|
|||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div><h3>How to use</h3>
|
<div id="showhow" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">×</span><div><h2>How to use</h2>
|
||||||
<p>This website is best displayed on a desktop, using the latest available Firefox version.</p>
|
<p>This website is best displayed on a desktop, using the latest available Firefox version.</p>
|
||||||
<p>
|
<p>
|
||||||
The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</p>
|
The map shows connections between various representatives in Turkish culture, be it poets, authors or musicians, traditional or contemporary.</p> <p>Each name is presented in relation to a song, a poem, an image, or a fragment of text or audio.</p>
|
||||||
@ -148,15 +141,23 @@ Through the map, we give shape to a common context in Turkish culture. The map a
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
<script src="static/js/d3_map.js"></script>
|
<script src="static/js/d3_map.js"></script>
|
||||||
</div>
|
|
||||||
|
</div>
|
||||||
|
|
||||||
|
|
||||||
<div id="nothesis">
|
<div id="nothesis">
|
||||||
<div w3-include-html="thesis.html" id="thesis" class="draggable thesis">
|
<div w3-include-html="thesis.html" id="thesis" class="draggable thesis">
|
||||||
</div>
|
</div>
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
|
</div>
|
||||||
|
|
||||||
|
<span id="colophon">
|
||||||
|
<a href="#" >colophon</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
|
<span id="how">
|
||||||
|
<a href="#" >how to use</a>
|
||||||
|
</span>
|
||||||
|
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
|
@ -58,6 +58,7 @@ body {
|
|||||||
margin-right: 10px;
|
margin-right: 10px;
|
||||||
margin-left: 20px;
|
margin-left: 20px;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
|
|
||||||
/*border-top: 1px dashed #d81159;*/
|
/*border-top: 1px dashed #d81159;*/
|
||||||
}
|
}
|
||||||
@ -433,16 +434,37 @@ h2 {
|
|||||||
|
|
||||||
|
|
||||||
/* about and colophon */
|
/* about and colophon */
|
||||||
#menu {
|
/*#menu {
|
||||||
margin-top: 15px;
|
margin-top: 15px;
|
||||||
|
}*/
|
||||||
|
|
||||||
}
|
|
||||||
#about, #colophon, #how {
|
#about, #colophon, #how {
|
||||||
font-family:'Walter Turncoat', cursive;
|
font-family:'Walter Turncoat', cursive;
|
||||||
color: #d81159;
|
color: #d81159;
|
||||||
font-size: 16px;
|
font-size: 16px;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#colophon {
|
||||||
|
position: absolute;
|
||||||
|
left: 50px;
|
||||||
|
bottom:15px;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#how {
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
bottom:15px;
|
||||||
|
z-index: 5;
|
||||||
|
}
|
||||||
|
|
||||||
|
#about {
|
||||||
|
position: absolute;
|
||||||
|
right: 50px;
|
||||||
|
top:15px;
|
||||||
|
}
|
||||||
|
|
||||||
|
|
||||||
#about a {
|
#about a {
|
||||||
text-decoration: none;
|
text-decoration: none;
|
||||||
color: #d81159;
|
color: #d81159;
|
||||||
|
7
static/js/d3_map.js
vendored
7
static/js/d3_map.js
vendored
@ -13,6 +13,7 @@ var force = d3.layout.force()
|
|||||||
.size([width, height]);
|
.size([width, height]);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
d3.json("/static/js/group1.json", function(error, json) {
|
d3.json("/static/js/group1.json", function(error, json) {
|
||||||
if (error) throw error;
|
if (error) throw error;
|
||||||
|
|
||||||
@ -53,11 +54,10 @@ d3.json("/static/js/group1.json", function(error, json) {
|
|||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
var divVideo = d3.select("body").append("div").style("opacity", 1);
|
var divVideo = d3.select("body").append("div").style("opacity", 1);
|
||||||
var divBio = d3.select("body").append("div").style("opacity", 1);
|
var divBio = d3.select("body").append("div").style("opacity", 1);
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
node.on({
|
node.on({
|
||||||
"mouseover": function(d) {
|
"mouseover": function(d) {
|
||||||
d3.select(this).style("cursor", "pointer");
|
d3.select(this).style("cursor", "pointer");
|
||||||
@ -100,9 +100,6 @@ d3.json("/static/js/group1.json", function(error, json) {
|
|||||||
|
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
// highlight NodeLists//Toggle stores whether the highlighting is on
|
// highlight NodeLists//Toggle stores whether the highlighting is on
|
||||||
var toggle = 0;
|
var toggle = 0;
|
||||||
//Create an array logging what is connected to what
|
//Create an array logging what is connected to what
|
||||||
|
Loading…
Reference in New Issue
Block a user