The LLLL framework

The purpose of this website is to display three articles belonging to the same theme/main topic. The two main scopes of the site are the following: 1) displaying articles of a certain issue with different styles and layouts each heavily influenced by real typographic movements, and 2) performing cross analysis of textual metadata. The general idea behind the site is to filter the articles according to our needs and desires, in the same way we usually exploit optical glasses.

The articles and the typographical styles

In order to achieve these two results, Ajax has been implemented. We created a main Ajax structure using jQuery that automatically and dynamically creates paths for the available issues, placing them in the homepage in which the user can start the navigation. Inside each issue the user can decide to read and to scroll independently each article. Depending on the number of articles displayed at the same time(with a maximum of three per issue), the main container changes size accordingly (always allowing for independent scrolling). This has been achieved by using Twitter Bootstrap classes to create a rows-columns layout; for instance, the articles are contained in different columns, namely col-4 if there are three, col-6 if there are two and a single col-12 if there is only one.

A proper script has been created for dynamically switch between six (with an additional bonus) typographical stiles (see next section) without ever reloading the page. All the .css files are loaded in the page but by default they are deactivated. When the user click on an icon representing a typographical style, the script automatically deactivate the main .css and activate the related typographical .css.

The metadata

Metadata are also display automatically with jQuery. In the same .json file there are various metadata that we believe are interesting for the readers, and the script is able to retrieve them and put them in their relative position. Then it is also possible to retrieve and display metadata information regarding the actual text of the articles. By clicking on different checkbox on the left sidebar, users can retrieve information from the text, for instance asking the system who has been mentioned in the article. For doing so, a mix of JavaScript and HTML markup has been implemented. The whole application has been created in such a way that it is possible to add issues and/or articles in a fast and dynamic way, simply by chaging the json files and putting the related html files.

Experimental analysis

Additional, some specific form of textual analysis for the articles was developed. This account to a single Python script that is able to automatically strip a webpage of all its markup and to perform some very basic sentimental analysis on it. In order to do so, the nltk library was mostly used to tokenize the text and to retrieve the most common words in the text. Finally, the script is able to give to each article a sentimental score divide in three categories: a positive one, a neutral one and a negative one. If you are brave enough, you can browse the Python code on this Colab file.

For sake of simplicity, and since we do not have priori knowledge of server-based application, the script was run locally and the results stored in .json files which are loaded similarly to the articles metadata.

The Articles Markup

The articles are marked up according to the specific requirements of our project work. In a firs phase, we added the basic markup structure (division into paragraphs, sections such as titles, subtitles and more). To this division we added those elements that would serve as the bone structure for the design of the typographic styles. We applied a division, for instance, between the “article head”, composed of the title and subtitle, author, date and eventually a cover image, and the “article body”, where the rest of the article text and subsections can be found. Moreover, we used the attribute class to mark up some elements which would require some particular focus in the design process. For example, the class “drop-cap” was useful in the creation of the 90s style.

In a second phase, we added some “semantic” markup, that is fundamental for the implementation of some features such as the metadata function described above. Thanks to the attribute “about”, we were able to extract metadata from the articles. The metadata markup bit is crucially important. We decided to identify five classes of interest:

1. Companies and Institutions: this class includes universities, research centers, brands, firms, companies and was identified in the markup with the class “company”.
2. People: this class includes every personal name, the markup used is class “pers”.
3. Places, the class value is “pl”.
4. Dates, with the class value “date”.
5. Keywords: these are the words that are deemed the best at representing the theme of the issue and of the article, they were marked with the class “key”

The attribute about, instead, was used to specify the specific entity. So, for example if we find the name “Elon Musk”, we will assign the class “pers”, while the attribute about will have value “Elon Musk”. These two attributes combined allowed a smooth and precise retrieval of metadata.

Finally, thanks to the assignment of a unique id to the “h” (h2 and h3 elements) elements, we were able to implement the subtitle finder tool, which allows to retrieve the sectioning of each article and redirect the user to one desired section inside the text.

The themes

1300 - The Illuminated manuscript era

Background

The Middle Age, often mistakenly thought of as a dark, uncultured age, saw the diffusion of a peculiar way of disseminating culture: the handwritten copying of texts. During this time, inside the lively context of convents and universities, copyists were busy preserving the cultural heritage of ancient civilisations (many texts from Greek and Roman philosophers survived to these days thanks to these people) and passing down important religious texts.

Alongside the mission of preserving and transmitting culture, the period saw the birth of the art of illuminated manuscripts: handwritten books that have been decorated (illuminated) with gold, silver, or brilliant colours. Illuminations may include small illustrations (called miniatures), initials, borders, or other decorative elements. They were used to indicate divisions in a text, to tell stories, and to add beauty and visually memorable elements to texts. Manuscript illumination reached its high point in medieval Europe, when illuminators, working within workshops called scriptoria, produced illuminated psalters, Bibles, liturgical texts, illustrated saints’ lives, and other works.

The page layout is not strictly defined by any decisive rule, although some frequent characteristics can be spotted. It is possible to find text divided into 2 justified columns, unjustified text on just one column, and all the variants in between. Occasionally, the text is interrupted by an image, most often the picture occupies the whole width of the page, but again, it is possible to find embedded images that are surrounded by the text. It is nonetheless possible to define some communalities, the first being the decorations to the first letters (first letter of the page, of the paragraph, just of the title). The use of colours is another most decisive communality among the various codices: while the text is almost always of neutral colours (black, brownish), the titles, subtitles, decorated letters and frames are always of bright, deep, vibrant colours. Also, illuminations are sometimes used to divide the text, to visually signal the end and the beginning of a certain block of text. Finally, most of the manuscripts taken into consideration made use of parchment as their material support. A very few illuminated fragments survive on papyrus, which is less durable than parchment. The parchment used for illuminated manuscripts is a high-quality parchment, called vellum.

The layout

Taking into consideration the abyss that separates the two media type, the webpage layout has been thought to resemble an illuminated manuscript as closely as possible.

A parchment-looking background has been chosen to recreate the manuscripts material support. This background needed nonetheless to be adaptable to the features of a webpage: while old parchment often presents stains and wrecked borders, our chosen background should not exceed in those features in order to grant readability and repeatability (the image is often repeated two to three times to fit in the screen, so very noticeable stains would have hindered the seamless perception of the page).

For what concerns the text, the article was divided into two columns, while the text from the front page remained on one column. This is due to the aforementioned variation in text layout and pagination observed in medieval manuscripts. The choice of separating the articles’ texts in two columns is also advantageous for avoiding over-repeating the background image, and thus creating a more eye-pleasing view. Paragraph’s first letters and titles use a distinguishable font variation, in order to visually respect the decorations on letters typical of the period. Also, the use of colours (specifically a deep red and a vivacious blue) have been used for titles and subtitles. These colours have been directly picked from some instances of real manuscripts via a very handy browser extension called Color-Picker, which allows to define the exact RBG values of a specific isolated pixel in an image.

Now, for what concerns the insertion of some more “advanced” illuminations, we opted for an image, directly taken from instances of real illuminations, that has been inserted alongside the articles, but outside their actual box. Both on the front page and on the articles page, we inserted two images on the side (left side for the articles, both sided for the main page) of the text-containing boxes. The illuminations chosen contain two distinct aspects of the medieval illumination art: animals and floral plots, alongside the common feature of being extremely original and very colourful.

The colours

The colours are a fundamental part of a medieval illuminated manuscript. Trying to be as mindful of that as possible, we nonetheless isolated here the three predominant colours used to render the textual part of the webpage, also including the parchment tone we researched for the background image. For the illuminations, please refer to the pictured of manuscripts reported below.

Sources

In this section, it is possible to identify the different layout and styles of the period and also to appreciate the wide use of colours, alongside the variety of themes used in the miniatures.

1800 - The Victorian Age

Background

The reign of queen Victoria spanned through almost the entirety of the 19th century; indeed the young monarch ascended the throne 1837 at the age of 19 and died in 1901. Her sovereignty lasted for over 60 years, making it the longer reign up until that time. Even though the title for most enduring reign has been equalled by the current monarch, Elizabeth I, the Victorian era will always be remembered as a period of unprecedented wealth and power for the United Kingdom. In fact, the reign of Queen Victoria was characterized by political stability, and revolutionary developments in transport and communication.

During the Victorian age we witness the industrialization of printing, thanks to the invention of the steam press: this innovation profoundly influenced the production and distribution of newspapers in Great Britain. As a matter of fact, accomplice the significant reduction of the stamp tax (from four pence to one penny) in 1836 alongside the mentioned technological developments of those years, the circulation of newspaper in the nineteenth century was deeply affected, reaching an amount of prints such as to inaugurate the very notion of mass media.

It is important to point out that it was in this period that newspapers began to experience a higher degree of freedom of the press; therefore, periodicals can be considered as both a precious record of historical, economic and political matters but also as a reflection of the Victorian dynamic cultural and society.

Many flagship periodicals that were born in this period are still being published today: e.g., The Daily Telegraph was first published in 1855 and the Daily Mail, born in 1896.

The layout

For the parchment we decided to opt for this grainy off-white paper. In fact, even though in the beginning of the century in question the papers were generally yellowish due to the “hard water” procedure, by the time Queen Victoria came to the throne progresses had already been made in this sense: ground lime which contains calcium carbonate was used to cleanse the fibers during the beating process resulting in off-white papers.

The main title should stand out and catch the reader’s eye. We decided to use cloister, an elaborated serif typeface with ornate borders that is part of the “old-style” typefaces designed by American typeface designer Morris Fuller Benton. Even though the publication date of cloister is subsequent to the XIX century we believe it is a good fit for the Victorian style, as a matter of fact, the resemblance with newspaper fonts of the time is quite striking.

The subtitle is always in uppercase, and the font used is Clarendon: a slab-serif typeface released by a type foundry called Fann Street Foundry in 1845. The slab-serif typefaces appeared in the XIX century and are characterized by thick, blocky serifs and a uniform stroke that helps making the printing process faster. The slab serif fonts are used to catch the reader’s attention or increase legibility in small characters.

The date and the author of the article (also in Clarendon) are located, ideally, right under the main title and they are contained inside a div with a special class that has a top and bottom border of 2px each. Secondary titles (e.g., h3, h4 and so on) are also in Clarendon; they have a solid border of 2px top and 2px bottom; moreover, after every secondary title the first letter of the first paragraph showcases font variations (drop-cap) as it was in use in the XIX century.

The paragraphs are in Bodoni Moda: this specific font is a variation of Bodoni, the serif typefaces first designed by Giambattista Bodoni in the late XVIII century that was still widely used in the XIX century.

The body of the articles is divided into four columns to give the idea of a Victorian newspaper. Whereas, for the main page we decided to stick with one column, thus it allowed us to preserve readability in one of the most important pages of our website. Furthermore, for the main page side columns we decided to showcase another feature of Victorian newspapers: advertisement. Indeed, during the 19th century newspapers increasingly made their profit from selling advertising that publicized mainly health remedies, food and beverages. We used a Coca Cola advertisement which is a fascinating example from the end of the century of what was called chromolithography, a cheap method for printing in colour that was actually invented in the XIX century.

The colours

For what concerns the 19th century Victorian newspapers the colours are quite limited, the text is in black (#000000) and for the background we decided to use a off-white colour: platinum(#E4E3E1) to recreate what a piece of paper would look like at the time.

Sources

For the 90s-early 2000s style our main inspiration was the american monthly magazine Vogue from which we took some representatives articles from the issues of October 1996, June 1998 and January 2002.

2030 – The future now

Background

The current year is 2030. The COVID-19 pandemics is just a bad memory in everybody's mind. Despite many political and societal changes during the last decade, humans are still heavily affecting ecologicy of planet Earth by continuosly relying on carbon fossil; an effective green revolution has not yet happened despite many technological breakthorughts. Statal entities like national governments are slowly but certainly declining due to the impact of disrputive advances in the blockchain technologies that allow citizen to exchange money and stipulating contracts without third parties’ approval. Asian countries are now leaders in most of the pivotal fields of currently economy and Chinese is becoming the first spoken language for business and scientific research. Aside for that, the everyday life of a 2030 citizen is pretty similar to the one of a 2021’s one. So how web technology evolved in the meantime?

The 2010s where undoubtedly the era of the smartphone as a every-day device for almost all the possible tasks. Despite being basically subclassed on the daily usage, desktop computers and notebook were still fundamental for many tasks, primarily due the screen size and the presence of mouse/keyboard for input. At the beginning of the 2020s, the development of foldable devices started to take place and brought some important new features for their users. First of all, it allowed to create hybrid devices that could be used as normal smartphones in their folded mode and as proper notebook in their un-folded mode. The advantages of such interoperability basically declared the death of computers as we have known them. Thus every computer is now considered as an obsolte and unsupported device.

Secondary, the traditional economy as we know it has been drastically changed by the advent of the blockchain technology and the rise of the cryptocurrency. People are now able to buy most of their goods, both outside and inside the internet, using a wide range of different crypto currencies such as Bitcoin, Ethereum and so on. They have their own crypto-wallet which can be used to rapidly exchange traditional currency (e.g. euros, dollars, etc.) with any kind of cryptocurrency and also to perform exchange between the latter. When browsing a particular item on the internet, they can decide to by the relative Non-Fungible Token (NFT) i.e. a sort of virtual copy of that resource that has a unique identifier. This has been an incredibly useful resource for online magazines that were struggling for funds.

The layout

In the context that was briefly laid out above, the layout of a web page should follow some minimalistic but fundamental rules. First of all, the text should be put at the very centre of the page in order to allow total readability of a user that is browsing thought a device in what is now refer to as “portrait mode”. This means focusing on the vertical dimension in order to scroll the text. For this reason the text is put with a padding of 5px on the top, 25px on the left, 5px on the bottom and 25px on the right. Secondary, each line is separated by a wide blank space i.e. a line height of 2. This creates a very minimalist and clear visual that enhances readability. All the columns occupy only the 80% of the whole space; this has been achieved by setting both a right and left margin of 10%. To achieve a modern visual almost all the elements have rounded borders, similarly to the currents trends in Android layout (cf. sources) and slight shadows that make them more credible. This effect has been called Neumorphism and it aims at recreating a feeling of tacticle expercience for the user.

There is also a sharp distinction between the cover page, which includes title, subtitle, description and a cover image, and the actual body of the text. The first letter of the article is showcased by increase its size, a trick that is commonly used in most of current journals and which I believe will stick around for a while in the future. Except for that, there is no need for further decorations: the cover page has a minimalistic gradient background that gives a fresh-looking style to the page, but all the focus in on the text. For this reason, the choice of a good font that is clear, elegant and at the same time easy to ready, is crucial. My choice was on Raleway, for its being already used in many important magazines and for its minimalistic aspect and Roboto, for similar reasons.

There are also some important features that are not stricly related to the visual aspect but to the web technologies of the future. First of all, a banner informs the user that he/she is using an old device to browse the content, which precludes some important feature as animated advertising (implying this is a bad thing, N.d.A.) and the possibility of listening automatically to the whole text bly clicking on the icon positioned in the cover. This feature is not actually implemented, but in the css file you can find some very basic aural features for exploiting speech properties. Altought aural features are currently deprecated, I believe that the arising of AI assistants will include a return of such features, leading to a more incluse web browsing.

The user is also allowed to buy the NFT version of the issue simply by inserting their univocal Wallet ID; but I suspect that none of us currently have one. Finally, the most important feature is the night/mode switch. By clicking on the moon icon the user can switch between two different version of the typographical style: one for the daylight and one for the nighttime. They are identical for what it concerns layout displaying, but they drastically change regarding colours. the nighttime view has a dark background and a white colour for the text, which drastically improve readability and helps user's eyes to rest. The nighttime view is starting to spread in many devices, but it is still uncommon to see that functionality on an actual web page (usually it is set as a device setting). I believe that being able to rapidaly switch between the two modes will be a popular trend in the near future.

The colours

For what it concerns the colour choice, I followed the line of simplicity: the text is plain black while the background is plain white. For the cover page a gradient looked like the best choice in order to preseverve a minimalistic aspect but also to give an aesthetically pleasant look. As it was mentioned above, the idea is to enhance as much as possible readability without distracting the reader. The only proper decoration that was developed it is related to anchors. They are displayed without underling or any other decorations, but when hoovered the anchors display a linear gradient change on the horizontal axes, giving the feeling of something “getting started”.