all html : Le portail des webmaster

Article publié le lundi 29 mars 2004 par ALL HTML.
Cet article est classé dans les catégories « WML »

Introduction

WBMP : Wireless BitMaP.
Le WML possède son propre format d'image : Le WBMP. Ses principales caractéristiques (adaptées bien entendu aux écrans à faible résolution et au débit réduit) :

- 2 couleurs (noir et blanc) (adapté du format BMP)
- 1 bit - bichromatique
- TYPE 0
- Pas de compression possible
- Suit les recommandations du WAP - WAE

Exemple :

<br><table border="1" bordercolor="#330033" cellpadding="3" cellspacing="1" width="489"><tbody><tr><td align="center" bgcolor="#6699cc"><span class="texte"><b>16 couleurs-Gif-0,65 Ko</b></span></td><td align="center" bgcolor="#6699cc"><span class="texte"><b>16 c. (gris)-Gif-0,700 Ko</b></span></td><td align="center" bgcolor="#6699cc"><span class="texte"><b>2 c.-WBMP-0,23 Ko</b></span></td></tr><tr><td align="center"><img src="/gifdata/html38.gif" heigth="47" alt="16 couleurs" border="0" width="100"></td><td align="center"><img src="/gifdata/html39.gif" heigth="47" alt="16 couleurs (gris)" border="0" width="100"></td><td align="center"><img src="/gifdata/html40.gif" heigth="47" alt="2 couleurs" border="0" width="100"></td></tr></tbody></table>

Réaliser une image WBMP

Il existe plusieurs façons de créer une image au format WBMP, où plutôt de transformer cette image au format WBMP.

a ) Un logiciel graphique classique comme PhotoShop, ou Paint Shop Pro, par l'intermédiaire d'un plug-in (WBMP Plugin).
b ) Des outils autorisant la conversion de fichiers image au format GIF ou JPEG vers le format WBMP.
c ) Un service Web qui convertit en ligne ("on line") images au format GIF ou JPEG vers le format WBMP.

Insérer une image WBMP

Le protocole pour intégrer une image WBMP à une page WML est identique à celui du HTML. On se sert donc de la balise<img>

Cette balise a de nombreux attributs, les plus importants étant bien entendu alt (qui spécifie une alternative à l'image - obligatoire !) et SRC qui permet de spécifier l'URL complète (chemin) du fichier :

Exemple : <img src="nom de fichier" alt="Mon image">

Le nom de fichier doit être remplacé par le nom de l'image et son extension (image.wbmp). Si votre fichier image.wbmp se trouve dans un autre répertoire que vos pages, par exemple dans un répertoire img, cela donne :

Exemple : <img src="img/image.wbmp" alt="Mon image">

Vous pouvez préciser la taille de l'image au navigateur WAP, celui-ci chargera plus rapidement votre page. En effet, il n'a pas à la recalculer et, si jamais le navigateur du mobile ne peut afficher les images WBMP, la mise en page ne sera pas perturbée. Ces dimensions correspondent à la taille en pixels de l'image. Ici, l'image fait 20 pixels de large sur 20 pixels de hauteur.

Exemple : <img src="img/image.wbmp" width="20" heigth="20" alt="Mon image">

Espacer l'image :

Avec les attributs hspace=n vspace=n (n étant un nombre en pixels), vous pouvez fixer un espace vertical et horizontal autour de votre image.

Exemple : <img src="img/image.wbmp" hspace="2" vspace="2" alt="Mon image">

Positionner et aligner une image :

Par défaut, l'image est placée sur une ligne et le texte, s'il est présent, est aligné sur le bas de l'image. Si vous voulez encadrer une image avec du texte (style journal) l'attribut align est requis. il possède 3 attributs:
- middle : Texte au milieu
- bottom : Texte en bas
- top : En haut

Exemple : <img src="img/image.wbmp" align="top" alt="Mon image">

Images en ROM

A l'aide de l'attribut localsrc, vous pouvez afficher des dessins qui sont contenus dans la rom (mémoire morte) du terminal (suivant les modèles).

Exemple : <img localsrc="flower" alt="Mon image">

Conseils d'intégration

a ) N'oubliez pas le alt (attribut obligatoire !), qui permet de fournir une représentation contextuelle aux terminaux WAP non-graphiques.
b ) Vos images doivent avoir un poids maximum de 0.5 Ko soit 500 octets (sinon vous risquez de saturer la mémoire du terminal).
c ) Attention à ne pas dépasser certaines hauteurs (heigth) et largeurs (width), donc respectez les écrans peu larges des terminaux mobiles.

Exemple avec un Nokia 7110

http://www.allhtml.com/gifdata/html37.gif