Siti web per iPhone: un'introduzione

L'iPhone, lo smartphone prodotto dalla Casa di Cupertino giunto alla sua quarta versione (o meglio "generazione") nel giugno del 2010, è probabilmente il dispositivo che più di qualunque altro ha certificato l'attuale tendenza evolutiva della Rete che vede il traffico Internet spostarsi in buona parte dalla navigazione "fissa", operata da un comune Pc domestico, a quella in connessione mobile.

In questo articolo, suddiviso in tre parti, analizzeremo le procedure necessarie per lo sviluppo di siti o applicazioni Web utilizzabili tramite iPhone e dispositivi compatibili, partendo dalla descrizione dell'ambiente di produzione di riferimento.

Safari Mobile: il browser dell'iPhone

ll browser di default in uso negli smartphone iPhone è Safari Mobile, o semplicemente Safari, lo stesso programma di navigazione predefinito per i sistemi operativi Mac Os X della Apple, ma pensato questa volta per l'adozione nei dispositivi mobili della stessa casa madre ed equipaggiati con il sistema operativo iOS, arrivato attualmente alla versione 4.3.

Il programma è stato realizzato utilizzando il framework Webkit che è anche lo stesso motore di rendering di un altro celebre browser come Google Chrome, nello specifico un "motore di rendering" è in pratica una componente che ha il compito di interpretare delle informazioni in entrata (input) codificate sulla base di un determinato formato e di elaborarle restituendone in output la corrispondente rappresentazione grafica, è quindi grazie ad esso che un programma di navigazione riesce a convertire un flusso di dati in comuni pagine Web.

Safari utilizza Nitro come motore JavaScript, cioè l'applicazione che interpreta ed esegue i sorgenti scritti in questo linguaggio; Nitro sfrutta una meccanismo denominato Just-In-Time [JIT] Compilation per convertire la dinamica di codice lato client in codice macchina ottimizzato per l'architettura del microprocessore ARM di cui è dotato l'iPhone, in pratica il motore JavaScript genera ed esegue codice consentendo di processare più velocemente i sorgenti.

Oltre che per tutte le versioni precedenti del linguaggio di markup per la creazione delle pagine Web, Safari per iPhone garantisce il supporto per buona parte delle specifiche HTML5 al momento definite e non ancora ufficiali, stesso discorso per quanto riguarda CSS con il supporto di un buon numero di elementi CSS3; questi fattori e la compatibilità del browser con la tecnologia Ajax permettono lo sviluppo di applicazioni Web interattive.

Non è invece disponibile il supporto per la tecnologia Flash di Adobe e per le applicazioni Java.

Individuare Safari di iPhone

Esattamente come accade per un qualunque altro programma per la navigazione su Internet, anche il browser predefinito dell'iPhone ha un proprio User Agent, cioè la porzione di richiesta HTTP tramite la quale un client viene identificato da un Web server; Safari Mobile su iPhone 4 con piattaforma iOS in versione 4.3 sarà per esempio associato al seguente User Agent:

UserAgent: Mozilla/5.0 (iPhone; U; CPU iPhone OS 4_3 like Mac OS X; en-us) AppleWebKit/533.17.9 (KHTML, like Gecko) Version/5.0.2 Mobile/8F190 Safari/6533.18.5

Questa stringa può essere impiegata per diversi scopi, come per esempio il rindirizzamento di un browser verso la versione di una pagina Web appositamente confezionata per l'iPhone, a tale scopo si potranno utilizzare delle direttive per il Web server inserite in un file .htaccess (o nella configurazione di Apache):

# redirect a versione ottimizzata per iPhone
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} iPhone
RewriteCond %{REQUEST_URI} !^/iphone/
RewriteRule .* /iphone/ [R]

Istruzioni che possono essere "tradotte" in Javascript nel modo seguente:

// redirect a versione ottimizzata per iPhone
if((navigator.userAgent.match(/iPhone/i))) {
window.location = "http://mobile.nomesito.it";
}

Tecniche come quelle proposte possono essere elaborate anche tramite linguaggi SSI come PHP, sono però in linea di massima sconsigliabili, nella realizzazione di un sito ex novo è invece buona norma tenere subito in considerazione la compatibilità dei layout e dei fogli di stile con i browser mobili; le soluzioni presentate possono però essere considerate come dei "rimedi d'emergenza" per i siti Internet più datati, tenendo comunque conto del fatto che Safari non è l'unico browser per la navigazione mobile in circolazione.

La Viewport: l'area per la visualizzazione

In generale è possibile spiegare il termine "Viewport" utilizzando la definizione "area rettangolare per la visualizzazione", nel caso specifico dell'iPhone esso indica appunto l'area del dispositivo in cui vengono presentati i dati e tramite la quale vengono forniti all'utilizzatore gli strumenti per l'interazione con questi ultimi.

Una delle differenze fondamentali fra la navigazione tramite questa tipologia di smartphone e quella classica attraverso il Pc sta proprio nelle caratteristiche e nelle funzioni svolte dallo schermo; il display di un iPhone è infatti per forza di cose nettamente più piccolo rispetto al monitor di un computer domestico, inoltre, se si escludono i moderni schermi touchscreen disponibili anche per i desktop ma poco diffusi, i monitor dei Pc svolgono unicamente la funzione di periferiche di output, mentre il display dell'iPhone è lo strumento più importante tramite il quale inviare input al dispositivo.

Si parlerà in seguito del rapporto tra applicazioni e tecnologia touchscreen, ora il discorso si soffermerà sulle dimensioni dell'area di visualizzazione; con l'iPhone 4 si ha una risoluzione pari a 960*640 pixel (grazie al display Retina), mentre per il modello 3GS il valore corrispondente è 480*320 pixel, dato che lo schermo dell'iPhone supporta la rotazione, le misure esposte sono valide sia in larghezza che in altezza.

Prendendo in considerazione la versione più datata (basterà fare le debite proporzioni per quella più recente con risoluzione doppia), la porzione di Viewport destinata ai contenuti è di 320x356 pixel con display ruotato in verticale, questo perché 20 pixel sono dedicati alla barra di stato, 60 alla barra degli indirizzi e 44 alla "pulsantiera". Tra questi elementi è eliminabile soltanto la barra degli indirizzi, per esempio tramite una semplice istruzione basata sull'event handler "onload" del tag <body> come la seguente:

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

in questo modo la barra verrà nascosta nel momento stesso del caricamento della pagina; un'alternativa compatibile anche con i dispositivi basati su Android e realizzata in Javascript potrebbe essere la seguente:

// nascondere la barra degli indirizzi di Safari Mobile
window.addEventListener("load",function() {
setTimeout(function(){
window.scrollTo(0, 1);
}, 0);
});

Nel caso di una rotazione in senso orizzontale si avrà nella Viewport del modello 3GS uno spazio destinato ai contenuti pari a 209*480 pixel o 269*480 pixel in seguito alla rimozione della barra degli indirizzi.

Lo scaling di iPhone

Nel momento in cui Safari carica una pagina Internet viene dato inizio ad una procedura denominata "scaling" grazie alla quale l'applicazione è in grado di ridurre la risoluzione della pagina per ottenere una visualizzazione ottimale all'interno della porzione di Viewport per i contenuti; in pratica il dispositivo non fa altro che impostare la larghezza dell'ipertesto ad una risoluzione predefinita di 980 pixel per poi scalarla; questa risoluzione è compatibile con il retina display dell'iPhone 4, nel caso del 3GS viene invece effettuata un'azione di scaling alla risoluzione di 320 o 480 pixel a seconda del senso di rotazione.

Layout con larghezza inferiore ai 980 pixel porteranno in questo caso a visualizzare degli spazi privi di contenuti o grafica ai lati, un problema di carattere non solo "estetico" che può essere risolto grazie ad HTML5 e CSS3, aggiornamenti concepiti appositamente per la realizzazione di interfacce in grado di adattarsi ai differenti dispositivi utilizzati per la visualizzazione.

A questo proposito si analizzi il codice seguente:

<meta name="viewport" content="width=device-width, user-scrollbar=no">
<link href="smartphone.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 0px) and (max-width: 320px)" >
<link href="desktop.css" rel="stylesheet" type="text/css" media="only screen and (min-width: 700px)">

Per quanto riguarda il meta-tag "viewport", esso ha il compito preciso di forzare l'ottimizzazione del layout di una pagina Internet al fine di permetterne la migliore visualizzazione possibile attraverso l'area dei contenuti di un dispositivo mobile; l'attributo "media" invece permette di specificare la larghezza minima o massima per la quale deve essere impiegato uno specifico foglio di stile.

Conclusioni

In questa prima parte della trattazione è stata affrontato il discorso relativo all'ambiente di produzione per un'applicazione Web destinata all'iPhone, per cui sono stati introdotti i concetti relativi al funzionamento dello smartphone, del browser integrato per la navigazione e dell'area di visualizzazione destinata alla presentazione dei contenuti; tutti elementi che influenzeranno direttamente la procedura di realizzazione dell'applicazione che prenderà corpo nelle prossime parti dedicate all'argomento.

Nella parte precedente di questo articolo si è sottolineato il fatto che la navigazione classica tramite Pc e quella tramite smartphone presentano differenze sostanziali, sui dispositivi come l'iPhone si naviga infatti tramite touchscreen e non tramite mouse o tastiera, questa caratteristica influisce direttamente sulla disposizione dei menu, dei contenuti e delle immagini e sulle modalità per la loro fruizione; il Web designer e lo sviluppatore dovranno quindi soddisfare tali esigenze creando per i layout delle proprie Web applications delle strutture che prevedano questo tipo di impiego.

Viewport e scala di rappresentazione degli elementi

Quando si realizza un sito Web per l'iPhone o per un altro smartphone touchscreen con caratteristiche simili, è opportuno porsi alcune domande:

• quali dovranno essere le dimensioni delle pagine?
• quale dovrà essere la disposizione delle pagine?
• i contenuti saranno visibili e leggibili non soltanto attraverso lo zoom?
• gli utilizzatori potranno utilizzare facilmente funzionalità per l'interazione come per esempio l'inserimento di testi all'interno dei campi di input?

Come è semplice notare, tutte le domande elencate riguardano principalmente un argomento, l'usabilità, cioè l'unità di misura grazie alla quale è possibile definire il grado di facilità e di soddisfazione con cui si compie l'interazione tra un utente e un applicazione o un dispositivo.

Prima di cominciare a realizzare un'applicazione per l'iPhone è quindi buona norma tenere conto del un limite morfologico dovuto alle dimensioni delle dita umane che possono occupare mediamente un spazio compreso tra i 40 e i 70 px, inoltre, bisogna considerare il fatto che una funzionalità, per esempio un menu per la navigazione, deve essere disposta in modo che gli elementi non siano sovrapponibili, per cui tra di essi dovrà essere presente una distanza (spaziatura) minima che ne semplifichi la digitazione; nello stesso tempo, date le ridotte dimensioni del display, sarà necessario evitare il più possibile la presenza di spazi inutilizzati.

Per risolvere i problemi di usabilità e compatibilità relativi alle dimensioni dello schermo e all'utilizzo del touchscreen, è possibile agire sulla scala di rappresentazione degli elementi visualizzati (zoom level), cioè il rapporto tra la dimensione degli oggetti e la loro dimensione effettiva espressa nella medesima unità di misura (i pixel), sfruttando nel contempo le funzionalità per lo zoom e l'orientamento fornite dal dispositivo; torna quindi in gioco la meta-key viewport che consente di impostare la larghezza e la scala iniziale dell'area di visualizzazione.

Se si prende per esempio in considerazione la navigazione Internet tramite iPhone 4, una pagina Web con larghezza inferiore ai 980px avrà bisogno di un tag viewport impostato in modo che questa si adatti all'area di visualizzazione e viceversa, eliminando inulti spazi vuoti laterali, se invece si realizza un'applicazione pensata nativamente per i dispositivi di Cupertino larghezza dell'elemento da visualizzare e larghezza dello schermo device dovranno coincidere quanto più possibile.

Nella prossima pagina vedremo le proprietà di questa meta-key.

Proprietà della meta-key viewport

Per gestire il rapporto tra area di visualizzazione ed elementi di pagina la meta-key supporta alcune proprietà che potranno essere impiegate e valorizzate sulla base del risultato che si desidera ottenere. Come già indicato poco sopra, la meta-key viewport si  indica con la seguente sintassi:

<meta name="viewport" content="width=device-width, user-scrollbar=no">

Mentre le proprietà sono le seguenti:

• width: definisce la larghezza in pixel, ha 980 come valore predefinito e supporta un intervallo numerico compreso tra 200 e 10 mila;
• height: consente di stabilire l'altezza in pixel, il valore predefinito corrispondente viene calcolato sulla base di quello associato alla proprietà width e dell'aspect ratio (rapporto matematico tra la larghezza e l'altezza di un elemento) relativo al dispositivo utilizzato, i valori consentiti sono compresi all'interno di un intervallo che va sa 223 a 10 mila;
• initial-scale: si tratta di un moltiplicatore che definisce la scala iniziale della Viewport, il suo valore predefinito è ottenuto in modo da adattare una pagina Web all'area di visualizzazione (e viceversa); l'intervallo relativo a questo valore è definito dai valori associati alle due proprietà elencate di seguito;
• minimum-scale: definisce la scala minima per l'area di visualizzazione, il suo valore predefinito è 0,25 e può essere ricompreso all'interno di un intervallo che va da un qualsiasi valore superiore a "0" (">0") a 10.0;
• maximum-scale: permette di stabilire la scala massima associabile alla Viewport, ha 1.6 come valore predefinito e supporta il medesimo intervallo di valori della proprietà precedente;
• user-scalable: definisce la possibilità o meno di un utilizzatore di zoomare un elemento (sia in ingrandimento che in ridimensionamento), inoltre, abilita o disabilita la possibilità di modificare la scala corrente, accetta yes e no come unici argomenti possibili ma il valore predefinito è il primo.

Tutte le proprietà elencate sono disponibili a partire dalla versione 1.0 di iOS, Vi sono poi delle proprietà speciali appositamente dedicate al dispositivo di riferimento e supportate da sistema della Apple in release 1.1.1 o superiore:

• device-width: definisce la larghezza del dispositivo in pixel;
• device-height: permette di stabilire il valore dell'altezza del dispositivo in pixel.

Quando si realizza una pagina Web per l'iPhone non è necessario definire tutte le proprietà della meta-key Viewport, infatti, nel caso se ne stabiliscano soltanto alcune, sarà lo stesso browser dell'iOS a determinare le restanti impostazioni; se per esempio venisse impostato un valore di scala pari a "1.0", l'applicazione prenderebbe in considerazione la proprietà device-width in visualizzazione portrait (dove il display è ruotato in modo che la larghezza sia inferiore all'altezza, tasto Home verso il basso) e la proprietà device-height per la visualizzazione di tipo landscape (larghezza superiore all'altezza, tasto Home a destra o sinistra); diversamente, nel caso in cui non si desideri che Safari effettui questo adattamento automatico al contenuto, dovranno essere valorizzate sia la proprietà initial-scale che width.

Il valore di initial-scale determinerà la proporzione iniziale utilizzata per il Viewport, se user-scalable dovesse essere impostato su yes l'utilizzatore avrà la possibilità di zoomare ma solo all'interno dell'intervallo definito da minimum-scale e maximum-scale; user-scalable potrà essere utilizzata anche per prevenire lo scorrimento di una pagina in seguito all'inserimento di un dato in un campo di input, ciò però sarà possibile impostando tale proprietà su no.

Sintatticamente, una scala iniziale pari a "1.0" potrà essere definita nel modo seguente:

<meta name = "viewport" content = "initial-scale = 1.0">

Come impostazione predefinita l'esempio proposto dovrebbe fare riferimento ad un'area di visualizzazione scalabile, condizione che può essere modificata in questo modo:

<meta name = "viewport" content = "initial-scale = 1.0, user-scalable = no">

Da notare come le proprietà di viewport vengono introdotte dalla chiave content a cui esse possono essere passate in associazione ai valori e separate da una virgola; device-width e device-height potranno essere utilizzate anche in luogo dei valori predefiniti, come nell'esempio seguente:

<meta name="viewport" content="width=device-width,initial-scale=1.0,user-scalable=no" />

dove device-width corrisponde ad un valore di 480px, che è appunto il valore predefinito per la larghezza.

Rotazione, orientamento e media query

Come anticipato, il display di un iPhone, può essere orientato in due modalità: portrait e landscape; a questo proposito, in JavaScript è disponibile la proprietà window.orientation a cui sono riferibili i seguenti valori:

• 0: corrisponde a portrait;
• -90: corrisponde a landscape con rotazione in senso orario a partire dall'orientamento portrait;
• 90: corrisponde a landscape con rotazione in senso antiorario da portrait;
• 180: rotazione a 180° da portrait.

La rotazione del dispositivo può essere rilevata come un qualsiasi altro evento, a questo scopo è infatti disponibile l'evento orientationchange che è in grado di intercettare il senso di rotazione e di restituirne il relativo valore espresso in gradi, un semplice test potrà essere effettuato con la seguente funzione JavaScript:

<script type="text/javascript">
window.onorientationchange = function() {
alert(window.orientation);
}
</script>

Utilizzare JavaScript per intercettare il senso di rotazione dello smartphone richiederebbe però molto più codice del necessario ora che CSS3 mette a disposizione le proprietà media query, delle quali sono stati introdotti alcuni esempi nella parte precedente di questa trattazione; esse hanno in pratica il compito di "interrogare" il dispositivo utilizzato e di restituire un foglio o delle regole di stile sulla base delle risposta ottenute relativamente a determinate condizioni, come per esempio dimensioni, proporzioni, risoluzione, tipologia di scansione, supporto per i colori e, naturalmente, orientamento.

In particolare le media query supportano l'opzione orientation che permette di definire se uno schermo è posto in senso orizzontale o verticale e accetta due valori che sono appunto Portrait e Landscape.

Introdurre le media query per definire stili appositamente concepiti per l'iPhone è abbastanza semplice come mostra l'esempio successivo:

<link type="text/css" rel="stylesheet" media="all and (orientation : portrait)" href="http://sito.com/portrait.css" />
<link type="text/css" rel="stylesheet" media="all and (orientation : landscape)" href="http://sito.com/landscape.css" />

La stessa impostazione dovrebbe consentire di intercettare l'orientamento nei diversi dispositivi dotati di accelerometro anche diversi dall'iPhone.

Conclusioni

In questa parte della nostra trattazione sono stati affrontati gli argomenti relativi alle problematiche correlate con lo Zoom level, la rotazione e l'orientamento dell'iPhone; nella prossima parte verranno analizzati gli strumenti disponibili per lo sviluppo di pagine e applicazioni Web dedicate a questo dispositivo.