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.
157 lines
4.4 KiB
HTML
157 lines
4.4 KiB
HTML
5 years ago
|
<!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>
|