Daniele Campogiani Produttore e consumatore di Informazioni

Programmare una webApp per iPhone #4 – Il Contenuto

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!

Continua a leggere

Programmare una webApp per iPhone #0 – Introduzione Innauguro con questo articolo una serie di guide che hanno come obiettivo finale la realizzazione...

Programmare una webApp per iPhone #3 – Trio/duo buttons Eccoci con un nuovo appuntamento dei tutorial per programmare una webApp per iPhone, prima di iniziare...

Programmare una webApp per iPhone #1 – Sintassi HTML Eccoci al secondo appuntamento con la rubrica "Programmare una webApp per iPhone"! Oggi ripasseremo...

Programmare una webApp per iPhone #2 – Top Bar Benvenuti al terzo appuntamento di Programmare una webApp per iPhone, per oggi mettiamo da parte...