You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

108 lines
6.2 KiB
HTML

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="style.css">
2 years ago
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
<title>Glossary</title>
</head>
2 years ago
<style> .action-s:hover{color:green;}.situation-s:hover{color:aqua;}.logic-s:hover{color:orange;}.proposition-s:hover{color:blue;}.hyperlink-s:hover{color:pink;}.process-s:hover{color:gray;}.language-s:hover{color:violet;}.agent-s:hover{color:purple;}.tool-s:hover{color:lightblue;}.form-s:hover{color:gold;} </style>
<body id="glo_body">
<div class="head">
2 years ago
<h1 id="title"> Permeable Glossary for a Living Publishing Practice </h1>
<div class="question">
<input id="search" type="text" ><span onclick="document.getElementById('search').value= ''">X</span>
</div>
<a href="rss.xml">
<p>follow what is new (rss)</p>
</a>
</div>
2 years ago
<div class='diffraction'>
<img src='images/pattern-01.svg'>
<img src='images/pattern-02.svg'>
<img src='images/pattern-03.svg'>
<img src='images/pattern-04.svg'>
<img src='images/pattern-05.svg'>
<img src='images/pattern-06.svg'>
<img src='images/pattern-07.svg'>
<img src='images/pattern-08.svg'>
</div>
2 years ago
<div class="description">
<p>From creating, designing and conceptualising to filtering, circulating and amplifying, publishing practices involve different processes and matters. Even though there are multiple theories and authors that approach each of them in a particular way, we propose to make a pause on defining them individually and focus on possible entanglements. Not to find a generalized idea of publishing but to see it as a complex and living materiality. </p>
<p>This glossary is an ongoing and ever-transforming attempt to introduce a diffractive methodology inside publishing. It gathers different annotations on words instead of closed definitions. Words are tools, concepts, resources, shapes that have properties that enhance new possibilities. words in this glossary don't close the publishing scenario. They are porous, permeable.</p>
<p>Because the glossary is seen as mutable, the current state is result of collective workshops were participants are invited to think and converse around its words and annotations. During the workshop, diffraction performs a conscious interconnection of practices beyond reflection.</p>
<p>If you want to contribute adding new words, annotations or properties, please read this guide. Or send us an e-mail we would be happy to hear from you.</p>
</div>
<div id="legend" class="legend">
2 years ago
<button class="btn active" onclick="filterSelection('all')">properties</button> <button id="action" class="btn action-s" onclick="filterSelection('action')">action→ <span class='symbol action-s'>A</span> </button>
<button id="situation" class="btn situation-s" onclick="filterSelection('situation')">situation→ <span class='symbol situation-s'>S</span> </button>
<button id="logic" class="btn logic-s" onclick="filterSelection('logic')">logic→ <span class='symbol logic-s'>C</span> </button>
<button id="proposition" class="btn proposition-s" onclick="filterSelection('proposition')">proposition→ <span class='symbol proposition-s'>T</span> </button>
<button id="hyperlink" class="btn hyperlink-s" onclick="filterSelection('hyperlink')">hyperlink→ <span class='symbol hyperlink-s'>N</span> </button>
<button id="process" class="btn process-s" onclick="filterSelection('process')">process→ <span class='symbol process-s'>P</span> </button>
<button id="language" class="btn language-s" onclick="filterSelection('language')">language→ <span class='symbol language-s'>G</span> </button>
<button id="agent" class="btn agent-s" onclick="filterSelection('agent')">agent→ <span class='symbol agent-s'>E</span> </button>
<button id="tool" class="btn tool-s" onclick="filterSelection('tool')">tool→ <span class='symbol tool-s'>T</span> </button>
<button id="form" class="btn form-s" onclick="filterSelection('form')">form→ <span class='symbol form-s'>Y</span> </button>
</div>
<div id="words" class="words">
</div>
</div>
</body>
<script>
const action = document.getElementsByClassName("action");
for (let i = 0; i < action.length; i++){
2 years ago
action[i].innerHTML += "<span class='symbol action-s'>A</span>";
}
const situation = document.getElementsByClassName("situation");
for (let i = 0; i < situation.length; i++){
situation[i].innerHTML += "<span class='symbol situation-s'>S</span>";
}
const logic = document.getElementsByClassName("logic");
for (let i = 0; i < logic.length; i++){
2 years ago
logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
}
const proposition = document.getElementsByClassName("proposition");
for (let i = 0; i < proposition.length; i++){
2 years ago
proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
}
const hyperlink = document.getElementsByClassName("hyperlink");
for (let i = 0; i < hyperlink.length; i++){
2 years ago
hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
}
const process = document.getElementsByClassName("process");
for (let i = 0; i < process.length; i++){
2 years ago
process[i].innerHTML += "<span class='symbol process-s'>P</span>";
}
const language = document.getElementsByClassName("language");
for (let i = 0; i < language.length; i++){
2 years ago
language[i].innerHTML += "<span class='symbol language-s'>G</span>";
}
const agent = document.getElementsByClassName("agent");
for (let i = 0; i < agent.length; i++){
2 years ago
agent[i].innerHTML += "<span class='symbol agent-s'>E</span>";
}
const tool = document.getElementsByClassName("tool");
for (let i = 0; i < tool.length; i++){
tool[i].innerHTML += "<span class='symbol tool-s'>T</span>";
}
const form = document.getElementsByClassName("form");
for (let i = 0; i < form.length; i++){
2 years ago
form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
}
</script>
2 years ago
<script type="text/javascript" src="glossary.js"></script>
<script src="main.js"></script>
</html>