-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathdocumentation.html
More file actions
191 lines (191 loc) · 16.5 KB
/
documentation.html
File metadata and controls
191 lines (191 loc) · 16.5 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
<!DOCTYPE html>
<html lang="en" data-bs-theme="dark">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Documentation</title>
<link href="newstyle.css" rel="stylesheet" />
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH" crossorigin="anonymous">
</head>
<body>
<nav class="navbar navbar-expand-lg">
<div class="container-fluid">
<a class="navbar-brand" href="index.html"><img src="img/templogo.png" alt="Bootstrap" width="30" height="24"></a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNavAltMarkup" aria-controls="navbarNavAltMarkup" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<ul class="navbar-nav me-auto mb-2 mb-lg-0 h5">
<li>
<a class="nav-link" href="index.html">Home</a>
</li>
<li class="nav-item dropdown">
<a class="nav-link dropdown-toggle" href="#" role="button" data-bs-toggle="dropdown" aria-expanded="false">Exhibitions</a>
<ul class="dropdown-menu">
<li><a class="dropdown-item" href="exhibition.html">Code Chronicles</a></li>
</ul>
</li>
<li>
<a class="nav-link" href="itemvisualisation.html">Item visualisation</a>
</li>
<li>
<a class="nav-link" href="about.html">Team</a>
</li>
<li>
<a class="nav-link active" href="documentation.html">Documentation</a>
</li>
<li>
<a class="nav-link" href="disclaimer.html">Disclaimer</a>
</li>
</ul>
</div>
</div>
</nav>
<main>
<div class="container-documentation card text-bg-light">
<div class="row">
<div class="col-sm-12 col-md-4 col-lg-3 col-xl-2">
<nav id="documentation-navbar" class="h-100 flex-column align-items-stretch pe-4 border-end">
<nav class="nav nav-pills flex-column">
<a class="nav-link scroll-nav-link" href="#item1">1 - Project description</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item1-1">Idea</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item1-2">Responsibilities</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item1-3">Narratives</a>
</nav>
<a class="nav-link scroll-nav-link" href="#item2">2 - Design specification</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item2-1">Color scheme</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item2-2">Color usage</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item2-3">Typography</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item2-4">Layout principles</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item2-5">Technical choices</a>
</nav>
<a class="nav-link scroll-nav-link" href="#item3">3 - Page layouts</a>
<nav class="nav nav-pills flex-column">
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item3-1">Home page</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item3-2">Exhibition page</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item3-3">Item visualisation</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item3-4">Team</a>
<a class="nav-link scroll-nav-link ms-3 my-1" href="#item3-5">Disclaimer</a>
</nav>
</nav>
</nav>
</div>
<div class="col-sm-12 col-md-8 col-lg-9 col-xl-10">
<div data-bs-spy="scroll" data-bs-target="documentation-navbar" data-bs-smooth-scroll="true" class="scrollspy" tabindex="0">
<div id="item1">
<h3>1 - Project description</h3>
</div>
<div id="item1-1">
<h3>1.1 - Idea</h3>
<p>We were presented with a task to create a virtual representation of a museum tour in form of a web page. We thus decided to create our tour on the basis of programmable machines.</p>
<p>While in the modern age the natural thought would be to think, that this would mean a collection of electronic general purpose computers, in fact, the collection would go back to programmable automatons of the Medieval era.</p>
<p>One of the main points of the projects are the narratives, structuring a hypothetical virtual tour.</p>
</div>
<div id="item1-2">
<h3>1.2 - Responsibilities</h3>
<p><b>Alisa Antonova</b> - </p>
<p><b>Elena Binotti</b> - </p>
<p><b>Hubert Krzywonos</b> - Design and implementation of the item visualisation page</p>
</div>
<div id="item1-3">
<h3>1.3 - Narratives</h3>
<p>The implemented narratives are:
<ul>
<li>Temporal - A big-tent of a narrative that includes all items ordered by the date of construction, to simulate a thorough museum visit.</li>
<li>Power type - Mechanical, Electromechanical, Electronic</li>
</ul>
</p>
</div>
<div id="item2">
<h3>2 - Design specification</h3>
</div>
<div id="item2-1">
<h4>2.1 - Colour scheme</h4>
<p>The palette of our website can be categorised into three different groups:
<ul>
<li>Whites and light-grays - #ffffff, #f8f9fa, #eeeeee, #dee2e6</li>
<li>Blacks and dark-grays - #333333, #222528, #000000</li>
<li>Reds and pinks - #842029, #ff0000, #e685b5</li>
</ul>
</p>
</div>
<div id="item2-2">
<h4>2.2 - Colour usage</h4>
<p>For the navbar and the background of the main content, colours from the whites/light-grays category have been chosen. Some of the reasons for this selection include: providing contrast for the main content part of the website in relation to the dark background; providing contrast to the black text (in case of the main part of the webpage), or dark red text (in case of the navbar) for readability reasons.</p>
<p>For the main blocks of text, black has been used, to provide the maximal contrast possible to the background.</p>
<p>The general background of the page utilises a colour from the Bootstrap dark palette. It is not a neutral gray, as it is slightly tinted with teal (#222528).</p>
<p>For the borders/visual breakers inside of the content, we utilised #333333 to provide a slightly different, and neutral tone of gray.</p>
<p>Use of reds as tertiary colours used to provide additional differentiation for navbar text and buttons stems directly from the aforementioned dark Bootstrap theme background colour. While the maximum contrast for that colour would necessitate usage of oranges, we preferred to utilise red, as it is a primary colour, at least partially to follow the modern design trends.</p>
</div>
<div id="item2-3">
<h4>2.3 - Typography</h4>
<p>Two fonts used for the projects are part of the same font family, Lato.</p>
<p>For regular text, the font used is Lato Regular. Using a sans-serif font was warranted by ease of reading.</p>
<p>For emphasized text (headings and navbar), we used Lato Black. Being generally thicker, this choice leads to a visual distinction of the elements we want to emphasize.</p>
</div>
<div id="item2-4">
<h4>2.4 - Layout principles</h4>
<p>We managed to maintain general consistency in style, with the notable exception for team and disclaimer pages, where the main container is positioned more to the bottom of the page than on the rest of sites. This stylistic consistency is a manner of maintaining a visual cohesion of the entire website, allows for more efficient development through reusing of elements, and leads to a streamlines user experience.</p>
<p>The main content of each page is contained within a Bootstrap card. The reason is the visual separation and thus, emphatisation of the page content. Additionally, this also allowed us to use a separate page background, which also has a detailing role, providing depth to an otherwise flat style.</p>
<p>Finally, our layout mainly consists of using a navbar for the entire page, with a card/container being the holder of the content. In case of item visualisation (which can be considered the central point of the project), this card is then split into columns using Bootstrap's grid system, to ensure a design that is adaptable for different screen sizes.</p>
</div>
<div id="item2-5">
<h4>2.5 - Technical choices</h4>
<p>The technical backbone, as for all websites, is the trio of HTML/CSS/JavaScript.</p>
<p>We've heavily utilised Bootstrap to provide reusable styling options, as well as give the website a modern feel.</p>
<p>For data, we've utilised JSON. The reasons for this include, but are not limited to: being an open standard file format, being lightweight, and JavaScript having native functions to parse JSON data into objects.</p>
</div>
<div id="item3">
<h3>3 - Page layouts</h3>
</div>
<div id="item3-1">
<h4>3.1 - Home page</h4>
<p>blablabla</p>
<p>blablablablablablablablabla</p>
<p>bla</p>
<p>blablablabla</p>
</div>
<div id="item3-2">
<h4>3.2 - Exhibition page</h4>
<p>blablabla</p>
<p>blablablablablablablablabla</p>
<p>bla</p>
<p>blablablabla</p>
</div>
<div id="item3-3">
<h4>3.3 - Item visualisation</h4>
<img src="img/docu/itemvis.png" style="height: 97%; width: 97%">
<p><b>Navbar</b> - Same as on other pages, it is kept visually moderate to avoid drawing attention away from the content of the page. Dark red text is also visually distinct from the regular, black text used for content text.</p>
<p><b>Body</b> - Same as on other pages, the body itself is used to provide a background, used to differentiate the navbar and the card with the main content, as well as provide a bit of depth by use of visual details.</p>
<p><b>Card</b> - could be described as divided into three visually separate parts:</p>
<p><ul>
<li><b>Top left</b> - holds the narrative navigation buttons, as well as the label displaying the name of the item currently displayed and the currently selected narrative. On larger screens, this is a single row with columns of proportions 1:2:1, on smaller screens, it is three rows instead. This part also holds the table containing information about the museal objects, such as provenance, date of creation and type of device.</li>
<li><b>Top right</b> - holds the image of the museal object currently displayed by the item visualisation page.</li>
<li><b>Bottom</b> - can be described as divided into three different parts. The first two have visual breakers in form of a line, and contain textual information about the object, and buttons to display shorter/longer information about it, respectively. The fourth part is by default not displayed, and contains a separate HTML file, representing the exhaustive version of textual information about the object.</li>
</ul></p>
</div>
<div id="item3-4">
<h4>3.4 - Team page</h4>
<img src="img/docu/team.png" style="height: 97%; width: 97%">
<p><b>Navbar</b> - Same as on other pages, it is kept visually moderate to avoid drawing attention away from the content of the page. Dark red text is also visually distinct from the regular, black text used for content text.</p>
<p><b>Body</b> - Same as on other pages, the body itself is used to provide a background, used to differentiate the navbar and the card with the main content, as well as provide a bit of depth by use of visual details.</p>
<p><b>Card</b> - Almost identical to the disclaimer page, it is divided into three columns to hold images representing the three team members working on the project. The card on this page has additional margin added up top for centering on smaller screen sizes, as well as shortening the visual emptiness towards the bottom of the page.</p>
</div>
<div id="item3-5">
<h4>3.5 - Disclaimer page</h4>
<img src="img/docu/disclaimer.png" style="height: 97%; width: 97%">
<p><b>Navbar</b> - Same as on other pages, it is kept visually moderate to avoid drawing attention away from the content of the page. Dark red text is also visually distinct from the regular, black text used for content text.</p>
<p><b>Body</b> - Same as on other pages, the body itself is used to provide a background, used to differentiate the navbar and the card with the main content, as well as provide a bit of depth by use of visual details.</p>
<p><b>Card</b> - Almost identical to the team page, it holds the basic information regarding the project. The card on this page has additional margin added up top for centering on smaller screen sizes, as well as shortening the visual emptiness towards the bottom of the page.</p>
</div>
</div>
</div>
</div>
</div>
</main>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz" crossorigin="anonymous"></script>
</body>
</html>