Programmare una WebApp per iPhone – Lezione 3 – Aggiungiamo Trio e Duo Buttons alla nostra Applicazione | Corso Sviluppatori iSpazio

Ecco la terza lezione del nostro nuovo Corso di Sviluppo a cura di Daniele Campogiani. Impareremo a creare WebApp per iPhone ovvero dei siti internet ottimizzati da visualizzare tramite Safari ed utilizzare come applicazioni o giochi. E’ un corso aperto a tutti gli utenti, sia Windows che Mac.

Lezioni Precedenti:

Iniziamo a ricapitolare i link alle lezioni precedenti in maniera tale che anche i nuovi utenti possano cimentarsi in questa cosa.

• Lezione 1 – Le prime informazioni sull’HTML ed i vari Tag
• Lezione 2 – Creiamo una Top Bar

.

Lezione 3:

Iniziamo questa nuova lezione segnalandovi il rilascio della nuova versione 5.0 di iWebKit che vi invitiamo a scaricare in quanto apporta notevoli migliorie sopratutto per quanto riguarda la velocità di caricamento delle pagine. Non preoccupatevi per le pagine che avete già scritto, non perderete nulla, dovete soltanto sovrascivere le cartelle css, images, javascript, pics e thumbs, lasciando invece le pagine precedentemente create. Se invece partite da zero e non avete ancora scritto nessuna pagine, il procedimento per creare il vostro progetto rimane lo stesso, e lo potete trovare qui.

Oggi parleremo di Trio e Duo buttons. Per favi capire di cosa si tratta vi alleghiamo subito due immagini:

Esistono diverse tipologie di barre di selezione quindi come prima cosa dovremo scegliere quella che desideriamo implementare. Si può segliere se avere 2 o 3 bottoni, ed inoltre se avrle a livello della top bar (come le immagini qui sopra) oppure più in basso (come vedrete più avanti).

Bottoni a livello della Top Bar

Iniziamo con le barre a due pulsanti che possiamo ottenere inserendo questo codice:

<div id=”duoselectionbuttons”><a href=”collegamento A”>Testo A</a><a href=”collegamento B”>Testo B</a></div>

Mentre per la barra con tre pulsanti il codice sarà:

<div id=”triselectionbuttons”><a href=”collegamento A”>Testo A</a><a href=”collegamento B”>Testo B</a><a href=”collegamento C”>Testo C</a></div>

IMPORTANTE entrambi questi codici vanno inseriti all’interno del <div> della topbar. Il risultato finale sarà qualcosa del genere :

<div id=”topbar”>

<div id=”triselectionbuttons”><a href=”A.html”>AText</a><a href=”B.

html”>BText</a><a href=”C.html”>CText</a></div>

</div>

Pulsanti inferiori rispetto alla Top Bar

Nel caso in cui vorreste inserire queste barre sotto una top Bar precedentemente creata dovrete seguire queste indicazioni:

Questa volta il codice da inserire andrà va messo all’interno del <div> riferito all top bar, ma immediatamente sotto, per avere 2 pulsati ecco il codice:

<div id=”duobutton”><div><a href=”A.html”>Text</a><a href=”B.
html”>Text</a></div></div>

e analogamente per 3 pulsanti:

<div id=”tributton”><div><a href=”A.html”>AText</a><a href=”B.
html”>BText</a><a href=”C.html”>CText</a></div></div>

potete trovare alcune pagine di esempio qui, il risultato finale sarà invece un qualcosa del genere:

Selezionare una voce

A questo punto è possibile selezionare una voce, come mostrato nelle immagini sottostanti, per far capire ad un utente in quale pagina si trova. Per eseguire tutto questo, il codice è il seguente:

??id=”pressed”

e va inserito come segue:

<div id=”triselectionbuttons”><a id=”pressed” href=”A.html”>AText</a><a
href=”B.html”>BText</a><a href=”C.html”>CText</a></div>

Anche per questa guida è tutto. Nel prossimo tutorial vedremo come “riempire” le pagine e come riempire i vari tab che abbiamo creato.