XPUB
/
issue.xpub.nl
71
3
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Merge branch 'master' of https://git.xpub.nl/XPUB/issue.xpub.nl

Browse Source
master
Ottis 5 years ago
parent 29a6a194d5 8b560be69f
commit 3771bd5207
38 changed files with 4089 additions and 0 deletions
Show Stats Download Patch File Download Diff File

280
08/ArtemisGryllaki/category.html
Unescape Escape View File

@ -0,0 +1,280 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Privacy</title>
<link rel="stylesheet" href="style5.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
h3 {
color: black;
padding-left: 30px;
padding-top: 20px;
}
a:link, a:visited {
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
div {
height: 20%;
text-align: center;
font-size: 36px;
padding: 20px;
}
svg {
display: block;
width: 50%;
height: 50%;
margin-left:auto;
margin-right:auto;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 6%;
color: white;
background-color: black;
text-align: center;
}
</style>
</head>
<header><br>
<h1>PRIVACY?</h1>
<p><span class="blink">Is privacy guaranteed in social networks?</blink></a></p>
</header>
<body>
<br><br>
<svg id="canvas" align="center"></svg>
</body>
<div class="wrapper">
<div class="push"></div>
</div>
<footer class="footer"><a href="privacy-iframes.html">VIDEOS (4)</a><a href="privacy-iframes.html">ARTICLES (4)</a><a href="privacy-iframes.html">BOOKS (1)</a>
<script>
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
var svg = document.getElementById('canvas');
var padding = 15;
var circleRadius = 15;
/**
* Returns a random number between min (inclusive) and max (exclusive)
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
*/
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**
* Returns randomly either "true" or "false" with 50% chance for each one.
* @returns {boolean}
*/
function getRandomBoolean() {
return getRandomArbitrary(0, 2) === 1;
}
//when we execute sleep (...ms), program waits for (...ms)
function sleep(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
});
}
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
function pickARandomCirclePosition() {
var w = parseInt(window.getComputedStyle(svg).width);
var h = parseInt(window.getComputedStyle(svg).height);
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
//return an object which has 2 properties, named x,y and value the value of var x,y
return { x: x, y: y };
}
//======================================================================//
// new code 2019.03.02:
const messages = [
"FOSDEM video",
"BBC article",
"INSTITURE OF NETWORK CULTURES article",
"DMYTRI KLEINER video",
"MASTODON video",
"LAINBLOG article",
"RADICAL NETWORKS Scuttlebutt video",
"MANUEL CASTELLS PRESS book",
"HOMEBREWSERVER article"
];
const clickedCircles = [];
const links = [];
const positions = [];
class Question {
constructor(text) {
// Create property "text".
this.text = text;
const position = pickARandomCirclePosition();
/*const position = positionsFromJson[positionFromJsonIndex++];*/
positions.push(position);
const htmlCircle = this.createCircle(position);
const htmlText = this.createText(position, text);
const onMouseenterShowText = () => { htmlText.style.display = 'block'; };
const onMouseleaveHideText = () => { htmlText.style.display = 'none'; };
htmlCircle.addEventListener('mouseleave', onMouseleaveHideText);
htmlCircle.addEventListener('mouseenter', onMouseenterShowText);
htmlCircle.addEventListener('mouseenter', () => {
htmlCircle.style.fill = 'red';
});
htmlCircle.addEventListener('mouseleave', () => {
htmlCircle.style.fill = 'black';
});
/*htmlCircle.addEventListener('click', () => {
htmlText.style.display = 'block';
htmlCircle.removeEventListener('mouseenter', onMouseenterShowText);
htmlCircle.removeEventListener('mouseleave', onMouseleaveHideText);
});*/
htmlCircle.addEventListener('click', () => {
//if(!clickedCircles.includes(htmlCircle)) {
clickedCircles.push(htmlCircle);
//}
this.linkClickedWithPreviouslyClicked();
//this.linkClickedWithAllPreviouslyClicked();
});
}
createCircle(position) {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.style.fill = 'black';
circle.setAttribute('cx', position.x);
circle.setAttribute('cy', position.y);
circle.setAttribute('r', circleRadius);
svg.appendChild(circle);
return circle;
}
createText(position, textContent) {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', position.x + 2*circleRadius);
text.setAttribute('y', position.y + circleRadius/2);
text.textContent = textContent;
text.style.display = 'none';
text.style.fontStyle = "italic";
text.style.fontStyle = "italic";
text.style.fontFamily = "Courier";
text.style.fontWeight = "bold";
text.style.fontSize = "large";
svg.appendChild(text);
return text;
}
createLine(position1, position2) {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', position1.x);
line.setAttribute('y1', position1.y);
line.setAttribute('x2', position2.x);
line.setAttribute('y2', position2.y);
line.setAttribute('stroke', 'black');
svg.appendChild(line);
return line;
}
linkClickedWithPreviouslyClicked() {
const length = clickedCircles.length;
if(length < 2) { return; }
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
const htmlLine = this.createLine(circle1Pos, circle2Pos);
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
}
getCircleCenterPosition(htmlCircle) {
return {
x: htmlCircle.cx.baseVal.value,
y: htmlCircle.cy.baseVal.value,
};
}
getLinkAsString(circle1Pos, circle2Pos) {
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
const linkAsString = pos1AsString + "-" + pos2AsString;
return linkAsString;
}
linkAlreadyExists(circle1Pos, circle2Pos) {
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
}
}
async function network() {
for(let i = 0; i < messages.length; i++) {
const message = messages[i];
new Question(message);
//"await" works only inside async functions
const delayBetweenQuestionCreations = 50;
await sleep(delayBetweenQuestionCreations);
}
console.log(JSON.stringify(positions));
}
network();
</script>
</html>

191
08/ArtemisGryllaki/chapter1.html
Unescape Escape View File

@ -0,0 +1,191 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
min-height: 100%;
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
padding-bottom: 80px;
}
#left {
color: black;
background-color: rgb(207, 210, 227);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(207, 210, 227, .5);
position: relative;
}
a {
display: flex;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container" class="wrapper">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">For who and from what is a network liberating?</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>What gets liberated or controlled, in different networks?</i></b></p>
<p></br>
Social networking sites are virtual domains of sociality, where social time is transformed into digital space. A virtual, digital space, where millions of users place fragments of their everyday activities, opinions, feelings and experiences, turning them all voluntarily into <span>information</span> of the form that each medium receives. A photo, a "like," a map of a daily route produced by GPS, a comment in 140 characters.
</p>
<p>
It is a cliché that the <span>Internet is "liberating"</span> and that social networking platforms guarantee equality to their users in terms of expression. It is also argued that new networked media have overcome the <span>emotional and intellectual decline of “traditional media”</span>, e.g. the TV.
</p>
<p>
Of course, our TV is not dumped in the trash yet. Instead, it is still part of home furniture in the corner of the living room, or the bedroom, having established its value over the years. Remains active in the background, warmly mind-distracting, without expecting anything, just showing its program with confidence. If we compare our TV with our computer, in the first case, we are in front of a screen, holding the remote control, while in the second case we are again in front of a screen, but our hands are on the keyboard. The big difference is when we become active Internet users; it feels that <span>we are both receivers and transmitters</span>. Is that so?
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<!-- <a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><img src="reddoor.png" width="13px" height="18px"><i>What gets liberated or controlled, in different networks?</i></h2></a> -->
<div class="comment">
<a href="chapter3-4.html"><h3 style="color:#ec380b;">Visit the green room to find out how much information does the internet fit.</h3></a>
</div>
<div class="comment">
<h3 style="color:black;">Internet liberation is usually about the liberation of commercial parties; the liberation to make a market.</h3>
</div>
<div class="comment">
<h3 style="color:black;">I believe that forms of yellow journalism always existed. It is not wise to romanticise the past.</h3>
<h3 style="color:black;">Further reading:</h3><div style="line-height:50%;"><br></div>
<a href="http://please.undo.undo.it/Writing/pdfs/Smythe.pdf"><h3><i>Communications : Blindspot of western marxism</i><br>Dallas Smythe</h3></a>
<a href="http://www.fuchs.uti.at/wp-content/uploads/Fuchs_Maxwell.pdf"><h3><i>Dallas Smythe and Digital Labor</i><br>Christian Fuchs</h3></a>
</div>
<div class="comment">
<a href="chapter9.html"><h3 style="color:#ea2709;">Visit the aubergine room to read some thoughts about the role of social media.</h3></a>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
<html>

157
08/ArtemisGryllaki/chapter2.html
Unescape Escape View File

@ -0,0 +1,157 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
min-height: 100%;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
}
#left {
color: black;
background-color: rgb(155, 194, 207, .5);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(155, 194, 207, .2);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">An awkward analogy</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>How does the message differ, depending on the medium?</i></b></p>
<p></br>
Imagine a platform placed at <span>Stationsplein</span> in front of Rotterdam Centraal station. There is a loudspeaker, which I can grab whenever I want, and shout my personal views, opinions, and everything else that comes to my mind. If that happens, it might draw the attention of a small audience which would gather from time to time, gossiping, clapping or jeering. Such a situation would seem like a spectacle for consumption in the style of reality TV talent shows. It is certain though that this <span>could not be a central part of my daily activity.</span>
</p>
<p>
On social media platforms, this is often the case, except that the views, preferences and personal experiences are stored as data to be processed, presented on electronic “walls” and not on real-world platforms. The Internet creates a sense of private communication since it happens with the help of individual devices in private or public spaces. <span>The information displayed may not be needed or would better not be published.</span>
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<img src="images/stationsplein.jpg" alt="Stationsplein" style="width:100%;">
</div>
<div class="comment">
<a href="chapter3.html"><h3 style="color:#ea2709;">Visit the turquoise room to find out some of my daily activities.</h3></a>
</div>
<div class="comment">
<span class="circle"></span>
<h3 style="color:black;">Why are digital social media platforms different than real-world platforms? Is the same message interpreted differently according to the context where we hear it?</h3>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

188
08/ArtemisGryllaki/chapter3-4.html
Unescape Escape View File

@ -0,0 +1,188 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
}
#left {
color: black;
background-color: rgb(197,213,203, .9);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(197,213,203, .3);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">The Internet<br> is big, really</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>How much information does the Internet hold?</i></b></p>
<p></br>
As far as the access to "real information" is concerned, this is probably a vague concept. Within the huge amounts and over-stretch of communication, information becomes impossible to control by myself as an individual receiver. The massive flow of "liberated" information can easily create confusion. This is in contrast to organisations and institutions who can use their superior computing power, trained engineers and resources to have overall traffic supervision, allowing these flows to be controlled and utilised by the appropriate means and for the desired effects.
</p>
<p>
<b>Statements of Technology Executives</b>
</p>
<p>
In 2010, <span>Eric Schmidt</span> (then Executive Chairman of Google) made the following statement:
</p>
<p>
<i>“There were 5 exabytes of information created between the dawn of civilisation through 2003, but that much information is now created every two days.”</i>
</p>
<p>
The reason for this, he argued, is user-generated content. Finally, to show that he has humanitarian concerns, he said that companies like Google could do everything with this information, but the urgent question is whether they should or not. Eric Schmidt claims that technology is neutral (which is a highly debatable idea), nevertheless the world is not ready for what's about to come:
</p>
<p>
<i>“I spend most of my time assuming the world is not ready for the technology revolution that will be happening to them soon.”</i>
</p>
<p>
Another executive in high-tech fields, Robert J. Moore. Co-Founder of RJMetrics, <span>contradicted him</span>, claiming that his allegations were inaccurate and excessive. According to him, the more accurate (but far less sensational) quote would be:
</p>
<p>
<i>“23 Exabytes of information was recorded and replicated in 2002. We now record and transfer that much information every seven days.”</i>
</p>
<p>
<b>Some thoughts</b>
</p>
<p>
Beyond all these claims or exaggerations, it is a fact that the amount of information produced on the Internet per day is increasing tremendously year by year. However, it appears to me that a huge part of this produced and transmitted information contains parts of the life and experience of each transmitter/user of the network. This kind of information is released as a commodity. To be a participant in the online community, I should also “become information.”
</p>
<p>
I can hardly deny that there is underground extortion for e-sociality pushed by real-world relations, although my cyber-exposure becomes more and more dominant. <span>My electronic absence can soon be regarded as a sign of non-existence</span>, almost death. It is true that I have much broader access to information compared to the past. What form does this information have? I feel that the huge-scale flows of all kinds of information can be disorienting. While I am floating in the chaos of cyberspace trash, it doesn’t matter what is true and what is not, what is important and what is meaningless.
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<img src="images/EricSchidt.png" alt="EricSchidtForbes" style="width:100%;">
</div>
<div class="comment">
<img src="images/LoadOfCrap.png" alt="LoadOfCrap" style="width:100%;">
</div>
<div class="comment">
<a href="chapter3.html"><h3 style="color:#ea2709;">Visit the turquoise room if you also wonder what compels you to publish content online.</h3></a>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

196
08/ArtemisGryllaki/chapter3.html
Unescape Escape View File

@ -0,0 +1,196 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
}
#left {
color: black;
background-color: rgb(111,149,149, .5);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(111,149,149, .2);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
li {
margin-left: 20px;
font-size: 19px;
font-family: georgia;
margin-top: 20px;
margin-left: 20px;
}
.highlight {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Personal contradictory experiences</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>What compels us to publish content online?</i></b></p>
<p></br>
I came up with the question, why do I publish content on social media, because I felt this contradiction; <span>having the urge to post</span>, but then feeling awkward after doing it. I often wondered, did I need to upload this photo of myself wandering at ease down the road to Nordereilland? Or did I have to post that song from Bauhaus which says <span>“Your mornings will be brighter… Break the line… Tear up rules… Make the most of a million times no...”?</span> Nobody cares. Or that time that I wrote on my wall a quote from Kazantzakis about hope and freedom. Oh, so embarrassing! When I look back on my online activity, I don’t understand this craving for posting. The more I think about it; it is not really about the content. It is just the feeling that <span>I need to leave my footprints online</span>. Is this a kind of fetishism? Constructing the image of my digital self and exposing it regularly to smaller or bigger audiences gives me in return a place of existence in the online world. There I can get information about the lives of others, but also likes, followers, and all the rest required to build a good reputation.
</p>
<p>
Such a personalised world is an excellent field for further infiltration of marketing in social relations. Nevertheless, within the same field, I could claim that by <span>following user accounts I carefully choose and by participating in network communities</span>, I am able to discuss issues that I am interested in, while having access to information that is not available in other kinds of media.
</p>
<p>
Still, as far as sociality is concerned:<br>
<ul>
<li>How have corporate social media managed to mediate my social relations in such a broad way?</li>
<li>Why are virtual relationships, from which the immediacy of real-world relationships has been removed, gaining ground?</li>
<li>Why is it considered <span class="highlight">socially unacceptable</span> when I speak to a stranger on the street without apologising for interrupting their privacy? And why is relating and talking to someone from the other side of the world, just because we are fans of the same musician or we drink the same kind of coffee, considered perfectly reasonable?</li>
</ul>
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<a href="chapter8.html"><h3 style="color:#ea2709;">Visit the purple room to read about a case, where people had the urge to reveal their voting intentions, in social media.</h3></a>
</div>
<div class="comment">
<iframe width="100%" height="200" src="https://www.youtube.com/embed/ArxSqKrD1ak" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="comment">
<h3 style="color:black;">Is this coming from an intrinsic need to communicate?<br>
Is there something about this kind of networks that creates a desire like that?</h3>
</div>
<div class="comment">
<h3 style="color:black;">Why these promises are often not fully met?</h3>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/Zk1o2BpC79g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="comment">
<a href="chapter2.html"><h3 style="color:#ea2709;">Visit the light blue room to see another analogy.</h3></a>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

174
08/ArtemisGryllaki/chapter4.html
Unescape Escape View File

@ -0,0 +1,174 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
}
#left {
color: black;
background-color: rgb(94, 110, 59, .35);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(94, 110, 59, .1);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Big Data<br> Big Bubble? Goldmine?</h1><br>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>Why is data collected?</i></b></p>
<p>
It seems that our everyday lives are transformed intentionally (or unintentionally) into usable data; our social relations are mediated extensively by machines. Tech giants of Silicon Valley make adequate investments so that they can make use of all the data they store. Maybe what they possess is a goldmine.
<span>Can they establish a new model of sovereignty?</span>
</p>
<p>
Who is listening to all of these views and information about our networked published selves? Who cares?<br>
Indeed this vast amount of information is not garbage. There would be no reason to set up an infrastructure of this scale from the owner companies to host all this data if they were not useful. <span>All these emissions are not wasted;</span> there is some sense in all of them.
</p>
<p>
Now, let's imagine that I unashamedly start <span>shouting my personal information</span>, tastes and opinions in a public square. Would the state security assign an undercover police officer to take notes of all the information I share, expecting to grab any notorious details or dark secrets about my life? Or would a team of advertisers bother to collect my preferences as useful information for their next advertising campaign? I don’t think so. But what if this kind of information were coming from millions of people around the world, in the form of large-scale data? Probably that would make a difference.
</p>
<p>
The collection of a significant amount of social experience, stored as data and sliced into many small pieces, can be easily processed and analysed. One could argue that this entire collection has been placed voluntarily by people across the globe on the servers of some companies. And this collection is beneficial property; it is a <span>collection of raw material</span> derived from the stray productivity of free time.
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<h3 style="color:black;">Can we compare the power of big companies, to the power of the State? The State, composed by the ruling class, forms <a href="http://please.undo.undo.it/readings/Marx%20&%20Engels.pdf"><i>the ruling ideas</i></a>, and can shape to some extent the wishes and desires of the citizens. Is it possible that giant corporations now have this kind of skill?</h3>
</div>
<div class="comment">
<h3 style="color:black;">Phew! I can finally calm down now.</h3>
</div>
<div class="comment">
<a href="chapter2.html"><h3 style="color:#ea2709;">Visit the light blue room for a more vivid description of this analogy.</h3></a>
</div>
<div class="comment">
<h3 style="color:black;">...which could not be left unexploited.</h3>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

178
08/ArtemisGryllaki/chapter5.html
Unescape Escape View File

@ -0,0 +1,178 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
padding-bottom: 80px;
}
#left {
color: black;
background-color: rgb(152, 118, 84, .24);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(152, 118, 84, .07);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Online stalking is <br>a new habit</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>Why do people have the urge to stay networked?</i></b></p>
<p></br>
While reflecting on people’s urge to be part of a network, I was drawn in thinking of what people do in order to relate to others. It is not uncommon for an acquaintance in the real world to be discovered through an Internet search, commonly referred to as <span>“online stalking”</span>. Shuffling around other people's posts on the Internet is no longer considered an invasion. Thus, online stalking has become a normal engagement for students, doctors and academics, often becoming the main methodology for their research. The data collected from such an activity can be used to draw and publish conclusions. But nobody would like to dirty their hands, looking at user profiles one by one. The machines and the code can do it for them. That is how it becomes a pure and socially reputable work.
</p>
<p>
The massive stalking of social network users is called <span>social media analytics</span>. It is a very profitable process, especially if compared with the <span>old social study and critique</span>. To gossip on a massive, global scale is a job that any profitable business, any serious state, can and should do to produce useful social conclusions.
</p>
<p>
We are accustomed to living in an ocean of information, able to accept any of it, where nothing is considered threatening, even when it is evident that everyday habits do not have the shallowness we thought they had. Even when <span>shocking news</span> stories break, important revelations and scandals are accepted, and finally we digest them. After all, they are part of the information routine. As a member of the networked public, I might be able to sacrifice a lot for my beloved habits. <span>And digital life will continue unchanged.</span>
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<span class="circle"></span>
<h3 style="color:black;">This is a part of “being related.”</h3>
</div>
<div class="comment">
<a href="chapter6.html"><h3 style="color:#ea2709;">Visit the orange room to see examples of the social media analytics industry.</h3></a>
</div>
<div class="comment">
<span class="circle"></span>
<h3 style="color:black;">...a euphemism for “gossip”</h3>
</div>
<div class="comment">
<span class="circle"></span>
<h3 style="color:black;">LinkedIn profiles being hacked or proof that personal data in the cloud is not safe</h3>
</div>
<div class="comment">
<span class="circle"></span>
<h3 style="color:black;">If it becomes a "hype" to conceive of mass stalking as an unacceptable activity, I might create a trending topic under the hashtag <i>#StopAnalyzingMyTweets</i> and finally end up saying, "Anyway, it doesn't matter. Everyone is networked, so is the contemporary world".</h3>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

228
08/ArtemisGryllaki/chapter6.html
Unescape Escape View File

@ -0,0 +1,228 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
}
#left {
color: black;
background-color: rgb(173, 92, 5, .2);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(152, 118, 84, .1);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Examples of social media <br>analytics projects</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>Who benefits from social media analytics?</i></b></p>
<p></br>
To my knowledge, there is a big market for programming platforms and digital tools that enable <span>data collection and analysis</span>, mainly targeted at private corporations. These tools use the raw material content uploaded by social network users. Apart from private companies, the state is also interested in user-generated content and invests large amounts of money in the construction of machines to analyse it. For these purposes, departments of information and social sciences usually set up academic researches, with state funding. Trying to understand who finds these researches useful, I gathered some examples of <span>analyses on the activity of social network users</span>. These examples are very few, in comparison with the extensive amount of activities in this sector. The big data analytics industry is expanding, as one of the new territories for capitalist exploitation. Furthermore, while one would expect this development mostly in the US, Europe, (even Greece), is not lagging behind in these activities, so here are some examples from my knowledge.
</p>
<p></br>
<b>“Visibrain”</b><br>
The company <span>“Visibrain”</span> runs a social media monitoring platform that specialises in Twitter analytics. It targets companies and organisations which aim to draw conclusions from online social traffic, by providing analysis packages starting from 400 euros per month for 50 thousand tweets, up to 2000 euros per month for 1 million tweets. The company's clientele includes the French Ministry of Culture and Communication, the French Ministry of Education and the French High Committee for Civil Defence (HCFDC), a think tank for research and analysis of global security issues and new solutions for a "sustainable society". Companies from many fields (technology, telecoms, marketing, pharmaceutical, banking, automotive, consulting, and many more) are also clients of this platform.
</p>
<p></br>
<b>“CERTH”</b><br>
The Centre for Research & Technology Hellas, (CERTH) operates the <span>Multimedia Knowledge & Social Media Analytics Lab</span>, which develops social network monitoring and analysis applications and conducts research on European projects. According to information from its official website, the National Centre for Research and Technology (CERTH) was established in 2000 and is a non-profit legal entity of private law (NPO) supervised by the General Secretariat for Research and Technology (GSRT) of the Ministry of Education, Research and Religion. <span>CERTH</span> has participated in more than 1,000 research projects (with a total budget that exceeds €423 million 1,100 international partnerships) funded by the European Union, major foreign industries (Europe, Asia and the Americas) and the Greek government of the General Secretariat for Research and Technology. The website of this Lab presents the directions of its research activity. Here are some of these directions, as an insight into how organisations behind networking devices relate to the subject of collecting and analysing data.
</p>
<p></br>
<b>“SocialSensor”</b><br>
Greek universities are developing similar activities and collaborate with other European organisations to carry out projects of a similar nature. Such a project coordinated by CERTH is the SocialSensor</span>, funded by the European Union with 9,639,593 euros, of which CERTH received 1,341,526 euros. The description of the project “SocialSensor” from the website of the Institute of Information Technology and Communications of CERTH is the following:
</p>
<p>
“Social media applications have become a modern reality affecting a growing part of the population, as well as companies and public organisations. For example, Twitter messages played an essential role in the recent political developments in Arab countries, while Flickr and YouTube are rich images and video collections based exclusively on user contributions and around 30 billion content items (links, photo albums, status updates) are posted on Facebook every month. It becomes clear that much of what happens in the real-world is documented in real time by the millions of social network users that upload content, interact with each other, and give feedback (rate, comment) on already published online content...”
</p>
<p>
The <span>SocialSensor</span> project resulted in 130 publications, and two spin-off companies. The developed tools are used by a large number of corporations, government agencies and academic institutions. Research in the same field seems to be continuing in following projects, such as “REVEAL”, a project to advance the necessary technologies for making a higher level analysis of social media possible. It aims at enabling users to reveal hidden ‘modalities’ such as reputation, influence or credibility of information. The project (with a total budget of €6,925,004), includes participants such as Demokritos Research Centre and Athens Technology Centre S.A., in addition to CERTH.
</p>
<p></br>
<b>“TRILLION:<br> TRUTH, CITIZEN - LEA coILaboratION over sOcial Networks”</b><br>
In the context of the European funding programme Horizon H2020, CERTH participates in the project “<span>TRILLION</span>: TRUTH, CITIZEN - LEA coILaboratION over sOcial Networks”, which began in September 2015:
</p>
<p>
“Community policing promotes the implementation of bi-directional collaboration channels between citizens and Law Enforcement Agencies (LEAs). By enhancing the discovery of relevant and up to date information, it speeds up the detection of risks, eases their prevention and builds a continuum of collaboration which motivates citizens and LEAs to work together… The operational environment of the platform is not limited to an on-going crisis, but also extends to the period before it through early identification and prevention of emerging risks...”
</p>
<p>
The European Commission’s website on the subject of the TRILLION project:
</p>
<p>
“To this end, the proposed research should also take into account the virtual dimension of “community policing” (i.e. the interaction between citizens and police officers through social networking websites) and analyse its underlying social-cultural legal and ethical dimensions.”
</p>
<p>
<b>Some thoughts...</b><br>
The lesson to be learned from this story is to be aware of where taxes and revenues of the state go, taxes that labour is paying to the European states. It is quite revealing to realise that first, we offer our own experience in data format, and then it can be analysed, with the financial aid of direct and indirect taxation. It seems that we are investing quite some money in projects which develop <span>tools for monitoring, controlling, and mass-managing citizens</span>.
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<h3 style="color:black;">
The applied methods for emotion recognition and analysis (also known as mining), intend to identify associations and trends in individual communities, to observe consumer habits, to categorise users, to detect unusual behaviours and events or to anticipate social movements and reactions.
</h3>
</div>
<div class="comment">
<a href="chapter7.html"><h3 style="color:#ea2709;">Visit the brown room to read my thoughts, wondering, if social media analytics is another word for massive stalking.</h3></a>
</div>
<div class="comment">
<h3 style="color:black;">
Visibrain customers
</h3>
<iframe id="frame2" src="https://www.visibrain.com/en/customers/" height="200" width="100%" style="border:none;"></iframe>
</div>
<div class="comment">
<h3 style="color:black;">
MKLab Research
</h3>
<iframe id="frame2" src="https://mklab.iti.gr/research/" height="200" width="100%" style="border:none;"></iframe>
</div>
<div class="comment">
<h3 style="color:black;"><a href="https://www.certh.gr/root.en.aspx">CERTH</a>
</h3>
<h3 style="color:black;">
The Greek national Center for Research and Technology (CERTH) was established in 2000 and is a non-profit legal entity of private law (NPO) supervised by the General Secretariat for Research and Technology (GSRT) of the Ministry Education, Research and Religion. CERTH has participated in more than 1,000 research projects (with a total budget of more than € 423 million and more than 1,100 international partnerships) funded by the European Union, major foreign industries (Europe, Asia and the Americas) and the Greek government of the General Secretariat for Research and Technology.
</h3>
</div>
<div class="comment">
<h3 style="color:black;"><a href="https://www.iti.gr/iti/projects/SocialSensor.html">SocialSensor Consortium</a>
</h3>
<h3 style="color:black;">
It is interesting to see which companies, universities, and research institutions also participated in SocialSensor: Yahoo Iberia SL (Spain), IBM - Science and Technolgy LTD (Israel), Alcatel - Lucent Bell Labs (France), Deutsche Welle (Germany), University of Klagenfurt (Austria), University of Koblenz-Landau (Germany), The City University London (United Kingdom), Athens Technology Center SA (Greece), German Research Center for Artificial Intelligence GmbH (Germany), JCP-Consult SAS (France)
</h3>
</div>
<div class="comment">
<h3 style="color:black;"><a href="https://cordis.europa.eu/project/rcn/194841/factsheet/en">TRILLION</a>: Objective
<div style="line-height:50%;"><br></div>
</h3>
<h3 style="color:black;"><a href="https://cordis.europa.eu/programme/rcn/666332/en">TRILLION</a>: Ethical and Societal Dimension - Enhancing cooperation between law enforcement agencies and citizens - Community policing
</h3>
</div>
<div class="comment">
<a href="chapter7.html"><h3 style="color:#ea2709;">Visit the rotten apple room to read about case studies where such tools are used.</h3></a>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

230
08/ArtemisGryllaki/chapter7.html
Unescape Escape View File

@ -0,0 +1,230 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
padding-bottom: 50px;
}
#left {
color: black;
background-color: rgb(230, 222, 226);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(230, 222, 226, .3);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Case studies of the role of corporate social media in social uprisings</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>What is the relationship between corporations and government surveillance?</i></b></p>
<p></br>
Undoubtedly, there is a high level of <span>“interest”</span> in collecting and analysing the content contributed by social network users.
</p>
<p> <b>#OccupyGezi</b><br>
Regarding the possible uses of the developing tools for analysis, I will refer to a <span>publication</span> in the context of <span>SocialSencor</span>, where the case study example was the revolt of Turkish youth in the summer of 2013. A wave of demonstrations started at Istanbul's Taksim Square, to prevent the destruction of Gezi Park. Here are some extracted pieces of the publication, which displays the role and service of analysis tools in large-scale events, such as a social rebellion.
</p>
<p>
...the described framework supports configurable targeted crawling and indexing of social multimedia content in tandem with real-time analysis and summarisation. The framework is based on a real-time distributed architecture, including very efficient image indexing and clustering implementations. We evaluate the framework on a large-scale case study around the <i>#OccupyGezi</i> events…<br><br>
...We started the crawling exercise on June 4th and continued until July 17th. The crawling was conducted around a set of hand-picked keywords and a small number of selected accounts on Facebook and YouTube…<br><br>
...A total of 16,785,785 Items and 319,095 Media Items were collected respectively, spanning the interval (Jun 1, Jul 17)…
...The Figure provides a <span>map-based view</span> of the event at different zoom levels (based on the subset of images that are geotagged). From the figure, it becomes apparent that although the events were highly intense on Istanbul (and the Gezi park in particular), there was considerable activity in major Turkish cities (Ankara, Bursa, Izmir, Antalya, Eskisehir, Bodrum), and even in large European (London, Berlin, Paris) and American (New York, San Francisco, Boston, Toronto) cities…<br><br>
...The evaluation of the crawler in the context of the <i>#OccupyGezi</i> events demonstrated that it is an effective tool for collecting diverse content from social networks and for browsing and searching it in multiple ways...<br><br>
</p>
<p>
<b>Arab Spring</b><br>
Another typical case for analysis is the so-called <span><i>Arab Spring</i></span>, in which the western world contends that social media played a central role. Over the past few years, a lot of research projects have been done by academic and state institutions to study the use of social media in the uprisings of the Arab world. Many westerners have described the <i>Arab Spring</i> as a Twitter or Facebook revolution. An article on the website of the University of Washington with the title <span>“New study quantifies the use of Social Media in the <i>Arab Spring</i>”</span> begins as follows;
</p>
<p>
<i>“In the 21st century, the revolution may not be televised – but it likely will be tweeted, blogged, texted and organised on Facebook, recent experience suggests.”</i>
</p>
<p>
<br><b>My thoughts...</b><br>
The rebels in the Arab world did not expect to rely on Facebook to decide their actions, nor Twitter to learn about the weapons and tanks that they were facing. The fact that they used tools like that, mainly to open up and speak to the rest of the world about what was happening, doesn’t mean that without them they would be unable to coordinate their efforts. It seems that westerners are possibly more interested in the use of social media, instead of the very fact of the uprising. They repeatedly talk about the way it supposedly happened; through social media. When the medium is identified as the message, the message may lose its meaning.
</p>
<p>
The reproduction of a hasty conclusion that social rebellions in the 21st century take place on the servers of one or more corporations is a specific media translation of reality. The reality, however, is much more complex. The developers of mechanisms for social control are the ones who advocate for more of such ideologies; that <span>corporate social media can be an alternative</span> or independent means of communication and organisation. I do not argue that it was a mistake from the side of the people who protested in the Arab countries to use corporate social media, phones, emails or blogs amid a social uprising. Nonetheless, the next time I hear that a social uprising is happening through social media, I will certainly have to be more suspicious of which side supports such a claim. Are they the same ones who develop and use tools to analyse social movements? If the relationship between social media and <i>Arab Spring</i> rebels or other social outbreaks have been examined already hundreds of times, the goal, as shown in projects like SocialSensor, is ultimately the real-time analysis of similar situations. The next time something like that happens, it could be managed more efficiently by the organisations that have the appropriate machines and means to do it.
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<a href="chapter4.html"><h3 style="color:#ea2709;">Visit the olive room for questions like "who cares about collecting all this data?"
</h3></a>
</div>
<div class="comment">
<span class="circle"></span>
<h3 style="color:black;"><a href="http://stcsn.ieee.net/e-letter/vol-1-no-3/social-multimedia-crawling-and-search">Social Multimedia Crawling and Search</a>
</h3>
</div>
<div class="comment">
<a href="chapter6.html"><h3 style="color:#ea2709;">Visit the orange room to read about the “SocialSensor” project.</h3></a>
</div>
<div class="comment">
<span class="circle"></span>
<img src="images/maps.png" alt="map-based view" style="width:100%;">
</div>
<div class="comment">
<a href="http://b-e-e-t.r-o-o-t.net/pages/mejias_liberation_technology.html"><h3 style="color:#007577;">Visit Simon's home for further reading.</h3></a>
<div style="line-height:20%;"><br>
</div>
<h3 style="color:black;"><i>Liberation Technology and the Arab Spring: From Utopia to Atopia and Beyond</i><div style="line-height:50%;"><br>
Ulises A. Mejias, SUNY Oswego
</h3>
</div>
<div class="comment">
<iframe width="100%" height="180" src="http://www.washington.edu/news/2011/09/12/new-study-quantifies-use-of-social-media-in-arab-spring/" allowfullscreen></iframe>
</div>
<div class="comment">
<span class="circle"></span>
<iframe width="100%" height="200" src="https://www.youtube.com/embed/Khzsm29uS7g" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<h3 style="color:black;">Houssam Al Deen, a Syrian journalist, explains how Syrians have learnt for good, the beneficial relationship that companies like Facebook and Skype can develop with a regime.</h3><br><br>
<iframe id="frame2" src="https://www.twitterandteargas.org/" height="200" width="100%" style="border:none;"></iframe>
<h3 style="color:black;">Zeynep Tufekci, a Turkish-American author, looks at how governments have responded to the rise of digital tools with their own methods, including misinformation, distraction, and surveillance.</h3>
</div>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

202
08/ArtemisGryllaki/chapter8.html
Unescape Escape View File

@ -0,0 +1,202 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
}
#left {
color: black;
background-color: rgb(233,221,237);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(233,221,237, .4);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Memories of social media use in the Greek Referendum of 2015</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>How does a network amplify or weaken voices?</i></b></p>
<p></br>
One could observe that in the context of <span>fetishistic online self-exposure</span>, public political opinions appear quite often on electronic walls. While polling organisations complain that more and more people are not willing to reveal their voting intentions, in social media, there are a lot of announcements. Although numerous monitoring tools have been developed, social media functions inherently in a way that in many cases is sufficient for the psycho-emotional management of their users.
</p>
<p> An example that remains vivid in my memory is the legendary Greek referendum of 2015 and the overwhelming number of tweets bombarding the trending topic #greferendum. Both sides of the debate, #YES and #NO, were broadly using Twitter as a propaganda weapon for their campaign. “Talkwalker”, a social network monitoring and analysis company, within the context of advertising their service, published a <span>study about the fluctuations of the two hashtag campaigns</span>, based on data extracted from Twitter. I can imagine that analysts and researchers use these kinds of studies to confirm the predictability in the movements of virtual crowds, according to the rules of spectacle. For me, it was just disappointing to see the virtual reflection of real-life social-emotional
and intellectual vulnerability.
</p>
<p>
According to the study, after the referendum was announced, the #NO campaign took an early lead over the #YES campaign, both in Greece and globally. Nevertheless, some days later, #YES surpassed #NO in Greek Twitter accounts, following the sudden imposition of capital controls by the government. After that, Prime Minister <span>Alexis Tsipras speech on national Greek TV</span> boosted the #NO trend again. The Prime Minister asserted the citizens that their money is secure and he is personally responsible for it. He encouraged them to vote #NO and reminded them of their historical duty over this crucial moment. “Talkwalker” published the following on its marketing blog;
</p>
<p>
“Tsipras’ and Varoufakis’ use of social media seems to lead the debate, generating more conversation and buzz than Junckers and Lagarde. Alexis Tsipras is eight times more active socially than Jean Claude Juncker. He also generates three times more social engagement than Mr Juncker. <span>Varoufakis’ tweet</span> that “democracy deserves a boost in Euro related matters, we just delivered it, let the people decide, funny how radical this concept sounds” was retweeted over 9,400 times, “favourited” over 6,300 times.
</p>
<p>
Tspiras’ tweet (which coincided with his speech) in which he said “the dignity of the Greek people in the face of blackmail and injustice sends a message of hope and pride to all of Europe” was <span>retweeted over 4,800 times and “favourited” over 3,200 times</span>. Tsipras’ social performance, in particular, appears to have given a big boost to the “No” campaign with his 37 tweets using “No” hashtags resulting in close to 18,000 retweets. Juncker was the last to finish this “high-quality” political race, receiving only 2,240 retweets and being “favourited” 1,390 times.
</p>
<p>
Twitter offered everyone the convenience of publishing their online opinion uninhibited, thinking that “since political figures like Varoufakis and Tsipras send radical tweets, so will I!”. Some people thought that Twitter's massive movement would cause the explosion of cyberspace; that the system would be unable to stand the vast number of hashtags and the enormous expression of public opinions, unmediated by TV channels. Many people hoped that the referendum’s result, supported by radical expression on Twitter, would cast away all the austerity measures of the memorandum and the minimum wage would rise again. A lot of social media users had the impression of being informed independently from TV channels. They wanted to punish the classic TV personas, who were considered to follow orders from big corrupted political parties. They wanted to give mainstream TV channels a lesson, for promoting <span>#YES</span> in favour of their bosses, against the “common good”. The mentality of the average Greek person at that moment was the: "Finally, we proudly stood up to these goddamn Germans. #NO!"
</p>
<p>
Unfortunately, things didn’t work out as expected. Despite the major #NO result, the agreement with the European authorities came as a big disappointment, (#greekment in Twitter language), introducing the new memorandum. Subsequently, a new hashtag burst onto the internet; a physics professor in Barcelona introduced #ThisIsACoup, writing on July 12: “The Eurogroup proposal is a covert coup d’ Etat against the Greek people. <span>#ThisIsACoup #Grexit.</span>” Of course, Twitter went crazy again.
</p>
<p>
To sum up: July 2, #NO stands up to European Creditors; July 12, #ThisIsACoup shakes the world. A comment on a TV channel’s website says: “The last two hours #ThisIsACoup is ranked 1st. Germans are condemned in real-time by the whole world.” I think that this is actually how the networked mass becomes a victim of psychological management by itself. The all-powerful TV cannot do this in such a masterly way. The transition from “we-will-show-them” to “look-what-they-do-to-us” is not uncommon for Greek “Petite bourgeoisie” and its obsessions. However, as long as a medium that appears to be “alternative” validates this dynamic, the result is the self-assertion and reinforcement of a petite bourgeoisie attitude. Admittedly, I am writing this while being ignorant of all the mechanisms which work together to generate such situations. Nevertheless, I am almost entirely convinced that corporate social networks are adequate for the role of mass psychological management.
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<a href="chapter3.html"><h3 style="color:#ea2709;">Visit the turquoise room to read about some of my contradictory self-exposure stories.</h3></a>
</div>
<div class="comment">
<h3 style="color:black;">Article originally appeared on Talkwalker Blog</h3>
<iframe width="100%" height="200" src="https://www.business2community.com/world-news/greece-referendum-social-momentum-with-the-no-campaign-01266476" allowfullscreen></iframe>
</div>
<div class="comment">
<iframe width="100%" height="200" src="https://www.youtube.com/embed/e0vfAkSJKps" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
</div>
<div class="comment">
<img src="images/varoufakistweet.png" alt="@yanisvaroufakis" style="width:100%;">
</div>
<div class="comment">
<img src="images/tsiprastweet.png" alt="@tsipras_eu" style="width:100%;">
</div>
<div class="comment">
<h3 style="color:black;">A #YES meme.</h3>
<img src="images/yesmeme.jpg" alt="#yesmeme" style="width:50%;">
</div>
<div class="comment">
<h3 style="color:black;"><a href="https://twitter.com/smaccarrone/status/620292021010460672">@smaccarrone</a></h3>
<img src="images/smaccarronetweet.png" alt="@smaccarrone" style="width:100%;">
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

167
08/ArtemisGryllaki/chapter9.html
Unescape Escape View File

@ -0,0 +1,167 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on 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;
}
html, body {
width: 100%;
height: 100%;
}
#container {
display: flex;
flex-direction: row;
justify-content: center;
}
#left,
#right {
width: 50%;
max-width: 450px;
flex-grow: 1;
flex-shrink: 1;
padding: 20px;
padding-bottom: 50px;
}
#left {
color: black;
background-color: rgb(97, 58, 135, .27);
}
#right {
color: black;
/*background-color: rgb(170,170,170, .6);*/
background-color: rgb(97, 58, 135, .09);
position: relative;
}
p {
font-size: 19px;
font-family: georgia;
line-height: 26.1px;
margin-top: 20px;
margin-left: 20px;
margin-right: 20px;
margin-bottom: 20px;
}
p > span {
display: inline;
background-color: rgb(250, 246, 177);
position: relative;
}
p > span:hover {/*
color: #df5b57;*/
}
.comment {
position: absolute;
top: -100px;
transition: all 1s linear;
width: calc(100% - 40px);
}
h3 {
font-size: 18px;
text-align: left;
font-weight: 400;
font-style: normal;
margin-left: auto;
margin-right: 15px;
letter-spacing: 0px;
text-transform: none;
font-family: bree-serif;
}
</style>
</head>
<body>
<!-- <audio controls autoplay style="display:none">
<source src="TurnPage.wav" type="audio/wav">
</audio> -->
<div id="container">
<div id="left">
<h1 style="color:black;font-size:40px;font-family:georgia">Thoughts about the role of social media</h1>
<p style="color:black;font-size:16px;font-family:georgia">In the context of the question:<br> <b><i>What is the impact of social media on human relationships?</i></b></p>
<p></br>
With a big amount of silent fuss (in the form of information) and the flattening of dialectic method, corporate social media can push the “participants” into the trap of simplistic shouting to the electronic crowd, practically in a virtual way; tweets, retweets, uploads, likes. This differentiates them from traditional media, which are considered responsible for creating “passive audiences”. The users’ participation in social networks makes them passionate defenders of the information they receive and broadcast through their <span>individualised electronic universe;</span> they believe that they are in control of their own, or their social circle’s information; they also feel that <span>by turning off their TV they do something special</span>. However, before any information is published, it has been adapted to the means and the context of the new medium. The involvement in the information processes does not change the content substantially, not only because social relationships do not change through media, but also because there is a machine in between, which sets its terms, as it <span>mediates communication</span>.
</p>
<p>
There is no doubt that the ways to get information are dramatically different from the past, so it is impossible to have televised "news" any more. Thus, part of corporate social media attempts to fill this gap, transferring the old mediation mechanisms and expanding their own. Analytical tools are useful to confirm and strengthen the existing social relations, to validate whatever is moving within the framework of the dominant ideology or to identify the deviations from the usual social motifs. The actions, thoughts and denials of nonconformists can be studied and controlled as social "anomalies". It is possible that the creation of mechanisms to record, collect and analyse social experiences aims to identify, control, suppress and manipulate current denials. If there is an attempt of invading and spying everyday lives, <span>I will not protest about the abolition of my "privacy" in its “bourgeois sense”.</span>
</p>
<a href="index.html"><h2 style="color:black; font-size:16px; font-family:georgia; margin-top:50px; margin-left: 20px"><i>Go back to the questions</i></h2></a>
</div>
<div id="right">
<div class="comment">
<a href="chapter3.html"><h3 style="color:#ea2709;">Visit the turquoise room to find a link about the concept of Filter bubbles and Echo Chambers.</h3></a>
</div>
<div class="comment">
<a href="chapter1.html"><h3 style="color:#ea2709;">Visit the blue room to find my questions on how different are traditional compared to new media.</h3></a>
</div>
<div class="comment">
<h3 style="color:black;">It does not transform social relationships, but – being a medium – it accelerates, reproduces and strengthens the existing social ideologies.</h3>
</div>
<div class="comment">
<h3 style="color:black;">Instead I should consider, why have I the urge to publish my daily life moments online?(link)<br>What happens when these fragmented pieces of my social experience are analysed by technicians and power institutions? <br>Is it even possible to have control over the data I publish on the Internet?</h3>
</div>
</div>
</div>
<script>
var left = document.getElementById('left');
var spans = Array.from(left.getElementsByTagName('span'));
var right = document.getElementById('right');
var comments = Array.from(right.children);
function setCommentPosition() {
comments.forEach((comment, index) => {
var offsetTop = spans[index].offsetTop;
comment.style.top = offsetTop + 'px';
});
}
setCommentPosition();
setTimeout(setCommentPosition, 800);
function debounce(func){
var timer;
return function(event) {
if(timer) clearTimeout(timer);
timer = setTimeout(func, 100, event);
};
}
window.addEventListener("resize", debounce(function(e) {
setCommentPosition();
}));
</script>
</body>
<html>

BIN
08/ArtemisGryllaki/fonts/BreeSerif-Regular.otf
View File

Binary file not shown.

BIN
08/ArtemisGryllaki/fonts/Georgia Regular font.ttf
View File

Binary file not shown.

BIN
08/ArtemisGryllaki/help.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 12 KiB

273
08/ArtemisGryllaki/homepage.html
Unescape Escape View File

@ -0,0 +1,273 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on Networks</title>
<link rel="stylesheet" href="style5.css">
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
h3 {
color: black;
padding-left: 30px;
padding-top: 20px;
}
a:link, a:visited {
background-color: #000000;
color: white;
padding: 14px 25px;
text-align: center;
text-decoration: none;
display: inline-block;
}
div {
height: 20%;
text-align: center;
font-size: 36px;
padding: 20px;
}
svg {
display: block;
width: 50%;
height: 50%;
margin-left:auto;
margin-right:auto;
}
.footer {
position: fixed;
left: 0;
bottom: 0;
width: 100%;
height: 6%;
color: white;
background-color: black;
text-align: center;
}
</style>
</head>
<header><br>
<h1>Questions on Networks</h1>
<p><span class="blink">Centralized vs Federated</blink></a></p>
</header>
<body>
<br><br>
<svg id="canvas" align="center"></svg>
</body>
<div class="wrapper">
<div class="push"></div>
</div>
<footer class="footer"><a href="privacy.html">PRIVACY</a><a href="privacy.html">FOCUS-GOAL</a><a href="privacy.html">ENERGY CONSUMPTION</a><a href="privacy.html">RESILIENCE IN DISASTER</a><a href="privacy.html">KNOWLEDGE OF TOOLS</a></footer>
<script>
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
var svg = document.getElementById('canvas');
var padding = 15;
var circleRadius = 15;
/**
* Returns a random number between min (inclusive) and max (exclusive)
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
*/
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**
* Returns randomly either "true" or "false" with 50% chance for each one.
* @returns {boolean}
*/
function getRandomBoolean() {
return getRandomArbitrary(0, 2) === 1;
}
//when we execute sleep (...ms), program waits for (...ms)
function sleep(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
});
}
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
function pickARandomCirclePosition() {
var w = parseInt(window.getComputedStyle(svg).width);
var h = parseInt(window.getComputedStyle(svg).height);
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
//return an object which has 2 properties, named x,y and value the value of var x,y
return { x: x, y: y };
}
//======================================================================//
// new code 2019.03.02:
const messages = [
"PRIVACY?",
"RESILIENCE IN DISASTER?",
"ENERGY CONSUMPTION CONTROL?",
"FOCUS ON USE OR PROFIT?",
"KNOWLEDGE OF THE TOOLS USED?",
];
const clickedCircles = [];
const links = [];
const positions = [];
class Question {
constructor(text) {
// Create property "text".
this.text = text;
const position = pickARandomCirclePosition();
/*const position = positionsFromJson[positionFromJsonIndex++];*/
positions.push(position);
const htmlCircle = this.createCircle(position);
const htmlText = this.createText(position, text);
const onMouseenterShowText = () => { htmlText.style.display = 'block'; };
const onMouseleaveHideText = () => { htmlText.style.display = 'none'; };
htmlCircle.addEventListener('mouseleave', onMouseleaveHideText);
htmlCircle.addEventListener('mouseenter', onMouseenterShowText);
htmlCircle.addEventListener('mouseenter', () => {
htmlCircle.style.fill = 'red';
});
htmlCircle.addEventListener('mouseleave', () => {
htmlCircle.style.fill = 'black';
});
/*htmlCircle.addEventListener('click', () => {
htmlText.style.display = 'block';
htmlCircle.removeEventListener('mouseenter', onMouseenterShowText);
htmlCircle.removeEventListener('mouseleave', onMouseleaveHideText);
});*/
htmlCircle.addEventListener('click', () => {
//if(!clickedCircles.includes(htmlCircle)) {
clickedCircles.push(htmlCircle);
//}
this.linkClickedWithPreviouslyClicked();
//this.linkClickedWithAllPreviouslyClicked();
});
}
createCircle(position) {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.style.fill = 'black';
circle.setAttribute('cx', position.x);
circle.setAttribute('cy', position.y);
circle.setAttribute('r', circleRadius);
svg.appendChild(circle);
return circle;
}
createText(position, textContent) {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', position.x + 2*circleRadius);
text.setAttribute('y', position.y + circleRadius/2);
text.textContent = textContent;
text.style.display = 'none';
text.style.fontStyle = "italic";
text.style.fontStyle = "italic";
text.style.fontFamily = "Courier";
text.style.fontWeight = "bold";
text.style.fontSize = "large";
svg.appendChild(text);
return text;
}
createLine(position1, position2) {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', position1.x);
line.setAttribute('y1', position1.y);
line.setAttribute('x2', position2.x);
line.setAttribute('y2', position2.y);
line.setAttribute('stroke', 'black');
svg.appendChild(line);
return line;
}
linkClickedWithPreviouslyClicked() {
const length = clickedCircles.length;
if(length < 2) { return; }
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
const htmlLine = this.createLine(circle1Pos, circle2Pos);
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
}
getCircleCenterPosition(htmlCircle) {
return {
x: htmlCircle.cx.baseVal.value,
y: htmlCircle.cy.baseVal.value,
};
}
getLinkAsString(circle1Pos, circle2Pos) {
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
const linkAsString = pos1AsString + "-" + pos2AsString;
return linkAsString;
}
linkAlreadyExists(circle1Pos, circle2Pos) {
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
}
}
async function network() {
for(let i = 0; i < messages.length; i++) {
const message = messages[i];
new Question(message);
//"await" works only inside async functions
const delayBetweenQuestionCreations = 50;
await sleep(delayBetweenQuestionCreations);
}
console.log(JSON.stringify(positions));
}
network();
</script>
</html>

32
08/ArtemisGryllaki/iframes.html
Unescape Escape View File

@ -0,0 +1,32 @@
<!DOCTYPE html>
<html>
<head>
<title>PRIVACY ISSUE</title>
<style>
div {
text-align: center;
}
</style>
</head>
<body>
<div>
<br><br>
<iframe id="frame1" width="400" height="230" src="https://www.youtube.com/embed/O-x4jQ2UNOw" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="frame2" src="https://www.bbc.com/news/technology-43465968" height="230" width="400" style="border:none;"></iframe>
<iframe id="frame3" name="ifr" src="http://networkcultures.org/unlikeus/2013/03/21/monetizing-privacy-how-much-does-facebook-owe-you/" height="230" width="400" style="border:none;"> </iframe><br>
<iframe id="frame4" width="400" height="230" src="https://www.youtube.com/embed/NW5RLBqQmFA" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="frame5" width="400" height="230" src="https://www.youtube.com/embed/IPSbNdBmWKE" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="frame6" src="https://blog.soykaf.com/tags/privacy/" height="230" width="400" style="border:none;"> </iframe><br>
<iframe id="frame7" width="400" height="230" src="https://www.youtube.com/embed/5R0x_WRZdFM" frameborder="0" allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>
<iframe id="frame8" src="https://global.oup.com/academic/product/communication-power-9780199681938?cc=nl&lang=en&" height="230" width="400" style="border:none;"> </iframe>
<iframe id="frame9" src="https://homebrewserver.club/configuring-a-modern-xmpp-server.html" height="230" width="400" style="border:none;"> </iframe>
</div>
</body>
</html>

BIN
08/ArtemisGryllaki/images/EricSchidt.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 129 KiB

BIN
08/ArtemisGryllaki/images/LoadOfCrap.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 287 KiB

BIN
08/ArtemisGryllaki/images/maps.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 362 KiB

BIN
08/ArtemisGryllaki/images/smaccarronetweet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 135 KiB

BIN
08/ArtemisGryllaki/images/stationsplein.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 289 KiB

BIN
08/ArtemisGryllaki/images/tsiprastweet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 99 KiB

BIN
08/ArtemisGryllaki/images/varoufakistweet.png
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 101 KiB

BIN
08/ArtemisGryllaki/images/varoufakistweet.xcf
View File

Binary file not shown.

BIN
08/ArtemisGryllaki/images/yesmeme.jpg
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 28 KiB

152
08/ArtemisGryllaki/index.html
Unescape Escape View File

@ -0,0 +1,152 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Social Networks</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<h1 style="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:#ec380b;">red door</span></b> will guide you to a different room of <i>this house</i>, while a <b><span style="color:#007872;">green 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>
<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: "green", link: "http://sweetandsour.chickenkiller.com"},
{ text: "Why do people move to decentralised social networks?", cssClass: "green", link: "http://richfolks.club/"},
{ text: "What is network(ed) publishing?", cssClass: "green", link: "http://foshan-1992.pw/~biyi/index"},
{ text: "How fragile is a self-hosted network?", cssClass: "green", link: "http://nothat.bad.mn/"},
{ text: "What could a network look like?", cssClass: "green", link: "http://b-e-e-t.r-o-o-t.net/pages/beetroot_to_ciao.html"},
{ text: "How do people use networks to create visual collaborations?", cssClass: "green", link: "http://p.lions.es/"},
{ text: "How does scale affect the way we perceive networks?", cssClass: "green", link: "http://ciao.urca.tv"},
{ text:"Can decentralised web have an impact beyond geeks & social web enthusiasts?", cssClass: "grey"},
{ text:"How important is to choose, or create our media of communication?", cssClass: "grey"},
{ text:"Is decentralisation a panacea, or a pharmakon?", cssClass: "grey"},
{ text:"Is decentralisation enough?", cssClass: "grey"},
{ text: "What gets liberated or controlled, in different networks?", cssClass: "orange", link: "chapter1.html"},
{ text: "How does the message differ, depending on the medium?", cssClass: "orange", link: "chapter2.html"},
{ text: "What compels us to publish content online?", cssClass: "orange", link: "chapter3.html"},
{ text: "How much information does the Internet hold?", cssClass: "orange", link: "chapter3-4.html"},
{ text: "Why do we collect all this data?", cssClass: "orange", link: "chapter4.html"},
{ text: "Why do people have the urge to stay networked?", cssClass: "orange", link: "chapter5.html"},
{ text: "Who benefits from social media analytics?", cssClass: "orange", link: "chapter6.html"},
{ text: "What is the relationship between corporations and government surveillance?", cssClass: "orange", link: "chapter7.html"},
{ text: "How does a network amplify or weaken voices?", cssClass: "orange", link: "chapter8.html"},
{ text: "What is the impact of social media on human relationships?", cssClass: "orange", link: "chapter9.html"},
{ text:"Why do we need virtual public spheres that are difficult to shut down?", cssClass: "grey"},
{ text:"Is a federated network oriented towards answering a common goal?", cssClass: "grey"},
{ text:"Is being part of the network as important as being a custodian of it?", cssClass: "grey"},
{ text:"Who maintains a self-hosted network?", cssClass: "grey"},
{ text:"What is the lifespan of a self-hosted network?", cssClass: "grey"}
]);
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');
if(message.cssClass == 'orange') {
circle.classList.add('circle');
} else if (message.cssClass == 'green') {
circle.classList.add('circle1');
} else {
circle.classList.add('circle2')
}
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 type="text/javascript" src="https://issue.xpub.nl/08/cnn/cnn.js"></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>

159
08/ArtemisGryllaki/indexold.html
Unescape Escape View File

@ -0,0 +1,159 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Social Networks</title>
<style>
@font-face {
font-family: bree-serif;
src: url("bree-serif/BreeSerif-Regular.otf");
}
@font-face {
font-family: georgia;
src: url("georgiai.ttf");
}
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
font-family: bree-serif;
font-size: 19px;
}
h1 {
font-size: 57px;
text-align: right;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
text-transform: none;
line-height: 1.3em;
font-family: bree-serif;
margin-right: 50px;
margin-top: 20px;
}
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: #df5b57;
}
#container {
background-color: white;
padding: 20px;
}
.row {
display: flex;
flex-direction: row;
}
.circle {
flex-grow: 0;
flex-shrink: 0;
width: 15px;
height: 15px;
border-radius: 50%;
background-color: #df5b57;
}
.text {
padding-left: 10px;
}
</style>
</head>
<body>
<h1>Questions on</br> <span class="underline">Social Networks</span></h1>
<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([
"Can decentralised web have an impact beyond geeks & social web enthusiasts?",
"Why do we need decentralised networks?",
"How do we perceive federated publishing?",
"Collectivity vs individuality: does decentralisation helps?",
"Who moves to a decentralised network and why?",
"What content does a federated network host?",
"Is the medium the message?",
"Does the medium transform the message?",
"Does the same story have a different value, according to where is heard?",
"How important is to choose, or create our media of communication?",
"Is decentralisation a panacea, or a pharmakon?",
"Is decentralisation enough?",
"What are the dangers of centralised networks?",
"Whose voice is amplified or curbed in a centralised network?",
"Do we need digital social networking platforms?",
"Do we need virtual public spheres that are difficult to shut down?",
"Is a federated network oriented towards answering a common goal?",
"How is the common goal of the network shaped?",
"Is being part of the network as important as being a custodian of it?",
"Who maintains a federated network?",
"What is the lifespan of a federated network?",
"How can a federated network be sustained with economic means?"
]);
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
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('div');
text.classList.add('text');
text.textContent = message;
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>
</body>
<html>

282
08/ArtemisGryllaki/intro1.html
Unescape Escape View File

@ -0,0 +1,282 @@
<!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>

197
08/ArtemisGryllaki/nodesscript.js
Unescape Escape View File

@ -0,0 +1,197 @@
//find the element with id =message(in dom), return via function: document.getelementbyid, store it in var
var svg = document.getElementById('canvas');
var padding = 8;
var circleRadius = 8;
/**
* Returns a random number between min (inclusive) and max (exclusive)
* from: https://stackoverflow.com/questions/1527803/generating-random-whole-numbers-in-javascript-in-a-specific-range
*/
function getRandomArbitrary(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
/**
* Returns randomly either "true" or "false" with 50% chance for each one.
* @returns {boolean}
*/
function getRandomBoolean() {
return getRandomArbitrary(0, 2) === 1;
}
//when we execute sleep (...ms), program waits for (...ms)
function sleep(time) {
return new Promise(resolve => {
setTimeout(() => {
resolve();
}, time);
});
}
//The parseInt() function parses a string argument and returns an integer of the specified size of svg in pixels
function pickARandomCirclePosition() {
var w = parseInt(window.getComputedStyle(svg).width);
var h = parseInt(window.getComputedStyle(svg).height);
var x = getRandomArbitrary(padding + circleRadius, w - circleRadius - padding);
var y = getRandomArbitrary(padding + circleRadius, h - circleRadius - padding);
//return an object which has 2 properties, named x,y and value the value of var x,y
return { x: x, y: y };
}
//======================================================================//
// new code 2019.03.02:
const messages = [
"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS AND SOCIAL WEB ENTHUSIASTS?",
"WHY DO WE NEED A DECENTRALIZED NETWORK?",
"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
"IS THE MEDIUM THE MESSAGE?",
"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
"IS DECENTRALIZATION A PANACEA, OR A PHARMAKON?",
"IS DECENTRALIZATION ENOUGH?",
"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
"WHO MAINTAINS A FEDERATED NETWORK?",
"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC AND ECOLOGICAL MEANS?",
];
const clickedCircles = [];
const links = [];
const positions = [];
const positionsFromJson = JSON.parse('[{"x":420,"y":388},{"x":408,"y":269},{"x":356,"y":673},{"x":246,"y":499},{"x":1009,"y":476},{"x":468,"y":399},{"x":714,"y":189},{"x":1336,"y":427},{"x":1307,"y":595},{"x":1496,"y":95},{"x":876,"y":657},{"x":929,"y":373},{"x":356,"y":599},{"x":1375,"y":726},{"x":1293,"y":465},{"x":1512,"y":325},{"x":972,"y":387},{"x":1115,"y":720},{"x":547,"y":85},{"x":663,"y":431},{"x":1583,"y":272},{"x":1019,"y":416},{"x":1500,"y":592}]');
let positionFromJsonIndex = 0;
class Question {
constructor(text) {
// Create property "text".
this.text = text;
//const position = pickARandomCirclePosition();
const position = positionsFromJson[positionFromJsonIndex++];
positions.push(position);
const htmlCircle = this.createCircle(position);
const htmlText = this.createText(position, text);
htmlCircle.addEventListener('mouseenter', () => {
htmlText.style.display = 'block';
});
htmlCircle.addEventListener('mouseleave', () => {
htmlText.style.display = 'none';
});
htmlCircle.addEventListener('mouseenter', () => {
htmlCircle.style.fill = 'red';
});
htmlCircle.addEventListener('mouseleave', () => {
htmlCircle.style.fill = 'black';
});
htmlCircle.addEventListener('click', () => {
//if(!clickedCircles.includes(htmlCircle)) {
clickedCircles.push(htmlCircle);
//}
this.linkClickedWithPreviouslyClicked();
//this.linkClickedWithAllPreviouslyClicked();
});
}
createCircle(position) {
const circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
circle.style.fill = 'black';
circle.setAttribute('cx', position.x);
circle.setAttribute('cy', position.y);
circle.setAttribute('r', circleRadius);
svg.appendChild(circle);
return circle;
}
createText(position, textContent) {
const text = document.createElementNS('http://www.w3.org/2000/svg', 'text');
text.setAttribute('x', position.x + 2*circleRadius);
text.setAttribute('y', position.y + circleRadius/2);
text.textContent = textContent;
text.style.display = 'none';
text.style.fontStyle = "italic";
text.style.fontStyle = "italic";
text.style.fontFamily = "Courier";
text.style.fontWeight = "bold";
text.style.fontSize = "large";
svg.appendChild(text);
return text;
}
createLine(position1, position2) {
const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');
line.setAttribute('x1', position1.x);
line.setAttribute('y1', position1.y);
line.setAttribute('x2', position2.x);
line.setAttribute('y2', position2.y);
line.setAttribute('stroke', 'black');
svg.appendChild(line);
return line;
}
linkClickedWithPreviouslyClicked() {
const length = clickedCircles.length;
if(length < 2) { return; }
const circle1Pos = this.getCircleCenterPosition(clickedCircles[length - 1]);
const circle2Pos = this.getCircleCenterPosition(clickedCircles[length - 2]);
if(this.linkAlreadyExists(circle1Pos, circle2Pos)) { return; }
const htmlLine = this.createLine(circle1Pos, circle2Pos);
links.push(this.getLinkAsString(circle1Pos, circle2Pos));
}
getCircleCenterPosition(htmlCircle) {
return {
x: htmlCircle.cx.baseVal.value,
y: htmlCircle.cy.baseVal.value,
};
}
getLinkAsString(circle1Pos, circle2Pos) {
const pos1AsString = circle1Pos.x + "," + circle1Pos.y;
const pos2AsString = circle2Pos.x + "," + circle2Pos.y;
const linkAsString = pos1AsString + "-" + pos2AsString;
return linkAsString;
}
linkAlreadyExists(circle1Pos, circle2Pos) {
return links.includes(this.getLinkAsString(circle1Pos, circle2Pos));
}
}
async function network() {
for(let i = 0; i < messages.length; i++) {
const message = messages[i];
new Question(message);
//"await" works only inside async functions
const delayBetweenQuestionCreations = 50;
await sleep(delayBetweenQuestionCreations);
}
console.log(JSON.stringify(positions));
}
network();

BIN
08/ArtemisGryllaki/pdfs/Smythe.pdf
View File

Binary file not shown.

BIN
08/ArtemisGryllaki/pdfs/twitter-and-teargas.pdf
View File

Binary file not shown.

36
08/ArtemisGryllaki/questionnodes.html
Unescape Escape View File

@ -0,0 +1,36 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>Question Nodes</title>
<style>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
html, body {
width: 100%;
height: 100%;
}
div {
height: 20%;
text-align: center;
font-size: 36px;
padding: 20px;
}
svg {
display: block;
width: 100%;
height: 80%;
}
</style>
</head>
<body>
<svg id="canvas"></svg>
</body>
<script type="text/javascript" src="nodesscript.js">
</script>
</html>

27
08/ArtemisGryllaki/questions.html
Unescape Escape View File

@ -0,0 +1,27 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Questions on Networks</title>
<link rel="stylesheet" href="styleq.css">
<script src="questions.js"></script>
</head>
<header><br>
<h1>Questions on Networks</h1>
<p><span class="blink">Centralized - Decentralized </br> Federated</blink></a></p>
</header>
<main>
<br><br><br><br><br><br>
<div class="box"><h2 id="oneliner-1">QUESTIONS</h2></div>
<br>
<!--<p>Contributors: </p>-->
</main>
<footer>
</footer>
</body>
</html>

56
08/ArtemisGryllaki/questions.js
Unescape Escape View File

@ -0,0 +1,56 @@
(function () {
Messages = [
"HOW CAN DECENTRALIZED WEB HAVE AN IMPACT BEYOND GEEKS, SOCIAL WEB ENTHUSIASTS & HACKERS?",
"WHY DO WE NEED A DECENTRALIZED NETWORK?",
"HOW DO WE PERCEIVE FEDERATED PUBLISHING?",
"WHAT IS THE CONTENT WE WANT TO PRODUCE?",
"COLLECTIVITY VS INDIVIDUALITY: DOES DECENTRALIZATION HELPS?",
"WHO MAKES A FEDERATED NETWORK? FOR WHO? WHY? HOW?",
"WHAT CONTENT DOES A FEDERATED NETWORK HOST?",
"IS THE MEDIUM THE MESSAGE?",
"DOES THE MEDIUM TRANSFORM THE MESSAGE?",
"DOES THE SAME STORY HAVE DIFFERENT VALUE, ACCORDING TO WHERE IS IT HEARD?",
"HOW IMPORTANT IS TO CHOOSE, OR CREATE OUR MEDIA OF COMMUNICATION?",
"IS DECENTRALIZATION A PANACEA, OR A “PHARMAKON”?",
"IS DECENTRALIZATION ENOUGH?",
"WHAT ARE THE DANGERS OF CENTRALIZED NETWORKS?",
"WHOSE VOICE IS AMPLIFIED AND WHOSE VOICE IS CURBED IN A CENTRALIZED NETWORK?",
"DO WE NEED DIGITAL SOCIAL NETWORKING PLATFORMS?",
"DO WE NEED VIRTUAL PUBLIC SPHERES THAT ARE DIFFICULT TO SHUT DOWN?",
"IS THE FEDERATED NETWORK ORIENTED TOWARDS ANSWERING A COMMON GOAL?",
"HOW IS THE COMMON GOAL OF THE NETWORK SHAPED?",
"IS BEING PART OF THE NETWORK AS IMPORTANT AS BEING A CUSTODIAN OF IT?",
"WHO MAINTAINS A FEDERATED NETWORK?",
"WHAT IS THE LIFESPAN OF A FEDERATED NETWORK?",
"HOW CAN A FEDERATED NETWORK BE SUSTAINED WITH ECONOMIC, ECOLOGICAL AND TIME-EFFICIENT MEANS?"
];
function getRandomInt(min, max) {
min = Math.ceil(min);
max = Math.floor(max);
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function sleep(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function newMessage(id) {
while (true) {
ms = getRandomInt(1000, 3000);
Message = Messages[Math.floor(Math.random()*Messages.length)];
document.getElementById(id).innerHTML = Message;
await sleep(ms);
}
}
function questions(){
newMessage('oneliner-1');
}
window.onload = questions;
})();

154
08/ArtemisGryllaki/style.css
Unescape Escape View File

@ -0,0 +1,154 @@
@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: 100px;
}
/*.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-color: #ec380b;
}
.circle1 {
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
width: 13px;
height: 13px;
background-color: #007872;
}
.circle2 {
flex-grow: 0;
flex-shrink: 0;
border-radius: 50%;
width: 13px;
height: 13px;
background-color: grey;
}
.circle.link {
background-color: #ec380b;
}
.text {
padding-left: 10px;
}
.green {
font-size: 19px;
color: #007872;
font-weight: bold;
text-decoration: none;
}
.orange {
font-size: 19px;
color: #ec380b;
font-weight: bold;
text-decoration: none;
}
.grey {
font-size: 19px;
color: grey;
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);
}

97
08/ArtemisGryllaki/style5.css
Unescape Escape View File

@ -0,0 +1,97 @@
@font-face {
font-family: Share Tech Mono;
src: url("fonts/share-tech-mono.regular.ttf");
}
@font-face {
font-family: Fira Mono;
src: url("fonts/FiraMono-Medium.otf");
}
html {
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-attachment: fixed;
font-size: 16px;
@media (max-width: 1000px) {
font-size: calc(12px + .4vw);
}
}
body {
text-align: center;
max-width: 800px;
margin: 0 auto;
font-size: 1.5rem;
font-family: "Share Tech Mono";
color: black;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
height: 12rem;
}
h1 {
font-size: 100px;
text-align: center;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
text-transform: none;
line-height: 1.3em;
}
h2 {
font-size: 30px;
font-family: "Share Tech Mono";
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
text-transform: none;
line-height: 1.3em;
}
h3 {
font-weight: 400;
font-style: normal;
line-height: 1.7em;
letter-spacing: 0px;
font-size: 15px;
font-family: "Fira Mono";
}
header p, footer p {
font-size: 2rem;
}
header p.italic, footer p.italic {
font-style: italic;
}
main p {
line-height: 3rem;
}
.blink {
animation: blinker 0s step-end infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
a, a:active, a:visited {
color: #ffffff;
}

356
08/ArtemisGryllaki/styleSocial.css
Unescape Escape View File

@ -0,0 +1,356 @@
@font-face {
font-family: fluxisch-else;
src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
}
@font-face {
font-family: polsku;
src: url("polsku/polsku/fonts/Polsku.ttf");
}
h1 {
font-size: 50px;
text-align: left;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
text-transform: none;
line-height: 1.3em;
font-family: polsku;
src: url("polsku/polsku/fonts/Polsku.ttf");
margin-left: 30px;
}
h3 {
font-size: 14px;
text-align: left;
font-weight: 400;
font-style: normal;
letter-spacing: 0px;
text-transform: none;
line-height: 1.3em;
font-family: fluxisch-else;
src: url("osp/ospfont/fonts/FluxischElse-Light.otf");
margin-left: 30px;
}
#paragraph1 .circle-container {
flex-grow: 0;
flex-shrink: 0;
margin-:200px;
}
#paragraph1 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph1 .hidden {
visibility: visible;
margin-right:80px;
font-family: fluxisch-else-bold;
}
#paragraph1 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph2 .circle-container {
flex-grow: 0;
flex-shrink: 0;/*
margin-right:10%;*/
margin-top:95px;
}
#paragraph2 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph2 .hidden {
visibility: visible;
margin-right:30%;;
margin-top:80px;
font-family: "fluxisch-else";
}
#paragraph2 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph3 .circle-container {
flex-grow: 0;
flex-shrink: 0;/*
margin-right:40px;*/
margin-top:220px;
}
#paragraph3 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph3 .hidden {
visibility: visible;
margin-right:100px;
margin-top:210px;
font-family: fluxisch-else;;
}
#paragraph3 .frame {
visibility: visible;
margin-right:20%;
margin-top:40px;
}
#paragraph3 .print {
display: none;
margin-right:20%;
margin-top:40px;
}
#paragraph3 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph4 .circle-container {
flex-grow: 0;
flex-shrink: 0;
margin-right:40px;
margin-top:220px;
}
#paragraph4 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph4 .hidden {
visibility: visible;
margin-right:100px;
margin-top:200px;
font-family: fluxisch-else;
}
#paragraph4 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph5 .circle-container {
flex-grow: 0;
flex-shrink: 0;/*
margin-right:40px;*/
margin-top:220px;
}
#paragraph5 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph5 .hidden {
visibility: visible;
margin-right:100px;
margin-top:210px;
font-family: fluxisch-else;
}
#paragraph5 .frame {
visibility: visible;
margin-right:20%;
margin-top:40px;
}
#paragraph5 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph6 .circle-container {
flex-grow: 0;
flex-shrink: 0;/*
margin-right:20px;*/
margin-top:120px;
}
#paragraph6 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph6 .hidden {
visibility: visible;
margin-right:110px;
margin-top:110px;
font-family: fluxisch-else;
}
#paragraph6 .frame {
visibility: visible;
margin-right:20%;/*
margin-top:20px;*/
}
#paragraph6 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph7 .circle-container {
flex-grow: 0;
flex-shrink: 0;/*
margin-right:20px;*/
margin-top:150px;
}
#paragraph7 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph7 .hidden {
visibility: visible;
margin-right:10%;
margin-top:140px;
font-family: fluxisch-else;
}
#paragraph7 .frame {
visibility: visible;
margin-right:20%;/*
margin-top:20px;*/
}
#paragraph7 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph8 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}
#paragraph9 .circle-container {
flex-grow: 0;
flex-shrink: 0;/*
margin-right:20px;*/
margin-top:150px;
}
#paragraph9 .circle {
width: 15px;
height: 15px;
border-radius: 50%;
background-color: black;
display: inline-block;
}
#paragraph9 .hidden {
visibility: visible;
margin-right:10%;
margin-top:140px;
font-family: fluxisch-else;
}
#paragraph9 .frame {
visibility: visible;
margin-right:20%;
margin-top:20px;
}
#paragraph9 .paragraph {
text-align: left;
max-width: 500px;
margin: 0 auto;
font-size: 18px;
font-family: "fluxisch-else";
color: black;
margin-left: 60px;
margin-top: 10px;
}

77
08/ArtemisGryllaki/styleq.css
Unescape Escape View File

@ -0,0 +1,77 @@
@font-face {
font-family: "Crickx";
src: url("fonts2/fonts/Crickx.otf");
}
html {
padding-top: 100px;
background-color: white;
background-repeat: no-repeat;
background-position: center;
background-size: 100%;
background-attachment: fixed;
font-size: 16px;
text-align: center;
@media (max-width: 1000px) {
font-size: calc(12px + .4vw);
}
}
body {
text-align: center;
max-width: 800px;
margin: 0 auto;
font-size: 1.5rem;
font-family: "Crickx";
color: black;
}
.box {
display: flex;
flex: 1 1 auto;
flex-direction: column;
text-align: center;
align-items: center;
justify-content: center;
height: 12rem;
}
h1 {
font-size: 4rem;
letter-spacing: -0.2rem;
line-height: 4rem;
}
h2 {
font-size: 4rem;
font-family: "Crickx";
letter-spacing: -0.1rem;
}
header p, footer p {
font-size: 2rem;
}
header p.italic, footer p.italic {
font-style: italic;
}
main p {
line-height: 3rem;
}
.blink {
animation: blinker 0s step-end infinite;
}
@keyframes blinker {
50% {
opacity: 0;
}
}
a, a:active, a:visited {
color: #ffffff;
}
Write Preview
Loading…
Cancel
Save