XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity
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.
master
Branches Tags
${ item.name }
Create tag ${ searchTerm }
Create branch ${ searchTerm }
from 'a5e8aac65b'
${ noResults }
issue.xpub.nl/09/photos.html

147 lines
6.0 KiB
HTML
Raw Normal View History Unescape Escape

photos section
5 years ago
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8>
<meta name=viewport content=width=device-width, initial-scale=1>
<title>The Library Is Open - Special Issue 9</title>
<!--
<meta name=Keywords content= >
<meta name=Description content= >
<link rel=icon href= type=image/x-icon>
-->
<link rel=stylesheet type=text/css href=./style.css>
</head>
<body>
<main>
<header>
<h1><a id="title" href="./index.html">The Library Is Open</a></h1>
<h2>Special Issue 09</h2>
<h3>Piet Zwart Institute</h3>
<hr><hr><br>
<nav>
<ul>
<li><a href="./video.html">Video</a></li>
<li><a href="./poster.html">Poster</a></li>
<li><a href="./publication.html">Publication</a></li>
<li><a href="./bb.html">Blurry Boudaries</a></li>
<li><a href="./mc.html">Marginal Conversation</a></li>
<li><a href="./ka.html">Knowledge In Action</a></li>
<li><a href="./photos.html">Photos</a></li>
</ul>
</nav>
<br>
</header>
<br>
<article>
<div id="right" >
<section id="description">
<p id="firstLine">Dear readers,<br><br>
The Library Is Open invites you to an afternoon of workshops that make the operations within libraries visible. Join us in exploring the actions and roles of legal and extra-legal libraries (municipal, pirate, academic, +++), their custodians, and the public that form a community around collections of texts.</p>
<p><b>Marginal Conversation</b><br>
We read texts, and write notes in the margins; usually in private, isolated from other readers. We come across texts with others' notes on them; the author unknown, their thoughts obscure. What happens when we share our notes, vocalise and perform them?</p>
<p>In this workshop...we'll read, annotate and discuss an open letter which asks for pirate library practices to come out from the shadows. We'll read aloud and perform parts of the text, enriched by our doubts, sympathies, tensions and diverse understandings. We'll personalise the text, opening it up for collective conversations. Our voices will occupy the space and leave traces on the text and in the library.</p>
<p><b>Knowledge In Action</b><br>
Through role play you will perform the activities crucial to the sustenance of libraries. You will interpret and reimagine the actors that take part in knowledge production and distribution, such as the librarian, the researcher, the pirate, the publisher, the reader, the writer, the student, the copyist, the printer.</p>
<p>The workshop consists of three activities where different scenarios shift your accustomed perspective to start common dialogues. Put yourselves in the shoes of the librarian, imagine together a reading space, and contest the morality of knowledge proprietization.</p>
<p><b>Blurry boundaries</b><br>
Select, annotate, analyze, scan, correct, digitize, print, read, transfer, erase, encode, curate, hack, interface, work, copy...<br>
How do we reveal the hidden labour involved in these processes? What libraries become possible when you transform physical books into digital files, and vice versa? </p>
<p>In this workshop you will be a librarian converting books into machine readable files, a process involving tools, time and choices.</p><br>
<p class="extras">Contributors:<br>
Simon Browne, Tancredi Di Giovanni, Paloma García, Rita Graça, Artemis Gryllaki, Pedro Sá Couto, Femke Snelting, Biyi Wen, Bohye Woo</p>
<p class="extras">Special thanks to:<br>
Bodó Balázs, Dušan Barok, Anita Burato, André Castro, Aymeric Mansoux, Michael Murtaugh, Martino Morandi, Leslie Robbins, Steve Rushton, Amy Suo Wu, Eva Weinmayr</p>
</section>
</div>
<div class="vl"></div>
<div id="left">
almost finished
5 years ago
<section id="photos">
almost finished
5 years ago
<div class="header" id="myHeader">
<h1>Image Grid</h1>
<p>Click on the buttons to change the grid view.</p>
<button class="btn" onclick="one()">1</button>
<button class="btn active" onclick="two()">2</button>
<button class="btn" onclick="four()">4</button>
</div>
almost finished
5 years ago
<div class="row">
<div class="column">
<img src="./media/imgs/01-min.jpg">
<img src="./media/imgs/02-min.jpg">
<img src="./media/imgs/03-min.jpg">
<img src="./media/imgs/04-min.jpg">
<img src="./media/imgs/05-min.jpg">
<img src="./media/imgs/06-min.jpg">
<img src="./media/imgs/07-min.jpg">
<img src="./media/imgs/08-min.jpg">
<img src="./media/imgs/09-min.jpg">
<img src="./media/imgs/10-min.jpg">
<img src="./media/imgs/11-min.jpg">
<img src="./media/imgs/12-min.jpg">
<img src="./media/imgs/13-min.jpg">
<img src="./media/imgs/14-min.jpg">
<img src="./media/imgs/15-min.jpg">
<img src="./media/imgs/16-min.jpg">
<img src="./media/imgs/17-min.jpg">
<img src="./media/imgs/18-min.jpg">
</div>
</div>
photos section
5 years ago
</section>
</div>
</article>
</main>
almost finished
5 years ago
<script>
almost finished
5 years ago
// Get the elements with class="column"
var elements = document.getElementsByClassName("column");
// Declare a loop variable
var i;
photos section
5 years ago
almost finished
5 years ago
// Full-width images
function one() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "100%"; // IE10
elements[i].style.flex = "100%";
}
}
almost finished
5 years ago
almost finished
5 years ago
// Two images side by side
function two() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "50%"; // IE10
elements[i].style.flex = "50%";
}
}
almost finished
5 years ago
almost finished
5 years ago
// Four images side by side
function four() {
for (i = 0; i < elements.length; i++) {
elements[i].style.msFlex = "25%"; // IE10
elements[i].style.flex = "25%";
}
}
almost finished
5 years ago
almost finished
5 years ago
// Add active class to the current button (highlight it)
var header = document.getElementById("myHeader");
var btns = header.getElementsByClassName("btn");
for (var i = 0; i < btns.length; i++) {
btns[i].addEventListener("click", function() {
var current = document.getElementsByClassName("active");
current[0].className = current[0].className.replace(" active", "");
this.className += " active";
});
}
almost finished
5 years ago
</script>
photos section
5 years ago
</body>
</html>