Upload files to '08/ArtemisGryllaki'
parent
32c0e25d87
commit
fa73c3dfdb
@ -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>
|
||||
@ -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>
|
||||
|
||||
|
||||
|
||||
@ -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>
|
||||
Loading…
Reference in New Issue