|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="en">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
|
<title>Social Networks</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
@font-face {
|
|
|
|
|
|
font-family: georgia;
|
|
|
|
|
|
src: url("fonts/Georgia Regular font.ttf");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@font-face {
|
|
|
|
|
|
font-family: bree-serif;
|
|
|
|
|
|
src: url("fonts/BreeSerif-Regular.otf");
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
* {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
}
|
|
|
|
|
|
html, body {
|
|
|
|
|
|
font-family: bree-serif;
|
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
|
color: gray;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
h1 {
|
|
|
|
|
|
font-size: 57px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
text-transform: none;
|
|
|
|
|
|
line-height: 1.3em;
|
|
|
|
|
|
font-family: bree-serif;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
color: black;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
h2 {
|
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
|
text-align: right;
|
|
|
|
|
|
font-weight: 400;
|
|
|
|
|
|
font-style: normal;
|
|
|
|
|
|
letter-spacing: 0px;
|
|
|
|
|
|
text-transform: none;
|
|
|
|
|
|
line-height: 1.3em;
|
|
|
|
|
|
font-family: georgia;
|
|
|
|
|
|
margin-right: 50px;
|
|
|
|
|
|
margin-left: 75%;
|
|
|
|
|
|
margin-top: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
/*.underline {
|
|
|
|
|
|
text-decoration: underline;
|
|
|
|
|
|
text-decoration-color: black;
|
|
|
|
|
|
}*/
|
|
|
|
|
|
|
|
|
|
|
|
#container {
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
padding: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.row {
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: row;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.circle {
|
|
|
|
|
|
flex-grow: 0;
|
|
|
|
|
|
flex-shrink: 0;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
width: 13px;
|
|
|
|
|
|
height: 13px;
|
|
|
|
|
|
background-image: url("reddoor.png");
|
|
|
|
|
|
}
|
|
|
|
|
|
.circle.link {
|
|
|
|
|
|
background-color: black;
|
|
|
|
|
|
}
|
|
|
|
|
|
.text {
|
|
|
|
|
|
padding-left: 10px;
|
|
|
|
|
|
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.WOW {
|
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
|
color: #007577;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.Artemis {
|
|
|
|
|
|
font-size: 19px;
|
|
|
|
|
|
color: #ea2709;
|
|
|
|
|
|
font-weight: bold;
|
|
|
|
|
|
text-decoration: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
.collapsible {
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
padding-bottom: 10px;
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
font-size: 15px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.active, .collapsible:hover {
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
colour:#ea2709;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.content {
|
|
|
|
|
|
max-height: 0;
|
|
|
|
|
|
max-width: 50%;
|
|
|
|
|
|
margin-left: 28%;
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
transition: max-height 0.2s ease-out;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
text-align: left;
|
|
|
|
|
|
font-family: georgia;
|
|
|
|
|
|
font-size: 18px;
|
|
|
|
|
|
color: rgb(40,40,40);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<h1 style="background-color:white; color:black;font-size:50px;font-family:bree-serif">Questions on</br>(Social) Networks</h1>
|
|
|
|
|
|
<button class="collapsible" type="submit" style="text-align: center;border: 0; background: transparent"><img src="help.png" width="35" height="45" alt="submit" /></button>
|
|
|
|
|
|
<div class="content">
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Dear guest,<div style="line-height:50%;"><br></div>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Welcome to my home. It’s my pleasure to offer you some questions about (social) networks. <br>Here, you are at the starting point, where you can see 26 questions, which correspond to 26 doors.<div style="line-height:50%;"><br></div>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
You can open a door by clicking on a colourful question, though the <b><span style="color:grey;">grey</span></b> ones are still locked.<br>(Apologies, the place is under construction.) Opening a <b><span style="color:#ea2709;">red door</span></b> will guide you to a different room of <i>this house</i>, while a <b><span style="color:#007577;">teal door</span></b>, will lead you to one of <i>my neighbour’s homes</i>.<div style="line-height:50%;"><br></div>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
Most of the questions came to my mind after the day of our <i>Infrastructour</i>. Generally, they relate to broader social aspects around analogue and digital networks. Trying to respond to them, I started writing small texts to express what led me to these questions, also my thoughts, feelings and memories that came after them. My texts are not finished answers and do not speak only in one voice. I often contradict or doubt myself, which is something I usually do when I write; I find it useful when trying to approach an answer.<div style="line-height:50%;"><br></div>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
There is not one way to navigate through the rooms; you can visit them out of order. Sometimes there are doors from one room to another. Please feel free to walk around, stay in each place as long as you wish, and come back to this starting point, when lost!<div style="line-height:50%;"><br></div>
|
|
|
|
|
|
</p>
|
|
|
|
|
|
<p>
|
|
|
|
|
|
May your journey begin!
|
|
|
|
|
|
</p><br><br>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <h2>What is Lorem Ipsum?
|
|
|
|
|
|
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.</h2> -->
|
|
|
|
|
|
<div id="container">
|
|
|
|
|
|
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<script>
|
|
|
|
|
|
|
|
|
|
|
|
function shuffle(a) {
|
|
|
|
|
|
for(let i = a.length - 1; i > 0; i--) {
|
|
|
|
|
|
const j = Math.floor(Math.random() * (i + 1));
|
|
|
|
|
|
[a[i], a[j]] = [a[j], a[i]];
|
|
|
|
|
|
}
|
|
|
|
|
|
return a;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const messages = shuffle([
|
|
|
|
|
|
{ text: "What are the dependencies in a self-hosted network?", cssClass: "WOW", link: "http://richfolks.club"},
|
|
|
|
|
|
{ text: "Why do people move to decentralised social networks?", cssClass: "WOW", link: "http://sweetandsour.chickenkiller.com/01-WHAT-IS-NETWORK/annotated-reader.html"},
|
|
|
|
|
|
{ text: "What is network(ed) publishing?", cssClass: "WOW", link: "http://foshan-1992.pw/~biyi/entry"},
|
|
|
|
|
|
{ text: "How fragile is a self-hosted network?", cssClass: "WOW", link: "http://nothat.bad.mn/debug"},
|
|
|
|
|
|
{ text: "What could a network look like?", cssClass: "WOW", link: "http://nothat.bad.mn/debug"},
|
|
|
|
|
|
{ text: "How do people use networks to create visual collaborations?", cssClass: "WOW", link: "http://nothat.bad.mn/debug"},
|
|
|
|
|
|
{ text: "How does scale affect the way we perceive networks?", cssClass: "WOW", link: "http://nothat.bad.mn/debug"},
|
|
|
|
|
|
"Can decentralised web have an impact beyond geeks & social web enthusiasts?",
|
|
|
|
|
|
"How important is to choose, or create our media of communication?",
|
|
|
|
|
|
"Is decentralisation a panacea, or a pharmakon?",
|
|
|
|
|
|
"Is decentralisation enough?",
|
|
|
|
|
|
{ text: "What gets liberated or controlled, in different networks?", cssClass: "Artemis", link: "chapter1.html"},
|
|
|
|
|
|
{ text: "How does the message differ, depending on the medium?", cssClass: "Artemis", link: "chapter2.html"},
|
|
|
|
|
|
{ text: "What compels us to publish content online?", cssClass: "Artemis", link: "chapter3.html"},
|
|
|
|
|
|
{ text: "How much information does the Internet hold?", cssClass: "Artemis", link: "chapter3-4.html"},
|
|
|
|
|
|
{ text: "Why do we collect all this data?", cssClass: "Artemis", link: "chapter4.html"},
|
|
|
|
|
|
{ text: "Why do people have the urge to stay networked?", cssClass: "Artemis", link: "chapter5.html"},
|
|
|
|
|
|
{ text: "Who benefits from social media analytics?", cssClass: "Artemis", link: "chapter6.html"},
|
|
|
|
|
|
{ text: "What is the relationship between corporations and government surveillance?", cssClass: "Artemis", link: "chapter7.html"},
|
|
|
|
|
|
{ text: "How does a network amplify or weaken voices?", cssClass: "Artemis", link: "chapter8.html"},
|
|
|
|
|
|
{ text: "What is the impact of social media on human relationships?", cssClass: "Artemis", link: "chapter9.html"},
|
|
|
|
|
|
"Why do we need virtual public spheres that are difficult to shut down?",
|
|
|
|
|
|
"Is a federated network oriented towards answering a common goal?",
|
|
|
|
|
|
"Is being part of the network as important as being a custodian of it?",
|
|
|
|
|
|
"Who maintains a self-hosted network?",
|
|
|
|
|
|
"What is the lifespan of a self-hosted network?"
|
|
|
|
|
|
]);
|
|
|
|
|
|
|
|
|
|
|
|
function getRandomArbitrary(min, max) {
|
|
|
|
|
|
return Math.floor(Math.random() * (max - min) + min);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
function isString(s) {
|
|
|
|
|
|
return typeof s === 'string' || s instanceof String;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
const container = document.getElementById('container');
|
|
|
|
|
|
const containerWidth = parseInt(getComputedStyle(container).width) - 40;
|
|
|
|
|
|
|
|
|
|
|
|
messages.forEach(message => {
|
|
|
|
|
|
const row = document.createElement('div');
|
|
|
|
|
|
row.classList.add('row');
|
|
|
|
|
|
row.style.marginBottom = getRandomArbitrary(10,10) + 'px';
|
|
|
|
|
|
|
|
|
|
|
|
const circle = document.createElement('div');
|
|
|
|
|
|
circle.classList.add('circle');
|
|
|
|
|
|
|
|
|
|
|
|
const text = document.createElement('a');
|
|
|
|
|
|
text.classList.add('text');
|
|
|
|
|
|
|
|
|
|
|
|
if(isString(message)) {
|
|
|
|
|
|
text.textContent = message;
|
|
|
|
|
|
}
|
|
|
|
|
|
else {
|
|
|
|
|
|
if(message.text) {
|
|
|
|
|
|
text.textContent = message.text;
|
|
|
|
|
|
}
|
|
|
|
|
|
if(message.cssClass) {
|
|
|
|
|
|
text.classList.add(message.cssClass);
|
|
|
|
|
|
}
|
|
|
|
|
|
if(message.link) {
|
|
|
|
|
|
text.setAttribute('href', message.link);
|
|
|
|
|
|
circle.classList.add('link');
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
row.appendChild(circle);
|
|
|
|
|
|
row.appendChild(text);
|
|
|
|
|
|
container.appendChild(row);
|
|
|
|
|
|
|
|
|
|
|
|
const circleWidth = parseInt(getComputedStyle(circle).width);
|
|
|
|
|
|
const textWidth = parseInt(getComputedStyle(text).width);
|
|
|
|
|
|
|
|
|
|
|
|
const dw = containerWidth - circleWidth - textWidth;
|
|
|
|
|
|
row.style.marginLeft = getRandomArbitrary(0,dw) + 'px';
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
|
|
|
|
|
|
<script>
|
|
|
|
|
|
var coll = document.getElementsByClassName("collapsible");
|
|
|
|
|
|
var i;
|
|
|
|
|
|
|
|
|
|
|
|
for (i = 0; i < coll.length; i++) {
|
|
|
|
|
|
coll[i].addEventListener("click", function() {
|
|
|
|
|
|
this.classList.toggle("active");
|
|
|
|
|
|
var content = this.nextElementSibling;
|
|
|
|
|
|
if (content.style.maxHeight){
|
|
|
|
|
|
content.style.maxHeight = null;
|
|
|
|
|
|
} else {
|
|
|
|
|
|
content.style.maxHeight = content.scrollHeight + "px";
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
<html>
|
