XPUB
/
SI23
19
0
Fork 0
Code Issues 1 Pull Requests Packages Projects Releases Wiki Activity

si23 archive

Browse Source
main
Michelw 5 months ago
parent 1162add446
commit 3ef211a693
1 changed files with 218 additions and 163 deletions
Show Stats Download Patch File Download Diff File

381
web/index.html
Unescape Escape View File

@ -1,167 +1,222 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html lang="en">
<style>
body { <head>
font-family: "Courier New", monospace; <meta charset="UTF-8">
font-size: x-large; <meta name="viewport" content="width=device-width, initial-scale=1.0">
} <title>SI23</title>
<link rel="stylesheet" href="styles.css">
.wrapper { <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
width: 100vw; <script src="https://cdnjs.cloudflare.com/ajax/libs/matter-js/0.17.1/matter.min.js"></script>
height: 100vh; <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/p5.js"></script>
display: grid; <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.9.0/addons/p5.sound.min.js"></script>
grid-template-columns: 1fr; <script src="https://unpkg.com/matter-js@0.14.2/build/matter.min.js"></script>
} </head>
.wrapper div {
width: 100%;
justify-self: center;
}
@media (min-width: 1200px) {
.wrapper {
grid-template-columns: 1fr 1fr;
}
.wrapper div:first-child {
justify-self: start;
}
.wrapper div:last-child {
justify-self: end;
margin-top: 10%;
}
}
#flyer {
width: 100%;
max-width: 800px;
}
#animated-header {
text-align: center;
font-size: xx-large;
}
#filestructure ul {
display: table;
margin: 0 auto;
}
#filestructure ul li {
padding: 5%;
}
</style>
<body>
<div class="wrapper"> <body>
<!-- the flyer svg --> <div class="container">
<object id="flyer" type="image/svg+xml" data="flyer.svg" ></object> <div class="sidebar">
<div class="tab" data-content="about">About</div>
<div> <div class="tab" data-content="event">Event</div>
<div class="tab" data-content="projects">Projects</div>
<div id="filestructure"> <div class="projects-submenu" id="projects-submenu">
<!-- <h1 id="animated-header">BROWSE THE FILESTRUCTURE >>></h1> --> <div class="subtab" data-content="project1">How did we get here?</div>
<div id="animated-header"></div> <div class="subtab" data-content="project2">loading: feminist server...</div>
<ul> <div class="subtab" data-content="project3">The Greasy Chip</div>
<li>/Door: <a href="https://hub.xpub.nl/chopchop/~v/hdwgh/index.html">How did we get here?</a></li> <div class="subtab" data-content="project4">TL;DR</div>
<li>/Table: <a href="https://hub.xpub.nl/chopchop/si-23-website-table/">loading: feminist server...</a></li> <div class="subtab" data-content="project5">Aquarium</div>
<li>/Kitchen: <a href="https://hub.xpub.nl/chopchop/~chef/kitchen/intropage.html">The Greasy Chip</a></li> <div class="subtab" data-content="project6">data centers on fire</div>
<li>/Shelves: <a href="https://hub.xpub.nl/chopchop/tl-dr/quilt.html">TL;DR</a></li> </div>
<li>/Aquarium: <a href="https://hub.xpub.nl/chopchop/~zz1/Entrance/entrance.html">Aquarium</a></li> <div class="tab" data-content="process">Process</div>
</ul> </div>
</div> <div class="resizer" id="resizer"></div>
<div class="content">
<div id="about" class="content-tab">
<div id="matter-container" class="matter-container"></div>
<h1>About</h1>
<p>Peripheral centers and feminist servers investigate multiple approaches to the conditions of serving. It
interrupts the endless flow of data that fuels the economy, exposing the cracks and gaps of the
techno-scientific paradigm imposed on society. Where commands are executed, connections made, trust exchanged,
and resources shared.</p>
<p>This feminist data center brings to light the physical infrastructure and actual labour which enable the
processes we perform every day. In this exploration, we think through feminist approaches that reveal the
concealed layers of our on(off)line interactions. We broaden our understanding of how this tangible,
energy-intensive infrastructure truly operates behind the seemingly innocent notion of the ‘cloud’.</p>
<p>The various projects within Peripheral centers and feminist servers expose their infrastructure, emphasizing
the material conditions of their production. We advocate that the fairy tale of immateriality has real
socio-economic-environmental consequences.</p>
<img src="about.png" alt="Peripheral centers and feminist servers">
</div>
<div id="event" class="content-tab">
<h1>Event</h1>
<p>THURSDAY 28 MAR 2024<br>
19:00-21:30<br>
VARIA (Gouwstraat 3)<br></p>
<img src="img/presentation.jpg" alt="presentation">
<p>Listen to the presentation at the launch day</p>
<audio controls>
<source src="assets/20240328_presentation.mp3" type="audio/mp3">
<default kind="captions" srclang="en" src="archive 12.2.vtt">
Listen to the presentation at the launch day
</audio>
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6466.JPG" alt="event picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6464.JPG" alt="event picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6484.JPG" alt="event picture">
</div>
<div id="projects" class="content-tab">
<h1>Projects</h1>
<p>After examining Varia's on-site structure, we decided to integrate the project's content with the actual
functional layout of the site, resulting in the following groups: <br>
door<br> table<br>shelves<br> aquarium<br>
kitchen<br></p>
<p>Floorplan of project locations in Varia for the SI23 launch</p>
<img
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/6/63/SI23_floorplan_varia.jpg/1200px-SI23_floorplan_varia.jpg"
alt="process picture">
</div>
<div id="project1" class="content-tab">
<h1>How did we get here?</h1>
<p>The door is a point of access. Walking through the door, guests have a chance to see the processes that take
place here to ensure the flow of information that enables our everyday interactions on(off)line. This all
happens behind an invisible infrastructure that we want to reveal.</p>
<p>How did we get here? invites you to interact with a website that takes you on a journey through the streets
of our city, and welcomes you to our reimagined data center. Aiming for seamfulness by revealing and sharing
processes, (re)sources, and tools. </p>
<p>This data center challenges the conditions of serving, by regulating the amount of connections. Thus you need
an access token, which will be handed to you by someone who trusts you, to embark on the web journey. These
tokens are limited to ensure that the resources are not depleted.</p>
<a href="https://hub.xpub.nl/chopchop/~v/hdwgh/index.html" target="_blank" class="button">Visit the website -->
</a>
<img
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/d/da/Access-token-webjourney.jpg/900px-Access-token-webjourney.jpg?20240330175040"
alt="door picture">
<img src="img/IMG_6447.jpg" alt="door picture">
</div>
<div id="project2" class="content-tab">
<h1>loading: feminist server...</h1>
<p>A card-browser game: get a card, type the command in the browser. Receive an interpretation of its function,
a connected feminist concept and instructions to execute. Serve and be served as you turn into a feminist
server yourself by playing and interacting with the cards both online or one-on-one in the space.</p>
<p>Central to the project is the analogy between software and the material world. This allows for an exploration
of the interaction between online and offline environments, and making conscious how this interaction shapes
us. </p>
<p>The performative and educational elements are the means of this exploration, as the game invites actions in
the physical space. Through self-reflective and relational qualities, it calls upon the feminist method and
literature. A reconsideration of words with a set meaning will occur while playing.</p>
<p>The player(s) will get acquainted with important computational terms and commands, which enable associations
extending beyond the terminal, into the social and eventually the personal spheres.</p>
<a href="https://hub.xpub.nl/chopchop/si-23-website-table/" target="_blank" class="button">Visit the website -->
</a>
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6433.JPG" alt="loading picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6435.JPG" alt="loading picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6432.JPG" alt="loading picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6475.JPG" alt="loading picture">
</div>
<div id="project3" class="content-tab">
<h1>The Greasy Chip</h1>
<p>A card-browser game: get a card, type the command in the browser. Receive an interpretation of its function,
a connected feminist concept and instructions to execute. Serve and be served as you turn into a feminist
server yourself by playing and interacting with the cards both online or one-on-one in the space.</p>
<p>Central to the project is the analogy between software and the material world. This allows for an exploration
of the interaction between online and offline environments, and making conscious how this interaction shapes
us. </p>
<p>The performative and educational elements are the means of this exploration, as the game invites actions in
the physical space. Through self-reflective and relational qualities, it calls upon the feminist method and
literature. A reconsideration of words with a set meaning will occur while playing.</p>
<p>The player(s) will get acquainted with important computational terms and commands, which enable associations
extending beyond the terminal, into the social and eventually the personal spheres.</p>
<a href="https://hub.xpub.nl/chopchop/~chef/kitchen/intropage.html" target="_blank" class="button">Visit the
website -->
</a>
<img
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/5/5f/Varkitchen-1.png/1552px-Varkitchen-1.png?20240330163329"
alt="Greasy Chip picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6438.JPG" alt="Greasy Chip picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6439.JPG" alt="Greasy Chip picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6479.JPG" alt="Greasy Chip picture">
</div>
<div id="project4" class="content-tab">
<h1>TL;DR</h1>
<p>In a seamless world, awareness of techno-social infrastructure surfaces only when it's not working. But when
you upload a photo, install an application, move a file, a technology serves, works, labours to execute what
you've asked of it.</p>
<p>Inaccessible files track this work as data. These files are inaccessible in two ways: they're hard to
retrieve and even harder to decipher. While these hidden files contain the not so hidden infrastructures of a
server, they only manage to show a portion of it. After all, log files have a bias towards the technological
ecology, prioritizing the labour of machines. </p>
<p>The actual infrastructure consists of much more: the people maintaining for the tech to work. A feminist data
center acknowledges and fosters the infrastructure surrounding this technology; the physical labour, the
decisions about shared spaces, the different knowledges that depend on each other for the network to exist.
</p>
<p>tl;dr researches ways to make sense of these hidden labour that goes on in a feminist server through logged
and unlogged effort.</p>
<a href="https://hub.xpub.nl/chopchop/tl-dr/quilt.html" target="_blank" class="button">Visit the website -->
</a>
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6452.JPG" alt="tl-dr picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6459.JPG" alt="tl-dr picture">
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6454.JPG" alt="tl-dr picture">
</div>
<div id="project5" class="content-tab">
<h1>Aquarium</h1>
<p>Welcome. From now on imagine yourself as a goldfish, you are a digital goldfish living in a virtual aquarium.
</p>
<p>The Aquarium is a sci-fi concept: wherever there are servers, there exists a virtual aquarium. Within this
aquarium reside digital fish—embodiments of consciousness—observing human behavior. Each fish possesses
autonomy. As users navigate the labyrinthine activities of the servers, these digital fish reflect their
actions. The ecosystem of the aquarium extends beyond mere observation. It embodies the subtle interplay
between users and the digital infrastructure they inhabit. In this text-based game, players assume the roles
of these digital fish, each representing a unique perspective within the server ecosystem.</p>
<a href="https://hub.xpub.nl/chopchop/~zz1/aquarium/index.html" target="_blank" class="button">Visit the website
-->
</a>
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6462.JPG" alt="Aquarium picture">
</div>
<div id="project6" class="content-tab">
<h1>Data centers on fire</h1>
<p>Your data is burning<br>
Data centers like to autocombust<br>
Don’t put all your internet infrastructure in one basket<br>
The internet infrastructure is fragile<br>
Data center sector is shockingly bad at reporting transparently<br>
There is no black box for data centers<br>
If your data didn’t burn it will drown<br>
Data centers don’t like people! >:( things always happen when people are around<br>
People actually die during fires >:(<br></p>
<a href="https://hub.xpub.nl/chopchop/~aleevadh/" target="_blank" class="button">Visit the website -->
</a>
<img src="https://media.xpub.nl/2024/si23/michael/IMG_6490.JPG">
</div>
<div id="process" class="content-tab">
<h1>Process</h1>
<a href="https://pzwiki.wdka.nl/mediadesign/Quilting_infrastructures" target="_blank" class="button">Visit the
wiki -->
</a>
<p>Chopchop's reign </p>
<img
src="https://pzwiki.wdka.nl/mw-mediadesign/images/thumb/2/21/Blackboard_network.png/1600px-Blackboard_network.png?20240120095259"
alt="process picture">
</div>
</div> </div>
</div> </div>
<script src="script.js"></script>
<!-- <script src="sketch.js"></script>
<script src="box.js"></script>
<script src="word.js"></script> -->
</body> </body>
<script>
</html>
// function to get a random polarity, returns 1 or -1
function get_r_polarity() {
var r = Math.floor(Math.random() * 2);;
if (r==0) return 1;
return -1;
}
// get the svg element in the DOM
var flyer_obj = document.getElementById("flyer");
// start animation once the svg element is loaded
flyer_obj.addEventListener("load",function(){
// fetch the svg structure and find all elements belonging to the class 'moveable'
var svg_doc = flyer_obj.contentDocument;
var moveables = svg_doc.getElementsByClassName("moveable");
// function to move one random element of the class 'moveable'
function move_svg_el() {
// generate a random id
var r_id = Math.floor(Math.random() * moveables.length);
// generate random translations (unbounded, minimum of 10px)
var r_x = get_r_polarity() * (Math.random(50) + 10);
var r_y = get_r_polarity() * (Math.random(50) + 10);
// translate the selected element with the generated distances
var s = 'translate(' + r_x.toString() + ',' + r_y.toString() + ')';
moveables[r_id].setAttribute('transform',s);
}
// eveny 100ms, call the function that animates one element
var timer = setInterval(move_svg_el, 200);
}, false);
// inspired by: https://codepen.io/alan8r/
function ASCIIAnimation(animArray, DOMtarget, speed, looping = true) {
var currentFrame = 0;
for(var i = 0; i < animArray.length; i++) {
animArray[i] = animArray[i].replace(/ /g,"&nbsp;");
animArray[i] = "<pre>" + animArray[i] + "</pre>";
}
DOMtarget.innerHTML = animArray[0];
currentFrame++;
this.animation = setInterval(function() {
DOMtarget.innerHTML = animArray[currentFrame];
currentFrame++;
if(currentFrame >= animArray.length && looping) currentFrame = 0;
if (currentFrame >= animArray.length && !looping) currentFrame = animArray.length - 1;
}, speed);
this.getCurrentFrame = function() {
return currentFrame;
}
}
ASCIIAnimation.prototype.stopAnimation = function() {
clearInterval(this.animation);
}
var header_anim_array = [
"BROWSE THE FILESTRUCTURE [ ]",
"BROWSE THE FILESTRUCTURE [> ]",
"BROWSE THE FILESTRUCTURE [>> ]",
"BROWSE THE FILESTRUCTURE [>>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>> ]",
"BROWSE THE FILESTRUCTURE [ >>>]",
"BROWSE THE FILESTRUCTURE [ >>]",
"BROWSE THE FILESTRUCTURE [ >]",
];
var header_div = document.getElementById("animated-header");
var loading_anim = new ASCIIAnimation(header_anim_array, header_div, 300);
</script>
<script src="https://issue.xpub.nl/23/quilt/quilt.js" data-cutFileName="false" data-cutFileName="false"></script>
<link rel="stylesheet" type="text/css" href="https://issue.xpub.nl/23/quilt/quilt.css">
</html>
Write Preview
Loading…
Cancel
Save