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.
106 lines
6.0 KiB
HTML
106 lines
6.0 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, I 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 interwoven materiality. </p>
|
|
<p>The current state of the glossary was made during different workshop sessions were practitioners are invited to question, reflect and diffract on the current publishing practice. Based on the previous state of the glossary, this sessions are called Rumination Sessions as a performance of multiple digestion. The participants added new entries, annotated on previous ones, highlighted snippets of it, bring up questions. The process aims to re-think and create collectively every word definition as a layering of annotations. Unlike traditional glossaries, in this glossary words are open to interpretation, expansion and mostly transformation. </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> |