Angeliki
/
eaiaiaiaoi
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

reshuffle, imrpoved titles

Browse Source
master
Angeliki 6 years ago
parent a3ba487a5f
commit 444ca52221
12 changed files with 554 additions and 133 deletions
Show Stats Download Patch File Download Diff File

157
amplification (copy).php
Unescape Escape View File

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html>
<head>
<link href="styles/stylesheet.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/ui/1.12.1/jquery-ui.js"></script>
<script src="js/jquery.ui.touch-punch.min.js"></script>
<script src="js/draggable.js"></script>
<script src="js/main.js"></script>
<title>Amplification</title>
</head>
<body>
<!-- <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2>
-->
<!-- draggable archive -->
<!-- div vowels -->
<div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><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" style="top: 47px; left: 1083px;line-height: 0 !important;"><a href="images/vowels-20190322-leeszaal.jpg"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></a></div>
<div id="resize" class="draggable ui-draggable-handle" style="top: 81px; left: 1137px; line-height: 0 !important;"><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" style="top: 116px; left: 1176px;"><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" style="top: 156px; left: 1216px;"><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" style="top: 196px; left: 1256px;"><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" style="top: 236px; left: 1296px;"><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" style="top: 276px; left: 1336px;"><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" style="top: 316px; left: 1376px;"><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" style="top: 356px; left: 1416px;"><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" style="top: 396px; left: 1456px;"><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" style="top: 436px; left: 1496px;"><a href="images/vowels-20190530-leeszaal.jpg" target="_blank"><img src="images/vowels-20190530-leeszaal.jpg" width="400px"></img></a></div>
<!-- div extracts -->
<div>
<div class="draggable ui-draggable-handle" style="top: 1300px; left: 900px; line-height: 0 !important;"><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="550px" /></a></div>
<div class="draggable ui-draggable-handle" style="top: 1400px; left: 1000px; line-height: 0 !important;"><a href="images/fresh1.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a></div>
<div class="draggable ui-draggable-handle" style="top: 1500px; left: 1100px; line-height: 0 !important;"><a href="images/fresh2.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a></div>
</div>
<!-- div images -->
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 406px;"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 306px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 264px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 100px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 125px;"><img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 838px; left: 385px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 16px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 228px;z-index: -1;"><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" style="top: 337px; left: 506px;"><img src="images/meeting-20190523-leeszaal-1.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 140px; left: 206px;"><img src="images/meeting-20190523-leeszaal-2.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 237px; left: 306px;"><img src="images/meeting-20190523-leeszaal-3.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 310px; left: 560px;"><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" style="top: 200px; left: 446px;"><img src="images/meeting-20190523-leeszaal-4.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 600px; left: 520px;"><img src="images/meeting-20190523-leeszaal-5.jpg" width="400px"></img></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 410px; left: 430px;"><a href="images/meeting-20190508_leeszaal.jpg" target="_blank"><img src="images/meeting-20190508_leeszaal.jpg" width="400px"></img></a></div>
<div id="img" class="draggable ui-draggable-handle" style="top: 440px; left: 200px;"><a href="images/meeting-20190530-leeszaal-2.jpg" target="_blank"><img src="images/meeting-20190530-leeszaal-2.jpg" width="400px"></img></a></div>
<!-- draggable menu-->
<div class="draggable scaleable-wrapper active-draggable" style="width: 500px; top: 20px; right: 0px;">
<h2><a class="active" href="amplification.php">Amplification of female voices</a></h2>
<div class="drag-content">
<?php include 'texts/amplification.txt'; ?>
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1270px; right: 200px;">
<h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div>
<div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
<h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div>
</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 class="drag-content">
(thesis)
</div>
</div>
<!-- end draggable -->
</body>
</html>

101
amplification.php
Unescape Escape View File

@ -4,6 +4,7 @@
<html> <html>
<head> <head>
<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">
<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>
@ -13,12 +14,26 @@
</head> </head>
<body> <body>
<button onclick="piles()">piles</button>
<button onclick="groups()">groups</button>
<!-- <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2> <!-- <h2 style="border: 1px solid; background-color: white; padding: 10px; width: 500px; position:absolute;top: 0; left: 45%;" >Amplification of female voices</h2>
--> -->
<!-- draggable archive --> <!-- draggable archive -->
<!-- metadata for each workshop -->
<div class="draggable scaleable-wrapper box_metadata">
<li>Actions:<li>
<ul>
<li>Reading extracts</li>
<li>Discussion on public voice</li>
<li>Transcribing vowels</li>
</ul>
<li>Outcome: Score of vowels<li>
<li>Date: 23/5/2019<li>
<li>Location: Leeszaal<li>
</div>
<!-- div vowels --> <!-- div vowels -->
<div id="resize" class="draggable ui-draggable-handle" style="top: 6px; left: 1038px; line-height: 0 !important;"><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" style="top: 6px; left: 1038px; line-height: 0 !important;"><a href="images/vowels-leeszaal-test.jpg"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></a></div>
@ -101,44 +116,106 @@
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="width: 500px; top: 20px; right: 0px;"> <div class="draggable scaleable-wrapper active-draggable" style="width: 500px; top: 20px; right: 0px;">
<h2><a 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'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1270px; right: 200px;"> <div class="draggable scaleable-wrapper" style="top: 1270px; right: 200px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1200px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 1200px; right: 10px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 860px; right: 335px;"> <div class="draggable scaleable-wrapper" style="top: 860px; right: 335px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;"> <div class="draggable scaleable-wrapper" style="top: 1270px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 920px; left: 10px;"> <div class="draggable scaleable-wrapper" style="top: 920px; left: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1420px; left: 150px;"> <div class="draggable scaleable-wrapper" style="top: 1420px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 1320px; left: 380px;"> <div class="draggable scaleable-wrapper" style="top: 1320px; left: 380px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 960px; right: 430px; z-index: 9;"> <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> <h2 ><a href="thesis-angeliki.php">"Let' s Talk About Unspeakable Things"</a></h2>
<div class="drag-content">
(thesis)
</div>
</div> </div>
<!-- end draggable --> <!-- end draggable -->
<!-- reshuffle -->
<script>
var distance=100
groups()
piles()
function piles(){
var pile1_position=[20,100]
$(".pile1").each(function(i){
$(this).css({"top":i*distance+pile1_position[1],"left":i*distance+pile1_position[0]})
})
var pile2_position=[600,200]
$(".pile2").each(function(i){
$(this).css({"top":i*distance+pile2_position[1],"left":i*distance+pile2_position[0]})
})
var pile3_position=[300,300]
$(".pile3").each(function(i){
$(this).css({"top":i*distance+pile3_position[1],"left":i*distance+pile3_position[0]})
})
}
function groups(){
var group_vowels_position=[20,100]
$(".group_vowels").each(function(i){
$(this).css({"top":i*distance+group_vowels_position[1],"left":i*distance+group_vowels_position[0]})
})
var group_photos_position=[300,100]
$(".group_photos").each(function(i){
$(this).css({"top":i*distance+group_photos_position[1],"left":i*distance+group_photos_position[0]})
})
var group_extracts_position=[300,100]
$(".group_extracts").each(function(i){
$(this).css({"top":i*distance+group_extracts_position[1],"left":i*distance+group_extracts_position[0]})
})
var group_metadata_position=[300,100]
$(".group_metadata").each(function(i){
$(this).css({"top":i*distance+group_metadata_position[1],"left":i*distance+group_metadata_position[0]})
})
}
</script>
</body> </body>
</html> </html>

38
diary.php
Unescape Escape View File

@ -15,6 +15,44 @@
<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;">
<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 class="draggable" style="position:absolute; top:6%; left:5%;width:1800px;"> <div class="draggable" style="position:absolute; top:6%; left:5%;width:1800px;">
<audio controls > <audio controls >

35
index.php
Unescape Escape View File

@ -1,6 +1,6 @@
<html lang="en"> <html lang="en">
<head> <head>
<style type="text/css"></style>
<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">
@ -30,44 +30,44 @@
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:12%;left:55%;width: 500px;"> <div class="draggable scaleable-wrapper" style="top:12%;left:55%;width: 500px;">
<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" ><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" id="scaleable-wrapper"style="top: 4px; right: 1500px;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 0%; right: 67%;width: 300px; font-size: 20px;">
<h2 style="font-size: 26px;"><a href="podcast1.php" >Podcast1</a></h2> <h2 style="font-size: 26px;"><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" id="scaleable-wrapper"style="top:3%;left:72%; width: 500px; font-size: 20px"> <div class="draggable scaleable-wrapper"style="top:3%;left:72%; width: 500px; font-size: 20px">
<h2 style="font-size: 36px;"><a href="amplification.php" >Amplification of female voices</a></h2> <h2 style="font-size: 36px;"><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" id="scaleable-wrapper"style="top: 680px; right: 300px;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 70%; right: 10%;width: 300px; font-size: 20px;">
<h2 style="font-size: 26px;"><a href="podcast2.php" >Podcast2</a></h2> <h2 style="font-size: 26px;"><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" id="scaleable-wrapper"style="top: 820px; right: 700px;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 80%; right: 30%;width: 300px; font-size: 20px;">
<h2 style="font-size: 26px;"><a href="podcast3.php" >Podcast3</a></h2> <h2 style="font-size: 26px;"><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" id="scaleable-wrapper"style="top: 920px; right: 510px;width: 300px; font-size: 20px;"> <div class="draggable scaleable-wrapper"style="top: 85%; right: 23%;width: 300px; font-size: 20px;">
<h2 style="font-size: 26px;"><a href="podcast4.php" >Podcast4</a></h2> <h2 style="font-size: 26px;"><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" id="scaleable-wrapper"style="top:75%;left:41%;width: 200px; font-size: 14px;"> <div class="draggable scaleable-wrapper"style="top:75%;left:41%;width: 200px; font-size: 14px;">
<h2 style="font-size: 20px;"><a href="player.php" >Diary of West Rotterdam</a></h2> <h2 style="font-size: 20px;"><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,21 +75,30 @@
<div class="draggable scaleable-wrapper" id="scaleable-wrapper"style="top:70px;left:810px"> <div class="draggable scaleable-wrapper"style="top:8%;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'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:18%;left:6%;width: 800px; font-size: 24px" > <div class="draggable scaleable-wrapper active-draggable" style="top:18%;left:6%;" >
<h2 style="font-size: 44px"><a href="index.php" >About</a></h2> <h2 style="font-size: 44px"><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>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:64%;left:25%;" > <!-- colophon -->
<div class="draggable scaleable-wrapper box_metadata">
<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>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>https://xpub.nl</li>
<li>This publication is based on the graduation thesis <em>Let's Talk About Unspeakable Things</em>, written under the supervision of Steve Rushton.</li><li>Special thanks to my tutors, Alex for his enormous help in XPUB comrades and all my friends with whom I had interesting discussions that pushed my research further.</li>
</div>
<div class="draggable scaleable-wrapper" style="top:64%;left:25%;" >
<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">
<?php include 'texts/thesis-summary.txt'; ?> <?php include 'texts/thesis-summary.txt'; ?>

46
player.php
Unescape Escape View File

@ -2,6 +2,7 @@
<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">
<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/draggable.js"></script> <script src="js/draggable.js"></script>
@ -25,7 +26,8 @@
<!-- links --> <!-- links -->
<div class="draggable" id="box_metadata" style="width: 500px !important"> <div class="draggable box_metadata" style="width: 500px !important">
<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>
</li> </li>
@ -433,44 +435,56 @@ Oh, I hear children in the background crying</div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px"> <div class="draggable scaleable-wrapper" style="top:70%;left: 5; width: 300px; font-size: 20px">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top:700px; right: 5px;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" style="top:700px; right: 5px;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>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 316.833px; left: 10;">
<h2 ><a href="player.php">Player</a></h2>
<div class="drag-content"> <div class="drag-content">
<?php include 'texts/player.txt'; ?> (workshops)
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px">
<div class="draggable scaleable-wrapper" style="top: 200px; right: 0px;width: 150px; font-size: 16px">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px"> <div class="draggable scaleable-wrapper" style="top: 400px; right: 0px; 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">
(thesis)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 970px; left: 100px;z-index: 1;"> <div class="draggable scaleable-wrapper" style="top: 970px; left: 100px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 260px; left: 120px;"> <div class="draggable scaleable-wrapper" style="top: 260px; left: 120px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 920px; left: 150px;"> <div class="draggable scaleable-wrapper" style="top: 920px; left: 150px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 820px; left: 80px;"> <div class="draggable scaleable-wrapper" style="top: 820px; left: 80px;">
<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;">
<h2 ><a class="active" href="player.php">Player</a></h2>
<div class="drag-content">
<?php include 'texts/player.txt'; ?>
</div>
</div>
<!-- end draggable --> <!-- end draggable -->

43
podcast1.php
Unescape Escape View File

@ -17,44 +17,63 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
<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">
(workshops)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div> </div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a class="active" 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" id="scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
<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">
(thesis)
</div>
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>
<table><tr> <table>
<tr>
<b>Episodes</b>
</tr>
<tr>
<td><img src="images/headphones_logo.png" width="40px"></td> <td><img src="images/headphones_logo.png" width="40px"></td>
<?php <?php
$files = glob("podcasts/podcast1/*.mp3"); $files = glob("podcasts/podcast1/*.mp3");

37
podcast2.php
Unescape Escape View File

@ -18,40 +18,55 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
<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">
(workshops)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div> </div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a class="active" 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" id="scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
<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">
(thesis)
</div>
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>

37
podcast3.php
Unescape Escape View File

@ -18,40 +18,55 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
<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">
(workshops)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div> </div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a class="active" 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" id="scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
<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">
(thesis)
</div>
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>

37
podcast4.php
Unescape Escape View File

@ -18,40 +18,55 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
<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">
(workshops)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div> </div>
</div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 330px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 3%; right: 3%">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a class="active" 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" id="scaleable-wrapper" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable scaleable-wrapper" id="scaleable-wrapper" style="top: 640px; right: 2000px;"> <div class="draggable scaleable-wrapper" style="top: 640px; right: 2000px;">
<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">
(thesis)
</div>
</div> </div>
<br><br><br><br><br><br> <br><br><br><br><br><br>

63
styles/stylesheet.css
Unescape Escape View File

@ -14,8 +14,19 @@ section {
} }
a { a {
font-weight: normal; /*font-weight: normal;*/
text-decoration: none; text-decoration: none;
color: #A19696;
}
.active {
color: red;
font-size: 40px ;
}
.active-draggable{
width: 800px !important;
font-size: 24px;
} }
a img { a img {
@ -44,6 +55,8 @@ h2 {
font-size: 26px; font-size: 26px;
margin: 5px; margin: 5px;
margin-bottom: 10px; margin-bottom: 10px;
color: red;
} }
h3 { h3 {
@ -80,9 +93,7 @@ button {
display: block; display: block;
} }
li {
list-style: none;
}
.list { .list {
padding-top: 10px; padding-top: 10px;
@ -589,22 +600,29 @@ input[type=checkbox]:checked ~ aside {
list-style: outside none none !important; list-style: outside none none !important;
} }
#dashed, #angela, #judith, #laurie, #dana, #katalin { li, #angela, #judith, #laurie, #dana, #katalin {
border-bottom: 1px dashed; border-bottom: 1px dashed;
list-style: none;
color: #A19696;
} }
#box_metadata {
.box_metadata {
background: white none repeat scroll 0 0; background: white none repeat scroll 0 0;
border: 1px solid #aaa; border: 1px solid #aaa;
display: table; display: table;
font-size: 95%; font-size: 95%;
margin-bottom: 1em; margin-bottom: 1em;
padding: 20px; padding: 20px;
width: 1000px; /*width: 1000px;*/
left: 0px; left: 0px;
position: absolute; position: absolute;
} }
#metadata-thesis {
width:1000px;
}
/*# sourceMappingURL=stylesheet.css.map */ /*# sourceMappingURL=stylesheet.css.map */
.status { .status {
@ -621,3 +639,34 @@ input[type=checkbox]:checked ~ aside {
color: red; color: red;
font-size: 20px; font-size: 20px;
} }
/*reshuffle piles*/
.group_vowels {
width:200px;
height:400px;
border-style:solid;
position:absolute;
}
.group_photos {
width:200px;
height:400px;
border-style:solid;
position:absolute;
}
.group_extracts {
width:200px;
height:400px;
border-style:solid;
position:absolute;
}
.group_metadata {
width:200px;
height:400px;
border-style:solid;
position:absolute;
}

2
texts/dear_listener.txt
Unescape Escape View File

@ -1,4 +1,4 @@
<div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;"> <div style="background-color: white; width: 500px;border:1px red;border-style: dashed;padding: 10px;">
<p>Dear listener,</p> <p>Dear listener,</p>
you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice messages. <p>Maximum duration: 1 min</p> you are invited to <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">amplify<div class="tooltip-content-right"><div>Protesters in occupy wall street all together repeated the voice of the public speaker in order to amplify their voices. This is called "the human microphone"</div></div></div> parts of the podcasts that you find worthy of attention by repeating or annotate them with your own voice message. Amplification can happen through multiplication, through the gathering of multiple individual voices. <p>Maximum duration: 1 min</p>

73
thesis-angeliki.php
Unescape Escape View File

@ -4,6 +4,7 @@
<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/stylesheet.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>
<script src="js/jquery.ui.touch-punch.min.js"></script> <script src="js/jquery.ui.touch-punch.min.js"></script>
@ -20,7 +21,7 @@
<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 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 style="width:1800px; margin:0 auto;">
<div class="draggable" style="width: 700px !important;right: 100px;top: 200px;"> <div class="draggable scaleable-wrapper" style="width: 700px !important;right: 100px;top: 200px;">
<div> <div>
<p class="toc_title">Contents</p> <p class="toc_title">Contents</p>
<ul class="toc_list"> <ul class="toc_list">
@ -50,37 +51,49 @@
</div> </div>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;">
<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">
(workshops)
</div>
</div> </div>
<div class="draggable" style="top: 948.6px; right: 30px;"> <div class="draggable scaleable-wrapper" style="top: 948.6px; right: 30px;">
<h2 ><a href="">Diary of West Rotterdam</a></h2> <h2 ><a href="diary.php">Diary of West Rotterdam</a></h2>
<div class="drag-content">
(first experiments)
</div>
</div> </div>
<div class="draggable" style="top: 848.533px; right: 5px;"> <div class="draggable scaleable-wrapper" style="top: 848.533px; right: 5px;">
<h2 ><a href="player.php">Player</a></h2> <h2 ><a href="player.php">Player</a></h2>
<div class="drag-content">
(audio archive)
</div>
</div> </div>
<div class="draggable" style="top: 540px; right: 1900px;"> <div class="draggable scaleable-wrapper" style="top: 540px; right: 1900px;">
<h2 ><a href="index.php">About</a></h2> <h2 ><a href="index.php">About</a></h2>
<div class="drag-content">
(main page)
</div> </div>
</div>
<div class="draggable" style="top: 270px; right: 1300px;z-index: 1;"> <div class="draggable scaleable-wrapper" style="top: 270px; right: 1300px;z-index: 1;">
<h2 ><a href="podcast4.php">Podcast4</a></h2> <h2 ><a href="podcast4.php">Podcast4</a></h2>
</div> </div>
<div class="draggable" style="top: 220px; right: 10px;"> <div class="draggable scaleable-wrapper" style="top: 220px; right: 10px;">
<h2 ><a href="podcast1.php">Podcast1</a></h2> <h2 ><a href="podcast1.php">Podcast1</a></h2>
</div> </div>
<div class="draggable" style="top: 320px; right: 100px;"> <div class="draggable scaleable-wrapper" style="top: 320px; right: 100px;">
<h2 ><a href="podcast2.php">Podcast2</a></h2> <h2 ><a href="podcast2.php">Podcast2</a></h2>
</div> </div>
<div class="draggable" style="top: 420px; right: 80px;"> <div class="draggable scaleable-wrapper" style="top: 420px; right: 80px;">
<h2 ><a href="podcast3.php">Podcast3</a></h2> <h2 ><a href="podcast3.php">Podcast3</a></h2>
</div> </div>
<div class="draggable" style="top: 640px; right: 2000px; z-index: 9;"> <div class="draggable scaleable-wrapper active-draggable" style="top: 30%; left: 5%; z-index: 9;">
<h2 ><a 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>
@ -88,63 +101,63 @@
<!-- draggable images --> <!-- draggable images -->
<div class="draggable" 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="800px"></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" style="top: 3000px;left: 1247px;"> <div class="draggable scaleable-wrapper" style="top: 3000px;left: 1247px;">
<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 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></div></div></div>
<div class="draggable" 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="500px"></a><div class="tooltip-content-right"><div>Figure 3: Cartoon from Riana Dunkan
</div></div></div></div> </div></div></div></div>
<div class="draggable" 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="500px"></a><div class="tooltip-content-right"><div>Figure 4: Cartoon from Gonzalo Rocha
</div></div></div></div> </div></div></div></div>
<div class="draggable" style="top: 4150px;left: 1482px;"> <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="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></div></div></div> </div></div></div></div>
<div class="draggable" 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" 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="500px"></a><div class="tooltip-content-right"><div>Figure 7: 'Mikrophoniki' demonstration in Athens
</div></div></div></div> </div></div></div></div>
<div class="draggable" 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="500px"></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" 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="500px"></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" 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="500px"></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" 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="500px"></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 id="box_metadata" class="draggable" style="z-index:1;"> <div class="draggable scaleable-wrapper box_metadata" id="metadata-thesis" >
<p></p><p></p><p id="dashed">Name: Angeliki Diakrousi<br /> <p></p><p></p><p>Name: Angeliki Diakrousi<br />
</p><p id="dashed">Title: Let's Talk About Unspeakable Things<br /> </p><p>Title: Let's Talk About Unspeakable Things<br />
</p><p id="dashed">Student number: 0956090<br /> </p><p>Student number: 0956090<br />
</p><p id="dashed">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 /> </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 />
</p><p id="dashed">Adviser: Steve Rushton<br /> </p><p>Adviser: Steve Rushton<br />
</p><p id="dashed">Second Reader: Kate Briggs</p><p>Word count: 8380</p><p> </p><p></p><p> </p> </p><p>Second Reader: Kate Briggs</p><p>Word count: 8380</p><p> </p><p></p><p> </p>
</div> </div>
<div id="maintext"> <div id="maintext">

Write Preview
Loading…
Cancel
Save