Indice articolo

Come tutte le applicazioni web, anche Web.UP 3 può essere personalizzato a piacimento.

Con l’utilizzo combinato dei fogli di stile e della configurazione di Web.UP puoi personalizzare l’interfaccia grafica adeguandola all’immagine della tua azienda (o del cliente per cui stai lavorando…).

Premessa

ATTENZIONE: questa parte è DAVVERO importante.

Prima di pensare alla personalizzazione, ai css, e alle immagini, è opportuno dedicare il giusto tempo alla progettazione di un’interfaccia utente semplice ed efficace (a questo proposito verrà scritto un articolo dettagliato).

Mentre nell’ambiente client/desktop esistono diversi tipi di interazione, e la tendenza è di racchiudere tutte le funzioni in meno schermate possibili, sul web la faccenda si complica.
Il campo d’azione deve essere limitato (o quasi) al singolo click su specifici oggetti, alla digitazione di testi e/o allo scorrimento dei contenuti.

Parafrasando un certo Nielsen, il web è un genere a sè, dove non conviene differenziarsi troppo dagli altri. Per avere un’interfaccia efficace serve rispettare le “convenzioni tacite” che si vanno stabilendo, in modo che l’utente riesca ad orientarsi senza dover seguire guide, tutorial o supporto.

Una buona idea potrebbe essere quella di riprendere la struttura di un sito “concorrente” particolarmente usato o efficace, facendo attenzione all’uso degli spazi, alle dimensioni degli elementi, o all’alineamento.

NOTA: Considera SEMPRE che la “tua” interfaccia può essere usata su diversi dispositivi e a diverse risoluzioni, quindi evita di sviluppare gli elementi in orizzontale (che potrebbe causare barre di scorrimento su risoluzioni inferiori), e di utilizzare elementi troppo “piccoli”.

Quali sono i criteri fondamentali?

  1. Struttura. L’interfaccia utente deve essere organizzata seguendo modelli chiari e coerenti, riconoscibili dagli utenti con evidenza;
  2. Semplicità. Il nostro design deve facilitare le operazioni, comunicando in un linguaggio semplice e chiaro;
  3. Visibilità. Il design non deve distrarre l’utente durante l’esecuzione di un task con elementi di rumore o con informazioni ridondanti;
  4. Feedback. Il design deve informare l’utente sullo stato delle operazioni effettuate, in particolare i messaggi di errore, che devono spiegare qual è stato il problema.

 

Riassumendo: L’interfaccia grafica deve essere chiara, semplice ed efficace, anche ad un utente poco esperto. Solo a quel punto vale la pena di dedicarsi a immgini e colori. Ricorda che “i CSS non fanno miracoli“.

 

Detto questo, evitiamo di andare “fuori tema” e torniamo all’argomento dell’articolo.

 

Informazioni utili

Ogni installazione di Web.UP 3 può utilizzare dei files css “aggiuntivi”, uno per la versione “web” e uno per la versione “mobile”.
I files css aggiuntivi si trovano nella cartella C:\Users\[nome utente]\etc\webup\[context]\resources\css, e il nome del file è definito nella configurazione (“Css filename” all’interno di “External Resources”).

  • La configurazione di Web.UP è raggiungibile dal pulsante   nella testata, previa autenticazione “devMode” da ctrl+shift+f8
  • Ad ogni modifica del file ricordati di aggiornare la pagina con un ctrl+f5, per ricaricare cancellando la cache

 

Cosa puoi fare in dettaglio?

  1. Font
  2. Colori
  3. Sfondi e immagini
  4. Override componenti
  5. Extend componenti
  6. Custom header/footer html

 

1. FONT

Il font utilizzato in Web.UP 3 è “Roboto”, ma può essere sovrascritto utilizzando dei repository remoti. Uno dei più diffusi è “google fonts”.

 

Una volta selezionato il font più adatto, inserisci il codice all’interno del file css; ad esempio:

@import url('https://fonts.googleapis.com/css?family=Open+Sans');
 body,
 .ui-widget,
 .ui-widget .ui-widget {
    font-family: 'Open Sans', sans-serif !important;
 }

 

 

2. COLORI

Il colore di base di Web.UP è l’azzurro, in 5 varianti:

  • Colore di base: #4285f4
  • Colore chiaro: #7baaf7
  • Colore scuro: #2a59a6
  • Colore molto chiaro: #adc9f8
  • Colore molto scuro: #1f3f75

Sovrascrivere ogni riferimento a questi colori può essere complesso, o quantomeno lungo, quindi il consiglio è di partire dal file webup.css (recuperabile ad esempio con “Firebug” per Firefox o con gli “strumenti per gli sviluppatori” di Chrome) e sovrascrivere quello che serve.

Un’altra funzione utile è la generazione delle icone in un colore definito dall’utente. Per farlo è sufficiente impostarlo nella configurazione di Web.UP.

Da “Icons generation”:

 

Scegli il colore, clicca su “Generate” e attendi che vengano generate le icone. A questo punto salva la configurazione e aggiorna la pagina.

 

 

3. SFONDI E IMMAGINI

E’ possibile utilizzare risorse (loghi, sfondi e immagini) a piacimento, se indicate nell’apposita sezione della configurazione.

 

In “External Resources”:

  • Favicon: è l’icona che si vede nel tab del browser, a fianco del titolo della pagina
  • Login Background filename: sfondo della pagina di login
  • Background filename: sfondo delle pagine interne/li>

In “Logos” puoi definire i loghi da utilizzare, utilizzati nei moduli di login.

In “Custom external resources” puoi definire altre risorse da usare all’occorrenza, come loghi e immagini per la testata personalizzata (“Custom header HTML”).

Nel caso di un’immagine il codice potrebbe essere:

<img src="/[context]/javax.faces.resource/CustomRes0.jsf?ln=er" />

 

4. OVERRIDE COMPONENTI

Lo stile dei componenti di Web.UP può essere sovrascritto nel file css aggiuntivo, utilizzando il prefisso .component.[codice]; ad esempio:

  • .component.MAT per le matrici
  • .component.LAB per le label
  • .component.TRE per gli alberi
  • Etc..

Ad esempio puoi modificare lo stile del componente IML con delle regole come queste:

 .component.IML .ui-datagrid-column .IML_item {
    margin: 0 0 10px;
 }
 .component.IML .ui-datagrid-column .IML_item .IML_img {
    max-width: none;
    width: 100%;
    display:block;
 }
 .component.IML .ui-datagrid-column .IML_item .IML_img img {
    border-radius: 0;
    width: 75%;
 }
 .component.IML .ui-datagrid-column .IML_item .IML_text {
    padding: 0 5px;
 }
 .component.IML .ui-datagrid-column .IML_item:hover .IML_text {
    font-weight: normal;
    color: #ff3c46;
 }

 

Ricordati che la sovrascrittura di questi stili vale per TUTTE le schede all’interno della tua applicazione.

In alcuni casi è meglio estendere gli stili con l’utilizzo dell’attributo Class (vedi il punto 5).

 

 

5. EXTEND COMPONENTI

In alcuni casi è utile (se non necessario) modificare lo stile di un componente solo in determinate pagine (schede).

Per farlo puoi aggiungere, nel tuo script di scheda o nel SCP_LAY, l’attributo “Class”, legato ad un componente o (nel caso del SCP_LAY) ad una sezione. Ad esempio:

  • ::G.SUB.LAB Title=”Titolo della sezione” Class=”section_title” per il componente LAB
    a livello CSS usare .component.LAB.section_title
  • ::G.SEZ Pos(1A) Dim(30%) Class=”sidebar” per la sezione
    a livello CSS usare .box-layout.sidebar

 

 

 

6. CUSTOM HEADER/FOOTER HTML

Per avvicinare Web.UP all’immagine dell’azienda (o, come capita più spesso, al suo sito internet), è utile usare il “Custom header” e il “Custom footer”.

Nella configurazione troverai 3 sezioni (una riguarda il “Custom header mobile”), in cui potrai inserire il tuo codice html, che ovviamente potrai “stilare” a dovere all’interno del file css aggiuntivo.

Puoi inserire anche link/pulsanti, con una funzione onclick:

  • logout() per richiamare il “logout
  • back() per richiamare la funzione “indietro

Altra funzione utile: in queste sezioni custom è possibile inserire funzioni javascript, che possono anche recuperare dati (variabili) da Web.UP. Ad esempio:

Visualizzo il link di logout solo se il modulo di login è “AREA_RIS”

<script>
 function showLogout(val){
    if(val == "AREA_RIS"){
       $('a.logout_btn').css('display', 'inline-block');
    }
 };

 $(window).load(function(){
    smeupGetVariableValue([{name:'variable', value :'*LOGINMODULE'}, {name:'callback', value :'showLogout'}]);
 });
</script>

La funzione “smeupGetVariableValue” restituisce il valore della variabile “*LOGINMODULE” e richiama una funzione “showLogout” con il valore richiesto.

 

 

 

Questo articolo, seppur tecnico, è volutamente indicativo.
Per maggiori informazioni, se vuoi saperne di più, scrivi a claudio.minelli@smeup.com!