@ -4,6 +4,7 @@
< 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/draggable.js" > < / script >
< script src = "js/main.js" > < / script >
< / head >
@ -73,143 +74,100 @@ $("#katalin").click(function(){
<!-- draggable audio tags/recordings -->
<!-- draggable audio tags/images -->
< section >
< div style = "position:absolute; top:15%; left:41%;" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > warming up @Leeszaal
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:12%; left:51%;" >
< audio controls src = "audio/leeszaal-meetings-choir.mp3" > < / audio > singing vowels @Leeszaal
< div class = "tooltip-content-down" >
< div class = "row" >
< div class = "column" > < img src = "images/vowels-20190328-leeszaal.jpg" width = "500px" >
< / div >
<!-- <div class="column"><img src="images/meeting - 20190328 - leeszaal - 5.JPG" width="500px">
< / div > -->
< / div >
< / div >
< / div >
< div class = "draggable" style = "position:absolute; top:12%; left:51%;width: 270px" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > < p > warming up @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:15%; left:41%; width: 270px" >
< audio controls src = "audio/leeszaal-meetings-choir.mp3" > < / audio >
< img src = "images/vowels-20190328-leeszaal.jpg" width = "270px" >
< p > singing vowels @Leeszaal< / p >
< / div >
< div style = "position:absolute; top:20%; left:63%;" >
< audio controls src = "audio/description-alex2.mp3" > < / audio > describing/annotating
< div class = "draggable" style = "position:absolute; top:20%; left:63%;width: 270px" >
< audio controls src = "audio/leeszaal-meeting-warming-20190523.mp3" > < / audio > < p > warming up @Leeszaal< / p >
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:30%; left:70%;" >
< audio controls src = "audio/finearts-meeting-discussion.mp3" > < / audio > discussing about voice in public @Fine Arts
< div class = "tooltip-content-down" >
< table >
< tr >
< td > < img src = "images/meeting-20190329-finearts-1.JPG" width = "500px" / >
< / td >
< / tr >
< / table >
< / div >
< div class = "draggable" style = "position:absolute; top:30%; left:70%;width: 270px" >
< audio controls src = "audio/finearts-meeting-discussion.mp3" > < / audio > < img src = "images/meeting-20190329-finearts-1.JPG" width = "270px" / >
< p > discussing about voice in public @Fine Arts< / p >
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:42%; left:75%;" >
< audio controls src = "audio/leeszaal-meetings-transcribing.mp3" > < / audio > transcribing vowels @Leeszaal
< div class = "tooltip-content-down" >
< div class = "row" >
< div class = "column" > < img src = "images/meeting-20190328-leeszaal-1.JPG" width = "500px" / >
< / div >
< / div >
< / div >
< / div >
< div class = "draggable" style = "position:absolute; top:42%; left:75%;width: 270px" >
< audio controls src = "audio/leeszaal-meetings-transcribing.mp3" > < / audio > < img src = "images/meeting-20190328-leeszaal-1.JPG" width = "270px" / >
< p > transcribing vowels @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:55%; left:69%;width: 270px" >
< audio controls src = "audio/finearts-meeting-choir.mp3" > < / audio > < img src = "images/vowels-20190329-finearts.jpg" width = "270px" / > < p > singing vowels @Fine Arts< / p >
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:55%; left:69%;" >
< audio controls src = "audio/finearts-meeting-choir.mp3" > < / audio > singing vowels @Fine Arts
< div class = "tooltip-content-down" >
< div class = "row" >
< div class = "column" > < img src = "images/vowels-20190329-finearts.jpg" width = "500px" / >
< / div >
< / div >
< / div >
< div class = "draggable" style = "position:absolute; top:65%; left:63%;width: 270px" >
< audio controls src = "audio/distort_leeszaal_20190523-1336.mp3" > < / audio >
< img src = "images/meeting-20190523-leeszaal-1.jpg" width = "270px" >
< p > singing vowels-distorted voice @Leeszaal< / p >
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:65%; left:63%;" >
< audio controls src = "audio/distort_leeszaal_20190523-1336.mp3" > < / audio > singing vowels-distorted voice @Leeszaal
< div class = "tooltip-content-up" >
< table >
< tr >
< / tr >
< / table >
< / div >
< div class = "draggable" style = "position:absolute; top:70%; left:53%;width: 270px" >
< audio controls src = "audio/distort_leeszaal_20190523-1341.mp3" > < / audio >
< img src = "images/meeting-20190523-leeszaal-2.jpg" width = "270px" >
< p > personal experiences-distorted voice @Leeszaal< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:23%; left:32%;width: 270px" >
< audio controls src = "audio/finearts-meeting-transcribing.mp3" > < / audio >
< img src = "images/meeting-20190329-finearts-2.JPG" width = "270px" / >
< p > transcribing vowels @Fine Arts< / p >
< / div >
< div style = "position:absolute; top:70%; left:53%;" >
< audio controls src = "audio/distort_leeszaal_20190523-1341.mp3" > < / audio > personal experiences-distorted voice @Leeszaal
< / div >
< div style = "position:absolute; top:57%; left:33%;;" >
< audio controls src = "audio/finearts-meeting-choirhigh.mp3" > < / audio > singing vowels (high) @Fine Arts
< / div >
< div style = "position:absolute; top:33%; left:26%;;" >
< audio controls src = "" > < / audio >
< / div >
< div class = "draggable" style = "position:absolute; top:27%; left:29%; width: 270px" >
< audio controls src = "audio/finearts-meeting-extracts.mp3" > < / audio >
< img src = "images/carson-extract.jpg" width = "270px" / >
< p > reading extracts @Fine Arts< / p >
< / div >
< div class = "draggable" style = "position:absolute; top:33%; left:26%;width: 270px;" >
< audio controls src = "audio/leeszaal-meeting-transcribing-20190523.mp3" > < / audio >
< img src = "images/meeting-20190523-leeszaal-4.jpg" width = "270px" >
< p > transcribing vowels @Leeszaal< / p >
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:46%; left:28%;" >
< audio controls src = "audio/leeszaal-meetings-discussion.mp3" > < / audio > discussing about voice in public @Leeszaal
< div class = "tooltip-content-up" >
< table >
< tr >
< td > < img src = "images/meeting-20190328-leeszaal-2.JPG" width = "500px" / >
< / td >
< / tr >
< / table >
< / div >
< div class = "draggable" style = "position:absolute; top:46%; left:28%; width: 270px" >
< audio controls src = "audio/leeszaal-meetings-discussion.mp3" > < / audio >
< img src = "images/meeting-20190328-leeszaal-2.JPG" width = "270px" / >
< p > discussing about voice in public @Leeszaal < / p >
< / div >
< div style = "position:absolute; top:66%; left:41%;;" >
< audio controls src = "audio/finearts-meeting-warming.mp3" > < / audio > warming up @Fine Arts
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:23%; left:32%;" >
< audio controls src = "audio/finearts-meeting-transcribing.mp3" > < / audio > transcribing vowels @Fine Arts
< div class = "tooltip-content-down" >
< table >
< tr >
< td > < img src = "images/meeting-20190329-finearts-2.JPG" width = "500px" / >
< / td >
< / tr >
< / table >
< / div >
< div class = "draggable" style = "position:absolute; top:57%; left:33%;width: 270px;" >
< audio controls src = "audio/finearts-meeting-choirhigh.mp3" > < / audio > < p > singing vowels (high) @Fine Arts< / p >
< / div >
< div class = "tooltip-wrap" style = "position:absolute; top:27%; left:29%;" >
< audio controls src = "audio/finearts-meeting-extracts.mp3" > < / audio > reading extracts @Fine Arts
< div class = "tooltip-content-down" >
< table >
< tr >
< td > < img src = "images/carson-extract.jpg" width = "500px" / >
< / td >
< td > < img src = "images/fresh1.jpg" width = "500px" / >
< / td >
< td > < img src = "images/fresh2.jpg" width = "500px" / >
< / td >
< / tr >
< / table >
< / div >
< div class = "draggable" style = "position:absolute; top:66%; left:41%;width: 270px;" >
< audio controls src = "audio/finearts-meeting-warming.mp3" > < / audio > < p > warming up @Fine Arts< / p >
< / div >
< / section >
< br >
<!-- soundwalk player -->
< section style = "margin-top: 800px !important;" >
<!-- soundwalk player -->
< section style = "margin-top: 1300px !important;" >
< div class = "tooltip-wrap" >
< audio style = "width: 100%;" id = "a1" controls src = "audio/selection-track-extracts-1.mp3" > < / audio >
< div class = "tooltip-content-up" >
@ -363,45 +321,6 @@ Oh, I hear children in the background crying</div>
< / section >
< div class = "container" >
< div class = "rowcircle" >
< span >
< div class = "tooltip-wrap" >
< audio controls src = "audio/finearts-meeting-discussion.mp3" > < / audio > discussing about voice in public @Fine Arts
< div class = "tooltip-content-down" >
< table >
< tr >
< td > < img src = "images/meeting-20190329-finearts-1.JPG" width = "500px" / >
< / td >
< / tr >
< / table >
< / div >
< / div >
< / span >
< span > < audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > warming up @Leeszaal< / audio > < / span >
< / div >
< div class = "rowcircle" >
< span > < audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > < / span >
< span > < audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > < / span >
< span > < audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio > < / span >
< / div >
< div class = "rowcircle" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< / div >
< div class = "rowcircle" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< / div >
< div class = "rowcircle" >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< audio controls src = "audio/leeszaal-meetings-warming.mp3" > < / audio >
< / div >
@ -410,27 +329,27 @@ Oh, I hear children in the background crying</div>
<!-- draggable menu -->
< div class = "draggable " style = "top:60%;left: 0; ">
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top:70%;left: 5; width: 300px; font-size: 20px ">
< h2 > < a href = "player.html" target = "_blank" > Diary of West Rotterdam< / a > < / h2 >
< div class = "drag-content" > 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/" target = "_blank" > 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.
< / div > < / div >
< div class = "draggable " style = "top:700px; right: 0px;">
< / div >
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper " style = "top:700px; right: 5px;width: 25 0px; font-size: 16px ">
< h2 > < a href = "amplification.html" target = "_blank" > Amplification of female voices< / a > < / h2 >
< / div >
< div class = "draggable " style = "top: 316.833px; left: 0;">
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper " style = "top: 316.833px; left: 1 0;">
< h2 > < a href = "player.html" target = "_blank" > Player< / a > < / h2 >
< div class = "drag-content" > The player is an audio collection of voices and sounds from the meetings I have co-organised, references from my research, various internet sources, and soundwalks that I have done. It is a digital utterance that intends to be a reminder to the first forms of excluded female vocal expressions. I am using this material in my podcasts by mixing and overlayering them and creating a form of narrative with my own voice. < / div >
< / div >
< div class = "draggable " style = "top: 200px; right: 0px; ">
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper " style = "top: 200px; right: 0px; width: 150px; font-size: 16px ">
< h2 > < a href = "index.php" target = "_blank" > About< / a > < / h2 >
< / div >
< div class = "draggable " style = "top: 100px; right: 0px;">
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper " style = "top: 100px; right: 5px; width: 15 0px; font-size: 16px ">
< h2 > < a href = "podcast1.php" target = "_blank" > Podcasts< / a > < / h2 >
< / div >
< div class = "draggable " style = "top: 600px; right: 0px; z-index: 9; ">
< div class = "draggable scaleable-wrapper" id = "scaleable-wrapper" style = "top: 400px; right: 0px; z-index: 9;width: 250px; font-size: 16px ">
< h2 > < a href = "texts/thesis/thesis-angeliki.html" target = "_blank" > "Let' s Talk About Unspeakable Things"< / a > < / h2 >
< / div >