Eccoci ad un altro appuntamento di Programmare una webApp per iPhone, la lezione di oggi sarà abbastanza impegnativa perchè tratteremo l’argomento più importante: come presentare il nostro contenuto.
Per contenuto intendo la parte centrale dalla nostra pagina, quella compresa tra la top bar ed il footer per intenderci.
Il Contenuto
Innanzitutto il codice di questa sezione va racchiuso tra i seguenti tag:
<div id=”content”></div>
e fin qui penso non ci sia nessun problema, ora andiamo a vedere cosa abbiamo a disposizione.
Titoli in Grigio
Il primo elemento che andiamo ad analizzare è questo tag:
<span class=”graytitle”>Qui il vostro titolo</span>
che semplicemente mostrerà un titolo personalizzato di colore grigio. Io personalmente lo trovo molto utile sopra ad una tabella(che vedremo più avanti). Ecco qui un esempio:
Le scritte “Stadio” e “Trofei” sono state ottenute così.
I Page items
E’ l’elemento più importante, e viene utilizzato come “raccoglitore” per inglobare altri elementi più semplici.
Crea infatti un gruppo di elementi che poi gestiamo come vogliamo, il tag è il seguente:
<ul class=”pageitem”></ul>
Possiamo avere quanti pageitem vogliamo all’interno della nostra pagina, l’importante è che sia presente almeno uno, ecco un’immagine per far capire ancora meglio cosa intendo:
In quest’immagine ho evidenziato ogni “pageitem” di rosso e li ho numerati, sono quindi presenti 4 “pageitem”.
All’interno di ognuno possiamo inserire diversi elementi, vediamo quali sono e le loro caratteristiche.
Textboxes
E’ semplicemente un blocco di testo nel quale possiamo scrivere quello che vogliamo, va inserito all’interno di un “pageitem” (come spiegato sopra) per vederlo apparire correttamente.
Il tag per richiamarlo è il seguente:
<li class=”textbox”></li>
e all’interno possiamo scrivere del semplice testo inserendo questo codice:
<p>Testo</p>
Oppure del testo in blu come titolo, in questo caso scriveremo:
<span class=”header”>Titolo</span>
Facciamo un piccolo riassunto:
Vogliamo una pagina con un titolo in grigio, sotto a questo un singolo gruppo di elementi (un solo “pageitem”) che all’interno abbia del testo con un titolo (una semplice “textbox”), ecco il codice che andremo a scrivere:
<div id=”content”>
<span class=”graytitle”>Titolo Grigio</span>
<ul class=”pageitem”>
<li class=”textbox”>
<span class=”header”>Titolo Blu all’interno della casella di testo</span>
<p>Il vostro testo</p>
</li>
</ul>
</div>
Per oggi è tutto, nella prossima lezione parlerò di menus e liste. Al prossimo Post!
Dunque per mostrare due titoli, nel tuo caso STADIO e TROFEI, come bisogna fare?
Marco ha scritto:
Nei commenti non posso scrivere del codice, perchè sarebbe interpretato. Ma lo trovi scritto nell’articolo, proprio sopra le immagini.
Devo scrivere due stessi tag con graytitle uno sotto l’altro?
Marco ha scritto:
Esatto!
Ciao Daniele, complimentissimi per i 5 tutorial che hai scritto! Molto molto chiari ed esaustivi e grazie a te son riuscito a capire come funziona una webapp.
A quando il 6° tutorial? ^_^
Stefano
Anche io volevo farti i complimenti per i tutorial e vorrei sapere quando scriverai il prossimo.
ciao, complimentoni per la guida… una curiosita, ho
creato la mia webapp, ma se volessi farla diventare una repo per
cydia. devo creare una applicazione con xcode. ho letto che tu dici
che la tua app e fatta in html, l’icona ecc come fai ad avviare
solo il file xxx.html dalla icona sull desktop del iphone. vorrei
capire questo, io ho provato a creare un plist una icona e il mio
xxx.html, ma non si apre, e penso xche’ non e compilato come app.
mi puoi aiutare? grazie…
Allora, ho risolto x quanto riguarda l’applicazione. volevo
chiedervi, se io imposto questa stringa: rel="nofollow">CHIAMA L’IPHONE CHIAMA IL 119 Se invece
imposto questo: rel="nofollow">TRASFERIMENTO IL mio iphone lo apre ma
non parte la chiamata che poi sarebbe il codice gsm. come si puo’
fare dal web!!! attendo una info… ciao e grazie
Purtroppo temo non sia fattibile.
Puoi utilizzare quei link per fare vere e proprie chiamate.
grazie per la tua risposta, la cosa strana, e che si apre il popup per fare la chiamata. ho chiesto ad un programmatore e mi ha comunicato che e sempre una chiamata ma di tipo gsm.
cerchero in rete qualche info.. grazie
Ma per associare al testo un link ? come bisogna scrivere ?
tipo: testo > e far apparire anche la freccetta ??
grazie
raga ma dove devo caricare index.html per usare il mio lavoro dall iphone?