-
Notifications
You must be signed in to change notification settings - Fork 2
Expand file tree
/
Copy pathdocumentation.html
More file actions
139 lines (138 loc) · 11.6 KB
/
Copy pathdocumentation.html
File metadata and controls
139 lines (138 loc) · 11.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
<!DOCTYPE html>
<html>
<head>
<title>Cool down!</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="shortcut icon" href="https://img.icons8.com/external-bluetone-bomsymbols-/91/000000/external-cool-green-energy-ecology-bluetone-bluetone-bomsymbols-.png">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link rel="stylesheet" id="CSS" type="text/css">
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.14.7/dist/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@4.3.1/dist/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script src="scripts/script.js"></script>
<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<a class="navbar-brand" id="brand" href="index.html">Cool down!</a>
<button class="navbar-toggler navbar-dark" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="dropdown">
<button class="btn btn-outline-* dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Articles
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton" id="dropdownMenu">
</div>
</li>
<li class="nav-item">
<a class="nav-link active" href="#">Documentation</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">About</a>
</li>
</ul>
</div>
</nav>
<div class="secondaryPages">
<h1>Introduction</h1>
<p><q>Cool Down!</q> is an online magazine focused on environmental problems. In this website are published articles that deal with climate change problems, with the purpose of analyze them, inform people and propose solutions.</p>
<h1>The website</h1>
<p>The infrastructure is thought in order to let the user choose and read the articles that are published on the magazine, with some addictional tools. In particular, the website is organized as follows:
<ul>
<li>The navbar offers the possibility to choose one of the articles already published, to access the page that contains the documentation and the "about" page with the disclaimer, and to come back to the cover page.</li>
<li>It will be always visible a section intented to show the text of the chosen article</li>
<li>A section will provide the metadata of the specific article that is visualized at the moment, with some additional tools and forms for the user in order to personalize it. In details:
<ul>
<li>A search box allows to find and add personal keywords: those will be shown in the accordion and can be removed with the button "clear all" at the end of the section.</li>
<li>An accordion contains the info related to the article, the keywords added by the user, the people, organizations, places, events and references cited in the article. An additional form allows to show the occurrences of each one in the text.</li>
</ul>
</li>
<li>A floating action button (FAB) on the left-bottom corner of the screen allows to change the theme of the page according to two historical periods: 1910s and 2000s.
</li>
<li>There is a list of buttons with the links to the articles.</li>
</ul>
<h1>The themes</h1>
<h2>1910s</h2>
<p>This theme is largely inspired by the Futurism, but since it reflects the spirit of an historical period, there are also influences from the Dadaism and other minor movements, in order to reflect the spirit of the time.</p>
<h3>Typography</h3>
<p>The fonts are: Kanit, Poppins and Roboto Condensed. Those are all sans-serif since this was the font-style adopted after the World War I to manifest a new objectivity and a new internationalism.</p>
<p>In the spirit of cubism, the h3 elements show a variation in the type size while the quotations break the horizontal nature of horizontal type, giving also some dinamicity to the text.</p>
<p>Uppercases in titles and bold style improve the clearness and semplicity of the text, according to the futuristic and dadaistic statements.</p>
<h3>Layout</h3>
<h4>Page layout</h4>
<p>The body has a margin proportion of 1:1:2:3 according to the Tschichold's method. All the other proportions are approximations of the goledden ratio, most of the time in percentages: 1:2 (50% - 100%), 2:3 (66,7% - 100%) , 5:8 (62,5% - 100%), 5:9 (55,5% - 100%).</p>
<h4>Deconstruction of the space</h4>
<p>Trinagles and rectangles are present in different places (for example as the background of the main section or in the metadata labels) representing the deconstruction of the space giving dinamic trajectories. One of the attempts of the art movements in the early XXth century was to introduce the fourth dimension, i.e. time, that in the website is represented by the movements of little airplanes while hoovering the article's buttons.</p>
<h4>Colors</h4>
<p>The main colors are green and orange, with an additional light yellow that tries to emulate the old heavy paper used for printings at that time. The colors are taken from existent magazines and books of the time.
<ul>
<li>Orange (#e69737): it is taken from the Zang Tumb Tumb (1914) by Filippo Tommaso Marinetti:
<figure>
<img src="images/futurismo.png" alt="Zang Tumb Tumb (1914) by Filippo Tommaso Marinetti">
<figcaption>Zang Tumb Tumb (1914) by Filippo Tommaso Marinetti</figcaption>
</figure></li>
<li>Green (#384f49): it emulates the contrast between the same orange and this green in another publication that has Marinetti as author, "Parole in libertà"
<figure>
<img src="images/ParoleInLibertà.jpg" alt="Parole in libertà by Filippo Tommaso Marinetti">
<figcaption>Parole in libertà by Filippo Tommaso Marinetti</figcaption>
</figure>
</li>
</ul>
</p>
<h2>2000s</h2>
<p>The second theme of the website represents the print magazines of the 2000s.</p>
<h3>Typography</h3>
<p>The fonts are: Helvetica and Times New Roman. Both of them are used as standards both in typography and in the digital environment since the second half of the XXth century, for their readability and clearness.</p>
<p>The initial letter of each article (and of the intro) is emphasized with an increase of the font and the use of a different color.</p>
<p>The headers of first level are completely uppercase and present a line separator at the bottom, in order to make it clear and readable.</p>
<p>When present, quotations that are hierarchically siblings of the paragraphs are shown in uppercase and visually separated.</p>
<p>The captions of the images are visualized in a smaller font and in italics, as conventional in most of the magazines.</p>
<p>All the typographical choices follows the principles of clearness but also complementarity of the first decade of the XXIst century, underlying the elements that are of preminent importance (titles, for example) and giving less visual importance to secondary elements (captions for example), always assuring to make all the elements easily readable.</p>
<h3>Layout</h3>
<h4>Page layout</h4>
<p>The page is divided in boxes according to the grid system. It is a swiss system born after the World War II in order to give more objectivity to the distribution of elements on the page, by means of mathematical methods. In this website the body is divided in two blocks, one for the text and the other for metadata. The first box occupies 3/4 of the space, that is 3 out of the four columns in which we have ideally divided it. The aside has a background color that aims at underlying this division.</p>
<p>Here is an example of grid system from which we took inspirration:
<figure>
<img src="images/GridSystem.jpg" alt="examples of pages divided according to the swiss grid system">
<figcaption>Examples of swiss grids</figcaption>
</figure>
</p>
<p>The margin is the same on all the sides, according to the historical time.</p>
<p>The latest articles's list is not shown in this theme for reason of clearness. An approach of minimalism is more indicated for this historical period, marking the difference between this one and the 1910s, where according to the cubism and the new concept of time, the designer tried to shown multiple aspects on the same surface at the same moment. There is not a loss of functionalities since the same list is available from the navbar.</br>
The articles'list is always available in the display for small screen since each box will cover the entire width of the screen, and elements will be aligned vertically in different rows, so there is no need to hide it.
</p>
<h4>Colors</h4>
<p>Since the effect that we wanted to reproduce was of complementarity of the parts, the colors themselves are complementary: the blue and the orange. Those were also popular in some publications of the times, and the famous journl <q>The Guardian</q> uses a blue background for the header with yellow or orange details yet.</p>
<h2>References</h2>
<ul>
<li><a href="http://guity-novin.blogspot.com/2012/04/modern-newspaper-magazine-layouts.html">http://guity-novin.blogspot.com/2012/04/modern-newspaper-magazine-layouts.html</a></li>
<li><a href="https://guity-novin.blogspot.com/2019/02/chapter-42-swiss-grid-system-and-dutch.html">https://guity-novin.blogspot.com/2019/02/chapter-42-swiss-grid-system-and-dutch.html</a></li>
<li><a href="http://guity-novin.blogspot.com/2011/08/chapter-44-italian-futurist-visual.html">http://guity-novin.blogspot.com/2011/08/chapter-44-italian-futurist-visual.html</a></li>
<li><a href="https://www.pixartprinting.co.uk/blog/futurism-book-objects/">https://www.pixartprinting.co.uk/blog/futurism-book-objects/</a></li>
<li><a href="https://skylum.com/it/how-to/how-to-make-photo-look-vintage">https://skylum.com/it/how-to/how-to-make-photo-look-vintage</a></li>
</ul>
</div>
<footer>
<div class="fab-container">
<button class="fab-button" id="year2022" onclick="changeStyleSheet(this)">
<i class="fas fa-fan"></i>
</button>
<button class="fab-button" id="year1910" onclick="changeStyleSheet(this)">
<i class="fas fa-stream"></i>
</button>
<div class="fab-button" title="Change theme">
<i class="fas fa-paint-roller"></i>
</div>
</div>
<p>A project for the course "Information Modelling and Web Technologies"</p>
<p>MA "Digital Humanities and Digital Knowledge, University of Bologna</p>
<p>Powered by Bootstrap</p>
<p>© 2022 Copyright: Cool Down!</p>
</footer>
</body>
</html>