-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathdocumentation.html
403 lines (371 loc) · 41.3 KB
/
documentation.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
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="DC.Title" content="MnM's - Music and Maps Magazine">
<meta name="DC.Creator" content="Erica Andreose, Gaia Ortona, Chiara Parravicini">
<meta name="DC.Subject" content="Digital Online Magazine">
<meta name="DC.Description" content="Information Modeling and Web Technologies project">
<meta name="DC.Publisher" content="Alma mater studiorum - Universita di Bologna, Information Modeling and Web Technologies">
<meta name="DC.Date" content="2023-14-08">
<meta name="DC.Type" content="Website">
<meta name="DC.Format" content="HTML/CSS/JS">
<meta name="DC.Identifier" content="https://xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx/"> <!--add website URL-->
<meta name="DC.Language" content="en">
<!--link Bootstrap icons-->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/font/bootstrap-icons.css">
<!--link google icons-->
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<!--link favicon per loghetto -->
<link rel="icon" href="img/m.png" type="img/jpg"/>
<!--link font google-->
<link href="https://fonts.googleapis.com/css2?family=Tangerine&display=swap" rel="stylesheet">
<!--CSS of Bootstrap-->
<link rel="stylesheet" type="text/css" href="bootstrap-5.3.1-dist/css/bootstrap.min.css">
<!-- css link -->
<link rel="stylesheet" id="style-link" href="styleMINE.css">
<title>MnM's Magazine</title>
</head>
<body>
<!-- gif animated -->
<div class="container-fluid" id="gif">
<img src="img/mnmsgif.gif" alt="title GIF" id="gifimage">
</div>
<!-- subtitle -->
<div class="container-fluid-nav sticky-top" id="subtitle">
<h4>Music and Maps Magazine</h4>
<!-- start of the NAVBAR -->
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavDropdown" aria-controls="navbarNavDropdown" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavDropdown">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link active" aria-current="page" href="index.html">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="documentation.html">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="issues.html">
Issues
</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">
Styles
</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item jsstyle" data-style="styleMINE.css" data-src="img/lp.png" map-style="mapbox://styles/ericaandreose/clr5fspy401hb01qr7elchsk7">Default</a></li>
<li><a class="dropdown-item jsstyle" data-style="medievalissues.css" data-src="img/medieval/Wheel.png" map-style="mapbox://styles/ericaandreose/clqvgxzcs00zv01o36el44ju0">1500</a></li>
<li><a class="dropdown-item jsstyle" data-style="provaOttocento.css" data-src="img/artnouveau/discoArtNouveau.png" map-style="mapbox://styles/ericaandreose/clr5e1o3701h601qwar1jf6de">1800</a></li>
<li><a class="dropdown-item jsstyle" data-style="anni30gaia.css" data-src="img/thirties/222c4899ec414668aacf03aecbc1a33d-fotor-20231205163932.png" map-style="mapbox://styles/ericaandreose/clr5er6ln01hc01qwf9wk9bzo">1930</a></li>
<li><a class="dropdown-item jsstyle" data-style="provaSeventies.css" data-src="img/seventies/discoSeventies.png" map-style="mapbox://styles/ericaandreose/clr5f0o6f01fn01pj8qt9d5yb">1970</a></li>
<li><a class="dropdown-item jsstyle" data-style="geronimo.css" data-src="img/geronimo/cerchio.png" map-style="mapbox://styles/ericaandreose/clpmid6ux00yn01po7jjfgs7y">2000</a></li>
<li><a class="dropdown-item jsstyle" data-style="2030gaia.css" data-src="img/2030img/vinile2030.png" map-style="mapbox://styles/ericaandreose/clr5f4cdf00is01pd53ts6dcf">2030</a></li>
</ul>
</li>
</ul>
</div>
</div>
</nav>
<!-- end navbar-->
</div>
<br>
<br>
<div class="image-container" id="space">
<div id="stick">
<img src="img/arm2.png" class="img-fluid" id="move">
</div>
<div id="Vinyl">
<img src="img/lp.png" class="img-fluid" id="rotate">
</div>
<div class="music-container" id="music-container">
<h6 class="stitle" id="title">Music Box</h6>
<audio src="./songs/bad_romance.mp3" id="audio"></audio>
<div class="navigation">
<button id="prev" class="action-btn">
<i class="bi bi-skip-backward-circle-fill"></i>
</button>
<button id="js-rotate" class="action-btn action-btn-big">
<i class="bi bi-play-circle-fill"></i>
</button>
<button id="next" class="action-btn">
<i class="bi bi-skip-forward-circle-fill"></i>
</button>
</div>
</div>
</div>
<div class="container-fluid">
<div id="main" class="row">
<div class="col-md-12">
<div class="documentation">
<h1 class="title-1">Documentation</h1>
<h2>The Magazine</h2>
<p>
Music and Maps Magazine is a digital magazine dedicated to music and its various facets. The magazine currently contains three issues, dedicated to three variations on the music theme: music and technology, music and contexts, and music and fashion. For each issue there are three articles related to the theme that have been selected from authoritative online publications and whose authors and all related metadata are given.
The issues were thus divided among the three developers of the project:
<ul>
<li>Erica Andreose: Music and Techonologies</li>
<li>Chiara Parravicini: Music and Context</li>
<li>Gaia Ortona: Music and Fashion</li>
</ul>
</p>
<p>
Music and Maps Magazine allows you to vary the typographic, graphic, and aural appearance of the site as you explore the articles. The style variations are devoted to 6 different historical periods: 1500, 1800, 1930, 1970, 2000, 2030. Each historical period takes specific references and adapts the layout style of the articles to them.
The css styles were thus divided among the three developers of the project:
<ul>
<li>Erica Andreose: 1550 and 2000</li>
<li>Chiara Parravicini: 1800 and 1970</li>
<li>Gaia Ortona: 1930 and 2000</li>
</ul>
</p>
<h2>The Vinyl</h2>
<p>
Given the theme chosen for the magazine, we thought of rotating (metaphorically and literally) the pages of our website around the presence of a digital record player that offers different tracks and records for each style. This will allow the user to experience a greater degree of immersion in the reading experience.
The vinyl record player consists of:
an arm that raises and lowers each time the music player is started or stopped
a disc that rotates of 365 degrees with a constant speed
a player that handles music start and play, buttons to navigate back and forth through the song list, and an upper string where song titles are displayed.
</p>
<h2>1500 - Books of Hours and the advent of incunabula</h2>
<p>
For the 1500 style, I have decided to focus on a precise textual type that sees its greatest rise and demise precisely between the late 15th century and the first part of the 16th, I am talking about the Book of Hours. A devotional text that encompasses prayers and psalms as an abbreviated form of the breviary, containing the canonical Hours recited in monasteries. It also marks the canonical feasts of the saints and the succession of Christian devotional time.
With the arrival of printing at the end of the 15th century books there was a great revolution that sparked enormous changes in how books were made and disseminated. Great changes that also affected patrons. Now that getting a book of hours had become easier and cheaper, even the less affluent classes could afford and access prayer books. This is precisely why the elite and wealthy class must make up for the ascendant accessibility of the book of hours with increasingly rare and expensive private commissions. Books of Hours made on commission in the 16th century are in fact luxury texts for private devotion containing illustrations and decorations that reach the highest heights of realism and richness. Nobles demanded the creation of works that would then be passed down through the family as a symbol of unparalleled power and devotion. For miniatures and decorations, simple scribes are no longer hired but real painters and artists who generally work on full-size canvas.
Some examples I have used as visual references of the chosen style are:
<ul>
<li><a href="https://www.fitzmuseum.cam.ac.uk/illuminated/manuscript/discover/book-of-hours/section/panel-intro/folio/folio-96r" target="_blank">Book of hours of Flanders, MS 1058-1975, c.1510-1520</a> (from which I borrowed some floral decorations for the layout of the text area)</li>
<li><a href="http://artscash.com/books-5.html" target="_blank">The Rothschild Prayerbook, Ghent or Bruges, c.1505-1510</a></li>
<li><a href="https://www.metmuseum.org/art/collection/search/684184" target="_blank">Floreal Book of Hours,ca. 1530–35</a></li>
</ul>
<figure>
<img src="img/medieval/doc1.png">
</figure>
<figure>
<img src="img/medieval/doc2.png">
</figure>
<figure>
<img src="img/medieval/doc3.png">
</figure>
<figure>
<img src="img/medieval/doc3.jpg">
</figure>
</p>
<h3>Typographic style</h3>
<p>
The layout I have chosen to follow has narrow margins of 23vh for the left and right lado that force the text into a justified central column, to recall the arrangement of manuscript writing within the illuminated side decorations that in my case recall the rich three-dimensionally illusory illustration with flowers and small animals that appear to be resting on top of a sheet of gold.
These images were digitally processed and are the result of a mashup of several images derived from the Book of hours of Flander.
</p>
<p>
The main font I chose to use is <a href="https://www.dafont.com/1492-quadrata-lim.font" target="_blank">"1492 Square (2008)"</a> created by <a href="http://luc.devroye.org/fonts-48561.html" target="_blank">Gilles Le Corre</a>, a French designer.
This font can be downloaded for free from DaFont and reminded me of the hybrid Gothic bookhand known as bastard, bâtarde or lettre bourguignonne. A style of writing greatly used for luxury manuscripts of that period. Thus, we can say that it is a somewhat "retro" font that wants to maintain the Gothic origins of the manuscript but moves closer and closer to the rigor and breath of the printed setting. These are thus the last glimmers of handwriting before the final abandonment of the copyist's practice. The font, in addition to being extremely precise in the shape of some particular letters such as g, s, and t, also represents well the characteristic of amanuensis writing, in which letters can be extremely strict and neat (so much so that they appear to be printed) but also enclose delightful smudges and spots that recall their human-originated nature.
<figure>
<img src="img/medieval/doc4.png">
</figure>
</p>
<p>
The line spacing is 2.4rem because it is more reminiscent of that shown in the references, where the text continues by standing very close to the capitals.
</p>
<p>
For the letterheads I looked for a font that recalled the rich decorated initials of the period. During my search I came across this site that archives images and decorative alphabets and designs from various eras: <a href="https://www.fromoldbooks.org/" target="_blank">https://www.fromoldbooks.org/</a>
Searching the archive, there were some <a href="https://www.fromoldbooks.org/DelamotteOrnamentalAlphabets/pages/051-16th-Century/" target="_blank">16th-century alphabets</a> and I found one with ornate initials reminiscent of a future evolution of bastard Gothic (see the letters d, y and q) with decorations inside that recalled medieval bestiaries. I then chose to turn this design into an alphabet using <a href="https://www.calligraphr.com/en/ " target="_blank">Calligraphr</a>'s online portal.
<figure>
<img src="img/medieval/doc6.jpg">
</figure>
</p>
<p>
Within the text, through specific divs, other small decorations of flowers or illuminated insects have been inserted that precisely recall the illustrations of the valuable manuscript of the time.
The colors selected for the 16th century style were selected from the reference images and are: Seal Brown for the text, with some words highlighted in Dark Blue, Raw Umber, Maroon and Fun Green.
</p>
<!-- Coolors Palette Widget -->
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="0570123058827231">new CoolorsPaletteWidget("0570123058827231", ["00008f","005d32","7d4d00","570000","ffd277"]); </script>
<p>
The mouse cursor is replaced by a <a href="https://www.atlasobscura.com/articles/manicules" target="_blank">manicula</a> reminiscent of the decorations that copyists inserted at the edges of text in manuscripts to signal an oversight or a paragraph to be linked to another. In the 19th century the manicule became a popular typographic symbol. Today, the manicule is a standard typographic symbol intended to draw the reader’s attention to important text.
</p>
<p>
The vinyl retains its function but changes disc and loads a <a href="https://www.pinterest.it/pin/482800022555498875/" target="_blank">zodiac drawing</a> by <a href="https://it.wikipedia.org/wiki/Battista_Agnese" target="_blank">Battista Agnese</a>, a 16th-century Italian cartographer. The zodiac and the scanning of time and the celestial sphere through months and signs is an extremely present feature of the historical period. The wealthy class especially was very much connected to astrology and the study of the position of the stars. This particular detail also recalls the layout of another very famous book of hours, namely the one illustrated by the <a href="https://it.wikipedia.org/wiki/Tr%C3%A8s_riches_heures_du_Duc_de_Berry" target="_blank">Limbourg Brothers for the Duc de Berry</a>.
<figure>
<img src="img/medieval/doc5.jpg">
</figure>
</p>
<p>
The map also changes style to match the reporting period. For this I worked an <a href="https://blog.mapbox.com/designing-the-treasure-map-style-4318390ad81c" target="_blank">existing prototype</a> on MapBox Studio, making changes to match the colors to my palette to align the fonts used and symbols as closely as possible.
</p>
<h2>References</h2>
<p><a href="https://www.metmuseum.org/toah/hd/hour/hd_hour.htm" target="_blank">https://www.metmuseum.org/toah/hd/hour/hd_hour.htm</a></p>
<p><a href="https://www.abebooks.com/books/rarebooks/explaining-books-of-hours" target="_blank">https://www.abebooks.com/books/rarebooks/explaining-books-of-hours</a></p>
<p><a href="https://www.textmanuscripts.com/blog/entry/03-22-margins-the-limit-of-the-text" target="_blank">https://www.textmanuscripts.com/blog/entry/03-22-margins-the-limit-of-the-text</a></p>
<br><br>
<h2>1800 - Jugend Magazine and Jugendstil</h2>
<p>The reference I used to ideate the layout of the 19th century inspired style is the Jugend magazine. Jugend magazine, founded in Munich in 1896 by Georg Hirth and active until 1940, played a pivotal role in shaping the German Jugendstil movement, a local variant of the international Art Nouveau. The magazine aimed to showcase German Arts and Crafts initially but gained fame for championing the German Art Nouveau style, eventually giving rise to the Jugendstil movement. With weekly publications, Jugend captured the contemporary zeitgeist through texts and sumptuous illustrations, presenting art as a natural and essential component of life.</p>
<figure>
<img src="img//artnouveau/jugend2.jpg">
</figure>
<p>Jugend's visual style evolved with the emergence of Jugendstil, characterized by its two-dimensional designs featuring dynamic linework inspired by nature. The movement's artists, including Otto Eckmann, Hans Christiansen, Gertrud Kleinhempel, and others, showcased their versatility across various disciplines, from paintings and furniture to typography. The magazine played a crucial role in the graphic industry's development, benefiting from technological advances in printing that enabled high-quality reproductions of contemporary art. Jugend's impact extended beyond graphic design, influencing architecture and applied arts, contributing to the broader German Jugendstil movement and later merging with the Bauhaus tradition.</p>
<h3>Typographic style</h3>
<p>For the layout, I opted to emulate a specific page from the Jugend magazine, curated by designer Peter Behrens. I recreated the decorative "T" element that divides the text into two columns, separating the horizontal portion from the vertical one of the illustration. I extended this approach to cover the entire length of the articles. The Alte Schwabacher font is the closest reproduction I found of the original magazine page's font, serving as my reference. It exemplifies the Art Nouveau's penchant for Gothic-medieval style and, notably, reflects Jugend magazine's commitment to reproducing a non-manufactured aesthetic with a calligraphic touch.</p>
<p>Maintaining a layout congruent with the reference, I centered the titles, utilized wide margins, and adopted a narrow line spacing. The vinyl element, typically found in Jugend, was replaced with a circular motif from the Czech artist Alfons Mucha, a significant figure in the Art Nouveau movement.</p>
<figure>
<img src="img/artnouveau/jugend.jpg">
</figure>
<figure>
<img src="img/artnouveau/jugend5.jpg">
</figure>
<figure>
<img src="img/artnouveau/jugend6.jpg">
</figure>
<p>The color palette employed for the text, links, and map refers to the characteristic nuances of the decorative elements, establishing a cohesive visual connection throughout the design.</p>
<!-- Coolors Palette Widget -->
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="09579227713650723">new CoolorsPaletteWidget("09579227713650723", ["ddd2b2","3b697a","a85619","1e1c1c"]); </script>
<h2>References</h2>
<p><a href="https://www.vitimusea.no/en/kunnskap/jugend-en" target="_blank">https://www.vitimusea.no/en/kunnskap/jugend-en</a></p>
<p><a href="https://medium.com/fonti-storiche-online/jugend-online-la-rivista-art-nouveau-pi%C3%B9-famosa-della-germania-pre-nazista-640f04150e8d" target="_blank">https://medium.com/fonti-storiche-online/jugend-online-la-rivista-art-nouveau-pi%C3%B9-famosa-della-germania-pre-nazista-640f04150e8d</a></p>
<p><a href="https://digi.ub.uni-heidelberg.de/diglit/jugend1896_1/0100/image,info,thumbs" target="_blank">https://digi.ub.uni-heidelberg.de/diglit/jugend1896_1/0100/image,info,thumbs</a></p>
<p><a href="https://musemarketinggroup.ca/design/resurgence-of-art-nouveau-typography/" target="_blank">https://musemarketinggroup.ca/design/resurgence-of-art-nouveau-typography/</a></p>
<br><br>
<h2>1930: Vogue Archive</h2>
<p>Vogue stands as an iconic and widely recognized fashion magazine that has left a lasting impact on various aspects of our daily lives. Originating in New York in 1892 under the editorial direction of Arthur Baldwin Turnure, the publication later came under the ownership of the Condé Nast group, a relationship that persists to this day. Over the years, Vogue has expanded its influence globally, evolving from a weekly newspaper into a platform that delivers compelling and niche articles. Notably, it has become renowned for its unforgettable covers, which have emerged as a distinctive hallmark. In pop culture, Vogue's presence is not only acknowledged but also celebrated, solidifying its enduring significance across different countries and eras.</p>
<p>Considering that the issue under my purview pertains to the realm of fashion, it seemed highly pertinent to draw inspiration from this illustrious journal.</p>
<p>The impetus for the 1930s style emanates from an edition of Vogue released on October 13th, 1930, which is conveniently accessible in the Vogue archive online <a href="https://archive.vogue.com/issues/1930" target="_blank">(https://archive.vogue.com/issues/1930)</a>. Commencing with the presented cover, depicted below:</p> <figure><img src="img/thirties/coverfordocumentation.jpg"></figure> <p>I replicated the page layout by splitting the canvas and implementing a linear gradient on the left segment. Subsequently, I incorporated a stylized full-length depiction of a woman on the left-hand side.</p>
<p>Concerning the fonts, the typeface employed for the titles of my articles ("<i>Monoton regular</i>") mirrors that featured on the cover. I opted not to replicate the chromatic scale of the cover, as, for the design of the remainder of the page, I favored drawing inspiration from the internal contents of the magazine.</p>
<figure><img src="img/thirties/pagesdocumentation2.jpg"><figcaption></figcaption>"Paris draws its own conclusions" by Katharine Johnson</figure>
<figure><img src="img/thirties/pagesdocumentation3.jpg"><figcaption></figcaption>"Rounding the cape" by Beatrice R. Stahl</figure>
<p>As depicted in the reference images above, I have incorporated the internal characteristics of the magazine by arranging the article into two columns and justifying the text. Additionally, a sepia-toned color filter has been applied to the images to evoke a black and white effect. The fonts employed for the remaining text include Josefin Sans, Becker Black, and Semplicita Light.</p>
<p>Regarding the vinyl image, I have chosen a picture inspired by the aesthetic of 1930s newspapers. The selected song is "<i>Parlami d'amore Mariù</i>," written by Ennio Neri and published in 1932.</p>
<p>The color palette that i used con be seen below:</p>
<!-- Coolors Palette Widget -->
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="03884462257879959">new CoolorsPaletteWidget("03884462257879959", ["f0e0cd","d7d4e1","d1c3b1","282424","040404"]); </script>
<h2>References</h2>
<p><a href="https://archive.vogue.com/issues/1930" target="_blank">https://archive.vogue.com/issues/1930</a></p>
<br><br>
<h2>1970 - Disco 45 Magazine</h2>
<p>For the Seventies-inspired style, I was inspired by the layout of the magazine Discco 45.</p>
<figure>
<img src="img/seventies/seventies1.jpg">
</figure>
<p>Disco 45, a monthly music magazine in the United Kingdom that ran from 1970 to 1983, gained prominence for its distinctive focus on printing the lyrics of contemporary pop songs with a vibrant and colorful layout. Published by the Trevor Bolton Partnership in Rye, Sussex, the magazine's inaugural issue in November 1970 showcased Mick Jagger on the cover and featured lyrics from artists like Jimmy Ruffin, Cat Stevens, and Stevie Wonder.</p>
<p>The magazine underwent a transformation, rebranding as Disco 45 Songbook, and concluded its run in July 1983 after producing 153 issues. A notable aspect of Disco 45 was its engagement with readers through small ads, initially focusing on 45 RPM records. </p>
<h3>Typographic style</h3>
<p>For the layout, I drew inspiration from various pages of the magazine, combining the most distinctive elements from each. The fonts used for titles, navbar, and metadata boxes (Tabasco, Stilla Script, Jimi, Boogaloo Avenue NF) were selected from different magazine covers. The CG Times font closely replicates that used for the body of the magazine articles. Opting for two columns instead of three, as seen in many original examples, was a choice driven by considerations of readability and the overall width of the article space within our site's structure. The justified text, font size, and relatively tight line spacing align with the layout choices of the reference.</p>
<p>Vibrant and contrasting background colors were chosen. The article text is framed, echoing the style seen in many magazine texts. Images and tables feature decorated borders and backgrounds with colors contrasting those of the article, mirroring the approach often taken for photographs or special paragraphs in the magazine. Titles and tables are subtly rotated to capture the dynamic layout characteristic of Disco 45 Magazine. The vinyl, in this instance, is directly inspired by the magazine's logo illustration, reminiscent of a 45 RPM record. The music box replicates the distinctive label containing the title on the Disco 45 Album Page.</p>
<figure>
<img src="img/seventies/seventies2.jpg">
</figure>
<figure>
<img src="img/seventies/inspo1.jpg">
</figure>
<figure>
<img src="img/seventies/inspo2.jpg">
</figure>
<figure>
<img src="img/seventies/inspo5.jpg">
</figure>
<p>To top it off, an SVG animation in the top-right corner reflects the striped aesthetic typical of 1970s layouts. The article palette directly mirrors the magazine's most distinctive and vibrant colors, that were extracted with a specific tool directly from the reference images.</p>
<!-- Coolors Palette Widget -->
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="020263069531762434">new CoolorsPaletteWidget("020263069531762434", ["f45683","eca0b5","34ace0","ede34d"]); </script>
<h3>References</h3>
<p><a href="https://djleekee.wordpress.com/2012/09/30/retro-disco-45-magazine/" target="_blank">https://djleekee.wordpress.com/2012/09/30/retro-disco-45-magazine/</a></p>
<p><a href="https://en.wikipedia.org/wiki/Disco_45" target="_blank">https://en.wikipedia.org/wiki/Disco_45</a></p>
<br><br>
<h2>2000 - Geronimo Stilton</h2>
<p>
I've chosen to draw inspiration from children's publishing for the 2000s style. Because I grew up in the 2000s and was a big reader, I vividly remember that some of my favorite books from that period were <a href="https://it.wikipedia.org/wiki/Geronimo_Stilton" target="_blank">Geronimo Stilton</a> books. Geronimo Stilton is a fictional character who is the protagonist of a children's book series written by <a href="https://it.wikipedia.org/wiki/Elisabetta_Dami" target="_blank">Elisabetta Dami</a>. The series, called "Geronimo Stilton," is known for its fun and interactive storytelling style, with colorful text and varying fonts to emphasize certain words or phrases. The series is aimed primarily at a young or very young readership and has gained popularity for its combination of engaging stories and attractive visual elements.
</p>
<figure>
<img src="img/geronimo/doc1ger.jpg">
</figure>
<p>
For the vinyl, I turned it into a delicious cheese round. The accompanying song is the theme song of the Geronimo Stilton cartoon. same for the mouse cursor that becomes a slice of emmental cheese.
</p>
<figure>
<img src="img/geronimo/500.jpeg">
</figure>
<p>
The style of the titles is OpenSans ExtraBold which is taken directly from the covers of the classic book series, as well as the typical bright red color and black shading that creates three-dimensionality.
The font of the text is LifeLTStd-Roman, with a size of 1.8em, to which I added a line spacing of 2.0em to make the width of the text similar to the original books where the spaces are airy and the letters very large, to allow easier reading for younger children.
Paragraph headings also retain the same font. A choice I made based on the classic texts in the Geronimo Stilton series, where the chapters maintain the LifeLTStd-Roman but all in capital letters, so I added an "uppercase."
Of course, the most iconic feature of Geronimo books is the variegated transformation of fonts that adapt to the many words in the text and give them "life" through design and color.
To do this, I operated through spans that were inserted into the htmls of the articles in correspondence with the names of people, places, and keywords.
For the keywords I went even deeper by going to select the ids of each word to align it with one's font style. The selected fonts try to match the word represented as closely as possible. For example: the word "music" is transformed with a font that contains a pentagram with notes while the word "dataset" has a futuristic font reminiscent of Back to the Future and so on.
Here, too, are decorations within the text that refer to the illustrations in the books.
</p>
<figure>
<img src="img/geronimo/400.jpg">
</figure>
<p>
Mapbox map was customized directly by me with mapbox studio. I tried to create a colorful map, reminiscent of the style of book illustrations and reminiscent of giant cheese wheels from a distance. Even the fonts are aligned with this playful and cute style.
</p>
<p>
this is the color palette used:
</p>
<!-- Coolors Palette Widget -->
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="03055426829790837">new CoolorsPaletteWidget("03055426829790837", ["d22300","008e05","0041c4","ffd500","000000"]); </script>
<p>
They recall the main colors of the typical elements of the novels in the series, the yellow of the cheese, the contrasting blue, the red and green of Geronimo's outfit.
</p>
<h2> 2030: Dune aestethic </h2>
<p>As for the futuristic style, I have chosen to draw inspiration from the science fiction series 'Dune,' created by the writer Frank Herbert and adapted over the years for the big screen.</p>
<p>The saga is set in a distant dystopian future on a planet called Arrakis, also known as 'Dune.' This entirely sandy planet is the sole source of the universe's most precious substance, the 'spice': a psychedelic substance resembling a glittering powder found in the sands covering the planet. The spice grants the gift of precognition and enhances mental abilities, enabling the use of machinery for interstellar travel.</p>
<p>I have recreated the desert atmosphere through a specific color palette:</p>
<!-- Coolors Palette Widget -->
<script src="https://coolors.co/palette-widget/widget.js"></script>
<script data-id="0933574483448476">new CoolorsPaletteWidget("0933574483448476", ["ff4d00","f29b04","c28842","695a43","383026"]); </script>
<p>The colors from this palette have been employed in the body and echoed in the animation featured in the footer.</p>
<p>As for the font, I have chosen to use 'Bungee Hairline Regular' because it perfectly recalls the font used in the cinematic product graphics and aligns seamlessly with the futuristic atmosphere.</p>
<figure><img src="img/2030img/Dune Rise Font (FREE).jpg"></figure>
<p>I wanted to create a miniature version of the planet Arrakis to include within the project, and I decided to achieve this by utilizing the mouse cursor that mimics the features of the sandy planet.</p>
<p>As for the vinyl, I have once again chosen to select a reproduction of Dune with sandy tones to further convey a sense of aridity and decadence. The song included in the box is taken from the film's soundtrack, entirely composed by Hans Zimmer.</p>
<figure><img src="img/2030img/bd92aa176964d8ae6baf83caae3c0237.jpg"></figure><figure><img src="img/2030img/eef977f3e5e06eb9fcacba2b1b95a963.jpg"></figure>
</div>
</div>
</div>
</div>
<br>
<footer>
<div class="container-fluid">
<div class="row" id="footer">
<div class="col-md-1"></div>
<div class="col-md-4">
<br>
<p id="text-f">Music and Maps Magazine it's a DHDK project for the exam of Information Modeling and Web Techinologies held by Professor Fabio Vitali.</p>
<a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" target="_blank"><img alt="Licenza Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-nd/3.0/88x31.png"></a>
<br>
<p id="text-f">This work is distributed with the license <a rel="license" href="http://creativecommons.org/licenses/by-nc-nd/3.0/" target="_blank">Creative Commons Attribuzione - Non commerciale - Non opere derivate 3.0 Unported</a>.</p>
<a href="#gifimage"><button type="button" class="btn btn-outline-dark btn-sm" id="bottone">Back to the top</button></a>
<br>
<br>
</div>
<div class="col-md-2"></div>
<div class="col-md-4">
<br>
<h3 class="title-3">Contact</h3>
<p id="text-f"><a href="https://www.unibo.it/it" target="_blank">Alma Mater Studiorum Università di Bologna</a></p>
<p id="text-f"><a href="https://corsi.unibo.it/2cycle/DigitalHumanitiesKnowledge" target="_blank">Digital Humanities and Digital Knowledge</a></p>
<p id="text-f"><a href="https://www.unibo.it/en/teaching/course-unit-catalogue/course-unit/2022/454464" target="_blank">Information Modeling and Web Technologies</a></p>
</div>
<div class="col-md-1"></div>
<p id="text-center-f">© Copyright 2023 Erica Andreose, Gaia Ortona, Chiara Parravicini - IMWT project - DHDK - Alma Mater Studiorum Bologna</p>
</div>
</div>
</footer>
<!-- JS of Bootstrap-->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js"
integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI="
crossorigin="anonymous">
</script>
<script src="bootstrap-5.3.1-dist/js/bootstrap.bundle.min.js"></script>
<script src="rotation.js"></script>
<script src="rotate.js"></script>
<script src="app.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script src="changeStyle.js"></script>
</body>
</html>