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 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.
Il tool di gestione della veste grafica di IRIS6 è uno strumento disponibile agli amministratori che operano in visione completa. Per utilizzare il tool occorre accedere al menu e portarsi in Configurazione > Layout.
Il tool di gestione della veste grafica si compone di 4 elementi principali:
Di seguito i dettagli l'utilizzo di questi 4 strumenti e spiegheremo l'impatto che hanno sulla gestione della veste grafica dell'archivio.
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.
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, dopo aver digitato il nome della cartella occorre cliccare su Create per creare la cartella.
Cliccando con il pulsante destro del mouse su un file caricato all'interno della cartella 'sr' viene visualizzato un menu con le seguenti azioni
Cliccando con il pulsante destro del mouse su una cartella di quelle presenti nella cartella 'sr' viene visualizzato un menu con le seguenti azioni
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>.
| Per sovrascrivere correttamente le classi css standard è OBBLIGATORIO che il file si chiami local.css (scritto in minuscolo) e che sia nella cartella CMS sr. |
Ulteriori dettagli sull'utilizzo delle classi css sono disponibili al seguente indirizzo CSS Tutorial (w3schools.com)
Attraverso lo strumento Stile è possibile modificare l'aspetto degli elementi principali che caratterizzano l'archivio. Tale strumento è è 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 successivamente cliccare su aggiornamento configurazioni (pulsante posizionato in alto nella pagina)
Per modificare un campo che rappresenta un colore è possibile cliccare all'interno del campo, far comparire una palette che consente di selezionare la tonalità di colore desiderata.
Di seguito l'elenco dei campi presenti nel tool e il loro significato
| Il campo scss personalizzato non deve essere utilizzato. |
Attraverso tale strumento è possibile stabilire le caratteristiche che devono avere gli elementi che compongono l'archivio.
La pagina del tool 'Configurazioni' si compone di due sezioni:
La sezione impostazioni sito è composta da 6 campi in cui indicare le caratteristiche che devono avere gli elementi principali dell'archivio. Essendo la veste grafica di IRIS basata su Bootstrap 5 le caratteristiche degli elementi devono essere indicate con le notazioni proprie di bootstrap 5.
Attraverso questa sezione è possibile gestire gli elementi che compongono la homepage. In particolare è possibile stabilire:
L'homepage di IRIS è suddivisa in 12 colonne e ciascun elemento che la compone può essere largo da 1 a 12 colonne; tutti gli elementi sono visualizzati in sequenza
Nel campo 'elenco componenti home' è possibile stabilire quali sono gli elementi che andranno a comporre la homepage. Tutti gli elementi devono essere separati da virgola (es. newsHeader,news1,news2,simpleSearchForm).
Di default la homepage è composta dai seguenti elementi:
I restanti campi servono a definire la larghezza che avrà ciascun elemento della homepage: tale larghezza è espressa con la notazione bootstrap 5 col-lg-[numero colonne]
Di seguito i dettagli
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 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 sul pulsante 'Salva e vai alla visualizzazione dei dati' (posizionato in basso a sinistra della pagina) e successivamente cliccare 'aggiornamento configurazioni'.
Il tool Modifica News permette di inserire del testo statico in homepage: dando a possibilità all'Ente di inserire dei messaggi o dei contenuti html personalizzati.
Nella maschera sono presenti i seguenti elementi
Di seguito riportiamo il contenuto standard dell'elemento newsHeader.
<div class="site-header bg-secondary"> <div class="container"> <h3 class="mt-4 text-center">Esplora il catalogo della ricerca</h3> <form action="/simple-search"> <div class="input-group mt-3"> <input class="form-control" name="query"/> <button class="btn btn-primary" type="submit"> <i class="fas fa-search"></i> </button> </div> </form> <div class="d-flex justify-content-end mt-2"> <a href="/simple-search" class="text-white">Ricerca avanzata</a> </div> <div class="mt-3 text-left text-white"> <h5 class="cinecaSiteHomeIntroduction">CINECA IRIS Institutial research information system</h5> <p>è la soluzione IT che facilita la raccolta e la gestione dei dati relativi alle attività e ai prodotti della Ricerca. Fornisce a Ricercatori, amministratori e valutatori gli sturmenti per monitorare i risultati della ricerca, aumentarne la visibilità e allocare in modo efficace le risorse disponibili</p> </div> </div> </div> |
Di seguito proponiamo la resa grafica dell'elemento descritto sopra.
Di seguito riportiamo il contenuto di esempio per la news1 spiegando il significato delle notazioni bootstrap 5 che caratterizzano le classi dei suoi elementi.
<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
Nell'immagine sotto è visibile la resa grafica dell'elemento descritto sopra.