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.

178 lines
5.8 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;
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 peoples 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>