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.

167 lines
6.1 KiB
HTML

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