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.
125 lines
4.8 KiB
HTML
125 lines
4.8 KiB
HTML
|
|
<!DOCTYPE html>
|
|
|
|
<html>
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Wor(l)ds for the Future</title>
|
|
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
<link rel="stylesheet" type="text/css" href="style.css" media="screen"/>
|
|
<script src="https://unpkg.com/typewriter-effect@latest/dist/core.js"></script>
|
|
<meta http-equiv="page-exit" content="revealtrans(duration=3,transition=2">
|
|
</head>
|
|
|
|
<body>
|
|
<div class="header">
|
|
<p id="title">WOR(<span class="customfont">L</span>)DS FOR THE FUTURE<br><span id="sub">A Republishing Toolkit for an Imaginary Atlas</span></p>
|
|
</div>
|
|
|
|
|
|
<div class="row">
|
|
|
|
<div class="column left">
|
|
<p id="showMessage"></p>
|
|
</div>
|
|
|
|
<div class="column right">
|
|
|
|
<div id="button">
|
|
<button onclick="myFunction()">▼ Intro</button>
|
|
<button onclick="myFunction2()">▼ Colophon</button>
|
|
<button onclick="myFunction3()">▼ Print</button>
|
|
</div>
|
|
|
|
<p id="intro">Words have the power to shape reality. Wor(l)ds for the Future is a set of map making tools to reimagine common landscapes. We invite you to delve into the materials and traverse the texts in any way you desire: by cutting and pasting the printed matter, or by unravelling the texts online. The choice is yours. You can reconstruct images and reinterpret wor(l)ds, to create Wor(l)ds for the Future.
|
|
|
|
This project is a republication of Words for the Future (2017/18), a series of ten essays curated and edited by Nienke Scholts. In the 2020 version, XPUB (Experimental Publishing) students from the Piet Zwart institute reinterpret the original material through methods such as annotating and prototyping in Python (a coding language we used to analyse text as texture). The ten essays were cross-examined and mapped in order to find interconnections and links.
|
|
</p>
|
|
<p id="colophon">people did things</p>
|
|
|
|
<p id="print">people print stuff</p>
|
|
|
|
<p id='gallery'></p>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
function myFunction() {
|
|
document.getElementById("intro").style.visibility = "visible";
|
|
document.getElementById("colophon").style.visibility = "hidden";
|
|
document.getElementById("print").style.visibility = "hidden";
|
|
document.getElementById("gallery").style.visibility = "hidden";
|
|
}
|
|
|
|
function myFunction2() {
|
|
document.getElementById("intro").style.visibility = "hidden";
|
|
document.getElementById("colophon").style.visibility = "visible";
|
|
document.getElementById("print").style.visibility = "hidden";
|
|
document.getElementById("gallery").style.visibility = "hidden";
|
|
}
|
|
|
|
function myFunction3() {
|
|
document.getElementById("intro").style.visibility = "hidden";
|
|
document.getElementById("colophon").style.visibility = "hidden";
|
|
document.getElementById("print").style.visibility = "visible";
|
|
document.getElementById("gallery").style.visibility = "hidden";
|
|
}
|
|
|
|
gallery = document.getElementById("gallery");
|
|
|
|
|
|
var typewriter = new Typewriter(gallery, {
|
|
loop:true,
|
|
cursor:""
|
|
});
|
|
|
|
typewriter.typeString('A')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('M')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('T')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('L')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('P')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('R')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('U')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('H')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('O')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.typeString('E')
|
|
.pauseFor(100)
|
|
.deleteAll()
|
|
.start();
|
|
</script>
|
|
|
|
|
|
|
|
<script src=js.js></script>
|
|
</body>
|
|
</html>
|
|
|
|
|