Internet tascabile
L'esperienza d'uso degli utenti internet che usano iPhone e iPod Touch è molto positiva grazie alla tecnologia multi-touch e alla versione mobile di Safari, che consente la consultazione dei normali siti web.
Sebbene la maggior parte dei siti attualmente online siano tranquillamente consultabile, si potrebbe voler realizzare un sito o un servizio dedicato a questi dispositivi. Il primo problema che si ha, in questa situazione, è fare in modo che l'iPhone e l'iPod Touch siano rediretti nella sezione a loro dedicata quando si collegano alla propria home page o a una pagina di vostra scelta.
In questo primo articolo, che dedicheremo allo sviluppo di siti internet ottimizzati per iPhone e iPod Touch, vedremo come risolvere questo problema.
Figura 1: a sinistra l'iPhone a destra l'iPod Touch
User Agent
Come probabilmente saprete ogni browser possiede uno User Agent, una stringa testuale che consente al sito web di sapere con che browser e con che piattaforma ci si sta collegando. Anche Safari nella versione per iPhone e per iPod Touch ne possiede uno, anzi in questo caso due, uno per un dispositivo e uno per l'altro. Potete osservarli qui sotto:
Lo User Agent di Safari per iPhone
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
Lo User Agent dell'iPod Touch
Mozilla/5.0 (iPod; U; CPU like Mac OS X; en) AppleWebKit/420.1 (KHTML, like Gecko) Version/3.0 Mobile/4A93 Safari/419.3
Grazie a questa firma che i due dispositivi lasciano quando si collegano al vostro sito, saremo in grado di realizzare un redirect funzionante solo con iPhone e iPod Touch.
Redirezione sul sito ottimizzato
Come dicevamo è possibile ottenere facilmente un redirect per iPhone e iPod Touch sfruttando lo User Agent. Nel JavaScript che potete osservare qua sotto, viene letto lo User Agent alla ricerca delle stringhe iPhone e iPod, se vengono trovate si viene rediretti sulla pagina ottimizzata, se invece non viene trovata si rimane sulla pagina contenete lo script.
Nella riga dove è presente il comando location.replace dovrete sostituire l'indirizzo posto come esempio con l'indirizzo della vostra pagina.
<script language=javascript>
if((navigator.userAgent.match(/iPhone/i)) || (navigator.userAgent.match(/iPod/i)))
{
location.replace("http://iphone.comefarea.it");
}
</script>
Figura 2: il redirect carica sull'iPhone la pagina ottimizzata per il dispositivo
Facciamo il contrario
Una volta che il vostro sito ottimizzato è pronto ed è online, sarà accessibile da tutti, compresi i browser in versione desktop. Questo potrebbe essere un problema, perché un sito ottimizzato per l'iPhone non ha senso che venga visto con un computer che supporta risoluzioni maggiori mente non supporta alcune peculiarità degli script disponibili con il WebKit dell'iPhone. Come fare allora in modo che se un utente si collega dal computer al sito ottimizzato per l'iPhone venga rediretto su quello in versione desktop? La soluzione è molto semplice, potete utilizzare lo script che abbiamo appena visto, con la differenza che dovremo riconoscere non l'iPhone o l'iPod Touch, ma i browser per PC e Mac.
Anche in questo caso si userà una stringa presente negli User Agent dei vari browser. Dato che sarebbe lungo riconoscere ogni singolo browser, nel nostro caso è sufficiente riconoscere la piattaforma. Le più diffuse sono Windows, Mac e Linux, quindi ci limiteremo a impedire l'accesso al sito dell'iPhone solo a queste piattaforme.
Come abbiamo detto lo script è il medesimo, ma come potete notare sono cambiate le stringhe ricercate che adesso sono appunto Macintosh, Windows e Linux.
Come nel caso precedente nella riga dove è presente il comando location.replace dovrete sostituire l'indirizzo posto come esempio con l'indirizzo della vostra pagina in versione desktop.
<script language=javascript>
if((navigator.userAgent.match(/Macintosh/i)) || (navigator.userAgent.match(/Windows/i)) || (navigator.userAgent.match(/Linux/i)))
{
location.replace("http://www.comefarea.it");
}
</script>
Figura 3: il redirect carica la pagina in versione desktop
Dove posizionare lo script
Dato che entrambi gli script che vi abbiamo mostrato devono essere letti dal browser dell'iPhone, dell'iPod Touch o dal browser di un computer, prima di caricare l'intera pagina è bene inserirlo nella parte alta del codice all'interno dei tag <head></head>.
Conclusioni
In questo primo articolo sullo sviluppo di siti web ottimizzati per iPhone e iPod Touch abbiamo visto come sia facilmente realizzabile un redirect che consenta di redirigere una pagina web su una ottimizzata per questi dispositivi e, viceversa come sia possibile fare il contrario.
Continuate a seguire i nostri articoli su iPhone, o seguiteli direttamente dal vostro iPhone o iPod Touch all'indirizzo http://iphone.comefarea.it.
|
