| Realizzazione siti web per dispositivi mobili |
 |
 |
 |
|
JPAGE_CURRENT_OF_TOTAL E' in questa ottica che ci si deve preoccupare, oltre che preparare, ad avere il proprio sito web accessibile attraverso dispositivi mobili, quali smartphone, cellulari con browser WAP (Wireless Application Protocol) che supportano l'XHTML Mobile Profile ed i WAP CSS. Elementi di input in un documento XHTML Mobile Profile Tutti i precedenti elementi di input sono creati con il tag <input>. Per inviare i dati al server, gli elementi <input> sono associati al tag <form>. L' elemento <form> verrà trattato in maniera più dettagliata in una successiva lezione del presente tutorial. L' attributo "type" dell' elemento <input> definisce il tipo di elemento in XHTML MP. L' attributo "name" indica il nome dell' elemento stesso. Il nome sarà usato per richiamare i dati dell' utente sul server. Campo TestoI campi di testo sono usati per ottenere dati alfanumerici dall' utente. Il seguente markup crea un campo di testo in XHTML MP: <input type="text" name="nome_elemento" />
Il valore predefinito di "type" è text. Sarebbe opportuno specificarlo, anche se non è necessario, come è stato fatto per l' esempio precedente. L' attributo maxlength del tag input limita il numero dei caratteri che un utente potrebbe scrivere nel campo di testo. Per esempio, un utente può inserire al massimo 10 caratteri,come riportato nel codice seguente: <input type="text" name="nome_elemento" maxlength="20"/>
Si può settare un valore di default per il campo di testo usando l' attributo value per il tag <input>. Per esempio, il campo di testo conterrà "Michele Rossi" all'apertura della pagina se al precedente codice si aggiunge: <input type="text" name="nome_elemento" maxlength="20" value="Michele Rossi"/>
Per mostrare quanto appena scritto qui sopra, ho raccolto in una unica screen le due caratteristiche (value e maxlength) oltre ad aggiungere un pulsante di Invio. Nel browser WAP viene visualizzato tutto in maniera corretta, come si può vedere dall' immagine successiva:
È buona norma configurare un campo di testo come se fosse una maschera di input. Una maschera di input restringe il tipo ed il numero di caratteri che un utente può inserire. La modalità di input (numerica o alfanumerica) dei tasti del dispositivo mobile, sarà configurata automaticamente secondo il valore che le viene assegnato. In WML 1.x, l' attributo format dell' elemento <input> è usato per configurare una maschera di input. Tuttavia, l' attributo format non esisterà più in XHTML MP. Per indicare un campo di input, si deve usare la proprietà wap-input-format dei WAP CSS. Per esempio, il successivo codice CSS specifica che un utente può scrivere al massimo dieci caratteri numerici nel campo di testo. Il dispositivo mobile commuterà automaticamente la relativa tastiera alla modalità di input numerica affinchè l' utente immetta i caratteri. input {
-wap-input-format:"10N" } Campo passwordTutti i caratteri sono visualizzati attraverso un asterisco (*) in un campo di testo di tipo password. Questa è la maggior differenza tra un campo di testo ed un campo di tipo password. Il seguente codice di markup crea un campo password in XHTML MP: <input type="password" name="nome_elemento"/>
Nel browser WAP il campo di tipo password si vedrà come l' immagine successiva:
Campo nascostoUn campo nascosto non è visualizzato sullo schermo dei dispositivi mobili. È usato per conservare alcune informazioni che sono richieste dall' applicazione mobile Internet. Il seguente codice crea un campo nascosto in XHTML MP: <input type="hidden" name="name_for_this_element"/>
L' attributo "value" definisce il valore di default da inviare al server. Esempio: <input type="hidden" name="temp_id" value="123456"/>
CheckboxIl seguente codice crea un checkbox in XHTML MP: <input type="checkbox" name="nome_elemento"/>
Checkbox dello stesso gruppo dovrebbero avere lo stesso nome, come questo: <input type="checkbox" name="xhtml_mp_capitolo" value="1" />
<input type="checkbox" name="xhtml_mp_capitolo" value="2"/> <input type="checkbox" name="xhtml_mp_capitolo" value="3"/> L' attributo "value" definisce il valore che deve essere inviato al server quando il checkbox è selezionato. Per esempio, se il primo ed il secondo checkbox nel codice precedente sono selezionati, i valori 1 e 2 possono essere richiamati con il parametro dal nome "xhtml_mp_capitolo" sul server. I Checkbox non sono selezionati di default. Un checkbox sarà inizialmente selezionato se l' attributo checked è specificato, come il seguente codice di esempio: <input type="checkbox" name="xhtml_mp_capitolo" value="1" checked="checked"/>
La successiva screen di esempio, visualizza quanto fino ad ora abbiamo visto nel codice:
I radio buttons in XHTML MPIl seguente codice crea un radio button in XHTML MP: <input type="radio" name="xhtml_mp_capitolo"/>
Come i checkbox, i radio button appartenenti allo stesso gruppo devono avere lo stesso nome. In un gruppo di radio buttons, solo uno può essere nello stato "checked". <input type="radio" name="xhtml_mp_capitolo" value="1" checked="checked" />
<input type="radio" name="xhtml_mp_capitolo" value="2"/> <input type="radio" name="xhtml_mp_capitolo" value="3"/> L' attributo "value" stabilisce il valore che deve essere inviato al server. Per esempio, se il secondo radio button nel codice precedente è selezionato, il valore 2 sarà associato al parametro dal nome "xhtml_mp_capitolo". In ultimo, i radio buttons non sono selezionati di default. Un radio button sarà selezionato, all' apertura della pagina, se l' attributo "checked" è dichiarato nel codice, come il seguente esempio: <input type="radio" name="xhtml_mp_capitolo" value="1" checked="checked"/>
Di seguito una screen di come un gruppo di radio button viene visualizzato in un browser WAP:
Per inviare il valore della voce di lista al server, il tag <select> deve essere usato con il tag <form<. Si può vedere l' uso del tag <form< e come fare per leggere il valore dell' articolo selezionato, in una delle lezioni successive del corso. L' attributo "name" del tag <select> specifica il nome della lista di selezione. Sul server il nome sarà usato per richiamare il valore dell' articolo selezionato. Il valore di un articolo è specificato con l' attributo "value" del tag <option>. Diamo un' occhiata all' esempio successivo. Può aiutarci a capire meglio di cosa andremo a realizzare. <body>
<form method="post" action="xhtml_processa.asp"> <p> <select name="lista_menu"> <option value="tutorial_1">XHTML MP Tutorial Parte 1</option> <option value="tutorial_2">XHTML MP Tutorial Parte 2</option> <option value="tutorial_3">XHTML MP Tutorial Parte 3</option> </select> </p> </form> </body> La figura successiva è la visualizzazione, attraverso un dispositivo mobile, della lista di selezione appena scritta:
Selezionare opzioni multipleNel precedente esempio un utente può scegliere solo una opzione dalla lista. Per permettere che egli possa selezionare più voci, si deve usare l' attributo "multiple" del tag <select>. L' attributo deve essere assegnato attraverso il valore "multiple". Le opzioni, in tale genere di liste di selezione, sono visualizzate come caselle di controllo sullo schermo. Vediamo uno stralcio di codice: <body>
<form method="post" action="xhtml_processa.asp"> <p> <select name="List_menu" multiple="multiple"> <option value="tutorial_1">XHTML MP Tutorial Parte 1</option> <option value="tutorial_2">XHTML MP Tutorial Parte 2</option> <option value="tutorial_3">XHTML MP Tutorial Parte 3</option> </select> </p> </form> </body> Di seguito l' immagine della screen-shot attraverso l' emulatore online:
Per poter selezionare più di una voce dall' elenco basta selezionarne una, premere il pulsante CTRL (sulla tastiera) più una seconda voce. Organizzare per gruppi le voci di un menuSe una lista di selezione contiene molte voci, potrebbe sembrare un pò difficoltoso districarsi al suo interno, oltre che avere la parvenza di un disordine. Per risolvere questo problema si possono organizzare le opzioni in gruppi. Per definire un gruppo si usa il tag <optgroup></optgroup>. L' attributo "label" del tag <optgroup>, specifica il titolo di un gruppo di opzioni. L' uso di <optgroup></optgroup> è riportato di seguito: <body>
<form method="post" action="xhtml_processa.asp"> <p> <select name="selectionList"> <optgroup label="Tutorial Capitolo 1"> <option value="lezione_1A">Lezione 1A</option> <option value="lezione_1B">Lezione 1B</option> <option value="lezione_1C">Lezione 1C</option> </optgroup> <optgroup label="Tutorial Capitolo 2"> <option value="lezione_2A">Lezione 2A</option> <option value="lezione_2B">Lezione 2B</option> <option value="lezione_2C">Lezione 2C</option> </optgroup> <optgroup label="Tutorial Capitolo 3"> <option value="lezione_3A">Lezione 3A</option> <option value="lezione_3B">Lezione 3B</option> <option value="lezione_3C">Lezione 3C</option> </optgroup> </select> </p> </form> </body> Di seguito l' immagine del menu con il tag optgroup:
|
Twitter Feed
