Come realizzare una Web App per iPhone
Il mercato dei dispositivi mobili è sempre in ascesa: tablet e smartphone con i loro sistemi operativi iOS, Android e Windows Phone 7 sono sempre più al centro dell’attenzione dei produttori, consumatori e sviluppatori.
Proprio quest’ultimi si dedicano quotidianamente alla realizzazione di applicazioni, basta dare uno sguardo all’App Store su cui sono presenti più di 300.000 di applicazioni molte delle quali realizzate da sviluppatori indipendenti.
Apple non ha fatto altro che aprirsi ai developer esterni fornendo kit di sviluppo per creare App e metterle in commercio. Ma cosa occorre per sviluppare un’applicazione? quanto costa? ma soprattutto come bisogna procedere?
Vediamo come rispondere a queste domande.
Come realizzare una Web App per iPhone
Non vi chiediamo naturalmente di comprarvi un Mac per entrare nel mondo della programmazione per iPhone, ma avete sicuramente bisogno di iWebKit, uno dei più semplici framework gratuiti che permette di creare una Web App anche sui sistemi Windows. Con iWebKit non occorre imparare nessun linguaggio, basta essere in possesso di qualche nozione di Html e Css, e utilizzare un editor di testo come Notepad ++.
Alla base di ogni Web App c’è da strutturare un buon layout grafico, che si crea proprio con iWebkit, e con un pò di Javascript ed altri linguaggi scripting realizzare più o meno quello che si desidera.
Vediamo ad esempio come procedere per realizzare una Web App che funge da vetrina per la presentazione dei prodotti di un’azienda.
Scaricato il file iWebKit5.04.zip dal sito ufficiale https://iwebkit.net/downloads, notiamo che al suo interno, tra gli altri file, c’è una cartella Framework incui troviamo ulteriori quattro cartelle: images e thumbs, contenenti gli elementi grafici da usare nelle Web App (pulsanti, switch e altro), la cartella con il Css che definisce l’aspetto dell’applicazione e, infine, quella che contiene le funzioni in Javascript. C’è poi il file Index.html, che può essere usato come punto di partenza per qualsiasi Web App. Questo file non è altro che un modello già preparato e collegato al Css di iWebkit.
Apriamolo con un editor di testo e analizziamone le parti principali. All’interno del tag head ci sono i riferimenti al file style.css e a quello con le funzioni in JavaScript function.js. Dentro il body, invece, c’è il contenuto vero e proprio della Web App, nello specifico possiamo vedere le tre aree da personalizzare topbar, content e footer.
Ecco l’index.html da cui creare la Web App:
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<link href=”css/style.css” rel=”style sheet” media=”screen” type=”text/css” />
<script src=”javascript/function.js” type=”text/javascript”></script>
</head>
<body>
<div id=”topbar”></div>
<div id=”content”></div>
<div id=”footer”></div>
</body>
</html>
La topbar è l’equivalente della navigation bar delle applicazioni classiche per iPhone. Dobbiamo scegliere un colore tra quelli disponibili e specificare un titolo e aggiungere due pulsanti, uno a forma di freccia con raffigurata l’icona di una casa per tornare alla Home e l’altro, un semplice tasto posizionato sulla destra e colorato in blu, che utilizzeremo per mostrare la pagina Info.
Per ottenere questo risultato dobbiamo modificare la porzione di codice dedicata alla topbar: <div=”topbar”></div>. Possiamo personalizare il colore con il parametro class a cui daremo il valore “back” per ottenre la topbar nera, e “transparent” per la versione trasparente. Per aggiungere il titolo Informarea dovremo, invece, inserire il div title. Per inserire i pulsanti dovremo usare il codice leftnav per il pulsante a freccia e blue-rightbutton per quello blu di destra:
<div id=”topbar” class=”transparent”>
<div id=”title”>Informarea</div>
<div id=”leftnav”>
<a href=”index.html”><img alt=”home” src=”images/home.png” /></a>
</div>
Si tratta di semplice HTML e per l’inserimento dell’icona del pulsante di sinistra, abbiamo usato il classico tag img. Altri tipi di pulsanti disponibili nel framework, che è possibile inserire a piacimento nelle topbar delle Web App, sono leftnav (pulsante a freccia sinistro), rightnav (freccia destra), leftbutton (grigio sinistro), rightbutton (grigio destro), blueleftbutton (blu sinistro), bluerightbutton (blu destro).
Si possono anche nidificare più leftnav o rightnav, facendo però attenzione ai limiti imposti dalle dimensioni del display dell’iPhone. Per farlo basta aggiungere altri tag a come segue:
<div id=”leftnav”>
<a href=”pagina1.html”>Pag 1</a>
<a href=”pagina2.html”>Pag 2</a>
</div>
Nella topbar è possibile inserire altri elementi: i duo/trio buttons. Per adoperarli dovremo utilizzare duoselectionbuttons o triselectionbuttons, ovviamente inserendo il codice all’interno del div topbar. Se invece li vogliamo subito sotto la barra di navigazione, basterà usare i div duobutton e tributton, questa volta subito dopo la chiusura della topbar. Potremo, infine, usare id=”pressed” nel tag a per visualizzare il tasto premuto dove occorre.
Di seguito il codice per utilizzare i duo/trio button:
<div id=”topbar”>
<div id=”duoselectionbuttons”>
<a id=”pressed” href=”s1.html”>Sel 1</a>
<a href=”s2.html”>Sel 2</a>
</div>
</div>
<div id=”tributton”>
<div class=”links”>
<a href=”b1.html”>Btn 1</a>
<a href=”b2.html”>Btn 2</a>
<a id=”pressed” href=”b3.html”>Btn 3</a>
</div>
</div>
Un altro elemento che è possibile inserire dopo la chiusura della topbar e prima dell’apertura del content, è il doublead, ovvero due box contenenti altrettanti file grafici in stile App Store.
<div id=”doublead”>
<a href=”https://www.informarea.it” style=”background-image:url(‘pics/asw.png’)”></a>
<a href=”http://www.prova.it” style=”background-image:url(‘pics/dev.png’)”></a>
</div>
Nel content invece gli elementi che possiamo inserire sono davvero tanti. Ad esempio possiamo costruire un elenco contenente le categorie delle pubblicazioni di un’azienda editoriale. Successivamente al “tap” su una voce da parte dell’utente, si aprirà un elenco con tutti i magazine di quella categoria. Gli elementi che inseriremo da qui in avanti sono posizionati sotto il doublead. e sono un titolo in blu seguito da una casella di testo e un elenco graficamente molto simile alle classiche tabelle (UITable), con all’interno più o meno dettagli. La maggior parte di questi elementi vengono gestiti con i tag ul e li, usati in Html per gestire gli elenchi. Sarà poi grazie al parametro class del tag li che visualizzeremo una voce della tabella (menu) piuttosto che una casella di testo (textbox). Inseriamo il codice sottostante, utile per costruire l’elenco con le categorie delle pubblicazioni, all’interno del div content:
<span class=”graytitle”>Informarea</span>
<ul class=”pageitem”>
<li class=”textbox”>
<span class=”header”>Description</span>
<p>Di seguito le categorie di Informarea</p>
</li>
</ul>
<span class=”graytitle”>Categorie</span>
<ul class=”pageitem”>
<li class=”menu”>
<a href=”Attualita.html”>
<span class=”name”>ATTUALITA'</span>
<span class=”comment”>Vai</span>
<span class=”arrow”></span>
</a>
</li>
<li class=”menu”>
<a href=”Musica.html”>
<span class=”name”>MUSICA</span>
<span class=”comment”>Vai</span>
<span class=”arrow”></span>
</a>
</li>
……
</ul>
Abbiamo quindi definito due sezioni oguna racchiusa tra tag ul, precedute da un titolo. Unica differenza è che il parametro class del tag li avrà valore textbox nel caso in cui stiamo inserendo la casella di testo e menu per gli elementi della tabella. Per ogni riga della tabella possiamo, inoltre, definire un nome (name), ovvero il testo visualizzato, un commento (comment), che verrà visualizzato in grigio ed eventualmente mostrare una freccia (arrow) che indica all’utente che può proseguire nella navigazione nella WebApp cliccando semplicemente su di una cella.
Continuiamo nella personalizzazione del content, introducendo un’ulteriore elenco sotto l’elenco delle categorie. Creiamo una sezione dedicata ai contatti in grado di interfacciarci con le applicazioni native del telefono, mail e mappe di iPhone, passando a esse al “tap” sulla rispettiva voce, alcuni parametri, come il numero di telefono da cui chiamare, gli indirizzi e-mail a cui scrivere, un link di Google Maps, che ci permetterà di aprire l’applicazione mappe nel luogo deisderato. Per far ciò prima della chiusura del content dobbiamo aggiungere il seguente codice avente lo scopo di interfacciarsi con le app native del telefono:
<span class=”graytitle”>Contatti</span>
<li class=”pageitem”>
<li class=”menu”>
<a class=”noeffect” href=”tel:+39…….”>
<img alt=”description” src=”thumbs/telephone.png” />
<span class=”name”>Chiamaci</span>
<span class=”comment”></span>
<span class=”arrow”></span>
</a>
</li>
<li class=”menu”>
<a class=”noeffect” href=”mailto:info@informarea.it?cc=prova@libero.it&subject=Richiesta informazioni&body=”Alla C.A. redazione Informarea”>
<img alt=”description” src=”thumbs/mail.png” />
<span class=”name”>Scrivici</span>
<span class=”comment”></span>
<span class=”arrow”></span>
</a>
</li>
<li class=”menu”>
<a class=”noeffect” href=”http://maps.google.it/maps?f=q&source=s_q&hl=it&geocode=&q=via+aldobrandeschi,+24+-+00100+Roma&sll=41442755,65789&sspn=18.100779,37.749023&ie=UTF&hq=&h near=Via+Aldobrandeschi,+24,+00154+Roma,+Lazio&z=16″>
<img alt=”description” src=”thumbs/maps.png” />
<span class=”name”>Vieni a trovarci</span>
<span class=”comment”></span>
<span class=”arrow”></span>
</a>
</li>
</ul>
Anche in questo caso il codice è semplice, con la riga <span class=”graytitle”>Contatti</span> verrà aggiunto un titolo grigio alla nuova sezione della pagina. Ai successivi elementi dell’elenco, invece, molto simili a quelli della prima parte del content, abbiamo aggiunto un link e un’icona dalla cartella thumbs inclusa nel framework.
Creiamo ora un elenco simile a quello dell’iTunes Store con tanto di stellette di valutazione per ogni elemento. Facciamo una copia del file index.html appena creato, rinominiamolo in Informarea.html e apriamolo con un editor di testo, Cancelliamo il codice all’interno del div content. Se visualizziamo un’anteprima del browser del file (ricordiamo che iWebKit è nato per lavorare con Safari) vedremo che abbiamo conservato la topbar con tutti i suoi elementi, incluso quello subito sotto la doublead.
Nel framework iWebKit esistono diversi elementi per la visualizzazione degli elenchi. Nello specifico: elenco classico, elenco in stile App Store, elenco in stile iTunes Store, elenco in stile libreria iPod.
Ma vediamo come procedere: inseriamo subito dopo l’apertura del content, un titolo:
<span class=”graytitle”>I libri più venduti</span>
E continuiamo con il tag ul all’interno del quale aggiungeremo poi, i vari elementi dell’elenco:
<ul class=”pageitem”></ul>
All’interno di ul inseriremo tutti gli elementi che desideriamo in questa forma:
<li class=”store”>
<a href=”Informarea.html”>
<span class=”image” style=”backgroundimage:url(“pics/logo.png”)”></span>
<span class=”comment”>Fabio Volo</span>
<span class=”name”>Le prime luci del mattino</span>
<span class=”stars5″></span>
<span class=”starcomment”>19€</span>
<span class=”arrow”></span>
</a>
</li>
Come potete vedere la struttura è semplice e personalizzabile. Potremmo inserire un’immagine per ogni elemento dalle dimensioni di 90×90 pixel. Nel caso fosse grande verrà ridimensionata in automatico.
Dopo l’immagine c’è un commento che verrà posizionato in alto, sotto il nome e a seguire possiamo aggiungere le stelle di valutazione grazie all’istruzione <span class=”stars5″></span>. Variando il numero di fianco stars, potremo visualizzare da 0 a 5 stelle. Possiamo, inoltre, aggiungere un commento subito dopo le stelle, che noi abbiamo utilizzato per indicare il prezzo della rivista. L’ultima riga non fa altro che inserire la freccia a destra per scendere ancora di un livello nella navigazione. Mantenendo questa struttura potremo inserire tutti gli elementi che vogliamo.
Gli ultimi aspetti da visualizare sono: la visualizzazione in modalità Full Screen, la Splashscreen (vista che anticipa il caricamento della WebApp) e al personalizzazione dell’icona che comprarirà nella springboard del nostro iPhone.
Per la visualizzazione Full Screen basta premere il tasto “+” in Safari Mobile, lato utente, e aggiungere la Web App nell’elenco delle proprie applicazioni.
Per inserire lo splashscreen ci basterà inserire nel progetto, nella cartella pics, un’immagine in formato .png grande 320×460 pixel, che chiameremo startup.png. Dopodichè dovremo inserire il seguente codice:
<link rel=”apple-touchstartup-image” href=”pics/startup.png” />
Per l’icona il procedimento è analogo: creiamo la stessa in formato .png di dimensioni 58×58 pixel, che chiameremo image.png e la inseriamo sempre nella cartella pics. Anche in questo caso prima della chiusura dell’Head inseriremo il seguente codice:
<link rel=”apple-touch-icon” href=”pics/image.png” />
L’avvio dello splash e il salvataggio dell’icona desiderata saranno automatici.
Abbiamo realizzato la nostra App.
