Créer un site WAP, première partie : les bases du langage WML

Le langage WML

Connaître le langage WML et en respecter la norme : pour un site WAP accessible sur tous les téléphones mobiles.

5 octobre 2003, par Ernestine

Le WML est le langage du WAP, un peu comme le HTML est celui du WEB. Les deux sont d’ailleurs très ressemblants, et si vous êtes déjà webmaster d’un site classique, un site pour téléphone mobile ne vous posera aucun problème majeur.

Tout comme il y a de nombreux navigateurs, il y a de nombreux micro-navigateurs (on appelle "micro-navigateur" les navigateurs de téléphones mobiles). Votre site WAP n’aura pas le même aspect d’un mobile à l’autre. Peut-être même qu’il sera parfaitement lisible pour vous, et totalement innaccessible chez d’autres. Un moyen efficace pour être certain que vos pages seront lisibles pour tout le monde : respecter la norme du langage à la virgule prêt. Bien déclarer le DOCTYPE, utiliser les bonnes balises, etc... Sachez que les micro-navigateurs sont beaucoup moins tolérants que les navigateurs classiques : la moindre fantaisie dans votre code pourrait entraîner un refus de la page.
Lorsque vous aurez programmé votre première page WAP, testez la sur un émulateur [1]. Si ça fonctionne, testez-la ensuite sur votre mobile (vous aurez sans doute des surprises). Et si tout semble fonctionner, faites un dernier test : une validation du code. Pour cela rendez-vous sur le validateur, entrez l’URL de votre page. Si le message reçu est "This Page Is Valid -//WAPFORUM//DTD WML 1.1//EN !", vous pouvez dormir sur vos deux oreilles : n’importe quel internaute WAP pourra lire votre page correctement. Mais si vous recevez une erreur... rectifiez-la absolument.

L’en-tête du document

Votre fichier WML devra obligatoirement commencer par ces deux lignes :

Mais pour plus de sécurité et une meilleure accessibilité, nous vous conseillons de préciser également, à la première ligne, l’encodage du document. Ce qui donne :

Vous placez ensuite votre balise d’ouverture WML.
Ensuite, vous pouvez ajouter une balise HEAD et quelques balises META, exactement comme si vous composiez une page WEB classique. Ainsi, la présentation d’une page WAP peut être :

NB : notez le ’/’ à la fin des balises méta.

Le "Set of Cards"

On a l’habitude de comparer une page WAP a un jeu de cartes, set of cards en anglais. Le fichier, c’est le set. Les cards ce sont les écrans. En effet, un écran n’est pas une page et vice versa, c’est la petite particularité du WAP par rapport au WEB. On écrit une card de cette façon :

Un petit exemple vaut mieux qu’un long discours. Voici donc une page constituée de deux cards reliées entre elles, et le résultat en capture d’écran :


Le set of cards: Capture d’écran d’un set of cards

Les balises

Il y a une quarantaine de balises en WML. Celles-ci sont très proches des balises classiques du HTML, à quelques différences près.

Balises de texte :
texte pour un paragraphe. Vous pouvez spécifer l’alignement avec les attributs left, right, center etc (par exemple Texte centré
  : saut de ligne (notez bien le ’/’)
texte en gras, texte en italique, texte souligné
<big>texte en grosses lettres</big>, texte en petites lettres

Accents et caractères spéciaux :
Attention ! Le codage des accents ne se fera pas de la même façon qu’en HTML. En HTML, un ’e’ accent aigü (é) se codera é La même chose dans une page WAP entraînera souvent un rejet de celle-ci par le micro-navigateur. Vous devez écrire vos accents "en brut", ou bien en utilisant le code ASCII.
Fites aussi attention à certains caractères spéciaux. Par exemple le symbole ’&’ : celui-ci n’est pas reconnu. Il doit être écrit '&' L’apostrophe s’écrira ''' et le guillemet '"' (facultatif)

Les images
Vos images devront être au format WBMP [2] : en noir et blanc et très légères. Le WBMP est le seul format d’image autorisé sur le WAP. Il va de soi que celles-ci ne doivent pas dépasser 90 pixels de large. Pour inserrer une image on procède ainsi :
<img src="image.wbmp" alt="texte"/>
Notez le / à la fin de la balise, et surtout notez la présence de l’attribut ALT : celui-ci n’est pas simplement facultatif mais obligatoire.

Les tableaux :
On les utilise de la même façon qu’en HTML, avec les balises TABLE, TR et TD.

Les boutons
Ceux-ci sont très importants : ils vont faciliter la navigation sur votre site WAP. Ce qu’on appelle les "boutons", ce sont les deux petits liens en bas de l’écran : à gauche d’une part, à droite d’autre part. L’internaute clique dessus avec les boutons de son téléphone (gauche/droite, valider/éteindre, etc). Ces boutons restent en place en bas de l’écran, même lorsque la page est longue. En somme, ils ne font pas vraiment partie de l’écran, ils sont à un niveau supérieur. Il en existe de nombreuses sortes, nous allons aborder les deux principales : le bouton de type ACCEPT et le bouton de type PREV (qui seront respectivement, en principe, en bas à gauche et en bas à droite de l’écran du téléphone mobile).
La balise d’un bouton est <do>....</do> On doit déclarer son type et son libellé. Pour un bouton en bas à gauche de l’écran, faisant un lien vers une page accueil.wml, on écrira donc :

<do type="accept" label="Accueil">

<go href="accueil.wml"/>

</do>

Le bouton retour : celui qui sera placé en bas à droite de l’écran. On l’écrira ainsi :

<do type="accept" label="Retour"

<prev/>

</do>

Aspect général d’une page WAP :
Malgré l’extrême simplicité du langage, les erreurs arrivent très vite et en grand nombre. Encore une fois, pensez à utiliser le validateur du W3C (voir en début d’article) : il pourra vous aider dans les moments où vous ne comprendrez pas ce qui bloque.

Dans un prochain article, nous aborderons des balises WML plus complexes, donnant un peu de dynamisme à vos pages (zones de saisie, formulaires, listes déroulantes). Nous verrons également comment créer un site dynamique par l’utilisation du PHP.

Questions et commentaires sur cet article.

[1] Un émulateur wap : Deck-it WAP Browser

[2] Un convertisseur d’image au format WBMP en ligne : WBMP converter

> Langages du Net