-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathindex.html
More file actions
484 lines (421 loc) · 69.6 KB
/
Copy pathindex.html
File metadata and controls
484 lines (421 loc) · 69.6 KB
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
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
<!DOCTYPE html>
<head>
<meta charset="utf-8" lang="en"/>
<title>High on History</title>
<meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
<!-- <meta name="viewport" content="width=device-width, initial-scale=1.0, shrink-to-fit=no"> -->
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.css" rel="stylesheet">
<link href="css/indexcss.css" rel="stylesheet">
<link rel="stylesheet" href="css/circular_menu.css">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous">
<!-- LANDING PAGE -->
<link href="css/1500.css" rel="stylesheet" id="stile">
<script src="https://api.mapbox.com/mapbox-gl-js/v2.15.0/mapbox-gl.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js" integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz" crossorigin="anonymous"></script>
<script src="scripts/pubsub.js"></script>
<script src="scripts/maintitle_animation.js"></script>
<script src="scripts/text_animation.js"></script>
<script src="scripts/circular_menu.js"></script>
<script src="scripts/hamburger.js"></script>
<script>var currentStyle="css/1500.css";</script>
</head>
<body id="index">
<nav class="navi fixed">
<div class="nav-content navi">
<div class="toggle-btn">
<i class="bx bx-plus"></i>
</div>
<span id="circular" style="--i:1;">
<a href="#" id="it1-1" onClick="change('css/1500.css')"><i id="number_1500">1500</i></a>
</span>
<span style="--i:2;">
<a href="#" id="it1-2" onClick="change('css/1800.css')"><i id="number_1800">1800</i></a>
</span>
<span style="--i:3;">
<a href="#" id="it1-3" onClick="change('css/1900.css')"><i id="number_1900">1920</i></a>
</span>
<span style="--i:4;">
<a href="#" id="it1-4" onClick="change('css/1960.css')"><i id="number_1960">1960</i></a>
</span>
<span style="--i:5;">
<a href="#" id="it1-5" onClick="change('css/1990s.css')"><i id="number_1990">1980</i></a>
</span>
<span style="--i:6;">
<a href="#" id="it1-6" onClick="change('css/2030.css')"><i id="number_2030">2030</i></a>
</span>
</div>
</nav>
<!-- Navbar section -->
<nav class="navbar navbar-expand-sm bg-body-tertiary sticky-lg-top navigazione">
<div class="container-fluid navigazione" style="padding-left: 5%">
<button class="navbar-toggler" id="hamburger2" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse navigazione d-none d-sm-block" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html" id="home" onclick=
"location.href=this.href;return false;">Home</a>
<!-- <a class="nav-link active" aria-current="page" href="index.html" id="home" onclick="change(currentStyle);return false;">Home</a> -->
</li>
<li class="nav-item dropdown" style="padding-left: 5%">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false" id="nav-issue">
Issues
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item nav-link scrollto" href="first.html" onclick=
"location.href=this.href;return false;">Antiquity</a></li>
<li><a class="dropdown-item nav-link scrollto" href="second.html" onclick=
"location.href=this.href;return false;">Modern Wars</a></li>
<li><a class="dropdown-item nav-link scrollto" href="third.html" onclick=
"location.href=this.href;return false;">Present-day</a></li>
</ul>
<li class="nav-item" style="padding-left: 5%">
<a class="nav-link scrollto" href="#documentation">Documentation</a>
</li>
<li class="nav-item" style="padding-left: 5%">
<a class="nav-link scrollto" href="#about">Team</a>
</li>
</ul>
<p id="date2" style="display: none"></p>
</div>
</div>
</nav>
<!-- Map section -->
<div class="striscia_sx"></div>
<div class="striscia_dx"></div>
<div id="banner"><p id="date"></p><p id="ad">Brought to you by</p></div>
<div id="banner_image"><img id="theImage" src="imgs/cigarettes.png" style="width: 80%"></div>
</div>
<script>
n = new Date();
y = n.getFullYear();
m = n.getMonth() + 1;
d = n.getDate();
document.getElementById("date").innerHTML = "High on History \xa0\xa0\xa0"+ m + "/" + d + "/" + y;
document.getElementById("date2").innerHTML = "High on History \xa0\xa0\xa0"+ m + "/" + d + "/" + y;
</script>
<script type="text/javascript">
(function() {
var urls = ['imgs/cigarettes', 'imgs/coke', 'imgs/can', 'imgs/burger'];
function swap() {
if ((urls[Math.round(Math.random() * (urls.length))] + '.png') != 'undefined.png') {
document.getElementById('theImage').setAttribute('src', urls[Math.round(Math.random() * (urls.length))] + '.png');
if (document.getElementById('theImage').getAttribute('src')=='undefined.png') {
document.getElementById('theImage').setAttribute('src', 'imgs/cigarettes.png');
}
if (document.getElementById('theImage').getAttribute('src')=='imgs/coke.png') {
document.getElementById('theImage').setAttribute('style', 'margin-right: 50px; width: 60%');
}
}
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
window.addEventListener( 'load', swap, false );
// If IE event model is used
}
})();
</script>
<div id="map">
<div id="image_artnouveau"><img id="woman" src="imgs/woman.png"></div>
<button id="button" class="btn-spin" onclick="mappa.myFunction()"></button>
<div class="sign" id="main-title"><h1 data-value="High on History" id="maintitle">High on History</div>
<div id="punk"><img id="punkhead" src="imgs/zine_cover.jpeg"></div>
<div id="depero" style="display: none"><img id="campari" src="imgs/campari.png"></div>
<script type="text/javascript">
(function() {
var urls = ['imgs/campari', 'imgs/campari2', 'imgs/campari3', 'imgs/campari4'];
function swap() {
if ((urls[Math.round(Math.random() * (urls.length))] + '.png') != 'undefined.png') {
document.getElementById('campari').setAttribute('src', urls[Math.round(Math.random() * (urls.length))] + '.png');
if (document.getElementById('campari').getAttribute('src')=='undefined.png') {
document.getElementById('campari').setAttribute('src', 'imgs/campari.png');
}
}
}
// Mozilla, Opera and webkit nightlies currently support this event
if ( document.addEventListener ) {
window.addEventListener( 'load', swap, false );
// If IE event model is used
}
})();
</script>
</div>
<!-- Issues section -->
<div id="issues" class="container">
<h2>Issues</h2>
<div class="image-row">
<div class="image-container">
<a href="first.html" onclick="location.href=this.href+'?style='+currentStyle;return false;">
<div class="screen">
<div class="screen-image">
<img src="imgs/assassins-the-users-of-hashish.jpg" alt="Assassins, the users of hashish">
</div>
<div class="screen-overlay"></div>
</div>
<div class="label"><h4>Issue 1: "Antiquity"</h4></div>
</a>
</div>
<div class="image-container">
<a href="second.html" onclick="location.href=this.href+'?style='+currentStyle;return false;">
<div class="screen">
<div class="screen-image">
<img src="imgs/pervitin small package.png" alt="Pervitin, package">
</div>
<div class="screen-overlay"></div>
</div>
<div class="label"><h4>Issue 2: "Modern Wars"</h4></div>
</a>
</div>
<div class="image-container">
<a href="third.html" onclick="location.href=this.href+'?style='+currentStyle;return false;">
<div class="screen">
<div class="screen-image">
<img src="imgs/issue_3.jpg" alt="Superman Pills">
</div>
<div class="screen-overlay"></div>
</div>
<div class="label"><h4>Issue 3: "Present-day"</h4></div>
</a>
</div>
</div>
</div>
<!-- Documentation section -->
<div id="documentation" class="container">
<div class="row">
<h2>Documentation</h2>
<nav class="navbar navbar-expand-md navbar-light col-md-3 col-sm-1" id="doc-navbar">
<button class="navbar-toggler" id="hamburger1" type="button">
<span class="navbar-toggler-icon"></span>
</button>
<div class="d-none d-md-block" id="menu-card">
<div id="menu-content">
<nav id="navbar-documentation" class="navbar align-items-stretch">
<h2>Menu</h2>
<nav class="nav nav-pills flex-column">
<a class="nav-link" href="#main" id="it1" onclick="location.href=this.href+'?style='+currentStyle;return false;">High on History</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1 scrollto" href="#how">How to use it</a>
</nav>
<a class="nav-link scrollto" href="#layout" id="it2">Layout and typographic styles</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link ms-3 my-1" href="#cen16th" id="it2-1" onClick="changeAndScroll('css/1500.css', '#cen16th')">Early Sixteenth century</a>
<a class="nav-link ms-3 my-1" href="#cen19th" id="it2-2" onClick="changeAndScroll('css/1800.css', '#cen19th')">Nineteenth century</a>
<a class="nav-link ms-3 my-1" href="#beginning20thcen" id="it2-3" onClick="changeAndScroll('css/1900.css', '#beginning20thcen')">First half of Twentieth Century</a>
<a class="nav-link ms-3 my-1" href="#half20th" id="it2-4" onClick="changeAndScroll('css/1960.css', '#half20th')">Second half of Twentieth Century</a>
<a class="nav-link ms-3 my-1" href="#late20th" id="it2-5" onClick="changeAndScroll('css/1990s.css', '#late20th')">Late Twentieth Century</a>
<a class="nav-link ms-3 my-1" href="#y2030" id="it2-6" onClick="changeAndScroll('css/2030.css', '#y2030')">the Future: 2030</a>
<!-- sostituire this.id con il nome del css scelto (css/1500.css) -->
</nav>
</nav>
</nav>
</div>
</div>
</nav>
<div data-bs-target="#navbar-documentation" class="col-md-9 col-xs-11" id="main-background">
<div id="content">
<h3 id="main">High on History</h3>
<p class="animated-text" data-value='High on History is a <span class="text-brutal">MMMM</span> (Mixing Maps,
Magazines and Metadata) project developed to transform reading into a virtual <span
class="text-brutal">time travelling experience</span> across past and future typography
trends. Nine articles related to the topic of the usage of <span clas="text-brutal">drugs</span>
in warfare are displayed in three issues of the magazine. The articles are organised in issues
according to the time period they relate to. The issues are "Antiquity", "Modern Wars"
and "Present-day". Each article is <span class="text-brutal">geo-referenced</span> and its
metadata are accessible to the user through a sidebar on the left side of the articles.'>High on History is a <span class="text-brutal">MMMM</span> (Mixing Maps, Magazines and Metadata) project developed to transform reading into a virtual <span class="text-brutal">time travelling experience</span> across past and future typography trends. Nine articles related to the topic of the usage of <span clas="text-brutal">drugs</span> in warfare are displayed in three issues of the magazine. The articles are organised in issues according to the time period they relate to. The issues are "Antiquity", "Modern Wars" and "Present-day". Each article is <span class="text-brutal">geo-referenced</span> and its metadata are accessible to the user through a sidebar on the left side of the articles.
<hr>
<h5 id="how" class="mb-3 mt-1" >Disclaimer</h5>
<p class="animated-text" data-value='The scope of the project is purely related to the university course "Web Technology and Development" of the Master Degree in Digital Humanities and Digital Knowledge of the University of Bologna taught by Fabio Vitali. Please note that this website does not aim to be an official magazine. The creators of the website are not the authors of the articles displayed, and the grouping of the articles in issues is subjected to the creators of this project. In no way the articles displayed on "High On History" are associated beyond this project. The articles were selected for their lenght and complexity from external sources, and the publication on "High on History" does not intend to replace their original publication. Please refer to the original source of the article for further specifications in relation to the authors, the publication date and the editorial data.</p>'>The scope of the project is purely related to the university course "Web Technology and Development" of the Master Degree in Digital Humanities and Digital Knowledge of the University of Bologna taught by Fabio Vitali. Please note that this website does not aim to be an official magazine. The creators of the website are not the authors of the articles displayed, and the grouping of the articles in issues is subjected to the creators of this project. In no way the articles displayed on "High On History" are associated beyond this project. The articles were selected for their lenght and complexity from external sources, and the publication on "High on History" does not intend to replace their original publication. Please refer to the original source of the article for further specifications in relation to the authors, the publication date and the editorial data.
<ul>
<li class="animated-text" data-value='<a href="https://www.jstor.org/stable/10.2307/48637201">The Assassins in Fact and Fiction</a>'><a href="https://www.jstor.org/stable/10.2307/48637201">The Assassins in Fact and Fiction</a></li>
<li class="animated-text" data-value='<a href="https://www.jstor.org/stable/42909562">Hashish, Assassins, and the Love of God</a>'><a href="https://www.jstor.org/stable/42909562">Hashish, Assassins, and the Love of God</a></li>
<li class="animated-text" data-value='<a href="https://doi.org/10.1016/j.jep.2019.112151">Sagas of the Solanaceae: Speculative ethnobotanical perspectives on the Norse berserkers</a>'><a href="https://doi.org/10.1016/j.jep.2019.112151">Sagas of the Solanaceae: Speculative ethnobotanical perspectives on the Norse berserkers</a></li>
<li class="animated-text" data-value='<a href="https://warfarehistorynetwork.com/article/forty-rrod-blue-ruin-oh-be-joyful-civil-war-alcohol-abuse/">Forty-rod, Blue Ruin & Oh Be Joyful: Civil War Alcohol Abuse</a>'><a href="https://warfarehistorynetwork.com/article/forty-rrod-blue-ruin-oh-be-joyful-civil-war-alcohol-abuse/">Forty-rod, Blue Ruin & Oh Be Joyful: Civil War Alcohol Abuse</a></li>
<li class="animated-text" data-value='<a href="https://www.thelancet.com/journals/lancet/article/PIIS0140-6736(14)62234-0/fulltext">Drugs, alcohol, and the First World War</a>'><a href="https://www.thelancet.com/journals/lancet/article/PIIS0140-6736(14)62234-0/fulltext">Drugs, alcohol, and the First World War</a></li>
<li class="animated-text" data-value='<a href="https://time.com/5752114/nazi-military-drugs/">How Methamphetamine Became a Key Part of Nazi Military Strategy</a>'><a href="https://time.com/5752114/nazi-military-drugs/">How Methamphetamine Became a Key Part of Nazi Military Strategy</a></li>
<li class="animated-text" data-value='<a href="https://www.hrw.org/news/2008/04/16/coercion-and-intimidation-child-soldiers-participate-violence">Coercion and Intimidation of Child Soldiers to Participate in Violence</a>'><a href="https://www.hrw.org/news/2008/04/16/coercion-and-intimidation-child-soldiers-participate-violence">Coercion and Intimidation of Child Soldiers to Participate in Violence</a></li>
<li class="animated-text" data-value='<a href="https://tcf.org/content/report/the-drugs-of-war/">The Drugs of War—Captagon and the Islamic State</a>'><a href="https://tcf.org/content/report/the-drugs-of-war/">The Drugs of War—Captagon and the Islamic State</a></li>
<li class="animated-text" data-value='<a href="https://www.army-technology.com/features/featurecreating-supermen-battlefield-performance-enhancing-drugs/">Creating Supermen: battlefield performance enhancing drugs</a>'><a href="https://www.army-technology.com/features/featurecreating-supermen-battlefield-performance-enhancing-drugs/">Creating Supermen: battlefield performance enhancing drugs</a></li>
</ul>
</p>
<hr>
<h5 id="layout" class="mb-3 mt-1" >Layout and typographic styles</h5>
<p class="animated-text" data-value='The themes were designed according to the organizational characteristics of a historical style in depending on the related time period, and <span class="text-brutal">maps</span> are also converted to the graphical style of the chosen time span. The fonts change in depending on the historical period taken into account. Overall, the whole website changes aspect in depending on the style the users chooses. At any point in navigation, the user can choose to switch style by clicking on a different "century" in the circual menu always visible in the page.'>
The themes were designed according to the organizational characteristics of a historical style in depending on the related time period, and <span class="text-brutal">maps</span> are also converted to the graphical style of the chosen time span. The fonts change in depending on the historical period taken into account. Overall, the whole website changes aspect in depending on the style the users chooses. At any point in navigation, the user can choose to switch style by clicking on a different "century" in the circual menu always visible in the page.
</p>
<hr>
<h5 id="cen16th" class="mb-3 mt-1" >Early sixteenth century</h5>
<p class="animated-text" data-value='For the general layout of the page, the inspiring document was <a href="http://guity-novin.blogspot.com/2010/04/history-of-graphic-design-emergence-of.html">"Chapter 24 - The Emergence of Modern Printing Technique"</a> in Guity Novin's History of Graphic Design.
Overall, the webpage aims to resemble the publication of Historia Florentina (1478) by Poggio Bracciolini. The choice of the two column layout comes instead from the publication of the <a href="https://en.wikipedia.org/wiki/Gutenberg_Bible">Gutemberg Bible</a>, printed in 1450s.'>
For the general layout of the page, the inspiring document was <a href="http://guity-novin.blogspot.com/2010/04/history-of-graphic-design-emergence-of.html">"Chapter 24 - The Emergence of Modern Printing Technique"</a> in Guity Novin's History of Graphic Design.
Overall, the webpage aims to resemble the publication of Historia Florentina (1478) by Poggio Bracciolini. The choice of the two column layout comes instead from the publication of the <a href="https://en.wikipedia.org/wiki/Gutenberg_Bible">Gutemberg Bible</a>, printed in 1450s.<div class="documentation-img" id="doc-img-1"><div class="screen"><div class="screen-image"><img src="imgs/doc_1500_1.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='The colours of the inital in this edition also inspired the highlighting of metadata in the text. The font mostly used was "Garmond", mentioned in "Chapter 24 - The Emergence of Modern Printing Technique" as the character invented by typeface designer and punch-cutter Claude Garamond (ca. 1480–1561).
However, other fonts have also been used, taking inspiration from publications such as "Der Dritt Teil de Brucher des Ehrn" by Martin Luther in 1566.<span class="text-brutal">Italics</span> is used because it is an invention belonging to the European Reinassance, and the colour red is a feature that appears in the book <a href="http://guity-novin.blogspot.com/2010/04/history-of-graphic-design-emergence-of.html">"Qvesta opra da ogni parte e un libro doro"</a> (1476) by Johannes Müller von Königsberg as well as in "Der Dritt Teil de Brucher des Ehrn" (1566) by Martin Luther previously mentioned.'>The colours of the inital in this edition also inspired the highlighting of metadata in the text.
The font mostly used was "Garmond", mentioned in "Chapter 24 - The Emergence of Modern Printing Technique" as the character invented by typeface designer and punch-cutter Claude Garamond (ca. 1480–1561).
However, other fonts have also been used, taking inspiration from publications such as "Der Dritt Teil de Brucher des Ehrn" by Martin Luther in 1566.<span class="text-brutal">Italics</span> is used because it is an invention belonging to the European Reinassance, and the colour red is a feature that appears in the book <a href="http://guity-novin.blogspot.com/2010/04/history-of-graphic-design-emergence-of.html">"Qvesta opra da ogni parte e un libro doro"</a> (1476) by Johannes Müller von Königsberg as well as in "Der Dritt Teil de Brucher des Ehrn" (1566) by Martin Luther previously mentioned.<div class="documentation-img" id="doc-img-1"><div class="screen"><div class="screen-image"><img src="imgs/doc_1500-2.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='Borders and ornaments are also inspired by an edition of <a href="http://guity-novin.blogspot.com/2010/04/history-of-graphic-design-emergence-of.html"></a><span class="text-brutal">Aristotle</span> (1495-98)</a> by the prominent Venetian publisher and printer Aldus Manutius as well as by <a href="http://www.devilsartisan.ca/dingbats_section_garamond.html">decorations</a> created according to the style of Robert Granjon (1513–1590). An example of the use of borders in early press is visible in the "Book of Hours" published in 1525 by Colines and Tory.'>
Borders and ornaments are also inspired by an edition of <a href="http://guity-novin.blogspot.com/2010/04/history-of-graphic-design-emergence-of.html"></a><span class="text-brutal">Aristotle</span> (1495-98)</a> by the prominent Venetian publisher and printer Aldus Manutius as well as by <a href="http://www.devilsartisan.ca/dingbats_section_garamond.html">decorations</a> created according to the style of Robert Granjon (1513–1590). An example of the use of borders in early press is visible in the "Book of Hours" published in 1525 by Colines and Tory.<div class="documentation-img" id="doc-img-2"><div class="screen"><div class="screen-image"><img src="imgs/doc_1500_4.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='Images and photos are filtered in black and white because they aim to resemble the black and white drawings printed in the office of the typographer Christophe Plantin as this edition printed in 1572 shows. The font chosen for their label is also inspired by this edition.'>
Images and photos are filtered in black and white because they aim to resemble the black and white drawings printed in the office of the typographer Christophe Plantin as this edition printed in 1572 shows. The font chosen for their label is also inspired by this edition.<div class="documentation-img" id="doc-img-2"><div class="screen"><div class="screen-image"><img src="imgs/doc_1500_3.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<hr>
<h5 id="cen19th" class="mb-3 mt-1" >Nineteenth century</h5>
<p class="animated-text" data-value='The webpage aims to resemble a publication of the <span class="text-brutal">Nineteenth century</span>, which is why the chosen font is <span class="text-brutal">Bodoni</span>. Indeed, Bodoni owes its name and style to the Italian printer Giambattista Bodoni (1740-1813), who designed several modern typefaces between the end of the Eighteenth century and the beginning of the Nineteenth.
However, the headlines of the text are displayed in the font "Trinigan", which aims to resemble the labels on the <span class="text-brutal">posters</span> displayed in "Chapter 25 - Pioneers of the Art Nouveau, Chromolithography and the emergence of the modern poster and cigar box labels" in Guity Novin's History of Graphic Design.'>
The webpage aims to resemble a publication of the <span class="text-brutal">Nineteenth century</span>, which is why the chosen font is <span class="text-brutal">Bodoni</span>. Indeed, Bodoni owes its name and style to the Italian printer Giambattista Bodoni (1740-1813), who designed several modern typefaces between the end of the Eighteenth century and the beginning of the Nineteenth.
However, the headlines of the text are displayed in the font "Trinigan", which aims to resemble the labels on the <span class="text-brutal">posters</span> displayed in "Chapter 25 - Pioneers of the Art Nouveau, Chromolithography and the emergence of the modern poster and cigar box labels" in Guity Novin's History of Graphic Design.<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/doc_1800_2.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='For the other fonts, the article on Art Nouveau Magazines on <a href="https://www.theviennasecession.com/art-nouveau-magazines/">The Vienna Secession website</a> was also an inspiration.
The vivid colours of the page are also inspired by the posters of the late Nineteenth century, and the colours where chosen on the basis of a palette extracted from the images that are present on the webpage. The borders were chosen as a typical expression of <span class="text-brutal">Art Nouveau</span> in publications at that time, as shown in "Chapter 64 - A History of Magazine Covers" in Guity Novin's History of Graphic Design. The women and flower-themed decorations are inspired by the designs of Alphonse Mucha (1860-1939) and other designers at the time.'>
For the other fonts, the article on Art Nouveau Magazines on <a href="https://www.theviennasecession.com/art-nouveau-magazines/">The Vienna Secession website</a> was also an inspiration.
The vivid colours of the page are also inspired by the posters of the late Nineteenth century, and the colours where chosen on the basis of a palette extracted from the images that are present on the webpage. The borders were chosen as a typical expression of <span class="text-brutal">Art Nouveau</span> in publications at that time, as shown in "Chapter 64 - A History of Magazine Covers" in Guity Novin's History of Graphic Design. The women and flower-themed decorations are inspired by the designs of Alphonse Mucha (1860-1939) and other designers at the time.<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/doc_1800_1.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<hr>
<h5 id="beginning20thcen" class="mb-3 mt-1" >First half of Twentieth Century</h5>
<p class="animated-text" data-value='The chosen <span clss="text-brutal">geo-chronological dimension</span> for this theme is the 1920’s Italy.
Beside <a href="http://guity-novin.blogspot.com/2018/09/chapter-32-pioneers-of-advertisement.html">”Chapter 32 - Pioneers of Advertisement Posters“</a> and <a href="http://guity-novin.blogspot.com/2011/08/chapter-44-italian-futurist-visual.html">“Chapter 44; The Italian Futurist Visual Design”</a>, five major sources have been adopted for the design of this theme: <a href="https://archivio.corriere.it/Archivio/interface/slider_pagine.html#!/16-03-1928/16-03-1928/NobwRAdghgtgpmAXGAJlALlMAaMAzAJwHsYkwBGANgHoAGAZmvIE4AmADhzHSLKrsYsOYAL7Zw0eGQDWcAJ4B3IgRRd0cAB7oyogLpA">Corriere della Sera’s archive</a>, <a href="http://www.collezionesalce.beniculturali.it">Collezione Salce</a> in Treviso, Fortunato Depero's works carried out in those years, Lacerba “futuristic” magazine and "Il Becco Giallo" satirical magazine.
Starting from the latters, Lacerba (which is actually from the 1913-1915) was chosen because the futuristic publication marked a <span class="text-brutal">crucial step</span> into the development of newspapers as carriers of an intellectual and artistic view alongside the “simple” display of news. The chosen feature from Lacerba's example adopted into the development of “High on life”, beside the will of recreating the look and feel of an intellectual magazine, is the red color for the dividing lines. Il Becco Giallo, on the other hand, was founded as a satirical magazine during the first years of the fascist regime: so it was decided to include a feature from a opposite side of the intellectual spectrum as well, choosing the slightly yellow background as a reference to the Il Becco Giallo, which was printed on yellow paper.'>
The chosen <span clss="text-brutal">geo-chronological dimension</span> for this theme is the 1920’s Italy.
Beside <a href="http://guity-novin.blogspot.com/2018/09/chapter-32-pioneers-of-advertisement.html">”Chapter 32 - Pioneers of Advertisement Posters“</a> and <a href="http://guity-novin.blogspot.com/2011/08/chapter-44-italian-futurist-visual.html">“Chapter 44; The Italian Futurist Visual Design”</a>, five major sources have been adopted for the design of this theme: <a href="https://archivio.corriere.it/Archivio/interface/slider_pagine.html#!/16-03-1928/16-03-1928/NobwRAdghgtgpmAXGAJlALlMAaMAzAJwHsYkwBGANgHoAGAZmvIE4AmADhzHSLKrsYsOYAL7Zw0eGQDWcAJ4B3IgRRd0cAB7oyogLpA">Corriere della Sera’s archive</a>, <a href="http://www.collezionesalce.beniculturali.it">Collezione Salce</a> in Treviso, Fortunato Depero’s works carried out in those years, Lacerba “futuristic” magazine and "Il Becco Giallo" satirical magazine.
Starting from the latters, Lacerba (which is actually from the 1913-1915) was chosen because the futuristic publication marked a <span class="text-brutal">crucial step</span> into the development of newspapers as carriers of an intellectual and artistic view alongside the “simple” display of news. The chosen feature from Lacerba's example adopted into the development of “High on life”, beside the will of recreating the look and feel of an intellectual magazine, is the red color for the dividing lines. Il Becco Giallo, on the other hand, was founded as a satirical magazine during the first years of the fascist regime: so it was decided to include a feature from a opposite side of the intellectual spectrum as well, choosing the slightly yellow background as a reference to the Il Becco Giallo, which was printed on yellow paper.</p><div class="documentation-img" id="doc-img-5"><div class="screen"><div class="screen-image"><img src="imgs/lacerba.jpg"></div><div class="screen-overlay"></div></div></div>
<p class="animated-text" data-value='This trend proceeded in the following years, starting iconic collaborations between art and advertising, such as the one between the futuristic artist <a href="https://depero.it/2019/10/30/depero-e-campari-2/">Fortunato Depero and Campari</a>, which was many times featured in the pages of national newspapers such as Corriere Della Sera: the here chosen illustrations are from a cycle published in 1928.'>
This trend proceeded in the following years, starting iconic collaborations between art and advertising, such as the one between the futuristic artist <a href="https://depero.it/2019/10/30/depero-e-campari-2/">Fortunato Depero and Campari</a>, which was many times featured in the pages of national newspapers such as Corriere Della Sera: the here chosen illustrations are from a cycle published in 1928.</p> <div class="documentation-img" id="doc-img-5"><div class="screen"><div class="screen-image"><img src="imgs/collage2.jpg"></div><div class="screen-overlay"></div></div></div>
<p class="animated-text" data-value='In fact, in a tv/photography-free era, the majority of brand advertisements were carried out by illustrations, and pre-war Italy was full of <span class="text-brutal">extraordinary illustrators:</span> most of their works are collected by Collezione Salce in Treviso, the largest collection of advertising graphics existing in Italy, and four of them have been chosen to be included in High-on-life.'>
In fact, in a tv/photography-free era, the majority of brand advertisements were carried out by illustrations, and pre-war Italy was full of <span class="text-brutal">extraordinary illustrators:</span> most of their works are collected by Collezione Salce in Treviso, the largest collection of advertising graphics existing in Italy, and four of them have been chosen to be included in High-on-life.</p> <div class="documentation-img" id="doc-img-2"><div class="screen"><div class="screen-image"><img src="imgs/salce.jpg"></div><div class="screen-overlay"></div></div></div>
<p class="animated-text" data-value='Finally, for the actual layout of the page, some editions of <span class="text-brutal">Corriere Della Sera</span> from 1927 and 1928 have been looked at: small characters and very narrow spaces between the 5 or 6 column-divisions and between titles and subtitles were demanded by the cost of paper. Also, the omission of pictures was chosen to stay loyal to the period, which precedes photographic journalism.
The title font tries to recall the Corriere Della Sera’s title font, while the main body font resembles the little imperfections of small characters of automatic printers, used <span class="text-brutal">intensively</span> for mass production for the first time.
The fonts used for titles and subtitles were often inhomogeneous, changing many times in terms of spacing between letters, height, serif/sans-serif, and High on Life tried to resemble that.
Also the display of ads in a side-banner was loyal to the original source material.'>
Finally, for the actual layout of the page, some editions of <span class="text-brutal">Corriere Della Sera</span> from 1927 and 1928 have been looked at: small characters and very narrow spaces between the 5 or 6 column-divisions and between titles and subtitles were demanded by the cost of paper. Also, the omission of pictures was chosen to stay loyal to the period, which precedes photographic journalism.
The title font tries to recall the Corriere Della Sera’s title font, while the main body font resembles the little imperfections of small characters of automatic printers, used <span class="text-brutal">intensively</span> for mass production for the first time.
The fonts used for titles and subtitles were often inhomogeneous, changing many times in terms of spacing between letters, height, serif/sans-serif, and High on Life tried to resemble that.
Also the display of ads in a side-banner was loyal to the original source material. </p> <div class="documentation-img" id="doc-img-5"><div class="screen"><div class="screen-image"><img src="imgs/collagecorriere.jpg"></div><div class="screen-overlay"></div></div></div>
<p class="animated-text" data-value='Finally, the map style resembles an original <a href="https://gistechadventurer.com/2021/11/how-to-style-a-vintage-basemap-in-mapbox-studio/">Map of Singapore</a> designed between the XIX and the XX century.'>
Finally, the map style resembles an original <a href="https://gistechadventurer.com/2021/11/how-to-style-a-vintage-basemap-in-mapbox-studio/">Map of Singapore</a> designed between the XIX and the XX century.</p>
</p>
<hr>
<h5 id="half20th" class="mb-3 mt-1" >Second half of Twentieth Century</h5>
<p class="animated-text" data-value='The "Second half of the XX Century" style was inspired by <span class="text-brutal">legendary American magazines</span> such as Time and Life, which were the ground for the golden age of advertisement and photo journalism as described in <a href="http://guity-novin.blogspot.com/2018/09/chapter-32-pioneers-of-advertisement.html">Chapter 32</a> in Guity Novin's History of Graphic Design. Other sources of inspiration were the <a href="https://blog.mapbox.com/creating-a-new-standard-646e6b7e6544">road-trip</a> maps that were usually sold at gas station, popular throughout the whole century.
Magazines during this period were filled with full-page images, alternating colors and black and white. It is indeed in this period that <a href=" http://guity-novin.blogspot.com/2014/07/chapter-70-history-of-color-color-wheel.html">colors</a> started being associated with different kinds of psychological engagement. As a matter of fact, around these years new kinds of advertising techniques started being adopted, such as the "Lifestyle Marketing", through which more the experience, rather than the product, was proposed to costumers. The iconic <span class="text-brutal">"Marlboro Man"</span> is probably the most famous testimonial of this revolution in advertisement.'>
The "Second half of the XX Century" style was inspired by <span class="text-brutal">legendary American magazines</span> such as Time and Life, which were the ground for the golden age of advertisement and photo journalism as described in <a href="http://guity-novin.blogspot.com/2018/09/chapter-32-pioneers-of-advertisement.html">Chapter 32</a> in Guity Novin's History of Graphic Design. Other sources of inspiration were the <a href="https://blog.mapbox.com/creating-a-new-standard-646e6b7e6544">road-trip</a> maps that were usually sold at gas station, popular throughout the whole century.
Magazines during this period were filled with full-page images, alternating colors and black and white. It is indeed in this period that <a href=" http://guity-novin.blogspot.com/2014/07/chapter-70-history-of-color-color-wheel.html">colors</a> started being associated with different kinds of psychological engagement. As a matter of fact, around these years new kinds of advertising techniques started being adopted, such as the "Lifestyle Marketing", through which more the experience, rather than the product, was proposed to costumers. The iconic <span class="text-brutal">"Marlboro Man"</span> is probably the most famous testimonial of this revolution in advertisement. </p> <div class="documentation-img" id="doc-img-2"><div class="screen"><div class="screen-image"><img src="imgs/marlboroman.jpeg"></div><div class="screen-overlay"></div></div></div>
<p class="animated-text" data-value='The margins started being wider compared to the previous half of the century (about 6 em), presenting often no more than 3 columns per page, and often a large portion of the page was occupied by other images, being ads or descriptive photographies of the article.
The fonts were mostly sans-serif for titles and sub titles, and mostly non homogenous throughout the same issue, as notable form <a href="https://books.google.gr/books?id=M0AEAAAAMBAJ&printsec=frontcover&hl=it#v=onepage&q&f=false">this issue of Life Magazine</a> from April 16th of 1971. Also, the white background color marks the evolution in the field of paper making, in comparison to the previous theme (indeed, new kinds of paper such as the coated paper started being used for a better printing and display of the pictures), while the blue color for links and metadata buttons was chosen as both a reference to “Life” Magazine indexes and as a way to keep the palette of website revolving around the colors of the <span class="text-brutal">American flag.</span>'>
The margins started being wider compared to the previous half of the century (about 6 em), presenting often no more than 3 columns per page, and often a large portion of the page was occupied by other images, being ads or descriptive photographies of the article.
The fonts were mostly sans-serif for titles and sub titles, and mostly non homogenous throughout the same issue, as notable form <a href="https://books.google.gr/books?id=M0AEAAAAMBAJ&printsec=frontcover&hl=it#v=onepage&q&f=false">this issue of Life Magazine</a> from April 16th of 1971. Also, the white background color marks the evolution in the field of paper making, in comparison to the previous theme (indeed, new kinds of paper such as the coated paper started being used for a better printing and display of the pictures), while the blue color for links and metadata buttons was chosen as both a reference to “Life” Magazine indexes and as a way to keep the palette of website revolving around the colors of the <span class="text-brutal">American flag.</span></p> <div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/collagelayout.jpg"></div><div class="screen-overlay"></div></div></div>
<p class="animated-text" data-value='The home page is of course inspired by the iconic <a href="http://guity-novin.blogspot.com/2013/03/a-history-of-magazine-covers.html">Time Magazine cover</a>, in particular by the "Men of the year 1969" one, with the title font and style being inspired by Life magazine. The sppining globe is both a reference to the "Space Race" of those years and a reproduction of old tv-news shows intros.'>
The home page is of course inspired by the iconic <a href="http://guity-novin.blogspot.com/2013/03/a-history-of-magazine-covers.html">Time Magazine cover</a>, in particular by the "Men of the year 1969" one, with the title font and style being inspired by Life magazine. The sppining globe is both a reference to the "Space Race" of those years and a reproduction of old tv-news shows intros. </p> <div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/collagecover.jpg"></div><div class="screen-overlay"></div></div></div>
<hr>
<h5 id="late20th" class="mb-3 mt-1" >Late Twentieth Century</h5>
<p class="animated-text" data-value='For this style, the inspiration was taken from <span class="text-brutal">punk movements</span> that originated in the 1970s, which also affected the world of magazines and typography, leaving an indelible imprint in the years that followed through the 1980s to the present day. Proceeding in chronological order, we need to explore the roots and beginnings of these movements that emerged in the late 1970s.
In the rebellious 1970s, punk rock emerged as a vehement response to the mainstream, fueled by dissatisfaction and a desire to challenge established norms. <span class="text-brutal">Sniffin Glue</span>, a groundbreaking punk fanzine which stayed <a href="https://www.theguardian.com/music/2019/dec/10/how-we-made-sniffin-glue-punk-fanzine">active from 1976 up untill 1977 and created by Mark Perry</a>, played short but pivotal role in shaping the visual rebellion of punk design. Embracing a Do It Yourself (DIY) ethos, Sniffin Glue rejected conventional typesetting as both too expensive and restrictive for punk designers.
It became a canvas for a new form of graphical expression, breaking away from the polished norms of mainstream media. Known for its rushed immediacy, Sniffin Glue adopted a ransom note-style typographic approach, borrowing from the graphic language of anger and protest, resulting in mish-mashed lettering that screamed defiance against the rigid typographic grids of conventional design.'>
For this style, the inspiration was taken from <span class="text-brutal">punk movements</span> that originated in the 1970s, which also affected the world of magazines and typography, leaving an indelible imprint in the years that followed through the 1980s to the present day. Proceeding in chronological order, we need to explore the roots and beginnings of these movements that emerged in the late 1970s.
In the rebellious 1970s, punk rock emerged as a vehement response to the mainstream, fueled by dissatisfaction and a desire to challenge established norms. <span class="text-brutal">Sniffin Glue</span>, a groundbreaking punk fanzine which stayed <a href="https://www.theguardian.com/music/2019/dec/10/how-we-made-sniffin-glue-punk-fanzine">active from 1976 up untill 1977 and was created by Mark Perry</a>, played short but pivotal role in shaping the visual rebellion of punk design. Embracing a Do It Yourself (DIY) ethos, Sniffin Glue rejected conventional typesetting as both too expensive and restrictive for punk designers.
It became a canvas for a new form of graphical expression, breaking away from the polished norms of mainstream media. Known for its rushed immediacy, Sniffin Glue adopted a ransom note-style typographic approach, borrowing from the graphic language of anger and protest, resulting in mish-mashed lettering that screamed defiance against the rigid typographic grids of conventional design.
<div class="documentation-img" id="doc-img-1"><div class="screen"><div class="screen-image"><img src="imgs/sniffin_glue.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='What set Sniffin Glue apart from commercial design was its commitment to the <span class="text-brutal">authenticity</span> of handmade creations.
<a href="https://99designs.com/blog/creative-inspiration/ripped-punk-influences-graphic-design/">The fanzine stripped design down to basics</a>, featuring illegible, scrawled script, hand-drawn logos, and imagery that conveyed the urgent and independent nature of the punk movement, rejecting the polished typography prevalent in mainstream media. Sniffin Glue became a tangible embodiment of the rebellious spirit pulsating through the punk subculture. Sniffin Glue's typographic innovation drew inspiration from Dadaists, who favored scissors and glue over traditional painting tools. The fanzine's collage style involved the reappropriation of existing cultural elements, giving cut-and-paste designs an edge of ideological flair.
This typographic rebellion echoed the <span class="text-brutal">punk ethos</span> of taking existing culture and making it uniquely their own.'>
What set Sniffin Glue apart from commercial design was its commitment to the <span class="text-brutal">authenticity</span> of handmade creations.
<a href="https://99designs.com/blog/creative-inspiration/ripped-punk-influences-graphic-design/">The fanzine stripped design down to basics</a>, featuring illegible, scrawled script, hand-drawn logos, and imagery that conveyed the urgent and independent nature of the punk movement. Sniffin Glue became a tangible embodiment of the rebellious spirit pulsating through the punk subculture. Sniffin Glue's typographic innovation drew inspiration from Dadaists, who favored scissors and glue over traditional painting tools. The fanzine's collage style involved the reappropriation of existing cultural elements, giving cut-and-paste designs an edge of ideological flair.
This typographic rebellion echoed the <span class="text-brutal">punk ethos</span> of taking existing culture and making it uniquely their own.
<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/sniffin_glue2.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='The pioneering punk fanzine, Sniffin Glue profoundly influenced the visual rebellion of punk design, leaving an indelible mark on the broader punk aesthetic. Its impact extended beyond its immediate reach, inspiring a generation of designers and shaping the style of numerous fanzines throughout the 80s. One notable example is <span class="text-brutal">"Guilty of What?!"</span> which embraced a similar DIY ethos and rebellious typographic style, adopting mish-mashed lettering and a ransom note-style approach.
Echoing Sniffin Glue's graphic language of anger and protest, "Guilty of What?!" emphasized the authenticity of handmade creations, featuring scrawled script, hand-drawn logos, and imagery that conveyed the urgent and independent nature of the punk movement. Furthermore, the fanzine drew inspiration from Sniffin Glue's collage style, reappropriating existing cultural elements to create a unique and ideologically charged visual language. This demonstrates how Sniffin Glue's typographic innovation and rebellious spirit transcended its immediate context, influencing and shaping the style of fanzines throughout the 80s and beyond.</p>'>
The pioneering punk fanzine, Sniffin Glue profoundly influenced the visual rebellion of punk design, leaving an indelible mark on the broader punk aesthetic. Its impact extended beyond its immediate reach, inspiring a generation of designers and shaping the style of numerous fanzines throughout the 80s. One notable example is <span class="text-brutal">"Guilty of What?!"</span> which embraced a similar DIY ethos and rebellious typographic style, adopting mish-mashed lettering and a ransom note-style approach.
Echoing Sniffin Glue's graphic language of anger and protest, "Guilty of What?!" emphasized the authenticity of handmade creations, featuring scrawled script, hand-drawn logos, and imagery that conveyed the urgent and independent nature of the punk movement. Furthermore, the fanzine drew inspiration from Sniffin Glue's collage style, reappropriating existing cultural elements to create a unique and ideologically charged visual language. This demonstrates how Sniffin Glue's typographic innovation and rebellious spirit transcended its immediate context, influencing and shaping the style of fanzines throughout the 80s and beyond.</p>
<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/guilty-of-what-fanzine.jpg"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='The choice of "SniffinGlue" font, which is meant to resemble the original handwritten style of Sniffin Glue, with a 5-degree rotation tries to reflect punk design's rebellious spirit. The Accordion component follows a bold aesthetic, using SniffinGlue font with a large size. The main title, header, and other various elements adopt SniffinGlue with different degree of rotation and varying font sizes for impact. It was also used to <span class="text-brutal">emphasize</span> some portion of text
Remaining true to a rebellious theme, additional text elements align with the "Oldtype" font set at a weight of 700. This font was chosen in order to resemble the main portions of text in paragraphs that used to compose these zines. The font itself aims to resemble printed text with low-budget and <span class="text-brutal">zero-care</span> for good typography, trying to embody the spirit of these zines. In addition, the choice of using different fonts and displaying texts in two columns in the home page, but in one single column in the issues section, is meant to echoes the <a href="https://archive.org/details/sniffin_glue_12/mode/2up">dynamic character of these zines</a> in which the interplay of images and text encapsulate a time when events unfolded at a pace almost too rapid to comprehend.
This (in)consistency extends across buttons, list items, blockquotes, footer text, and accordion links, ensuring a unified rebellion in the design. For readability purposes i chose not to abuse this rebellious character of the punk zines in the issue section ofthis page. Mostly because the inspiration of a web-page shoulde not be an obstacle for the page's main purpose which in this case is to be informative about some specific topics.'>
The choice of "SniffinGlue" font, which is meant to resemble the original handwritten style of Sniffin Glue, with a 5-degree rotation tries to reflect punk design's rebellious spirit. The Accordion component follows a bold aesthetic, using SniffinGlue font with a large size. The main title, header, and other various elements adopt SniffinGlue with different degree of rotation and varying font sizes for impact. It was also used to <span class="text-brutal">emphasize</span> some portion of text
Remaining true to a rebellious theme, additional text elements align with the "Oldtype" font set at a weight of 700. This font was chosen in order to resemble the main portions of text in paragraphs that used to compose these zines. The font itself aims to resemble printed text with low-budget and <span class="text-brutal">zero-care</span> for good typography, trying to embody the spirit of these zines. In addition, the choice of using different fonts and displaying texts in two columns in the home page, but in one single column in the issues section, is meant to echoes the <a href="https://archive.org/details/sniffin_glue_12/mode/2up">dynamic character of these zines</a> in which the interplay of images and text encapsulate a time when events unfolded at a pace almost too rapid to comprehend.
This (in)consistency extends across buttons, list items, blockquotes, footer text, and accordion links, ensuring a unified rebellion in the design. For readability purposes i chose not to abuse this rebellious character of the punk zines in the issue section ofthis page. Mostly because the inspiration of a web-page shoulde not be an obstacle for the page's main purpose which in this case is to be informative about some specific topics.
</p>
<hr>
<h5 id="y2030" class="mb-3 mt-1" >the Future: 2030</h5>
<p class="animated-text" data-value='For the 2030's style, the possibilities were almost <span class="text-brutal">endless</span>. Since I wanted to combine both a design that was beautiful to look at and one that was easy/pragmatic to use, I almost immediately abandoned any kind of retro-futuristic, post-apocalyptic or dystopian inspiration. What I had in mind aligned perfectly with a TV series called <a href="https://www.hudsandguis.com/home/2021/theexpanse">"The Expanse"</a> which explores a future neither too near nor too far, in which mankind is now a permanent visitor to almost every planet, moon, asteroid in the solar system.
So stable of a frequenter that in the course of generations, the different portions of humans who have now left Earth have begun to experience generational changes due to the difference in gravity, the lack of direct sunlight and all those things that Earthlings take for granted. Mars declared its independence and so did "The Belt", all those moons, asteroids and small planets in the outer belt of the solar system. Without delving further into the complex plot of this TV series, what can be seen immediately is that red and black are the most present colours.
This is because I wanted to choose the faction of the Martians as main inspiration, since in the context of this TV series, <span class="text-brutal">the Martians</span> are the most technologically advanced as they are constantly driven by a war economy.
'>For the 2030's style, the possibilities were almost <span class="text-brutal">endless</span>. Since I wanted to combine both a design that was beautiful to look at and one that was easy/pragmatic to use, I almost immediately abandoned any kind of retro-futuristic, post-apocalyptic or dystopian inspiration. What I had in mind aligned perfectly with a TV series called <a href="https://www.hudsandguis.com/home/2021/theexpanse">"The Expanse"</a> which explores a future neither too near nor too far, in which mankind is now a permanent visitor to almost every planet, moon, asteroid in the solar system.
So stable of a frequenter that in the course of generations, the different portions of humans who have now left Earth have begun to experience generational changes due to the difference in gravity, the lack of direct sunlight and all those things that Earthlings take for granted. Mars declared its independence and so did 'the Belt', all those moons, asteroids and small planets in the outer belt of the solar system. Without delving further into the complex plot of this TV series, what can be seen immediately is that red and black are the most present colours.
This is because I wanted to choose the faction of the Martians as main inspiration, since in the context of this TV series, <span class="text-brutal">the Martians</span> are the most technologically advanced as they are constantly driven by a war economy.
<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/the_expanse_schermo3.png"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='Martians <span class="text-brutal">technological superiority</span> is precisely why I wanted to refer to their faction with the choice of colours in the various navbars and footer. Black remains the dominant colour, as a reminder of deep space. Besides colours, elements that render the idea of the future pretty well are effects obtained with JavaScript. I chose to use these effect only on the homepage in order to avoid an overload of scripts that could distract the user from the main content of the page.
These effects are visible if you hover over the main title of the web page with the mouse cursor, it will start its animation which will end within a few seconds. Similarly when selecting this style the paragraphs of the documentation are generated automatically, simulating the behaviour of LLM interfaces such as Chat-gpt when generating text in response to a prompt given by a user. The inclusion of this typical behaviour of AI interfaces is in some ways a reminder of what will be a probable future as already by now in 2023, the <span class="text-brutal">exponential development</span> of this type of technology has only scratched the surface of what may be its, virtually infinite, applications.
Elements such as these that i have just mentioned not only can offer an appealing visual imprint of the home page, but also are present, to some extent, in the Tv-series that remain still to the position of main inspiration for this theme.'>
Martians <span class="text-brutal">technological superiority</span> is precisely why I wanted to refer to their faction with the choice of colours in the various navbars and footer. Black remains the dominant colour, as a reminder of deep space. Besides colours, elements that render the idea of the future pretty well are effects obtained with JavaScript. I chose to use these effect only on the homepage in order to avoid an overload of scripts that could distract the user from the main content of the page.
These effects are visible if you hover over the main title of the web page with the mouse cursor, it will start its animation which will end within a few seconds. Similarly when selecting this style the paragraphs of the documentation are generated automatically, simulating the behaviour of LLM interfaces such as Chat-gpt when generating text in response to a prompt given by a user. The inclusion of this typical behaviour of AI interfaces is in some ways a reminder of what will be a probable future as already by now in 2023, the <span class="text-brutal">exponential development</span> of this type of technology has only scratched the surface of what may be its, virtually infinite, applications.
Elements such as these that i have just mentioned not only can offer an appealing visual imprint of the home page, but also are present, to some extent, in the Tv-series that remain still to the position of main inspiration for this theme.
<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/the_expanse_dispositivi_comm_neutro.png"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='
In any case, both effects mentioned so far are applied only to the homepage, despite a future in which the issues of a magazine, the articles of a newspaper, or any other type of textual information will most likely be created on the fly by generative models is not so far from us. I chose to prioritize the readability of issues since, unlike documentation, they are much longer, and their arrangement in two columns would have created an unpleasant visual effect in combination with the text-generation script. I chose a two-column layout to emulate what is often seen in <span class="text-brutal">The Expanse</span>, especially on the personal devices of each character in the series. The information frequently read through these devices is arranged in one or, at most, two columns.
When the amount of text is substantial, it is often divided into two columns, which is why I opted to arrange the text in this manner. In the image below, you can see an example of this. The colors of this device are different because they belong to a prominent figure in the Earth faction, hence the predominant blue on his device.
'>
In any case, both effects mentioned so far are applied only to the homepage, despite a future in which the issues of a magazine, the articles of a newspaper, or any other type of textual information will most likely be created on the fly by generative models is not so far from us. I chose to prioritize the readability of issues since, unlike documentation, they are much longer, and their arrangement in two columns would have created an unpleasant visual effect in combination with the text-generation script. I chose a two-column layout to emulate what is often seen in <span class="text-brutal">The Expanse</span>, especially on the personal devices of each character in the series. The information frequently read through these devices is arranged in one or, at most, two columns.
When the amount of text is substantial, it is often divided into two columns, which is why I opted to arrange the text in this manner. In the image below, you can see an example of this. The colors of this device are different because they belong to a prominent figure in the Earth faction, hence the predominant blue on his device.
<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/the_expanse_display_terrestre_testo_in_colonne.png"></div><div class="screen-overlay"></div></div></div>
</p>
<p class="animated-text" data-value='The selected font is that of the TV series title. At first glance, it may seem hard to read, but it actually follows a minimal style that is quite quick to assimilate, making its reading as fast as that of a normal font. For the photos in various sections of documentation, issues, and for the cards of our team, I developed an effect that simulates the holographic effect typical of any sci-fi film or TV series. For this particular effect, I tried to make it look as much as possible like what is seen in the devices used in the TV series by the various characters to communicate with each other (descendants of our smartphones, to be clear).
Often they show very clear and sharp images, but at other times during the series, these images appear <span class="text-brutal">"hologrammed".</span> I preferred this second option because of its greater visual appeal. In general, font sizes, distances between various elements, specific image dimensions, text layout, and pretty much everything else has been set up in a way that the final result somehow resembles that of a dashboard or a similar station inside a spacecraft. Particularly, of course, within <a href="https://fuzzymath.com/blog/sci-fi-ui-what-three-spaceships-can-teach-us-about-the-future-of-user-interfaces/">that of the protagonists of the TV series (the Rocinante)</a>. In the image below it's possible to notice again a switch in the color theme, but this time it's yellow that refers to The Belt faction. In conclusion, to be precise, the style I created tries to synthesise the inspiration from the TV series with the indicated time coordinates by producing an almost 'stylised' style since the TV series is set much further back than 2030 anyway, so I wanted to make the style similar but more 'primitive'.
'>The selected font is that of the TV series title. At first glance, it may seem hard to read, but it actually follows a minimal style that is quite quick to assimilate, making its reading as fast as that of a normal font. For the photos in various sections of documentation, issues, and for the cards of our team, I developed an effect that simulates the holographic effect typical of any sci-fi film or TV series. For this particular effect, I tried to make it look as much as possible like what is seen in the devices used in the TV series by the various characters to communicate with each other (descendants of our smartphones, to be clear).
Often they show very clear and sharp images, but at other times during the series, these images appear <span class="text-brutal">"hologrammed".</span> I preferred this second option because of its greater visual appeal. In general, font sizes, distances between various elements, specific image dimensions, text layout, and pretty much everything else has been set up in a way that the final result somehow resembles that of a dashboard or a similar station inside a spacecraft. Particularly, of course, within <a href="https://fuzzymath.com/blog/sci-fi-ui-what-three-spaceships-can-teach-us-about-the-future-of-user-interfaces/">that of the protagonists of the TV series (the Rocinante)</a>. In the image below it's possible to notice again a switch in the color theme, but this time it's yellow that refers to The Belt faction. In conclusion, to be precise, the style I created tries to synthesise the inspiration from the TV series with the indicated time coordinates by producing an almost "stylised" style since the TV series is set much further back than 2030 anyway, so I wanted to make the style similar but more "primitive".
<div class="documentation-img" id="doc-img-3"><div class="screen"><div class="screen-image"><img src="imgs/the_expanse_dispositivi_comm_belt.png"></div><div class="screen-overlay"></div></div></div>
</p>
</div>
</div>
</div>
</div>
<!-- About section -->
<div id="about" class="container">
<h2>Team</h2>
<div class="image-row">
<div class="image-container">
<div class="screen">
<div class="screen-image">
<img src="imgs/lucia.jpg" alt="Lucia Bertoldini">
</div>
<div class="screen-overlay"></div>
</div>
<div class="label"><h4 class="animated-text" data-value="Lucia Bertoldini">Lucia Bertoldini</h4></div>
</div>
<div class="image-container">
<div class="screen">
<div class="screen-image">
<img src="imgs/stefano.jpeg" alt="Stefano Sorrentino">
</div>
<div class="screen-overlay"></div>
</div>
<div class="label"><h4 class="animated-text" data-value="Stefano Sorrentino">Stefano Sorrentino</h4></div>
</div>
<div class="image-container">
<div class="screen">
<div class="screen-image">
<img src="imgs/matteo.jpeg" alt="Matteo Guenci">
</div>
<div class="screen-overlay"></div>
</div>
<div class="label"><h4 class="animated-text" data-value="Matteo Guenci">Matteo Guenci</h4></div>
</div>
</div>
</div>
<!-- Footer -->
<footer class="footer">
<div id="image_artnouveau2"><img id="woman2" src="imgs/edited_flowers.png"></div>
<div class="footer-text">
<p>High on History 2023 <br> All copyrights and related rights on the issues content remain with the original owners of the articles <br> All copyright on the typographic and layout choices are 2023 ©BertoldiniGuenciSorrentino <br> Project developed for the course Web Technology and Development by Fabio Vitali <br> DHDK Master's Degree</p>
</div>
</footer>
</body>
</html>