A Vous de jouer
Vous souhaitez devenir
des pionniers en WAP et WML, et pourquoi pas devenir
WAPMASTER, construisez votre site WAP grace aux petites
infos trouvées sur le net (merci ifrance, wapforum ...)
que je vous livre ici :
Pour vous aider
Pour
construire un document au format W.M.L., il faut
posséder un éditeur de texte quelconque tel que Word,
Wordpad, le Bloc-note de Windows...en veillant à
enregistrer votre document au format wml.
Le WML est aussi plus strict que le HTML: pour qu'un
document soit interprété par un navigateur il ne doit y
avoir aucune erreur.
Toutes
les balises wml:
Comme le HTML, le WML utilise des balises
entourées par des "<" et des
">". La plupart de ces balises vont par
paire, une introductive <balise> et l'autre
conclusive </balise>.
Les éléments compris entre ces balises peuvent avoir
des attributs pour les caractériser. Le nom de ces
attributs doivent être en minuscule, et leur valeur doit
être entourée par des guillemets ". Certains
attributs sont obligatoires, d'autres optionnels.
<a> <access> <anchor> <b>
<big> <br> <card> <do> <em>
<fieldset> <go>
<head> <i> <img> <input>
<meta> <noop> <onevent>
<optgroup> <option>
<p> <postfield> <prev> <refresh>
<select> <setvar> <small>
<strong> <table>
<td> <template> <timer> <tr>
<u> <wml>
Un exemple:
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM/DTD WML
1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml"
encoding="UTF-8"? >
<wml>
<card id="un">.............</card>
<card
id="deux">.............</card>
<card
id="trois">.............</card>
</wml>
Pour plus de clarté, nous allons reprendre une à une
les lignes de code :
<?xml version="1.0"?>
<!DOCTYPE wml PUBLIC "-//WAPFORUM/DTD WML
1.1//EN"
"http://www.wapforum.org/DTD/wml_1.1.xml">
Cette première ligne stipule la version W.M.L. utilisée
en faisant référence au X.M.L. pour la simple raison
que le W.M.L. est un langage dérivé du X.M.L..
<wml>.....</wml>
A l'instar d'un document H.T.M.L., les balises de fin et
de début précisent le langage utilisé en l'occurrence
le W.M.L..
<card id="un">.............</card>
Entre les balises <wml>.....</wml>se trouve
le contenu de votre document.
Ce contenu se structure à l'aide d'une ou plusieurs
"card"(en français : "fiche",
"carte") qui comme nous le verrons plus tard,
contiennent le texte, les images, les liens
hypertextes...
Chaque balise "card" est accompagnée de
l'attribut id (id="un"; id="deux";
id="trois").
Notez bien que la valeur de cet attribut figure en
minuscules et entre guillemets.
Cet attribut "id" correspond au nom de la
"card".
Ici, leur valeur a été choisie par analogie à leur
position dans le code :
ainsi, la "card" qui apparaît en premier dans
le code s'appelle "un",
la seconde à apparaître dans le code s'appelle
"deux", etc...
A l'ouverture de votre
document W.M.L., la "card" qui figure en
position initiale dans le code sera celle qui apparaîtra
sur votre écran.
Dans notre exemple, la "card" nommé
"un" sera donc celle qui apparaîtra à
l'ouverture de votre
site. Son
apparition n'est aucunement liée à son nom.
Nous venons de parler de "votre site W.M.L." pour parler de
votre premier document W.M.L. et vous vous demandez
pourquoi. Pour la simple raison que votre document W.M.L.
est en fait votre site W.M.L. composé lui-même de
plusieurs "card". Contrairement au H.T.M.L.,
les liens hypertextes renverront de préférence non pas
à un nouveau fichier mais à une autre "card".
Vous naviguerez dans votre site grâce à des liens
hypertextes qui appelerons non pas un autre document
W.M.L. mais une autre "card", d'où l'intérêt
de l'attribut "id".
Ceci est préférable car il ne faut pas oublier que les
sites en WML sont faits pour être consultés sur des
téléphones portables, à des vitesses de transfert
nettement inférieures à celles de l'internet courant.
Il vaut mieux charger une page dans laquelle on
naviguera, que charger à chaque fois une nouvelle page,
ce qui prendra du temps.
A titre d'exemple, la syntaxe d'un lien hypertexte que
nous verrons plus tard en détail sera :
<a href="#deux">Lien vers la card numéro
deux</a>.
Les balises W.M.L.
suivantes seront à intégrer entre les balises
<card>.........</card>.
Quand vous aurez construit votre document W.M.L., veillez
bien à le sauvegarder au format W.M.L.
L'étape suivante consistera à télécharger un
navigateur W.M.L. afin de visualiser votre oeuvre.
Comme nous l'avons vu
plus haut, un fichier W.M.L. se compose de plusieurs
card. Le nombre total de card présent dans le code d'un
document s'affichera dans la barre d'état de votre
navigateur. A l'ouverture de votre fichier, apparaîtra
celle qui figure en premier dans le code.
| ATTRIBUTS
D'UNE CARD |
|
| Définit
une card |
<card>contenu
de la card</card> |
| Définit
le nom d'une card |
<card id="nom de la
card"> |
| Définit
le titre d'une card |
<card
title="titre de la card"> |
La structure de base
d'un tableau est la suivante :
(exemple d'un tableau d'une ligne (tr) de deux
cellules(td))
<table>
<tr>
<td>contenu de la cellule numéro 1</td>
<td>contenu de la cellule numéro 2</td>
</tr>
</table>
| ATTRIBUTS
D'UN TABLEAU |
|
| Définit
un tableau |
<table>.......
</table> |
| Définit
le nom du tableau |
<table id="mon
tableau"> |
| Définit
l'alignement du tableau (left, right, center) |
<table
align="center"> |
| Définit
le titre du tableau |
<table
title="titre de mon tableau"> |
| Définit
le nombre de colonnes du tableau |
<table
columns="7"> |
| ATTRIBUTS
D'UNE LIGNE |
|
| Définit
une ligne d'un tableau |
<tr>contenu
de la ligne</tr> |
| Définit
le nom d'une ligne |
<tr
id="nom de ma ligne"> |
| ATTRIBUTS
D'UNE CELLULE |
|
| Définit
une cellule à l'intérieur d'une ligne |
<td>contenu
de la cellule</td> |
| Définit
le nom d'une cellule |
<td
id="nom de ma cellule"> |
Les images ont un format
spécifique au W.M.L. : le WBMP (Wireless BitMaP)
Il s'agit d'une version à 1 bit (noir ou blanc) du
format B.M.P..
Pour convertir vos différents formats d'images en
W.M.L., vous pourrez télécharger un plugin, le UnWired
plugin, pour Photoshop et Paint Shop Pro en cliquant ici.
(lien internet)
Attention, Photoshop sauvegardera vos images avec
l'extension "WBM". Vous devrez manuellement
ajouter "P" pour donner à votre fichier
graphique la bonne extension.
Vous ce rencontrerez pas ce desideratum avecPaintshop
Pro.
Pour créer vos images,n'oubliez pas que:
L'écran d'un terminal sans fil est de petite taille, la
taille d'une image ne devrait pas dépasser les 110x110
pixels.
Veillez que leur poids n'excède pas 1500 octets eu
égard à la faible mémoire du téléphone.
| ATTRIBUTS
D'UNE IMAGE |
|
| Définit
une image |
<img/> |
| Définit
la source d'une image |
<img
src="monimage.wbmp"/> |
| Définit
le nom d'une image |
<img id="mon
image"/> |
| Définit
l'alignement d'une image(left, right, center) |
<img
align="center"/> |
| Définit
la hauteur d'une image |
<img
height="210"/> |
| Définit
la largeur d'une image |
<img
width="170"/> |
| Définit
le commentaire desubstitution à une image |
<img
alt="bonjour"/> |
| Définit
l'espace entre une image et le haut et le bas |
<img
vspace="10"/> |
| Définit
l'espace entre une image et la gauche et la
droite |
<img
hspace="10"/> |
Tous les
terminaux WAP n'affichent pas des graphiques.
Il est donc conseillé d'enrichir la balise <img>
de l'attribut "alt" de manière à lui
substituer un commentaire.
Remarquez que la balise d'une image se termine par le
signe "/" sinon elle ne s'affichera pas.
| ATTRIBUTS
DU TEXTE |
|
| Définit
un texte en italique |
<i>.......</i> |
| Définit
un texte en gras |
<b>.......</b> |
| Définit
un texte en grand |
<big>.......</big> |
| Définit
un texte en petit |
<small>.......</small> |
| Définit
un texte souligné |
<u>.......</u>
|
| ATTRIBUTS
DE MISE EN FORME |
|
| Définit
un paragraphe |
<p>.......</p> |
| Définit
un retour à la ligne |
<br/>contenu de la
ligne |
| ATTRIBUTS
DES BOUTONS |
|
| Définit
un bouton (par défaut retourne à la card
initiale, celle qui figure en premier dans le
code |
<do></do> |
| Définit
l'intitulé d'un bouton |
<do
label="intitulé"></do> |
| Définit
un bouton retour vers la page précédente |
<do type="prev"
label="retour" >
<prev/></do> |
| Définit
un bouton retour vers une card précise |
<do type="accept"
label="retour vers une card" >
<go href="#nom de
card"></do> |
| Annule
le contenu d'un formulaire |
<do type="reset"
label="annulation" >
<reset/></do> |
| Remet
à zéro le contenu d'un formulaire |
<do type="delete"
label="remise à zéro" >
<delete/></do> |
| ATTRIBUTS
DES FORMULAIRES |
|
| Définit
une zone de texte |
<input
type="texte"/> |
| Définit
le nom d'une zone de texte |
<input
type="texte" id="nom de la
zone"> |
| Définit
le nom de la variable attribué à cette zone |
<input
type="texte" name ="nom de la
variable"> |
Définit
l'envoi du contenu à un mail :
name correspond au nom de la zone (id)
value correspond au nom de la variable associé
à la zone (name) |
<anchor>
Envoyer le formulaire
<go method="post"
href="http://www.ifrance.com/mailto.php3">
<postfield name="zone1"
value="$(zone1)">
<postfield name="zone2"
value="$(zone2)">
</go></anchor>
|
Les liens et les ancres fonctionnent selon le principe
classique de l'hypertexte.
Ils vous permettront de naviguer tantôt entre plusieurs
card, tantôt vers une autre site W.M.L., tantôt vers
une boîte à lettres électronique.
| ATTRIBUTS
DES LIENS |
|
| Définit
un lien vers une "card" |
<a href="#nom de la
card">
lien vers une card</a> |
| Définit
un lien vers une site W.M.L. |
<a
href="http://www.ifrance.com/
index.wml"> lien vers un site</a> |
| Définit
un lien vers une adresse mail |
<a
href="mailto:webmaster@ifrance.com">
lien vers une adresse mail</a> |
| ATTRIBUTS
DES ANCRES |
|
| Définit
le nom d'une ancre |
<anchor id="nom de mon
ancre ">
nom de mon ancre</anchor> |
| Définit
une ancre vers une adresse mail |
<anchor>ancre
vers une adresse mail
<go
href="mailto:webmaster@ifrance.com">
</go></anchor> |
Ces
infos proviennent de chez ifrance.
Quelques
petits logiciels:
Un éditeur wml WYSIWYG au doux nom de dotwap
à télécharger ici
Un autre éditeur waptor2.1 à télécharger ici
Un navigateur WEB/WAP
au nom de companion
à télécharger ici
Un plug in Wbmp (images 2bits pour le wml&wap) pour
Photoshop 5 et Paintshop-pro
à télécharger ici à placer dans le repertoire
(modules ou plug in)
|
