WAP @ WML
1. Le protocole Wap
La tentation était grande de relier le réseau de téléphonie mobile et le réseau Internet. C'est ce que réalise le WAP. Le WAP, pour Wireless Applications Protocole (en français : Protocole d'Application Mobile), a pour but de fournir un accès Internet à des terminaux comme les téléphones portables mais aussi aux assistants personnels numériques comme les Palm Pilots ou les Pockets sous Windows CE.
Techniquement, ce lien est effectué par une passerelle [ou gateway] qui a comme fonction d'assurer la liaison entre le Web et le réseau téléphonique commuté. Pour cela, elle procède d'abord à la conversion du protocole Wap en HTTP et TCP/IP. Elle compile ensuite le contenu Wap afin de réduire le volume d'informations à transmettre et ainsi limiter les besoins en bande passante. De la façon de travailler du gateway dépendra parfois le rendu de votre site Wap.
Le standard Wap comporte toute une hiérarchie de services et de protocoles qui fonctionnent en couches superposées.
 Le Wap utilise le réseau mobile comme réseau porteur [bearer]. Il y a bien entendu la norme Gsm mais les autres réseaux de transmission de données comme le CSD, le SMS ou le CDMA sont compatibles.
 La couche transport assume la communication (le transport) entre le gateway et le terminal Wap. Le protocole utilisé est le Wireless Datagram Protocol ou WDP.
 La couche (optionnelle) de sécurité assure l'intégrité des données transmises, leur authenticité et leur confidentialité grâce au Wireless Transport Layer Security ou WTLS.
 La couche transaction avec le Wireless Transaction Protocol ou WTP garantit la bonne conclusion des transactions sous forme de requêtes-réponses.
 Au-dessus, on trouves la couche session assurée par le Wireless Session Protocol ou WSP.
 Et enfin, la couche Wireless Application Environnement ou WAE définit l'environnement Wap dont le format de fichiers en WML, le format des images et des exécutables comme le WMLScript ou autres.
2. Le langage WML
Tout comme le Web parle le Html, le langage utilisé sur le Wap est le WML pour Wireless Markup Language. Le WML est donc également un langage de balises [markup] mais là s'arrête la similitude avec le Html car le WML est en fait dérivé du XML dont il reprend les règles et la syntaxe.
Le WML est régit par le Wap Forum, groupe ouvert où se retrouve quelques 90 compagnies dont Ericsson, Motorola, Nokia... et qui a comme objectif d'élaborer des standards pour la technologie du Wap et son langage le WML. Le Wap Forum fonctionne en quelque sorte comme le World Wide Web Consortium (W3C) pour le Web.
Le WML connaît déjà différentes versions :
Le WML 1.0 Cette spécification n'a jamais été réellement mis en œuvre.
Le WML 1.1 La version la plus courante pour les terminaux disponibles en 2001.
Le WML 1.2 Cette version bien qu'elle intègre le WMLScript, ne change pas grand chose au niveau des balises. Elle n'est encore que peu supportée par les terminaux actuels.
-----------------------------------------
Le W3C, conscient que le brave langage Html était arrivé en bout de course, a retroussé ses manches pour repartir d'une feuille blanche et donner le jour au langage du futur sur le Web c-à-d le XML pour EXtensible Markup Language]. Le XML est ce qu'on appelle un métalangage soit un ensemble de règles et de prescription pour permettre d'inventer de nouveaux langages avec ses propres balises. Le WML utilisé comme langage du Wap est un de ces "enfants" du XML.
Le XML, tout comme son coussin le HTML est issu du SGML qui est le langage de référence en milieu professionnel pour la gestion électronique des documents Cependant, il s'en rapproche davantage dans le sens où l'ont peut dire que XML est une forme accessible du SGML, car ce dernier est trop complexe pour s'afficher directement sur le WEB.
Il est important de retenir pour la suite que le WML n'est pas un Html simplifié ou du Html "light" comme d'aucuns le prétendent, mais que le WML est un langage issu du XML dont il reprend les règles pour le moins spécifiques.
3. L'héritage du XML
Le WML étant un héritier du XML, voyons ci-après quelques règles bien spécifiques au XML qui seront d'application lors de l'écriture de votre site Wap en WML.
L'écriture du XML est très "stricte" et doit respecter impérativement les règles suivantes.
 Tout document XML ou d'un langage dérivé commence par la déclaration, <?XML version="1.0">. Jamais de ligne vide ou d'espaces au début du document.
 Lorsque l'application ne contient pas ses propres définitions de balises (elle n'est donc pas "standalone"), il faudra lui spécifier le DTD Document Type Definition externe utilisé ainsi que l'adresse où le navigateur pourra le trouver.
 Le XML est "case sensitive" pour l'écriture de ses balises. Il faut donc veiller à l'usage uniforme dans tout le document de l'encodage des balises de l'usage des majuscules et minuscules.
 Toute balise ouverte doit impérativement comporter une balise de fermeture. Terminé par exemple avec les balises <P> orphelines. Ce sera toujours la forme <P> ... </P>.
 Les balises uniques comme le saut de ligne comporteront elles aussi un indice de fermeture soit une barre oblique [slash] de fin. On écrira donc en XML, <BR/>, <IMG SRC="xxx.gif"/>.....
 Les spécifications des attributs doivent toujours être entourée de guillemets. Comme c'était déjà le cas en HTML mais qui dont l'absence était déjà acceptée par les derniers navigateurs.
 L'imbrication des balises devra être proprement respectées.
 Etc...
Tout ceci illustre bien que le XML impose un strict respect de sa syntaxe. Un document XML doit pour être valable, voire opérationnel, être "well-formed", c-à-d d'une forme impeccable. La punition est sévère : à la moindre faute, votre document XML et donc WML ne s'affichera pas !
C'est peut-être là que se situeront vos principales surprises de Wap-designeur car les navigateurs Html et surtout Microsoft Internet Explorer ont tendance à être de plus en plus "gentils" ou permissifs avec le codage Html de référence. Alors qu'une page Html mal rédigée s'affiche souvent vaille que vaille, une page WML doit être parfaite, sinon rien ne s'affichera.
4. Réalités et perspectives
Le Wap est entouré d'une immense bulle médiatique et commerciale mais force est de constater que, sans remettre en cause son concept et ses énormes perpectives, la réalité en ce début de 21ème siècle est plutôt décevante.
Les réalités et contraintes actuelles
 L'écran d'affichage d'un mobile est on ne peut plus réduite. Abandonnez donc vos prétentions littéraires... L'information transmise devra être brève et concise ! La taille actuelle des écrans avoisine les 96 pixels sur 60 pixels soit 5 lignes avec 13 caractères par lignes [Nokia 6210].
L'image ci-dessus illustre la taille d'un écran de mobile par rapport à celle d'un écran d'ordinateur en
résolution 800x600.
 L'écran d'affichage d'un mobile est en deux couleurs. Pas d'images en 16 millions de couleurs donc et vos prétentions graphiques seront également à la baisse. Le WML possède son propre format d'image, adapté du format BMP : Le WBMP. Ses principales caractéristiques : 2 couleurs (noir et blanc), 1 bit, bichromatique et pas de compression possible.
 Connections lentes et donc coûteuses. La norme GSM n'est pas une foudre de guerre et son débit correspond à celui d'un modem de 14.400 bauds qui doit traîner dans le grenier de votre grand-père qui l'utilisait en 1995.
 Du fait de la capacité de mémoire limitée des mobiles et bien qu'elle puisse varier d'un portable à l'autre, il est fortement conseillé de ne pas dépasser les 1.400 octets (image éventuelle comprise) par document WML.
 Les navigateurs de pages Wap aussi appelé micro-navigateurs, micro-browsers ou "User Agents" n'ont pas tous la même prise en compte du Wap 1.1. Ainsi Nokia affichera correctement telle balise alors que le mobile d'une firme concurrente ne la prendra pas en compte. Ces différences d'interprétation (bien connue des Web designers d'il y a quelques années), constitue une gêne incontestable et impose au Wap designeur de tester son site Wap sous divers mobiles pour avoir une certaine compatibilité.
 Le nombre de sites Wap est encore limité. Mais vous connaissant, cela va s'arranger très bientôt.
Les perspectives et potentialités futures
 La téléphonie connaît un développement fantastique. On peut s'attendre très rapidement à des progrès considérables à court terme. D'autant que les outils empruntés à la communication sur Internet sont disponibles. Après l'éclatement de la bulle médiatique et la mise en place de nouvelles technologies, le Wap et sa disponibilité vers l'outil Internet à tout moment, doit connaître un avenir grandissant et florissant. Le Wap est encore en ce début de siècle à l'ère préhistorique !
 Bien qu'elle restera physiquement limitée, la taille de l'écran des mobiles ira croissante.
 Les écrans en 256 couleurs sont d'ores et déjà annoncés.
 Avec les nouvelles normes annoncées (GPRS, UMTS), les débits devraient être rapidement à la hausse. La vidéoconférence ou la visualisation d'un film sur votre mobile n'est déjà plus du domaine de la fiction. Et pour le son, il est déjà disponible.
 Le Wap (pour rappel issu du XML) est l'instrument tout désigné pour la consultation rapide de bases de données.
 Les enjeux publicitaires et le ciblage marketing qu'il constitue pourrait à terme rendre le Wap gratuit...
5. Les outils pour développer
Pour développer un site Wap, vous aurez besoin :
 d'un éditeur WML ou simplement d'un éditeur de texte.
 et d'un émulateur Wap pour votre PC.
 ou d'un kit de développement (developer toolkit).
Un éditeur WML
 Le Wml tout comme le Html est du format texte. En outre les balises ne sont pas légions. Alors pourquoi s'embêter avec un éditeur Wml ? Pour faire un fichier Wml, un éditeur de texte comme Bloc-notes ou Notepad sous Windows ou Simpel Text sous Macintosh fait très bien l'affaire pour coder de "façon artisanale" votre page. N'oubliez alors pas de l'enregistrer - non sous l'extension de fichier txt - mais en .wml .
 Vous trouverez sur le Web quelques petits éditeurs Wml [WML editor] plus ou moins sympathiques et plus ou mois efficaces.
EasyPad Waptor (
http://www.waptop.net)
Simple d'usage et permettant de visualiser directement le résultat du code Wml, cet éditeur freeware peut être franchement conseillé pour une première approche du Wap et du Wml. Un petit reproche cependant : sa reproduction du code source Wml n'est pas tout à fait plus complète, ni très "stricte".
DotWAP 2.0 (
http://www.tagtag.com)
Un autre éditeur Wml freeware. Sa principale qualité est de pouvoir visualiser directement le code Wml sur une simulation d'un mobile Ericsson. Rudimentaire sur le plan des balises Wml disponibles, il propose également une possibilité de création de pages Wap aisément accessible.
Bien sûr il existe d'autres éditeurs Wml (freeware) tout aussi valables, voire plus selon votre façon de procéder. Citons en quelques uns :
WapSite : En français et semble assez bien fait et intéressant.
WapPage : En français également vous le trouverez sur
http://www.wapmine.com.
CardOne : D'origine allemande mais programme en anglais (
http://www.peso.de/wap).
CoffeeCup Wireless Web builder sur
http://www.coffeecup.com (particulier...).
Il y a aussi tout une génération de petits éditeurs Wml payants, mais l'auteur ne perçoit pas bien ce qu'ils apportent de plus...
 Si vous souhaitez sortir l'artillerie lourde, Macromedia propose une extension WML pour son éditeur Html Dreamweaver. Cela permettra au moins aux Webmaster familiarisés avec Dreamweaver de ne pas être dépaysé. Comme toujours avec Dreamweaver, complet et impeccable. Un outil de "pro" !
Un émulateur Wap
Les émulateurs Wap vont reproduire sur votre PC, le site Wap que vous pouvez consulter à partir de votre mobile. C'est donc un outil indispensable pour le développement. Nos suggestions reprennent spécialement les émulateurs avec lesquels on peut consulter un site Wap en local à partir de son disque dur et non à partir d'une adresse http sur le Web.
 M3Gate
Sous un look un peu "pompier", MGate est un excellent émulateur Wap avec une façade de mobile ou de Palm. M3Gate (
www.m3gate.com) est une extension pour les navigateurs Web. Il peut être intégré à Microsoft Internet Explorer (version 4 ou plus) et Netscape Communicator (version 4.5 ou plus). Il permet de visualiser les pages au format Wml prévues pour les mobiles Wap. Seul petit reproche, pour accéder à une page wml en local, il faut passer par l'adresse complète du genre file://C:/Progs/M3Gate/samples/index.wml. Pas très convivial...
 SmartPhone
Ne manquez pas de faire un tour du côté de Yospace. C'est une véritable mine au trésor pour les Wap-développeurs. Pas très porté sur le gratuit cependant.
 WinWap
Disponible en version d'évaluation à 30 jours, cet émulateur Wap existe en version française (
http://www.winwap.org).
Un kit de développement
Les kits de développement proposés par les constructeurs sont à mon humble avis "LA" meilleure solution pour les wap-développeurs. D'abord, il suffit de vous identifier pour disposer gratuitement de ses outils peu ordinaires. En outre, vu les problèmes de compatibilité du Wap entre les marques et les types de mobile, c'est une solution idéale pour tester votre site. Bien entendu leur prise en main est moins intuitive que les éditeurs précédemts mais ce sont de véritables bijoux pour professionnels. Incontournables !
 Nokia Wap Toolkit
Nokia (avec Ericsson) est la marque de mobiles la plus concernée par le Wap et propose sur son site toute une série d'outils pour les designeurs dont le Nokia Wap Toolkit (
http://www.forum.nokia.com). Vous trouverez tout ce dont vous avez besoin dans un même programme dont un compilateur d'erreurs de Wml et de Wmlscript (indispensable) et une visualisation immédiate sur différents modèles de la marque. Nécessite "Java Runtime Environment" téléchargeable directement à partir du site et une grosse machine.
 Ericsson WapIDE
Erisson propose également des outils de développement (
http://www.ericsson.com/wap/développer), moins affutés peut-être que ceux de Nokia mais tout aussi indispensables pour tester la compatibilité de votre site.
 Motorola
Moins en vogue, Motorola (
http://www.motorola.com) propose une plateforme de développement de qualité comparable à celle offerte par Nokia. Tout y est ; vérificateur de code, compilateur, visualisation en direct sur de nombreux modèles de la marque. Impressionnant !
 Openwave
Vaut le détour mais pour la compatibilité vous repasserez car Openwave (déveloper.phone.com) utilise son propre DDT et a introduit des balises propriétaires.
6. La structure d'un document Wap
La conception d'une "page" Wap est assez différente d'une page Web classique. En effet, la page
Web qui est affichée correspond au contenu d'un fichier Html complet. Du fait de la taille d'écran réduite des mobiles, on ne pourra afficher qu'un petit fragment d'information. Par ailleurs, il n'est pas concevable d'entreprendre une connexion téléphonique pour chacun de ces petits fragments.
Ainsi, la procédure adoptée par le Wap sera de charger un ensemble, un paquet de fragments qui sera stocké dans la mémoire du mobile. Les différents fragments seront appelés au cours de la consultation.
L'ensemble des fragments correspond à un fichier à l'extension .wml et est appelé un document WML, par assimilation une page WML et par les anglo-saxons, un "deck" ou un paquet de cartes.
Les différents fragments sont appelés des "cards" ou simplement des cartes.
Un fichier ou une page WML est donc un "paquet de cartes". Ce fichier ou ce paquet est composé d'une série de "cartes".
7. Le document Wml type
Voici pour débuter un document WML type. Ce modèle sera bien entendu étoffé en cours d'étude.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
En-tête classique d'un document XML (puisque le Wml est dérivé du Xml) avec sa balise xml et son DTD. Cette en-tête préalable à tout document Wml est obligatoire.
<wml>
Début du document Wml proprement dit.
<card id="card1" title="Carte 1">
<p>
Votre texte ici !
</p>
</card>
La première carte. Remarquez :
 la balise de début <card ...> et de fin </card> de la carte.
 en Xml, tout texte doit être structuré en paragraphes. Il y aura donc toujours au moins un paragraphe <p> dans la carte.
 le Xml réclame toujours une balise de fin. On n'oubliera donc pas la balise </p> de fin de paragraphe.
 comme le Xml, le Wml est "case sensitive". Pour éviter les ennuis, on a pris l'habitude d'écrire les balises et leurs attributs en minuscules.
<card id="card2" title="Carte 2">
<p>
Votre texte ici !
</p>
</card>
Une seconde carte. Il faut bien entendu veillez que chaque carte a bien un identifiant id=" ... " unique.
<card id="card3" title="Carte 3">
<p>
Votre texte ici !
</p>
</card>
On peut ajouter autant de cartes que l'on souhaite mais ne perdez pas de vue la capacité de mémoie des mobiles et la limite estimée à 1.400 octects par deck.
</wml>
Fin du document Wml. Cette balise de fin est indispensable [pas comme la balise </html>}.
8. La carte
L'élément <card> ... </card> possède quelques attributs qu'il est intéressant de détailler :
title="..." Le titre affiché par le micro-navigateur sur l'écran du mobile.
id="..." L'identifiant de la carte. Celui-ci doit être unique au sein du deck. L'identifiant servira d'ancre pour les liens à l'intérieur d'un deck.
newcontext="..." Newcontext="true", réinitialise le navigateur en effaçant les variables et l'historique. Utille pour la première carte d'un deck pour faire place nette au nouveau paquet.
Newcontect="false" (par défaut), n'entraîne aucune action particulière.
On peut encoder le texte de la carte en prenant soin de toujours l'inclure dans une balise <p>...</p>.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="Carte 1">
<p>
Votre texte ici !
</p>
</card>
</wml>
Remarquez le contenu de l'attribut title, soit Carte 1, affiché par le micro-navigateur sur l'écran du mobile.
9. Le texte et son formatage
La balise <p> ... </p>
Le texte doit être structuré en paragraphes. Tout texte sera donc contenu entre des balises <p> et </p>.
La balise <p> possède des attributs importants spécialement pour l'alignement du texte.
align="left" Aligne le texte à gauche (alignement par défaut).
align="center" Centre le texte.
align="right" Aligne le texte à droite.
mode="wrap" Ajuste le texte automatiquement à la largeur de l'écran (par défaut).
mode="nowrap" Ne coupe pas les lignes selon la largeur de l'écran. Dans ce cas, le mobile doit permettre le défilement horizontal.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise p">
<p align="left">
à gauche
</p>
<p align="center">
centré
</p>
<p align="right">
à droite
</p>
</card>
</wml>
Les commentaires
Vos commentaires éventuels peuvent apparaître n'importe où dans votre document Wml, il suffit de l'inclure entre les balises <!-- commentaire -->. Le contenu de ces balises ne sera pas affiché par le micro-navigateur.
La balise <br/>
Saut de ligne. Les habitués du Html veilleront bien à mettre le slash de fin.
La balise <b> ... </b>
Le texte est affiché en caractères gras [bold].
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise B">
<p align="center">
Texte normal<br/>
<b>Texte en gras [bold]</b>
</p>
</card>
</wml>
La balise <i> ... </i>
Le texte est affiché en caractères italiques [italic].
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise i">
<p align="center">
Texte normal<br/>
<i>Texte en italique</i>
</p>
</card>
</wml>
La balise <u> ... </u>
Soulignement du texte [underline]. Comme pour le Html, le souligné est à utiliser avec modération car la convention d'un lien est également le soulignement.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise u">
<p align="center">
Texte normal<br/>
<u>Texte souligné</u>
</p>
</card>
</wml>
La balise <big> ... </big>
Affiche le texte dans une taille plus grande. Comme il n'y a pas (encore?) de balises pour la taille de la police de caractères, c'est avec <small> la seule balise pour modifier la taille du texte.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise big">
<p align="center">
Texte normal<br/>
<big>Big texte</big>
</p>
</card>
</wml>
La balise <small> ... <small>
Affiche le texte dans une taille plus petite. Comme il n'y a pas (encore?) de balises pour la taille de la police de caractères, c'est avec <big> la seule balise pour modifier la taille du texte.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise small">
<p align="center">
Texte normal<br/>
<small>Small texte</small>
</p>
</card>
</wml>
La balise <em> ... </em>
Texte mis en avant par le micro-navigateur [emphasis]. Généralement par des caractères en italique.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise em">
<p align="center">
Texte normal<br/>
<em>Texte écrit avec la balise em</em>
</p>
</card>
</wml>
La balise <strong> ... </strong>
Texte mis en avant par le micro-navigateur. Généralement par des caractères en gras.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="La balise strong">
<p align="center">
Texte normal<br/>
<strong>Texte avec la balise strong</strong>
</p>
</card>
</wml>
Les balises imbriquées
Il est bien entendu possible d'adopter plusieurs balises de format pour un même texte. Mais dans ce cas, il faut veiller à ce que les différentes balises soient correctement imbriquées. Ce qui n'est plus indispensable avec les navigateurs Web actuels.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="Des balises">
<p align="center">
Texte normal<br/>
<big><b><i>Balises multiples
</i></b></big>
</p>
</p>
</card>
</wml>
Les caractères spéciaux
Certains caractères de texte sont également (et en priorité) utilisés par le Xml et donc le Wml. Il faut donc impérativement les remplacer sous risque que votre document Wml ne soit pas "correct" et que votre page ne s'affiche pas.
Le point-virgule ; de fin est indispensable en Wml (il ne l'est plus sous Explorer 4 et +).
" Les guillemets "
' L'apostrophe '
& Le et commercial soit &
< Le "plus petit que" soit <
&qt; Le "plus grand que" soit >
L'espace insécable
­ L'espace "blanc"
$$ Le signe dollar $
Pour les autres caractères spéciaux (lettres avec accent...), on se reportera au code Unicode 2.0 de ces caractères spéciaux comme pour le Html. Selon le gateway, il n'est pas impossible que ces ou certains de ces caractères spéciaux ne soient pas affichés.
10. Les liens
Tout comme le Web, le Wap est hypertexte. L'utilité première des liens en Wml est de permettre la navigation vers les autres cartes du deck.
Liens internes
La balise de liens à l'intérieur d'un même deck ne présente pas de complication particulière et rappellera le système des "ancres" pour les habitués du Html.
Soit <a href="#identifiant">Lien</a> où identifiant est bien entendu le contenu de l'id="identifiant" de la carte vers laquelle on souhaite réaliser le lien.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="ct1" title="Carte 1">
<p>
Carte 1<br/>
<a href="#ct2">Vers carte 2</a><br/>
<a href="#ct3">Vers carte 3</a>
</p>
</card>
<card id="ct2" title="Carte 2">
<p>
Carte 2<br/>
<a href="#ct1">Retour carte 1</a>
</p>
</card>
<card id="ct3" title="Carte 3">
<p>
Carte 3<br/>
<a href="#ct1">Retour carte 1</a>
</p>
</card>
</wml>
Liens externes
Les liens externes prennent la même forme qu'en Html. N'oubliez pas que dès que vous faites un lien vers une page Wml (externe), il faut mettre en œuvre tout le processus de communication téléphonique. Ce qui est assez long !
Exemples :
<a href='produits.wml'> ... </a> Lien vers un fichier situé dans le même répertoire que la page du lien.
<a href='http://wap.html.com/produits.wml'>
... </a> Lien vers une page Wml d'un autre site.
<a href='http://wap.html.com/produits.wml#p1'>
... </a> Lien vers une ancre d'une page Wml d'un autre site.
11. Les tableaux
Les tableaux font partie intégrante du Wap 1.1 mais force est de constater que leur reconnaissance par les micro-navigateurs des différentes marques de mobiles est assez aléatoire et peut donner lieu à de désagréables surprises. Nous y reviendrons plus loin. Prudence donc !
La balise <table>
La balise <table> ... </table> ressemble à la balise du Html mais présente néanmoins des attributs particuliers :
title="Titre" Titre du tableau susceptible d'être affiché par le mivro-navigateur.
columns="x" Où x est le nombre de colonnes du tableau. Obligatoire !
align=" ... "
L
C
R
D Indique le type d'alignement pour chaque colonne.
Contenu de la colonne aligné à gauche [Left].
Contenu de la colonne aligné au centre [Center].
Contenu de la colonne aligné à droite [Right].
Contenu de la colonne déterminé par le micro-navigateur [Default]
La balise <tr>
<tr> .... </tr> Permet de définir une nouvelle ligne dans le tableau. Cette balise s'inscrit donc à l'intérieur des balises <table> ... </table>.
La balise <td>
<td> ... </td> Permet de définir une nouvelle cellule dans une ligne de tableau. Cette balise s'inscrit donc à l'intérieur des balises <tr> ... </tr>.
Une cellule peut contenir des images ou des liens mais pas d'éléments de formulaires.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ...>
<wml>
<card id="card1" title="Balise table">
<p align="center">
<table title="Tableau" columns="3" align="LCR">
<tr>
<td>A1</td><td>A2</td><td>A3</td>
</tr>
<tr>
<td>B1</td><td>B2</td><td>B3</td>
</tr>
<tr>
<td>C1</td><td>C2</td><td>C3</td>
</tr>
</table>
</p>
</card>
</wml>
Bizarre, vous avez dit bizarre...
Cette balise de tableaux illustre bien les différences d'affichage et de compatibilité que l'on rencontre dans le Wap, selon les marques et les modèles. A titre d'exemple voici le même fichier Wml décliné de 3 façons différentes.
Nokia
Ericsson
yospace
12. Les images
Le format WBMP
Le Wml utilise le format graphique WBMP Wireless Bitmap pour les images. Ce format WBMP est, pour l'instant, limité à deux couleurs : le noir et le blanc (transparent). Le WBMP est sans compression. Le Wap ne se caractérise donc pas encore par son attrait graphique.
La balise <img ... />
La balise d'image comporte de nombreux attributs. Insistons sur le slash / final de la balise.
alt="texte" Texte alternatif pour les micro-navigateurs qui n'affichent pas l'image. Quasi obligatoire !
scr="url" L'adresse de l'image. Il est recommandé de mettre les images dans le même répertoire que les pages Wml.
vspace="x" Où x indique l'espace (en pixels ou pourcentage) à laisser au-dessus et au-dessous de l'image.
hspace="x" Où x indique l'espace (en pixels ou pourcentage) à laisser à gauche et à droite de l'image.
align="top" Alignement du bord supérieur de l'image par rapport au sommet du texte.
align="middle" Alignement du milieu de l'image par rapport au milieu du texte.
align="bottom" Alignement du bord inférieur de l'image par rapport au bas du texte.
height="x" Où x est la hauteur de l'image.
width="x" Où x est la largeur de l'image.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml ..>
<wml>
<card id="ct1" title="Image">
<p align="center">
Wap @ WML<br/>
<img alt="logo" src="wap.wbmp"/>
</p>
</card>
</wml>
Convertisseur(s) WBMP
Pour des images en deux couleurs, pas besoin de sortir la grosse artillerie graphique. L'auteur vous propose un petit logiciel freeware Pic2wbmp de GINGCO New Media). Ce logiciel reprend les principales fonctions possibles avec ce format et est d'une prise en main très intuitive.
Il existe d'autres logiciels de même genre que vous trouverez par votre moteur de recherche préféré par les mots-clés "wbmp converter" ou "convertisseur wbmp".
13. Les événements
Le Wml prend en compte des événements auxquels on pourra associer des actions. Ainsi lorsque l'événement se produit (accéder à une carte, fin d'un compte à rebours, sélection d'un élément d'une liste de choix), l'action associée sera automatiquement exécutée.
Sur le plan explicatif, cette distinction entre les événements et les actions est un peu artificielle tellement les deux notions sont liées. On fera don inévitablement appel aux actions abordées à la page suivante.
La balise <onevent> ... </onevent>
L'événement déclencheur sera spécifié dans l'attribut type=" ... " ;
type="ontimer" L'événement est déclenché par l'arrivée à 0 d'un compte à rebours mis en place par une balise <timer .../>..
type="onenterforward" Lorsque l'utilisateur est entré dans une carte au moyen d'une action <go>.
type="onenterbackward" Lorsque l'utilisateur est entré dans une carte au moyen d'une action <prev>.
type="onpick" L'événement est déclenché par la sélection d'un élément dans une liste d'options.
Cet attribut type=" ... " pourra également être un attribut de la balise <card>.
Exemple :
<onevent type="ontimer>
action
</onevent>
On peut ainsi imaginer un site avec une carte servant de page d'accueil et une redirection automatique après x secondes vers une seconde carte.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC " ...>
<wml>
<card id="ct1" title="Welcome to">
<onevent type="ontimer">
<go href="#ct2"/>
</onevent>
<timer value="100"/>
<p align="center">
<big><b>Wap @ Wml</b></big><br/>
<img src="logowap.wbmp" alt="Wap"/>
</p>
</card>
<card id="ct2" title="Wap @ Wml">
<p>
Ce site est dédié au protocole Wap
et au langage WML ...
</p>
</card>
</wml>
Après 10 secondes (à fin du compte à rebours de timer), l'utilisateur est alors redirigé
de façon automatiquement vers une autre carte.
La balise <do> ... </do>
Lorsque l'action ne peut être déclenchée par un des événements précédents, celle-ci peut être activée par l'utilisateur grâce à la balise <do>.
En voici quelques attributs :
type="accept" ou
type="prev" Obligatoire ! Type="accept" réclamera une confirmation de la part de l'utilisateur tandis que type="prev" entraînera une action de retour à la carte précédente.
label="Texte" Le texte de la petite vignette demandant la confirmation par l'utilisateur. On signale un maximum de 6 caractères.
Exemple :
<do type="accept>
action
</do>
On imagine comme exemple que l'utilisateur doit confirmer sur l'étiquette "Encore" pour accéder à la carte suivante.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC " ...>
<wml>
<card id="ct1" title="Carte 1">
<do type="accept" label="Encore">
<go href="#ct2"/>
</do>
<p>
Faire <i> Encore </i>
pour aller à la page suivante.
</p>
</card>
<card id="ct2" title="Carte 2">
<p>
Vous voici comme promis
à la page suivante.
</p>
</card>
</wml>
L'événement (<do>) est ici la confirmation sur Encore par l'utilisateur pour passer à la carte suivante.
La balise <timer/>
Cette balise permet la mise en place d'un minuterie. Arrivé à la fin du compte à rebours, une action sera déclenchée.
Les attributs sont :
name="variable" Nom de la variable à laquelle est affectée la durée restante du compte à rebours.
value="x " Où x est la durée totale, exprimée en 1/10ème de seconde à partir de laquelle commencera le compte à rebours. Obligatoire !
Exemple :
<timer value="100"/> : Un compte à rebours de 10 secondes débute.
14 Les actions
Les actions disponibles en Wml sont déclenchées par des événements <onevent> ... action ... </onevent> ou par la balise <do> ... action ...</do>.
Ces actions sont au nombre de 4 : soit <go/>, <prev/>, <refresh/> et <noop/> :
La balise d'action <go/>
L'un des attributs le plus fréquemment utilisé est un lien vers une URL.
href="URL" Obligatoire ! L'URL de destination de l'action. La carte sera alors affichée.
Mais la balise <go> comporte encore de nombreux autres attributs, spécialement utilisées pour le transfert des données vers le serveur. Ces attributs comme sendreferer="true ou false", method="post ou get", enctype=... dépassent largement le cadre de cette initiation.
Exemple :
<do type="accept" label="Help"
<go href="#help"/>
</do>
La balise d'action <prev/>
Action de retour à la page précédemment consultée [previous] en se basant sur l'historique du micro-navigateur. S'il n'y a pas de page précédemment consultée dans l'historique, cette action n'aura pas d'effet..
Exemple :
<do type="accept" label="Retour"
<prev/>
</do>
La balise d'action <refresh/>
Actualise ou rafraîchit l'écran. Ce qui sera parfois utile pour actualiser des variables propres à la carte.
Exemple :
<do type="accept" label="Reload">
<refresh/>
</do>
La balise d'action <noop/>
La balise <noop/> [pour no operation] ne déclenche aucune action. Permet par exemple de désactiver dans une carte une action prévue pour toutes les cartes dans une template.
Exemple :
<do type="accept" name="back>
<noop/>
</do>
On reviendra sur cette balise lors de l'étude des templates.
15. Les templates
Le Wml qui se doit d'être économe en octets, propose un outil qui permet d'épargner des lignes de code. Ce sont les templates [modèles]. Les événements/actions que l'on aura défini avec la balise <template> s'appliqueront, un peu à l'image d'un modèle, à toutes les cartes du deck. Il serait équivalent de reprendre le même code dans chacune des cartes mais au détriment de la longueur du code.
La balise <template> ... </template>
Les attributs (facultatifs) sont :
onenterforward="URL" La template est activée quand le navigateur appelle la carte par une action <go>.
onenterbackward="URL" La template est activée quand le navigateur appelle la carte par une action <prev>.
ontimer="URL" La template est activée à la fin d'un compte à rebours.
Exemple :
Je souhaite faire apparaître sur chaque carte une vignette Help pour permettre à l'utilisateur de consulter une aide à tout moment.
<template>
<do type="accept" label="Help"
<go href="#help"/>
</do>
</template>
Le résultat est (bien entendu) conforme à ce souhait.
Où se met-elle ?
La balise <template> se met juste après la déclaration de document Wml soit la balise <wml> et en toute logique, avant toutes balises de cartes <card>.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<template>
... événement/action ...
</template>
<card id="card1" title="Carte 1">
<p>
Texte de la carte 1
</p>
</card>
<card id="card2" title="Carte 2">
<p>
Texte de la carte 2
</p>
</card>
<card id="card3" title="Carte 3">
<p>
Texte de la carte 3
</p>
</card>
</wml>
Comment l'éviter ?
Et si je ne veux pas qu'un de ces modèle s'applique à une carte déterminée ? Il suffira de mettre dans la carte, une action <do> du même nom (name) que celui de la template et une balise <noop/>. En outre toute action spécifiée dans la carte est prioritaire par rapport à celle de la template. Un exemple sera de loin plus explicatif...
Exemple :
Grâce à une template, je vais mettre une vignette Retour pour faciliter la navigation entre les cartes. Cette vignette Prev n'a bien entendu pas de sens pour la première carte.
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM//DTD WML 1.1//EN" "http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<template>
<do type="accept" name="back" label="Retour">
<prev/>
</do>
</template>
<card id="card1" title="Carte 1">
<do type="accept" name="back">
<noop/>
<do>
<p>
Texte de la carte 1
</p>
</card>
<card id="card2" title="Carte 2">
<p>
Texte de la carte 2
</p>
</card>
<card id="card3" title="Carte 3">
<p>
Texte de la carte 3
</p>
</card>
</wml>
16. Les zones de saisie
Le Wap n'aura jamais de vocation textuelle ou graphique. Par contre, là où il trouve son intérêt c'est dans sa faculté de pouvoir, n'importe où et n'importe quand, saisir une information, transmettre la requête et recevoir une réponse.
Le Wml propose pour l'encodage de l'information un outil précieux qui est la zone de saisie.
La balise <input ... />
Etant donné son importance, cette balise comporte beaucoup d'attributs. Insistons sur le slash final inhabituel pour les familiers du Html.
name="variable" Obligatoire ! Le nom de la variable qui contiendra la donnée encodée dans la zone de saisie par l'utilisateur.
value=" ... " La valeur par défaut de la variable désignée par name.
type ="text" ou
type="password" Spécifie le type d'affichage des données dans la zone de saisie. Soit "text" pour l'affichage normal des données de texte (par défaut), soit "password" pour l'affichage sous forme de ******** des données.
title="Titre" Le titre ou le nom de la zone de saisie susceptible d'être affiché par le micro-navigateur.
size="x" Où x ext la largeur en caractères de la zone de saisie.
maxlength="x" Où x est le nombre maximum de caractères encodables par l'utilisateur. Par défaut, ce nombre est illimité.
format=" ... "
A ou a
X ou x
N
M ou m
etc... Cet attribut spécifie le format (alphabétique, numérique, ...) des données acceptées dans la zone de saisie.
Majuscules avec signes de ponctuation ou minuscules avec signes de ponctuation.
Majuscules seulement ou minuscules seulement.
Chiffres
Tout caractère alphabétique ou numérique en majuscules ou tout caractère alphabétique en minuscules.
Voir autres...
emptyok=true" ou
emptyok="false" L'attribut emptyok="true" accepte une zone de saisie vide même si un format de données non vide a été spécifié.
L'attribut emptyok=false" n'accepte pas une zone de saisie vide. La saisie doit alors être conforme au format spécifié.
Exemple :
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC ".....>
<wml>
<card id="ct1" title=" Zone de saisie ">
<p>
Votre nom :<br/>
<input type="text" title="Nom de famille" name="name"/><br/>
Votre code postal : <br/>
<input type="text" maxlength="4" title="Code postal" name="poste" format="NNNN" />
</p>
</card>
</wml>
Dans cette carte, on demande dans une première zone de saisie de remplir le nom et dans une seconde zone de saisir le code postal qui est en Belgique de 4 chiffres seulement.
Ce qui en captures d'écran, suit le processus suivant :
 La carte de départ.
 On active la première zone de saisie et on encode le nom.
 On retourne à la carte de départ et on descend jusqu'à la seconde zone de saisie.
 Dans cette zone, on encode les 4 chiffres. On ne peut entrer que des chiffres et encore seulement 4.
 L'écran final se présente comme suit.
La balise <fieldset> ... </fieldset>
Pour être complet, il existe aussi la balise <fieldset> qui permet de grouper des options.
Le seul attribut est title="Titre" qui permet de donner un titre ou un nom susceptible d'être affiché par le micro-navigateur à un groupe de zones de saisie.
17. Les listes d'options
Le Wml propose pour l'encodage de l'information, outre les zones de saisie, les listes de choix ou les listes d'options.
La balise <select> ... </select>
Les listes d'option réclament en fait deux balises : d'abord la balise <select> [le pendant de <form> en Html] et les balises <option> [voir les balises <input type=" ... " du Html].
name="variable" Le nom de la variable qui contiendra la donnée correspondante au choix de l'utilisateur.
value=" ... " La valeur par défaut de la variable désignée par name. En cas de sélection multiple, les valeurs sont séparées par des points-virgules.
multiple = "true" ou
multiple="false" Important ! C'est assurément l'attribut le plus important de la balise <select> car c'est cet attribut qui déterminera si votre liste de choix est à choix unique ou à choix multiple.
Avec multiple ="true", la liste admet des sélections multiples [comme checkbox des formulaires Html].
Avec multiple="false", la liste n'admet qu'une seule sélection [comme radio des formulaires Html].
title="Titre" Le titre ou le nom de la liste d'options susceptible d'être affiché par le micro-navigateur.
iname="variable" Nom de la variable affectée par la position de l'index dans la liste d'options au cas où la variable name ne contiendrait aucune valeur. En cas de sélection multiple, les variables sont séparées par des points-virgules.
ivalue="x " Où x est un nombre indiquant une sélection au cas où la variable name ne contiendrait aucune valeur. Valeur comprise entre 1 et le nombre de choix proposés.
La balise <option> ... </option>
Etant donné son importance, cette balise comporte beaucoup d'attributs. Insistons sur le slash final inhabituel pour les familiers du Html.
title="Titre" Le titre ou le nom de la liste de choix susceptible d'être affiché par le micro-navigateur.
value=" ... " La valeur attachée à la sélection. Cette valeur est copiée dans la variable name de la balise <select>.
onpick="URL" Renvoie à l'URL déterminée lorsque l'utilisateur a retenu cette sélection. Comparable au "onclick" du Javascript
Exemple de choix unique :
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC ".....>
<wml>
<card id="card1" title=" Choix unique ">
<p>
Entrez votre choix:<br/>
<select name="choix" multiple="false">
<option>Choix 1</option>
<option>Choix 2</option>
<option>Choix 3</option>
</select>
</p>
</card>
</wml>
Ce qui en captures d'écran, suit le processus suivant :
 La carte de départ.
 On active la liste de choix qui s'affiche.
 On sélectionne son choix. Ici choix 2.
 L'écran final se présente comme suit.
Exemple de choix multiple :
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC ".....>
<wml>
<card id="ct1" title=" Zone de saisie ">
<p>
Votre moteur préféré:<br/>
<select name="choix" multiple="true">
<option>Yahoo</option>
<option>Altavista</option>
<option>Google</option>
<option>Hotbot</option>
</select>
</p>
</card>
</wml>
Ce qui en captures d'écran, suit le processus suivant :
 La carte de départ.
 On active la liste de choix.
 On sélectionne le ou les élément(s).
 L'écran final se présente comme suit.
La balise <optgroup> ... </optgroup>
Pour être complet, il existe aussi la balise <optgroup> qui permet de grouper des options.
Le seul attribut est title="Titre" qui permet de donner un titre ou un nom susceptible d'être affiché par le micro-navigateur à un groupe de liste d'options.
19. La publication de votre site
La balise <head> avec les balises <meta/> et <access/>
A l'approche de la publication de votre site Wap, il est temps de se préoccuper de l'en-tête des documents et spécialement des balises meta si prisées par les moteurs de recherche.
 La balise <head> ... </head>
Cette balise contient l'en-tête du document, soit un ensemble d'informations relatives au document Wml entier. Cette balise est en outre bien connue des habitués du Html. La balise <head> se place juste après la balise <wml> et sa balise de fin </head> avant toute déclaration <template> et/ou <card>.
 La balise <meta ... />
Comme pour le Html, il est loisible d'enrichir le head de balises <meta/> qui seront ensuite interprétées par les serveurs, les moteurs de recherche ou les micro-navigateurs. Citons comme exemples :
<meta name="description" content="Wap @ Wml - Les outils pour créer votre site Wap"/>
<meta name="author" content="Van Lancker Luc"/>
<meta name="keywords" content="WAP,WML, WML 1.1"/>
<meta name="copyright" content="Coryright © Van Lancker Luc"/>
L'attribut name ou http-equiv est, à quelques nuances près, équivalent.
 La balises <access ... />
Cette balise, qui n'existe pas en Html, permet d'implémenter un contrôle d'accès au niveau du
deck. Un deck ne pourra contenir qu'un seul élément access.
Le micro-navigateur vérifie le domaine à partir duquel le deck à la permission d'être appelé et
le chemin d'accès au deck qui a été spécifié. Le deck n'est affiché que si les éléments correspondent. Ainsi, pour :
<access domain="monsitewap.com" path="/wml"/>,
http://www.monsitewap.com/wml/data.cgi aura
accès mais pas
http://www.test.net/wml et ni
http://www.monsitewap.com/wmlscript/.
Hébergement de votre site
La publication de pages Wml de votre site s'effectue de la même façon que les pages Html de votre site Web. Elles seront "uploadées" vers votre espace disque de manière identique. Il faudra cependant vous assurer que le serveur de votre provider Web est correctement configuré pour les fichiers Wml du Wap. En effet, pour un micro-navigateur WAP, qui ne comprend pas le HTML, le type MIME doit être différent.
Les différents types MIME pour fournir des documents WML sont :
Type de document
Type MIME Extensions
Fichiers WML text/vnd.wap.wml .wml
WML scripts text/vnd.wap.wmlscript .wmls
WML compilés application/vnd.wap.wmlc .wmlc
WMLScripts compilés application/vnd.wap.wmlscriptc .wmlsc
Images WBMP image/vnd.wap.wbmp .wbmp
Mais il existe aussi sur le Web des sites qui hébergeront gratuitement votre site Wap [vous ne
risquez pas de "manger" beaucoup d'espace disque ?].
Pour terminer
En général, la page d'accueil d'un site Wap s'intitule index.wml. Mais pour faciliter la saisie de votre adresse sur le clavier d'un téléphone mobile, elle est souvent résumée à i.wml. Il faudra aussi s'assurer que cette page soit acceptée par défaut par le serveur quand l'adresse demandée n'indique qu'un répertoire.
all html : Le portail des webmaster
Message publié le samedi 16 mars 2002 - 23h01 par Dipp Itchy. 
Message publié le dimanche 17 mars 2002 - 15h32 par stork. Vincent -- http://www.radiopytagor.com/ 
Message publié le mercredi 03 avril 2002 - 21h55 par Enyss. J'aime apprendre, decouvrir et partager mon savoir... 
Message publié le mardi 04 mai 2004 - 10h23 par cmanquan. 
Message publié le jeudi 21 juillet 2005 - 16h36 par keld30.