Il sito di i3factory visto dall'iphone

Con questo articolo abbiamo raccolto numerose referenze sul web e spiegheremo come inserire un codice che permetta di riconoscere automaticamente se sta autilizzando un iphone, un ipod touch o un’ipad .

Per il riconoscimento automatico suggeriamo di utilizzare una di queste 2 Metodologie:

1.0 Identificare automaticamente l’ iphone: creare un sito ad hoc ottimizzato iPhone (es: mobile.nomesito.it)

1.1 Identificare l’iPhone, ipod touch
Per riconoscere l’iphone o l’ipod touch e’ necessario identificare il tipo di browser attraverso l’user agent.
Come abbbiamo gia scritto nell’articolo “iphone layout : le giuste dimensioni per il web“, tutti gli apparati Apple utilizzano , di serie, Safari Mobile che come ogni browser ha un suo user agent, ossia la stringa che lo identifica ai web server.

L’user agent della versione 1 dell’iPhone e’ il seguente:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/X Mobile/Y Safari/Z
Dove al posto di X, Y e Z vi saranno le versioni dei vari componenti.

Identificando l’iPhone e ipod e’ possibile eseguire un rindirizzamento verso una pagina appositamente creata per iPhone o mostrare contenuto solo a chi si collega con quel dispositivo.
Per indirizzare un utente iPhone o ipad ad una nuova pagina (es: mobile.sito.it) si puo’ usare il seguente codice JavaScript:

< script type="text/javascript">
if ((navigator.useragent.indexof('iPhone') != -1) ¦¦
  (navigator.useragent.indexof('iPod') != -1)) {
  location.href = 'http://mobile.sito.it/';
  }
</script> 

Il seguente codice javascript:

navigator.useragent.indexof(‘mini’) != -1

Riconosce invece il browser “Opera mini” che viene utilizzato come browser alternativo , non di serie, in numerosi telefoni e apparati.

1.2 Identificare l’ ipad

Safari per iPad dispone di uno specifico user-agent diverso da quello dell iPhone, in modo da ricevere le pagine web nel loro formato originale.

Di seguito la stringa user agent per l’ipad di Jeff dePascale:
Mozilla/5.0(iPad; U; CPU iPhone OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B314 Safari/531.21.10

La nuova release del simulatore per iPad, contenuta nell SDK 3.2 beta 2, offre la possibilità di provare in anteprima la versione di Safari appositamente creata per sfruttare al massimo le potenzialita di questo dispositivo.

La risoluzione dello schermo dell iPad, 1024 x 768 pixel, ha permesso ad Apple di realizzare un browser ibrido, una via di mezzo tra Safari per Mac OsX e Safari per iPhone.

Come per il browser per iMac troviamo una barra degli strumenti in una posizione fissa, pur mantenendo un controllo multitouch per lo zoom e lo scroll della pagina.

La barra degli strumenti di Safari per Ipad e’ fissa e contiene tutti i controlli: dalle frecce di navigazione al box di ricerca.

1.3 Visualizzare un testo solo per chi naviga con iPhone

Con il seguente codice e’ possibile visualizzare sulle nostre pagine web un testo solo per chi naviga con iPhone.

<script type=”text/javascript”>
 window.onload = function () {
 if (navigator.userAgent.indexOf(’iPhone’) != -1) {
 var o = document.getElementById( ‘iphone’ );
 o.innerHTML = “<h1>Benvenuto iPhone!</h1>”;
 }
 }
 </script > 

Infine ci bastera posizionare il seguente div nella nostra pagina web, nel punto in cui vogliamo far visualizzare la frase.

<div id= iphone ></div>

2.0 Utilizzare lo stesso sito modificando o utilizzando il file CSS.

2.1 Assegnare un file CSS specifico per iPhone
Se non si vuole creare un sito web separato per l’iPhone, e reindirizzare Safari Mobile verso una diversa pagina html come abbiamo suggerito nel paragrafo precedente,e possibile impostare i file CSS in modo che prevedano per l’iPhone stili diversi da quelli utilizzati da altri browser.
L’iphone utilizza di una metodologia dei CSS3 chiamata Media queries.
Una media query verifica che il browser supporti determinate caratteristiche di visualizzazione (come la risoluzione) e sceglie in base alla risposta il CSS adatto.
Sull’iPhone che, come detto, puo avere in larghezza una risoluzione di 320 pixel o, se ruotato in orizzontale, di 480 pixel, bastera utilizzare la seguente sintassi per differenziare il suo foglio di stile da quello di altri dispositivi:

<link media=”screen and (min-device-width: 481px)” rel=”stylesheet” type=”text/css” href=”style.css” />

<link media=”only screen and (max-device-width: 480px)” rel=”stylesheet” type=”text/css” href=”iphone.css” />

Il codice leggerà il foglio di stile iphone.css per tutti i dispositivi che hanno una larghezza dello schermo minore o uguale a 480 pixel (max-device-width: 480px) mentre per tutti quelli che hanno una larghezza maggiore o uguale a 481 pixel (min-device-width: 481px) il foglio di stile sara style.css. Grazie alla chiave only i vecchi browser salteranno completamente la seconda istruzione.

2.2 Css specifici
Safari Mobile accetta alcuni codici (tag) proprietari che son compatibili esclusivamente per il webkit di iPhone.
Alcuni di questi sono utili per visualizzare elementi dalla grafica piu integrata con l’ambiente Apple.
E’ possibile richiamare i moduli di ricerca, i box testuali o le immagini dell’iPhone con classico contorno rettangolare arrotondato.
Per gestire gli angoli si usa la proprieta -webkit-border-radius. Un semplice CSS come questo:

.iphone {
 background-color: silver;
 padding: 10px 10px 10px 10px;
 width: 320px;
 -webkit-border-radius:10px;
 }
 .iphone img {
 margin: 5px 5px 10px 5px;
 border: 3px solid #666666;
 float: left;
 -webkit-border-radius: 5px;
 }

Richiamato nella pagina HTML da questo codice:

<div><img alt=”XXX” src=”immagine.png” />testo</div>

Visualizza un box con angoli arrotondati contenente un’immagine gli spigoli smussati.

Una proprieta CSS che puo essere utile nella creazioni di pagine web per iPhone e -webkit-text-size-adjust.
Essa interviene per adattare la grandezza del testo della pagina in modo che sia leggibile quando un utente esegue uno zoom. Il browser dell’iphone (Safari Mobile) esegue lo zoom automaticamente ma, in alcuni casi, e possibile che il testo venga adattato male. Si puo quindi disabilitare l’adattamento automatico (-webkit-text-size-adjust:none) oppure impostarlo a percentuali di grandezza piu elevate (-webkit-text-size-adjust:150%). Tale proprieta puo essere impostata per tutti o solo per alcuni elementi della pagina.

2.3 In conclusione : sara possibile utilizzare lo stesso file .CSS

Abbiamo la possibilita di condizionare la lettura del CSS a seconda della risoluzione del browser.

Sapendo che la massima larghezza dello schermo dell’ iPhone e di 480 pixel ( se tenuto in orizzontale!) possiamo inserire tra i tag <head> </head> il seguente codice nella nostra pagina web.

<link media= screen and (min-device-width: 481px) rel= stylesheet type= text/css href= stile.css />

<link media= only screen and (max-device-width: 480px) rel= stylesheet type= text/css href= iphone.css />

La prima linea di codice abilita la lettura di stile.css se il browser e almeno 481 pixel mentre la seconda abilita la lettura di iphone.css se il browser in questione arriva a una larghezza massima di 480 pixel.

Nel primo caso staremo utilizzando un browser qualsiasi, mentre nel secondo caso si tratta di un browser iPhone.

Questa semplice stratagemma ci permette di creare per la stessa pagina web delle classi differenti che verrnno attivate a seconda del browser.

3.0 Codici utili da inserire in un sito per iphone, ipod touch e ipad

Ecco alcuni codici utili da usare per ottimizzare il vostro sito per iPhone.

3.1 Inserire icona sito mobile

L’iPhone permette di aggiungere l’icona di un sito direttamente sulla pagina principale del telefono (Springboard o Home) per facilitare un accesso rapido.

E possibile personalizzare l’icona (web clip) che il telefono usera per identificare il sito semplicemente aggiungendo alla cartella principale del sito un’icona in formato .png chiamata apple-touch-icon.png.
Se si vuole limitare l’icona ad una pagina si usa questo codice:

Inserire tra i tag <head> </head>

<link rel=”apple-touch-icon” href=”/icona.png” />

3.2 Inserire numero di telefono attivo

Ecco come inserire un numero di telefono attivo da iPhone

<a href= tel:02-831212 ≥>02831212</a>

3.3 Nascondere la barra indirizzo

In questo modo molto semplice possiamo nascondere la barra degli indirizzi quando una pagina viene caricata, e guadagnare cosi 60 pixel:

<body onload=”setTimeout(function() { window.scrollTo(0, 1) }, 100);”>

Dalla versione due dell’iPhone si puo utilizzare un sistema piu semplice:

<meta name=”apple-touch-fullscreen” content=”YES” />

3.4 Identificare browser iPhone

Basta inserire il seguente codice nella nostra pagina web e il link alternativo per il browser iPhone

< script type= text/javascript >
if (navigator.userAgent.indexOf( iPhone ) != -1) {

location.href = http://iphone.sito.it/ ;
}
</script>

3.5 Bordi arrotondati con CSS

WebKit, il motore del browser accetta alcuni tag proprietari che possono aiutarci a creare una grafica piu elegante e curata.

Potete vedere tutti i tag su Safari CSS Reference.

.iphone img {
margin: 5px 5px 10px 5px;
border: 3px solid #666666;
float: left;
-webkit-border-radius: 5px;
}

3.6 Scalare la visualizzazione del browser

Quando un sito web viene caricato nel browser viene effettuato uno scaling da 980 pixel a 320 pixel verticale, 480 pixel orizzontale.

Se il nostro sito web e minore di 980 pixel avremo delle bande laterali bianche.

Per ovviare a questo problema basta impostare la misura iniziale su cui fare lo scaling in questo modo.

<meta name= viewport content= width=800 />

3.7 Impostare proprieta ZOOM browser iPhone

In questo modo possiamo limitare il massimo e minimo zoom durante la navigazione su browser iPhone

<meta name= viewport content= initial-scale=0.6, minimum-scale=0.4, maximum-scale=0.8 />

3.8 Inserire un video manualmente

Per includere un video all’interno di una pagina Web destinata all’iPhone si puo utilizzare questo codice:

<embed src= immagine.jpg href= movie.m4v type= video/x-m4v target= myself scale= 1 […]>

In questo modo l’iPhone visualizzera , al posto di un poco significativo triangolo grigio, l’immagine Jpeg specificata dall’attributo src. I filmati che l’iPhone accetta sono quelli codificati in H.264 o MPEG-4 Part 2 video, gli stessi riproducibili sull’iPod.

4.0 Link specifici: numeri di telefono, mappe google e video Youtube

L’iPhone gestisce almeno tre tipi di link in modo differente rispetto ad un tradizionale browser: i link a numeri di telefono, i link a mappe di Google Mappe e i link a video di Youtube.
La prima volta che Safari Mobile carica una pagina in memoria questa viene scansionata alla ricerca di numeri di telefono. Se trovati, i numeri di telefono vengono resi cliccabili in modo che toccandoli si avvii automaticamente una chiamata.
A volte alcuni numeri di telefono non sono interpretati correttamente e altre volte vengono resi cliccabili anche numeri di partita IVA o altri. Per evitare che altri numeri vengano interpretati come numeri telefonici si usa questo meta-tag:
<meta name=”format-detection” content=”telephone=no”>
che disabilita la ricerca di numeri per l’intera pagina. Per attivarli singolarmente si dovr√† dunque usare quest’altro codice:

<a href=”tel:02-831212″>02831212</a>

I link a video di YouTube o a una mappa di Google Mappe aprono, rispettivamente, l’applicazione Youtube e l’applicazione Mappe dell’iPhone.
Per Google Maps funzionano i link dai vari siti di Google, per Youtube per aprire un video si deve invece inserire un link che punti al sito .com (sito madre) del servizio e non a quelli localizzati..

Ad esempio: questo link non sempre funziona sull’iPhone in quanto punta al sito italiano di Youtube:

<a href=”http://it.youtube.com/watch?v=g7_2qI-VQYM”>Gol di Grosso</a>

I seguenti links invece funzionano sempre:

<a href=”http://www.youtube.com/watch?v=g7_2qI-VQYM”>Gol di Grosso</a>
<a href=”http://www.youtube.com/v/g7_2qI-VQYM”>Gol di Grosso</a>