-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
204 lines (167 loc) · 15.3 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=0.10, user-scalable=yes"/>
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title>Cybersecurity Visuals Media Handbook</title>
<meta charset="utf-8">
<style type="text/css">
* {
padding: 0;
margin: 0;
}
html, body {
height: 100%;
}
body {
margin: 0;
padding: 0;
background: #fff;
color: #222;
font: caption;
overflow: scroll;
}
.popupbox {
font-size: 12px;
}
.popupbox p {
margin: 10px;
}
.highlight {
color:#f47c4e;
font-weight: bold;
}
.titleblock {
margin: 10px 10px;
color:#f1686d;
width: 90%;
}
.titlecontent {
margin-top: 10px;
color: #000;
width: 85%;
}
.extracontent {
margin: 10px 10px;
width: 75%;
}
p {
padding-bottom: 12px;
}
a {
color: #f1686d;
text-decoration: none;
}
</style>
<!--
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css">
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5/dist/backdrop.css" />
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5.1.0/themes/light-border.css" />
<link rel="stylesheet" href="https://unpkg.com/tippy.js@5.1.0/animations/shift-away-extreme.css" /> -->
<link rel="stylesheet" href="css/animate.min.css">
<link rel="stylesheet" href="css/backdrop.css" />
<link rel="stylesheet" href="css/light-border.css" />
<link rel="stylesheet" href="css/shift-away-extreme.css" />
</head>
<body class="dragscroll">
<div class="titleblock">
<h1>Cybersecurity Visuals Media Handbook</h1>
<div class="titlecontent">
<p>While we all might be aware of cybersecurity, there is considerable confusion as to what it actually is, and who it serves to protect. Much of the media conversation around cybersecurity is couched in the language of protecting state interests against “bad players” in the digital ecosystem, such as hackers. The standard media depiction of hackers are as shady individuals lurking in a maze of binary, leveraging their expertise to target the innocent and the vulnerable.</p>
<p>The messaging of the state is that it can protect you only if you expose all your data to its paternalistic patronage, positioning itself as a safe haven and trusted repository with the citizen’s interests at heart. Ideally, however, cybersecurity should be inextricable from individual privacy, and be exercised as a human right. This sets up an opposition between privacy and (state) security, the latter a state mandated diktat which undermines rather than enforces individual privacy.</p>
<p>The ideal way to understand the relationship between the two is that privacy can lead to better security. In our illustrations, we have tried to decode and respond to the assumptions that underpin commissioning of illustrations of cybersecurity for the mainstream media. The way cybersecurity is traditionally illustrated, through tropes of closed locks, glowing green “leetspeak” emblazoned on dark backgrounds against which hooded anonymous figures on keyboards ostensibly plot the downfall of democracy, reiterates the state narrative that all cybersecurity practices are dangerous to the citizen, thus creating a blanket paranoia of these exercises, many of which actually work towards safeguarding citizen privacy rather than destroy</p>
<p>There is a lack of attention often paid to editorial illustrations and representations in Indian media houses, a shortcoming which has been further exacerbated by the easy availability of stock images. These are often inserted into articles without much forethought or attention paid to the content of the article that they accompany. Some of this indifference is a consequence of a lack of insight into the nuances of cybersecurity, thus flattening the visual narrative by resorting to easy tropes which circulate readily in an online economy funded by image search banks.</p>
<p>These illustrations were originally conceived as challenging these tropes by moving away from them completely; however, it was through the reframing of existing tropes it became possible to deconstruct the assumptions that underpin much of these visuals.</p>
<p>The complexity of everyday technology use, social media, platform governance, consent and privacy, is a part of some of the narrative and can be seen, in this case, to manifest, by using old tropes - such as icons of keys, locks, doors, silhouetted characters in hoodies, footprints, screens, mines, lines of code-leaking, magnifying glasses, finger prints, eyes, cameras, hooks, fishes and the odd badge with chains - taking them out of context, subverting them and sometimes the amplification of older meanings at newer scales. There is an effort to show the intended manifestations of technology in the form of physical gestures, ephemeral experiences, imagined and realized services and the very real physical infrastructures alongside the very actual humans and their data. The research underpinning these illustrations have also been about play, how devising a playframe to say or show things that might otherwise be difficult to transition through text, or to see both in detail and as a whole or might seem ludicrous. Some of these manifest when the unintended networking of many of these services allows for incredibly unregulated flow and access of data and more so the metadata trails from these intended technologies.</p>
<p>What follows from the first panel up till the last, is a depiction of interactions, that may be understood as behaviors around and through digital technologies,that allow for networked computer mediation, at various scales.</p>
</div>
</div>
<div id="scene" style="cursor: move; overflow: visible;position: relative; clear: both;">
<img src="img/cis_panels_all_low_res.png" />
<div id="popA" class="animated infinite pulse fast delay-2s" style="position: absolute; top:700px; left:480px; background-image: url('img/hand.png'); width:90px; height:45px;"></div>
<div id="popB" class="animated infinite pulse fast delay-2s" style="position: absolute; top:120px; left:770px; background-image: url('img/hand.png'); width:90px; height:45px;"></div>
<div id="popC" class="animated infinite pulse fast delay-2s" style="position: absolute; top:190px; left:1950px; background-image: url('img/hand.png'); width:90px; height:45px;"></div>
<div id="popD" class="animated infinite pulse fast delay-2s" style="position: absolute; top:290px; left:2620px; background-image: url('img/hand.png'); width:90px; height:45px;"></div>
</div>
<div class="extracontent">
<p>
The Handbook concept, content and design by Padmini Ray Murray and Paulanthony George from Design Beku. With constant inputs from the CIS team Saumyaa Naidu, Shweta Mohandas and Arindrajit Basu. We would also like to thank Karan Saini for his invaluable inputs that helped us commission this publication.</p>
<p>We thank the Hewlett Foundation for funding this research.</p>
<p>Published by The Centre for Internet and Society, India | <a href="http://cis-india.org" target="_blank">cis-india.org</a>.</p>
</div>
</body>
<!--
<script src="node_modules/jquery/dist/jquery.min.js"></script>
<script src="node_modules/popper.js/dist/umd/popper.min.js"></script>
<script src="node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/popper.js@1"></script>
<script src="https://unpkg.com/tippy.js@5"></script> -->
<script src="js/jquery.min.js"></script>
<script src="js/popper.min.js"></script>
<script src="js/tippy-bundle.iife.min.js"></script>
<script src="js/dragscroll.js"></script>
<script type="text/javascript">
function doTippy() {
tippy('#popA', {
content: '<div class="popupbox"><p>This is a depiction of individual to individual interactions, where our devices allow for mediated experiences, from a range of pure entertainment to financial transactions and everything in between. Some of the sketches are observations of people largely in common access networked spaces like cafes, which become second spaces for conversations and sometimes for filing taxes. Contrary to popular depictions of the man in the hoodie trying to take advantage of vulnerable linked devices, there were several simpler opportunities of violating somebody’s notion of private access to their data in public spaces and personal details like name (that is generally made audible in places like Starbucks), system id (that is accessible if a device is left unattended), or details over heard during a personal conversation in a public space, become data that maybe accessed by people either directly looking for it, or found through indexed or hash-tagged images on networked and multi-sited platform behaviors.</p></div>',
placement: 'top',
animation: 'shift-away-extreme',
theme: 'light-border',
sticky: false,
maxWidth: 350,
interactive: true,
trigger: "mouseenter click",
touch: 'hold'
});
tippy('#popB', {
content: '<div class="popupbox"><p>The second panel is the first instance of trying to look at complexity from the perspective of larger institutions, that use and create data and services around itself and for individuals. On the top side, there are ethical hackers previously labeled (by projecting a caricatured notion of the Wild West) as White Hat hackers, who typically look at possible loopholes or aberrations in privacy, access protocols that might render a service vulnerable for either institutions or individuals, or both. Ethical hacking for instance may involve bug bounty hunting, that may result preventing future breaches in large volumes of user and institutional data. These activities may also result in identifying malicious intent also in the part of institutions as preying upon its users by manipulating their behavior.</p></div>',
placement: 'top',
animation: 'shift-away-extreme',
theme: 'light-border',
sticky: false,
maxWidth: 350,
interactive: true,
trigger: "mouseenter click",
touch: 'hold'
});
tippy('#popC', {
content: '<div class="popupbox"><p>The third panel was an exploration of how notions of user generated content (UGC) and behaviors because of it could be leveraged by larger institutions i.e. the interaction of institutions with, for or against individuals. Some of the explorations as a result, are around click-farms and behaviors of collusion. There is a small satirical attempt here to contextualize the notion of Hobbes’s Leviathan with a slightly more familiar (Indian) context of Dineshan<sup>1</sup> .This diegetic, also looks at the emergence of Dineshanal behaviors that lead to state sponsored surveillance, internet shutdowns and military coups, that is framed in ways that show the state and its citizens as an invasive agent, in some online spaces, or as justified in its actions in dominant news narratives.</p><p><sub>1 <span class="highlight">Dineshan</span> is a play on the phrase: <span class="highlight">“The nation wants to know.”</span> A catchphrase popularized by news anchor Arnab Goswami, where he shifts the intent (from himself) to know about possible ulterior motives of politicians, activists and anybody else, who sits across him behind the news desk. He instead chooses to be the representative of the entire nation. The play on the phrase, is coming from an overheard joke, where a Malayali overhears the news one day, and hears Arnab. He is curious to know who this Dineshan is and why he wants to know so much about everybody and everything.</sub></p></div>',
placement: 'top',
animation: 'shift-away-extreme',
theme: 'light-border',
sticky: false,
maxWidth: 350,
interactive: true,
trigger: "mouseenter click",
touch: 'hold'
});
tippy('#popD', {
content: '<div class="popupbox"><p>The fourth panel started out as a composition that shows interactions between and across different institutions and nation states. It carries forward the concept of a corpus of consent, manufactured or elected, through computer mediated spaces. Using the framework of Dineshan, this panel maybe considered as an interaction of many dineshans among themselves, against other dineshans and the impact it may have on concepts of privacy, security and governance in a networked age. Once the composition was created, it also became a point of reflection of local or personal behaviors on mediated platforms. As depicted in one of the meme pages about existential dread that emanates from interacting with others on computer mediated platforms, the instagram user @sadgurlmemez<sup>2</sup>, describes attributes of being dineshanal at a more local and personal level, where one aspect of it is curatorial in nature, where one performs many different aspects of themselves, in public computer mediated spaces, thereby creating the data trail that has been seen from panel one.</p> <p><sub>2 "when you realize that your compulsion to air out all your dirty laundry on social media derives directly from our modern day reverse-panoptical society where we\'re no longer afraid that somebody\'s watching us but more afraid that nobody\'s watching or listening to us thus trapping ourselves in this online prison of self driven surveillance by divulging as much as possible about our lives and thoughts on a predatory digital data aggregating interface." -and now nothing\'s under control.</sub></p></div>',
placement: 'top',
animation: 'shift-away-extreme',
theme: 'light-border',
sticky: false,
maxWidth: 350,
interactive: true,
trigger: "mouseenter click",
touch: 'hold'
});
}
$(document).ready(function() {
/* var $panzoom = $("#scene").panzoom({
disableZoom: true
});
$("#scene").on('mousewheel.focal', function( e ) {
e.preventDefault();
var delta = e.delta || e.originalEvent.wheelDelta;
var zoomOut = delta ? delta < 0 : e.originalEvent.deltaY > 0;
$("#scene").panzoom('zoom', zoomOut, {
increment: 0.1,
focal: e
});
});*/
doTippy();
});
</script>
</html>