Nascondere un Div dopo un timeout / settare il timer di un oggetto

E se, dopo aver notificato all'utente l'esito dell'operazione da lui richiesta (aggiornamento, cancellazione, caricamento...), volessimo far scomparire il messaggio dopo un certo tempo?

Ciò può essere utile per recuperare spazio all'interno della pagina e per non appesantire troppo l'applicazione dal punto di vista dell'interazione con l'utente: è giusto avvertire l'utente di ciò che è accaduto, ma non più del tempo necessario. L'utente potrebbe stancarsi di leggere il messaggio di notifica che rimane lì per sempre o per un tempo molto lungo.

Non è difficile ovviare a ciò. Possiamo utilizzare una funzione come la seguente per far scomparire il messaggio

function timer(){   HideContent('fatto'); }

accoppiata con l'evento onload di Javascript inserito nel tag "body" della nostra pagina.

body onload="javascript:ShowContent('fatto');setTimeout('timer()', 5000);"

Ecco un esempio funzionante che permette di far scomparire il div messaggio dopo 5 secondi dal caricamento della pagina. Utilizzare questo piccolissimo trucchetto nel momento opportuno e nelle giuste situazioni, sarà sicuramente un effetto gradito agli occhi dell'utente.

Cos'è un layer web?

Un layer non è altro che uno strato.

Esattamente come questa torta al cacao, così può essere composta una pagina web, ovvero può essere stratificata e composta di più livelli.

Non tutti i livelli sono visibili ed utilizzati subito dall'utente che da fuori ha una visione parziale del contenuto della pagina - esattamente come le tre linee di cioccolato della torta che, se non viene tagliata ed osservata nel suo interno, non se ne conosce la composizione - potrebbe pure contenere marmellata o miele anzichè cioccolata!

All'interno di una pagina web non si perdono informazioni o contenuti bensì, attraverso un utilizzo ponderato ed oculato, si possono ottenere vari stratagemmi per "dialogare" con l'utente ed indirizzarlo verso le operazioni giuste da compiere.

Tecnicamente niente di complesso, il layer si realizza effettivamente utilizzando il tag div del linguaggio HTML che con l'aiuto di qualche linea di Javascript mostra e nasconde gli oggetti all'interno della pagina.

Vantaggi dell’utilizzo dei layer

Utilizzare i layer nel web comporta notevoli ed interessanti vantaggi:

1. l'utente vede solo ciò che deve vedere al momento:

       1.1 possiamo facilmente indirizzarlo a compiere solo quelle operazioni che effettivamente può compiere nel contesto nel quale si trova all'interno dell'applicativo;

        1.2 possiamo dare all'utente l'idea che l'applicazione sia molto veloce: ogni qual volta egli clicca su qualche voce di menu, l'operazione da lui richiesta è istantanea;

2. ci sono molteplicità di situazioni e obiettivi in cui possono essere impiegati:

       2.1 nei menu per far comparire/scomparire vari sotto-menu;

       2.2 per far comparire/scomparire informazioni e parti intere della pagina;

       2.3 per dare messaggi all'utente dopo aver compiuto certe operazioni;

       2.4 per informare l'utente dello stato del caricamento delle pagine o di alcune funzionalità

       2.5 per quanto altro vi possa venire in mente...

3. se utilizzati bene, possono rendere l'applicativo elegante e allo stesso tempo molto funzionale, navigabile e molto gradevole per l'utente;

4. l'implementazione è banale.

Dunque poco dispendio di inutili energie per il programmatore e ottimi effetti per l'utente che utilizza l'applicativo. Provare per credere.

Blogger Widget: elenco post scorrevole lateralmente

Riorganizzando il mio blog-scatolone, ho cercato su internet alcuni script da poter installare e ne ho trovati diversi molto utili. Ce ne sono davvero per tutti i gusti ed è bello constatare come molti non si fermino solo alle opzioni preimpostate offrite dalle piattaforme per blog, ma si ingegnino nel trovare il modo di sopperire alle loro eventuali mancanze per realizzare quel che hanno in testa!

Avevo in mente qualche idea riguardo a quello che stavo cercando e mentre analizzavo tutte le varie possibilità da poter sfruttare, mi è venuto in mente che, una cosa semplicissima e che poteva essere carina, era il fatto di mostrare all'utente l'elenco dei miei post scorrevole lateralmente. Bah, niente di speciale o di trascendentale ma l'attenzione dell'utente poteva essere catturata dal movimento della scritta: ciò toglieva un po' di staticità alla pagina ed in più, permettava facilmente ed in maniera automatica di riportare titoli di vecchi, vecchissimi post, in prima fila, esattamente come accade a quei foglietti che nello scatolone, girando e rigirando, saltano fuori quando meno te lo aspetti e catturano la tua attenzione. E chi lo sa, magari soffermandosi un attimo, si può pure scoprire scritto qualcosa di bello su quel foglietto!

Ecco come puoi aggiungerlo al tuo blog:

1. scarica lo script;
2. inserisci sul blog un widget per HTML/Javascript ed incollaci dentro tutto il contenuto del file scaricato.

Puoi personalizzare lo script come meglio credi per adattarlo alle tue esigenze e cambiare per esempio colori, larghezza, carattere delle scritte, immagine. Come sempre, usa tutta la fantasia che hai!

Mostra / nascondi Div (layer)

Ecco alcune semplici ma utilissime funzioni javascript utilizzate nei post sul messaggio di "caricamento in corso" ed in quello sui messaggi di notifica per l'utente:

1. funzione HideContent(d) che nasconde il div passato in input

function HideContent(d) {   if(d.length < 1) { return; }   document.getElementById(d).style.display = "none"; }

2. funzione ShowContent(d) che mostra il div passato in input

function ShowContent(d) {   if(d.length < 1) { return; }   document.getElementById(d).style.display = "block"; }

3. funzione ReverseContentDisplay(d) che inverte lo stato del div rendendolo visibile se non lo era o nascondendolo se veniva mostrato all'utente

function ReverseContentDisplay(d) {   if(d.length < 1) { return; }   if(document.getElementById(d).style.display == "none") {     document.getElementById(d).style.display = "block";   }   else { document.getElementById(d).style.display = "none"; } }

Ecco un esempio pratico riassuntivo (↗) che mostra in azione queste funzioni.

Rassicurare l’utente nelle applicazioni web-based - Messaggi di notifica

Oltre ad informare l'utente del caricamento in corso della pagina richiesta, è possibile utilizzare lo stesso sistema illustrato nel post precedente per dare altri avvisi a chi sta utilizzando la nostra applicazione web-based.

In particolare possono essere dati:
1. messaggi di notifica di operazioni effettuate;
2. messaggi di errore.

Per esempio, dopo che è stata effettuato un aggiornamento di qualche dato a sistema, è possibile far comparire un messaggio per notificare all'utente l'avvenuta modifica oppure, nel caso sia occorso un errore, un messaggio del tipo "Errore: riscontrato il problema tal dei tali...".

Se per il caricamento in corso avevamo utilizzato il rosso come sfondo del messaggio, per la notifica di un'operazione eseguita con successo potremmo utilizzare un colore rassicurante come un verde o un giallo chiaro, o comunque un colore che al primo impatto dia l'idea che tutto è andato bene.

Tecnicamente si tratta solo di modificare, all'interno della pagina di esempio (↗) mostrata nel post precedente, le caratteristiche del box div che contiene il messaggio (colore, testo, posizione e misure...) e farlo mostrare al momento opportuno, dando qualche piccolo colpo di javascript qua e là all'interno delle nostre pagine web... ed il gioco è fatto!

Rassicurare l’utente nelle applicazioni web-based - Caricamento in corso

Una delle cose che mi aveva colpito qualche tempo fa, era il piccolo riquadro rosso che compariva in alto a destra nelle pagine di Gmail e che informava l'utente dell'avviato caricamento della pagina richiesta cliccando su qualche link (presente sia alla login sia sfogliando le varie email o compiendo altre operazioni).

Niente di complesso, niente di trascendentale dal punto di vista tecnologico, ma l'idea di Google, che non avevo visto fino a quel momento in nessun'altra pagina era perfetta: dare all'utente l'idea che tutto fosse sotto controllo.

E questo era l'effetto che ne ricevevo: un senso di sicurezza!

Quel semplice messaggio, al posto di qualcosa di indefinito, mi parlava di un'attesa non casuale ma normale, programmata, controllata. Rispetto al resto delle pagine web dove non mi veniva mostrato nessun messaggio, nessun "Caricamento in corso...", quell'attenzione di Google subito dopo il mio click mi eliminava quell'imbarazzo dell'aspettare senza sapere quanto e senza capire a volte cosa stesse veramente accadendo o, peggio ancora, senza capire se stava accadendo qualcosa o se fossi incappato in qualche errore. In pratica, quel piccolo accorgimento non faceva più scattare nella mia testa le classiche domande che partono automaticamente quando il caricamento di una pagina, dopo un nostro click, risulta particolarmente lento - "ma la rete va? Funziona?".

Oggi molti servizi web-based hanno seguito la stessa scia e non solo Gmail utilizza questo semplice sistema per informare l'utente che la sua richiesta è in elaborazione.

Dunque, come poter implementare qualcosa di simile da sfruttare nelle nostre applicazioni web-based?

Riprodurre un effetto simile a questo non è affatto difficile: con un semplice javascript ed un div nascosto, si può eguagliare - o anche personalizzare a nostro piacimento - il messaggio di notifica dell'elaborazione in corso rendendo la nostra pagina web - o la nostra applicazione web-based, che dir si voglia - molto piacevole per la navigazione e fornendogli un tocco in più di professionalità che può fare la differenza agli occhi di chi la utilizza.

Ecco un semplice esempio (↗). Analizzando l'HTML notiamo al suo interno:

➜ la funzione javascript che mostra il messaggio nel momento opportuno (ShowContent());
➜ l'elemento div all'interno della pagina che contiene il messaggio da mostrare fin quando non viene caricata la pagina successiva;
➜ un link che richiama la funzione prima di ridirezionare verso la pagina desiderata.

Con poche mosse abbiamo creato qualcosa di efficace e funzionante, di sicuro gradimento.