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
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">
|
|
<link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
|
|
<title>Glossary</title>
|
|
</head>
|
|
<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">
|
|
<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>
|
|
<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>
|
|
<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">
|
|
<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++){
|
|
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++){
|
|
logic[i].innerHTML += "<span class='symbol logic-s'>C</span>";
|
|
}
|
|
|
|
const proposition = document.getElementsByClassName("proposition");
|
|
for (let i = 0; i < proposition.length; i++){
|
|
proposition[i].innerHTML += "<span class='symbol proposition-s'>T</span>";
|
|
}
|
|
|
|
const hyperlink = document.getElementsByClassName("hyperlink");
|
|
for (let i = 0; i < hyperlink.length; i++){
|
|
hyperlink[i].innerHTML += "<span class='symbol hyperlink-s'>N</span>";
|
|
}
|
|
|
|
const process = document.getElementsByClassName("process");
|
|
for (let i = 0; i < process.length; i++){
|
|
process[i].innerHTML += "<span class='symbol process-s'>P</span>";
|
|
}
|
|
|
|
const language = document.getElementsByClassName("language");
|
|
for (let i = 0; i < language.length; i++){
|
|
language[i].innerHTML += "<span class='symbol language-s'>G</span>";
|
|
}
|
|
|
|
const agent = document.getElementsByClassName("agent");
|
|
for (let i = 0; i < agent.length; i++){
|
|
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++){
|
|
form[i].innerHTML += "<span class='symbol form-s'>Y</span>";
|
|
}
|
|
|
|
|
|
</script>
|
|
<script type="text/javascript" src="glossary.js"></script>
|
|
<script src="main.js"></script>
|
|
</html> |