-
Notifications
You must be signed in to change notification settings - Fork 0
/
project.html
406 lines (307 loc) · 17.4 KB
/
project.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
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Found in Fast Fashion Factories</title>
<link rel = "icon" href ="assets/img/logo.svg" type = "image/x-icon">
<!-- BOOTSTRAP -->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<!-- GLOBAL STYLESHEET-->
<link rel='stylesheet' type='text/css' href='./style/global.css'>
<!-- Desktop stylesheet -->
<link rel='stylesheet' type='text/css' href='./style/project.css' media="screen and (min-width:992px)">
<!-- Mobile stylesheet -->
<link rel='stylesheet' type='text/css' href='./style/mobile.css' media="screen and (max-width:991px)">
</head>
<body></body>
<!-- HEADER -->
<div id="header">
<div id="header-row-1" class="d-flex justify-content-between m-text standard-margin">
<a href="index.html" style="transform: none"><img src="assets/img/logo.svg" id="header-logo"></a>
<a href="map.html">MAP</a>
<a href="atlas.html">ATLAS</a>
<a href="project.html" style="color: blue">PROJECT</a>
</div>
<div id="header-row-2" class="d-flex justify-content-around m-text standard-margin">
<a id="what-bm" href="#what" class="bm bm-active">what</a>
<a id="why-bm" href="#why" class="bm">why</a>
<a id="how-bm" href="#how" class="bm">how</a>
<a id="who-bm" href="#who" class="bm">who</a>
</div>
</div>
<main id="scrollsnap">
<!-- SEC 1 WHAT -->
<div class="full-width scrolledsnap standard-margin top-higher-margin" id = "what">
<div class="d-flex align-items-start justify-content-between">
<span class="m-text align-self-start" style="color: blue; transform:translate(0,-0.1vw); line-height:2.5vw">01<br>WHAT </span><span class="xl-text">Found in Fast Fashion Factories</span>
</div>
<div class="xl-text">collects 6683 photos posted on Google Maps with the addresses of 1000 garment factories around the world.<br>All the addresses were found in<br>the list of level 1 (tier 1) suppliers that<br>have produced for MANGO in 2021.</div>
</div>
<!-- SEC 2 WHY -->
<div class="full-width d-flex gy-0 scrolledsnap" id="why">
<div class="col-6 standard-margin top-higher-margin" style="position: relative">
<div class="xl-text">
Invisible <span style="color: var(--grey)">values</span>
Invisible <span style="color: var(--grey)">labour</span>
</div>
<div class="m-text" style="color: blue; margin-top: 5vh">02</div>
<div class="m-text col-9" style="position: absolute; bottom: var(--margin)">Fashion is one of the most labour-dependent industries, but many companies have decided
to bypass production completely, by switching
their homeland production with contracted-out manufacturing, especially in low-income countries. In this way, their workforce is not under their responsibility anymore,
as it is the end of a very long supply chain.
This is part of a general tendency
of corporations to “dematerialise” themselves: since the 1990s, many started to shift their focus and investments from production to branding, from objects to ideas. </div>
</div>
<div class="col-6 standard-margin top-higher-margin" style="background-color: #ededed; position: relative">
<div class="xl-text"><div>Regaining<br><img style="height: var(--xl-text); padding: 0 0 0.3vw 0.4vw" src="assets/img/physicality2.svg"></div>
<div class="m-text" style="color: blue; margin-top: 5vh">WHY</div>
<div class="m-text col-9" style="position: absolute; bottom: var(--margin)">
As brands distanced themselves from the material processes, so have clients. They know the real
value they are paying for is not a tangible product anymore, but the concept it represents.
All of the processes ended up being submerged, making it very hard to imagine that those clothes
were once made by someone, somewhere far away.
By republishing the data uploaded in the factories areas, FFFF makes everyday objects, people
and spaces that are universally familiar accessible
for people to consult. The goal is to get closer to the reality of these places and restore the discarded physicality of the fashion garments industry.
</div>
</div>
</div>
</div>
<!-- SEC. 3 HOW - RESEARCH PROCESS -->
<div id="how" class="full-width gy-0 scrolledsnap top-header-margin standard-margin" style="padding-bottom: 0; background-color: var(--grey)" id="how">
<div class="d-flex align-items-start col-12 top-higher-margin" style="position: absolute; top: 0">
<span class="m-text align-self-start col-1" style="color: blue; transform:translate(0,-0.3vw); line-height:2.5vw">03<br>HOW </span><span class="xl-text">Research</span>
</div>
<!-- ROW 1 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
<div>We downloaded a list of factories from
<br>the Social Responsability section on <a href="https://shop.mango.com/iframe.faces?state=she_005_IT&ts=1671410509722" target="_blank">shop.mango.com↗</a>*.
<br>These factories are not owned by MANGO
<br>and supply multiple other fashion companies.
</div>
<br>
<div class="s-text">*(latest update: December 2021)
<br><a href="https://staticpages.mngbcn.com/edits/SS21/CATSHE042021SUSTAINABILITY/assets/pdfs/Fabricas-1221-ES__name=FabricasEs.pdf?rand=98839805" target="_blank">Transparency Pledge.pdf↗</a>
<br><a href="https://docs.google.com/spreadsheets/d/1LYpATOga9flTJ6-WoWsk1diFYjBmbb3Rsqt5jFguvZk/edit#gid=1216463062" target="_blank">Fabricas-0222-EN_name=Fabricas.xls↗</a></div>
</div>
<div class="col-6 text-right"><img src="assets/img/project/research1.png"></div>
</div>
<!-- ROW 2 -->
<div class="row align-items-end gy-0">
<div class="col-6 d-inline-flex flex-column justify-content-between m-text text-left">
<div>We searched all the addresses on Google
<br>Maps and the URLs of those whose position
<br>had been registered.
</div>
<br>
<div class="s-text"><a href="https://docs.google.com/spreadsheets/d/1LYpATOga9flTJ6-WoWsk1diFYjBmbb3Rsqt5jFguvZk/edit#gid=1609854020" target="_blank">mangosupplierslist.csv↗</a></div>
</div>
<div class="col-6 text-right" style="padding: 0 1.9vw 0 1.9vw"><img style="box-shadow: 0px 1vw 1.5vw 0px rgba(0, 0, 0, 0.5);border-radius: 0.3vw;" src="assets/img/project/research2.gif"></div>
</div>
<!-- ROW 3 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">We discovered that more than 400 factories
<br>couldn’t be found on Maps, including 262 Chinese
<br> factories, as it can be seen in the <a href="map.html">MAP↗</a>.
<br>
<br>We scraped all the reviews that were uploaded
<br>at the available locations through <a href="https://console.apify.com/actors/nwua9Gu5YrADL7ZD" target="_blank">Google Maps<br>Reviews Apify↗</a>.</div>
<div class="col-6 text-right"><img src="assets/img/project/research3.png"></div>
</div>
<!-- ROW 4 -->
<div class="row align-items-end gy-0">
<div class="col-6 d-inline-flex flex-column justify-content-between m-text text-left">
<div>The new data about the images were merged
<br>together with the data about the factories<br>and their geolocations.</div>
<br>
<div class="s-text"><a href="https://docs.google.com/spreadsheets/d/1LYpATOga9flTJ6-WoWsk1diFYjBmbb3Rsqt5jFguvZk/edit#gid=2103422061" target="_blank">imagesurls.csv↗</a></div>
</div>
<div class="col-6 text-right"><img src="assets/img/project/research4.png"></div>
</div>
<!-- ROW 5 -->
<div class="row align-items-end gy-0">
<div class="col-6 d-inline-flex flex-column justify-content-between m-text text-left">
<div>All the images were downloaded by uploading<br>
the dataset on Google Chrome <a href="https://chrome.google.com/webstore/detail/downthemall/nljkibfhlpcnanjgbnlnbjecgicbjkge?hl=en" target="_blank">DownloadThemAll!↗</a>
<br>extension. This folder was then cleared from
<br>the images that did not fit into the research topic.</div>
<br>
<div class="s-text"><a href="https://drive.google.com/drive/folders/1G9A9pcTMxMfvddTfNG-Uwpmn4zuQBAm1?usp=sharing" target="_blank">ImagesFolder.drive↗</a></div>
</div>
<div class="col-6 text-right"><img src="assets/img/project/research5.png"></div>
</div>
</div>
<!-- SEC. 4 HOW - DESIGN PROCESS -->
<div id="how" class="full-width gy-0 scrolledsnap top-header-margin standard-margin" style="padding-bottom: 0; background-color: var(--grey)">
<!-- research process -->
<div class="d-flex align-items-start col-12 top-higher-margin" style="position: absolute; top: 0">
<span class="m-text align-self-start col-1" style="color: blue; transform:translate(0,-0.3vw); line-height:2.5vw">03<br>HOW </span><span class="xl-text">Design</span>
</div>
<!-- ROW 1 -->
<div class="row align-items-end gy-0">
<div class="col-6 d-inline-flex flex-column justify-content-between m-text text-left">
<div>After we got the final 6683 pictures together,
<br>they were clustered by selecting 16 filters that
<br>we believed could tell more about the photos
<br>and highlight patterns in them.</div>
<br>
<div class="s-text"><a href="https://docs.google.com/spreadsheets/d/1LYpATOga9flTJ6-WoWsk1diFYjBmbb3Rsqt5jFguvZk/edit#gid=1808509628" target="_blank">imagestags.csv↗</a></div>
</div>
<div class="col-6 text-right"><img src="assets/img/project/design1.png"></div>
</div>
<!-- ROW 2 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
Since such a big dataset of images is tricky
<br>to manage on a web based platform, we decided
<br> to start from <a href="https://dhlab.yale.edu/projects/pixplot/" target="_blank">PixPlot↗</a>
as a convenient infrastructure
<br>to build our <a href="atlas.html" target="_blank">ATLAS↗</a>.
<br>
<br>PixPlot uses a convolutional neural network
<br>to place images near one another in a web browser,
<br>according to visual similarity or geographical data.
<br>It allows users to browse many pictures smoothly
<br>and move through space with zoom-and-pan
<br>interactions that recall Maps.
</div>
<div class="col-6 text-right"><img src="assets/img/project/design2.png"></div>
</div>
<!-- ROW 3 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
Before loading them into Pixplot, the data had
<br>to be spatialised according to the selected clusters.
<br>Hence, the dataset was converted into a bipartite
<br>network through <a href="http://medialab.github.io/table2net/" target="_blank">table2net↗</a> and was then
<br>spatialized in <a href="https://gephi.org/" target="_blank">Gephi↗</a> using the algorithms <span style="font-style:italic">Force
<br>Atlas 2.0</span>, <span style="font-style:italic">Expansion</span> and <span style="font-style:italic">Prevent Overlaps</span>.
</div>
<div class="col-6 text-right"><img src="assets/img/project/design3.png"></div>
</div>
<!-- ROW 4 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
The x,y coordinates of the network’s nodes then
<br>had to be converted into terrestrial coordinates because
<br>the only way to obtain a custom visualisation in PixPlot
<br>was through its <span style="font-style:italic">Geographical Layout</span> option.
<br>These terrestrial coordinates do not actually reflect
<br>the geographical origin of our data points, they
<br>are only used to reproduce Gephi’s spatialisation.
<br>
<br>The conversion was done through an <a href="https://tool-online.com/en/coordinate-converter.php" target="_blank">online
<br> coordinates converter tool↗</a> and the result was
<br>combined with the previous dataset.
</div>
<div class="col-6 text-right"><img style="mix-blend-mode: multiply" src="assets/img/project/design4.png"></div>
</div>
<!-- ROW 5 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
Finally, the dataset and the images folder could be
<br>uploaded in PixPlot. The custom visualisation
<br>highlights clusters and their mutual relations and was
<br>set as default. We decided to keep Pixplot's
<br>visual similarity spatialisation as an alternative
<br>view mode and gave the users the possibility
<br>to isolate single countries.
</div>
<div class="col-6 text-right"><img src="assets/img/project/design5.png"></div>
</div>
<!-- ROW 6 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
PixPlot's default interface was then customized
<br>with HTML, CSS and JavaScript. The categories' labels
<br>were also added to the canvas next to their clusters.
<br>This implied re-mapping all the vector of the letters
<br>in the space.
</div>
<div class="col-6 text-right"><img src="assets/img/project/design6.png"></div>
</div>
<!-- ROW 7 -->
<div class="row align-items-end gy-0">
<div class="col-6 m-text text-left">
Another section was built to convey the geographical
<br>trends in our data. The <a href="map.html" target="_blank">MAP↗</a> allows users to observe
<br>the areas in which the factories are most concentrated,
<br>compared to those where most User Generated
<br>Content was found.
<br>
<br>It was developed in <a href="https://www.mapbox.com/" target="_blank">Mapbox↗</a>, adding a feature
<br>to the original factories’ list spreadsheet: the images’
<br>count per factory.
<br>
<div class="s-text"><a href="https://drive.google.com/drive/folders/1G9A9pcTMxMfvddTfNG-Uwpmn4zuQBAm1?usp=sharing" target="_blank">mapbox.csv↗</a></div>
<br>
<div class="s-text"><a href="https://docs.google.com/spreadsheets/d/1LYpATOga9flTJ6-WoWsk1diFYjBmbb3Rsqt5jFguvZk/edit#gid=51841612" target="_blank">mapbox1.csv↗</a></div>
<div class="s-text"><a href="https://docs.google.com/spreadsheets/d/1LYpATOga9flTJ6-WoWsk1diFYjBmbb3Rsqt5jFguvZk/edit#gid=1504538351" target="_blank">mapbox2.csv↗</a></div>
</div>
<div class="col-6 text-right"><img src="assets/img/project/design7.png"></div>
</div>
</div>
<!-- SEC. 5 WHO -->
<div class="full-width scrolledsnap standard-margin top-higher-margin" id = "who" style="background-color: black; color: white">
<div class="d-flex align-items-start justify-content-between">
<span class="m-text align-self-start" style="color: blue; transform:translate(0,-0.1vw); line-height:2.5vw">04<br>WHO </span><span class="xl-text">Found in Fast Fashion Factories</span>
</div>
<div class="xl-text">is a website developed during the <a href="https://densitydesign.github.io/teaching-dd18/">DensityDesign Lab Final Synthesis Studio</a> of the Master in Communication Design<br>at Politecnico di Milano. </div>
<div class="d-flex m-text gy-0 align-items-end" style="width: 100%; position: absolute; bottom: var(--margin)">
<div class="col-3"><a href="https://www.instagram.com/gionasssi/">Giovanni Bonassi</a><br>
<a href="https://www.instagram.com/martina_bracchi_/">Martina Bracchi</a><br>
<a href="https://www.instagram.com/cecilia.bnc">Cecilia Buonocunto</a><br>
<a href="https://www.csvslv.it/">Silvia Casavola</a><br>
<a href="https://www.instagram.com/laktryn/">Kateryna Lapshyna</a><br>
<a href="https://www.instagram.com/soregularvlada/">Vlada Ershova</a><br>
<a href="https://www.instagram.com/matteovisini99">Matteo Visini</a></div>
<div class="col-3">PROFESSORS<br><br>Michele Mauri<br>Simone Vantini<br>Gabriele Colombo<br>Ángeles Briones<br>Salvatore Zingale</div>
<div class="col-3">ASSISTANTS<br><br>Tommaso Elli<br>Andrea Benedetti<br>Elena Aversa<br>Arianna Bellantuono<br>Alessandra Facchin</div>
<div class="col-3">Politecnico di Milano<br>Communication Design MSc<br>Final Synthesis Design Studio<br>Sect. C3 A.Y. 2022/23<br>DensityDesign Lab<br>
<a href="https://densitydesign.org/"><img class="d-inline-block" src="https://densitydesign.github.io/teaching-dd13/img/logo-densitydesign-nobg-white.svg"></a>
<a href="https://www.google.com/search?q=polimi+scuola+del+design&oq=polimi+scuola+del+design&aqs=chrome..69i57.3371j0j4&sourceid=chrome&ie=UTF-8"><img class="d-inline-block" src="https://polimi.it/typo3conf/ext/sitepackage/Resources/Public/Images/logoPolimi.png"></a>
</div>
</div>
</div>
<span id="mobile-text" style="position: absolute; padding: 15px; top: 50vh; transform:translate(0, -50%)">Please come back and visit us from your laptop</span>
</main>
<!-- JQUERY -->
<script src="https://code.jquery.com/jquery-1.11.0.min.js"></script>
<script>
var pageheight = $(".full-width").height();
$("#scrollsnap").scroll( function () {
// ACTIVATES BOOKMARKS
if ($("#scrollsnap").scrollTop() == 0) {
$("#what-bm").siblings().removeClass("bm-active")
$("#what-bm").addClass("bm-active")
}
if ($("#scrollsnap").scrollTop() > 0) {
$("#why-bm").siblings().removeClass("bm-active")
$("#why-bm").addClass("bm-active")
}
if ($("#scrollsnap").scrollTop() > pageheight*1.2) {
$("#how-bm").siblings().removeClass("bm-active")
$("#how-bm").addClass("bm-active")
}
if ($("#scrollsnap").scrollTop() > pageheight*4) {
$("#who-bm").siblings().removeClass("bm-active")
$("#who-bm").addClass("bm-active")
}
})
// BOOKMARKS SCROLL
// function restorescroll() { $("#scrollsnap").css("scroll-snap-type", "y mandatory") }
// var dfd = $.Deferred();
// dfd.then(restorescroll())
// var bm = $(".bm")
//
// bm.click(function scrollto () {
// let destination = '#' + $(this).html();
// let offset = $(destination).offset();
// let offsetTop = offset.top;
// $("#scrollsnap").css("scroll-snap-type", "none")
// $("#scrollsnap").animate({scrollTop:offsetTop}, "slow")
// dfd.resolve();
// })
</script>
</body>