- Ugo Betori

Ugo Betori
Multimedia design
www.ugobetori.it
[email protected]
Multimedia design
Ugo Betori offre servizi e consulenza
per la graﬁca, il web e il mobile
design. Progetta e realizza siti
web, soluzioni e-commerce,
applicazioni per dispositivi mobile.
Consulente, tiene corsi di formazione
e aggiornamento. Collabora con il
portale HTML.it e con la casa editrice
Edizioni Master.
Graﬁca
Web design
E-commerce
Mobile design
Interactive design
Illustrazione
Rendering 3D
Consulenza
Training
Sebbene lo sviluppo di applicazioni iPhone
native richieda l’impiego dell’apposito SDK e
di competenze di programmazione piuttosto
avanzate, per la realizzazione di siti e applicazioni
web la situazione è decisamente più semplice. Se
si conoscono HTML, CSS e un po’ di javascript
si è già in possesso degli strumenti necessari
per sviluppare le proprie applicazioni. Il browser
dell’iPhone è infatti quasi del tutto simile al browser
Safari per desktop.
1. Applicazioni web vs applicazioni native
In linea di principio, si può affermare che un’applicazione web per l’iPhone è sostanzialmente un sito web
ottimizzato per il dispositivo della casa di Cupertino. Le caratteristiche di un’applicazione web di questo tipo
prevedono un’interfaccia disegnata mediante tecnologie web standard, la possibilità di essere accessibile mediante
un URL e l’ottimizzazione per le speciﬁche dell’iPhone. Viceversa, un’applicazione nativa richiede la conoscenza
di Objective-C, il linguaggio di programmazione di Apple, e viene installata nell’iPhone avendo quindi accesso
all’hardware del dispositivo (accelerometro, fotocamera, altoparlanti, ecc.). Ultima differenza di non poco conto
riguarda il processo di inserimento e soprattutto di approvazione dell’app stessa nell’AppStore. Per pubblicare
applicazioni in AppStore è necessario disporre della licenza ufﬁciale, questa ha un costo annuale di 99$. Oltre a
ciò, Apple si riserva il diritto di veriﬁcare le caratteristiche dell’applicazione nativa ed eventualmente di riﬁutarne
l’approvazione. Le applicazioni proposte all’AppStore devono rispettare il contratto del SDK, che prevede alcune
limitazioni. Ad esempio, è vietato duplicare funzioni già presenti nel sistema operativo dell’iPhone, come l’invio
di SMS e MMS, così come sono vietate applicazioni con contenuto a sfondo sessuale o violento. Altre limitazioni
possono riguardare l’uso di API di terze parti, ecc. In caso di riﬁuto, l’applicazione non viene pubblicata sull’App
Store ﬁno a quando non se ne presentata una nuova versione aventi le modiﬁche richieste. Un’applicazione web
invece non passa dall’AppStore e non è quindi soggetta ad alcuna “censura” e può essere liberamente pubblicata
come un qualsiasi sito web.
2. Il Safari dell’iPhone
Il browser utilizzato dall’iPhone è Safari Mobile che, a sua volta, si basa su WebKit, il motore di rendering di Safari.
Quasi tutte le tecnologie presenti in Safari per Desktop sono disponibili anche nella versione per iPhone. Esiste
quindi il pieno supporto ai linguaggi HTML 4.01, XHTML 1.0, CSS 2.1, parte del CSS 3, JavaScript 1.4, supporto
del Dom e funzionalità Ajax. Per quanto riguarda i formati immagine, Safari Mobile può visualizzare immagini
Gif, Jpg, Png e Tiff e riprodurre ﬁlmati in alcuni formati QuickTime e ﬁle MP3. Inoltre è in grado di convertite in
HTML e visualizzare ﬁle Pdf e Microsoft Ofﬁce (Word, Powerpoint, Excel). Per contro, l’iPhone non supporta la
tecnologia Flash, così come non permette di utilizzare Java. Inoltre ha un accesso limitato al ﬁle system. Per fortuna
è compatibile con le tecnologie Ajax e supporta gli eventi di JavaScript in modo tale da permettere di utilizzare
facilmente soluzioni di HTML dinamico.
Prima di iniziare a produrre le proprie applicazioni, è bene fare il punto su una caratteristica che è bene conoscere
per progettare al meglio le pagine HTML destinate al “melafonino”. Lo schermo dell’iPhone 3 ha una risoluzione
di 320x480 pixel ma, poiché alcuni pixel sono occupati dalla barra di stato e dalla barra dei pulsanti, solo parte
di questo spazio può essere utilizzato per visualizzare la pagina. In pratica questo porta ad avere una viewport
effettiva di 320x356px. Se poi si elimina la barra dell’indirizzo del browser, l’area utile sale a 320x416px. Occorre
poi considerare che il device può essere ruotato in posizione orizzontale fornendo, in questo caso, una viewport di
209x480px (269x480 senza barra degli indirizzi). Non bisogna dimenticare che l’utente può eseguire lo zoom di un
elemento di una particolare area per meglio visualizzare i dati in esso contenuti.
Quando l’iPhone carica una pagina Web esegue il cosiddetto scaling: ossia riduce la risoluzione della pagina
per farla visualizzare a dovere nella viewport del cellulare. A meno che non lo si imposti diversamente, il browser
presuppone che la pagina sia larga 980 pixel, dopodiché effettua lo scaling alla risoluzione di 320 pixel se il telefono
è in posizione verticale o 480 pixel se è disposto in orizzontale. Tale comportamento ha senso soprattutto quando
il browser cerca di visualizzare un sito web standard non destinato ai dispositivi mobili. Se invece si tratta di un sito
appositamente sviluppato per l’iPhone, il web designer tenderà a formattare i contenuti delle pagine sulla base delle
dimensioni effettive del dispositivo rendendo di fatto inutile lo scaling. Occorre quindi informare di ciò il browser
aggiungendo un meta tag nelle pagine HTML che compongono il sito:
<meta name=”viewport” content=”user-scalable=no, width=device-width” />
Il meta tag va inserito all’interno del tag <head> del documento HTML, consente di informare il browser riguardo
le dimensioni della viewport che, nel nostro caso, verranno calcolate in base alla larghezza (width) del dispositivo.
Occorre chiarire che tale accorgimento è valido solo per il Browser Safari, per la precisione tutti i software che
utilizzano il motore WebKit. Allo stesso modo, come vedremo nel prossimo capitolo, esistono proprietà CSS
speciﬁche per Web Kit, grazie alle quali è possibile far si che l’interfaccia delle nostre pagine appaia proprio come
un’applicazione per iPhone.
3. Struttura del documento HTML
Meta tag a parte, il documento che costituirà un’ipotetica homepage potrebbe contenere del semplice codice HTML
standard, come ad esempio:
<div id=”contenitore”>
<div id=”menu”>
<h1><a href=”index.html”>Ugo Betori</a></h1>
<div id=”menu_principale”>
<ul>
<li><a href=”soluzioni.html”>Soluzioni</a></li>
<li><a href=”portfolio.html”>Portfolio</a></li>
<li><a href=”download.html”>Download</a></li>
</ul>
</div>
<div id=”menu_secondario”>
<ul>
<li><a href=”info.html”>Info</a></li>
<li><a href=”blog.html”>Blog</a></li>
</ul>
</div>
</div>
<div id=”contenuti”>
<h2>Benvenuti sul sito per iPhone</h2>
<p>lorem ipsum dolor...</p>
</div>
</div>
La pagina è composta da una serie di elementi div opportunamente nidiﬁcati ed identiﬁcati tramite id. Oltre al
contenitore che svolge il ruolo da cui prende il nome, sono presenti un menu_principale, un menu_secondario
e un ultimo div di nome contenuti. Naturalmente si tratta di una disposizione e di una nomenclatura decisamente
arbitraria. Ciò che conta infatti sta scritto nel foglio di stile che si andrà ad associarvi.
4. Fogli di stile per WebKit
Come anticipato, WebKit accetta alcuni tag proprietari che non sono disponibili per altri browser. Alcuni di questi
sono davvero utili per creare elementi graﬁci dal look and feel tipico dell’ambiente iPhone. Ad esempio, i moduli di
ricerca, i box di testo o le immagini dell’iPhone, non hanno il classico contorno rettangolare ma presentano angoli
arrotondati. Per applicare questa visualizzazione degli angoli si usa la proprietà speciﬁca:
-webkit-border-radius
che è possibile assegnare sia ai tag div che ai tag delle immagini.
Grazie a questo semplice esempio, si è ora in grado di leggere al meglio il foglio di stile che gestisce la
formattazione delle pagine HTML: ogni volta che si incontra una proprietà che inizia con il preﬁsso
–web kit si saprà che si tratta di una proprietà speciﬁca valida solo per i browser basati su Web Kit.
Il foglio di stile di esempio potrebbe quindi contenere le seguenti proprietà:
-webkit-gradient(linear, left top, left bottom, from(#ccc), to(#999));
-webkit-border-top-left-radius:8px;
-webkit-border-top-right-radius:8px;
-webkit-border-bottom-left-radius:8px;
-webkit-border-bottom-right-radius:8px;
Il primo della lista è decisamente interessante: permette di impostare un background contenente una sfumatura
generata senza l’impiego di ﬁle di immagine. I parametri da sinistra a destra presenti tra parentesi deﬁniscono
rispettivamente il tipo di gradiente ( che può essere linear o radiant), il punto iniziale (left top), il punto ﬁnale (left
bottom) e i colori della sfumatura. Le altre quattro proprietà della lista si possono ricondurre alla sola caratteristica
del bordo arrotondato visto sopra. Nel caso speciﬁco un valore di 8 pixel per il raggio della curva viene assegnato a
tutti e quattro gli angoli del rettangolo (top-left, top-right, bottom-left e bottom-right). Inﬁne, si può utilizzare anche la
proprietà text-shadow:
text-shadow:0px 1px 0px #fff;
grazie alla quale è possibile applicare un effetto ombra al testo. In questo caso non si tratta di una proprietà
speciﬁca di Web Kit, tanto che essa è rappresentata correttamente anche da altri browser. I parametri da sinistra a
destra riguardano l’offset orizzontale, quello verticale, la sfocatura e il colore dell’ombra.
Ora, se si prova ad aprire la pagina all’interno di Safari si potrà apprezzare il risultato ottenuto. Vale senz’altro la
pena di rpovare a visualizzare la pagina anche tramite InternetExplorer o Firefox per cogliere le differenze. Chi
possiede un Mac e ha installato XCode e l’SDK per iOS può testare la pagina anche sull’emulatore iPhone.
5. Webkit il motore di Safari
WebKit è un progetto open source nato dalla combinazione di componenti del sistema graﬁco KDE e di tecnologie
Apple. Come anticipato, WebKit costituisce il motore del web browser di casa Apple, e non solo. Esso permette a
sviluppatori terzi di includere con facilità nelle loro applicazioni molte delle funzioni proprie di Safari. Dal punto di
vista tecnico, WebKit include due framework di basso livello: WebCore (un parser HTML e un renderer basato su
KHTML) e JavaScriptCore (un motore JavaScript basato su KJS). Tra le applicazioni che usano Web Kit ricordiamo
anche Chrome, il browser sviluppato da Google; NetNewsWire, un lettore RSS che usa WebKit per visualizzare
i feed RSS e per navigare sul web; BBEdit, un editor di testo e di pagine HTML, che usa WebKit per visualizzare
l’anteprima delle pagine web, i cellulari Nokia da Symbian S60v3 in su.
6. Ad ognuno il suo
Ogni browser ha un suo user agent, una stringa di testo che lo rende identiﬁcabile dai web server. L’user agent
dell’iPhone 3 è il seguente:
Mozilla/5.0 (iPhone; U; CPU like Mac OS X; en) AppleWebKit/420+ (KHTML, like Gecko) Version/X Mobile/Y Safari/Z.
Individuando lo user agent è quindi possibile approntare alcuni accorgimenti che migliorano il comportamento delle
pagine al cospetto dei diversi dispositivi mobili. Allo stesso modo, qualora si possiedano diverse versioni del sito,
è possibile realizzare un reindirizzamento verso una homepage appositamente disegnata per iPhone o addirittura
mostrare determinati contenuti solo a chi si collega con il melafonino. Ad esempio, con questo codice JavaScript è
possibile indirizzare l’utente iPhone ad una nuova pagina:
< script type=“text/javascript”>
if (navigator.userAgent.indexOf(“iPhone”) != -1) {
location.href = “http://miosito.it/iphone/”;
}
</script>
Mentre il codice seguente consente di visualizzare un testo dedicato esclusivamente a quanti navigano con lo
smartphone targato Apple (o a quanti sanno come spacciarsi per il suo user agent):
<script type=“text/javascript“>
window.onload = function () {
if (navigator.userAgent.indexOf(“iPhone”) != -1) {
var mioDiv = document.getElementById(“nascosto”);
mioDiv.innerHTML =“<h1>Testo esclusivo per l’iPhone.</h1>”;
}
}
</script >
Fatto questo, sarà sufﬁciente aggiungere, nel punto desiderato della pagina HTML, un elemento div vuoto al quale si
assegnerà l’id “nascosto”.