edit flying notes menu throughout all pages
parent
efea7f6390
commit
62145bba86
@ -1,141 +1,86 @@
|
||||
<!DOCTYPE html>
|
||||
|
||||
<link href="styles/stylesheet.css" rel="stylesheet" type="text/css">
|
||||
<style type="text/css">
|
||||
body {font-family: "Old Standard TT"; font-size: 20px; line-height: 1.4; letter-spacing: 1px;}
|
||||
h2 {
|
||||
text-align: center;
|
||||
letter-spacing: 4px;
|
||||
font-size: 28px;}
|
||||
section {margin-bottom: 100px; margin-top: 50px;}
|
||||
table, th, td {vertical-align: top; border-collapse: separate; padding: 6px;}
|
||||
button {width: 100px;}
|
||||
.short-description{
|
||||
margin-left: 30%;
|
||||
margin-right: 30%;
|
||||
text-align: center;
|
||||
}
|
||||
a {
|
||||
text-decoration:none;
|
||||
}
|
||||
div.gallery {
|
||||
margin: 1px;
|
||||
border: 1px solid #ccc;
|
||||
float: left;
|
||||
width: 31%;
|
||||
}
|
||||
|
||||
div.gallery:hover {
|
||||
border: 1px solid #777;
|
||||
}
|
||||
|
||||
div.gallery img {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
}
|
||||
|
||||
div.desc {
|
||||
padding: 15px;
|
||||
font-size: 14px;
|
||||
/* text-align: left;*/
|
||||
font-style: italic;
|
||||
}
|
||||
.audio-mini {
|
||||
width: 50px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<html>
|
||||
<head>
|
||||
<section>
|
||||
<h2 >Amplification of female voices</h2>
|
||||
<div class="short-description">
|
||||
<div>How can we engage politically with the exclusion of specific voices from the public sphere? Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am 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. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- and try vocal exercises and reading in moments of Leeszaal.<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?</div></div></div>personal associations and experiences with voice in public, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts.</div>
|
||||
<p>
|
||||
<a href="extracts.html" target="_blank">extracts</a>
|
||||
</p>
|
||||
<p>
|
||||
<a href="../index.html">Utterance</a>
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
<link href="styles/stylesheet.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/main.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<table style="width:100%">
|
||||
|
||||
|
||||
|
||||
<!-- <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 id="resize" class="draggable ui-draggable-handle" style="top: 99px; left: 868px; line-height: 0 !important;"><img src="images/vowels-leeszaal-test.jpg" width="400px"></img></div>
|
||||
|
||||
<div id="resize" class="draggable ui-draggable-handle" style="top: 475px; left: 1049px;line-height: 0 !important;"><img src="images/vowels-20190322-leeszaal.jpg" width="400px"></img></div>
|
||||
|
||||
<div id="resize" class="draggable ui-draggable-handle" style="top: 119px; left: 1405px;line-height: 0 !important;"><img src="images/vowels-20190328-leeszaal.jpg" width="400px"></img></div>
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 228px; left: 608px;"><img src="images/vowels-20190329-finearts.jpg" width="400px"></img></div>
|
||||
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 637px; left: 1106px;"><img src="images/meeting-20190328-leeszaal-5.JPG" width="400px"></img></div>
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 189px; left: 390px;"><img src="images/meeting-20190329-finearts-2.JPG" width="400px"></img></div>
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 574px; left: 1334px;"><img src="images/meeting-20190329-finearts-1.JPG" width="400px"></img></div>
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 570px; left: 404px;"><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: 885px;"><img src="images/meeting-20190328-leeszaal-1.JPG" width="400px"></img></div>
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 384px; left: 61px;"><img src="images/meeting-20190328-leeszaal-2.JPG" width="400px"></img></div>
|
||||
|
||||
<div id="img" class="draggable ui-draggable-handle" style="top: 225px; left: 928px;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">
|
||||
<table style="margin-top:1181px !important; margin-left: 10% !important; padding: 20px;box-shadow: inset 0px 0px 20px rgba(0,0,0,0.5); background-color: #E4E1E1;">
|
||||
<tr>
|
||||
<td align="right">
|
||||
<div class="desc" align="right">first experiments</div>
|
||||
<img src="images/vowels-leeszaal-test.jpg" width="70%"></img><img src="images/vowels-20190322-leeszaal.jpg" width="70%"></img>
|
||||
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/carson-extract.jpg" width="600px" /></a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="desc">at Leeszaal</div>
|
||||
<img src="images/vowels-20190328-leeszaal.jpg" width="100%"></img><audio controls class="audio-mini" src="audio/leeszaal-meetings-choir.mp3"></audio>
|
||||
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/fresh1.jpg" width="600px" /></a>
|
||||
</td>
|
||||
<td>
|
||||
<div class="desc">at fine arts</div>
|
||||
<img src="images/vowels-20190329-finearts.jpg" width="100%"></img><audio controls class="audio-mini" src="audio/finearts-meeting-choir.mp3"></audio>
|
||||
<td><a href="images/carson-extract.jpg" target="_blank"><img src="images/fresh2.jpg" width="600px" /></a>
|
||||
</td>
|
||||
</tr>
|
||||
</table>
|
||||
<br>
|
||||
<br>
|
||||
<br>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="gallery">
|
||||
<a target="_blank" href="images/meeting-20190328-leeszaal-2.JPG">
|
||||
<img src="images/meeting-20190328-leeszaal-2.JPG" width="50%">
|
||||
</a>
|
||||
</div>
|
||||
<div class="gallery">
|
||||
<a target="_blank" href="images/meeting-20190328-leeszaal-1.JPG">
|
||||
<img src="images/meeting-20190328-leeszaal-1.JPG" width="50%">
|
||||
</a>
|
||||
<!-- draggable menu-->
|
||||
<div class="draggable" style="width: 500px; top: 20px; right: 0px;">
|
||||
<h2><a href="amplification.html" target="_blank">Amplification of female voices</a></h2>
|
||||
<div class="drag-content">How can we engage politically with the exclusion of specific voices from the public sphere? Here I document my attempts to create a safe common space of trying methods and discussing that topic in Leeszaal, an open library that I consider a diverse public space. I am 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. Some methods are vocal performances in situ, the "human microphone", speech acts, listening practices, making podcasts, mediating speech, transform our voices, situated experiments. I am doing that together with Christina Karagianni, who is also from Greece and with whom I share similar experiences of silencing. We combine our practices -her practice lies on choreography and dance and mine on social interaction, voice and sound- and try vocal exercises and reading in moments of Leeszaal.<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, warm up, say a sentence of personal experience in any language, transcribe only the vowels, read back the vowels, read outloud all together the score of vowels, repeat sentences with distorted voice, make podcasts.</div>
|
||||
</div>
|
||||
|
||||
<div class="gallery">
|
||||
<a target="_blank" href="images/meeting-20190328-leeszaal-3.JPG.jpg">
|
||||
<img src="images/meeting-20190328-leeszaal-3.JPG.jpg" width="50%">
|
||||
</a>
|
||||
<div class="draggable" style="top: 1070px; right: 0px;">
|
||||
<h2 ><a href="" target="_blank">Diary of West Rotterdam</a></h2>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="gallery">
|
||||
<a target="_blank" href="images/meeting-20190329-finearts-1.JPG">
|
||||
<img src="images/meeting-20190329-finearts-1.JPG" width="50%">
|
||||
</a>
|
||||
<div class="draggable" style="top: 1000px; right: 0px;">
|
||||
<h2 ><a href="player.html" target="_blank">Player</a></h2>
|
||||
</div>
|
||||
<div class="gallery">
|
||||
<a target="_blank" href="images/meeting-20190329-finearts-2.JPG">
|
||||
<img src="images/meeting-20190329-finearts-2.JPG" width="50%">
|
||||
</a>
|
||||
<div class="draggable" style="top: 800px; right: 0px;">
|
||||
<h2 ><a href="podcast1.php" target="_blank">About</a></h2>
|
||||
</div>
|
||||
<div class="gallery">
|
||||
<a target="_blank" href="images/meeting-20190328-leeszaal-5.JPG">
|
||||
<img src="images/meeting-20190328-leeszaal-5.JPG" width="50%">
|
||||
</a>
|
||||
|
||||
<div class="draggable" style="top: 700px; right: 0px;">
|
||||
<h2 ><a href="podcast1.php" target="_blank">Podcasts</a></h2>
|
||||
</div>
|
||||
<div class="draggable" style="top: 900px; right: 0px; z-index: 9;">
|
||||
<h2 ><a href="texts/thesis/thesis-angeliki.html" target="_blank">Let' s Talk About Unspeakable Things</a></h2>
|
||||
</div>
|
||||
|
||||
|
||||
<!-- end draggable -->
|
||||
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/leeszaal-meetings-warming.mp3"></audio></div>
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/leeszaal-meetings-discussion.mp3"></audio></div>
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/leeszaal-meetings-transcribing.mp3"></audio></div>
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/finearts-meeting-warming.mp3"></audio></div>
|
||||
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/finearts-meeting-extracts.mp3"></audio></div>
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/finearts-meeting-discussion.mp3"></audio></div>
|
||||
<div class="desc">
|
||||
<audio controls class="audio-mini" src="audio/finearts-meeting-transcribing.mp3"></audio></div>
|
||||
|
||||
|
||||
<section>
|
||||
<iframe align="left" src="https://pad.xpub.nl/p/tender_reading_meeting" width="70%" height="700px"></iframe>
|
||||
<img width="23%" src="http://pzwiki.wdka.nl/mw-mediadesign/images/6/69/Poster_unpacking.png"></img>
|
||||
</section>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 8.7 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
@ -0,0 +1,230 @@
|
||||
// designed by Angeliki Diakrousi
|
||||
// draggable
|
||||
|
||||
$(document).ready(function() {
|
||||
var a = 3;
|
||||
$('.draggable').draggable({
|
||||
start: function(event, ui) { $(this).css("z-index", a++); }
|
||||
});
|
||||
$('#resize').resizable({handles: 'e'}).draggable({
|
||||
start: function(event, ui) { $(this).css("z-index", a++); }
|
||||
});;
|
||||
|
||||
});
|
||||
|
||||
|
||||
// draggable video pop up
|
||||
|
||||
$("#angela").click(function(){
|
||||
$("#show").fadeIn()
|
||||
console.log("around")
|
||||
|
||||
})
|
||||
|
||||
|
||||
|
||||
// scripts for tab button
|
||||
|
||||
function openCity(evt, cityName) {
|
||||
var i, tabcontent, tablinks;
|
||||
tabcontent = document.getElementsByClassName("tabcontent");
|
||||
for (i = 0; i < tabcontent.length; i++) {
|
||||
tabcontent[i].style.display = "none";
|
||||
}
|
||||
tablinks = document.getElementsByClassName("tablinks");
|
||||
for (i = 0; i < tablinks.length; i++) {
|
||||
tablinks[i].className = tablinks[i].className.replace(" active", "");
|
||||
}
|
||||
document.getElementById(cityName).style.display = "block";
|
||||
evt.currentTarget.className += " active";
|
||||
}
|
||||
|
||||
|
||||
// <!-- scripts for the soundwalk player-->
|
||||
var a1 = document.getElementById("a1"),
|
||||
a2 = document.getElementById("a2"),
|
||||
but = document.getElementById("but");
|
||||
but.addEventListener("click", function () {
|
||||
if (a1.paused) {
|
||||
a1.play();
|
||||
a2.play();
|
||||
a3.play();
|
||||
a4.play();
|
||||
|
||||
} else {
|
||||
a1.pause();
|
||||
a2.pause();
|
||||
a3.pause();
|
||||
a4.pause();
|
||||
}
|
||||
|
||||
})
|
||||
a1.addEventListener("play", function(){
|
||||
but.innerHTML="pause"
|
||||
})
|
||||
|
||||
a1.addEventListener("pause", function(){
|
||||
but.innerHTML="listen"
|
||||
})
|
||||
|
||||
var links=document.querySelectorAll("div.sub a")
|
||||
for (var i=0, l=links.length; i<l; i++) {
|
||||
var a = links[i];
|
||||
a.addEventListener("click", function(e) {
|
||||
console.log("CLICK", this);
|
||||
var t=parseFloat(this.getAttribute("data-start"))
|
||||
a1.currentTime=t
|
||||
a2.currentTime=t
|
||||
a3.currentTime=t
|
||||
a4.currentTime=t
|
||||
e.preventDefault()
|
||||
a1.play();
|
||||
a2.play();
|
||||
a3.play();
|
||||
a4.play();
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
|
||||
|
||||
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"
|
||||
})
|
||||
|
||||
|
||||
|
||||
var b1 = document.getElementById("b1"),
|
||||
b2 = document.getElementById("b2"),
|
||||
butB = document.getElementById("butB");
|
||||
butB.addEventListener("click", function () {
|
||||
if (b1.paused) {
|
||||
b1.play();
|
||||
b2.play();
|
||||
b3.play();
|
||||
|
||||
} else {
|
||||
b1.pause();
|
||||
b2.pause();
|
||||
b3.pause();
|
||||
}
|
||||
|
||||
})
|
||||
b1.addEventListener("play", function(){
|
||||
butB.innerHTML="pause"
|
||||
})
|
||||
|
||||
b1.addEventListener("pause", function(){
|
||||
butB.innerHTML="listen"
|
||||
})
|
||||
|
||||
var links=document.querySelectorAll("div.subB a")
|
||||
for (var i=0, l=links.length; i<l; i++) {
|
||||
var b = links[i];
|
||||
b.addEventListener("click", function(e) {
|
||||
console.log("CLICK", this);
|
||||
var t=parseFloat(this.getAttribute("data-start"))
|
||||
b1.currentTime=t
|
||||
b2.currentTime=t
|
||||
b3.currentTime=t
|
||||
e.preventDefault()
|
||||
b1.play();
|
||||
b2.play();
|
||||
b3.play();
|
||||
})
|
||||
|
||||
}
|
||||
|
||||
var dialogueTimings = [0,8,16,28,33,50,77,120,136],
|
||||
dialogues = document.querySelectorAll('#transcript>div'),
|
||||
transcriptWrapper = document.querySelector('#transcriptWrapper'),
|
||||
audio = document.querySelector('#a2'),
|
||||
previousDialogueTime = -1;
|
||||
|
||||
function playTranscript() {
|
||||
|
||||
var currentDialogueTime = Math.max.apply(Math, dialogueTimings.filter(function(v){return v <= audio.currentTime}));
|
||||
|
||||
if(previousDialogueTime !== currentDialogueTime) {
|
||||
previousDialogueTime = currentDialogueTime;
|
||||
var currentDialogue = dialogues[dialogueTimings.indexOf(currentDialogueTime)];
|
||||
transcriptWrapper.scrollTop = currentDialogue.offsetTop - 50;
|
||||
var previousDialogue = document.getElementsByClassName('speaking')[0];
|
||||
if(previousDialogue !== undefined)
|
||||
previousDialogue.className = previousDialogue.className.replace('speaking','');
|
||||
currentDialogue.className +=' speaking';
|
||||
}
|
||||
}
|
||||
;
|
||||
|
||||
var dialogueTimings3 = [1,10,13,20,27,31,53,58,135],
|
||||
dialogues3 = document.querySelectorAll('#transcript3>div'),
|
||||
transcriptWrapper3 = document.querySelector('#transcriptWrapper3'),
|
||||
audio = document.querySelector('#a3'),
|
||||
previousDialogueTime = -1;
|
||||
|
||||
function playTranscript3() {
|
||||
|
||||
var currentDialogueTime = Math.max.apply(Math, dialogueTimings3.filter(function(v){return v <= audio.currentTime}));
|
||||
|
||||
if(previousDialogueTime !== currentDialogueTime) {
|
||||
previousDialogueTime = currentDialogueTime;
|
||||
var currentDialogue = dialogues3[dialogueTimings3.indexOf(currentDialogueTime)];
|
||||
transcriptWrapper3.scrollTop = currentDialogue.offsetTop - 50;
|
||||
var previousDialogue = document.getElementsByClassName('speaking3')[0];
|
||||
if(previousDialogue !== undefined)
|
||||
previousDialogue.className = previousDialogue.className.replace('speaking3','');
|
||||
currentDialogue.className +=' speaking3';
|
||||
}
|
||||
}
|
||||
;
|
||||
|
||||
// dropdown menu
|
||||
/* When the user clicks on the button,
|
||||
toggle between hiding and showing the dropdown content */
|
||||
function myFunction2() {
|
||||
document.getElementById("myDropdown2").classList.toggle("show2");
|
||||
}
|
||||
|
||||
// Close the dropdown if the user clicks outside of it
|
||||
window.onclick2 = function(event) {
|
||||
if (!event.target.matches('.dropbtn2')) {
|
||||
var dropdowns = document.getElementsByClassName("dropdown-content2");
|
||||
var i;
|
||||
for (i = 0; i < dropdowns.length; i++) {
|
||||
var openDropdown = dropdowns[i];
|
||||
if (openDropdown.classList.contains('show2')) {
|
||||
openDropdown.classList.remove('show2');
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue