You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

196 lines
6.6 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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 dont 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>