Advanced layout

This lesson aims to show you some tips to improve the visual appearance of your Storga pages. It begins with a general computer literacy part, to fully understand the issues and constraints related to the layout.

Choose your layout strategy

Understanding the concept of graphic stack

There are three main ways of representing a document:

There is also a hierarchy between these three representations. Indeed, the Repositionable -\u003e vector and vector -\u003e bitmap -\u003e bitmap transformations are a simple matter of computation, while the Bitmap -\u003e vector and vector -\u003e repositionable transformations are not feasible in the general case. We can therefore speak of a graphic stack with three levels, which in practice can only be traversed from top to bottom.

When we create a document, we often do it with software that uses a repositionable representation. Conversely, a modern computer screen displays exclusively in bitmap format.
The repositionable -\u003e vector transformation is performed by the word processor, or the web browser. The vector -\u003e bitmap transformation is most often performed by the computer graphics card.

Finally, note that the two transformations are not necessarily carried out at the same time, nor on the same machine. For example, you can perform the repositionable -\u003e vector transformation in your word processor, store the result as a PDF file, send it by email, and display it on another machine, which will perform the vector transformation -\u003e bitmap.

Document layout design strategy

The big question when formatting a page in order to make it more attractive to read is: do we choose in advance, and therefore we impose, the page format of the final document, and so more or less the optimal screen size to read it?

The advantage of imposing the format of the final document is to be able to optimize the positioning of the various elements more or less 'by hand'. This is what the magazine press does, and which websites had very widely adopted in the early 2000s, to obtain maximum visual impact.

Conversely, the fixed layout turns out to be painful as soon as the natural format on the material used during reading is very different from that adopted at the time of design. Here are two examples. First of all, a 2000s website designed for 14 inch 1366x768 screens will look a little silly when viewed on a 30 inch 4K screen. In the other direction, a scientific article or a book in PDF A4 format is painful to read on an ordinary e-reader.

And Storga?

Storga is optimized to easily create repositionable documents. This means that the layout possibilities are limited, but relatively easy to implement in terms of the content of the page. For stylesheets, that's a whole different story, which we'll just touch on in this lesson.

At the technical level, the graphics stack that is used by Storga is that of the UI of the free software Pliant (which is also the one used by the native Storga client), and not the HTML CSS stack of web browsers. This means that when you view a Storga page from a web browser, there is software, called Pliant's HTTP proxy, which translates the repositionable Pliant UI format into HTML CSS for your web browser.

However, Storga does not prohibit you from performing fixed layout, and in this case, the limits are set by the layout software and not by Storga. In practice, you will most often use the LibreOffice draw software for this, and these fixed layouts will serve you mainly in two cases. On the one hand, the creation of a very graphic web page, as described later in this lesson. On the other hand, the explanation of a process in the form of a clickable diagram, which we will see in level 3 of this training.

Understanding the concept of a stylesheet

A style sheet defines all the parameters that will drive the calculation of the repositionable -\u003e vector transformation. It defines, among other things, the size of the titles, their color, spacing, etc.

An example of a repositionable Storga layout

↣ Example: the Copliant website

In the text of the page, we have inserted image blocks (or file blocks if the illustrations are in SVG vector format), for which, in the context menu, we clicked on 'Properties', then filled in the field' Alignment 'with' Right 'or' Left '.
Note that this property is only effective in view mode.

Then, at the Storga Copliant site, we defined a stylesheet in which we defined the following layout rules:

The parameter 'para / align / justify true' specifies that the lines will be justified.

CSS parameters are used to indicate that titles and sub-titles should use the 'Lato' font, available on the 'fonts.googleapis.com' website.

In most cases, the field 'Additional CSS export definitions' should be filled in with the same content as 'Additional CSS web definitions', but as the HTML code generated for the HTML export is not completely identical to that produced by the Folding HTTP proxy, we have provided two fields, just in case.

You can find more information about filling out Storga style sheets in the Storga manual. However, their use remains of a complexity which greatly exceeds what it is realistic to master at level 1 of the Storga training. We recommend that you simply copy paste, or contact us to let us know about your encountered difficulties or wishes, for example by posting messages.

→ The Storga Manual: Style Sheets

Second example

↣ Second example

For this second example, we used an image at the top and another at the bottom of the page, as well as a style sheet to center the page, change the color of the text, and specify a minimum width for the input fields. .

An example of a fixed Storga layout

↣ Example: the CJD Montargis-gâtinais website

The page was made with LibreOffice draw.

At the Storga level, we created a page, we added the file block, as seen in the lesson 'Archive your office automation files', and we adjusted some of its properties:
Show content: yes
Suggest a link to open / edit: no

We added the links via the 'New link' button in the context menu of the file block.
The 'Zones' button in the same contextual menu is used to consult and possibly modify the table of links that have been created in this way.

Since the layout is fixed, we don't need a stylesheet to specify how to perform the repositionable -\u003e vector conversion, but only some information to specify how to adjust the size of the LibreOffice document to that of the web browser window. The logically possible strategies at this level are of course zooming, stretching, adding white to the sides, or cutting the sides. However, Storga does not allow either the zoom strategy or the stretch strategy.

To make the page accessible on the web, via the URL http://montargis-gatinais.cjd.net/ (instead of http://cjd-montargis.storga.com/page/cjd_montargis/DBMXHGFD/0BC36S8) on has changed two things. First of all, still at the page properties level:
Short URL: /
Users and groups who can read the content: *