Programma corso android

Febbraio giugno 2014 – Engim Torino – Corso di specializzazione

Ambiente di sviluppo Android
Struttura di un progetto Android
Componenti di un’applicazione Android
Sviluppo di una semplice applicazione Android

  • HelloAndroid
  • LanciaMoneta
  • LanciaDadi

Interfaccia utente in Android

Interfaccia utente in Android: Layouts
Interfaccia utente in Android: Controlli base (I)
Interfaccia utente in Android: Controlli base (II)
Interfaccia utente in Android: Controlli base (III)
Interfaccia utente in Android: Controlli di selezione (I)
Interfaccia utente in Android: Controlli di selezione (II)
Interfaccia utente in Android: Controlli di selezione (III)
Interfaccia utente in Android: Controlli di selezione (IV)
Interfaccia utente in Android: Controlli personalizzati (I)
Interfaccia utente in Android: Controlli personalizzati (II)
Interfaccia utente in Android: Controlli personalizzati (III)
Interfaccia utente in Android: Tabs
Interfaccia utente in Android: Fragments
Interfaccia utente in Android: ActionBar (I): Introduzione
Interfaccia utente in Android: ActionBar (II): Tabs
Interfaccia utente in Android: ActionBar Compat
Interfaccia utente in Android: Navigation Drawer

Menu in Android

Menu in Android (I): Menu e Submenu base
Menu in Android (II): Menu Context
Menu in Android (III): Opzioni avanzate

Widgets in Android

Interfaccia utente in Android: Widgets (I)
Interfaccia utente in Android: Widgets (II)

Gestione di Preferenze in Android

Preferenze in Android I: SharedPreferences
Preferenze in Android II: PreferenceActivity

Basi di Dati in Android

Basi di dati in Android (I): Primi passi con SQLite
Basi di dati in Android (II): Insert, update e delete record
Basi di dati in Android (III): select record

File in Android

File in Android (I): Memoria Interna
File in Android (II): Memoria Esterna (SD Card)

Trattamento di XML in Android

Trattamento di XML in Android (I): SAX
Trattamento di XML in Android (II): SAX simplicado
Trattamento di XML in Android (III): DOM
Trattamento di XML in Android (IV): XmlPull
Alternative per leggere e scriver XML in Android

Localizzazione Geografica in Android

Localizzazione geografica in Android (I)
Localizzazione geografica in Android (II)

Mappe in Android

Mappe in Android (Google Maps Android API v2) – I
Mappe in Android (Google Maps Android API v2) – II
Mappe in Android (Google Maps Android API v2) – III

Content Providers in Android

Content Providers in Android (I): Costruzione
Content Providers in Android (II): Utilizzo

Notifiche in Android

Notifiche in Android (I): Toast
Notifiche in Android (II): Barra di stato
Notifiche in Android (III): Dialogs

Accesso a Servizi Web in Android

Servizi Web SOAP in Android (1/2)
Servizi Web SOAP in Android (2/2)
Servizi Web REST in Android (1/2)
Servizi Web REST in Android (2/2)

Processi in background in Android

Processi in background I: Thread e AsyncTask
Processi in background II: IntentService

Debug di applicazioni in Android

Debug in Android: Logging

Approfondimenti

Google Play Services

Notifiche Push in Android – Google Cloud Messaging (GCM / C2DM)

Implementazione del Server

Implementazione del Client Android

Integrazione con Google+

Sessione Google+ (Sign-In)

Profilo e cerchie

Corso Android #10

Array e adapter

ListView

● Componente comunemente usato in una GUI su Android: la lista scrollabile
● Ogni elemento è a sua volta una View
● Quindi la ListView è un ViewGroup pur non essendo un layout
● Ci sono altri casi simili
– Gallery, CalendarView, DatePicker…

Array

Se le view contenute nella ListView sono statiche

  • Si definisce un array di risorse in res/values
  •  Si imposta l’attributo android: entries del tag <ListView> con un riferimento alla risorsa array

Approccio con vantaggi e svantaggi

  • Comodo quando i valori vanno configurati:
  • Per lingua, nazione, carrier, ecc.
  • Limitato sui dati visualizzabili:
  • Solo statici, solo testi semplici
Res/values/arrays.xml

Più spesso, i dati da visualizzare in una ListView sono dinamici
● Generati dal programma
● Estratti da un database
● Ottenuti da un servizio web
● Ecc.

In questi casi, si accoppia una ListView a un Adapter

● ArrayAdapter, CursorAdapter, ListAdapter, …

Un Adapter ha diversi compiti
● Ottenere i dati “grezzi” per una entry
● Costruire una View che rappresenti graficamente i dati “grezzi”
● Fornire la View al ViewGroup a cui l’Adapter è associato
● Notificare gli Observer quando i dati cambiano
● Alcuni altri compiti “amministrativi”
● È sempre possibile scrivere propri Adapter custom

Le diverse sottoclassi di Adapter traducono diversi formati di dati “grezzi”
● ArrayAdapter<T>: un array (Java) di elementi di tipo T
● Vari costruttori, con parametri:
● Context (per accedere alle risorse)
● ID del layout (XML) da utilizzare
● ID della TextView dentro il layout da popolare con i dati
● T[ ] o List<T> contenente i dati “grezzi”

altre forme di Adapter

  • CursorAdapter

– Adatta i risultati di una query SQL

  • ResourceCursorAdapter

– Adatta un array di risorse XML come se fosse un database

  • SimpleCursorAdapter

– Usa i risultati di una query SQL come identificatori per accedere
a testi e immagini fra le risorse XML

  • SimpleAdapter

– Usa una ArrayList<Map>, una riga per entry, una chiave nella
Map per ogni campo della riga (stringhe, booleani, immagini)

 

Oltre a visualizzare dati (con scroll), le ListView sono spesso usate per consentire all’utente delle scelte
● Attivare un elemento da una lista (azione → button)
● Scegliere un elemento da una lista (opzione → radio)
● Selezionare zero o più elementi da una lista (opzione → check)
● Espandere o collassare sezioni di una lista gerarchica (navigazione → tree)

Per riconoscere il click su un elemento;
● Si implementa l’interfaccia OnItemClickListener
● Lo si associa alla lista con setOnItemClickListener()
● Si aspetta che venga chiamato onItemClick()

ListActivity

Android fornisce una sottoclasse di Activity specializzata per contenere ListView
● Il layout di default contiene due view:
– La ListView, con id “@android:id/list” (= “list”)
– Opzionalmente, una view per il caso di lista vuota, con id “@android:id/empty”
● È anche possibile usate setContentView() per sostituire un proprio layout a quello di default
– Il proprio layout deve però contenere una ListView “list” e opzionalmente la view “empty”

Corso Android #9

Menu

● Android utilizza un sistema non-convenzionale per i menu
● Niente liste gerarchiche con etichette…
● Tre stadi:
● Il menu “primario” è composto da (solitamente al più) 6 caselle
con icone e opzionalmente testo
● Una di queste può essere un “Altro…” che mostra una lista di
voci più lunga
● Una voce può aprire un sottomenù (finestra floating)
● Si possono anche avere menù contestuali
● Richiamabili da un long click su una View

Il sistema decide autonomamente
come, dove e quante voci mostrare nel
menu primario
● Rispetta però l’ordine di importanza definito
dal programmatore
● Aggiunge automaticamente la voce “More”
che apre un menu secondario se ci sono
altre voci
● Il menu primario mostra preferibilmente
icone+testo, non checkmark o altro
● Il sistema può spostare delle voci
nell’ActionBar (da Honeycomb in poi)

Il modo più semplice di creare un menù è di usare
(come al solito) un file XML in res/menu/

<menu> definisce un menu
● <item> definisce una voce (con eventuale
sottomenu)
● <group> può essere usato per raggruppare più
<item> logicamente correlati, ma in maniera
“invisibile”
● Gli <item> ereditano alcune proprietà da <group>
– Per esempio, possono essere abilitati/disabilitati in blocco

Corso Android #8

Widget

Un ViewGroup può contenere un numero qualunque di View

● ViewGroup è una sottoclasse di View
● → Tipica gerarchia ad albero
● Una View che gestisce input è detta Widget
● Un contenitore di Widget è
detto Widget Host

Un ViewGroup che determina il
posizionamento dei figli è detto
LayoutManager

Il posizionamento si basa una
una negoziazione fra esigenze
del contenitore ed esigenze dei
contenuti
● Esistono molte strategie possibili
● E di conseguenza, molti layout
manager diversi

In Eclipse, i widget sono raggruppati in categorie
 Form widgets . classici (pulsanti, checkbox, …)
Text fields . campi di testo con varie regole di validazione
dell’input (nomi, numeri, password, …)
Composite . widgets che ne includono altri (tab multiple,
listview, webview, …)
Images & Media . widget per i multimedia (player video,
galleria di foto, c)
Time & Date . gestione del tempo (calendari, orologi, ecc.)
Advanced . widget specializzati (zoom, OpenGL, c)

button

Per i casi più semplici, la classe View offre anche la possibilità di definire nel layout XML il nome del metodo da chiamare in risposta a un evento

● Deve essere un metodo con un parametro di tipo View e tipo di ritorno void
● Deve essere un metodo definito nel “contesto” (ovvero: nell’Activity a cui appartiene la view)

Corso Android #7

View e Layout

view

Una UI Android è un albero con foglie di classe  View e nodi intermedi di classe ViewGroup
● tipicamente definito in XML
● ogni View è una classe Java con nome uguale al tag XML relativo

La disposizione visuale delle view è regolata da un Layout

A run-time, esiste un albero di oggetti Java che creato a partire dall’albero XML del layout
● Gli oggetti possono ricevere input dall’utente (si interfacciano col sistema touch)
● Quando si verifica un evento significativo, viene chiamato un handler
● La vostra Activity può registrare propri handler
● In Java, sono inner interfaces dentro la classe View
● Ogni interfaccia definisce un metodo on…Listener()

i costruttori

● View(Context c)
– Costruttore di base, associa la view al suo context (tramite il quale accedere, per esempio, alle risorse)
● View(Context c, AttributeSet attr)
– Costruttore chiamato quando la view viene creata a partire dalla specifica XML in un file di layout
– Da attr si possono ottenere i valori degli attributi, tramite metodi getter come getAttribute<tipo>Value(String namespace, String attributo, <tipo> valoreDefault)
● View(Context c, AttributeSet attr, int stile)
– Costruttore che in aggiunta applica uno stile (identificato dal suo ID di risorsa)

View(): non si può avere una view senza il suo contesto

 layout

  • AbsoluteLayout  Coordinate assolute (x,y) per ogni componente
  • LinearLayout  Serie verticale o orizzontale di componenti
  • RelativeLayout  Posizione di ogni componente relativo agli altri
  • GridLayout Griglia di celle di uguale dimensione; componenti a cavallo di più celle
  • FrameLayout  Componenti uno sull’altro (l’ultimo aggiunto sta in cima) – solitamente usato con un solo componente
  • TableLayout  Griglia di celle di dimensione variabile (dinamicamente); un componente per cella (salvo eccezioni, come in HTML)
  • È sempre possibile comporre layout o scrivere i propri Layout Manager

 

Corso Android #6

Attività e Intent

Attività in Android

activity

● Un’attività atomica dell’utente
● Concretizzata da una “schermata”
● Può essere composta da vari Fragment

intent

Un messaggio che esprime un’intenzione dell’utente o di una applicazione affinché qualcosa avvenga
● Numerosissimi Intent di sistema, ogni app può definirne altri
● Una parte della struttura del messaggio è fissata, ma possono includere dati “extra” a piacere
● Gli Intent possono essere indirizzati a uno specifico componente, oppure emessi in broadcast
● Ogni applicazione può definire un filtro che dichiara a quali Intent è interessata e può rispondere

ACTION_MAIN
ACTION_VIEW
ACTION_ATTACH_DATA
ACTION_EDIT
ACTION_PICK
ACTION_CHOOSER
ACTION_GET_CONTENT
ACTION_DIAL
ACTION_CALL
ACTION_SEND
ACTION_SENDTO
ACTION_ANSWER
ACTION_INSERT
ACTION_DELETE
ACTION_RUN
ACTION_SYNC
ACTION_PICK_ACTIVITY
ACTION_SEARCH
ACTION_WEB_SEARCH
ACTION_FACTORY_TEST

intent filter

Un Intent Filter consente di specificare quali Intent vogliamo ricevere, in base a
● Action (indichiamo il nome dell’azione)
● Category (indichiamo il nome della categoria)
● Data (indichiamo il tipo MIME e/o lo schema dell’URI)
● Ogni componente (Activity o altro) dichiara i suoi Intent Filter fra i suoi metadati

 

Karate for kids #1

Android App karate dojo kun

Ascolta, impara e pratica queste semplici regole nella pratica del karate, ma anche fuori dal dojo

Android App per insegnare ai miei piccoli allievi il dojo kun!

Scaricala dal play store

Con i disegni di Marco Bracciani

dojo kun, le regole del dojo: il luogo in cui si cerca la via

Karate Dojo Kun - screenshot thumbnail

Hitotsu! Jinkaku kansei ni tsutomuru koto!
Cerca di perfezionare il carattere

Hitotsu! Makoto no michi o mamoru koto!
Percorri la via della sincerità

Hitotsu! Doryoku no seishin o yashinau koto!
Rafforza instancabilmente lo spirito

Hitotsu! Reigi o omonzuru koto!
Osserva un comportamento impeccabile

Hitotsu! Kekki no yu o imashimuru koto!
Astieniti dalla violenza e acquisisci Autocontrollo

 

Android appunti per corso #40

Risorse alternative
● In moltissimi casi, le risorse devono essere adattate all’ambiente

Alcuni esempi
● Stringhe per le varie lingue (localizzazione)
● Colori adattati al paese (es.: bandiere)
● Layout diversi in base all’orientazione del dispositivo :)
● Icone diverse per carrier diversi (es.: logo)
● Immagini a risoluzioni diverse
● ecc.

Si possono definire risorse specializzate tramite l’uso di qualificatori
● Nella directory res/, si affiancano alle sottodirectory di default
● Nella forma: res/tipo-qualificatori/file
● Esempio:
res/drawable/icon.png
res/drawable-ldpi/icon.png
res/drawable-hdpi/icon.png

Qualificatori – SIM e rete

Mobile Country Code / Mobile Network Code
● Formato: -mccMCC, -mncMNC
● -mcc222 = Italia, -mcc222-mnc010 = Vodafone IT
MCC MNC Marca Operatore Note
222 1 TIM Telecom Italia SpA
222 2 Elsacom Ritirato
222 10 Vodafone Vodafone Omnitel N.V.
222 30 RFI Rete Ferroviaria Italiana
222 77 IPSE 2000 Ritirato
222 88 Wind Wind Telecomunicazioni SpA
222 98 Blu Ritirato
222 99 3 Italia Hutchison 3G

Qualificatori per lingua e regione

● Formato: -lingua-regione
● -it = italiano,
-en-rUS = Inglese, USA
-es-rUS = Spagnolo, USA
● Lingue: it, fr, en, es, …
● Regioni: IT, FR, CA, GB, US, ES, …
● Le Regioni coincidono (quasi) sempre con i TLD

Qualificatori – schermo

Dimensione minima dello schermo
● Lungo l’asse minore, quale che sia
● Formato: -swNdp
● -sw300dp = minimo 300 pixel lungo l’asse minore
● Dimensione dello schermo in larghezza
● Formato: -wNdp
● -w720dp = minimo 720 pixel in larghezza

Dimensione dello schermo in altezza
● Formato: -hNdp
● -h600dp = minimo 600 pixel in altezza
● Dimensione generale dello schermo
● Formato: -dimensione
● -small, -normal, -large, -xlarge

Aspetto dello schermo (rapporto w:h, approx)
● Formato: -aspetto
● -long (stile 16:9), -notlong (stile 4:3)
● Orientamento dello schermo
● Formato: -orientamento
● -port (portrait), -land (landscape)

Qualificatori di ambiente
Dock mode: se il dispositivo è in un dock
Formato: -dockmode
-car (installato in dock in auto), -desk (sul tavolo)
Night mode: se e giorno o notte
Formato -nightmode
-night (e notte), -notnight (e non-notte :-)

Densità del display
● Formato: -densità dpi
Valori ammessi:
● -ldpi = ~120dpi, -mdpi = ~160dpi, -hdpi = ~240dpi
● -xdpi = ~320dpi (Retina-style)
● -tvdpi = ~213dpi (densità delle TV)
● -nodpi = pixel assoluti, bitmap da non scalare
Tipo di touch screen
● Formato: -tipotouch
● -notouch, -stylus (penna), -finger (dito)

Qualificatori – input
Tastiera
Formato: -keystipo
● -keysexposed,
-keyshidden, -keyssoft
Formato: -tipohw
● -nokeys, -qwerty,
-12key
Tasti “cursore”
Formato: -navtipo
● -navexposed, -navhidden
Formato: -tiponav
● -nonav, -dpad, -trackball, -wheel

Qualificatori – versione OS
Versione di Android (API level) corrente
Formato: -vversione
● -v9 (Gingerbread), -v14 (Ice Cream Sandwich)

Si possono indicare più qualificatori in sequenza
Tutte le parti sono opzionali, ma devono essere
nell’ordine in cui li abbiamo presentati!
Es:
● res/drawable-de-rVA-night/button.png

A run-time, il Resource Manager individua, per ogni risorsa, quale fra
le tante alternative usare, usa un algoritmo per cercare il match migliore

Ogni volta che la configurazione corrente cambia, il sistema riavvia l’Activity corrente con il nuovo
insieme di risorse migliori

Regole dei fogli di stile

come l’(X)HTML anche un foglio di stile è un  documento di testo composto da

  • selettori: individuano gli elementi coinvolti 
  • dichiarazioni: costituite da una o più proprietà con il relativo valore che specifica l’azione da intraprendere

esempio di regola di stile

h1 {color: #ffcc00;}

Le pseudo-classi
non sono riferite ad un elemento come le classi e gli id ma applicano delle proprietà ai diversi stati di uno stesso elemento.
Per esempio un comunissimo link? All’inizio ha un colore, poi passandoci sopra con il cursore questo colore cambia
ed infine il link già visitato non ha più il colore iniziale. Ecco le pseudo-classi ti permettono di agire su ognuno questi diversi stati.
Di seguito le pseudo-classi supportate da tutti i browser:
:link
:visited
:hover
:focus
:active


esempio psudo-classe


<h1>Titolo in verde</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisici,
<a href="url.html class="nomeclasse">sed eiusmod</a>
tempor incidunt ut labore et dolore magna aliqua.</p>
<style type="text/css">
a.nomeclasse:link {
color: #006600;
}
a.nomeclasse:hover {
color: #000000;
}
</style>

Pseudo-elementi
come per le pseudo-classi non sono riferiti ad un elemento
in particolare ma ne selezionano una sotto parte.
Ad esempio:
:first-letter
:first-line
:before
:after
puoi applicare pseudo classi e pseudo elementi
a tutti gli elementi di un documento html.
Altre proprietà

text-align (left, right, center, justify)
text-transform (capitalize, uppercase, lowercase, none)
font-variant (small-caps, none)
text-decoration (underline-overline, line-trought, blink, none)
line-height
background
letter-spacing
word-spacing
text-indent
white-space (pre, nowrap, none)
text-shadow (colore, valore x, valore y, valore sfocatura)

Le proprietà di background

background-image (url, none)
background-color: (valore colore, transparent)
background-repeat (repeat-x, repeat-y, no-repeat)
background-position (left, right, top, bottom, center)
background-attachment (fixed, attachment)

esempio inserimento background
div {
background-image: url(img/bg.png);
background-repeat: no-repeat;
background-color: #CCCCCC;
}

div {
background: url(img/bg.png) no-repeat #CCCCCC;
}

I divisori
sono gli elementi che utilizzeremo per strutturare la nostra
pagina web e sono caratterizzati dal tag <div> e ci aiuteranno a
sezionare la nostra pagina e a raggruppare più elementi.
Le proprietà

width (larghezza relativa allo spazio per i contenuti)
height (altezza relativa allo spazio per i contenuti)
padding (spazio fra contenuti ed il bordi)
border (solid, dotted, dashed, double, groove, ridge, inset, outset, none)
margin (spazio fra il bordo e gli altri oggetti della pagina)
position (relative, absolute, fixed)
float (left, right)
z-index
vertical-align (baseline, middle, sub, super, text-top, text-bottom, top, bottom)
overflow (visible, hidden, scroll, auto)

Il visual formatting model
insieme al box model è uno degli elementi fondamentali per la realizzazione di impaginazioni complesse.
Il visual formatting model tratta essenzialmente il comportamento di un box in relazione agli altri presenti nella stessa pagina e ne
definisce il posizionamento.
Position
è la proprietà fondamentale per la gestione della posizione degli elementi sulla pagina. Si applica a tutti gli elementi e non è
ereditaria.
I valori di position sono:

static (valore di default)
absolute
fixed
relative

Il flusso e la posizione relativa
ogni elemento ha una posizione naturale nel flusso della pagina,
lo spostamento degli elementi in relazione alla posizione originale
prende il nome di “posizionemento relativo” e non influisce sugli
elementi circostanti. La regola per agire su questa proprietà è:
position: relative;
La posizione viene determinata attraverso le seguenti proprietà:

top
right
left
bottom

div.relativo {
position:relative;
left:10px;
top: 10px;
}

Il posizionamento assoluto
con la dichiarazione position:absolute è possibile posizionare il box in un
punto esatto della pagina indipendentemente dal flusso e non ha alcuna
influenza sulla posizione degli altri blocchi.
La posizione viene determinata attraverso le proprietà: top, right, bottom, left
a partire da un determinato punto di riferimento iniziale.
L’elemento assoluto è posizionato in rapporto al suo div “contenitore” posto
che anche quest’ultimo abbia la sua proprietà position impostata con un
valore diverso da “static”.
Diversamente l’elemento con proprietà position:absolute si posizionerà in
base all’elemento radice HTML (normalemente, l’area visiva della finestra del
browser) sempre in alto a sinistra.
Un elemento posizionato in modo assoluto scrorre insieme al resto del
documento.


div.assoluto {
position: absolute;
right: 0;
bottom: 0;
width:500px;
}

Posizionamento fisso
con la dichiarazione position:fixed il box dell’elemento viene, come
per absolute, sottratto al normale flusso del documento. La differenza
sta nel fatto che per fixed il box contenitore è sempre il cosiddetto
viewport (l’area interna del borwser).
La caratteristica sostanziale è che un box in posizione fissa non
scorre con il resto del documento rimanendo fisso nella posizione che
abbiamo definito.

div.fixed {
position: absolute;
left: 0;
top: 500px;
width: 150px;
height: 200px;
}

Controllare Il flusso
La proprietà clear impedisce ad un elemento di fluire accanto ad un
altro. Si applica solo agli elementi blocco e non è ereditata.
la necessità di questa regola nasce dal fatto che il float sposta un
elemento dal flusso normale del docuemento ed è possibile che
esso venga a trovarsi in una posizione non desiderate, magari al
fianco di altri elementi che vogliamo invece tenere separati.
Clear risolve questo problema.

none - Gli elementi con float possono stare a destra e sinistra
right - impedisce il posizionamento degli elementi a destra
left - impedisce il posizionamento degli elementi a sinistra
both - impedisce il posizionamento degli elementi a destra e sinistra

Z-index
quando si usa il posizionamento assoluto o relativo è possibile che
gli elementi si sovrappongano. Per decidere quale elemento deve
stare più in alto si utilizza la proprietà z-index.
funziona solo per gli oggetti in posizione relativa o assoluta
il valore più alto indica che l’oggetto sta in posizione prioritaria
i valori possono essere positivi e negativi
la proprietà non è ereditaria


div.assoluto {
position: absolute;
right: 0;
bottom: 0;
width:500px;
z-index: 2;
}

div.assoluto_sotto {
position: absolute;
right: 200px;
bottom: 100;
width:500px;
z-index: 1;
}

Overflow
quando il contenuto del nostro riquadro è più grande del riquadro
stesso (che sia un testo o un’immagine) può essere controllato grazie
alla prorietà overflow.

visible (default)
hidden
scroll
auto

div.box_overflow {
position: absolute;
right: 0;
bottom: 0;
width:500px;
overflow: auto;
}

Display
conosciamo la differenza tra gli elementi block e inline.
la proprietà display è molto utile in quanto permette di variare la
visualizzazione dell’elemento (nasconderlo o trasformarlo in un
elenco) o di cambiare la sua natura (block level, inline).

none
block
inline
list-item

Visibility
da non confondere con il display:none. La proprietà visibility
permette di nascondere un elemento della pagina il quale però
non viene eliminato dal flusso.
In breve se display:none nasconde un elemento dalla pagina
rendendolo completamente invisibile, impostando un elemento
visibility: hidden al posto dell’elemento verrà visualizzato uno
spazio vuoto.

visible (default)
hidden

Il float
è la proprietà che utilizzerai maggiormente anche se all’inizio la sua
gestione potrà sembrarti problematica.
La w3c definisce il float come segue:
“…un box che viene spostato a sinistra o a destra rispetto la
riga corrente. La caratteristica più interessante di un float è che
il contenuto può scorrere lungo il suo lato (o lo si può impedire
attraverso la proprietà “clear”).
Il contenuto si posiziona lungo il lato destro di un box flottato a
sinistra e sul lato sinistro di un flottato riquadro a destra.”
La prorietà float non è ereditaria ed ha tre valori:

left
right
none

Collassare i margini
l’espressione collassare i margini [collapsing margins] significa che
margini adiacenti (non li separa nessuna area di bordo o padding) di due
o più riquadrati (che possono essere vicini l’uno all’altro o annidati) si
combinano per formare un singolo margine.
Nei CSS2, i margini orizzontali non collassano mai.
I margini verticali possono collassare ad esempio ciò accade con i
margini verticali di più paragrafi in successione. Un approfondimento:
Caratteristiche
I blocchi flottanti consecutivi si dispongono uno di fianco
all’altro. Ad esempio se più box hanno la proprietà float:left
questi si disporanno uno accanto all’altro “spingendosi”
verso sinistra.
Se lo spazio non è sufficiente a contenere i diversi blocchi,
quelli in eccesso verranno disposti al di sotto degli altri.
Se ad uno dei box assegno la proprietà clear posso impedire
che il box successivo si affianchi.
Ricorda

che il padding e il border si sommano alla
dimensione del nostro box!
Se ad esempio un box ha una larghezza di
200px e un padding totale (top, right, left,
bottom) di 5px la sua larghezza reale sarà di
210px. Se non calcoli bene la larghezza dei box
farai molta fatica a strutturare il tuo layout.

Altre caratteristiche
Se ad un elemento viene assegnata la proprietà float, questo
verrà tolto dal normale flusso e sarà posizionato nel punto
più a sinistra (o a destra) possibile rispetto al suo contenitore
(che potrebbe essere anche il body).
Se ad un box non viene assegnata nessuna dimensione questa
verrà determinata dal suo contenuto. Se invece ne assegni solo
una, ad esempio la larghezza, l’altra si adatterà di conseguenza.
Assegnando ad in box i margini laterali “auto” (margin: auto)
questo si posizionerà al centro in orizzontale della pagina.

http://alistapart.com/article/css-floats-101

comporre un layout

In breve
la prima cosa cosa che dovrai fare è sicuramente creare il tuo
wrapper, ovvero il main box che conterrà tutti gli altri.
Questo sarà il punto di riferimento dentro il quale verranno
posizionati tutti i tuoi div (escluso quelli in posizione assoluta
e in tutti quei casi che abbiamo spiegato nella lezione
precedente).
Il mio consiglio personale è quello di flottare sempre i tuoi box
dallo stesso lato anche se opposti.

formattare i moduli

I moduli
Le parti fondamentali di un modulo sono due:
l’insieme di campi, etichette e pulsanti che l’utente
compila e lo script che permette il funzionamento del
modulo ovvero l’invio delle informazioni.
La formattazione dei moduli è molto semplice e grazie
all’utilizzo dei css è possibile personalizzare ogni
elemento.

Etichette <label>

Casella di testo <input type=”text”>
Elenco a discesa <select><option>
Casella di controllo <input type=”checkbox”>
Pulsante invio <input type=”submit”>
Area di testo <textarea>

Per iniziare
un modulo deve essere racchiuso all’interno dei tag <form>, elemento
block level che necessita di alcuni attributi per poter funzionare:
action per indirizzare il modulo al server, all’ URL o all’indirizzo di
posta elettronica.
method per dichiarare con quale dei due possibili metodi, post o get,
si devono trasmettere i dati.
id (facoltativo) Il nome che preferite assegnare al modulo, diventa
indispensabile facendo uso di JavaScript o altro linguaggio di
programmazione che diversamente non saprebbe a quale modulo fare
riferimento nella pagina web.
Organizzazione dei contenuti
Qualora volessimo ragruppare in macro aree le
informazioni di un modulo è possibile utilizzare i tag
<fieldset> e <legend>.


<form>
<fieldset>
<legend>Personali:</legend>
Name: <input type="text" size="30" /><br />
Cognome: <input type="text" size="30" /><br />
Data di nascita: <input type="text"/>
</fieldset>
<fieldset>
<legend>Altro:</legend>
Email: <input type="text" size="30" /><br />
</fieldset>
</form>

Il tag <input>
Il tag più utilizzato per creare i campi di un form è il tag
<input> che non richiede chiusura.
Ad ogni <input> deve essere associato ad un attributo che
ne determini la tipologia, il nome (ad esempio per interagire
con JavaScript) e il valore (il testo visualizzato).


<form method="post" action="showform.php">
<fieldset>
<legend>Personali:</legend>
Name: <input type="text" name="nome"/><br />
Cognome: <input type="text" name="cognome" /><br />
Data di nascita: <input type="text" name="data"/>
</fieldset>
</form>

<form method="post" action="showform.php">
<fieldset>
<legend>Personali:</legend>
Name: <input type="text" name="nome"/><br />
Password: <input type="password" name="pass" maxlength="10" />
</fieldset>
</form>

Pulsanti d’opzione e pulsanti di controllo
sono degli elementi molto utili all’interno di un form e permettono
all’utente di effettuare delle scelte.
Il pulsante di opzione (type=”radio”) a differenza del pulsante di
controllo (type=”checkbox”) permette di fare una sola scelta.
Ad entrambi gli elementi possono essere associati i seguenti attributi.
name: identifica i dati inviati allo script
value: il valore che verrà inviato al server
checked: per far si che il pulsante sia attivo per default


<form method="post" action="showform.php">
<fieldset>
<legend>Scegli la taglia:</legend>
Small: <input type="radio" name="scegli" value="S"/><br />
Medium: <input type="radio" name="scegli" value="S"/><br />
Large: <input type="radio" name="scegli" value="S"/>
</fieldset>
</form>

<form method="post" action="showform.php">
<fieldset>
<legend>Vuoi iscriverti alla newsletter?</legend>
<input type="checkbox" name="nl" value="yes" checked="checked"/>
</fieldset>
</form>

Etichette
Accanto ad ogni elemento di un form possiamo inserire un
semplice testo indentificativo. Ad esempio accanto ad un <input>
per l’inserimento del nome potremmo scrivere semplicemente
“Nome”. XHTML ha un tag apposito ovvero <label>
Un’attributo di label è “for” che consente di associare l’etichetta
all’elemento “id” dell’elemento corrispondente (che avranno lo
stesso valore).


<form method="post" action="showform.php">
<label for="nome">Nome</label>
<input type="text" value="inserisci" id="nome"/>
<label for="cognome">Cognome</label>
<input type="text" value="inserisci" id="cognome"/>
</form>

Elenchi a discesa
sono la migliore soluzione per offrire agli utenti una scelta tra più opzioni
predefinite. Il tag per questo tipo di elemento è <select> dentro il quale
inseriremo i tag <option> per definire ogni singola scelta.
Il tag <select> può presentare i seguenti attributi:
Il tag <option> può presentare i seguenti attributi:
name: identifica i dati inviati allo script
multiple: consente la selezione multipla attraverso il tasto CTRL o CMD
selected: per selezionare una voce di default
value: consente la selezione multipla attraverso il tasto CTRL o CMD


<form>
<fieldset>
<legend>Siti web</legend>
<select name="siti" >
<option value="http://www.sito.it" selected="selected">Vai al sito</option>
<option value="http://www.sito-due.it">Vai al sito 2</option>
<option value="http://www.sito-tre.it">Vai al sito 3</option>
</select>
</fieldset>
</form>

<form>
<fieldset>
<legend>Siti web</legend>
<select name="siti" >
<optgroup label="Web Design">
<option value="http://www.sito.it" selected="selected">Vai al sito</option>
<option value="http://www.sito-due.it">Vai al sito 2</option>
</optgroup>
<optgroup label="Risorse">
<option value="http://www.sito-a.it">Vai al sito</option>
<option value="http://www.sito-b.it">Vai al sito 2</option>
</optgroup>
</select>
</fieldset>
</form>

Area di testo
il tag <textarea> permette di creare degli spazi all’interno di un
modulo in cui l’utente può scrivere del testo. A differenza delle normali
aree di testo possono essere più grandi e quindi contenere più righe.
A ogni textarea possono essere associati i seguenti attributi:

name: identifica i dati inviati allo script

rows: definire il numero di righe

cols: definire la larghezza

rows e cols non sono obbligatori, è preferibile formattare la textarea
tramite CSS per definire altezza e larghezza


<form method="post" action="showform.php">
<label for="messaggio">Lascia un messaggio</label>
<textarea name="testo" rows="5" cols="40" id="messaggio">
Inserire qui il testo
</textarea>
</form>


<form method="post" action="showform.php">
<label for="messaggio">Lascia un messaggio</label>
<textarea name="testo" class="nomeclasse" id="messaggio">
Inserire qui il testo
</textarea>
</form>

Altri elementi di un form
<input type=”file”> permette di creare una casella per il carimento di file.
<input type=”submit”> bottone per l’invio del modulo, fondamentale.
<input type=”reset”> bottone per ripristinare il modulo.
<input type=”hidden”> per nascondere un campo input.
<input type=”image”> creare un’immagine attiva.
<button type=”submit”> bottone per l’invio del modulo con immagine.
Altri attributi
tabindex=n per ordinare la navigazione del form tramite il tasto tab.
accesskey=x per impostare le scorciatoie di tastiera.
disable=”disabled” disabilita un elemento.
readonly=”readonly” disabilita la scrittura.
Ricorda
puoi personalizzare ogni caratteristica di questi
elementi attraverso i CSS. Altezza, larghezza,
bordo, sfondo, tipo di carattere, margini etc.
Questo permetterà di rendere i tuoi form ancora più
usabili e sicuramente più gradevoli.
Puoi formattare direttamente il selettore o applicare
una classe come faresti con qualunque altro tag.