WML in 10 passi

LabTel WAP - Il Sito LabTel in tecnologia WAP

WML in 10 Passi
(Ovvero il Bignami del WML)

Introduzione al WML
Concetti fondamentali
Esempio di una semplice Pagina
Inserire andate a capo e paragrafi
Formattare il testo
Inserire un'immagine
Inserire un'ancora
Inserire un link
Creare una Tabella
Approfondimenti

1. Introduzione al WML

L'accesso ai siti WAP in tecnologia WML avviene attraverso dei WAP gateway gestiti dai fornitori di fonia mobile e dal costo veramente proibitivo.
Uno dei più noti è il gateway della Phone.com (http://www.phone.com), usato dai maggiori gestori di fornia mobile al livello mondiale. In Italia T*M e O*nitel
Offrono il servizio a livello sperimentale, solo attraverso cellulari predisposti. Per ora il miglior modo per poter vedere il proprio lavoro in WML consultabile anche da cellulare e l'uso del kit che mula il cellulare sul proprio PC.

Il WML (Wireless Markup Language) è un linguaggio in parte simile all'HTML (deriva come esso dalla grande famiuglia dei linguaggi descrittivi dell'SGML)sfrutta dei marcatori, che consento l'accesso a pagine ipertestuali (testo, immagini, icone, link...) a piattaforme di collegamento alternative (cellulari, palmari o PDA).
Le informazioni richieste viaggiano su Internet e dalla rete raggiungono i gateway UP.Link costruiti dalla Phone.com e da questi sono avviati alla altra grande rete digitale, la GSM in Europa e la CDPD negli Stati Uniti. Dal Tcp/Ip al WAP (Wireless Application Protocol).
In questo modo chi possiede un server Web che supporti le estensioni wml, accessibile dai wap gateway può offire informazioni in questo formato oltre al classico HTML.

Ricordiamo che che il testing del codice realizzato è fattibile usando il kit di sviluppo della Phone.com con il
quale possiamo, attraverso un cellulare WAP-ENABLED virtuale,l' UP.SIMULATOR testare il codice che stiamo scrivendo.
L'editor con cui scrivere WML può essere un normale editor per file di testo, a cui file daremo estensione wml

2. Concetti fondamentali

I documenti in HTML corrispondo a CARD in WML, Così come le pagine sono organizzate in un sito le CARD sono organizzate in un DECK (mazzo).
Esiste una sintassi ben precisa che consente di realizzare costrutti WML.

Intanto occorre dire che il WML è case-sensitve al contrario dell'HTML, e ch ela sua sintassi va rispettata con grande precisione, pena la mancata visualizzaizone del sito.
Il livello di tollerabilità all'errore è nullo. L asintassi deve essre precisa. A tale scopo occorre verificare il debug offero dall'UPD.Simulator.

Abbiamo visto che un sito WML è composto da CARD che compiono delle azioni (DO A TASK), generate dall pressione dei tasti del cellulare
Per generare un'azione occorre usare la sintassi:

<do>
</do>

indicando di preciso il tipo dell'azione che voglio generare:

<do type=>
</do>

All'interno vengono specificxate le azzioni che è possibile compiere:

Andare avanti da una CARD all'altra
<go>
</go>
-----
Andare indietro da una CARD all'altra:
<prev>
</prev>
--------
Bloccare, fare in modo che il dispositivo WAP non faccia nulla
</noop>
--------
Aggionare (reload), i dati che sono immessi dall'utente:
<refresh>
</refresh>
---------

L'interazione con il cellulare è quasi nulla quindi è indispensabile specificare l'azione che si vuole compiere.

3. Esempio di una semplice Pagina

Una pagina WML deve possedere un prologo standard, con cui deve per forza iniziare

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD wml 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">

Il testo deve essere contenuto in una dichiarazione di file wml e all'interno di una card

<wml>
<CARD>
Scrivi quello che vuoi
</CARD>
</wml>

4. Inserire andate a capo e paragrafi

I comandi sono quelli ereditati dall'HTML e ma vanno usati in maniera differente

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD
/wml_1.1.xml">
<wml>
<card id="csi" title="CSI e il WAP">
Testo a capo 

testo staccato di una riga

</card>
</wml>

* va aperto e rigorosamente chiuso
** con è possibile allineare il testo (p align=left,center,right)

5. Formattare il testo
Per realizzare un testo aggiungendo uno stile usare:

testo in grassetto



testo sottolineato

testo in italico


<big>
testo grande
</big>

testo piccolo


6. Inserire un'immagine o un icona

IMMAGINE
Occorre innanzitutto avere un'immagine in formato wbmp, supportata dai cellulari wap e poi usare la sintassi molto simile all'HTML

<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
<WML>
<CARD>
<img alt="testo per l'immagine" src="http://www.sito.it/immagine.wbmp" "
align="middle" height="50" width="100" vspace="50" hspace="50"/>
</CARD>
</WML>

Come si può notare esistono le differenti opzioni facilmente intuibili che consentono il corretto posizionamento dell'immagine nella card.
align, height, ecc ecc

Per convertire un'immagine in formato wbmp è possibile utilizzare alcuni comodi convertitori on line. Uno lo si può trovare all'indirizzo http://www.teraflops.com/wbmp/

ICONA
Un elenco completo delle emoticons le trovate su wapitalia.

Per inserirne una basta usare la seguente sintassi:

<wml>
<CARD>


un sorriso con una emoticon


 <img alt=":)" localsrc="smileyface" />
</CARD>
</wml>

L'emoticon ho viene interpretata dal cellulare che c'è l'ha in memoria oppure viene scaricata dal server

7. Inserire un'ancora

Il concetto è lo stesso dell'HTML occorre indicare l'ancora di partenza ed il punto di arrivo. L'esempio lo chiarisce con precisione:

PARTENZA

<card id="indice" title="LabTel SNC">

LABTEL SNC
 
<anchor>Chi Siamo<go href="#chisiamo"/></anchor> 
 

</card>

ARRIVO
<card id="chisiamo" title="Chi Siamo">

LABTEL SNC 
Progettazione e Realizzazione Sistemi Informativi


La societa LabTel e' una societa' giovane e dinamica, che offre una vasta gamma di servizi, con particolare
riguardo alle tecnologie Internet, Intranet ed Extranet.
</card>

* al fondo del cellulare apparirà la scritta LINK e vicino al link sul display apparirà un triangolino

8. Inserire un link

Inserire un link in una card è una cosa semplice, basta usare la seguente sintassi:

<card id="indice" title="LabTel SNC">

LABTEL SNC
 
<anchor>CSI e WAP<go href="csi.wml"/></anchor> 

o così

<a href="servizi.wml">Servizi</a> 
 

</card>

* al fondo del cellulare apparirà la scritta LINK e vicino al link sul display apparirà un triangolino

Per inserire un ritorno indietro, in genere a fondo pagina:

<CARD>
<do type="accept" title="indietro">
<prev/>
</do>

premi il pulsante per tornare indietro

</CARD>

Per inserire un link con la tastiera numerica

<CARD>
<a href="http://www.html.it/home.wml" accesskey="0" title="">
premi la tastiera del cellulare
</a>
</CARD>

E' possibile in questo modo associare ad un numero della tasiera un link (Accesskey="0|1|2|3|4|5|6|7|8|9")

9. Creare una Tabella

Una tabella la si può creare usando praticamente la sintassi HTML. L'esempio sottostante chiarisc meglio:

<CARD>
<table align="r" title="Tabella" columns="4">
<tr>
<td>prima colonna</td>
<td>seconda colonna</td>
<td>terza colonna</td>
<td>quarta colonna</td>
</tr>
</table>
</CARD>

Attributi:
    align=allineamento del carattere contenuto (l=left, c=center, r=right)
    title= titolo della tabella
    colums=numero di colonne

10. Approfondimenti

MODULI: scelta tra opzioni

<CARD>

prego scegli un'opzione:
<select multiple="true" name="opzione">
<option value="1">opzione 1</option>
<option value="2">opzione 2</option>
<option value="3">opzione 3</option>
</select>

<do type="accept"><noop/></do>
</CARD>

CARATTERI

Nel display ' nel listato devo scrivere '
Nel display " nel listato devo scrivere "
Nel display & nel listato devo scrivere &
Nel display $ nel listato devo scrivere $$;
Nel display spazio non interrotto nel listato devo scrivere  