< 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="https://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 >
< / head >
< body >
< div class = "container-fluid p-0" >
< div class = "bg" >
< div class = "row" >
< div class = "col-md-4" > < div id = "title_website" > < a href = "/" > Wells of Knowledge:< / a > < / div > < span id = "subtitle_website" > Poetry, music and resistance in Turkey< / span > < / div >
< div class = "col-md-3 offset-md-5" id = "menu" >
< 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 >
< / div >
< div id = "myModal" class = "modal fade" >
< div class = "modal-dialog" >
< div class = "modal-content" >
< div class = "modal-header" >
< h5 class = "modal-title" > This website is better viewed on desktop< / h5 >
< button type = "button" class = "close" data-dismiss = "modal" > × < / button >
< / div >
< div class = "modal-body" >
< p > Sorry for that.< / p >
< / div >
< / div >
< / div >
< / div >
< / div >
< div class = "row" >
<!-- background audio -->
< div class = "col-md-9" >
< div class = "row" >
< div class = "col-md-12" >
< br >
< div class = "map_legend" >
< div id = "box1" onclick = "popup_box('audio1','b1')" > < i class = "b1 fa fa-play" > < / i > < / div > < p > Folklore literature< / p >
< div id = "box2" onclick = "popup_box('audio2','b2')" > < i class = "b2 fa fa-play" aria-hidden = "true" > < / i > < / div > < p > Islamic Mysticism< / p >
< div id = "box3" onclick = "popup_box('audio3','b3')" > < i class = "b3 fa fa-play" aria-hidden = "true" > < / i > < / div > < p > Contemporary poets< / p >
< div id = "box4" > < i class = "box4 fa fa-play" aria-hidden = "true" > < / i > < / div > < p > Contemporary musicians< / p >
< / div >
< / div >
< / div >
< div class = "row" >
< div class = "col-md-5 col-sm-6 col-xs-6" >
< button onclick = "playpause('audioBG')" type = "button" name = "button" > < i class = "audioBG fa fa-play" > < / i > < / button >
< audio id = "audioBG"
preload="metadata" onloadedmetadata="mDur(dur1,audioBG)" ontimeupdate="mPlay(dur1,audioBG)">
< source src = "static/audio/HNI_Soundinstall_3tracks_together.webm" >
< / audio >
< input id = "dur1" type = "range" name = "rng" min = "0" step = "0.25" value = "0" onchange = "mSet(dur1,audioBG)" style = "width: 150px" >
< audio id = "audio1"
preload="metadata">
< source src = "static/audio/Hp_website_soundtracks_folklore.mp3" >
< / audio >
< audio id = "audio2"
preload="metadata">
< source src = "static/audio/Hp_website_soundtracks_islamicMystcism.mp3" >
< / audio >
< audio id = "audio3"
preload="metadata">
< source src = "static/audio/Hp_website_soundtracks_poets.mp3" >
< / audio >
< / 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-12" >
< 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 -->
< span id = "closeall" onclick = "closeall()" > CLOSE ALL POP-UPS< / span >
< div id = "showabout" class = "draggable" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < div > < h2 > About< / h2 > < p >
< p > This hybrid publication focuses on the transfer of knowledge through cultural production in the oral folkloric traditions of Anatolia. It consists of a poster-zine and online platform. The research was initiated to reflect on the Gezi Park Occupation (Istanbul, 2013) and tries to find the connecting points in history of politics through cultural production. By narrating the history of a specific geography, it invites the reader to question the influence of cultural heritage in the formation of one’s perception towards the world and ‘other’ people they share it with. < / p >
< p > The online platform acts as an active archival space that gives the possibility to revisit the elements in a non-linear historical approach focusing on the transference of oral knowledge through musical and poetic practices of story telling. The names you see on the map represent a wider group of artists, musicians, writers and thinkers that Kılıçer encountered through the process of her research. The online platform creates a well of accessible knowledge gathered mostly through open sources. Short bibliographic information about contributors of this knowledge and their proximity to or influence on other artists can be met through this online space that support the narration of the article ‘Wells of Knowledge: Poetry, Music and Resistance in Turkey’.< / p >
< p >
The platform is envisioned as an interactive, growing networked map that can create different narrative paths for the reader to navigate. The creation of this accumulation point is an invitation for a learning process both for the reader and researcher. The physical poster-zine holds a visual fragment of the research with a collage of old photographs and Kılıçer’s drawings originally produced for the installation piece “Volitional Volutions of the Volatile Waters” (2019). The audio tracks that accompany the map categories was also produced as part of the same installation piece. To reach more information about this work, you can visit: < a href = "https://mervekilicer.com/volitional-volutions-of-the-volatile-waters/" target = "_blank" > https://mervekilicer.com/volitional-volutions-of-the-volatile-waters/< / a >
< / p >
< p >
Credits for the sound track< / p >
< p >
< i > Körleşme / Going Blind< / i > < br >
poem by Gülten Akın< br >
Voice - Ulufer Çelik, Merve Kılıçer< / p >
< p > < i > Zaman Yer Sonra / Time Place After< / i > < br >
poem by Nilgün Marmara< br >
Voice - Ulufer Çelik< / p >
< p > < i > Anlatamam Derdimi / I Can’t Talk About My Suffering< / i > < br >
by Aşık Veysel< br >
in his own voice< / p >
< p >
< i > Geçer / Shall Pass< / i > < br >
by Neyzen Tevfik< br >
in his own voice< / p >
< p >
< i > Dere Akar Bulanık / The Stream Runs Blurry< / i > < br >
Ballad< br >
Sung by Sümeyra< / p >
< p > < i > Ömrüm Bitirmiş Viranemiyem /< / i > < br >
by Hz. Aşkî< br >
composed by Abdullah El Ferec English rendition: CISS/Rifai Sufi Order< / p >
< p >
< i > Sufism is Love of God< / i > < br >
Talk by Murat Coşkun< br >
The Canadian Institute of Sufi Studies< / p >
< p >
The voice and music of Sümeyra Çakır, Ali Ekber Çiçek, Derviş Abdullah Efendi, Neyzen Tevfik Bey, Gülce Oral, Viviana Fabiano, street performers from Berlin and Istanbul are sampled for the sound installation.< / p >
< p >
Poems and songs are translated with the collective effort of Ulufer Çelik, Merve Kılıçer, Gülce Oral, and Nihan Somay.< / p >
< / div >
< / div > < br >
< div id = "showcolophon" class = "draggable" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < div > < h2 > Colophon< / h2 >
< p >
Wells of Knowledge: Poetry, Music and Resistance in Turkey
© 2020 < a href = "at.wdka.nl/wellsofknowledge" target = "_blank" > at.wdka.nl/wellsofknowledge< / a > < / p >
< p >
Developed by Hybrid Publishing,
Willem de Kooning Academy< / p >
< p >
Text and images © Merve Kılıçer< br >
All rights reserved< / p >
< p > ISBN: 9789492479112< / p >
< p > Author: Merve Kılıçer< / p >
< p > Graphic Design & Web Development: Angeliki Diakrousi
(< a href = "https://w-i-t-m.net/" target = "_blank" > https://w-i-t-m.net/< / a > ) and Alice Strete (< a href = "https://alicestrete.me/" target = "_blank" > https://alicestrete.me/< / a > )< / p >
< p > Editor: Liz Allan< / p >
< p > Coordination: Kimmy Spreeuwenberg< / p >
< p > Details production poster-zine< br >
Printer: De Raddraaier, Amsterdam< br >
Paper: Old Mill/Bianco 100g< br >
Print Run: 300< / p >
< p > Thanks for the generous support of Nihan Somay, Jake Caleb,
Ulufer Çelik and Carmen José< / p >
< p > Hybrid Publishing< br >
This publication was developed by Hybrid Publishing, founded by
the Willem de Kooning Academy as a means of profiling and
disseminating outstanding research conducted by its students and
teaching staff, whether independently or in collaboration with
external partners. Researching and experimenting across a broad
range of processes native to digital and analog media, WdKA
Hybrid Publishing fosters novel approaches to design, authoring,
reading and dissemination made possible through ongoing
developments from the legacies of Gutenberg’s press to presentday
technologies. (< a href = "hybridpublishing.wdka.nl" target = "_blank" > hybridpublishing.wdka.nl< / a > )< / p >
< p > HP Research Awards< br >
The HP Research Awards series showcases the work of recipients
or nominees of the Willem de Kooning Research Award.
Established by the Willem de Kooning Foundation, the awards are
granted to outstanding students whose graduation projects and
research have helped provide new insights to broader audiences. For
a digital version of this and other publications, go to
< a href = "at.wdka.nl/hpresearchawards" target = "_blank" > at.wdka.nl/hpresearchawards< / a > < / p >
< img class = "logo" src = "static/images/HP_Logo.png" > < / img >
< img class = "logo" src = "static/images/wdka_logo.png" > < / img >
< img class = "logo" src = "static/images/pzi_logo.png" > < / img >
< / div >
< / div >
< div id = "showhow" class = "draggable" > < span onclick = "this.parentElement.style.display='none'" class = "topleft" > & times< / span > < div > < h2 > How to use< / h2 >
< p > This website is best displayed on a desktop, using the latest available Firefox version.< / 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 >
< p > 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).< / p >
< p > When double clicking, a name is isolated and displayed alongside its closest connections. < / p > < p > All the elements of the map can be rearranged and moved. < / p >
< p > Sections of the map legend double as audio players which allow you to navigate through the audio track. Click and explore.< / p >
< / div >
< / div >
< script src = "static/js/d3_map.js" > < / script >
< / div >
< div id = "nothesis" >
< div w3-include-html = "thesis.html" id = "thesis" class = "draggable thesis" >
< / div >
< / div >
< / div >
< / div >
< / div >
< script type = "text/javascript" >
$(document).ready(function() {
var a = 3;
var dragOpts = {
cursor: "move",
cursor: "grab",
distance: "0",
};
$('.draggable').draggable(
{
start: function(event, ui) { $(this).css('z-index', a++); }
});});
$(".draggable i.remove-elem").off('click').on("click", function(){
$(this).parent('.draggable').remove();
});
< / script >
<!-- scripts for mouse events -->
< script >
function popup_box(audioid,box){
var myIcon = document.querySelector("."+box);
var audio = document.getElementById(audioid);
if (audio.paused) {
myIcon.className = box+" fa fa-pause";
audio.play();
}else {
myIcon.className = box+" fa fa-play";
audio.pause();
}
}
< / 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;
});
}
function closebio(){
$("#showbio").hide()
}
function closethesis(){
$("#nothesis").hide()
}
function closeall(){
$("#showbio").hide()
$("#nothesis").hide()
$("#showvideo").hide()
$('iframe').each(function(index) {
$(this).attr('src', $(this).attr('src'));
return false;
});
$("#closeall").hide()
$("#showabout").hide()
$("#showcolophon").hide()
$("#showhow").hide()
}
function startaudio(){
var box = document.getElementById("audioBG");
box.currentTime=3384;
}
window.onload = startaudio();
$("#about").click(function(){
$("#showabout").fadeIn()
$("#closeall").fadeIn()
console.log("around")
});
$("#colophon").click(function(){
$("#showcolophon").fadeIn()
$("#closeall").fadeIn()
console.log("around")
});
$("#how").click(function(){
$("#showhow").fadeIn()
$("#closeall").fadeIn()
console.log("around")
});
< / script >
< script >
$(document).ready(function(){
if (screen.width < 768 ) {
$("#myModal").modal('show');
}
});
< / script >
< / div >
< / body >
< / html >
