added information

master
Angeliki 6 years ago
parent e552613abf
commit 10307c3a42

@ -3,7 +3,8 @@
<html> <html>
<head> <head>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@ -23,34 +24,31 @@ Filter by:
<!-- div vowels --> <!-- div vowels -->
<div id="resize" class="draggable ui-draggable-handle group_vowels pile1"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle group_vowels pile1"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile2"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="100%"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle group_vowels pile1"><a href="images/vowels-20190328-leeszaal.jpg"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile2"><a href="images/vowels-20190329-finearts.jpg" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-1.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-2.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-3.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-4.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-4.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile3"><a href="images/vowels-20190508-leeszaal-5.jpg" target="_blank"><img src="images/vowels-20190508-leeszaal-5.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_vowels pile4"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile4"><a href="images/vowels-20190523-leeszaal-1.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-1.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_vowels pile4"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile5"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile4"><a href="images/vowels-20190523-leeszaal-2.jpg" target="_blank"><img src="images/vowels-20190523-leeszaal-2.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_vowels pile5"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
@ -70,6 +68,8 @@ Filter by:
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/volkskrant-03.jpg" target="_blank"><img src="images/volkskrant-03.jpg" width="600px" /></a></div> <div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/volkskrant-03.jpg" target="_blank"><img src="images/volkskrant-03.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle group_extracts pile0"><a href="images/extracts-leeszaal-20190606.jpg" target="_blank"><img src="images/extracts-leeszaal-20190606.jpg" width="600px" /></a></div>
@ -77,102 +77,223 @@ Filter by:
<!-- div images --> <!-- div images -->
<div id="img" class="draggable ui-draggable-handle group_photos pile3"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile3"><img src="images/meeting-20190508_leeszaal.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-5.JPG" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile2" ><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile2" ><img src="images/meeting-20190329-finearts-2.JPG" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile2"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile2"><img src="images/meeting-20190329-finearts-1.JPG" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-1.JPG" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile1"><img src="images/meeting-20190328-leeszaal-2.JPG" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile2"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile2"><img class="draggable" style="width: 200px !important" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-1.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-1.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-2.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-2.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-3.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile4" ><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_photos pile4" ><a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-1.jpg" width="100%"></img></a></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-4.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div> <div id="img" class="draggable ui-draggable-handle group_photos pile4"><img src="images/meeting-20190523-leeszaal-5.jpg" width="100%"></img></div>
<div id="img" class="draggable ui-draggable-handle group_photos pile5"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div> <div id="img" class="draggable ui-draggable-handle group_photos pile5"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="100%"></img></a></div>
<!-- metadata for each workshop --> <!-- metadata for each workshop -->
<div class="draggable scaleable-wrapper box_metadata group_metadata pile1"> <div class="draggable scaleable-wrapper box_metadata group_metadata pile1">
<h2>Workshop 1</h2> <h2>Workshop 1</h2>
<li>Actions:<li> <li>Actions:</li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading <span class="tooltip-wrap">extracts <span class="tooltip-content-right">
1. Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio.<br />
2. Carson, A. (1996) The Gender of Sound, in Glass, Irony and God. First Edition edition. New York: New Directions, pp. 119142.</span></span>in random order
</li>
<li>Discussion on public voice</li> <li>Discussion on public voice</li>
<li>Transcribing vowels</li> <li>Transcribing the vowels of each other's sentences</li>
<li>Reading back the vowels</li>
<li>Reading outloud all together the score of vowels</li>
</ul>
<li>Equipment: </li>
<ul>
<li>Printed extracts</li>
<li>Audio recorder</li>
<li>Paper + pens</li>
</ul> </ul>
<li>Outcome: Score of vowels<li> <li>Outcome:</li>
<li>Date: 28/3/2019<li> <ul>
<li>Location: Leeszaal<li> <li>Audio recordings of the actions</li>
<li>Handwritten score of vowels</li>
</ul>
<li>Date: 28/3/2019</li>
<li>Location: Leeszaal, Rotterdam</li>
</div> </div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile2"><h2>Workshop 2</h2> <div class="draggable scaleable-wrapper box_metadata group_metadata pile2"><h2>Workshop 2</h2>
<li>Actions:<li> <li>Actions:</li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading <span class="tooltip-wrap">extracts <span class="tooltip-content-right">
1. Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio.<br />
2. Carson, A. (1996) The Gender of Sound, in Glass, Irony and God. First Edition edition. New York: New Directions, pp. 119142.</span></span>in random order
</li>
<li>Discussion on public voice</li> <li>Discussion on public voice</li>
<li>Transcribing vowels</li> <li>Transcribing the vowels of each other's sentences</li>
<li>Reading back the vowels</li>
<li>Reading outloud all together the score of vowels</li>
<li>Reading outloud all together the score of vowels in high-pitch</li>
</ul>
<li>Equipment: </li>
<ul>
<li>Printed extracts</li>
<li>Audio recorder</li>
<li>Paper + pens</li>
</ul>
<li>Outcome:</li>
<ul>
<li>Audio recordings of the actions</li>
<li>Handwritten score of vowels</li>
</ul> </ul>
<li>Outcome: Score of vowels<li> <li>Date: 29/3/2019</li>
<li>Date: 29/3/2019<li> <li>Location: Fine Arts/KDH, Rotterdam</li>
<li>Location: Fine Arts<li>
</div> </div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile3"><h2>Workshop 3</h2> <div class="draggable scaleable-wrapper box_metadata group_metadata pile3"><h2>Workshop 3</h2>
<li>Actions:<li> <li>Actions:</li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading <span class="tooltip-wrap">extracts <span class="tooltip-content-right">
1. Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio.<br />
2. Carson, A. (1996) The Gender of Sound, in Glass, Irony and God. First Edition edition. New York: New Directions, pp. 119142.</span></span>in random order
</li>
<li>Discussion on public voice</li> <li>Discussion on public voice</li>
<li>Transcribing vowels</li> <li>Transcribing the vowels of each other's sentences</li>
<li>Reading outloud all together back the vowels for each person</li>
</ul>
<li>Equipment: </li>
<ul>
<li>Printed extracts</li>
<li>Audio recorder</li>
<li>Paper + pens</li>
</ul>
<li>Outcome:</li>
<ul>
<li>Audio recordings of the actions</li>
<li>Handwritten scores of vowels</li>
</ul> </ul>
<li>Outcome: Score of vowels<li> <li>Date: 8/5/2019</li>
<li>Date: 08/5/2019<li> <li>Location: Leeszaal, Rotterdam</li>
<li>Location: Leeszaal<li>
</div> </div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile4"><h2>Workshop 4</h2> <div class="draggable scaleable-wrapper box_metadata group_metadata pile4"><h2>Workshop 4</h2>
<li>Actions:<li> <li>Actions:</li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading <span class="tooltip-wrap">extracts <span class="tooltip-content-right">
1. Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio.<br />
2. Carson, A. (1996) The Gender of Sound, in Glass, Irony and God. First Edition edition. New York: New Directions, pp. 119142.</span></span>in random order
</li>
<li>Discussion on public voice</li> <li>Discussion on public voice</li>
<li>Transcribing vowels</li> <li>Transcribing the vowels of each other's sentences</li>
<li>Reading back the vowels</li>
<li>Reading outloud all together the score of vowels</li>
<li>Speaking about personal experiences</li>
<li>Listen back our <span class="tooltip-wrap">distorted voices<span class="tooltip-content-right">The voices were electronically distorted from female to male (high-pitch to low-pitch) with a bash script<br />
<pre>
#!/bin/bash
today=$(date +%Y%m%d-%H%M);
output=${1:-distort}
arecord -Dpulse -f cd normal_$today.wav
rubberband -t 1.5 -p -5.5 normal_$today.wav ${output}_$today.wav
mkdir -p "normal"
mv -v normal_$today.wav normal/normal_$today.wav;
</pre>
</span></span>
</li>
</ul> </ul>
<li>Outcome: Score of vowels<li> <li>Equipment: </li>
<li>Date: 23/5/2019<li> <ul>
<li>Location: Leeszaal<li> <li>Printed extracts</li>
<li>Audio recorder</li>
<li>Paper + pens</li>
<li>Microphone</li>
<li>Small speaker</li>
</ul>
<li>Outcome:</li>
<ul>
<li>Audio recordings of the actions</li>
<li>Videp recordings of the actions</li>
<li>Handwritten score of vowels</li>
</ul>
<li>Date: 23/5/2019</li>
<li>Location: outside of Leeszaal, Rotterdam</li>
</div> </div>
<div class="draggable scaleable-wrapper box_metadata group_metadata pile5"><h2>Workshop 5</h2> <div class="draggable scaleable-wrapper box_metadata group_metadata pile5"><h2>Workshop 5</h2>
<li>Actions:<li> <li>Actions:</li>
<ul> <ul>
<li>Reading extracts</li> <li>Reading <span class="tooltip-wrap">extracts <span class="tooltip-content-right">
1. Ballout, D. (2019) Good Morning, Kafranbel, This American Life: Wartime Radio.<br />
2. Carson, A. (1996) The Gender of Sound, in Glass, Irony and God. First Edition edition. New York: New Directions, pp. 119142.</span></span>in random order
</li>
<li>Discussion on public voice</li> <li>Discussion on public voice</li>
<li>Transcribing vowels</li> <li>Transcribing the vowels of each other's sentences</li>
<li>Reading back the vowels</li>
<li>Reading outloud all together the score of vowels</li>
<li>Speaking like "men"</li>
<li>Listen back our <span class="tooltip-wrap">distorted voices<span class="tooltip-content-right">The voices were electronically distorted from female to male (high-pitch to low-pitch) with a bash script and vice versa<br />
<pre>
#!/bin/bash
today=$(date +%Y%m%d-%H%M);
output=${1:-distort}
arecord -Dpulse -f cd normal_$today.wav
rubberband -t 1.5 -p -5.5 normal_$today.wav ${output}_$today.wav
mkdir -p "normal"
mv -v normal_$today.wav normal/normal_$today.wav;
</pre><br />
<pre>
#!/bin/bash
today=$(date +%Y%m%d-%H%M)
output=${1:-distort}
arecord -Dpulse -f cd normal_$today.wav
rubberband -t 1.5 -p 3.0 normal_$today.wav ${output}_$today.wav
mkdir -p "storage"
mv -v normal_$today.wav storage/
ffmpeg -i ${output}_$today.wav -vn -ar 44100 -ac 2 -ab 192k -f mp3 ${output}_$today.mp3
mv -v ${output}_$today.wav storage/
</pre>
</span></span>
</li>
</ul> </ul>
<li>Outcome: Score of vowels<li> <li>Equipment: </li>
<li>Date: 30/5/2019<li> <ul>
<li>Location: Leeszaal<li> <li>Printed extracts</li>
<li>Audio recorder</li>
<li>Paper + pens</li>
<li>Microphone</li>
<li>Small speaker</li>
<li>Food</li>
</ul>
<li>Outcome:</li>
<ul>
<li>Audio recordings of the actions</li>
<li>Videp recordings of the actions</li>
<li>Handwritten score of vowels</li>
</ul>
<li>Date: 30/5/2019</li>
<li>Location: Leeszaal, Rotterdam</li>
<li>Other: Part of <span class="tooltip-wrap">Women@Art<span class="tooltip-content-right">A series of workshops dedicated to 'wereldvrouwen', a group of women around the world. They meet every Wednesday at Leeszaal</span></span><li>
</div> </div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper active-draggable" style="width: 500px; top: 20px; right: 0px;"> <div class="draggable scaleable-wrapper active-draggable" style="top:1%; right:0.5%;">
<h2><a class="active" href="amplification.php">Amplification of female voices</a></h2> <h2><a class="active" href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/amplification.txt'; ?> <?php include 'texts/amplification.txt'; ?>
@ -186,7 +307,7 @@ Filter by:
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper group_menu pileM"> <div class="draggable scaleable-wrapper group_menu pileM">
<h2 ><a href="player.php group_menu pileM">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive) (audio archive)
</div> </div>
@ -231,14 +352,14 @@ groups()
function piles(){ function piles(){
var pileM_position=[1800,900] var pileM_position=[1300,900]
$(".pileM").each(function(i){ $(".pileM").each(function(i){
$(this).css({"top":i*60+pileM_position[1],"left":i*20+pileM_position[0]}) $(this).css({"top":i*60+pileM_position[1],"left":i*20+pileM_position[0]})
}) })
var pile0_position=[30,2500] var pile0_position=[30,2500]
$(".pile0").each(function(i){ $(".pile0").each(function(i){
$(this).css({"top":pile0_position[1],"left":i*300+pile0_position[0]}) $(this).css({"top":pile0_position[1],"left":i*80+pile0_position[0]})
}) })
var pile1_position=[30,300] var pile1_position=[30,300]
@ -251,18 +372,18 @@ function piles(){
$(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]}) $(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]})
}) })
var pile3_position=[900,850] var pile3_position=[700,750]
$(".pile3").each(function(i){ $(".pile3").each(function(i){
$(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]}) $(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]})
}) })
var pile4_position=[1600,1600] var pile4_position=[1200,1600]
$(".pile4").each(function(i){ $(".pile4").each(function(i){
$(this).css({"top":i*distance+pile4_position[1],"left":i*distance+pile4_position[0]}) $(this).css({"top":i*distance+pile4_position[1],"left":i*distance+pile4_position[0]})
}) })
var pile5_position=[1000,100] var pile5_position=[800,100]
$(".pile5").each(function(i){ $(".pile5").each(function(i){
$(this).css({"top":i*distance+pile5_position[1],"left":i*distance+pile5_position[0]}) $(this).css({"top":i*distance+pile5_position[1],"left":i*distance+pile5_position[0]})
}) })
@ -277,7 +398,7 @@ function piles(){
function groups(){ function groups(){
var group_vowels_position=[800,100] var group_vowels_position=[700,100]
$(".group_vowels").each(function(i){ $(".group_vowels").each(function(i){
$(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]}) $(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]})
}) })
@ -292,12 +413,12 @@ function groups(){
$(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]}) $(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]})
}) })
var group_metadata_position=[1000,1000] var group_metadata_position=[800,1000]
$(".group_metadata").each(function(i){ $(".group_metadata").each(function(i){
$(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]}) $(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]})
}) })
var group_menu_position=[1800,900] var group_menu_position=[1300,900]
$(".group_menu").each(function(i){ $(".group_menu").each(function(i){
$(this).css({"top":i*60+group_menu_position[1],"left":i*20+group_menu_position[0]}) $(this).css({"top":i*60+group_menu_position[1],"left":i*20+group_menu_position[0]})
}) })

@ -3,68 +3,33 @@
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/draggable.js"></script> <script src="js/draggable.js"></script>
<title>Diary of West Rotterdam</title> <title>Diary of West Rotterdam</title>
<h2>Diary of West Rotterdam</h2><p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9843.857515609021!2d4.4669618!3d51.916361!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c434a28540a933%3A0xd4069914bf04d83c!2sReading+Rotterdam+West!5e0!3m2!1sen!2snl!4v1554025281791!5m2!1sen!2snl" align="right" width="300" height="1300px" frameborder="0" style="border:0" allowfullscreen></iframe></p> <p><iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d9843.857515609021!2d4.4669618!3d51.916361!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x47c434a28540a933%3A0xd4069914bf04d83c!2sReading+Rotterdam+West!5e0!3m2!1sen!2snl!4v1554025281791!5m2!1sen!2snl" align="right" width="300" height="1300px" frameborder="0" style="border:0" allowfullscreen></iframe></p>
</head> </head>
<body> <body>
<!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="width: 500px; top: 20px; right: 0px;">
<h2><a href="amplification.php">Amplification of female voices</a></h2>
</div>
<div class="draggable scaleable-wrapper active-draggable" style="top: 1270px; right: 200px;">
<h2 ><a class="active" href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
<?php include 'texts/diary.txt'; ?>
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
<h2 ><a href="index.php">About</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;"> <div id="resize" class="draggable ui-draggable-handle"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<!-- end draggable menu-->
<div id="resize" class="draggable ui-draggable-handle"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="100%"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
<div class="draggable" style="position:absolute; top:6%; left:5%;width:1800px;"> <div class="draggable" style="position:absolute; top:6%; left:5%;width:80%;">
<audio controls > <audio controls >
<source src="audio/20190122-track-extracts.mp3" type="audio/mpeg"> <source src="audio/20190122-track-extracts.mp3" type="audio/mpeg">
</audio> </audio>
<div class="tooltip-wrap" style="display: inline;text-decoration:underline;"> <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">
<a href="images/20190122-track-annotated-2.png" alt="annotated_track" target="_blank"> <a href="images/20190122-track-annotated-2.png" alt="annotated_track" target="_blank">
<img src="images/20190122-track-annotated-2.png" alt="annotated_track" style="width:1800px;"> <img src="images/20190122-track-annotated-2.png" alt="annotated_track" style="width:100%;">
</a> </a>
<div class="tooltip-content-right" >22-1-2019<object height="250px" width="400px" data="texts/20190122_Label_Track.txt"></object> <div class="tooltip-content-right" >22-1-2019<object height="250px" width="400px" data="texts/20190122_Label_Track.txt"></object>
</div> </div>
@ -72,26 +37,26 @@
</div> </div>
<div class="draggable" style="position:absolute; top:40%; left:5%;width:1800px;"> <div class="draggable" style="position:absolute; top:40%; left:5%;width:80%;">
<audio controls > <audio controls >
<source src="audio/20190123-track-extracts.mp3" type="audio/mpeg"> <source src="audio/20190123-track-extracts.mp3" type="audio/mpeg">
</audio> </audio>
<div class="tooltip-wrap" style="display: inline;text-decoration:underline;"> <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">
<a href="images/20190123-track-annotated.png" alt="annotated_track" target="_blank"> <a href="images/20190123-track-annotated.png" alt="annotated_track" target="_blank">
<img src="images/20190123-track-annotated.png" alt="annotated_track" style="width:1800px;"> <img src="images/20190123-track-annotated.png" alt="annotated_track" style="width:100%;">
</a> </a>
<div class="tooltip-content-right" >23-1-2019<object height="250px" width="400px" data="texts/20190123_Label_Track.txt"></object> <div class="tooltip-content-right" >23-1-2019<object height="250px" width="400px" data="texts/20190123_Label_Track.txt"></object>
</div> </div>
</div> </div>
</div> </div>
<div class="draggable" style="position:absolute; top:60%; left:5%;width:1800px;"> <div class="draggable" style="position:absolute; top:60%; left:5%;width:80%;">
<audio controls > <audio controls >
<source src="audio/20190128-track-extracts.mp3" type="audio/mpeg"> <source src="audio/20190128-track-extracts.mp3" type="audio/mpeg">
</audio> </audio>
<div class="tooltip-wrap" style="display: inline;text-decoration:underline;"> <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">
<a href="images/20190128-track-annotated.png" alt="annotated_track" target="_blank"> <a href="images/20190128-track-annotated.png" alt="annotated_track" target="_blank">
<img src="images/20190128-track-annotated.png" alt="annotated_track" style="width:1800px;"> <img src="images/20190128-track-annotated.png" alt="annotated_track" style="width:100%;">
</a> </a>
<div class="tooltip-content-right" >28-1-2019<object height="250px" width="400px" data="texts/20190128_Label_Track.txt"></object> <div class="tooltip-content-right" >28-1-2019<object height="250px" width="400px" data="texts/20190128_Label_Track.txt"></object>
</div> </div>
@ -99,7 +64,7 @@
</div> </div>
<div class="draggable" style="position:absolute; top:80%; left:5%;width:800px;"> <div class="draggable" style="position:absolute; top:80%; left:5%;width:20%;">
<audio controls > <audio controls >
<source src="audio/20190130_171657 WiFi scanning.mp3" type="audio/mpeg"> <source src="audio/20190130_171657 WiFi scanning.mp3" type="audio/mpeg">
</audio> </audio>
@ -111,13 +76,52 @@
<p>Tracking private places. Relations of street names, sounds of that time and wifi names around</p> <p>Tracking private places. Relations of street names, sounds of that time and wifi names around</p>
</div> </div>
<div class="draggable" style="position:absolute; top:90%; left:5%;width:800px;"> <div class="draggable" style="position:absolute; top:90%; left:5%;width:20%">
<audio controls > <audio controls >
<source src="audio/20190205-track-extracts.wav" type="audio/mpeg"> <source src="audio/20190205-track-extracts.wav" type="audio/mpeg">
</audio> </audio>
5-2-2019 5-2-2019
</div> </div>
<!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top: 20px; right: 0px;">
<h2><a href="amplification.php">Amplification of female voices</a></h2>
</div>
<div class="draggable scaleable-wrapper active-draggable" style="top: 1270px; right: 200px;">
<h2 ><a class="active" href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
<?php include 'texts/diary.txt'; ?>
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
<h2 ><a href="index.php">About</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2>
</div>
<div class="draggable scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;">
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
</div>
<!-- end draggable menu-->
</body> </body>
</html> </html>

@ -4,7 +4,8 @@
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="js/jquery.min.js"></script> <script type="text/javascript" src="js/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
@ -21,7 +22,7 @@
<div style="top: 50%; left:50%;margin-top: -50px;margin-left: -50px;width: 700px; position: absolute;"> <div style="top: 50%; left:50%;margin-top: -50px;margin-left: -50px;width: 700px; position: absolute;">
<img src="images/speaker_logo3.png" width="130px"> <img src="images/speaker_logo3.png" width="130px">
<h1 style="color: #A19696;">Let's <span style="font-style: italic;color:black !important;">amplify</span> unspeakable things <p style="font-size: 25px !important;">overlayered utterances</p></h1> <h1 style="color: #A19696;">Let's <span style="font-style: italic;color:black !important;">amplify</span> unspeakable things</h1>
</div> </div>
<!-- (the unfolding/overlayering of) --> <!-- (the unfolding/overlayering of) -->
@ -30,44 +31,44 @@
<div class="draggable scaleable-wrapper" style="top:12%;left:55%;width: 500px;"> <div class="draggable scaleable-wrapper" style="top:8%;left:58%;width: 23%;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/carson-list.jpg" style="width: 100%"></img><div class="tooltip-content-right" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div> <div class="tooltip-wrap" style="text-decoration:underline;"> <img src="images/carson-list.jpg" style="width: 100%;"></img><div class="tooltip-content-right" style="min-width: 40% !important;" ><div>this is how female/high-pitched voices have been described since acient times as Anne Carson observes</div></div></div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 0%; right: 67%;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 0%; right: 67%;width: 10%;">
<h2 style="font-size: 26px;"><a href="podcast1.php" >Podcast1</a></h2> <h2 style="font-size: 110%;"><a href="podcast1.php" >Podcast1</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast1.txt'; ?> <?php include 'texts/podcast1.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top:3%;left:72%; width: 500px; font-size: 20px"> <div class="draggable scaleable-wrapper"style="top:3%;left:72%; width: 25%; font-size: 100%">
<h2 style="font-size: 36px;"><a href="amplification.php" >Amplification of female voices</a></h2> <h2 style="font-size: 120%;"><a href="amplification.php" >Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/amplification.txt'; ?> <?php include 'texts/amplification.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 70%; right: 10%;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 70%; right: 10%;width: 10%;">
<h2 style="font-size: 26px;"><a href="podcast2.php" >Podcast2</a></h2> <h2 style="font-size: 110%;"><a href="podcast2.php" >Podcast2</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast2.txt'; ?> <?php include 'texts/podcast2.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 80%; right: 30%;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 80%; right: 30%;width: 10%;">
<h2 style="font-size: 26px;"><a href="podcast3.php" >Podcast3</a></h2> <h2 style="font-size: 110%;"><a href="podcast3.php" >Podcast3</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast3.txt'; ?> <?php include 'texts/podcast3.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top: 85%; right: 23%;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 85%; right: 23%;width: 10%;">
<h2 style="font-size: 26px;"><a href="podcast4.php" >Podcast4</a></h2> <h2 style="font-size: 110%;"><a href="podcast4.php" >Podcast4</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/podcast4.txt'; ?> <?php include 'texts/podcast4.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper"style="top:75%;left:41%;width: 200px; font-size: 14px;"> <div class="draggable scaleable-wrapper"style="top:75%;left:41%;width: 12%; font-size: 80%;">
<h2 style="font-size: 20px;"><a href="diary.php" >Diary of West Rotterdam</a></h2> <h2 style=";"><a href="diary.php" >Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/diary.txt'; ?> <?php include 'texts/diary.txt'; ?>
</div></div> </div></div>
@ -75,7 +76,7 @@
<div class="draggable scaleable-wrapper"style="top:8%;left:35%"> <div class="draggable scaleable-wrapper"style="top:5%;left:35%">
<h2 ><a href="player.php" >Player</a></h2> <h2 ><a href="player.php" >Player</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/player.txt'; ?> <?php include 'texts/player.txt'; ?>
@ -83,14 +84,14 @@
</div> </div>
<div class="draggable scaleable-wrapper active-draggable" style="top:18%;left:6%;" > <div class="draggable scaleable-wrapper active-draggable" style="top:18%;left:6%;" >
<h2 style="font-size: 44px"><a class="active" href="index.php" >About</a></h2> <h2><a class="active" href="index.php" >About</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/about.txt'; ?> <?php include 'texts/about.txt'; ?>
</div> </div>
</div> </div>
<!-- colophon --> <!-- colophon -->
<div class="draggable scaleable-wrapper box_metadata" style="top:81%;left:5%;" > <div class="draggable scaleable-wrapper box_metadata" style="top:81%;left:3%;" >
<h2>Colophon</h2> <h2>Colophon</h2>
<li>This work has been produced in the context of the graduation research of Angeliki Diakrousi from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</li> <li>This work has been produced in the context of the graduation research of Angeliki Diakrousi from the Experimental Publishing (XPUB) Master course at the Piet Zwart Institute, Willem de Kooning Academy, Rotterdam University of Applied Sciences.</li>
<li>XPUB is a two year Master of Arts in Fine Art and Design that focuses on the intents, means and consequences of making things public and creating publics in the age of post-digital networks.</li> <li>XPUB is a two year Master of Arts in Fine Art and Design that focuses on the intents, means and consequences of making things public and creating publics in the age of post-digital networks.</li>

@ -1,7 +1,8 @@
<html lang="en"> <html lang="en">
<head> <head>
<meta charset="utf-8"> <meta charset="utf-8">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@ -26,7 +27,7 @@
<!-- links --> <!-- links -->
<div class="draggable box_metadata" style="width: 500px !important"> <div class="draggable box_metadata" style="top: 110%; left:40%; width: 500px !important">
<h2>Online Sources</h2> <h2>Online Sources</h2>
<li id="angela"> <li id="angela">
<a href="#" >Angela Davis @Occupy Wall Street</a> <a href="#" >Angela Davis @Occupy Wall Street</a>
@ -82,186 +83,186 @@ $("#katalin").click(function(){
<section> <section>
<div class="draggable" style="position:absolute; top:6%; left:51%;width: 270px"> <div class="draggable" style="position:absolute; top:6%; left:51%;width: 13%">
<audio controls src="audio/leeszaal-meetings-warming.mp3"></audio> <audio controls src="audio/leeszaal-meetings-warming.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190328-leeszaal-6.jpg" target="_blank"> <a href="images/meeting-20190328-leeszaal-6.jpg" target="_blank">
<img src="images/meeting-20190328-leeszaal-6.jpg" width="270px"> <img src="images/meeting-20190328-leeszaal-6.jpg" style="width:100%">
</a> </a>
<p>warming up @Leeszaal 28/3</p> <p>warming up @Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:10%; left:48%;width: 270px"> <div class="draggable" style="position:absolute; top:10%; left:48%;width: 13%">
<audio controls src="audio/leeszaal-discussing-20190530.mp3"></audio> <audio controls src="audio/leeszaal-discussing-20190530.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190530-leeszaal-4.jpg" target="_blank"> <a href="images/meeting-20190530-leeszaal-4.jpg" target="_blank">
<img src="images/meeting-20190530-leeszaal-4.jpg" width="270px"> <img src="images/meeting-20190530-leeszaal-4.jpg" style="width:100%">
</a> </a>
<p>discussing about voice in public @Leeszaal 30/5</p> <p>discussing about voice in public @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:16%; left:55%;width: 270px"> <div class="draggable" style="position:absolute; top:16%; left:55%;width: 13%">
<audio controls src="audio/leeszaal-meeting-transcribing-20190508.mp3"></audio> <audio controls src="audio/leeszaal-meeting-transcribing-20190508.mp3" class="audio-tag"></audio>
<a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank"> <a href="images/vowels-20190508-leeszaal-3.jpg" target="_blank">
<img src="images/vowels-20190508-leeszaal-3.jpg" width="270px"> <img src="images/vowels-20190508-leeszaal-3.jpg" style="width:100%">
</a> </a>
<p>trascribing+singing vowels @Leeszaal 3/5</p> <p>trascribing+singing vowels @Leeszaal 3/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:15%; left:41%; width: 270px"> <div class="draggable" style="position:absolute; top:15%; left:41%; width: 13%">
<audio controls src="audio/leeszaal-meeting-extracts-20190523.mp3"></audio> <audio controls src="audio/leeszaal-meeting-extracts-20190523.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190523-leeszaal-6.jpg" target="_blank"> <a href="images/meeting-20190523-leeszaal-6.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-6.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-6.jpg" style="width:100%">
</a> </a>
<p>reading extracts @outside Leeszaal 23/5</p> <p>reading extracts @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:18%; left:37%; width: 270px"> <div class="draggable" style="position:absolute; top:18%; left:37%; width: 13%">
<audio controls src="audio/leeszaal-meetings-choir.mp3"></audio> <audio controls src="audio/leeszaal-meetings-choir.mp3" class="audio-tag"></audio>
<a href="images/vowels-20190328-leeszaal.jpg" target="_blank"> <a href="images/vowels-20190328-leeszaal.jpg" target="_blank">
<img src="images/vowels-20190328-leeszaal.jpg" width="270px"> <img src="images/vowels-20190328-leeszaal.jpg" style="width:100%">
</a> </a>
<p>singing vowels @outside Leeszaal 28/3</p> <p>singing vowels @outside Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:20%; left:63%;width: 270px"> <div class="draggable" style="position:absolute; top:20%; left:63%;width: 13%">
<audio controls src="audio/leeszaal-meeting-warming-20190523.mp3"></audio> <audio controls src="audio/leeszaal-meeting-warming-20190523.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190523-leeszaal-7.jpg" target="_blank"> <a href="images/meeting-20190523-leeszaal-7.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-7.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-7.jpg" style="width:100%">
</a> </a>
<p>warming up @outside Leeszaal 23/5</p> <p>warming up @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:23%; left:66%;width: 270px"> <div class="draggable" style="position:absolute; top:23%; left:66%;width: 13%">
<audio controls src="audio/distort_leeszaal_20190523-1341.mp3" ></audio> <audio controls src="audio/distort_leeszaal_20190523-1341.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-2.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-2.jpg" style="width:100%">
</a> </a>
<p>personal experiences-distorted voice @outside Leeszaal 23/5</p> <p>personal experiences-distorted voice @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:27%; left:68%;width: 270px"> <div class="draggable" style="position:absolute; top:27%; left:68%;width: 13%">
<audio controls src="audio/leeszaal-extracts-20190530.mp3" ></audio> <audio controls src="audio/leeszaal-extracts-20190530.mp3" class="audio-tag"></audio>
<a href="images/fresh1.jpg" target="_blank"> <a href="images/fresh1.jpg" target="_blank">
<img src="images/fresh1.jpg" width="270px"> <img src="images/fresh1.jpg" style="width:100%">
</a> </a>
<p>reading extracts @Leeszaal 30/5</p> <p>reading extracts @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:32%; left:70%;width: 270px"> <div class="draggable" style="position:absolute; top:32%; left:70%;width: 13%">
<audio controls src="audio/finearts-meeting-discussion.mp3"></audio> <audio controls src="audio/finearts-meeting-discussion.mp3" class="audio-tag"></audio>
<a href="" target="_blank"><img src="images/meeting-20190329-finearts-1.JPG" width="270px" /></a> <a href="" target="_blank"><img src="images/meeting-20190329-finearts-1.JPG" style="width:100%" /></a>
<p>discussing about voice in public @Fine Arts 29/3</p> <p>discussing about voice in public @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:36%; left:73%;width: 270px"> <div class="draggable" style="position:absolute; top:36%; left:73%;width: 13%">
<audio controls src="audio/leeszaal-meeting-warming-20190508.mp3"></audio> <audio controls src="audio/leeszaal-meeting-warming-20190508.mp3" class="audio-tag"></audio>
<a href="" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="270px" /></a> <a href="" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" style="width:100%" /></a>
<p>warming up @Leeszaal 8/5</p> <p>warming up @Leeszaal 8/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:42%; left:75%;width: 270px"> <div class="draggable" style="position:absolute; top:42%; left:75%;width: 13%">
<audio controls src="audio/leeszaal-meetings-transcribing.mp3"></audio> <audio controls src="audio/leeszaal-meetings-transcribing.mp3" class="audio-tag"></audio>
<a href="" target="_blank"><img src="images/meeting-20190328-leeszaal-1.JPG" width="270px" /></a> <a href="" target="_blank"><img src="images/meeting-20190328-leeszaal-1.JPG" style="width:100%" /></a>
<p>transcribing vowels @Leeszaal 28/3</p> <p>transcribing vowels @Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:47%; left:74%;width: 270px"> <div class="draggable" style="position:absolute; top:47%; left:74%;width: 13%">
<audio controls src="audio/leeszaal-warming-20190530.mp3"></audio> <audio controls src="audio/leeszaal-warming-20190530.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="270px" /></a> <a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" style="width:100%" /></a>
<p>warming up @Leeszaal 30/5</p> <p>warming up @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:55%; left:73%;width: 270px"> <div class="draggable" style="position:absolute; top:55%; left:73%;width: 13%">
<audio controls src="audio/finearts-meeting-choir.mp3"></audio> <audio controls src="audio/finearts-meeting-choir.mp3" class="audio-tag"></audio>
<a href="" target="_blank"><img src="images/vowels-20190329-finearts.jpg" width="270px" /></a> <a href="" target="_blank"><img src="images/vowels-20190329-finearts.jpg" style="width:100%" /></a>
<p>singing vowels @Fine Arts 29/3</p> <p>singing vowels @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:59%; left:71%;width: 270px"> <div class="draggable" style="position:absolute; top:59%; left:71%;width: 13%">
<audio controls src="audio/leeszaal-coffee-20190530.mp3"></audio> <audio controls src="audio/leeszaal-coffee-20190530.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190530-leeszaal-3.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-3.jpg" width="270px" /></a> <a href="images/meeting-20190530-leeszaal-3.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-3.jpg" style="width:100%" /></a>
<p>coffee time @Leeszaal 30/5</p> <p>coffee time @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:65%; left:70%;width: 270px"> <div class="draggable" style="position:absolute; top:65%; left:70%;width: 13%">
<audio controls src="audio/distort_leeszaal_20190523-1336.mp3" ></audio> <audio controls src="audio/distort_leeszaal_20190523-1336.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190523-leeszaal-1.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-1.jpg" style="width:100%">
</a> </a>
<p>singing vowels-distorted voice @outside Leeszaal 23/5</p> <p>singing vowels-distorted voice @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:23%; left:32%;width: 270px"> <div class="draggable" style="position:absolute; top:23%; left:32%;width: 13%">
<audio controls src="audio/finearts-meeting-transcribing.mp3"></audio> <audio controls src="audio/finearts-meeting-transcribing.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190329-finearts-2.JPG" width="270px" /> <img src="images/meeting-20190329-finearts-2.JPG" style="width:100%" />
</a> </a>
<p>transcribing vowels @Fine Arts 29/3</p> <p>transcribing vowels @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:27%; left:29%; width: 270px"> <div class="draggable" style="position:absolute; top:27%; left:29%; width: 13%">
<audio controls src="audio/finearts-meeting-extracts.mp3"></audio> <audio controls src="audio/finearts-meeting-extracts.mp3" class="audio-tag"></audio>
<a href="images/carson-extract.jpg" target="_blank"> <a href="images/carson-extract.jpg" target="_blank">
<img src="images/carson-extract.jpg" width="270px" /> <img src="images/carson-extract.jpg" style="width:100%" />
</a> </a>
<p>reading extracts @Fine Arts 29/3</p> <p>reading extracts @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:33%; left:26%;width: 270px;"> <div class="draggable" style="position:absolute; top:33%; left:26%;width: 13%;">
<audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3"></audio> <audio controls src="audio/leeszaal-meeting-transcribing-20190523.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190523-leeszaal-4.jpg" target="_blank"> <a href="images/meeting-20190523-leeszaal-4.jpg" target="_blank">
<img src="images/meeting-20190523-leeszaal-4.jpg" width="270px"> <img src="images/meeting-20190523-leeszaal-4.jpg" style="width:100%">
</a> </a>
<p>transcribing vowels @outside Leeszaal 23/5</p> <p>transcribing vowels @outside Leeszaal 23/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:38%; left:27%;width: 270px;"> <div class="draggable" style="position:absolute; top:38%; left:27%;width: 13%;">
<audio controls src="audio/leeszaal-sentenses-distorted-20190530.mp3"></audio> <audio controls src="audio/leeszaal-sentenses-distorted-20190530.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank"> <a href="images/meeting-20190530-leeszaal-1.jpg" target="_blank">
<img src="images/meeting-20190530-leeszaal-1.jpg" width="270px"> <img src="images/meeting-20190530-leeszaal-1.jpg" style="width:100%">
</a> </a>
<p>statements- distorted voice @Leeszaal 30/5</p> <p>statements- distorted voice @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:46%; left:28%; width: 270px"> <div class="draggable" style="position:absolute; top:46%; left:28%; width: 13%">
<audio controls src="audio/leeszaal-meetings-discussion.mp3"></audio> <audio controls src="audio/leeszaal-meetings-discussion.mp3" class="audio-tag"></audio>
<a href="" target="_blank"> <a href="" target="_blank">
<img src="images/meeting-20190328-leeszaal-2.JPG" width="270px" /></a> <img src="images/meeting-20190328-leeszaal-2.JPG" style="width:100%" /></a>
<p>discussing about voice in public @Leeszaal 28/3</p> <p>discussing about voice in public @Leeszaal 28/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:51%; left:29%; width: 270px"> <div class="draggable" style="position:absolute; top:51%; left:29%; width: 13%">
<audio controls src="audio/leeszaal-singing-distorted-20190530.mp3"></audio> <audio controls src="audio/leeszaal-singing-distorted-20190530.mp3" class="audio-tag"></audio>
<a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank"> <a href="images/vowels-20190508-leeszaal-1.jpg" target="_blank">
<img src="images/vowels-20190508-leeszaal-1.jpg" width="270px" /></a> <img src="images/vowels-20190508-leeszaal-1.jpg" style="width:100%" /></a>
<p>singing vowels- distorted voice @Leeszaal 30/5</p> <p>singing vowels- distorted voice @Leeszaal 30/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:57%; left:30%;width: 270px;"> <div class="draggable" style="position:absolute; top:57%; left:30%;width: 13%;">
<audio controls src="audio/finearts-meeting-choirhigh.mp3"></audio> <audio controls src="audio/finearts-meeting-choirhigh.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190329-finearts-5.JPG" target="_blank"><img src="images/meeting-20190329-finearts-5.JPG" width="270px" /></a> <a href="images/meeting-20190329-finearts-5.JPG" target="_blank"><img src="images/meeting-20190329-finearts-5.JPG" style="width:100%" /></a>
<p>singing vowels (high) @Fine Arts 29/3</p> <p>singing vowels (high) @Fine Arts 29/3</p>
</div> </div>
<div class="draggable" style="position:absolute; top:61%; left:32%;width: 270px;"> <div class="draggable" style="position:absolute; top:61%; left:32%;width: 13%;">
<audio controls src="audio/leeszaal-meeting-extracts-20190508.mp3"></audio> <audio controls src="audio/leeszaal-meeting-extracts-20190508.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190328-leeszaal-4.jpg" target="_blank"><img src="images/meeting-20190328-leeszaal-4.jpg" width="270px" /></a> <a href="images/meeting-20190328-leeszaal-4.jpg" target="_blank"><img src="images/meeting-20190328-leeszaal-4.jpg" style="width:100%" /></a>
<p>reading extracts @Leeszaal 8/5</p> <p>reading extracts @Leeszaal 8/5</p>
</div> </div>
<div class="draggable" style="position:absolute; top:66%; left:35%;width: 270px;"> <div class="draggable" style="position:absolute; top:66%; left:35%;width: 13%;">
<audio controls src="audio/finearts-meeting-warming.mp3"></audio> <audio controls src="audio/finearts-meeting-warming.mp3" class="audio-tag"></audio>
<a href="images/meeting-20190329-finearts-4.JPG" target="_blank"><img src="images/meeting-20190329-finearts-4.JPG" width="270px" /></a> <a href="images/meeting-20190329-finearts-4.JPG" target="_blank"><img src="images/meeting-20190329-finearts-4.JPG" style="width:100%" /></a>
<p>warming up @Fine Arts 29/3</p> <p>warming up @Fine Arts 29/3</p>
</div> </div>
@ -274,10 +275,10 @@ $("#katalin").click(function(){
<!-- soundwalk player --> <!-- soundwalk player -->
<section style="margin-top: 1300px !important;"> <section style="margin-top: 60% !important;">
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div>selection of recordings while wandering around Leeszaal</div> <div>selection of recordings while wandering around Leeszaal</div>
@ -285,7 +286,7 @@ $("#katalin").click(function(){
</div> </div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio ontimeupdate="playTranscript()" style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3"></audio><a href="" target="_blank"> <audio ontimeupdate="playTranscript()" style="width: 100%; background: #222;" id="a2" controls src="audio/description-lidia-CUT.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<div id="transcriptWrapper" class='sub'> <div id="transcriptWrapper" class='sub'>
<h3>Lidia</h3> <h3>Lidia</h3>
@ -304,7 +305,7 @@ $("#katalin").click(function(){
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3"></audio><a href="" target="_blank"> <audio ontimeupdate="playTranscript3()" style="width: 100%; background: #222;" id="a3" controls src="audio/description-eugenie-CUT-SHORT.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<div id="transcriptWrapper3" class='sub'> <div id="transcriptWrapper3" class='sub'>
<h3>Eugenie</h3> <h3>Eugenie</h3>
@ -327,7 +328,7 @@ $("#katalin").click(function(){
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="a4" controls src="audio/description-alex1.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='sub'> <div class='sub'>
@ -359,7 +360,7 @@ Oh, I hear children in the background crying</div>
<!-- second sounwalk player --> <!-- second sounwalk player -->
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #FFFFFF;" id="b1" controls src="audio/selectionB.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
</div> </div>
@ -367,7 +368,7 @@ Oh, I hear children in the background crying</div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b2" controls src="audio/description-tommi.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='subB'> <div class='subB'>
@ -395,7 +396,7 @@ Oh, I hear children in the background crying</div>
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<!-- have to add ontimeupdate="playTranscript3()" --> <!-- have to add ontimeupdate="playTranscript3()" -->
<audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3"></audio><a href="" target="_blank"> <audio style="width: 100%; background: #222;" id="b3" controls src="audio/description-alex2.mp3" class="audio-tag"></audio><a href="" target="_blank">
<div class="tooltip-content-up"> <div class="tooltip-content-up">
<!-- have to add id="transcriptWrapper..." --> <!-- have to add id="transcriptWrapper..." -->
<div class='subB'> <div class='subB'>
@ -435,14 +436,14 @@ Oh, I hear children in the background crying</div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px"> <div class="draggable scaleable-wrapper" style="top:110%;left: 5; width: 300px; font-size: 20px">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments) (first experiments)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" style="top:45%; left: 1%;width: 250px; font-size: 16px">
<h2><a href="amplification.php">Amplification of female voices</a></h2> <h2><a href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
(workshops) (workshops)
@ -458,28 +459,28 @@ Oh, I hear children in the background crying</div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" style="top: 5%; right: 1%; z-index: 9;width: 250px; font-size: 16px">
<h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content"> <div class="drag-content">
(thesis) (thesis)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 970px; left: 100px;z-index: 1;"> <div class="draggable scaleable-wrapper" style="top: 65%; left: 2%;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 260px; left: 120px;"> <div class="draggable scaleable-wrapper" style="top: 75%; left: 2%;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 920px; left: 150px;"> <div class="draggable scaleable-wrapper" style="top: 85%; left: 3%;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 820px; left: 80px;"> <div class="draggable scaleable-wrapper" style="top: 95%; left: 1%;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper active-draggable" style="top: 316.833px; left: 10;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 1%; left: 1%;">
<h2 ><a class="active" href="player.php">Player</a></h2> <h2 ><a class="active" href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/player.txt'; ?> <?php include 'texts/player.txt'; ?>

@ -3,7 +3,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast1</title> <title>Podcast1</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>

@ -3,7 +3,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast2</title> <title>Podcast2</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>

@ -3,7 +3,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast3</title> <title>Podcast3</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>

@ -3,7 +3,8 @@
<meta charset="utf-8"> <meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1"> <meta name="viewport" content="width=device-width, initial-scale=1">
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<title>Podcast4</title> <title>Podcast4</title>
<link rel="shortcut icon" href="images/headphones_logo.png" /> <link rel="shortcut icon" href="images/headphones_logo.png" />
</head> </head>

@ -0,0 +1,663 @@
@media only screen and (max-width: 600px) {
body {
background: #F6F5F5;
font-family: "Old Standard TT";
font-size: 0.8rem;
line-height: 1.3;
letter-spacing: 1px;
padding: 20px;
/*transform: scale(1.0);*/
}
section {
margin-bottom: 50px;
margin-top: 20px;
}
a {
/*font-weight: normal;*/
text-decoration: none;
color: #A19696;
}
.active {
color: red;
font-size: 30px ;
}
.active-draggable{
width: 800px !important;
font-size: 14px;
}
a img {
line-height: 0px;
}
.navbar {
letter-spacing: 4px;
text-align: center;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-weight: thin;
}
.navbar a.active {
font-size: 40px;
font-weight: bold;
}
h2 {
text-align: center;
letter-spacing: 4px;
font-size: 16px;
margin: 5px;
margin-bottom: 10px;
color: red;
}
h3 {
font-size: 10px;
}
table, th, td {
vertical-align: top;
text-align: left;
border-collapse: separate;
padding:20px;
}
button {
width: 100px;
}
.short-description {
margin-left: 40%;
margin-right: 40%;
text-align: center;
}
.internet {
font-weight: regular;
font-size: 8px;
text-decoration: none;
}
.list a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.list {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
list-style: none;
border-top: 1px solid #47505e;
}
/* .mini-player {
background-size: 100% 100%;
background-image: url(/project/images/player.png);
cursor: pointer;
}*/
.audio-mini {
width: 50px;
}
.dropbtn {
font-family: "Old Standard TT";
font-weight: bold;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: pink;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 1900px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: none;
}
.show {
display: block;
}
/*style internet sources*/
.dropbtn2 {
font-family: "Old Standard TT";
font-weight: regular;
font-size: 14px;
color: black;
padding: 16px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.9);
border: 1px;
border-style: solid;
border-color: black;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: pink;
}
.dropdown2 {
position: absolute;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 1000px;
overflow: auto;
z-index: 1;
border: 1px;
border-style: solid;
border-color: black;
right: 5px;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {
background-color: none;
}
.show2 {
display: block;
}
/*style list of podcasts*/
.dropbtn3 {
font-family: "Old Standard TT";
font-weight: regular;
font-size: 14px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn3:focus {
background-color: pink;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 1000px;
overflow: auto;
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {
background-color: none;
}
.show3 {
display: block;
}
/* Make the clips use as much space as possible, and
* also show a scrollbar when there are too many clips to show
* in the available space */
.sound-clips {
flex: 1;
overflow: auto;
}
/*section, article {
display: block;
}*/
.clip {
padding-bottom: 1rem;
}
/*audio {
width: 100%;
display: block;
margin: 1rem auto 0.5rem;
}*/
.clip p {
display: inline-block;
font-size: 0.7rem;
}
.clip button {
font-size: 0.7rem;
}
button.delete {
background: #f00;
padding: 0.5rem 0.75rem;
font-size: 0.5rem;
}
/* Checkbox hack to control information box display */
/*label {
font-size: 3rem;
position: absolute;
top: 2px;
right: 3px;
z-index: 5;
cursor: pointer;
}*/
input[type=checkbox] {
position: absolute;
top: -100px;
}
/*aside {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(100%);
transition: 0.3s all ease-out;
background-color: #efefef;
padding: 1rem;
}
aside p {
font-size: 1.2rem;
margin: 0.5rem 0;
}
aside a {
color: #666;
}
*/
/* Toggled State of information box */
input[type=checkbox]:checked ~ aside {
transform: translateX(0);
}
/* Cursor when clip name is clicked over */
.clip p {
cursor: pointer;
}
/*hover of images and transcriptions style*/
.tooltip-wrap {
position: relative;
}
.tooltip-wrap .tooltip-content-down {
display: none;
position: absolute;
z-index: 1;
top: 50px;
/*bottom: 100%;*/
left: 50px;
/*right: 100%;*/
padding: 0.2em;
background-color: white;
/*background-color: rgba(255, 255, 255, 0.8);*/
border: 1px;
border-style: solid;
border-color: black;
text-align: left;
min-width:600px;
}
.tooltip-wrap .tooltip-content-right {
display: none;
position: absolute;
z-index: 1;
top: 100%;
/*bottom: 100%;*/
left: 2%;
/*right: 100%;*/
padding: 0.2em;
background-color: pink;
border: none;
text-align: left;
min-width: 400px;
font-size: 20px;
}
.tooltip-wrap .tooltip-content-up {
display: none;
position: absolute;
z-index: 1;
/*top: 100%;*/
bottom: 100%;
left: 2%;
/*right: 100%;*/
padding: 0.2em;
background-color: rgba(255, 255, 255, 0.93);
border: 1px;
border-style: solid;
border-color: black;
text-align: left;
}
.tooltip-wrap:hover .tooltip-content-down {
display: block;
}
.tooltip-wrap:hover .tooltip-content-up {
display: block;
}
.tooltip-wrap:hover .tooltip-content-right {
display: block;
}
/*.tooltip-wrap:hover {
background-color: pink;
}
*/
/*transcript wrapper,text following audio style*/
#transcriptWrapper {
overflow: hidden;
}
#transcript > div {
transition: all 0.8s ease;
list-style-type: disc;
}
.speaking {
font-weight: bold;
}
#transcriptWrapper3 {
overflow: hidden;
}
#transcript3 > div {
transition: all 0.8s ease;
list-style-type: disc;
}
.speaking3 {
font-weight: bold;
}
/*one image next to the other*/
.column {
float: left;
width: 30%;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* Style the tab */
.tab {
overflow: hidden;
width: 100px;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
border: 1px solid black;
outline: none;
cursor: pointer;
padding: 12px;
transition: 0.3s;
font-size: 10px;
width: 150px;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
.tabpink {
overflow: hidden;
width: 100px;
}
.tabpink button {
background-color: inherit;
border: 1px solid black;
outline: none;
cursor: pointer;
padding: 12px;
transition: 0.3s;
font-size: 10px;
width: 150px;
}
.tabpink button:hover {
background-color: pink;
}
/* Create an active/current tablink class */
.tabpink button.active {
background-color: pink;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid black;
float: left;
position: absolute;
width: 800px;
z-index: 1;
background-color: white;
top: 5px;
}
/* Style the close button */
.topleft {
float: right;
cursor: pointer;
font-size: 18px;
}
.container .rowcircle {
margin: 25px;
text-align: center;
}
.container .rowcircle span {
margin: 0 200px;
/*margin-right: 90px;*/
}
.draggable {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: white;
/* border:1px;
border-style:solid;
border-color:black;*/
cursor: all-scroll;
position: absolute !important;
width: 400px;
display: inline;
/* transform: scale(20);*/
/*min-height: 100px;*/
}
#img {
line-height: 0 !important;
}
.drag-content {
/*float: right;*/
font-weight: normal !important;
padding: 5px;
padding-bottom: 20px;
text-align: center;
/*font-size: 20px;*/
}
.scaleable-wrapper {
padding: 20px;
padding-bottom: 20px;
resize: both;
position: relative;
/*height: 400px;*/
/*min-height: 100px; */
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: pink;
position: absolute;
bottom: 0;
right: 0;
}
#show1, #show2, #show3, #show4 {
display: none;
left: 20%;
width: 550px !important;
}
#box-title {
border: 1px solid;
background-color: white;
padding: 10px;
position: absolute;
}
/*for thesis html*/
#maintext {
margin-left: 400px;
margin-right: 400px;
margin-top: 5px;
}
.toc_title {
font-weight: 700;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li {
list-style: outside none none !important;
}
li, #angela, #judith, #laurie, #dana, #katalin {
border-bottom: 1px dashed;
list-style: none;
color: #A19696;
}
.box_metadata {
background: white none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
/*width: 1000px;*/
left: 0px;
position: absolute;
}
#metadata-thesis {
width:1000px;
}
/*# sourceMappingURL=stylesheet.css.map */
.status {
color: red;
}
/*#button_upload {
background-color: pink;
padding: 10px;
font-size: 20px;
}*/
#saved_msg {
color: red;
font-size: 20px;
}
/*reshuffle piles*/
.group_vowels {
position:absolute;
}
.group_photos {
position:absolute;
}
.group_extracts {
position:absolute;
}
.group_metadata {
position:absolute;
}
}

@ -1,3 +1,4 @@
/*@media only screen and (min-width: 900px) {*/
body { body {
background: #F6F5F5; background: #F6F5F5;
font-family: "Old Standard TT"; font-family: "Old Standard TT";
@ -21,12 +22,12 @@ a {
.active { .active {
color: red; color: red;
font-size: 40px ; font-size: 95% ;
} }
.active-draggable{ .active-draggable{
width: 800px !important; width: 70% !important;
font-size: 24px; font-size: 100%;
} }
a img { a img {
@ -52,7 +53,7 @@ a img {
h2 { h2 {
text-align: center; text-align: center;
letter-spacing: 4px; letter-spacing: 4px;
font-size: 26px; font-size: 100%;
margin: 5px; margin: 5px;
margin-bottom: 10px; margin-bottom: 10px;
color: red; color: red;
@ -60,7 +61,7 @@ h2 {
} }
h3 { h3 {
font-size: 20px; font-size: 95%;
} }
table, th, td { table, th, td {
@ -658,3 +659,5 @@ li, #angela, #judith, #laurie, #dana, #katalin {
.group_metadata { .group_metadata {
position:absolute; position:absolute;
} }
/*}*/

@ -0,0 +1,676 @@
/*@media only screen and (min-width: 900px) {*/
body {
background: #F6F5F5;
font-family: "Old Standard TT";
font-size: 95%;
line-height: 1.3;
letter-spacing: 1px;
padding: 20px;
/*transform: scale(1.0);*/
}
section {
margin-bottom: 50px;
margin-top: 20px;
}
a {
/*font-weight: normal;*/
text-decoration: none;
color: #A19696;
}
.active {
color: red;
font-size: 120% ;
}
.active-draggable{
width: 30% !important;
font-size: 110%;
}
a img {
line-height: 0px;
}
.navbar {
letter-spacing: 4px;
text-align: center;
}
.navbar a:hover {
background-color: #ddd;
color: black;
font-weight: thin;
}
.navbar a.active {
font-size: 50px;
font-weight: bold;
}
h1 {
font-size: 180%;
}
h2 {
text-align: center;
letter-spacing: 4px;
font-size: 120%;
margin: 5px;
margin-bottom: 10px;
color: red;
}
h3 {
font-size: 95%;
text-align: center;
}
table, th, td {
vertical-align: top;
text-align: left;
border-collapse: separate;
padding:20px;
}
button {
width: 100px;
}
.short-description {
margin-left: 40%;
margin-right: 40%;
text-align: center;
}
.internet {
font-weight: regular;
font-size: 70%;
text-decoration: none;
}
.list a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.list {
padding-top: 10px;
padding-bottom: 10px;
padding-left: 0;
list-style: none;
border-top: 1px solid #47505e;
}
/* .mini-player {
background-size: 100% 100%;
background-image: url(/project/images/player.png);
cursor: pointer;
}*/
.audio-mini {
width: 50px;
}
.dropbtn {
font-family: "Old Standard TT";
font-weight: bold;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn:hover, .dropbtn:focus {
background-color: pink;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: white;
min-width: 1900px;
overflow: auto;
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown a:hover {
background-color: none;
}
.show {
display: block;
}
/*style internet sources*/
.dropbtn2 {
font-family: "Old Standard TT";
font-weight: regular;
font-size: 24px;
color: black;
padding: 16px;
cursor: pointer;
background-color: rgba(255, 255, 255, 0.9);
border: 1px;
border-style: solid;
border-color: black;
}
.dropbtn2:hover, .dropbtn2:focus {
background-color: pink;
}
.dropdown2 {
position: absolute;
display: inline-block;
}
.dropdown-content2 {
display: none;
position: absolute;
background-color: white;
min-width: 1000px;
overflow: auto;
z-index: 1;
border: 1px;
border-style: solid;
border-color: black;
right: 5px;
}
.dropdown-content2 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown2 a:hover {
background-color: none;
}
.show2 {
display: block;
}
/*style list of podcasts*/
.dropbtn3 {
font-family: "Old Standard TT";
font-weight: regular;
font-size: 24px;
color: black;
padding: 16px;
border: none;
cursor: pointer;
}
.dropbtn3:hover, .dropbtn3:focus {
background-color: pink;
}
.dropdown3 {
position: relative;
display: inline-block;
}
.dropdown-content3 {
display: none;
position: absolute;
background-color: white;
min-width: 1000px;
overflow: auto;
z-index: 1;
}
.dropdown-content3 a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown3 a:hover {
background-color: none;
}
.show3 {
display: block;
}
/* Make the clips use as much space as possible, and
* also show a scrollbar when there are too many clips to show
* in the available space */
.sound-clips {
flex: 1;
overflow: auto;
}
/*section, article {
display: block;
}*/
.clip {
padding-bottom: 1rem;
}
/*audio {
width: 100%;
display: block;
margin: 1rem auto 0.5rem;
}*/
.clip p {
display: inline-block;
font-size: 1rem;
}
.clip button {
font-size: 1rem;
}
button.delete {
background: #f00;
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
}
/* Checkbox hack to control information box display */
/*label {
font-size: 3rem;
position: absolute;
top: 2px;
right: 3px;
z-index: 5;
cursor: pointer;
}*/
input[type=checkbox] {
position: absolute;
top: -100px;
}
/*aside {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
transform: translateX(100%);
transition: 0.3s all ease-out;
background-color: #efefef;
padding: 1rem;
}
aside p {
font-size: 1.2rem;
margin: 0.5rem 0;
}
aside a {
color: #666;
}
*/
/* Toggled State of information box */
input[type=checkbox]:checked ~ aside {
transform: translateX(0);
}
/* Cursor when clip name is clicked over */
.clip p {
cursor: pointer;
}
/*hover of images and transcriptions style*/
.tooltip-wrap {
position: relative;
text-decoration: underline;
}
.tooltip-wrap .tooltip-content-down {
display: none;
position: absolute;
z-index: 1;
top: 50%;
/*bottom: 100%;*/
left: 50%;
/*right: 100%;*/
padding: 0.2em;
background-color: white;
/*background-color: rgba(255, 255, 255, 0.8);*/
border: 1px;
border-style: solid;
border-color: black;
text-align: left;
min-width:200%;
}
.tooltip-wrap .tooltip-content-right {
display: none;
position: absolute;
z-index: 1;
top: 100%;
/*bottom: 100%;*/
left: 2%;
/*right: 100%;*/
padding: 0.2em;
background-color: pink;
border: none;
text-align: left;
min-width: 400%;
font-size: 90%;
}
.tooltip-wrap .tooltip-content-up {
display: none;
position: absolute;
z-index: 1;
/*top: 100%;*/
bottom: 100%;
left: 2%;
/*right: 100%;*/
padding: 0.2em;
background-color: rgba(255, 255, 255, 0.93);
border: 1px;
border-style: solid;
border-color: black;
text-align: left;
}
.tooltip-wrap:hover .tooltip-content-down {
display: block;
}
.tooltip-wrap:hover .tooltip-content-up {
display: block;
}
.tooltip-wrap:hover .tooltip-content-right {
display: block;
}
/*.tooltip-wrap:hover {
background-color: pink;
}
*/
/*transcript wrapper,text following audio style*/
#transcriptWrapper {
overflow: hidden;
}
#transcript > div {
transition: all 0.8s ease;
list-style-type: disc;
}
.speaking {
font-weight: bold;
}
#transcriptWrapper3 {
overflow: hidden;
}
#transcript3 > div {
transition: all 0.8s ease;
list-style-type: disc;
}
.speaking3 {
font-weight: bold;
}
/*one image next to the other*/
.column {
float: left;
width: 30%;
}
/* Clear floats after image containers */
.row::after {
content: "";
clear: both;
display: table;
}
/* Style the tab */
.tab {
overflow: hidden;
width: 20%;
}
/* Style the buttons inside the tab */
.tab button {
background-color: inherit;
border: 1px solid black;
outline: none;
cursor: pointer;
padding: 12px;
transition: 0.3s;
font-size: 80%;
width: 30%;
}
/* Change background color of buttons on hover */
.tab button:hover {
background-color: #ddd;
}
/* Create an active/current tablink class */
.tab button.active {
background-color: #ccc;
}
.tabpink {
overflow: hidden;
width: 50%;
}
.tabpink button {
background-color: inherit;
border: 1px solid black;
outline: none;
cursor: pointer;
padding: 12px;
transition: 0.3s;
font-size: 10%;
width: 50%;
}
.tabpink button:hover {
background-color: pink;
}
/* Create an active/current tablink class */
.tabpink button.active {
background-color: pink;
}
/* Style the tab content */
.tabcontent {
display: none;
padding: 6px 12px;
border: 1px solid black;
float: left;
position: absolute;
width: 40%;
z-index: 1;
background-color: white;
top: 5px;
}
/* Style the close button */
.topleft {
float: right;
cursor: pointer;
font-size: 100%;
}
.container .rowcircle {
margin: 25px;
text-align: center;
}
.container .rowcircle span {
margin: 0 200px;
/*margin-right: 90px;*/
}
.draggable {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: white;
/* border:1px;
border-style:solid;
border-color:black;*/
cursor: all-scroll;
position: absolute !important;
width: 20%;
display: inline;
/* transform: scale(20);*/
/*min-height: 100px;*/
}
.draggable p {
text-align: center;
color: #A19696;
}
#img {
line-height: 0 !important;
}
.drag-content {
/*float: right;*/
font-weight: normal !important;
padding: 0.8%;
padding-bottom: 0.8%;
text-align: center;
}
.scaleable-wrapper {
padding: 0.8%;
padding-bottom: 0.8%;
resize: both;
position: relative;
/*height: 400px;*/
/*min-height: 100px; */
}
.ui-resizable-se {
width: 10px;
height: 10px;
background: pink;
position: absolute;
bottom: 0;
right: 0;
}
#show1, #show2, #show3, #show4 {
display: none;
left: 20%;
width: 23% !important;
}
#box-title {
border: 1px solid;
background-color: white;
padding: 10px;
position: absolute;
}
/*for thesis html*/
#maintext {
width: 120%;
margin-top: 2%;
}
.toc_title {
font-weight: 700;
text-align: center;
}
#toc_container li, #toc_container ul, #toc_container ul li {
list-style: outside none none !important;
}
li, #angela, #judith, #laurie, #dana, #katalin {
border-bottom: 1px dashed;
list-style: none;
color: #A19696;
}
.box_metadata {
background: white none repeat scroll 0 0;
border: 1px solid #aaa;
display: table;
font-size: 95%;
margin-bottom: 1em;
padding: 20px;
/*width: 1000px;*/
left: 0px;
position: absolute;
}
#metadata-thesis {
width:50%;
}
/*# sourceMappingURL=stylesheet.css.map */
.status {
color: red;
}
/*#button_upload {
background-color: pink;
padding: 10px;
font-size: 20px;
}*/
#saved_msg {
color: red;
font-size: 100%;
}
/*reshuffle piles*/
.group_vowels {
position:absolute;
}
.group_photos {
position:absolute;
}
.group_extracts {
position:absolute;
}
.group_metadata {
position:absolute;
}
.audio-tag {
width: 100%;
}
/*}*/

@ -3,7 +3,8 @@
<head> <head>
<title>Let' s Talk About Unspeakable Things</title> <title>Let' s Talk About Unspeakable Things</title>
</head> </head>
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css"> <link href="styles/widescreen.css" rel="stylesheet" type="text/css">
<!-- <link href="styles/smallscreen.css" rel="stylesheet" type="text/css"> -->
<link href="styles/jquery-ui.css" rel="stylesheet" type="text/css"> <link href="styles/jquery-ui.css" rel="stylesheet" type="text/css">
<script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
@ -14,150 +15,164 @@
h1,h2 { h1,h2 {
text-align: center !important; text-align: center !important;
} }
h2 {
color: black;
}
.draggable {
padding:0 !important;
}
.tooltip-content-right {
min-width: 40% !important;
}
</style> </style>
<body> <body>
<div align="center"><br><br><span style="font-size: 30px;" ><b>Let' s Talk About Unspeakable Things</b></span>&nbsp;&nbsp;&nbsp;&nbsp;<span style="color:pink;">by Angeliki Diakrousi</span></div><br><br>
<div style="width:1800px; margin:0 auto;">
<div class="draggable scaleable-wrapper" style="width: 700px !important;right: 100px;top: 200px;">
<div>
<p class="toc_title">Contents</p>
<ul class="toc_list">
<li><a href="#introduction">Introduction</a>
</li>
<li><a href="#the-monstrosity-of-female-voices">1. The Monstrosity of the female voices</a></li>
<ul>
<li><a href="#what-modes-the-annoying-noise">What modes: the annoying noise</a></li>
<li><a href="#mechanisms-of-marginalization">Mechanisms of marginalization</a></li>
<li><a href="#shut-out-of-the-public-opposition-of-public-and-private-space">Shut out of the public: Separation of public and private space</a></li>
<li><a href="#the-roots-of-collective-voice">The Roots of Collective Voice</a></li>
</ul>
<li><a href="#multiplication-vis-a-vis-amplification">2. Multiplication Vis a Vis Amplification</a></li>
<ul>
<li><a href="#the-mediation-of-voice-through-multiplication">The mediation of voice through multiplication</a></li>
<li><a href="#the-mediation-of-voice-through-amplification">The mediation of voice through amplification</a></li>
</ul>
<li><a href="#transmitting-ugly-things">3. Transmitting Ugly Things</a></li>
<ul>
<li><a href="#what-ugly-things-and-the-medium">What ugly things, and the medium</a></li>
<li><a href="#streaming-media-in-relation-to-female-continuity">Streaming media in relation to female continuity</a></li>
<li><a href="#for-an-agonistic-streaming">For an agonistic streaming</a></li>
</ul>
<li><a href="#general-conclusion">General conclusion</a></li>
</ul>
</div>
</div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 135%; right: 2%;">
<h2><a href="amplification.php">Amplification of female voices</a></h2> <h2><a href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content"> <div class="drag-content">
(workshops) (workshops)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 120%; right: 3%;">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content"> <div class="drag-content">
(first experiments) (first experiments)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 130%; left: 1%;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
(audio archive) (audio archive)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 110%; left: 2%;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content"> <div class="drag-content">
(main page) (main page)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 270px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper" style="top: 80%; right: 4%;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 100%; right: 3%;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 90%; right: 5%;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper active-draggable" style="top: 30%; left: 5%; z-index: 9;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 30%; left: 2%; z-index: 9;">
<h2 ><a class="active" href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2> <h2 ><a class="active" href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/thesis-summary.txt'; ?> <?php include 'texts/thesis-summary.txt'; ?>
</div> </div>
</div> </div>
<div style="width:30%; margin:0 auto;">
<div class="draggable scaleable-wrapper active-draggable" style="width: 30% !important;right: 2%;top: 2%;">
<div>
<h3 class="active">Contents</h3>
<ul class="toc_list">
<li><a href="#introduction">Introduction</a>
</li>
<li><a href="#the-monstrosity-of-female-voices">1. The Monstrosity of the female voices</a></li>
<ul>
<li><a href="#what-modes-the-annoying-noise">What modes: the annoying noise</a></li>
<li><a href="#mechanisms-of-marginalization">Mechanisms of marginalization</a></li>
<li><a href="#shut-out-of-the-public-opposition-of-public-and-private-space">Shut out of the public: Separation of public and private space</a></li>
<li><a href="#the-roots-of-collective-voice">The Roots of Collective Voice</a></li>
</ul>
<li><a href="#multiplication-vis-a-vis-amplification">2. Multiplication Vis a Vis Amplification</a></li>
<ul>
<li><a href="#the-mediation-of-voice-through-multiplication">The mediation of voice through multiplication</a></li>
<li><a href="#the-mediation-of-voice-through-amplification">The mediation of voice through amplification</a></li>
</ul>
<li><a href="#transmitting-ugly-things">3. Transmitting Ugly Things</a></li>
<ul>
<li><a href="#what-ugly-things-and-the-medium">What ugly things, and the medium</a></li>
<li><a href="#streaming-media-in-relation-to-female-continuity">Streaming media in relation to female continuity</a></li>
<li><a href="#for-an-agonistic-streaming">For an agonistic streaming</a></li>
</ul>
<li><a href="#general-conclusion">General conclusion</a></li>
</ul>
</div>
</div>
<!-- draggable images --> <!-- draggable images -->
<div class="draggable scaleable-wrapper" style="top: 2713px;left: 147px;"><div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/carson-list.jpg"><img src="images/carson-list.jpg" width="800px"></a><div class="tooltip-content-right"><div>Figure 1: Describing how female voices sound like <div class="draggable scaleable-wrapper" style="top: 2713px;left: 147px;"><div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/carson-list.jpg"><img src="images/carson-list.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 1: Describing how female voices sound like
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 3000px;left: 1247px;"> <div class="draggable scaleable-wrapper" style="top: 3000px;left: 1247px;"><div class="tooltip-wrap" style="text-decoration:underline;"><iframe width="91%" height="200px" src="https://www.youtube.com/embed/TY96Ma6YdtQ" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div class="tooltip-content-right">Figure 2: Vocal performance of Katalin Ladik</div></div></div>
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/katalin.jpg"><img src="images/katalin.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 2: Vocal performance of Katalin Ladik
</div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 3468px; left: -6px;"> <div class="draggable scaleable-wrapper" style="top: 3468px; left: -6px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/miss-triggs.jpg"><img src="images/miss-triggs.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 3: Cartoon from Riana Dunkan <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/miss-triggs.jpg"><img src="images/miss-triggs.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 3: Cartoon from Riana Dunkan
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 3980px; left: -33px;"> <div class="draggable scaleable-wrapper" style="top: 3980px; left: -33px;">
<div class="tooltip-wrap" style="text-decoration:underline;"> <a target="_blank" href="images/gonzalo.jpg"><img src="images/gonzalo.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 4: Cartoon from Gonzalo Rocha <div class="tooltip-wrap" style="text-decoration:underline;"> <a target="_blank" href="images/gonzalo.jpg"><img src="images/gonzalo.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 4: Cartoon from Gonzalo Rocha
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 4150px;left: 1482px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/laurie.jpg"><img src="images/laurie.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 5: Performance from Laurie Anderson <div class="draggable scaleable-wrapper" style="top: 4150px;left: 1482px;"><div class="tooltip-wrap" style="text-decoration:underline;"><iframe width="91%" height="200px" src="https://www.youtube.com/embed/SirOxIeuNDE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe><div class="tooltip-content-right">Figure 5: Performance from Laurie Anderson</div></div></div>
</div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 5836px; left: 32px;"> <div class="draggable scaleable-wrapper" style="top: 5836px; left: 32px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/occupy-davis-butler.jpg"><img src="images/occupy-davis-butler.jpg" width="1000px"></a><div class="tooltip-content-right"><div>Figure 6: Speeches of Angela Davis and Judith Butler in Occupy Wall Street <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/occupy-davis-butler.jpg"><img src="images/occupy-davis-butler.jpg" width="1000px"></a><div class="tooltip-content-right"><div>Figure 6: Speeches of Angela Davis and Judith Butler in Occupy Wall Street
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 6463px; left: 1513px;"> <div class="draggable scaleable-wrapper" style="top: 6463px; left: 1513px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/mikrofoniki.jpg"><img src="images/mikrofoniki.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 7: 'Mikrophoniki' demonstration in Athens <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/mikrofoniki.jpg"><img src="images/mikrofoniki.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 7: 'Mikrophoniki' demonstration in Athens
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 6721px; left: 40px;"> <div class="draggable scaleable-wrapper" style="top: 6721px; left: 40px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/feminists.JPG"><img src="images/feminists.JPG" width="500px"></a><div class="tooltip-content-right"><div>Figure 8: Speech Matters: Violence and the Feminist Voice <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/feminists.JPG"><img src="images/feminists.JPG" width="100%"></a><div class="tooltip-content-right"><div>Figure 8: Speech Matters: Violence and the Feminist Voice
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 7805px; left: 1407px;"> <div class="draggable scaleable-wrapper" style="top: 7805px; left: 1407px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/broadcastcart.jpg"><img src="images/broadcastcart.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 9: 'The Broadcast Cart' of Miranda Zúñiga transmitting <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/broadcastcart.jpg"><img src="images/broadcastcart.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 9: 'The Broadcast Cart' of Miranda Zúñiga transmitting
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 9343px;left: -22px;"> <div class="draggable scaleable-wrapper" style="top: 9343px;left: -22px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/twomouths.jpg"><img src="images/twomouths.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 10: A sculpture of Baubo, goddess of sacred and sexual humor <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/twomouths.jpg"><img src="images/twomouths.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 10: A sculpture of Baubo, goddess of sacred and sexual humor
</div></div></div></div> </div></div></div></div>
<div class="draggable scaleable-wrapper" style="top: 8565px; left: 1442px;"> <div class="draggable scaleable-wrapper" style="top: 8565px; left: 1442px;">
<div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/liveoccupy.jpg"><img src="images/liveoccupy.jpg" width="500px"></a><div class="tooltip-content-right"><div>Figure 11: Live streaming from Occupy Wall Street <div class="tooltip-wrap" style="text-decoration:underline;"><a target="_blank" href="images/liveoccupy.jpg"><img src="images/liveoccupy.jpg" width="100%"></a><div class="tooltip-content-right"><div>Figure 11: Live streaming from Occupy Wall Street
</div></div></div></div> </div></div></div></div>
<!-- end of draggable images --> <!-- end of draggable images -->
<div class="draggable scaleable-wrapper box_metadata" id="metadata-thesis" > <div class="draggable scaleable-wrapper box_metadata" id="metadata-thesis" >
<p></p><p></p><p>Name: Angeliki Diakrousi<br /> <li>Author: Angeliki Diakrousi</li>
</p><p>Title: Let's Talk About Unspeakable Things<br /> <li>Title: Let's Talk About Unspeakable Things</li>
</p><p>Student number: 0956090<br /> <li>Student number: 0956090</li>
</p><p>Thesis, in partial fulfillment of the requirements for the final examination for Master of Arts in Fine Art and Design: Experimental Publishing. Piet Zwart Institute, Willem de Kooning Academy.<br /> <li>Thesis, in partial fulfillment of the requirements for the final examination for Master of Arts in Fine Art and Design: Experimental Publishing. Piet Zwart Institute, Willem de Kooning Academy.</li>
</p><p>Adviser: Steve Rushton<br /> <li>Adviser: Steve Rushton</li>
</p><p>Second Reader: Kate Briggs</p><p>Word count: 8380</p><p> </p><p></p><p> </p> <li>Second Reader: Kate Briggs</li>
<li>Word count: 8380</li>
</div> </div>
<div id="maintext"> <div id="maintext">

Loading…
Cancel
Save