added % size in widescreen.css and improved texts and transcriptions

master
Angeliki 6 years ago
parent 10307c3a42
commit e985b465eb

@ -43,7 +43,7 @@
</div> </div>
<div class="draggable scaleable-wrapper"style="top:3%;left:72%; width: 25%; font-size: 100%"> <div class="draggable scaleable-wrapper"style="top:3%;left:72%; width: 25%; font-size: 100%">
<h2 style="font-size: 120%;"><a href="amplification.php" >Amplification of female voices</a></h2> <h2 style="font-size: 150%;"><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>
@ -83,20 +83,13 @@
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper active-draggable" style="top:18%;left:6%;" >
<h2><a class="active" href="index.php" >About</a></h2>
<div class="drag-content">
<?php include 'texts/about.txt'; ?>
</div>
</div>
<!-- colophon --> <!-- colophon -->
<div class="draggable scaleable-wrapper box_metadata" style="top:81%;left:3%;" > <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>
<li>https://xpub.nl</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> <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, XPUB comrades and all my friends with whom I had interesting discussions that pushed my research further.</li>
</div> </div>
<div class="draggable scaleable-wrapper" style="top:64%;left:25%;" > <div class="draggable scaleable-wrapper" style="top:64%;left:25%;" >
@ -105,6 +98,14 @@
<?php include 'texts/thesis-summary.txt'; ?> <?php include 'texts/thesis-summary.txt'; ?>
</div> </div>
</div> </div>
<div class="draggable scaleable-wrapper active-draggable" style="top:18%;left:6%;" >
<h2><a class="active" href="index.php" >About</a></h2>
<div class="drag-content">
<?php include 'texts/about.txt'; ?>
</div>
</div>
<!-- end draggable --> <!-- end draggable -->

@ -91,38 +91,6 @@ for (var i=0, l=links.length; i<l; i++) {
var interrupt = document.getElementById("interrupt");
butI = document.getElementById("butI");
butI.addEventListener("click", function () {
if (interrupt.paused) {
b1.pause();
b2.pause();
b3.pause();
a1.pause();
a2.pause();
a3.pause();
a4.pause();
interrupt.play();
} else {
interrupt.pause();
a1.play();
a2.play();
a3.play();
a4.play();
b1.play();
b2.play();
b3.play();
}
})
interrupt.addEventListener("play", function(){
butI.innerHTML="stop interrupt"
})
interrupt.addEventListener("pause", function(){
butI.innerHTML="interrupt"
})

@ -15,6 +15,7 @@
<body> <body>
<section style="margin-bottom: 20%;">
<!-- draggable youtube links and other --> <!-- draggable youtube links and other -->
<!-- sources --> <!-- sources -->
<div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500px" height="400px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div> <div id="show1" class="draggable"><span onclick="this.parentElement.style.display='none'" class="topleft">&times</span><iframe width="500px" height="400px" src="https://www.youtube.com/embed/HlvfPizooII" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe></div>
@ -71,18 +72,9 @@ $("#katalin").click(function(){
console.log("around") console.log("around")
}); });
</script> </script>
<!-- draggable audio tags/images --> <!-- draggable audio tags/images -->
<section>
<div class="draggable" style="position:absolute; top:6%; left:51%;width: 13%"> <div class="draggable" style="position:absolute; top:6%; left:51%;width: 13%">
<audio controls src="audio/leeszaal-meetings-warming.mp3" class="audio-tag"></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">
@ -275,13 +267,13 @@ $("#katalin").click(function(){
<!-- soundwalk player --> <!-- soundwalk player -->
<section style="margin-top: 60% !important;">
<div class="draggable full-width" style="top: 140%; left:0.2%">
<div class="tooltip-wrap"> <div class="tooltip-wrap">
<audio style="width: 100%;" id="a1" controls src="audio/selection-track-extracts-1.mp3" class="audio-tag"></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 audio recordings collected while wandering around the area of Leeszaal</div>
</div> </div>
</div> </div>
@ -355,14 +347,16 @@ Oh, I hear children in the background crying</div>
</div> </div>
</div></div> </div></div>
<button id="but">listen</button> <button id="but">listen</button>
</div>
<br><br> <br><br>
<div class="draggable full-width" style="top: 170%; left:0.2%">
<!-- 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" class="audio-tag"></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..." --> <div>selection of audio recordings collected while wandering around the area of Leeszaal</div>
</div> </div>
</div> </div>
@ -426,7 +420,8 @@ Oh, I hear children in the background crying</div>
</div></div> </div></div>
<button id="butB">listen</button> <button id="butB">listen</button>
</section> </div>

@ -18,26 +18,26 @@
</h3> </h3>
<!-- draggable menu--> <!-- draggable menu-->
<div class="draggable scaleable-wrapper" style="top: 740px; right: 300px;"> <div class="draggable scaleable-wrapper" style="top: 110%; right: 3%;">
<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: 130%; right: 7%;">
<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: 90%; right: 5%;">
<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: 92%; 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)
@ -81,8 +81,9 @@ $files = glob("podcasts/podcast1/*.mp3");
for ($i=0; $i<count($files); $i++) for ($i=0; $i<count($files); $i++)
{$num = $files[$i]; {$num = $files[$i];
$var1 = $_GET["files"]["name"]; $var1 = $_GET["files"]["name"];
echo '<td><div class="tooltip-wrap"><audio src='.$num.' controls></audio><div class="tooltip-content-down">';include $num.'.txt'; echo '<td><div class="tooltip-wrap no-underline"><audio src='.$num.' controls></audio><div class="tooltip-content-down"><div class="left_col"><h3>NARRATOR</h3>';include $num.'.txt';
echo '</div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">'; echo '</div><div class="right_col"><h3>SPEAKERS</h3>'; include $num.'-M.txt';
echo '</div></div><br /><div style="font-size:14px;line-height:1;text-align: left;max-width:280px;">';
include $num.'-METADATA.txt'; include $num.'-METADATA.txt';
echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?> echo '<br /><a href='.$num.' download='.$var1.'>download</a></div></div></td>'; } ?>
</tr></table> </tr></table>

@ -10,8 +10,7 @@ body {
} }
section { section {
margin-bottom: 50px; display: block;
margin-top: 20px;
} }
a { a {
@ -22,12 +21,12 @@ a {
.active { .active {
color: red; color: red;
font-size: 120% ; font-size: 125% ;
} }
.active-draggable{ .active-draggable{
width: 30% !important; width: 30% !important;
font-size: 110%; font-size: 130%;
} }
a img { a img {
@ -57,7 +56,7 @@ h1 {
h2 { h2 {
text-align: center; text-align: center;
letter-spacing: 4px; letter-spacing: 4px;
font-size: 120%; font-size: 135%;
margin: 5px; margin: 5px;
margin-bottom: 10px; margin-bottom: 10px;
color: red; color: red;
@ -343,13 +342,17 @@ input[type=checkbox]:checked ~ aside {
text-decoration: underline; text-decoration: underline;
} }
.no-underline {
text-decoration: none !important;
}
.tooltip-wrap .tooltip-content-down { .tooltip-wrap .tooltip-content-down {
display: none; display: none;
position: absolute; position: absolute;
z-index: 1; z-index: 1;
top: 50%; top: 25%;
/*bottom: 100%;*/ /*bottom: 100%;*/
left: 50%; left: 0%;
/*right: 100%;*/ /*right: 100%;*/
padding: 0.2em; padding: 0.2em;
background-color: white; background-color: white;
@ -358,7 +361,8 @@ input[type=checkbox]:checked ~ aside {
border-style: solid; border-style: solid;
border-color: black; border-color: black;
text-align: left; text-align: left;
min-width:200%; min-width:300%;
font-size: 80%;
} }
.tooltip-wrap .tooltip-content-right { .tooltip-wrap .tooltip-content-right {
@ -532,6 +536,10 @@ input[type=checkbox]:checked ~ aside {
/*margin-right: 90px;*/ /*margin-right: 90px;*/
} }
.full-width {
width: 100% !important;
}
.draggable { .draggable {
box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2); box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.2);
background-color: white; background-color: white;
@ -673,4 +681,15 @@ li, #angela, #judith, #laurie, #dana, #katalin {
width: 100%; width: 100%;
} }
.left_col {
float:left;
margin-left: 0.8%;
border-right: 1px dashed grey;
width:49%;
}
.right_col {
float:right;
width:49%;
}
/*}*/ /*}*/

@ -1 +1,6 @@
'Let's amplify unspeakable things' is an online platform of exploration and research, regarding voice in public and its amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational. It includes a set of <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect and difficulties, of a project like that reveals? The website consists of different web-audio implementations</div></div></div>that revisit and overlay an archive of audio recordings produced in situated meetings and soundwalks, and media sources from a body of research. 'Let's amplify unspeakable things' is based on the concept that amplification can create presence through repetition and multiplication. 'Let's Amplify Unspeakable Things' is an online platform of exploration and research, regarding female voices in public and their amplification, developed by Angeliki Diakrousi. It creates a space for excluded voices to be explored, that questions the establishment of authoritative voices — which construct exclusive speech platforms and binaries, along the assumption that voices have to be rational. It includes a set of <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">podcasts <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect and difficulties, of a project like that reveals? The website consists of different web-audio implementations</div></div></div>that revisit and overlay an archive of audio recordings, produced in situated<div class="tooltip-wrap" style="display: inline;text-decoration:underline;">workshops<div class="tooltip-content-right" ><div></div></div></div> and soundwalks, and media sources from a body of research. 'Let's Amplify Unspeakable Things' is based on the concept that amplification can provide presence through repetition and multiplication, as the structure of the workshops and the website reveals. The project itself is a process of feedback and iteration of actions, throughout a period of four months, situated around the space of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> and <a href="https://hub.xpub.nl/">hub.xpub.nl</a>. It exists in between the friction of institutions (a public library and an academy) and different public spheres (wereldvrouwen, academic), and it aims to go beyond their binaries.

@ -1 +1,3 @@
This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? We are borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. Elements from the meetings: discuss previous material, reading extracts in random order, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">discuss <div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>personal associations and experiences with voice in public, warming up, say a sentence of personal experience in any language, transcribe only the vowels of it, read back the vowels, read outloud all together the score of vowels, speak with distorted voice, make podcasts. The produced material is being included in an audio archive, the player. This is a documentation of a series of meetings/workshops I am organising together with Christina Karagianni. Our intentions come from personal experiences and we seek to explore the silencing of excluded voices, and go beyond their barriers. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- in moments of <a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a>, an open local library, a public space of diversity. How can we engage politically with the exclusion of specific voices from the public sphere? We are borrowing methods from feminist groups and protest movements and vocal warming up exercises by Pauline Oliveros. For example, protesters would amplify the speaker's voice by repeating collectively their speech to make their presence visible. Feminists would create safe spaces where women could speak about domestic violence and make a dialogue based on listening. <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">We invite <div class="tooltip-content-right" ><div>how we should approch the gender terminology and false association with voice when inviting people? Should it be about femme sounding? Female voice? </div></div></div>people from Leeszaal and our environment, who find themselves related and interested to this topic. The produced material is being included in an audio archive, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">player.<div class="tooltip-content-right" ><div>what conflicts or frictions the technical aspect provokes? web-audio, recordings</div></div></div>

@ -1,4 +1,5 @@
<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 message. Amplification can happen through multiplication, through the gathering of multiple individual voices. <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 repetition and multiplication, through the gathering of multiple individual voices repeating fragments of situations. <p>Maximum duration: 1 min</p>

@ -1 +1 @@
I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space. This is a diary from my first experiments. It includes mostly material from my walks. I recorded sounds from the West Rotterdam, <div class="tooltip-wrap" style="display: inline;text-decoration:underline;">while walking around the neighborhood of <div class="tooltip-content-down" ><img width="300px" src="images/soundwalk-photo1.jpg" /><br /><br /><img width="300px" src="images/soundwalk-photo3.jpg" /></div></div><a href="http://www.leeszaalrotterdamwest.nl/" >Leeszaal</a> for several days. This action was part of my first experiments when I was in attempt to understand how gender binaries regarding voice are reflected in space, especially public space.

@ -165,7 +165,7 @@
<!-- 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" style="left:1%;" >
<li>Author: Angeliki Diakrousi</li> <li>Author: Angeliki Diakrousi</li>
<li>Title: Let's Talk About Unspeakable Things</li> <li>Title: Let's Talk About Unspeakable Things</li>
<li>Student number: 0956090</li> <li>Student number: 0956090</li>

Loading…
Cancel
Save