[Présentation | Découverte du langage WML ( Présentation, Syntaxe , Emulateur en ligne , Tester en local ) | Convertir de l'HTML en WML ( Présentation, installation, utilisation ) | Créer des images wbmp ( Présentation, XV, ImageMagick, NetPBM ) |  Emulateur WAP ( Présentation, wApua, Deck-it, Tofoa ) ]

Dernière modification 14 avril 2002

Créer et tester ses pages pour le WAP

Présentation

Cette page a pour objet de vous donner les bases du langage utilisé par le WAP et de vous présenter les outils qui vous permettront de créer votre premier site WAP. La page est décomposée en :
- découverte du langage WML, composition des premières pages,
- outil de conversion HTML vers WML,
- outil de création d'image WBMP le format d'image utilisé par WAP,
- outil de visualisation en local de fichier WML quand vous n'avez pas de téléphone WAP sous la main.

Les éditeurs WML sont pas très nombreux pour ne pas dire inexistants, mais heureusement que les pages WML sont généralement relativement simples comme au bon vieux temps du début du web et des premières pages HTML, un bête éditeur suffit à créer ses premières pages.

[Retour haut de la page]

Découverte du langage wml

Présentation

Le WAP utilise comme langage le WML qui est un langage à base de balises comme l'HTML, ses spécifications ont été écrites par le WAP forum qui regroupe un ensemble d'industriels, à ce sujet vous trouverez davantages d'info à l'URL www.wapforum.org.
L'objet de cette page n'est pas de rentrer dans le détail du langage WML pour cela je vous conseille www.allhtml.com, mais de vous donner les billes pour vous permettre d'écrire votre premier programme WML.
[Retour haut de la page]

Syntaxe

On va commencer par le traditionnel Hello World, voilà le fichier hello qui doit se terminer par l'extension .wml

<?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="Hello" title="top">
<p>
Hello World<br/>
</p>
</card>
</wml>

Les deux premières lignes correspondent à l'entête, chaque page WAP (qu'on appelle deck pour jeu de cartes) peuvent contenir plusieurs cards (collections de cartes). Dans notre exemple on a défini une card qui a pour identité Hello, la mention title="top" permet d'afficher top tout en haut de la page WAP. On retrouve des tags similaires à l'HTML comme <p>, au sujet de <p> comme dans l'HTML on peut spécifier le centrage <p align="left"> ou encore <p align="center">. <br/> correspond à un retour à la ligne.

Voilà ce que ça donne pour le premier exemple :

Pour les images, celles-ci doivent être au format wbmp, la syntaxe est similaire à l'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 id="image">
<p>
Une jolie image
<img src="image.wbmp" alt="Texte alternatif"/>
</p>
</card>
</wml>

Un tableau maintenant à deux colonnes :

<?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="tableau">
<p>
<table columns="2">
<tr>
<td> col 1 </td>
<td> col 2 </td>
</tr>
</table>
</p>
</card>
</wml>

Et voilà le résultat

Voilà maintenant la syntaxe pour l'italique, le gras et le souligné

<?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="style">
<p>
Texte en <i>italique</i><br/>
Texte en <b>gras</b> <br/>
Texte en <u>souligne</u> <br/>
</p>
</card>
</wml>

Pour finir un lien wml

<a href="http://wap.funix.org/">FUNIX</a>

Attention vous devez tomber sur une page wml pour que ça marche

De la même manière pour les liens locaux

<a href="index.wml">Accueil </a>

[Retour haut de la page]

Emulateur en ligne

Si vous ne disposez pas de téléphone WAP, vous pouvez néanmoins tester vos créations en ligne sur certains sites, voici quelques adresses:
- www.gelon.net
- www.wapsilon.com/main.html

Vous pouvez installer aussi des émulateurs sur votre machine.

[Retour haut de la page]

Tester en local

Cette manip a pour objet de créer un hôte virtuel wap.breizland.bz vous permettant de tester vos pages WAP avec les émulateurs qu'on verra un peu plus loin dans la page.

Créer un fichier index.wml en vous inspirant de ce qu'on a vu plus haut, mettez le dans un répertoire (/roger/homepage/wap chez moi) :

Rajoutez wap.breizland.bz dans /etc/hosts ou modifiez la config de votre serveur DNS si vous en avez un. Rajoutez maintenant dans le httpd.conf d'apache, la déclaration de l'hôte virtuel

<VirtualHost 192.168.13.11>
DocumentRoot /roger/homepage/wap
ServerName wap.breizland.bz
</VirtualHost>

Relancez apache

Vous n'êtes pas obligé de faire un hôte virtuel, vous pouvez très bien à partir des pages par défaut d'apache (celles sous htdocs voir page apache) faire un lien vers votre fichier wml.

[Retour haut de la page]

Convertir de l'HTML en WML

Présentation

Je ne vous présenterai qu'un outil permettant de convertir des pages HTML en WML, il porte le nom très original de Html2Wml, on peut l'utiliser comme une commande en ligne ou en tant que CGI avec Apache. Le code WML obtenu est généralement propre (conforme aux spécifs) à la condition que vos pages HTML le soient aussi. Pour cela vous devez avoir un éditeur HTML qui respecte au mieux le standard W3C, je doute que FrontPage par exemple soit une bonne solution. Pour vérifier vos pages HTML vis à vis des standards, l'auteur de Html2Wml conseille l'emploi de HTML Tidy qu'on trouvera à l'URL www.w3.org/People/Raggett/tidy.
[Retour haut de la page]

Installation

Préalablement il faudra installer les packages suivants si ce n'est déjà fait sur votre système (Mandrake 8.1 CD1) :

perl-XML-Parser-2.30-4mdk.i586.rpm CD1
perl-Text-Template-1.31-1mdk.i586.rpm CD2

On récupérera l'archive de html2wml à l'URL http://htmlwml.sourceforge.net qu'on décompressera en tapant :

tar xvfz html2wml-0.4.9.tar.gz

Cela va donner le répertoire html2wml-0.4.9. On édite le fichier Makefile, on modifie le préfix où seront installés les fichiers de html2wml, ainsi que le répertoire des cgi-bin d'apache. Chez moi cela donne

# Configuration
PREFIX=/usr/local
CGIDIR=/var/www/cgi-bin

On tape à présent

make

Voilà le résultat

Checking if your config looks good...
Perl module XML::LibXML is not installed.
Some fonctionalities of Html2Wml won't be available.
Perl module XML::Checker::Parser is not installed.
Some fonctionalities of Html2Wml won't be available.
Sounds ok.

Current configuration:
PREFIX=/usr/local
     => BINDIR=/usr/local/bin
        MANDIR=/usr/local/man
        DOCDIR=/usr/local/doc/html2wml
    CGIDIR=/var/www/cgi-bin

Type "make install" to install Html2Wml.
Type "make installcgi" to install Html2Wml in your CGI directory.

Bizarrement il ne trouve pas le libXML et le parser XML alors que les packages sont bien installés sur mon système, mais ce n'est pas important pour la suite. En tant que root on tape maintenant

make install

Pour installer le scipt cgi-bin toujours en tant que root

make installcgi

Voilà le résultat

install -m 555 html2wml.cgi /var/www/cgi-bin
 

[Retour haut de la page]

Utilisation

On peut utiliser html2wml en ligne de commande, la syntaxe est très simple :

perl html2wml.cgi url de la page html > fichier.wml

Comme ceci par exemple

perl  html2wml.cgi http://www.breizland.bz/page.html > index.wml

En tant que cgi, en admettant que vous ayez bien copié html2wml.cgi dans le répertoire des cgi d'apache, il faudra maintenant copier le fichier html2wml-0.3.8/t/form.html dans un répertoire où vous pourrez accéder au fichier en tapant une url (htdocs, ...). Pour ma part pour reprendre l'exemple de l'hôte virtuel, je l'ai placé sous /roger/homepage/wap, je peux donc accèder au fichier en tapant http://wap.breizland.bz/form.html. Voilà ce que ça donne :

Dans le champ URL saisissez l'URL d'un de vos fichiers HTML.
Le Debug mode permet d'avoir une sortie du fichier HTML à l'écran comme ceci avec une vérification syntaxique.

Si vous ne choisissez pas le mode debug, une fenêtre s'affiche avec Enregistrer sous... (type text/vnd.wap.wml), qui vous permet d'enregistrer le fichier au format wml où vous voulez.

[Retour haut de la page]

Créer des images wbmp

Présentation

La méthode que je vais vous montrer pour créer des wbmp est un peu tordu, mais elle a l'avantage de marcher, on va procéder en deux étapes :
- on va prendre une image au format classique (gif, jpg, ...) et avec XV ou ImageMagick on va la convertir en .pbm
- ensuite grâce à NetPBM, on va convertir le .pbm en .wbmp

Il est dommage que Gimp ne comprenne pas ces formats (quoiqu'il arrive à lire le .pbm mais pas à sauvegarder dans ce format ), je n'ai pas trouvé de plugins qui étaient capables de faire ça.

XV ne permet pas de faire des gros traitements sur l'image pbm, ImageMagick ..

[Retour haut de la page]

XV

Présentation

XV est un célèbre éditeur d'images bien connus des utilisateurs d'UNIX commerciaux, il n'est pas en standard de la Mandrake, peut être parce qu'il n'est pas si libre que ça.

Installation
On récupérera les sources à www.trilon.com/xv/index.html vous avez accès aussi à un binaire au format RPM que je n'ai pas testé. On décompresse l'archive en tapant :

tar xvfz xv-3.10a.tar.gz

Cela donne un répertoire xv-3.10a dans lequel on modifiera le fichier Makefile, au lieu de :

 ### for LINUX, uncomment the following line
#MCHN = -DLINU

On écrira

 ### for LINUX, uncomment the following line
MCHN = -DLINUX -L/usr/X11R6/lib

Par ailleurs dans le fichier xv.h autour de la ligne 119, on commentera les lignes suivantes

/*#  ifndef __NetBSD__
     extern char *sys_errlist[];
#  endif*/

On peut taper à présent :

make

Puis en tant que root

make install

Voilà le résultat de la commande, ça vous donne un idée de l'emplacement ou se retrouve les fichiers :

cp xv bggen vdcomp xcmap xvpictoppm /usr/local/bin
cp docs/xv.man     /usr/local/man/man1/xv.1
cp docs/bggen.man  /usr/local/man/man1/bggen.1
cp docs/xcmap.man  /usr/local/man/man1/xcmap.1
cp docs/xvp2p.man  /usr/local/man/man1/xvpictoppm.1
cp docs/vdcomp.man /usr/local/man/man1/vdcomp.1
cp docs/xvdocs.ps* /usr/local/lib

Création d'image au format PBM
Pour sauvegarder une image au format pbm, on procédera ainsi
- charger votre image au format classique (Load),
- Redimensionnez l'image, sachant que votre image doit avoir au maximum comme dimension 96*44 pixels pour pouvoir rentrer en une fois sur l'écran et ne pas être trop grosse non plus (Image Size puis Set Size),
- On sauvegarde l'image (Save), on choisit pour cela le format PBM/PGP/PPM (raw) avec Colors B/W Dithered.

[Retour haut de la page]

ImageMagick

ImageMagick permet aussi de sauvegarder au format pbm. Sur une Mandrake 8.1 vous le trouverez sur le CD1 ImageMagick-5.3.8-10mdk. Pour le lancer il suffit de taper

display

Appuyez sur le bouton gauche de la souris, vous pouvez ouvrir une image, la redimensionner (View->Resize) avec comme dimension (au maximum 96*44) et la sauvegarder au format pbm (File->Save->Format)

[Retour haut de la page]

NetPBM

Présentation
NetPBM propose un ensemble de convertisseurs d'image au format un peu exotique fort pratiques, on y trouvera notamment notre convertisseur faisant du wbmp à partir de pbm.

Installation
On récupérera l'archive à l'URL sourceforge.net/projects/netpbm . On décompresse l'archive en tapant :

tar xvfz netpbm-9.24.tgz

Cela va donner le répertoire netpbm-9.24 dans ce répertoire on tapera :

configure

Voilà le résultat de la commande

Which of the following best describes your platform?
gnu      GNU/Linux
sun      Solaris or SunOS
hp       HP-UX
aix      AIX
tru64    Tru64
irix     Irix
win      Windows/DOS (Cygwin, DJGPP, Mingw32)
beos     BeOS
netbsd   NetBSD
openbsd  OpenBSD
unixware Unixware
osx      Darwin or Mac OS X
none     none of these are even close

Your choice (gnu)==> gnu

Do you want a regular build or a merge build (see README)?

regular or merge (regular)=> regular

Do you want static-linked Netpbm libraries or shared?

static or shared (shared)=> shared

Do you want to build static libraries too (for linking to
programs not in the Netpbm package?

(y)es or (n)o (y)=>y

The remaining questions concern how Netpbm is installed when you do
'make install'.  None of these answers affect what gets built by
'make'.  In particular, none of the directory paths you specify
are built into any Netpbm program or library -- you can move them
around as you like.

Enter the installation directory.  Everything gets installed under
This directory.  If you want to spread Netpbm across your system,
specify '/'

install prefix (/usr/local/netpbm)=> /usr/local/netpbm

Enter the install location for programs, relative to /usr/local/netpbm.

program directory (bin)=> bin

Enter the install location for shared (runtime) libraries,
relative to /usr/local/netpbm.

library directory (lib)=> lib

Enter the install location for linktime libraries,
relative to /usr/local/netpbm.
These are libraries that get used when you build a program that
is not in the Netpbm package, but uses the Netpbm subroutine
libraries.  This includes both static-linking libraries and
stubs for shared libraries

link directory (lib)=> lib

Enter the install location for interface headers,
relative to /usr/local/netpbm.
These get used when you compile a program which is not in the
Netpbm package, but uses the Netpbm subroutine libraries.

header directory (include)=> include

Cannot find the include files for SVGALIB.  Enter the directory where they reside, or NONE.  If NONE, a default make will not build programs that require the SVGALIB library.
Svgalib header location (NONE)=> NONE

We have created the file 'Makefile.config'.  You can now
proceed to enter the 'make' command.

Note, however, that we have only made a rough guess at your
configuration, and you may want to look at Makefile.config and
edit it to your requirements and taste before doing the make.

On tape alors

make

Puis en tant que root

make install

Vous obtenez une tonne de convertisseurs (jetez un coup d'oeil dans /usr/local/netpbm/bin), dont celui qui nous intéresse, à savoir pbmtowbmp.

Convertir le pbm en wbmp
Voici la syntaxe pour obtenir une image wbmp à partir d'une pbm :

pbmtowbmp funix.pbm > funix.wbmp

[Retour haut de la page]

Emulateur WAP

Présentation

Ces outils vous permettent de visualiser vos pages wml et d'émuler le comportement d'un téléphone WAP. Au lieu d'émulateur WAP, on parle aussi de browser wml.
 
[Retour haut de la page]

wApua

Installation
On récupérera l'archive à l'URL fsinfo.cs.uni-sb.de/~abe/wApua qu'on décompresse en tapant :

tar xvfz wApua-latest_tar.tar.gz

Cela va donner le répertoire wApua-0.05

Préalablement j'ai du installer tous ses packages sur ma Mandrake 8.1

pwlib1-1.1.36-6mdk CD1
perl-Tk-800.023-2mdk CD2

Pour info voici les autres packages de perl installés sur mon système

perl-HTML-Tagset-3.03-1mdk
perl-URI-1.15-1mdk
perl-libwww-perl-5.53-2mdk
perl-Text-Template-1.31-1mdk
perl-base-5.601-6mdk
perl-MDK-Common-1.0.2-7mdk
perl-5.601-6mdk
perl-GTK-0.7008-10mdk
perl-GTK-GdkImlib-0.7008-10mdk
perl-Digest-MD5-2.15-1mdk
perl-HTML-Parser-3.25-1mdk
perl-libnet-1.0704-1mdk
perl-Curses-1.06-1mdk
perl-CGI-2.753-1mdk
perl-Net_SSLeay-1.05-5mdk
perl-Tk-800.023-2mdk
perl-gettext-1.0-9mdk
perl-MIME-Base64-2.12-3mdk
perl-PDL-2.201-2mdk
perl-Authen-PAM-0.11-2mdk
perl-XML-Parser-2.30-4mdk
perl-devel-5.601-6mdk

Dans le répertoire wApua-0.05 on tape maintenant

perl Makefile.PL

Puis

make

Et en tant que root

make install

L'exécutable wApua va se trouver sous /usr/bin et un ensemble de fichiers sera créé sous /usr/lib/perl5/site_perl/5.6.0/wApua/

[Retour haut de la page]
Utilisation
Il suffit de taper wApua

On saisit une URL (celle que vous avez défini avec l'hôte virtuel par exemple). Ce browser wml est capable d'afficher les images wbmp. Si vous avez un soucis pour saisir une URL, copier le fichier wApua.rc se trouvant dans le répertoire de wApua, placer le dans votre homedirectory et nommer le .wApua.rc

cp wApua.rc ~/.wApua.rc

[Retour haut de la page]

Deck-it

Présentation
Deck-it n'est pas un logiciel sous licence GPL, mais il n'en est pas moins très utile, il est composé de deux logiciels, un browser WML qui émule dans la forme un téléphone (voir screenshot plus loin) et un logiciel permettant de convertir vos fichiers images classiques (jpg, gif, ...) en wbmp, mais pas de les sauvegarder dans ce format là :-(

Installation
On récupérera Deck-it à l'URL pyweb.com qu'on décompressera en tapant :

tar xvfz deckit-1.2.4.tar.gz

Cela va donner le répertoire deckit, dans lequel on tapera

 ./install.sh

Voilà le résultat de la commande

Installing scripts in /usr/local/linux/deckit
Creating /usr/local/linux/deckit/deckit
Creating /usr/local/linux/deckit/wbmp

Et pour installer le tout sous /usr/local/bin en tant que root

./install.sh /usr/local/bin

Utilisation
Il suffit de taper deckit, dans le champ Web or WAP address il faut rentrer l'URL de votre fichier .wml, comme ceci :

Deck-It est évidemment capable de visualiser aussi des images comme on le verra plus loin.

[Retour haut de la page]
Si on lance wbmp maintenant :

Cela permet de voir un peu ce que donnerait la conversion d'une image au format classique vers le wbmp, mais y a pas de moyen de la sauvegarder :-( c'est sûrement dans la version payante

Si on clique sur File->Show HTML Code on obtient

<!-- wmlimg reduce="24%"
            normalize="17%,0%" enhance -->

A quoi ça sert ? A l'inclure dans une page wml pour visualiser mon image gif comme une image wml

<!-- wmlimg reduce="24%"  normalize="17%,0%" enhance -->
<img  src="funix-wlfo.gif">
<!-- /wmlimg -->

Et voilà le résultat

Attention même si vous voyez votre image au format gif (ou jpg), ça ne marche qu'avec Deck-it, il vous faudra convertir cette image en wbmp pour que ça marche "en vrai".

[Retour haut de la page]

Tofoa

Présentation
Je présente ce logiciel car il est référencé un peu partout comme émulateur WAP. Je vous préviens l'installation est particulièrement tordue, il permet de pouvoir ouvrir des fichiers .wml.

Installation
Il faudra installer préalablement 4 softs avant d'aller plus loin à savoir wxGTK, le module XML de Python, le module Distutils de Python, wxPython et enfin Tofoa.

Prérequis
Tofoa utilise Python, voilà les packages qui sont installés sur mon système, en tapant :

rpm -qa | grep -i py

On obtient

python-1.5.2-12mdk
pygtk-0.6.6-4mdk
pythonlib-1.23-2mdk
pygnome-1.0.53-4mdk
python-imaging-1.1-2mdk
python-docs-1.5.2-12mdk
python-devel-1.5.2-12mdk

pythonlib-1.28-1mdk
python-numeric-20.1.0-1mdk
python-devel-2.1.1-3mdk
pygtk-0.6.8-7mdk
python-2.1.1-3mdk

[Retour haut de la page]
wxGTK
On récupérera l'archive à l'URL wesley.informatik.uni-freiburg.de/~wxxt qu'on décompressera en tapant :

tar xvfz wxGTK-2.3.2.tar.gz

Cela va donner le répertoire wxGTK-2.3.2 dans lequel on tapera successivement :

./configure
make

Puis en tant que root

make install

Vérifiez que dans le fichier  /etc/ld.so.conf vous avez la ligne suivante :

/usr/local/lib

Si vous avez du modifier ld.so.conf tapez :

ldconfig

Module XML de Python
On récupérera l'archive à l'URL www.python.org/sigs/xml-sig qu'on décompressera en tapant :

tar xvfz  PyXML-0.7.tar.gz

Cela va donner le répertoire PyXML-0.7, dans lequel vous taperez :

python setup.py build

Puis en tant que root

python setup.py install

[Retour haut de la page]
Module Distutils de Python
A priori ce module n'est pas nécessaire si vous utilisez la version 2.X de Python. Sinon il faudra récupérer l'archive à l'URL  www.python.org/sigs/distutils-sig qu'on décompressera en tapant :

tar xvfz Distutils-1.0.2.tar.gz

Cela va donner le répertoire Distutils-1.0.2 dans lequel vous taperez en tant que root :

python setup.py install

wxPython
On récupérera l'archive à l'URL http://wxPython.org/ qu'on décompressera en tapant

tar xvfz wxPython-2.3.2.1.tar.gz

Cela va donner le répertoire wxPython-2.3.2.1 dans lequel on modifiera le fichier  setup.py comme ceci

CORE_ONLY = 1      # if true, don't build any of the above

Puis on tape :

python setup.py build

Et en tant que root

python setup.py install

Pour voir que ça marche bien vous pouvez dans wxPython-2.3.2.1/demo tapez :

python demo.py

Et maintenant quelque chose de différent ! Vous comprendrez en regardant la démo :-)

[Retour haut de la page]
Tofoa
On récupérera l'archive de Tofoa à l'URL tofoa.free-system.com . Il se trouve que ce site a l'air mort, du coup voici la dernière archive  que j'y ai récupéré qu'on décompressera en tapant :

tar xvfz tofoa-0_0_4.tgz

Cela va donner le répertoire tofoa-0.0.4 contenant lui même les répertoires tofoae-0.0.5/ et  tofoav-0.0.1/ (qui contient un émulateur en ligne wml)

Utilisation

Dans le répertoire de tofoae-0.0.5/  on tapera tout simplement

python tofoae.py

Voilà le résultat:

 L'intérêt a priori de ce programme est qu'on peut ouvrir un fichier wml en visualisation.
 
 
[Retour page d'accueil FUNIX]
[Retour haut de la page]