-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
221 lines (204 loc) · 16 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
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible"
content="IE=edge">
<meta name="viewport"
content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.min.css">
<link rel="stylesheet" type="text/css" href="style.css" />
<!-- Primary Meta Tags -->
<title>Algorithmic you - Die Poesie der Daten, Darmstadt 12th April — 23rd June</title>
<meta name="title" content="Algorithmic you - Die Poesie der Daten, Darmstadt 12th April — 24th June" />
<meta name="description" content="Algorithmic you explores the relationship with digital platforms and the algorithms that govern them, and how it is possible to recover and reinterpret the digital traces that everyone leaves on the Internet. Representations of these traces becomes a reflection on one's digital life, as an act of reclaiming the data that various devices record, capture, and exploit." />
<!-- Open Graph / Facebook -->
<meta property="og:type" content="website" />
<meta property="og:url" content="https://algorithmicyou.densitydesign.org/" />
<meta property="og:title" content="Algorithmic you - Die Poesie der Daten, Darmstadt 12th April — 24th June" />
<meta property="og:description" content="Algorithmic you explores the relationship with digital platforms and the algorithms that govern them, and how it is possible to recover and reinterpret the digital traces that everyone leaves on the Internet. Representations of these traces becomes a reflection on one's digital life, as an act of reclaiming the data that various devices record, capture, and exploit." />
<meta property="og:image" content="https://algorithmicyou.densitydesign.org/og-image.png" />
<!-- Twitter -->
<meta property="twitter:card" content="summary_large_image" />
<meta property="twitter:url" content="https://algorithmicyou.densitydesign.org/" />
<meta property="twitter:title" content="Algorithmic you - Die Poesie der Daten, Darmstadt 12th April — 24th June" />
<meta property="twitter:description" content="Algorithmic you explores the relationship with digital platforms and the algorithms that govern them, and how it is possible to recover and reinterpret the digital traces that everyone leaves on the Internet. Representations of these traces becomes a reflection on one's digital life, as an act of reclaiming the data that various devices record, capture, and exploit." />
<meta property="twitter:image" content="https://algorithmicyou.densitydesign.org/og-image.png" />
<link rel="apple-touch-icon" sizes="57x57" href="assets/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60" href="assets/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72" href="assets/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76" href="assets/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114" href="assets/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120" href="assets/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144" href="assets/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152" href="assets/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180" href="assets/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192" href="assets/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32" href="assets/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96" href="assets/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16" href="assets/favicon/favicon-16x16.png">
<link rel="manifest" href="assets/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage" content="assets/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
</head>
<body>
<nav class="navbar sticky-top navbar-expand-lg navbar-dark algo-nav">
<div class="container-fluid">
<a class="navbar-brand" href="#">Algorithmic You</a>
<!-- Updated for Bootstrap 5: data-bs-toggle and data-bs-target for the collapse component -->
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav me-auto mb-2 mb-lg-0">
<a class="nav-item nav-link" href="#exhibition-gallery">Exhibition</a>
<!-- <a class="nav-item nav-link" href="#opening-speech">Opening speech</a> -->
<a class="nav-item nav-link" href="#featured-works">Featured works</a>
</div>
<span class="navbar-text">
Darmstadt, 12th April — 23rd June 2024
</span>
</div>
</div>
</nav>
<div class="jumbotron jumbotron-fluid jumbotron-custom px-4">
<div class="row">
<div class="col-12"><img class="logo" src="assets/LOGO_BIANCO1.svg" alt="Algorithmic You"></div>
<div class="col-md-3"><h4>The exhibition</h4>
<p>
"Algorithmic you" takes as its starting point the relationship with digital platforms and the algorithms that govern them, and shows how it is possible to recover and reinterpret the digital traces that everyone leaves on the Internet. Representations of these traces becomes a reflection on one's "digital life," as an act of reclaiming the data that various devices record, capture, and exploit.
</p>
</div>
<div class="col-md-3">
<h4>Infopoetry</h4>
<p>
How do we reconcile the description of a phenomenon with the experience we have about it? A “poetic” approach to data could help: there are moments in the data-journey when “feeling” the phenomenon behind the data could be as relevant as accurately “seeing” the data that represent it.
</p>
</div>
<div class="col-md-4 offset-md-2"><p class="details">Die Poesie der Daten <a href="https://kultur-digitalstadt.de/programm/algorithmicyou/" target="_blank"><i class="bi bi-box-arrow-up-right"></i></a></p>
<p class="details">Universitäts- und Landesbibliothek Darmstadt <br> 12th April — 23rd June 2024</p>
<a href="http://densitydesign.org/" target="_blank"><p class="home-link">DensityDesign Lab</p></a>
<a href="https://infopoetry.densitydesign.org/" target="_blank"><p class="home-link">Infopoetry archive</p></a>
<a href="assets/AlgorithmicYou-DARMSTADT-OPUSCOLO-INTERNO-web.pdf" target="_blank"><p class="home-link"><i class="bi bi-cloud-download"></i> What is infopoetry? (PDF)</p></a>
</div>
</div>
</div>
<div class="jumbotron-fluid">
<h4 id="exhibition-gallery" class="text-center">The space</h4>
<div class="scroll-gallery">
<img src="assets/exhibition/24_04_12_ked_2683.jpg" />
<img src="assets/exhibition/24_04_12_ked_2673.jpg" />
<img src="assets/exhibition/24_04_12_ked_2704.jpg" />
<img src="assets/exhibition/24_04_12_ked_2586.jpg" />
<img src="assets/exhibition/24_04_12_ked_2630.jpg" />
<img src="assets/exhibition/24_04_12_ked_2604.jpg" />
<img src="assets/exhibition/24_04_12_ked_2612.jpg" />
<img src="assets/exhibition/24_04_12_ked_2621.jpg" />
<img src="assets/exhibition/24_04_12_ked_2625.jpg" />
<img src="assets/exhibition/24_04_12_ked_2639.jpg" />
<img src="assets/exhibition/24_04_12_ked_2643.jpg" />
<img src="assets/exhibition/24_04_12_ked_2649.jpg" />
<img src="assets/exhibition/24_04_12_ked_2651.jpg" />
<img src="assets/exhibition/24_04_12_ked_2659.jpg" />
<img src="assets/exhibition/24_04_12_ked_2663.jpg" />
<img src="assets/exhibition/24_04_12_ked_2671.jpg" />
<img src="assets/exhibition/24_04_12_ked_2689.jpg" />
<img src="assets/exhibition/24_04_12_ked_2616.jpg" />
<img src="assets/exhibition/24_04_12_ked_2692.jpg" />
<img src="assets/exhibition/24_04_12_ked_2707.jpg" />
<img src="assets/exhibition/24_04_12_ked_2709.jpg" />
<img src="assets/exhibition/24_04_12_ked_2722.jpg" />
<img src="assets/exhibition/24_04_12_ked_2724.jpg" />
<img src="assets/exhibition/24_04_12_ked_2738.jpg" />
<img src="assets/exhibition/24_04_12_ked_2743.jpg" />
<img src="assets/exhibition/24_04_12_ked_2795.jpg" />
<img src="assets/exhibition/24_04_12_ked_2834.jpg" />
<img src="assets/exhibition/24_04_12_ked_2842.jpg" />
</div>
<div class="container-fluid px-4">
<p>Photos by Albrecht Haag.</p>
</div>
</div>
<div id="opening-speech" class="container px-4 my-5">
<div class="row">
<div class="col-12 speech">
<h2 class="text-center mb-5">Speech by Salvatore Zingale. 12 aprile 2024, Darmstadt</h2>
<h1 class="mb-3">The re-appropriation of data. A critique of the digital society</h1>
<p>
<em>Between communication design and art</em> Bruno Munari, one of our most important designers and artists, said: 'The greatest obstacle to understanding a work of art is to want to understand it'. The exhibition we are presenting lies on the borderline between communication design and art. Communication design has the task of making something understandable. But not art. My task now is to make people understand the motivations behind the idea of infopoetry. The easiest way to put it is that it is a teaching and research activity. In fact, the infopoetry was conceived as part of the course on data visualisation. And I should also make it clear why the works exhibited here refer to algorithms; and why it is an operation that we have called 'data re-appropriation'.
</p>
<p>
<em>Infopoetry</em>
It's a neologism: from info-graphic to info-poetry.
Why?
Because in this case it is no longer a matter of representing data in visual form, but of transforming it into a poetic or artistic form. What is of interest in infopoetry is the transition - more precisely, the translation - from a set of data (from the dataset) to a communicative artefact (to infopoetry) through the mediation of a strong image, such as a metaphor. For this purpose, students can use the medium they consider most appropriate: posters, videos, objects, books, installations, websites. Even painting and sculpture. Even carpets and clothes. Of course, there are certain methodological steps we require of the students. These include, for example, the choice of metaphor, the translation process, the identification of the relevant elements within the dataset that they feel should be communicated. And, above all, the explication of one's own point of view: in infopoetry, the subjectivity of the authors must be clearly visible. We always say: infographics make us see the data, infopoetry makes us feel the data. The purpose of infopoetry is therefore twofold.<br>
1) On the one hand, infopoetry requires students to start from their own interpretations of the data: from their own communicative intentions and subjectivity.<br>
2) On the other hand, infopoetry has the task of touching the readers' sensitivity and thus bringing them closer to what the data represent.<br>
In the eleven years that we have been experimenting with infopoetry, the results have always been surprising. It is as if the students, most of whom have a technical background, seize in infopoetry the opportunity to finally express themselves freely and creatively. Proving that art is always a liberation.
</p>
<p>
<em>Algorithmic You</em> For the past two years, we have provided students with a specific theme: we asked them to select a set of data from their experiences on the Internet or from digital devices, from smartphones to other media or sensors. For example, some students took them from medical devices.
This led to a new aspect of infopoetry: an act of re-appropriation of the data that each of us leaves behind in the digital sphere.
In the digital age, data is an issue that needs to be thought through.
Data are traces that we leave behind us, often without realising it. Like physical traces, they are part of our experience, our lived experience. They are the signs of what we do. They are the signs of our words, our thoughts, our desires, our social relationships.
They are traces that we overlook, but which are picked up by others; traces that others use to their own advantage.
The students interpreted this proposal in different ways. Each one chose an aspect of their digital life. Aspects that have to do with their own weaknesses or pathologies (physical or mental) or with their own intimacy.
In their work, there is also a lot of self-criticism, playfulness, irony - but also reflection - on the abuse of social networks and the 'parallel life' that takes place in the digital world.
</p>
<p>
In this sense, Algorithmic You is also an act of criticism of the power of algorithms: yes, an act of re-appropriation. It is an exercise in poetic transformation: what was just a number becomes poetry. What is taken away from us for commercial purposes or social control becomes a critical practice. It becomes the material for a poetic and liberating exercise.
</p>
</div>
</div>
</div>
<div class="container-fluid px-4 my-5">
<h4 id="featured-works" class="text-center">Featured works</h4>
<div id="gallery" class="jumbotron jumbotron-fluid jumbotron-gallery px-4" style="height: auto">
</div>
</div>
<footer class="container-fluid px-4">
<div class="row logo-parade">
<div class="col-md-2 col-xs-12"><p><em>Curated by</em></p><ul>
<li>
Arianna Bellantuono
</li>
<li>
Andrea Benedetti
</li>
<li>
Ángeles Briones
</li>
<li>
Salvatore Zingale
</li>
</ul></div>
<div class="col-md-6 col-xs-6"><p><em>Partners</em></p><a href="https://densitydesign.org/" target="_blank"><img src="assets/Logo-DENSITY.svg" alt="Algorithmic You"></a> <a href="https://www.design.polimi.it/en/" target="_blank"><img src="assets/Logo-POLIMI-scuola design.svg" alt="Algorithmic You"></a> <a href="https://www.designdellacomunicazione.polimi.it/en/" target="_blank"><img src="assets/ddc.svg" alt="Algorithmic You"></a> <a href="https://kultur-digitalstadt.de/" target="_blank"><img src="assets/logo_ked.png" alt="Algorithmic You"></a> <img src="assets/bibliothek.png" alt="Algorithmic You"></div>
<div class="col-md-4 col-xs-6"><p><em>Con il patrocinio del Consolato Generale d'Italia a Francoforte sul Meno</em></p>
<img src="assets/MAECI-consolato-generale-italia-V-IT-56.png" alt="Algorithmic You"> <img src="assets/LOGO RGB GNMI orizzontale.svg" alt="Algorithmic You"></div>
</div>
</footer>
<!-- Updated D3.js to version 7 -->
<script src="https://d3js.org/d3.v7.min.js"></script>
<!-- jQuery and Popper.js are not required for Bootstrap 5 -->
<script src="https://stackpath.bootstrapcdn.com/bootstrap/5.0.0-alpha1/js/bootstrap.bundle.min.js"></script>
<script>
// Funzione per caricare i dati e generare le cards aggiornata per D3.js v7
function loadCards() {
const spreadsheetUrl = 'assets/data.csv';
d3.csv(spreadsheetUrl).then(function(data) {
// console.log(data);
const container = d3.select('#gallery');
const item = container.selectAll('div')
.data(data)
.enter().append('div');
item.append("img").attr("src", d => d.img).classed("cover", true);
item.append("p").text(d => d.name);
item.append("p").append("a").attr("href", d => d.link).attr("target", "_blank").text(d => d.title).style("font-weight", 700);
});
}
loadCards();
</script>
</body>
</html>