GSMWORLD.it: WML Lezione 8

Lezione 8.
LE IMMAGINI IN WML

Non poteva mancare nelle specifiche WML la possibilità di inserire nelle pagine delle immagini grafiche. Il WML prevede utilizzo uno specifico tipo di immagine, con un formato particolarmente "leggero" in termini di occupazione di memoria, il WBMP (Wireless BitMap). Si tratta di una versione a 1 bit (bianco e nero) del formato BMP. Tutte le immagini per essere compatibili con le specifiche e quindi visualizzabili devono quindi essere convertite in WBMP.

Le immagini non devono superare le dimensioni di 150x150 pixel o comunque 1461 pixel complessivi, può sembrare un limite eccessivamente restrittivo ma, pensando che un Nokia 7110 é in grado di visualizzare al massimo un'immagine di 96x65 pixel, la limitazione non è poi così restrittiva.


Immagine in formato GIF.	Immagine in formato WBMP.

Per visualizzare un'immagine si ricorre al tag "img":

<img src="percorso" alt="descrizione" [vspace="xx"] [hspace="yy"] [align="top|middle|bottom"] [height="aa"] [width="bb"]/>

Attributi principali

src Specifica l'indirizzo URL dell'immagine. Obbligatorio

alt Descrizione dell'immagine. Viene visualizzata al posto dell'immagine in caso di problemi. Obbligatorio.

vspace
hspace Specificano in pixel o percentuale lo spazio da lasciare vuoto a destra e a sinistra (hspace) o sopra e sotto (vspace) tra l'immagine e gli elementi che le stanno vicini.

align Indica l'allineamento verticale dell'immagine: top, testo allineato al lato superiore dell'immagine; bottom in basso e middle al centro. Opzionale.

height
width Specificano altezza (height) e larghezza (width) dell'immagine. I valori possono essere espressi in pixel o in percentuale, con la caratteristica che il valore percentuale NON si riferisce alle dimensioni dell'immagine bensì allo spazio disponibile in cui inserirla. Opzionale.

Attenzione che, perché l'immagine sia correttamente visualizzata dal microbrowser, occorre che il Web server invii questa specificando il corretto tipo MIME:
image/vnd.wap.wbmp

COME PREPARARE LE IMMAGINI
Per preparare un’immagine WBMP partendo da un’immagine a colori (gif o jpeg) i passi da seguire sono i seguenti:

trasformare l'immagine di partenza in 16M di colori se già non lo é
ridimensionarla (ad esempio 96x44 pixel)
trasformarla in "grey scale" (toni di grigio)
convertirla in WBMP, utilizzando uno dei tanti software di manipolazione grafica

Vi consigliamo di non tentare di applicare questo metodo ad immagini troppo grandi o troppo colorate. Per creare e manipolare immagini WBMP potete utilizzare i programmi consigliati nella sezione Risorse software.

IMMAGINI ANIMATE
Il formato WBMP non supporta l'animazione come le comuni GIF utilizzate nel mondo HTML. Si puo comunque ricorrere ad un piccolo trucco per ovviare al problema, anche se il risultato sarà diverso dalle aspettative. Ricorrendo all'evento ontimer é possibile creare più card ognuna in grado di visualizzare un'immagine della sequenza. Poiché il microbrowser ha una memoria limitata non sarà possibile utilizzare un solo deck con tutte le card al suo interno, si ricorda che tutte le card verrebbero caricate in memoria contemporaneamente, ma occorrerà ricorrere a più deck distinti. Come contropartita il microbrowser dovrà caricarle una per volta e l'animazione risulterà a scatti.

Ecco un semplice esempio in WML per realizzare un'immagine animata in tre passi:

<wml>
<card id="image1" ontimer="#image2">
   <timer value="10"/>
	<p>
	   <img src="anim1.wbmp" alt="Anim1"/>
	</p>
</card>
<card id="image2" ontimer="#image3">
   <timer value="10"/>
	<p>
	   <img src="anim2.wbmp" alt="Anim2"/>
	</p>
</card>
<card id="image3" ontimer="#image1">
   <timer value="10"/>
	<p>
	   <img src="anim3.wbmp" alt="Anim3"/>
	</p>
</card>
</wml>

DISCLAIMER GSMWORLD.it consente all'utente di utilizzare il contenuto della presente pagina a condizione che: a) il documento serva solo a scopi informativi; b) il documento sia usato solo per scopi personali e comunque non commerciali; c) si faccia riferimento all'autore, quando il documento viene usato. GSMWORLD.it non si assume alcuna responsabilità per qualsiasi materiale realizzato o pubblicato da Terzi che sono linkati direttamente da questa pagina. Tutti i marchi, i nomi dei prodotti e dei servizi citati sono registrati dai rispettivi proprietari.

src	Specifica l'indirizzo URL dell'immagine. Obbligatorio
alt	Descrizione dell'immagine. Viene visualizzata al posto dell'immagine in caso di problemi. Obbligatorio.
vspace hspace	Specificano in pixel o percentuale lo spazio da lasciare vuoto a destra e a sinistra (hspace) o sopra e sotto (vspace) tra l'immagine e gli elementi che le stanno vicini.
align	Indica l'allineamento verticale dell'immagine: top, testo allineato al lato superiore dell'immagine; bottom in basso e middle al centro. Opzionale.
height width	Specificano altezza (height) e larghezza (width) dell'immagine. I valori possono essere espressi in pixel o in percentuale, con la caratteristica che il valore percentuale NON si riferisce alle dimensioni dell'immagine bensì allo spazio disponibile in cui inserirla. Opzionale.