In un video precedente abbiamo indicato le conoscenze base per lo sviluppo di siti Web adatti all’iPhone. Abbiamo detto che, come suggerito da Apple, i siti possono essere o semplicemente compatibili con l’iPhone, ottimizzati o nativi, ossia costruiti con la massima aderenza all’interfaccia e alla logica d’uso del telefono. In questo video vedremo proprio come progettare siti nativi.
Un sito nativo per iPhone è quello del network di informazione tecnologia Cnet che vedete visualizzato in queste immagini. A differenza dei tradizionali siti per cellulari si nota una grafica del tutto integrata nel dispositivo, lo sviluppo in verticale dei contenuti sotto forma di lista e alcuni elementi grafici tipici dell’iPhone: i bordi arrotondati di moduli e pulsanti e le frecce accanto alle voci della lista.
Anche la logica di navigazione è simile alle applicazioni iPod o Mail del telefono: toccando un elemento di una lista si raggiungono, annunciati dalla classica icona Apple di attesa, elementi sempre più profondi nell’albero di navigazione. Le eventuali immagini sono anch’esse integrate nella lista, mentre i pulsanti di navigazione in alto sono dinamici e vengono sostituiti dalla voce precedente.
Non tutti i contenuti e gli elementi del sito originale si ritrovano nel sito per iPhone: chi naviga su cellulare ha bisogno di trovare le informazioni che cerca più velocemente di un navigatore desktop e lo deve fare in un ambiente che sia il più semplice possibile da usare. Via dunque i link ai feed rss, via le immagini, grande spazio al modulo di ricerca e una gerarchia che in pochi tocchi porti al contenuto d’interesse.
Poiché l’iPhone è compatibile con la versione 2.1 dei CSS e con parte della versione 3, è facile costruire il layout con i fogli di stile e separare da esso i contenuti. Questi, per mantenere compatta e dinamica l’interfaccia, vengono recuperati con istruzioni Ajax. Con un foglio di stile e un paio di file JavaScript è dunque semplice creare l’infrastruttura di base del sito.
In rete esistono diversi framework che forniscono questa infrastruttura e alcuni li vedremo più avanti. Lo strumento ufficiale Apple si chiama invece Dashcode, ed è distribuito gratuitamente con il Software development Kit per gli sviluppatori iPhone scaricabile dal sito developer.apple.com. Assieme al Dashcode, si troverà nell’SDK anche il simulatore di iPhone utilizzato in alcune animazioni di questo video.
In Dashcode sono presenti già alcuni modelli di sito predefiniti: ad hoc per realizzare un sito personalizzato, browser per siti con navigazione a livelli come quello che abbiamo visto sopra, utility per moduli personalizzabili e Rss o Podcast per la gestione di feed o file audio riproducibili online.
Il sito viene aperto all’interno di un’area di programmazione ed è possibile sia gestire l’interfaccia aggiungendo elementi grafici direttamente dalla libreria, sia utilizzare la visualizzazione del codice per apportare modifiche a mano. Sia la documentazione sia un sistema di aiuti passo passo facilitano l’apprendimento del software che, a volte, può sembrare un po’ ostico.
Per chi non volesse utilizzare il software di Apple esistono delle collezioni gratuite di file che forniscono le basi per progettare un sito per iPhone. Si tratta di set di file JavaScript e Css che consentono di ottenere subito un sito vuoto già completo della logica di programmazione e del layout tipico dell’iPhone.
Uno dei primi è il Cnet Iphone User Interface framework, ed è stato rilasciato con licenza open source da Cnet dopo la programmazione del suo sito Web per iPhone. Questo framework, derivato da un altro creato dall’iPhone developer team, è particolarmente indicato per i siti di notizie o focalizzate su risorse informative.
Chi avesse bisogno di moduli diversi, come, ad esempio, quelli dedicati alla visualizzazione di immagini o di campi informativi, può ricorrere all’Universal iPhone UI Kit, anche questo rilasciato con licenza open source da un programmatore spagnolo.
