/

 

The manual

Self-training

Experimentation

Contact

 

Language

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:

Representation

The document is described as ...

Corresponding file formats

Repositionable
(structured document)

... logical.
For example a title, followed by a paragraph, an image to display on the right, etc.

Word processing file
HTML CSS web pageBook in Epub format

Vector

... of a series of drawing instructions.
For example the word 'Hello' written in black Helvetica characters, size 12, 45 mm from the top of the page, and 30 mm from the left edge, followed by a straight line connecting the point 45 mm from the left edge, 50 mm from the top at point 72mm from left edge, 50mm from wrong, in red, line thickness 0.5mm, etc.

PDF file
SVG file

Bitmap

... an array of points called pixels, whose color is specified. For example an image of 2500 x 3500 pixels.

JPEG or PNG file

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.

The style sheets of a Storga site are accessed via the 'Configure' icon.

To apply a style sheet to a Storga page, in edit mode, click on the 'Page' icon, and choose the style sheet to use via the 'Style' multiple choice field.

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:

Page alignment:

Top center

Additional UI Definitions:

para / align / justify true

Additional CSS web definitions:

\u003clink rel \u003d 'stylesheet' type \u003d 'text / css' href \u003d 'https: //fonts.googleapis.com/css? family \u003d Lato' /\u003eh1 {font-family: Lato; }
h2 {font-family: Lato; }
h3 {font-family: Lato; }
h4 {font-family: Lato; }

Additional CSS export definitions:

The same as for 'Additional CSS web definitions'

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.

For this example, we have opted for simple centering in both dimensions.
To do this, in the properties of the page, which can be accessed, in edit mode, via the 'Page' icon, we have changed:
Content position: In the center of the screen

Note: If the background of the LibreOffice document was not white, but uniform, we would probably also have filled in the 'Background color' field, for example with the value 'rgb 255 235 235'. On the other hand, if the background of the LibreOffice document was not uniform, for example a gradient, we would surely have preferred:
Content Position: Centered, with Image Edge Spread

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: *

Then, on the configuration page of the Storga site, accessible via the 'Configure' icon, we specified:
Domain name: montargis-gatinais.cjd.net

Warning: For security reasons, filling in the 'Domain name' field requires special rights at the Storga server level, so to assign a site name to your Storga domain, other than the one assigned to it by default, you must contact us.

 

Nouveau message

From :

Message Title:

Message: