-
Notifications
You must be signed in to change notification settings - Fork 3
/
about-proj.html
141 lines (130 loc) · 8.95 KB
/
about-proj.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
<html lang="en">
<head>
<link rel="icon" href="https://learredhdk.github.io/typolab/images/logo.png" type="image/x-icon"/>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<link type="text/css" rel="stylesheet" href="https://learredhdk.github.io/typolab/css/style.css">
<title>About the project - TYPOlab</title>
</head>
<body>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<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://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>
<script>
$(function(){
var inputs = $('.input');
var paras = $('.description-flex-container').find('p');
$(inputs).click(function(){
var t = $(this),
ind = t.index(),
matchedPara = $(paras).eq(ind);
$(t).add(matchedPara).addClass('active');
$(inputs).not(t).add($(paras).not(matchedPara)).removeClass('active');
});
});
</script>
<!--navbar-->
<nav class="navbar sticky-top navbar-expand-lg navbar-light bg-light ">
<a class="navbar-brand" href="index.html">
<img src="https://learredhdk.github.io/typolab/images/brand.png" width="80" height="30" alt="logo">
</a>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav">
<a class="nav-item nav-link active" href="about-proj.html">About the project <span class="sr-only">(current)</span></a>
<a class="nav-item nav-link" href="typo-lab.html">Lab</a>
<a class="nav-item nav-link" href="documentation.html">Documentation</a>
<a class="nav-item nav-link" href="disclaimer.html">Disclaimer</a>
<!--<a class="nav-item nav-link" href="process.html">Process</a>-->
<a class="nav-item nav-link" href="about-us.html">About us</a>
</div>
</div>
</nav>
<section id="about-proj">
<div id="write-proj">
<h2>The project</h2>
<p>The TYPOlab project was developed for the <a href="https://www.unibo.it/it/didattica/insegnamenti/insegnamento/2017/424627">"Information Modeling and Web Technologies"</a> course of the Master Degree in <a href="https://corsi.unibo.it/2cycle/DigitalHumanitiesKnowledge">Digital Humanities and Digital Knowledge of the University of Bologna.</a></p>
<p>The purpose of the project was the creation of six typographic themes that are immediately linkable to the style of a document in a specific historical period.</p>
<p>The first step was the choice of the reference period and the following research which enabled us to find and observe the documents of that time, to manage to capture the style, the colors, the dimensions. Once obtained the necessary information, we tried to recreate the typographic styles using the CSS.</p>
<p>We applied the resulting themes on six documents of different lengths and nature; nonetheless, the peculiarity of these themes is their ability to fit every HTML document, provided that it is written using generic tags. Our CSS files very often employ selectors and pseudo-classes which enable the reproduction of the themes even on documents which they were not designed for.</p>
<h2 style="margin-top: 60px;">Our themes</h2>
<p>Clicking on the dates on the timeline below, it is possible to visualize a description of the related theme and at the same time also see its geographic provenance on the map.</p>
</div>
<!--timeline-->
<div class="flex-parent">
<div class="input-flex-container">
<input type="radio" name="timeline-dot" data-description="1500" checked>
<div class="dot-info" data-description="1500">
<span class="year">1500</span>
<span class="label">Aldo Manuzio</span>
</div>
<input type="radio" name="timeline-dot" data-description="1800">
<div class="dot-info" data-description="1800">
<span class="year">1800</span>
<span class="label">XIX Century Newspapers</span>
</div>
<input type="radio" name="timeline-dot" data-description="1920">
<div class="dot-info" data-description="1920">
<span class="year">1920</span>
<span class="label">Bauhaus</span>
</div>
<input type="radio" name="timeline-dot" data-description="1960">
<div class="dot-info" data-description="1960">
<span class="year">1960</span>
<span class="label">African Indipendence</span>
</div>
<input type="radio" name="timeline-dot" data-description="1990">
<div class="dot-info" data-description="1990">
<span class="year">1990</span>
<span class="label">Prehistoric Web</span>
</div>
<input type="radio" name="timeline-dot" data-description="2030">
<div class="dot-info" data-description="2030">
<span class="year">2030</span>
<span class="label">Holographic Escape</span>
</div>
<div id="timeline-descriptions-wrapper">
<div data-description="1500">
<p>This theme tries to reproduce the so called “edizioni aldine”, the books printed by Aldo Manuzio, one of the major publishers of all time and one of the first modern publishers in Europe.</p>
<p>Place: Venice, Italy</p>
<img src="https://learredhdk.github.io/typolab/images/italia.jpg">
</div>
<div data-description="1800">
<p>This theme is inspired by the newspapers of this epoch which was greatly influenced by the automatic creation of paper at low cost since we had the second industrial revolution. Due to this, there was also a massive growth in overall circulation as major events and improved communications developed the public's need for information with literacy rising sharply. This favored the outburst of many newspapers such as The Times, The Courier and The Daily just to name a few.</p>
<p>Place: England and America</p>
<img src="https://learredhdk.github.io/typolab/images/usa-uk.jpeg">
</div>
<div data-description="1920">
<p>A theme inspired by the design of Bauhaus school, founded in Weimar in 1919 and active until 1933, in particular according to the vision of László Moholy-Nagy, one of its most important teachers.</p>
<p>Place: Germany</p>
<img src="https://learredhdk.github.io/typolab/images/germania.jpeg">
</div>
<div data-description="1960">
<!--<img src="https://learredhdk.github.io/typolab/images/africa.png">-->
<p>The second half of the 20h century marked a new beginning for the African continent and most especially for the countries which moved from the status of colonised countries to independent ones. This trend was celebrated by the people through the creation of Commemorative Textile African Type which inspired creation of this theme.</p>
<p>Place: Africa</p>
<img src="https://learredhdk.github.io/typolab/images/africa.jpeg">
</div>
<div data-description="1990">
<p>We recreated the look of the first websites, those of the 1990s, which were pure experimentation of a totally new world. The elements present in these "prehistoric" sites are what is most far from the concept of the web that we have today.</p>
<p>Place: USA</p>
<img src="https://learredhdk.github.io/typolab/images/usa.jpeg">
</div>
<div data-description="2030">
<p>Set in a dystopic megacity of 2030s, the theme recreates the holographic projection of a minimal typographic style. This is enriched by natural elements from the forest landscape, in the attempt to offer to the future's reader a quiet shelter from the surrounding environment.</p>
<p>Place: China</p>
<img src="https://learredhdk.github.io/typolab/images/cina.jpeg">
</div>
</div>
</div>
</div>
</section>
<!--footer-->
<footer>
<p>© 2020 Rebecca Del Bene, Leticia Hamvegam and Arianna Pizzicori. All rights reserved.</p>
</footer>
</body>
</html>