Manual for the new Portal Manager 2.0

Details

Concepts used in the portal manager 2.0
Basic Concepts
Concept Description More...
Portal

A portal is a set of pages with a navigation architecture hosted on a web server under a domain.
With the portal manager you can create portals for the internet (the nomenclature of its code is webXXX99) and portals for intranet (the nomenclature of its code is intraXXX99)

Page

A page is a complete HTML that is made up of small pieces with different functionalities such as an image gallery, a menu, a container for content, etc.
Once the HTML of a page has been generated, the styles and scripts of its parts are 'embedded' in its styles and scripts files, without disturbing each other.

Subpage

A subpage is an incomplete HTML (because it has neither a head nor a body) that is made up of small pieces with different functionalities such as a menu, an image, etc.
Therefore, a subpage can be included within a page as if it were one more piece.
Subpages often contain HTML that is reused as a piece of several different pages, such as the header or footer of portal pages.

Visual Area / VA 

A Visual Area (or a VA) is that portion of HTML with a specific functionality. In the new Portal Manager, 8 types of visual areas have been identified that allow configuring any necessary piece on a portal page.
A very important aspect to consider is that the styles and scripts associated with each Visual Area have to be introduced in the 'edition' of the Visual Area itself, since these are scoped within the same area.
They are explained in detail in the section

Framework

A js framework is a special type of class library that streamlines the development of a website by incorporating characteristics and styles already defined in an agile way.
In the new Portal Manager, it is possible to make use of these frameworks, for which they must be uploaded to the resources associated with the portal.

styles / css

The style or css files incorporate visual characteristics to the elements of the web.
The general styles of the Portal, such as font, colors, ... must be included in the 'edition' of the portal.
The particular styles of each Visual Area must be included in the 'edition' of the Visual Area.

SaSS Vars

Sass variables are simple: you assign a value to a name that begins with $, and then you can refer to that name instead of the value itself.
Sass variables make it possible to reduce repetition and complexity.
In the new Portal Manager, Sass variables are centralized and their definition is done in the portal edition.
In this way, for example, if you want to change the font throughout the web, just change it in the Sass variable defined at the portal level.

javascript / js

The javascript or js files incorporate functional characteristics to the elements of the web.
The general javascript of the Portal, if necessar, it should be included in the 'edition' of the portal.
The particular javascript of each Visual Area must be included in the 'edition' of the Visual Area.

JSON

JSON (an acronym for "JavaScript Object Notation") is a simple text format for exchanging data.
In a Visual Area, in addition to the appearance and operation, it is necessary to configure the data.
For example, in a VA of type r01-link, which is included to design a menu, it is necessary to indicate which is the text, the link, the alternative text, the destination URL, etc.
In the new Portal Manager, this data is stored in a JSON data structure, and is available from the editing area so that the web developer can check the style (css), the operation (js) and the markup (html) of that VA.

HTML

HTML, which stands for HyperText Markup Language, refers to the markup language for creating web pages.
For both the pages and the Visual Areas, the web developer has to specify the HTML markup (which verifies the WCAG accessibility standards) in the Edition area.

Handlebars

Handlebars is a simple templating language.
It uses a template and an input object to generate HTML or other text formats. Handlebars templates look like regular text with embedded Handlebars expressions.
In the case of VAs, to incorporate the values stored in the JSON data structure in the HTML, Handlebars.js is used.
For more information about Handlebars, visit: https://handlebarsjs.com/guide/ (leiho berri batean irekitzen da)

Log

Any saving operation carried out both in the portal, as in a page, or in a VA, is registered in the system and generates a Log file, which can be consulted from the Edition areas.
This Log file is of great help when an operation is performed and the result is not as expected: there is probably an error in the data provided by the web developer when editing the component and this error will be reflected in this Log file.

r01-subpage

Each type of VA is identified by such an expression. Thus, if you want to include a subpage type VA as a part of a page, it will be necessary to specify this element: r01-subpage.

It is also mandatory that any VA be included in an r01-section, as follows:

<r01-section id="upper_zone">
<r01-subpage id="header"> </r01-subpage>
</r01-section>

This rule will be applicable to any VA.

<r01-section id="lower_zone">
<r01-link id="menu"> </r01-link>
<r01-image id="image-gallery"> </r01-image>
</r01-section>
Configure

In this tool, a Page and a Visual Area has two data entry forms.
The first one is [Configure]. Here it's the basic data of a Page or a Visual Area, such as the name, the description, etc. and the functional data, that are, the title, the text, the image, etc.
This data entry form is editable by all user profiles with access.

Edit

In this tool, a Page and a Visual Area has two data entry forms.
The second one is [Edit]. Here is all the web design and development, such as the handlebars rendering template, style files, and javascripts. This code is entered using a codemirror component.
In addition, the data entered in the Configuration form is also displayed, in non-editable JSON format.
This code is only editable by the users with role of owner or web developer of this portal.

Publish

When a page is completely finished in this backend tool, it has to be transferred to the web. To do this transfer, the page has to be published.
You can request that the publication be executed at the moment (immediate), or indicate when you want to execute it (scheduled).

Catalog

To a page you can add cataloging labels of some standardized axes (and normally required by the system before publication), which will allow those pages to be obtained as results of certain business searches.

Owner

The owner of a portal can do any operation on his/her portal.
The owner can also authorize the management of his portal by assigning owner, web developer or functional permissions to other users.

Web Developer

The users with role of web developer in a portal can do any operation on this portal.
His/her main function is to develop and deliver the web fully working.

Functional

The users with role of functional can enter the basic data of the pages and the visual areas in the Configure data entry forms.
His/her main function is to maintain texts of the visual areas of the pages, such as images, link texts, link urls, etc. These users don't change the web design.
These users can go to Edit data entry form, but only to see the code, not to edit it.

Design and modeling of a page: Available Visual Areas
Visual Area Description
r01-image

This component includes one or more images or videos with or without hyperlink.
It would be used to introduce the logo, a slider with a collection of images or videos, etc.

r01-link

This component includes one or more links.
It would be used to enter a single link, a list of links, a single or multi-level menu, etc.

r01-langselector

This component sets the change of the current page to the new selected language.

r01-subpage

This component allows you to incorporate a subpage type page within another page.
It is used to include a subpage with common and repeating elements, for example the header, the footer within other pages.

r01-breadcrumb

This component makes it possible to display the navigation path on the web until reaching the current page / content.

r01-editor

This component makes it possible to enter text in HTML format.
It is used for section titles on the pages (and sometimes justified to include HTML that cannot be generated with the rest of the Visual Areas).

r01-contentlist

Through this component, the list of contents dynamically retrieved from a configured search and / or from a preselection thereof is presented.
It is used to display content listings (in summary mode -formatter- or in detail mode -miniature-), such as the last N news published.

r01-calendar

This component paints a calendar from a configured search where the content type involved has date metadata.

r01-container

It allows to embed content or an application in the page (fixed if it has been configured in the Visual Area or dynamic if it is specified in the page URL).

Frequent questions
What I need Solution Example
Specify in the search a container page for results

It is necessary to add the parameter: r01kPageContents in the query

?r01kPageContents=/webgeo00-content/es&r01kQry=...

Example

Specify in the search that you want to receive the header of the results

It is necessary to add the parameter: r01kSearchResultsHeader in the query

?r01kSearchResultsHeader=1&r01kQry=...

Example

Specify in the search that you want to paint a thumbnail as a result

It is necessary to add the parameter: r01kPresentationThumbnail in the query

?r01kPresentationThumbnail=miniatura-2&r01kQry=...

Example

Decode HTML text in Handlebars

It is necessary to include the variable whose content you want to decode, because it has HTML code, between 3 keys

{{{variable-name}}}