Come mostrare avvisi, motti o consigli in una pagina web.

Come mostrare in una pagina web o in un widget dei testi a rotazione a distanza di un dato lasso di tempo usando il javascript.

Nella realizzazione di un sito dinamico e nella sua gestione il suo amministratore ha due problemi fondamentali da risolvere: il tempo e lo spazio. Il tempo a disposizione è sempre troppo poco per affinarne il layout, migliorarne la SEO, valorizzarne i contenuti e promuoverlo adeguatamente.

Viceversa lo spazio è sempre troppo esiguo per mostrare ai visitatori occasionali tutti i contenuti principali che sono presenti nella pagina e nelle altre sezioni del sito. Lo spazio poi diventa ancora più angusto quando si vogliano inserire degli annunci o degli avvisi agli utenti.

Non mi riferisco tanto al Banner per la Cookie Law che il lettore vede una sola volta quando accede al nostro sito e neppure a avvisi fissi o avvisi fluttuanti quanto a considerazioni generali, avvisi generici, consigli, aforismi o altri concetti che si possano condensare in un solo paragrafo.

In questo articolo vedremo come unificare un numero teoricamente illimitato di frasi che verranno mostrate in modo continuativo ai visitatori a distanza di un determinato lasso di tempo senza che i visitatori stessi debbano rinfrescare la pagina. Queste frasi possono essere dei consigli di cucina per un blog di ricette, di comunicazioni commerciali per un sito di commercio online o di dichiarazioni particolarmente rilevanti da mostrare in siti di notizie politiche o sportive.

Come modello da personalizzare ho scelto una serie di motti celebri e non che saranno visualizzati uno di seguito all'altro. Quello che muterà sarà l'inizio della riproduzione che sarà casuale. Il codice che utilizzeremo come modello di questa personalizzazione è il seguente:

<script type="text/javascript">
var TextIndex = 0;
frase = new Array();
frase[0] = "Cesare Pavese: A che serve passare dei giorni se non si ricordano?";
frase[1] = "Jim Morrison: A volte basta un attimo per scordare una vita ma a volte non basta una vita per scordare un attimo.";
frase[2] = "Fabrizio de Andrè: Dai diamanti non nasce niente, dal letame nascono i fior.";
frase[3] = "Hermann Hesse: L'arte della vita sta nell'imparare a soffrire e nell'imparare a sorridere.";
frase[4] = "Albert Einstein: Non cercare di diventare un uomo di successo, ma piuttosto un uomo di valore.";
frase[5] = "Michel Montaigne: Un uomo che teme di soffrire soffre già di quello che teme.";
frase[6] = "Edmond Rostand: Che cos\'è un bacio? Un apostrofo rosa tra le parole \"t\'amo\"";
frase[7] = "Marcel Achard: Alle donne piacciono gli uomini taciturni. Credono che le ascoltino.";
frase[8] = "Joseph Addison:La lettura è per la mente quel che l'esercizio è per il corpo.";
frase[9] = "Woody Allen: Non condannate la masturbazione. È fare del sesso con qualcuno che stimate veramente!";
frase[10] = "Corrado Alvaro: La critica è l\47arte di far risuscitare i morti e di far morire i vivi.";
frase[11] = "Roberto Antoni: La fortuna è cieca, ma la sfiga ci vede benissimo.";
frase[12] = "Aristotele: Gli uomini colti sono superiori agli incolti nella stessa misura in cui i vivi sono superiori ai morti.";
frase[13] = "Aristotele: La filosofia è la scienza che ha per oggetto la verità.";
frase[14] = "Neil Armstrong: Questo è solo un piccolo passo per un uomo, ma un balzo gigantesco per l'umanità.";
frase[15] = "Jane Austen: La festa migliore è quella che finisce prima."; 
TextIndex = Math.random()*(frase.length);
TextIndex = Math.floor(TextIndex);
function rotazione() {
if (TextIndex == frase.length) {TextIndex = 0;}
document.getElementById("ruotare").innerHTML = frase[TextIndex];
TextIndex++;
setTimeout("rotazione();",7500);
}
</script>
<div align='center'>
<div id="ruotare" style="text-align:left; height:80px; width:320px; border: dotted 1px #036; color:#036; background-color: #FFFFC2; font-weight:bold; font-size:14px; font-family:Georgia; padding:8px;"></div>
<script type="text/javascript">rotazione();</script></div>

Tale codice può essere incollato in una pagina web in Modalità HTML oppure in un widget di Blogger andando su Layout -> Aggiungi un gadget -> Base -> HTML/Javascript in Sezioni del sito.

PERSONALIZZAZIONE DEI TESTI DA VISUALIZZARE

Il Javascript ha un Array composto da 16 elementi. Se gli elementi sono troppi possono essere eliminati a partire da quello con numero di ordine 15 se invece fossero pochi se ne possono aggiungere altri a partire dal 17-esimo che dovrà avere questa sintassi

frase[16] = "Testo del diciassettesimo elemento";

Si possono aggiungere anche testi con apostrofi e virgolette. Per evitare che il javascript le interpreti come codice l'apostrofo va sostituito con i caratteri \47 mentre le virgolette debbono essere precedute dalla backslash \. Esempio di testo con apostrofo: l'arte diventa l\47arte. Esempio di testo con virgolette e apostrofo: tra le parole "t'amo" diventa tra le parole \"t\47amo\".

PERSONALIZZAZIONE DELL'ASPETTO DEL RIQUADRO

Le frasi di testo verranno mostrate in un riquadro che può essere personalizzato nelle dimensioni, nei colori e nello stile. Il rettangolo proposto è largo 320 pixel e alto 80 pixel, ha il testo allineato a sinistra (text-align:left;) con il codice del colore del testo#036 e con il codice di colore dello sfondo #FFFFC2. Il testo ha caratteri con dimensione 14 pixel, ha Georgia come famiglia di font ed è in grassetto (font-weight:bold;). Il padding di 8 pixel fa in modo che il testo sia separato dal bordo da tale spazio. Lo stile del bordo è dotted 1px #036; mentre il riquadro è centrato nella pagina da <div align='center'>. Infine il valore 7500 indica che ciascuna frase resterà visibile per 7500 millisecondi cioè per 7 secondi e mezzo. Tutti  questi parametri possono essere personalizzati a piacere.