La cosa può essere fatta senza troppa fatica utilizzando, lato client, le dovute funzioni javascript. Ovviamente, se le stringhe da alternare sono contenute nel codice (javascript), si va a perdere “materiale informativo”: in sostanza Google indicizzerà il sito in questione senza “valutare” le stringhe di testo aggiunte “by code” (lato client attraverso javascript).

Requisito: tutte le nostre stringhe che si alterneranno nella parte di visualizzazione dovranno, per forza di cose, essere presenti nel markup della pagina.

Qui di seguito espongo la mia soluzione, o meglio, l’inizio della mia soluzione: tempo permettendo spero di poter ampliare il codice riportato sotto fino ad ottenere una sorta di mini-libreria. Obiettivi finali del progetto:

• realizzare una soluzione “multi standard” che supporti sia pagine statiche (XHTML) che pagine dinamiche (ASP.NET e PHP);
• ottenere una soluzione flessibile che permetta di definire il testo in un file XML (per le pagine dinamiche);
• appoggiarsi alla libreria javascript jQuery.

Ecco la mia soluzione allo stato embrionale.

var current = -1
var max;

function timerEvent()
{
var Div = document.getElementById("bacheca");

if(Div != null)
{
var i;
var count;

if(current < 0)
{
for (i = 0, count = 0; i < Div.childNodes.length; ++i)
{
if(Div.childNodes[i].tagName == "DIV")
{
if(count < 1)
{
showDiv(Div.childNodes[i]);
}
else
{
hideDiv(Div.childNodes[i]);
}

++count;
}
}

current = 0;
max = count;
}
else
{
++current;
if(current >= max)
{
current = 0;
}

for (i = 0, count = 0; i < Div.childNodes.length; ++i)
{
if(Div.childNodes[i].tagName == "DIV")
{
if(count == current)
{
showDiv(Div.childNodes[i]);
}
else
{
hideDiv(Div.childNodes[i]);
}

++count;
}
}
}
setTimeout(timerEvent, 5000);
}
}

function showDiv(obj)
{
obj.style.display = "";
}

function hideDiv(obj)
{
obj.style.display = "none";
}

<div id="bacheca" style="height: 140px;">
<div>Text 0</div>
<div>Text 1</div>
<div>Text 2</div>
<div>...</div>
<div>Text n</div>
</div>

La funzione javascript [timerEvent] va collegata all’evento [onLoad] della pagina. Saranno visualizzate alternativamente ed in successione i vari DIV (contenuti nel DIV con id “bacheca”), quindi avremo: “Text 0”, “Text 1”, “Text 2”, …, “Text n”, “Text 0”, … Ovviamente il DIV “contenitore” va impostato ad un’altezza predefinita se si vogliono evitare ridimensionamenti (e riposizionamenti) ad ogni “cambio testo”.

In questo esmpio, il testo viene cambiato ogni 5 secondi (vedere linea 60 di codice javascript).

La mia attenzione è stata catturata in particolare dalla regola numero 2: NEVER Depend on Javascript.

Bad practice

<script language="javascript">
var now = new Date();
if(now.getHours() < 12)
document.write('Good Morning!');
else
document.write('Good Afternoon!');
</script>

Soluzione proposta

<p title="Good Day Message">Good Morning!</p>

var now = new Date();
if(now.getHours() >= 12)
{
var goodDay = $('p[title="Good Day Message"]');
goodDay.text('Good Afternoon!');
}

Non sono molto d’accordo circa il best practice proposto, motivo: una parte dei contenuti viene ancora generata dinamicamente via JavaScript , sottraendo quindi questi ultmi all’indicizzazione da parte dei motri di ricerca (ricordo che i motori di ricerca non “eseguono” gli script presenti o “invocati” nella pagina). In sostanza, come sostiene da tempo il mio caro amico Francesco Boschian: tutti i contenuti devono essere sempre presenti nella pagina, non generati “dinamicamente” via scripting (vedere come buon esempio il sito della Apple).

Qui di seguito propongo una soluzione molto “artiginale e grezza”, ma che nella sua modestia rappresenta un valido workaround per aggirare la cosa.

<input type="hidden" id="str1" value="Good morning!" />
<input type="hidden" id="str2" value="Good afternoon!" />
<p title="msg">Good Morning!</p>

var now = new Date();
if(now.getHours() >= 12)
{
var toSet = $('#str2').value;
}
else
{
var toSet = $('#str1').value;
}
var msg = $('#msg');
msg.text(toSet);

Evidente, purtroppo, la ripetizione della stringa “Good morning!”. Se però lato server possiamo sfruttare famework quali PHP o Asp.Net, il codice può diventare assai più “gradevole alla vista” .