dans tutoriel

Comment développer un site web mobile 100% valide W3C

Logo du W3CLe W3C, pour World Wide Web Consortium, a mis en place un certain nombre de spécifications dans le cadre du développement d’applications web mobiles. Le Mobile Web Best Pratices propose un ensemble de règles, qui visent à donner aux développeurs d’applications pour mobiles, les bons réflèxes en matièr d’ergonomie, d’accessibilité, et plein d’autres encore, parce que l’on oublie souvent qu’une vraie application mobile est d’abord simple et accessible, et qu’une application mobile devra le plus souvent télécharger des pages sur internet, et les afficher avec plus ou moins de latence. Il faut donc l’optimiser au mieux.

Lucas Passini, développeur italien et auteur de la bibliothèque WURFL, projet opensource de référencement des caractéristiques des téléphones portables, a écrit un excellent guide de développement, qui reprend en détails les consignes du W3C.

 

Avoir une bonne tête : le doctype

Tout d’abord, et tout comme n’importe quel développement orienté web, un site mobile doit déclarer un doctype. Le W3C recommande l’usage du XHTML comme langage de développement de site web mobile. Il faut pour être précis utilisé le XHTML MP (Mobile Profile). La déclaration du doctype se fait donc de la façon suivante :

Doctype d’un site mobile
1
2
3
<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">

 

Cette déclaration est tout ce qu’il y a de plus valide. Mais on ne vas pas s’arreter là. Il faut en effet gérer le cache web, qui permettra au client mobile de gagner du temps entre plusieurs requêtes identiques vers le serveur. Un cache web se place entre un client et un serveur web. Faisant office de passerelle, il ne sera pas nécessaire de reclamer au serveur web, souvent distant, une ressource que l’on avait déjà reclamé, celle-ci étant enregistrée dans le cache.

Il existe plusieurs façons de gérer le cache web, et ici nous le ferons en PHP. Vous pourrez avoir plus d’information en lisant ce tutoriel. Voici donc comment nous déclarerons finalement notre doctype et précisons en passant la langue du site :

Doctype et prise en charge du cache web
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
<?php
/**
 * @author Charles
 * @copyright Copyright 2011, charlesen.fr
 * @version 1.0
 */
//Caching des données
Header("Cache-Control: must-revalidate");
$offset = 60; //1 minute de caching
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
 
header('Content-Type: application/vnd.wap.xhtml+xml');//Type MIME
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n";
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">

 

La ligne 13 précise le type de contenu. On précise ici que l’on délivre du contenu destiné aux mobiles (wap.xhtml+xml). La ligne 14 précise le type d’encodage, ici l’UTF-8 qui est un format universel et conseillé dans le cadre des communications sur internet.

 

Avoir la semantique dans la peau

Et oui, plus que l’on code en XHTML, on se doit de respecter scrupuleusement les règles qu’impose cette version du langage à balise. Coder sémantiquement signifie donner du sens à la structure de nos pages. Ainsi, un titre de premier niveau se fera avec la balise h1 et uniquement avec elle. Si vous la trouver trop grande pour page, n’hésitez à changer la taille avec la propriété CSS font-size.

Elles sont nombreuses, mais limitons nous aux trois règles suivantes :

– Ecrire toutes vos balises en miniscule

 – rajouté un / à la fin de toute balise linéaire.

 – respectez le principe du clé=valeur. Ainsi dans une checkbox, au lieu de « checked », on aura « checked=checked ».

 

Format des images :GIF & JPEG ONLY

Utilisez les format gif et jpeg pour les images que vous allez utiliser pour votre site mobile. Evitez de surchager vos pages avec des background-image, rappelez-vous que vous devez optimiser vos pages pour les mobiles, qui ne roule pas forcement au 1Go de RAM, et à l’ADSL, mais souvent avec quelques Mo de mémoire, et en 3G+.

 

Utiliser les access key

Ceci permet en effet une navigation plus fluide, en liant des fonctions du site à des touches du clavier. Ainsi, il est possible d’activer un lien en appuyant (simplement ou longuement) sur une touche du clavier.

Access key
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>Profil</title>
</head>
<body>
<p>
<ol>
<li><a href="phone.php?num=0686820098" accesskey="1">Téléphoner</a></li>
<li><a href="[email protected]" accesskey="2">Envoyer un mail</a></li>
</ol>
</p>
</body>
</html>
 

 

Retrouver son chemin grâce au back button

Il faut toujours donner la possibilité à l’utilisateur de revenir sur ses pas, en ajoutant au moins un bouton « Accueil  » en bas à droite de la page, ou encore en haut à gauche de l’écran.

 

Voici un exemple complet de site valide à 100%…

 

index.php
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
<?php
/**
* @author Charles
* @copyright Copyright 2011, charlesen.fr
* @version 1.0
*/
//Caching des données
Header("Cache-Control: must-revalidate");
$offset = 60; //1 minute de caching
$ExpStr = "Expires: " . gmdate("D, d M Y H:i:s", time() + $offset) . " GMT";
Header($ExpStr);
 
header('Content-Type: application/vnd.wap.xhtml+xml');//Type MIME
echo "<?xml version=\"1.0\" encoding=\"UTF-8\"?> \n";
?>
<!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.2//EN"
"http://www.openmobilealliance.org/tech/DTD/xhtml-mobile12.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
<title>charlesen.fr</title>
<style type="text/css">
@import "./css/style.css";
</style>
<meta http-equiv="Content-type" content="text/html;charset=UTF-8" />
<meta http-equiv="Cache-Control" content="max-age=120"/>
<link rel="shortcut icon" type="image/x-icon" href="../images/favicon.ico" />
</head>
<body id="site">
<div id="canvas">
<div>
<div id="header">
<a href="./"><img src="../images/logo.jpg" alt="Logo a mettre ici"
 width="75" height="48"/></a>

</div>
</div> <!-- Entete de page -->
<h1>Identification</h1>
 

<div class="c1">
<form method="post" action="session.php">
<p>
<label for="login">Login :</label> <br />
<input type="text" id="login" name="login" />
</p>
<p>
<label for="mdp">Mot de passe :</label> <br />
 
<input type="password" id="mdp" name="mdp" />
<input type="hidden" name="session" value="login" />
</p>
<p class="c2">
<input type="reset" value="Annuler" />
<input type="submit" value="S'identifier" />
</p>
</form> <!-- Connexion au site-->
 
<p>
<a href="#">Identifiant oublié ?</a> - <a href="#">Pas inscrit ?</a>
</p> <!-- Un problème ?-->
</div>
<p id="footer">
Copyright &copy; 2011 -
<a href="#" title="https://charlesen.fr/" accesskey="5">[email protected]</a>
 

</p>
 </div>
</body>
</html>

 

La feuille de style associée (style.css):

style.css
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 
/*      Document   : style     Created on : 8 mars 2011, 11:48:51     Author     : Charles     Description: Feuille de style principale */ body, form,p { padding:0; margin:0; } input,p  {font-size:1em;} p {text-align: justify;} a {text-decoration: none; color: #0000FF;  } div a {color:#333366;} img {text-decoration: none;border:0;} h3 { text-align: center; margin:2px; padding: 3px; font-weight: bold; border-bottom: 1px solid #d5d5d5; font-size: medium; }   /*Structure du site */ .canvas{ width:15em; margin:0px auto;} #cb {background-color: #e5e5e5;  } .c1 {     background: #ffffff no-repeat center left;     padding:0.4em 1.5em;     margin: 2px;     border: 1px solid #c5c5c5; } /* Strucure */ #header {text-align: center;} .link{  font-weight: bold; white-space: nowrap;} #info {width: 15em; margin: 0 auto;} #footer {     text-align: center;     background-color: #ffffff;     border: 1px solid #c5c5c5;     padding: 3px;     vertical-align: middle;     margin-top: 5px; } .center{ font-size: small; text-align: center;}

 

Et le script php (session.php) qui va avec :

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<?php
 
/**
 * @author Charles
* @copyright Copyright 2011, Charles <charles AT charlesen.fr>

 * @version 1.0
 */
$session = $_POST['session'];
 
switch ($session) {
case "login":
header('Location: ./index2.php');
// Completez-moi svp... 🙂
break;
case "logout":
header('Location: ./index.php');
// Completez-moi svp... 🙂
break;
}
?>
 

 

Voir la démo depuis votre téléphone portable ou utilisez un émulateur en ligne.

 

Et pour démarrer tranquillement, vous pouvez télécharger gratuitement des templates pour sites mobiles, facilement customisables

Laisser un commentaire