Page tree

Versions Compared

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.

Table of Contents
Introduzione

IRIS6 IRIS è dotato di una veste grafica basata sul framwork Bootstrap 5. Questo gli consente di avere una migliore usabilità da parte degli utenti, una più ampia portabilità sui dispositivi, privilegiando quelli mobile, ed infine garantire un livello di sicurezza più elevato.
La struttura della veste grafica di IRIS6 IRIS è stata semplificata per dare modo agli amministratori dell'archivio di poter intervenire su di essa in modo più rapido ed intuitivo. È infatti possibile gestire tutti gli elementi che compongono l'archivio attraverso l'utilizzo del tool Layout.

...

  • CMS
  • Configurazioni
  • Stile
  • Modifica news

Di seguito vedremo i dettagli l'utilizzo di questi 4 strumenti e spiegheremo l'impatto che hanno sulla gestione della veste grafica dell'archivio.

CMS

...

Attraverso il CMS (Content Managment System)

...

è possibile inserire in Archivio i file

...

 che saranno utilizzati per comporre la veste grafica.

...

 Il CMS è composto da un'interfaccia che presenta 5 cartelle principali ovvero cineca, css, image, static e sr.

...

All'interno della cartella 'sr' sono depositati i file che serviranno per gestire la veste grafica dell'applicativo è 'sr'. Tutti i file caricati in questa cartella sono letti automaticamente dal

...

sistem.

Per accedere alla cartella

...

basta selezionarla con un doppio click

...

, all'interno

...

si trovano due cartelle chiamate rispettivamente bootstrap e cineca che non devono essere utilizzate.

NB: In questa cartella è possibile caricare il file local.css che serve per sovrascrivere le classi css dell'archivio.


Image Added


Caricamento file

Per caricare uno o più file all'interno della cartella 'sr' occorre cliccare sul tasto menu (icona con 3 puntini) e selezionare la voce Upload files. Si aprirà una finestra di dialogo che consente di selezionare i file di interesse dal proprio pc. Una volta selezionati i file di interesse occorre cliccare sul pulsante Upload per caricare i file.

...

Per creare una nuova cartella all'interno della cartella 'sr' occorre cliccare sul tasto menu (icona con 3 puntini) e selezionare la voce New folder. Si aprirà una finestra di dialogo che consente di attribuire un nome alla cartella che si vuole creare. Una volta , dopo aver digitato il nome della cartella occorre cliccare su Create per creare la cartella. 


Gestione file

Cliccando con il pulsante destro del mouse su un file caricato all'interno della cartella 'sr' viene visualizzato un menu che consente di eseguire con le seguenti azioni:

  • Download : consente di scaricare il file selezionato;
  • Rename → Rename: consente di rinominare il file selezionato;
  • Move → Move: consente di spostare il file selezionato;
  • Copy → Copy: consente di effettuare una copia del file selezionato;
  • Permissions → Permissions:  visualizza una finestra di dialogo per gestire i permessi associati al file;
  • Delete → Delete: consente di eliminare il file selezionato;.

Gestione cartella

Cliccando con il pulsante destro del mouse su una cartella di quelle presenti nella cartella creata all 'interno della cartella sr' viene visualizzato un menu che consente di eseguire con le seguenti azioni

  • Open:

...

  • Open → consente di accedere alla cartella selezionata;
  • Rename → Rename: consente di rinominare la cartella selezionata;
  • Move → Move: consente di spostare la cartella selezionata;
  • Permissions → Permissions: visualizza una finestra di dialogo per gestire i permessi associati alla cartella selezionata;
  • Compress → Compress: consente di comprimere la cartella selezionata;
  • Delete → Delete: consente di eliminare la cartella selezionata;.

local.css

Il file local.css è un file molto importante perché consente di sovrascrivere le classi css degli elementi che compongono l'Archivio. Sovrascrivendo le classi css standard è possibile modificare l'aspetto degli elementi che compongono l'archivio. Ad esempio è possibile attribuire un aspetto differente da quello standard a tutti gli elementi di tipo <H1>.

...


Ulteriori dettagli sull'utilizzo delle classi css sono disponibili al seguente indirizzo:
indirizzo CSS Tutorial (w3schools.com)

...

Attraverso lo strumento Stile è possibile modificare l'aspetto degli elementi principali che caratterizzano l'archivio.
Lo  Tale strumento Stile è è composto da una serie di campi che rappresentano gli elementi principali che caratterizzano l'aspetto grafico dell'archivio e i rispettivi valori di default.

Per modificare il valore di un elemento basta cliccare nel corrispondente campo, inserire il valore desiderato quindi cliccare su Salva e vai alla visualizzazione dei dati e quindi successivamente cliccare  su aggiornamento configurazioni. Quando ci si trova a  aggiornamento configurazioni (pulsante posizionato in alto nella pagina)

Image Added


Per modificare un campo che rappresenta un colore è possibile cliccare all'interno del campo per far comparire una palette che consente di selezionare la tonalità di colore desiderata.


Di seguito l'elenco dei campi presenti nel tool e il corrispettivo loro significato:

  • colore primario → primario: il colore primario associato agli elementi dell'archivio. Questo colore caratterizza ad esempio il bunner principale;
  • colore secondario : il colore secondario associato agli elementi dell'archivio. Questo colore caratterizza ad esempio lo sfondo del menu;
  • colore successo → successo: il colore che caratterizza i messaggi di successo che compaiono in archivio;
  • colore errore → errore: il colore che caratterizza i messaggi di errore che compaiono in archivio;
  • colore info → info: il colore che caratterizza i messaggi di informazione che compaiono in archivio;
  • colore attenzione → attenzione: il colore che caratterizza i messaggi di warning che compaiono in archivio;
  • colore chiaro → chiaro: il colore che caratterizza la classe css light;
  • colore scuro → scuro: il colore che caratterizza la classe css dark;
  • colore sfondo pagina → pagina: il colore che caratterizza lo sfondo di tutte le pagine;
  • colore sfondo forms → forms: il colore che caratterizza lo sfondo delle form dell'archivio;
  • colore testo menu top → top: il colore che caratterizza il testo del menu principale dell'archivio, cioè quello in alto;
  • stile menu sx - border → border:  il colore che caratterizza il bordo del menu dell'archivio;
  • abilita arrotondamenti → arrotondamenti : abilita o disabilita gli arrotondamenti a tutti gli elementi dell'archivio (true = arrotondamenti abilitati; false = arrotondamenti disabilitati);
  • bordo schede → schede: indica lo spessore da attribuire al bordo delle schede espresso in px;
  • ombra schede → schede: indica l'ombra delle schede. Il valore è espresso in px (ulteriori informazioni presenti in CSS Shadow Effects (w3schools.com));
  • arrotondamento bordo schede → schede: indica il raggio di arrotondamento del bordo delle schede espresso in px;
  • arrotondamento forms → forms: indica il raggio di arrotondamento del bordo delle forms espresso in px;
  • arrotondamento buttons → buttons: raggio di arrotondamento del bordo dei bottoni espresso in px;
  • scss personalizzato → personalizzato: si tratta di un file generato automaticamente dal sistema.
  • import fonts :font da utilizzare;.


Warning
titleATTENZIONE
Il campo scss personalizzato non deve essere utilizzato.

Configurazioni

Il tool configurazioni è uno strumento che consente di Attraverso tale strumento è possibile stabilire le caratteristiche che devono avere gli elementi che compongono l'archivio. Questo strumento

La pagina del tool 'Configurazioni' si compone di due sezioni:

  • impostazioni sito
  • impostazioni homepage


Image RemovedImage Added

impostazioni sito

La sezione impostazioni sito è una form composta da 6 campi in cui indicare le caratteristiche che devono avere gli elementi principali dell'archivio. Essendo la veste grafica di IRIS6 IRIS basata su Bootstrap 5 le caratteristiche degli elementi devono essere indicate con le notazioni proprie di bootstrap 5.

  • container pagina pubblica → valore : valore di default = container-xxl. Indica che l'archivio verrà visualizzato presentando del margine ai lati dello schermo.
  • stile menu top → valore : valore di default = navbar-dark sticky-top
  • stile footer totali → totali: valore di default = bg-primary text-white. Indica che l'elemento totalFooter avrà come colore di sfondo il colore primario impostato nello strumento Stile, mentre il testo sarà di colore bianco.
  • stile menu top backgroung → backgroung: valore di default = bg-primary. Indica che il banner principale avrà come colore di sfondo il colore primario impostato nello strumento Stile.
  • stile site header → header: valore di default = bg-secondary text-white. Indica che l'elemento newsHeader avrà come colore di sfondo il colore secondario impostato nello strumento Stile, mentre il testo sarà di colore bianco.
  • stile menu sx → sx: valore di default = bg-secondary. Indica che il menu principale avrà come colore di sfondo il colore secondario impostato nello strumento Stile.

impostazioni homepage

La sezione impostazione homepage consente di gestire gli elementi che compongono la homepage. Attraverso questa sezione è possibile agire sugli possibile gestire gli elementi che compongono l'la homepage. In particolare è possibile stabilire:

  • Quali elementi devono essere visualizzati;
  • In che ordine devono comparire;
  • Che dimensioni devono avere;

...

  • .

L'homepage di IRIS6 IRIS è suddivisa in 12 colonne e ciascun elemento che la compone può essere largo da 1 a 12 colonne.Image RemovedLa homepage di IRIS è composta da più elementi ; tutti gli elementi sono visualizzati in sequenza. Attraverso il campo


Image Added

Nel campo 'elenco componenti home' è possibile stabilire quali sono gli elementi che compongono la homepage. Aggiungendo o togliendo un elemento da questo campo fa in modo che quell'elemento sia visualizzato o meno in andranno a comporre la homepage. Tutti gli elementi devono essere separati da virgola (es. newsHeader,news1,news2,simpleSearchForm).

Image Added


Di default la homepage è composta dai seguenti elementi:

  • newsHeader → newsHeader: header della homepage;
  • news1 → news1:  news numero 1;
  • recentSubmissions → recentSubmissions: carosello che mostra gli ultimi prodotti inseriti in archivio;
  • simpleSearchForm → simpleSearchForm: form di ricerca semplice
  • facets → facets: faccette per sfogliare i prodotti dell'archivio
  • news2 → news2: news numero 2;
  • mostViewed → mostViewed: faccetta prodotti più visualizzati;
  • mostDownloaded → mostDownloaded: faccetta prodotti più scaricati;
  • totalFooter → totalFooter:contatori totali;


Come detto precedentemente l'homepage è composta da 12 colonne. I campi sottostanti permettono di indicare I restanti campi servono a definire la larghezza che avrà ciascun elemento della homepage. La lunghezza di ciascun ciascun elemento : tale larghezza è espressa con la notazione notazione bootstrap 5 col-lg-[numero colonne].

Image Added

Di seguito i dettagli

  • css slider submission → dimensione dell'elemento carosello;
  • css facets → dimensione di ciascuna faccetta;
  • css most viewed → dimensione della faccetta prodotti più visualizzati;
  • css search site form → dimensione della form di ricerca base;
  • css most downloaded → dimensione della faccetta prodotti più scaricati;
  • css custom query
  • css tag cloud


Se un elemento ha una lunghezza pari a 12 colonne allora occupa l'intera larghezza della homepage. Se un elemento ha una lunghezza pari a 6 colonne allora occupa metà della larghezza della homepage e sarà visualizzato su una riga accanto a uno o più elementi.
Ad  Ad esempio, se ho 4 faccette e voglio che siano visualizzate su una sola riga, allora dovrò impostare il campo css facets con il valore col-lg-3 (12/3=4); Se voglio che le 4 faccette siano visualizzate su due righe in modo che ci siano due faccette per ogni riga allora dovrò impostare il campo css facets con il valore col-lg-6 (12/6=2).
Al termine di ogni modifica occorre cliccare su sul pulsante 'Salva e vai alla visualizzazione dei dati e quindi su ' (posizionato in basso a sinistra della pagina) e successivamente cliccare 'aggiornamento configurazioni'.

Modifica news

Il tool Modifica News permette di inserire del testo statico in homepage. Serve per inserire dei messaggi : dando a possibilità all'Ente di inserire dei messaggi o dei contenuti html personalizzati. In ciascuna news infatti è possibile inserire del testo html. 


Il tool si compone dei Nella maschera sono presenti i seguenti elementi:

  • Testo homepage header → header: contiene l'html dell'elemento newsHeader presente nel tool configurazioni. Di default è presente il codice html che consente di visualizzare la form di ricerca base nello sfondo viola.
  • Testo statico 1 – 9 → 9:  contiene l'html dell'elemento news1 – news9 presente nel tool configurazioni.
  • Testo statico in mydspace → mydspace: contiene l'html dell'elemento visualizzato sopra la pagina i miei prodotti. Questo testo viene visualizzato da tutti gli utenti che operano con qualsiasi visione.

...

Code Block
<div class="col-6 mt-2">
	<div class="card">
		<div class="card-body">
			<p> testo statico 1</p>
		</div>
	</div>
</div>

Di seguito il dettaglio delle notazioni

  • col-6 mt-2 → 2: vuol dire che la news è larga 6 colonne (col-6) e avrà un margine dall'elemento superiore di 2 unità (mt-2);
  • card → card: significa che l'elemento sarà visualizzato come una card, cioè come un riquadro dallo sfondo bianco con i bordi smussati;
  • card-body → body: permette di trattare il contenuto di questo elemento come parte della card;

Di seguito proponiamo la Nell'immagine sotto è visibile la resa grafica dell'elemento descritto sopra.

...