Ecco la quarta 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 e da utilizzare per 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 – Aggiungiamo Trio e Duo Buttons all’applicazione
.
Lezione 4:
La lezione di oggi sarà un pochino più impegnativa perchè tratteremo l’argomento più importante: come aggiungere il contenuto allo scheletro della nostra applicazione che abbiamo creato con le altre lezioni. Per contenuto quindi si intende la parte centrale dalla nostra pagina, quella compresa tra la top bar ed il footer.
Il Contenuto
Innanzitutto il codice di questa sezione va racchiuso tra i seguenti tag:
<div id="content"></div>
Ora andiamo a vedere cosa abbiamo a disposizione.
Titoli in Grigio
Il primo elemento che andiamo ad analizzare è questo tag:
<span>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></ul>
Possiamo avere quanti pageitem vogliamo all’interno della nostra pagina, l’importante è che sia presente almeno una volta, 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></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>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>Titolo Grigio</span> <ul> <li> <span>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 menu e delle liste. A presto!
Leggi o Aggiungi Commenti