Accueil CV Wap Images 3D Musik Tests Chats Trucs Gags Liens Livre d'or
.
.

   

WAP & WML
qu'est-ce que c'est ?

(WAP) Wireless Application Protocol
(WML) Wireless Markup Language

Le but de ce protocole et de ce langage est d'amener des informations sur les téléphones portables. (Internet sur les mobiles).

Le WAP, bien entendu, comme le Web, est un outil de publication. Mais pas question d'utiliser du HTML, jugé déjà trop obsolète, et de toute façon peu adapté à des écrans minuscules de mobiles. Le WAP a donc fait naître avec lui le WML.
Celui-ci est un langage entièrement ouvert, basé sur le XML. Chaque site développé en WML, pour le WAP est accessible via une passerelle de type HTTP1.1, propre au réseau global Internet. Pour surfer sur le WAP, il faudra donc passer par le Web.

La conception de site en WML est bien différente de celle en HTML. Oubliez déjà l'utilisation d'images. Vous ne pourrez utiliser que les 175 symboles intégrés dans la mémoire des mobiles.

Nokia imagine le portable comme une tablette pilotable avec un stylet.
(photo Nokia - netscope 01/2000)
   

SITE WAP
voulez-vous un aperçu ?

1ère Méthode
Si vous possédez déjà un mobile WAP (Nokia 7110, Ericsson MC218...) connectez vous depuis votre mobile à l'adresse suivante: http://www.ifrance.com/camp-nicolas/cram.wml et pourrez visualiser mon premier site WAP ( une ebauche proposant le prog TV ).

2éme Méthode
Téléchargez le fichier suivant : winwap 22
Effectuez l'installation du programme (c'est un navigateur wap qui simule l'écran d'un mobile.)
info : n'installez pas le logiciel dans le répertoire où vous venez de télécharger winwap
Lancez winwap depuis la barre des taches Windows.

Si vous êtes sur Intranoo, un message d'erreur apparaîtra vous indiquant, qu'il ne peut ouvrir la page de démarrage (c'est normal, elle est située sur Internet). Toutefois, dans les propriétés du logiciel, vous pourrez indiquer une nouvelle adresse de démarrage.
Tapez l'adresse suivante :
http://192.144.89.151/cram.wml et validé par oui si nouveau message. Voilà enfin mon ébauche de site wap qui apparait.

Si vous êtes sur Internet, aucun problème, vous pouvez tapez l'adresse suivante :
http://www.ifrance.com/camp-nicolas/cram.wml

Un projet futuriste d'un téléphone multimédia incorporant une webcam ainsi qu'un accès internet
(photo Ericsson - netscope 01/2000)
   

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)

Ecran LCD couleur et tactile, accès Internet, accès direct aux services en ligne...
(photo Nokia - netscope 01/2000)

Nokia 7110

Nokia

Ericsson R320s

Les bonnes @ du Net

wapforum
la bible du wapmaster
wap-magazine
en cours de création mais qui devrait être sans conteste,
un excellent site sur le wap (cf asp-magazine)
hoiley
hebergeur gratuit des wapmasters
ifrance
hebergeur gratuit wml et html

© Cram   Votez pour ce site