camilo
/
attempting-diffraction
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

questions

Browse Source
master
camilo 3 years ago
parent 790985ed80
commit 22a86bd0e6
7 changed files with 627 additions and 0 deletions
Show Stats Download Patch File Download Diff File

BIN
questions/fonts/EBGaramond12-Regular.ttf
View File

Binary file not shown.

BIN
questions/fonts/Poppins-Regular.ttf
View File

Binary file not shown.

BIN
questions/fonts/YoungSerif-Regular.otf
View File

Binary file not shown.

BIN
questions/fonts/whois-mono.ttf
View File

Binary file not shown.

189
questions/index.html
Unescape Escape View File

@ -0,0 +1,189 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Refresh" content="600">
<title></title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="popup">
Dear Practitioner,
<br>What type of questions are part of your publishing practice?
<br>What is beyond the what, why, how, where, to whom questions?
<br>
<br>
<b>**Reflective Thought Process**</b>
<br>
A reflective approach to publishing will focus on each question in a referencial way, it follows a clear path on solving the problem and reduces it to concrete decisions. For example, if you have an archive of photos you would like to publish, when it comes to urgency, you would ask yourself: why do I want to expose this? What are my reasons to circulate this material? In a hypothetical scenario you could answer: because they are the historical memory of a forgotten event, and you would like to remark or highlight what happened. <br>
<br>
<b>**Diffractive Thought Process**</b>
<br>
I imagine that a diffractive approach to the same scenario would not stop itself in answering the question of urgency, and instead it would actually answer with another question. How are those reasons connected with my publishing actions? How could each of these questions relate to each other? A diffractive approach may be frustrating because it tends to stay in-concrete bouncing without finding solutions. But a diffractive approach is not antagonistic to a reflective one. So reflection can be used as needed. Diffraction just focuses on shed light on creativity *blind spots*. Those moments in the project that it has not been seen yet. It calls for *imagination* and *magic thought* where the irrationality of some questions struggles with being concrete. **It is abstract in its resolution but factual in its contingency.** <br>
<br>
This is a work in progress that evolves with the project and aims to be a tool that will help in publishing processes. What you are reading is one example of what I imagine this tool can be.
<br>
<br>
Thank you for reading.
<br>
<br>
<p onclick="popup_close()"><b>CLOSE</b></p>
</div>
<div class="questions">
<!-- -----------------Left----------------- -->
<div class="container" id="left">
<div id="project_what" class="cell half">
<form action="">
<label for="proj_what">1. What is the content to publish? ⤷</label>
<!-- <input type="text" id="proj_what" name="what" placeholder=""> -->
<ul id="proj_what_input">
<li>> Bird sounds, description and information related to each bird, interviews of inhabitants.</li>
<li>> The research will mostly be produced in audio format.</li>
</ul>
</form>
</div>
<div id="project_why" class="cell half">
<form action="">
<label for="proj_why">2. Why do we want to publish it? ⤷</label>
<!-- <input type="text" id="proj_why" name="why" placeholder=""> -->
<ul id="proj_why_input">
<li>> As an act of pedagogy on local fauna</li>
<li>> To promote awareness on the preservation of bird species.</li>
<li>> To create a first archive for the future of current sound maps of the city</li>
<li>> To motivate the construction of sound imaginaries beyond the visual</li>
</ul>
</form>
</div>
</div>
<!-- -----------------Left----------------- -->
<!-- -----------------Middle----------------- -->
<div class="container" id="middle">
<div id="title" class="cell">
<div id="title_text">
Questions of Publishing
</div>
<button id="info_icon" onclick="popup()">
?
</button>
</div>
<div id="ref_diff" class="cell">
<button id="ref">
Reflective Thought Process
</button>
<div class="separator"></div>
<button id="diff" onclick="next_no_1()">
Diffractive Thought Process
</button>
</div>
<div id="project_title" class="cell">
<form action="">
<label for="proj_title">Title ⤷</label>
<!-- <input type="text" id="proj_title" name="title" placeholder=""> -->
<p id="proj_title_input">Does it have a title?</p>
</form>
</div>
<div id="project_des" class="cell">
<form action="">
<label for="proj_des">Description ⤷</label>
<!-- <input type="text" id="proj_des" name="des" placeholder=""> -->
<p id="proj_des_input">A collective of biologists, artists and researchers, interested into how bird species are disappearing in the neighbour La candelaria in Bogota has the idea to make a sound archive of the species that are inhabiting the area. As a starting point, they have a general old sound archive from Bogotá made by an ornithologist scientist in early 2000's. Theirs plans so far are to do area recognition and record new material. First to record species that are not part of the archive and additionally to make interviews to the inhabitants who has memories of the missing species.</p>
</form>
</div>
<div id="project_budg" class="cell">
<form action="">
<label for="proj_budg">Budget ⤷</label>
<!-- <input type="text" id="proj_budg" name="budg" placeholder=""> -->
<p id="proj_budg_input">They got a small grant from the municipality that let them produce a final product in a period of 3 months.</p>
</form>
</div>
<div id="project_whom" class="cell">
<form action="">
<label for="proj_whom">5. To Whom are you publishing it? ⤷</label>
<!-- <input type="text" id="proj_whom" name="whom" placeholder=""> -->
<ul id="proj_whom_input">
<li>> Principally for neighbours' inhabitants: families that lives there and continuously may relate with those bird sounds.</li>
</ul>
</form>
</div>
</div>
<!-- -----------------Middle----------------- -->
<!-- -----------------Right----------------- -->
<div class="container" id="right">
<div id="project_how" class="cell half">
<form action="">
<label for="proj_what">3. How are we going to publish it? ⤷</label>
<!-- <input type="text" id="proj_how" name="how" placeholder=""> -->
<ul id="proj_how_input">
<li>> Investigating on local birds.</li>
<li>> Recording and collecting the sounds. Mapping different areas within the neighbour</li>
<li>> Editing it as a collection of files</li>
<li>> Creating a website that hosts the sounds and interviews</li>
<li>> Each sound will be located on a Candelarias' map</li>
</ul>
</form>
</div>
<div id="project_where" class="cell half">
<form action="">
<label for="proj_where">4. Where is it gonna be circulating? ⤷</label>
<!-- <input type="text" id="proj_where" name="where" placeholder=""> -->
<ul id="proj_where_input">
<li>> The little shops around and local social media groups.</li>
</ul>
</form>
</div>
</div>
<!-- -----------------Right----------------- -->
</div>
<!-- -----------------Diffractive----------------- -->
<div class="diff" id="no_1">
<p>Why the preservation of a specie is connected with the local circumstances?<span class="plus" onclick="next_no_2()">+</span></p>
</div>
<div class="diff" id="no_2">
<p>How can audio formats be pedagogical?<span class="plus" onclick="next_no_3()">+</span></p>
</div>
<div class="diff" id="no_3">
<p>What is the content of a map?<span class="plus" onclick="next_no_4()">+</span></p>
</div>
<div class="diff" id="no_4">
<p>How a website could circulate in a little shop?<span class="plus" onclick="next_no_5()">+</span></p>
</div>
<div class="diff" id="no_5">
<p>What would be a local map?<span class="plus" onclick="next_no_6()">+</span></p>
</div>
<div class="diff" id="no_6">
<p>How can this research connect with other initiatives in the neighbourhood?<span class="plus" onclick="next_no_7()"">+</span></p>
</div>
<div class="diff" id="no_7">
<p>What does preservation relate with audio recordings?<span class="plus">+</span></p>
</div>
<!-- -----------------Diffractive----------------- -->
<script src="index.js"></script>
</body>
</html>

150
questions/index.js
Unescape Escape View File

@ -0,0 +1,150 @@
//project tiltle-->project description
const element = document.querySelector("#project_title");
element.addEventListener("click", show_title, false);
function next_delay(){
document.getElementById("project_des").style.display = "block";
document.querySelector("#project_des p").style.display = "none";
}
function show_title() {
document.getElementById("proj_title_input").style.display = "block";
setTimeout(next_delay, 2000);
localStorage.clear();
}
//project description-->project budget
const element2 = document.querySelector("#project_des");
element2.addEventListener("click", show_des, false);
function next_delay2(){
document.getElementById("project_budg").style.display = "block";
document.querySelector("#project_budg p").style.display = "none";
}
function show_des() {
document.getElementById("proj_des_input").style.display = "block";
setTimeout(next_delay2, 2000);
}
//project budget-->what
const element3 = document.querySelector("#project_budg");
element3.addEventListener("click", show_budg, false);
function next_delay3(){
document.getElementById("project_what").style.display = "block";
document.querySelector("#project_what ul").style.display = "none";
}
function show_budg() {
document.getElementById("proj_budg_input").style.display = "block";
setTimeout(next_delay3, 2000);
}
//project what-->why
const element4 = document.querySelector("#project_what");
element4.addEventListener("click", show_what, false);
function next_delay4(){
document.getElementById("project_why").style.display = "block";
document.querySelector("#project_why ul").style.display = "none";
}
function show_what() {
document.getElementById("proj_what_input").style.display = "block";
setTimeout(next_delay4, 2000);
}
//project why-->how
const element5 = document.querySelector("#project_why");
element5.addEventListener("click", show_why, false);
function next_delay5(){
document.getElementById("project_how").style.display = "block";
document.querySelector("#project_how ul").style.display = "none";
}
function show_why() {
document.getElementById("proj_why_input").style.display = "block";
setTimeout(next_delay5, 2000);
}
//project how-->where
const element6 = document.querySelector("#project_how");
element6.addEventListener("click", show_how, false);
function next_delay6(){
document.getElementById("project_where").style.display = "block";
document.querySelector("#project_where ul").style.display = "none";
}
function show_how() {
document.getElementById("proj_how_input").style.display = "block";
setTimeout(next_delay6, 2000);
}
//project where-->whom
const element7 = document.querySelector("#project_where");
element7.addEventListener("click", show_where, false);
function next_delay7(){
document.getElementById("project_whom").style.display = "block";
document.querySelector("#project_whom ul").style.display = "none";
}
function show_where() {
document.getElementById("proj_where_input").style.display = "block";
setTimeout(next_delay7, 2000);
}
//project whom + diff btn
const element8 = document.querySelector("#project_whom");
element8.addEventListener("click", show_whom, false);
function next_delay8(){
document.getElementById("diff").style.display = "block";
}
function show_whom() {
document.getElementById("proj_whom_input").style.display = "block";
setTimeout(next_delay8, 2000);
}
//Pop Up
function popup(){
document.getElementById("popup").style.visibility = "visible";
}
function popup_close(){
document.getElementById("popup").style.visibility = "hidden";
}
//Diffraction pop_ups
function next_no_1(){
document.getElementById("no_1").style.visibility = "visible";
}
function next_no_2(){
document.getElementById("no_2").style.visibility = "visible";
}
function next_no_3(){
document.getElementById("no_3").style.visibility = "visible";
}
function next_no_4(){
document.getElementById("no_4").style.visibility = "visible";
}
function next_no_5(){
document.getElementById("no_5").style.visibility = "visible";
}
function next_no_6(){
document.getElementById("no_6").style.visibility = "visible";
}
function next_no_7(){
document.getElementById("no_7").style.visibility = "visible";
}

288
questions/style.css
Unescape Escape View File

@ -0,0 +1,288 @@
@font-face {
font-family:"whois-mono";
src: url("fonts/whois-mono.ttf");
}
body{
max-height: 100vh;
}
.questions{
position: absolute;
display: flex;
flex-direction: row;
margin: 0;
}
#popup {
position: absolute;
display: inline-block;
cursor: pointer;
z-index: 4;
visibility: hidden;
width: 50vw;
background-color: white;
font-family: whois-mono;
margin-left: 25%;
margin-top: 10%;
padding: 2.5% 3% 2.5% 3%;
border: solid 1px black;
}
#popup b{
color: blue;
}
#popup p{
text-decoration: underline;
}
/*diffraction popups*/
.diff{
position:absolute;
z-index: 3;
font-family: whois-mono;
background-color: #F7FFC7;
border: solid 1px black;
padding: 5px 15px 10px 15px;
visibility: hidden;
}
.diff p{
margin: 0;
}
#no_1{
margin-left: 38%;
margin-top: 40%;
}
#no_2{
margin-left: 18%;
margin-top: 28%;
}
#no_3{
margin-left: 80%;
margin-top: 50%;
}
#no_4{
margin-left: 12%;
margin-top: 3%;
}
#no_5{
margin-left: 70%;
margin-top: 10%;
}
#no_6{
margin-left: 27%;
margin-top: 20%;
}
#no_7{
margin-left: 17%;
margin-top: 50%;
}
.plus{
font-size: 1.5em;
padding: 0 0 0 10px;
cursor: pointer;
color:blue;
}
.cell{
border-bottom: 1px solid black;
padding: 5%;
max-width: 100%;
font-family: whois-mono;
font-size: 1em;
}
#middle{
min-width: 40vw;
border-left: 1px solid black;
border-right: 1px solid black;
}
#left{
min-width: 30vw;
display: flex;
flex-direction: column;
}
#right{
min-width: 30vw;
display: flex;
flex-direction: column;
}
.container{
min-height: 100vh;
}
/* start_middle*/
#title{
text-align: center;
max-width: 100%;
margin: auto;
/* padding-top: 3vh;
padding-bottom: 3vh; */
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
position: relative;
}
#title_text{
width: 100%;
text-align: center;
justify-content: center;
}
#info_icon{
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
padding: 10px;
gap: 10px;
position: relative;
width: 15px;
height: 15px;
/* background: grey; */
border-radius: 100px;
cursor: pointer;
}
#info_icon:hover{
background-color: #F7FFC7;
}
/*ref_diff_buttons*/
#ref_diff{
width: 100%;
display: flex;
padding: 0;
}
#ref_diff button{
width: 50%;
margin: 0;
/* background-color: transparent; */
border: none;
font-family: whois-mono;
padding: 5%;
flex-direction: row;
/* text-align: left; */
font-size: 1em;
}
#diff{
display: none;
box-shadow: 0px 0px 10px rgb(151, 11, 238);
background-color: #F7FFC7;
cursor: pointer;
}
#diff:hover{
background-color: #F0FE98;
}
#ref{
background-color: transparent;
}
.separator{
background-color: black;
width: 1px;
min-height: 100%;
}
#project_title form{
display: flex;
flex-direction: row;
}
#proj_title_input{
margin: 0;
padding-left: 3%;
}
li{
list-style-type: none;
padding-bottom: 5%;
}
.half{
height: 50%;
}
#project_title{
cursor: pointer;
}
label{
cursor: pointer;
}
label:hover{
color: blue;
}
/* Javascript */
#proj_title_input{
display: none;
}
#project_des_input{
display: none;
}
#project_des{
display: none;
}
#project_budg{
display: none;
}
#project_budg{
display: none;
}
#project_whom{
display: none;
border-bottom: none;
}
#project_what{
display: none;
}
#project_why{
display: none;
}
#project_how{
display: none;
}
#project_where{
display: none;
}
Write Preview
Loading…
Cancel
Save