• Web Design » Web Design » Grafica siti web e programmi

Ormai anche gli armadi sanno che Apple stà producendo, e già commercializza negli USA, un cellulare di ultima generazione: l' iPhone. A quanto detto ufficialmente dall' azienda, ne sono in programma 10 milioni di copie, da spargere in giro per i negozi del mondo. Essendo di ultimissima generazione, non può non permettere la navigazione in internet, che avviene tramite browser Safari. Ebbene, un Safari però riadattato alle esigenze ed alla potenza di un palmare, perchè poi questo in realtà è l' iPhone; un Safari che avrà quindi le sue caratteristiche, le sue interpretazioni di codice, il suo motore di rendering; non conoscendo però tali proprietà, si rischia di veder tagliati fuori i propri siti dalla visualizzazione su iPhone, il che significherebbe milioni di visitatori in meno.

E' tempo di pulizia

Safari per iPhone è stato progettato per non richiedere grandi adattamenti ai siti web per venir visualizzati correttamente, ma qualche accorgimento è sempre opportuno farlo. I punti da seguire saranno tre: raggiungere compatibilità con il motore di rendering di Safari per iPhone; adattare i contenuti al prodotto; creare una versione del portale diretta relativamente agli utenti iPhone (facoltativo).

Compatibilità

Innanzitutto, bisogna capire se il nostro sito è compatibile agli standard iPhone. Safari per iPhone supporta HTML/XHTML, JavaScript, W3C DOM; funzionano correttamente anche alcuni spezzoni di codice in Ajax, quali la tecnologia getElementById and XMLHttpRequest.

Problemi con i Plug-In

Grave mancanza in Safari per iPhone è il supporto a Flash. Nel caso in cui, infatti, un sito sia stato scritto in Flash, apparirà sull' iPhone come un cubo blu con un punto di domanda.

Nel caso ci si serva di Flash per permettere agli utenti di muoversi sul sito o di accedere ai files multimediali,ci sono alcune possibilità:

• attendere che Apple espanda il supporto a Flash;
• usare il browser detection, per capire tramite codice quale browser il visitatore stà usando ed agire, eventualmente, di conseguenza (mostrando, in caso di Safari iPhone, una versione più scarna del sito);
• affidarsi agli standard del web e non fissarci sul Flash.

Safari per tutti

Naturalmente, trattandoci in ogni caso di Safari, la versione del browser presente nell' iPhone, ha molte caratteristiche in comune con quella standard, ed accertarsi quindi che il proprio sito venga visualizzato ottimamente su quest' ultimo, permette una certa tranquillità di rendimento pure sull' iPhone. Esiste comunque una sezione sul sito di Apple dedicata interamente allo sviluppo di applicazioni web compatibili con l' iPhone alla quale si consiglia di fare costante affidamento. Per rimpiazzare il Flash nell' apertura dei files multimediali è stata inclusa una particolare versione di QuickTime, utilizzabile tramite le classiche tags <object> e <embed>. I files multimediali mostrati tramite di esso verranno riprodotti in una schermata a parte e disporranno unicamente del bottone "Play".

Per questo motivo Apple consiglia di creare un' immagine poster nel quale incorporare il file multimediale. Ecco il codice:

    <embed src="poster.jpg" href="movie.mov" » 
width="456" height="123" ...>

L' immagine poster verrà così visualizzata solamente al click dell' utente su "Play" , permettendo una buona visualizzazione tanto sull' iPhone che sui PC.

Adattamento

Una volta che si è stata raggiunta la compatibilità con l' iPhone ed i suoi "capricci" , bisogna cimentarsi nel migliorare l' esperienza dei visitatori e la loro permanenza sul sito. Avere un iPhone tramite il quale effettuare i test di certo aiuterebbe moltissimo, ma qui in Italia deve ancora arrivare, quindi non è proprio facilissima come cosa...ma ne faremo a meno.

Una delle caratteristiche più particolari dell' iPhone è la "viewport" , ovvero quella funzione che permette di visualizzare solo uno spezzone alla volta di sito. Questo perchè? Perchè le pagine web sono adattate alle dimensioni degli schermi da PC, mentre lo schermo dell' iPhone è di dimensioni ben minori...Per evitare quindi caratteri microscopici e selezioni impossibili, si è ricorso a questo stratagemma. Di default, aprendo una pagina web, la viewport è impostata per mostrare un riquadro del sito delle dimensioni di 980-pixel.

Naturalmente questo valore è facilmente editabile da ciascun utente, tramite particolari "scorciatoie tattili" offerte del dispositivo. Ma la stessa pagina web può impostare le dimensioni della viewport. Immaginiamo ad esempio una pagina con il contenuto di <body> esattamente di 808 pixel...Per dire al Safari-iPhone di crearevi una viewport della stessa grandezza, servirà il codice:

    <meta name="viewport" content="width=808" />

Il che trasformerà la viweport da 980 a 808 pixel.

Naturalmente l' iPhone modifica, in relazione alla dimensione della viewport, ciascun campo di testo presente nella pagina e la dimensione dei testi in essa contenuti. Per questo motivo potrebbe risultare controproducente l' utilizzo di oggetti con impostata una dimensione assoluta o una dimensione fissa. Si può quindi disabilitare tale funzione grazie al comando CSS:

    -webkit-text-size-adjust: none;

Altrimenti, si può utilizzare il comando ems per definirne le coordinate. Così facendo la grandezza di ciascun elemento varierà a seconda di quella della pagina che li contiene.

In alcuni casi si può voler impostare una dimensione testo maggiore per alcune parti da porre in risalto. Per esempio, si può voler ingrandire quanto scritto nell' header, e ciò lo si può fare aggiungendo una regola del tipo:

    h1 {
    -webkit-text-size-adjust: 200%;
  }

Stile per l' iPhone

Prima di proseguire è bene considerare l' hardware con il quale si stà trattando. Lo screen dell' iPhone visualizza infatti 160 pixels ogni pollice, e per utilizzarlo si usano le dita. Se si preme in un punto del display, lo spazio premuto sarà compreso tra i 40 e gli 80 pixels. Considerando la pagina web, quanti pixels ci sono tra due elementi selezionabili? Se la risposta è "meno di 40" , si stà chiedendo all' utente che visiterà il portale tramite iPhone uno sforzo immane per effettuare la sua selezione. Per questo è sempre bene ingrandire i font e gli elementi della pagina, magari raddoppiandone le dimensioni; ad esempio, se si ha impostata la dimensione di un font a 18px, buona idea sarebbe portarlo a 32px.

Ma come usare ed impostare queste regole allo stile del sito? Servirà l' attributo "media" interno alla tag <link>. Ecco cosa raccomanda Apple:

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

Così facendo i browser ignoreranno lo stile iphone.css se il display dell' utente sarà superiore in larghezza a 480px.

Integrare il sito con il resto dell' iWorld

Potrebbe essere piacevole per gli utenti integrare nel sito alcuni servizi rivolti all' iPhone, soprattutto poichè non è difficile interagire, da sito web, con i servizi Mail, Maps ed Applicazioni presenti sull' iPhone. Tutto dipenderà dall' attributo che si assocerà alla tag hrefs.

Associandovi mailto: verrà aperto il client Mail del dispositivo tramite il quale l' utente potrà impostare i vari parametri relativi alla mail che si stà per inviare. Ecco un esempio:

    <a href="mailto:zippy@esempio.it?subject=Oggettomail&body=Io »
<b>amo</b> %26lt;html%26gt; mail!">Ciao!</a>

Con il codice sopra-riportato, si invierà una mail del tipo:

    To: zippy@esempio.it
Subject: Oggettomail

    Io amo <html> mail!

Per quanto riguarda le Mappe invece il discorso è un po' diverso. Per aprire il client Google Maps integrato nell' iPhone infatti basterà che il link associato al collegamento ipertestuale inizi con “http://maps.google.com/maps”. In questo modo sarà l' iPhone a leggersi i campi location , start e destination, passarli al client e a mostrare il risultato.

I links più sexy di sempre

Veniamo ora alla funzionalità più accattivante dell' iPhone da comandare tramite pagina web: l' effettuare chiamate.

Supponendo di avere nella hCard della pagina dei contatti il codice:

    <div id="hcard-Ernestine" class="vcard">
    <span class="fn">Ernestine</span>
    <div class="tel">555-1212</div>
</div>

l' iPhone trasformerà la sequenza numerica 555-1212 in un collegamento ipertestuale che, se clickato, avvierà la chiamata a tal numero.

Naturalmente, si può evitare di mostrare il numero come clickabile, e si potrà creare una stringa con testo "Chiamami !" con associato il link alla chiamata:

    <a class="call" href="tel:555-1212">Chiamami !</a>

Attenzione però che tali links funzionano solo se avviati dall' iPhone! In un browser normale essi restituiranno un messaggio di errore, e sarebbe pergiunta meglio nasconderli, magari dal CSS:

    a.call {
    display: none;
    }

e mostrarli solo nello stile CSS dedicato ai visitatori tramite iPhone:

    a.call {
    display: inline;
    }

Entrare nello specifico: progettazione per iPhone

Dopo aver ottimizzato la struttura e l' aspetto del sito per iPhone, esaminiamo le scelte relative al design. Innanzitutto, tener sempre presente che le pagine aperte da Safari Mobile sono spesso ospitate nel network EDGE, ottimizzato per i cellulari, ma decisamente più lento del network "tradizionale". Ciò causa lunghi tempi di attesa per le richieste HTTP, in quanto sono diversi i passaggi che il cellulare effettua prima di trovare il server a cui inviarle.

Per questo motivo in alcuni casi ci si può sentir tornati nel '98, attrezzati di un modem 56K...proprio per tal motivo è bene monitorare le dimensioni dei files presenti sul nostro webserver:

• HTML - Utilizzare gli standard web ed i markup per ridurre al minimo la dimensione di ciascuna pagina;
• CSS - Usare media queries per assicurarsi che il numero di regole caricate all' accesso sia ridotto al minimo;
• Files Multimediali - Usare il QuickTime H.264 encoding e fare attenzione al bit rates di ciascun file;
• Immagini - Usare il CSS specifico per l' iPhone per caricare le immagine a risoluzione minima (lo schermo intanto non è delle dimensione di quello dei normali PC, la differenza non si noterà);
• JavaScript - Fare attenzione nell' uso del framework JavaScript, perchè tali codici aumentano le dimensioni di ciascuna pagina!

Obbiettivi

Ecco ora il grande passo: creare una sezione del sito apposita per chi naviga con l' iPhone. Perchè farlo?

Per rispondere bisogna immaginarsi l' iPhone, e dimenticarsi del PC. In questo infatti si possono avviare diverse applicazioni contemporaneamente, mentre nell' iPhone e nel suo display c'è spazio solamente per un' operazione alla volta. In una sezione dedicata interamente a tal dispositivo bisogna quindi prestar attenzione a non richiedere agli utenti più di una pagina/applicazione da avviare. Ricordarsi inoltre che, generalmente, chi naviga tramite iPhone è spesso lontano da casa, nella classica situazione "on-the-go". Per questo motivo bisognerà eliminare le funzioni inappropriate per questa tipologia di connessioni, mostrando solamente ciò che effettivamente può servire, e farlo in maniera immediata.

Una volta deciso cosa offrire nella "versione iPhone" del nostro sito, ricordarsi della:

• semplicità - ridurre al minimo fronzoli ed effetti grafici; chi naviga on-the-go non se li aspetta, non li vuole vedere, vuole giungere nel più breve tempo possibile al contenuto della pagina;
• spaziatura - più distanti tra loro saranno gli elementi del sito e più facile per l' utente sarà manipolarli, selezionarli ed interagirvi (ricordarsi, come già detto, una spaziatura tra essi di almeno 40 pixels);
• emulazione - l' iPhone ha creato un nuovo look personalizzato, ed adattarvi il proprio sito non sarebbe di certo mala cosa.

Tools utili

Ecco di seguito alcuni tools che potranno venir utili nel momento in cui si voglia creare per il sito un look simile a quello dell' iPhone.

• -webkit-border-radius CSS rule permette la facile creazione di elementi con angoli arrotondati;
• -webkit-border-image CSS rule per migliorare il background dei links con delle immagini;
• usare la <canvas> tag per disegnare immagini dinamiche e grafici
• Joe Hewitt’s iUI per lo sviluppo di interfacce riguardanti l' iPhone ed i suoi stili