Rapport XHTML

UNIVERSITE CADI AYYAD
FACULTE DES SCIENCES ET TECHNIQUES

MARRAKECH
Département d’informatique
Réalisé par: Filière IRISI 2
Année universitaire 2009/2010
- Hajar KHATIB (R. Communication)

- Khadija MASSKOUB (R. Documents)
- Naoul MOUHNI (R. Code)
- Ahmed EL AMINE (Chef projet)
- MOHAMMED AHAL SHABA (R. Code)
Encadré par:
Pr. Saïd RAKRAK
WML & XHTML MP
Faculté des Sciences et Techniques B.P 549, Av.Abdelkarim Elkhattabi, Guéliz Marrakech
Tél: (+212) 524 43 34 04 Fax: (+212) 524 43 31 70
FSTG - Département Informatique - IRISI
Sommaire
Introduction.............................................................................................................................................2
I- Le langage WML............................................................................3
WML Variables et contexte.....................................................................................................................6
Tâches et événements WML...................................................................................................................9
Les Interactions.....................................................................................................................................11
WML Timers..........................................................................................................................................18
WML Decks, Templates et Cards...........................................................................................................19
WML Texte et Formatage de texte........................................................................................................24
WML image...........................................................................................................................................26
II- Le langage XHTML-MP.................................................................27

Les avantages de XHTML MP:................................................................................................................27
WML Caractéristiques perdues en XHTML MP:....................................................................................28
Les Interactions.....................................................................................................................................29
Exemple récapitulatif :...........................................................................................................................32
XHTML MP Timers.................................................................................................................................35
Formatage de texte en XHTML MP........................................................................................................36
XHTML MP images.................................................................................................................................37
Année universitaire 2009 - 2010 -1- IRISI 2

Introduction
Malheureusement, aucun langage de balisage mobile unique n’est

universellement approprié pour les dispositifs mobiles. Les capacités du
navigateur mobile varient considérablement selon l’appareil utilisé. Pour
notre site Web mobile on a choisi le meilleur balisage connu pour être pris
en charge par le maximum de dispositifs mobiles, on a modifié la syntaxe et
la présentation pour fournir la meilleure image possible à partir du Web
mobile, tout en évitant les incompatibilités connues. C’est une procédure de
développement puissante appelée l'adaptation de contenu.
Voici quelques lignes directrices générales qui nous ont guidées pour le
choix de notre langage de balisage mobile:
 XHTML: Conçu pour les plus avancés des appareils mobiles et

Smartphones.
De plus en plus, les navigateurs mobiles XHTML soutiennent en plus
de XHTMLM et WML. Le développement du Web mobile en XHTML est un
développement tourné vers l'avenir, mettant l'accent sur la création d’un
rendu utilisable sur de petits écrans.
 XHTML-MP: vise à intégrer les appareils mobiles « Feature Phone ».

Convient également pour la plupart des appareils mobiles avancés et
les Smartphones, à l'exception de l'iPhone. XHTML-MP est le langage
standard pour le développement Web en mobile.
 WML: Le langage WML (Wireless Markup Language) est un langage à

balises basé sur XML permettant à des terminaux mobiles (téléphones
mobiles, pagers ou bien des assistants digitaux personnels) d'afficher des
documents reliés par des liens hypertextes. Le langage WML est très proche
du HTML, mais il est toutefois beaucoup moins "souple" que ce dernier.
Hors le langage WML n'est donc pas un langage de programmation,

c'est un simple fichier texte contenant des balises permettant de mettre en
forme le texte, les images...

I- Le langage WML
WML (Wireless Markup Language) est le langage de balisage défini dans la spécification
WAP 1.x. Il s'agit de la norme de balisage première langue pour les dispositifs sans fil. Avant
son introduction, les principaux acteurs dans le domaine sans fil tels qu’Openwave, Nokia et
Ericsson ont leur propre langage à balises. La spécification WML a été créée par le Forum WAP,
qui a été fondée par Ericsson, Motorola, Nokia et Openwave en 1997. À l'heure actuelle, ils se
font rares les sites WAP utilisant encore WML comme langage de balisage.
Le langage WML est très proche du HTML, mais il est toutefois beaucoup
moins "souple" que ce dernier, c'est-à-dire qu'il doit être conforme à un
document appelé DTD (Document Type Definition), indiquant la syntaxe à
suivre pour créer un document WML. En effet, étant donné que les
documents WML sont prévus pour être utilisées sur des réseaux de bande
passante réduite, et des terminaux restreints (en terme d'affichage, et de
ressources systèmes). Le langage WML permet ainsi l'affichage de textes,
d'images, de tableaux sur l'écran du terminal, ainsi qu'une navigation entre
les documents.
o La syntaxe du langage WML :
La constitution d'un document WML est très métaphorique, elle

s'apparente à un jeu de cartes (la désignation originale, donc anglophone,
est deck) constitué d'une série de cartes représentant des entités
documentaires telle qu'un écran de texte, un bouton, un champ,...
Une carte est en réalité un ensemble de balises WML entouré par les
balises <card> et </card>. Le document WML minimal est donc un fichier
texte contenant une seule carte:

<? 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="carte1" title="IRISI">
<p align="center">
<big>IRISI</big>
<br/>
Ingénierie réseaux informatiques<br/>
et systèmes d’information
</p>
</card>
</wml>
Aperçu :
Les 3 premières lignes sont obligatoires, elles définissent le type de

document ainsi que la version de la DTD utilisée. Les balises <wml>
définissent le jeu de cartes. Ce document ne contient qu'une carte, repéré
par un identifiant déclaré dans la balise <card> par l'attribut id.
Cet attribut est immédiatement suivi de l'attribut title qui définit un titre
pour la carte et qui sera affiché en haut de l'écran du terminal.
L'ensemble des balises à l'intérieur des balises <card> sont des balises de
style: elles définissent le style du texte à afficher.

o Règles WML :
Vu que le WML est avant tout basé sur le XML, il est donc aussi sévère
sur l'interprétation du code, ce qui est avant tout une bonne chose pour les
développeurs.
Voici quelques règles à respecter scrupuleusement :
 Minuscules : Les balises, attributs et valeurs doivent toujours être

spécifiées en minuscules.
 Attributs : Attention certains attributs sont obligatoires.
 Guillemet : Toujours entourer les valeurs des attributs par des
guillemets.
 Alt : Certains mobiles ne savent pas lire les images au format WBMP,
il est donc de rigueur de fournir une alternative avec l'attribut alt.
 Entête : L'entête d'un document WML est obligatoire. Ces premières
lignes définissent la déclaration de normes XML (car le WML est dérivé
de la version 1.0 du XML).
 Id : Eviter de dépasser 8 caractères pour l'ID à l'intérieur de la
balise<card> (certains mobiles peuvent poser problème).
 Casse : Le WML est sensible à la casse. Par exemple valeur1 est
différent de Valeur1 et de vaLeur1.
 Ordre : Bien suivre l'ordre des fermeture/ouverture.
 Fermeture : fermer correctement toutes les balises.
o Les principales balises :
Le langage WML est comme le html un langage à balise : il existe de

nombreuses ressemblances. La différence la plus importante est l’utilisation
de CARTE (card) en WML qui est similaire aux ancres du HTML.
A noter aussi les différences de syntaxe de la balise BR et de la balise TABLE
qui précise en WML le nombre de colonnes (colums= « n »)
Les principales balises de langage WML sont :
Action Format Attributs

Afficher du texte <p> </p> Align= « left » ou center ou
right
Retour à la ligne <br/>
Gras <b> </b>
Italique <i> </i>
Plus grand <big> </big>

Plus petit <small> </small>

tableaux <table columns= “1“> Width
<tr> Height
<td></td> border
</tr>
</table>
Incorporation <img src= “maison.wbmp“> Alt : texte de remplacement

d’images Height : hauteur de l’image
Liens entre de cartes <card id= “card1“ title= “essai”>

<a href= “card2“>vers la deuxième
carte</a>
</card>
WML Variables et contexte
o Mettre des valeurs de la variable en WML
En WML, les variables ne sont pas déclarées explicitement. On peut

choisir un nom de variable que on voulez et lui assigner une valeur
directement. Si on lit une variable sans lui assigner une valeur au plus tôt,
on obtiendra une chaîne vide.
Les noms de variables en WML sont sensibles à la casse. Le premier

caractère d'un nom de variable doit être une lettre ou un trait de
soulignement. Le reste peut être des lettres, des chiffres ou des caractères
de soulignement. Les autres caractères, tels que les signes de ponctuation,
ne sont pas autorisés.
Toutes les variables sont stockées sous forme de chaîne. Ils ont une
portée mondiale, ce qui signifie une fois que on a défini la valeur d'une
variable, on peut la lire dans les cartes et les Decks.
On peut définir la valeur d'une variable de la façon suivante:
1. Utilisation de la balise <setvar/>
2. L'aide de balises et de collecte de données <select>

<input/>
3. Utilisation de la setVar () de wmlbrowser WMLScript la

bibliothèque standard.

o Spécifiez une variable avec la commande Setvar :

Lorsqu’on exécute une tâche (comme go, prev et refresh), l'élément
setvar peut être utilisée pour définir une variable avec une valeur spécifiée.
L'exemple suivant permet de créer une variable appelée i avec une

valeur de 500:
<setvar name="i" value="500"/>
Le nom et les attributs de valeur sont requis.
o Spécifier une variable grâce à un élément d'entrée :
Les variables peuvent également être établie par un élément d'entrée

(comme input, select, option, etc.)
L'exemple suivant permet de créer une variable nommée « diplôme »:
<card id="insc4">
<select name="diplome">
<option value="DUT">D.U.T</option>
<option value="DEUST">D.E.U.S.T</option>
</select>
</card>
Pour utiliser la variable que nous avons créé dans l'exemple ci-dessus:
<card id="res">
<p>vous avez selectionné: $(diplome)</p>
</card>
o Substitution de variables
Les valeurs des variables peuvent être substitués à la fois dans le texte
d'une carte et dans la valeur d’un attribut dans les éléments de WML. Seule
l'information textuelle peut être remplacée, pas de substitution d'éléments
ou d'attributs est possible.
La substitution des valeurs des variables se passe au moment de

l'exécution dans l'agent utilisateur. Substitution ne porte pas atteinte à la
valeur actuelle de la variable est définie comme une opération de
substitution de chaîne. Si une variable non définie est référencé, il
résulte dans la substitution de la chaîne vide.


Les noms de variables WML consistent en une lettre d'US-ASCII ou de

soulignement suivi de zéro ou plusieurs lettres, chiffres ou soulignement.
Tous les autres caractères sont illégaux et font aboutir à une erreur.
Exemple :
<wml>
<card id="actu1" title="Page 1" newcontext="true">
<p>
page1 ?= $(visite_p1) <br/>
</p>
<do type="accept" label="Suivant">
<go href="#actu2">
<setvar name="visite_p1" value="consulter"/>

</go>
</do>
</card>

<card id="actu2" title="Page 2">

<onevent type="onenterforward">
<refresh>
<setvar name="visite_p2" value="en cours"/>
</refresh>
</onevent>
<p>
</p>
</card>

</wml>
Résultat :

Tâches et événements WML

Une tâche spécifie l’action accomplie lorsqu’un évènement est survenu.
 Go :
Le < go > représente l’action de passage à une nouvelle carte ou à un

nouveau deck elle est similaire à la balise <a href= > de html
Exemple:
<card id="crt2" title="Accueil" >
....
<anchor title="Menu" >
<go href="formation.wml"/>
<img src="images/formation.wbmp" align="middle" alt="formation" />
Formation<br>
</anchor>
....
</card>
 Prev :
La tâche <prev> représente l'action de revenir à la carte précédente.
Exemple :
.....
<do type="accept" label="retour">
<prev />
</do>
.....
</card>
Ou:
<card id="crt1" title="Formation" >

.....
<anchor> Accueil
<prev />
</anchor>
.....
</card>
 Refresh :
La tâche <Refresh> actualise certaines variables d’une carte

spécifique. Si l'une des variables est indiquée à l'écran, cette tâche actualise
également l'écran.
Année universitaire 2009 - 2010 - 10 - IRISI 2

Exemple :
Reprise de l’exemple précédent des variables, la page est actualisée à

l’entrée.
<card id="actu2" title="Page 2">
<onevent type="onenterforward">
<refresh>
<setvar name="visite_p2" value="en cours"/>
</refresh>
</onevent>
<p>
</p>
</card>
 Noop :
La tâche <noop> dit que rien ne doit être fait (noop signifie "pas
d'opération"). Cette balise est utilisée pour remplacer le pont des éléments
de niveau.
<card id="crt0" title="Index" >
.....
<do type="accept" label="Aide">
<noop />
</do>
.....
</card>
 Do :
Le <do> tag peut être utilisé pour activer une tâche lorsque
l'utilisateur clique sur un mot ou une phrase à l'écran.
Exemple :
L'exemple suivant utilise une balise <do> d'ajouter un "Retour" à la

carte. Lorsque l'utilisateur clique sur le lien du "Retour", il devrait être
reconduit à la carte précédente. Mais le tag <noop> empêche l'opération,
lorsque l'utilisateur clique sur "Retour" rien lien va se produire
<card id="crt0" title="Index" >
.....
<do type="prev" label="retour">
<noop />
</do>
.....
</card>

Les Interactions
o Zone 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. Une intention particulière porte 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=" ... " : Cet attribut spécifie le format (alphabétique,

numérique, ...) des données
A ou a Cet attribut spécifie le format (alphabétique,

numérique, ...) des données acceptées dans la zone de saisie.
X ou x Majuscules seulement ou minuscules seulement.
N Chiffres

M ou m Tout caractère alphabétique ou numérique en majuscules ou

tout caractère alphabétique en minuscules.
Voir autres.
etc...
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 :
<card id="ct1" title="Connexion">
<p>
Login :<br/>
<input type="text" title="Nom d'utilisateur" name="login" format="M" /><br/>
Pass : <br/>
<input type="password" maxlength="64" title="mot de passe" name="pass"
format="M" />
</p>
</card>
Dans cette carte, on demande dans une première zone de saisie de

remplir le nom d’utilisateur et dans une seconde zone de saisir le mot de
passe et sont tous les deux des champs acceptant toutes sorte de
caractères.
Ce qui en capture d'écran, suit le processus suivant :
La carte de départ.

On active la première zone de saisie et on encode le login.
On retourne à la carte de départ et on descend jusqu'à la

seconde zone de saisie.
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.
o Les listes d’options :

La balise <select> ... </select>
Les listes d'option réclament en fait deux balises : d'abord la balise

<select> et les balises <option>.
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 = Important ! C'est assurément l'attribut le plus

"true"ou important de la balise <select> car c'est cet attribut
multiple="false" 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"?>
"http://www.wapforum.org/DTD/wml_1.1.xml">
<wml>
<card id="card1" title="Filiere">

<p>
Entrez votre choix:<br/>
<select name="choix" multiple="false">
<option>IRISI</option>
<option>IRISI</option>
<option>IAFCS</option>
</select>
</p>
</card>
</wml>
On active la liste de choix qui s'affiche.
On sélectionne son choix. Ici IRISI.

L'écran final se présente comme suit.
Exemple de choix multiple

<card id="card1" title="Modules">
<p>
Vos modules preferes:<br/>
<select name="choix" multiple="true">
<option>Reseaux</option>
<option>Bases de donnees</option>
<option>developpements</option>
<option>sciences de l ingenieur</option>
</select>
</p>
</card>
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.

WML Timers
L’élément « Timer » est utilisé en WML comme fonction de minuterie.

Une carte peut être configurée pour utiliser cette fonction.
Au bout d'un certain délai d'inactivité l'élément timer (un seul par
carte) déclenche une action définie dans l'événement « ontimer » de la
carte, son unité de temps est de 1 / 10 de secondes.
Exemple :
L’exemple suivant présente la redirection de la page d’accueil vers la

page menu du site mobile IRISI après 1 seconde.
<card id="crt1" title="Bienvenue sur le site IRISI" newcontext="true">
<p align="center"><b>Bienvenue</b></p>
<img src="images/irisi.png" align="middle" alt="logo" hspace="0%"
vspace="10%"/>

<onevent type="ontimer">
<go href="#crt2"/>
</onevent>
<timer value="10"/>
Le résultat est le suivant :

WML Decks, Templates et Cards
o Decks :
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. Ainsi, la procédure
adoptée par le Wap sera de charger 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 ou un document

dont l'extension est .wml et qui est appelé « Deck ». Ce dernier est donc
composé d’une série de cartes.

o Architecture d'un document WML :
On peut découper un document WML en plusieurs parties :
Entête
Déclaration de l'entête spécifiant le type de version WML utilisé.
Définition de la première carte
Déclaration de la première carte par le biais de la balise <card id="...">
Contenu de la première carte
Exemple de contenu d'un document WML.
Définition de la deuxième carte
Déclaration de la deuxième carte.
Fin du document
Fin du document par le biais de la baise fermante</wml>.
o Templates :
Le Wml propose un outil qui permet d'épargner des lignes de code. Ce

sont les templates [modèles]. Les événements/actions que l'on définit avec
la balise <template> s'appliqueront, un peu à l'image d'un modèle, à toutes
les cartes du Deck.
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.

Où se met-elle ?
La balise <template> se met juste après la déclaration de document Wml soit la balise
<wml> et bien sûr avant toutes balises de cartes <card>.
Exemple :
<?xml version="1.0" encoding="iso-8859-1"?>
"http://www.wapforum.org/DTD/wml13.dtd">
<wml>
<template>
<do type="accept" label="Back"
<prev/>
</do>
</template>
<card id="formation" title="Formation IRISI" newcontext="true">

<p align="center"><b>Cursus</b></p>
<anchor title="formation" ><go href="#1annee"/>
<img src="images/fleche.gif" align="middle" alt="formation" />
1ère année.
</anchor>
<br>
2ème année.
</anchor>
<br>
3ème année.
</anchor>
Résultat :

Comment l'éviter ?
Et si je ne veux pas qu'un de ces modèles 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
Exemple :
<?xml version="1.0" encoding="iso-8859-1"?>
"http://www.wapforum.org/DTD/wml13.dtd">
<wml>
<template>
<do type="accept" label="Back"
<prev/>
</do>
</template>
<card id="1annee" title="Formation IRISI 1">
<do type="accept" label="Help">
<prev/>
<noop/>
</do>
</card>
o Card ou 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.
On peut encoder le texte de la carte en prenant soin de toujours

l'inclure dans une balise <p>...</p>.

Exemple :

<do type="accept" label="retour">
<go href="#crt1">
</do>
<p mode="wrap" >
Ce site est dédié aux étudiants FSTG/IRISI , ainsi qu'au corps
professoral de la filière .
</p>
<strong> Menu </strong><br>
<anchor title="Menu" ><go href="redirect.php?page=actualites"/>
<img src="images/actu.png" align="middle" alt="actualite" />
Actualités...<br>
</anchor>
Résultat :

WML Texte et Formatage de texte
Le langage WML comporte aussi les balises de formatage de texte

comme tout langage de balisage.
Ces étiquettes peuvent affecter la présentation d'un texte:
Balise Description
<b> Définit le texte en gras
<big> Définit grand texte
<em> Définit un texte mis en évidence
<i> Définit le texte en italique
<small> Définit petit texte
<strong> Définit texte fort
<u> Définit le texte souligné
o Attributs :
Attribut Valeur Description
s
xml Language_cod Définit la langue utilisée dans l’élément
e
Classe CDATA Définit un nom de classe de l’élément. Le nom
de classe est cas sensible. Un élément peut
être relié à plusieurs classes. Noms de classes
multiples dans l’attribut de classe sont séparés
par un espace blanc
id id Définit un nom unique de l’élément

Exemple :
<card id="1annee" title="Formation IRISI 1">
<table>
<tr >
<td ><p align="center"><i><big>Semestre 1 </big></i></p></td>
</tr><tr>
<td >
<strong>M1:</strong> Algorithme et bases de programmation( Langage
c).<br>
<strong>M2</strong> : Architecture des Ordinateurs et
Systèmes d'exploitation et Progiciels.<br>
<strong>M3</strong> : Systèmes d'Information et Introduction
aux BD(Base de Données).<br>
<strong>M4</strong> : Mathématique pour l'informatique.<br>
</td>
</tr>
<tr >
Résultat:

WML image
Les images sont introduits par la balise <img/>, dans le langage
WML les images doivent être sous format .wbmp.
Un lien d'ancrage peut être attaché à une image en WML. Création

d'un lien d'image est simple. Vous avez juste besoin de placer une balise
dans un <img/> <anchor> </ anchor> paire de balises ou une <a> </ a>
paire.
Exemple :
<card id="crt1" title="Bienvenue sur le site IRISI" newcontext="true">
<p align="center"><b>Bienvenue</b></p>
<img src="images/irisi.png" align="middle" alt="logo" hspace="0%"
vspace="10%"/>

<onevent type="ontimer">
<go href="#crt2"/>
</onevent>
<timer value="10"/>
Résultat:

II- Le langage XHTML-MP

Le langage XHTML MP (eXtensible HyperText Markup Language
Mobile Profile) est un langage de balisage défini en WAP 2.0. WAP 2.0 est la
plus récente spécification des services mobiles créé par le Forum WAP.
La spécification du WAP CSS (Cascading Style Sheet WAP ou WCSS)

est également définie dans WAP 2.0. WAP CSS est le compagnon de XHTML
Mobile Profile, et ils sont utilisés ensemble. Avec le WAP CSS, vous pouvez
facilement changer le format et la présentation des pages XHTML MP.
L'objectif de XHTML Mobile Profile est de rassembler les

technologies pour la navigation Internet mobile et celui de la World Wide
Web. Avant la sortie de XHTML Mobile Profile, les développeurs d'utiliser
WAP WML et WMLScript pour créer des sites WAP, tandis que les
développeurs Web utilisent le langage HTML / XHTML et les feuilles de style
CSS pour créer des sites web.
Avec l'annonce de XHTML Mobile Profile, le langage de balisage du

monde sans fil et câblés dans le monde converge finalement. XHTML Mobile
Profile et WAP CSS donnent aux développeurs d'applications sans fil à
Internet Présentation de contrôle plus et mieux. Le plus grand avantage,
cependant, est que les mêmes technologies peuvent maintenant être
utilisées pour développer à la fois le Web et la version sans fil de votre site
Internet. Vous pouvez utiliser n'importe quel navigateur Web pour afficher
votre demande WAP2.0 pendant le prototypage et le processus de
développement.
Les balises de XHTML sont les mêmes que ceux en HTML. Vous

pouvez considérer que XHTML est du HTML écrit avec la syntaxe de XML.
XHTML est une structure propre et plus strictes que HTML, ce qui
facilite l'analyse d'un document. Cela est particulièrement important pour les
appareils sans fil tels que les téléphones mobiles, car ils ont limité la
puissance de traitement.
o Les avantages de XHTML MP:
Le plus grand avantage apporté par XHTML MP, c'est que les
développeurs peuvent maintenant utiliser les mêmes technologies pour le
développement de sites Web et des sites WAP.
Les mêmes outils de développement peuvent être utilisés pour

développer des sites Web et de sites WAP. Vous pouvez coller à vos outils de

développement web pour construire votre navigation sur Internet mobile

application.
Les navigateurs Web ordinaire peut être utilisé pour afficher votre site
WAP durant le processus de développement. (Vous devez tester votre site
WAP avec les émulateurs et réel téléphones portables avant la version finale,
car les caractéristiques [par exemple, taille de l'écran, nombre de couleurs
pris en charge] de véritables appareils mobiles varient considérablement.)
HTML / XHTML pages sur votre site web peut être converti en XHTML MP
documents avec des changements mineurs ou même sans aucune
modification. (Toutefois, vous devez vous assurer que la présentation des
pages HTML XHTML / regarde bien sur un petit écran et que la taille du
fichier ne doit pas excéder la taille maximum d'une page de votre cible les
appareils mobiles.)
Un autre avantage de XHTML MP c’est qu’il soutient WAP CSS, qui permet la
séparation du contenu et la présentation dans des fichiers différents.
o WML Caractéristiques perdues en XHTML MP:
Certaines des fonctionnalités disponibles dans 1.x WML n'existent pas

en XHTML MP, pas plus. Les principales caractéristiques WML perdu en
XHTML MP :
 XHTML MP ne prend pas en charge les Decks et les cartes
 XHTML MP ne prend pas en charge les événements
 XHTML MP ne supporte pas les variables
 XHTML MP ne supporte pas le script côté client
 XHTML MP ne supporte pas les touches de fonction

programmables
 XHTML MP ne prend pas en charge la balise <u>
 XHTML MP ne supporte pas l'attribut format pour les champs de

saisie
 XHTML MP ne prend pas en charge détachement de données

avec l'ancre des liens

Les Interactions
Comme en HTML, XHTML MP offre de nombreux types d'éléments qui

vont permettre de récupérer ce que l’utilisateur va saisir.
Ces éléments sont :
1. Text field
2. Password field
3. Checkbox
4. Radio button
5. Hidden field
o Les Texts Field :

Les champs de texte sont utilisés pour obtenir des données
alphanumériques d'un utilisateur. Le code de suivant crée un champ texte en
XHTML MP:
<input type="text" name="nom_de_cet_element"/>
La valeur par défaut de l'attribut type est "text". Ainsi, spécifier une

valeur pour l'attribut type n'est pas une obligation dans le code XHTML ci-
dessus.
L'attribut maxlength de la balise <input> limite le nombre de caractères

qu'un utilisateur peut entrer dans un champ de texte. Par exemple, un
utilisateur peut entrer au plus 16 caractères dans un champ de texte qui
sont créés avec ce code XHTML MP:
<input type="text" name="myTextField" maxlength="16"/>
Vous pouvez définir une valeur par défaut pour le champ texte en
utilisant l'attribut value de la balise <input>. Par exemple, si on souhaite
que le champ de texte contient le mot "IRISI" par défaut ;le code précédent
deviendra comme suit :
<input type="text" name="myTextField" maxlength="16" value="IRISI"/>

C'est une bonne pratique de mettre un masque de saisie pour un

champ de texte. Un masque de saisie limite le type et le nombre de
caractères qu'un utilisateur peut entrer. Le mode d'entrée (alphanumérique
ou numérique) du clavier de l'appareil mobile se règlent automatiquement
en fonction de la valeur du masque de saisie.
En WML 1.x, l'attribut format de l'élément <input> est utilisée pour définir
un masque de saisie.Toutefois, l'attribut format n'existe pas en XHTML
MP. Pour spécifier un masque de saisie en XHTML MP, vous devez utiliser le-
wap-input-format WAP propriété de CSS. Par exemple, la feuille de style
suivant spécifie que l'utilisateur type ne peut saisir plus que dix caractères
numériques dans les champs texte. Un appareil mobile passera
automatiquement son clavier pour le mode d'entrée numérique pour
l'utilisateur d'entrer des caractères numériques.
input {
-wap-input-format: "10N"
}
o Password Field :
Dans les Password Field , tous les caractères sont affichés comme
* . C'est la seule différence majeure entre les champs de mot de passe et les
champs de texte. Le code suivant crée un champ de mot de passe en XHTML
MP:
<input type="checkbox" name="nom_de_cet_element"/>
o Checkbox :
Le code suivant crée un checkbox :
<input type="checkbox" name="nom_de_cet_element"/>
Les cases à cocher du même groupe doivent avoir le même nom,

comme ceci:
<input type="checkbox" name="IRISI" value="1"/>
<input type="checkbox" name=" IRISI " value="2"/>
<input type="checkbox" name=" IRISI " value="3"/>
L'attribut « value », définit la valeur à envoyer au serveur lorsque la

case est cochée. Par exemple, si les 2 premières cases ont été cochées, les
valeurs "1" et "2" peuvent être récupérées avec le nom du paramètre
"IRISI" au côté serveur.

Les cases à cocher ne sont pas cochées par défaut. Une case à cocher
sera sélectionnée par défaut si l'attribut checked est spécifié, comme ceci:
<input type="checkbox" name="IRISI" value="1" checked="checked"/>
o Radio Button
Le code suivant crée un bouton radio en XHTML MP:

<input type="radio" name="nom_de_cet_element"/>
Comme les cases à cocher, les boutons radio du même groupe doivent
avoir le même nom. Dans un groupe de boutons radio, un seul bouton radio
peut être dans l'état vérifié.
<input type="radio" name="IRISI" value="1"/>
<input type="radio" name=" IRISI " value="2"/>
<input type="radio" name=" IRISI " value="3"/>
L'attribut value définit la valeur à envoyer au serveur. Par exemple, si

la deuxième case dans l'exemple ci-dessus est cochée, la valeur "2" sera
associée au nom du paramètre "IRISI". Si le formulaire est soumis, la paire
nom-valeur peut être récupérée sur le serveur.
Comme les cases à cocher, les boutons radio ne sont pas cochés par
défaut. Un bouton radio sera sélectionné par défaut si l'attribut checked est
spécifié, comme ceci:...
<input type="radio" name="IRISI" value="1" checked="checked"/>
o Hidden Field
Un champ caché n'est pas montré sur l'écran des appareils mobiles. Il
est utilisé pour stocker des informations d'état qui est requis par l'application
Internet mobile. Le code suivant crée un champ caché dans XHTML MP:
<input type="hidden" name="nom_de_cet_element"/>
L'attribut value définit la valeur à envoyer au serveur. Par exemple :

<input type="hidden" name="temp_id" value="123456"/>


Exemple récapitulatif :
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN"

"http://www.wapforum.org/DTD/xhtml-mobile10.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Bienvenue sur le site IRISI</title>
<link href="Styles/Style_wap.css" rel="stylesheet" type="text/css" />
</head>
<body style="width:230px;">
<div class="header">
<div style="width:50px; float:left;"><img src="images/IRISI_LOGO.png"
alt="IRISI Logo" /></div>
<div style="height:25px; overflow:visible; margin-left:55px; margin-
bottom:5px; text-align:center">
<span style="font-size:8px;"> Ingénierie Réaux Informatiques &
Systèmess d'Information</span></div>
<span><small><b>Informations personnelles</b></small></span>
</div>
<body>
<form method="get" action="Sondage.php">
<p>
Nom :<br/>
<input type="text" name="nom" /><br/>
Prénom :<br/>
<input type="text" name="prenom" /><br/>
Sexe:<br/>
<input type="radio" name="sexe" value="m"/>Homme
<input type="radio" name="sexe" value="f"/>Femme<br/>
Pays:<br/>
<select name="pays">
<option value="mr">Maroc</option>
<option value="cn">Chine</option>
<option value="fr">France</option>
<option value="ca">Canada</option>
</select><br/>
Quel est votre diplome ?<br/>

<input type="checkbox" name="tutorial_part" value="1"/>DUT
<input type="checkbox" name="tutorial_part" value="2"/>DEUST
<input type="hidden" name="temp_id" value="123456"/>

</p>
<hr/>
<p>
<input type="submit"/>
<input type="reset"/>
</p>
</form>
</body>
</html>

L'élément <form> est le conteneur de contrôles du formulaire. Notez

que dans l'exemple précédent XHTML MP, le <input> et les éléments
<select> ne sont pas enfermés dans le <form> paire balise </form>
directement. Il ya un élément intermédiaire au niveau des blocs, <p>, entre
les deux. Cela est nécessaire pour la conformité à la norme XHTML MP.
<form ...>
<p>
...
<input ...>
...
<select ...>
...
</p>
</form>
Résultat :

Aperçu de la liste déroulante sur émulateur :

XHTML MP Timers
HTTP refresh peut être utilisé pour charger le navigateur WAP pour
aller vers une autre URL, après une certaine période de temps. Vous pouvez
utiliser cette fonctionnalité pour rediriger l'utilisateur vers une autre page
XHTML MP ou créer un diaporama.
Cet exemple montre comment rediriger l'utilisateur vers

"Bienvenue.xhtml" après 15 secondes.
Exemple :
<head>
<title>XHTML Atelier</title>
<meta http-equiv="refresh" content="15;URL=Bienvenue.xhtml"/>
</head>
<body>
<p>Bienvenue, vous serez redirigé vers une autre page xhtml dans 15
seconds.</p>
</body>
</html>

Formatage de texte en XHTML MP

Vous pouvez utiliser des balises pour modifier le style de la police du
texte en XHTML MP. Toutefois, certains navigateurs WAP ne supportent
qu'un sous-ensemble de ces balises, même si ces balises sont définies par la
spécification XHTML MP. C'est parce que le navigateur WAP peut uniquement
utiliser des polices disponibles sur l'appareil mobile. Par exemple, si la police
en italique n'est pas disponible, le style italique n'est pas supporté. Les
balises XHTML MP qui ne sont pas prises en charge, seront ignorées par les
navigateurs WAP et ne causeront pas d'erreurs.
Exemple :
<head>
<title>Font Style</title>
</head>
<body>
<p>
<b>Bold</b><br/>
<i>Italic</i><br/>
<b><i>Bold italic</i></b><br/>
<small>Small</small><br/>
<big>Big</big><br/>
<em>Emphasis</em><br/>
<strong>Strong</strong>
</p>
</body>
</html>
Résultat :

XHTML MP images
La balise img est utilisée pour afficher une image en XHTML MP. Il
s'agit de la même manière qu'en HTML. Les navigateurs WAP affichent le
texte assigné à l'attribut alt de la balise img s’ils ne peuvent pas afficher
l’image pour des raisons telles que le fichier n’est pas trouvé où le format
d’image n’est pas pris en charge.
La hauteur et la largeur des attributs de la balise img, comme leurs

noms suggérés, sont utilisés pour spécifier la hauteur et la largeur (en
pixels) de la zone d'affichage d'une image. Vous pouvez utiliser ces deux
attributs à l'échelle vers le haut ou vers le bas de la taille d'une image sur
l'écran.
Outre le format WBMP vieille image, WAP 2.0 dispositifs sans fil devrait
être en mesure de soutenir les formats d'image couramment utilisés sur le
Web, tels que GIF, GIF animé, JPG et PNG. Certains appareils sans fil WAP
2.0 ne peuvent que soutenir le sous-ensemble des formats d'image ci-
dessus.
Une façon simple de savoir si un format d'image particulier est pris en

charge sur un appareil sans fil est de vérifier les acceptatés de l’en-tête
HTTP.
Par exemple, si "image /" gif ", image / jpg" et "image / png" se
trouvent dans les acceptés en-tête HTTP, cela signifie que l'appareil sans fil
prend en charge les formats GIF, JPG et PNG formats d'image.

L'exemple suivant montre comment afficher une image en XHTML

MP:
<head>
<title>Bienvenue sur le site IRISI</title>
</head>
<body>
<h3>Bienvenue</h3>
<p>
<img src="Logo.gif" alt="Logo" height="62" width="60" /><br/>
Bienvenue, sur le site IRISI.
</p>
</body>
</html>
</html>
Résultat :

Rapport XHTML

Transféré par

Informations du document

Titre original

Copyright

Formats disponibles

Partager ce document

Partager ou intégrer le document

Options de partage

Avez-vous trouvé ce document utile ?

Ce contenu est-il inapproprié ?

Droits d'auteur :

Formats disponibles

Rapport XHTML

Transféré par

Droits d'auteur :

Formats disponibles

UNIVERSITE CADI AYYAD

FACULTE DES SCIENCES ET TECHNIQUES

- Hajar KHATIB (R. Communication)

WML & XHTML MP

II- Le langage XHTML-MP.................................................................27

Année universitaire 2009 - 2010 -1- IRISI 2

Malheureusement, aucun langage de balisage mobile unique n’est

 XHTML: Conçu pour les plus avancés des appareils mobiles et

 XHTML-MP: vise à intégrer les appareils mobiles « Feature Phone ».

 WML: Le langage WML (Wireless Markup Language) est un langage à

Hors le langage WML n'est donc pas un langage de programmation,

Année universitaire 2009 - 2010 -2- IRISI 2

o La syntaxe du langage WML :

La constitution d'un document WML est très métaphorique, elle

Année universitaire 2009 - 2010 -3- IRISI 2

<? xml version="1.0"?>

<card id="carte1" title="IRISI">

Les 3 premières lignes sont obligatoires, elles définissent le type de

Année universitaire 2009 - 2010 -4- IRISI 2

Voici quelques règles à respecter scrupuleusement :

 Minuscules : Les balises, attributs et valeurs doivent toujours être

o Les principales balises :

Le langage WML est comme le html un langage à balise : il existe de

Les principales balises de langage WML sont :

Action Format Attributs

Retour à la ligne <br/>

Gras <b> </b>

Italique <i> </i>

Plus grand <big> </big>

Année universitaire 2009 - 2010 -5- IRISI 2

Plus petit <small> </small>

Incorporation <img src= “maison.wbmp“> Alt : texte de remplacement

Liens entre de cartes <card id= “card1“ title= “essai”>

WML Variables et contexte

o Mettre des valeurs de la variable en WML

En WML, les variables ne sont pas déclarées explicitement. On peut

Les noms de variables en WML sont sensibles à la casse. Le premier

On peut définir la valeur d'une variable de la façon suivante:

1. Utilisation de la balise <setvar/>

2. L'aide de balises et de collecte de données <select>

3. Utilisation de la setVar () de wmlbrowser WMLScript la

Année universitaire 2009 - 2010 -6- IRISI 2

o Spécifiez une variable avec la commande Setvar :

L'exemple suivant permet de créer une variable appelée i avec une

Le nom et les attributs de valeur sont requis.

o Spécifier une variable grâce à un élément d'entrée :

Les variables peuvent également être établie par un élément d'entrée

L'exemple suivant permet de créer une variable nommée « diplôme »:

La substitution des valeurs des variables se passe au moment de

Année universitaire 2009 - 2010 -7- IRISI 2

Année universitaire 2009 - 2010 -8- IRISI 2

Les noms de variables WML consistent en une lettre d'US-ASCII ou de

<card id="actu2" title="Page 2">

Année universitaire 2009 - 2010 -9- IRISI 2

Tâches et événements WML

Le < go > représente l’action de passage à une nouvelle carte ou à un

La tâche <prev> représente l'action de revenir à la carte précédente.

<card id="crt1" title="Formation" >

La tâche <Refresh> actualise certaines variables d’une carte

Année universitaire 2009 - 2010 - 10 - IRISI 2

Reprise de l’exemple précédent des variables, la page est actualisée à

L'exemple suivant utilise une balise <do> d'ajouter un "Retour" à la

Année universitaire 2009 - 2010 - 11 - IRISI 2