Logo du World Wide Web ConsortiumLe 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 :

Déclaration de l’entete
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">

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="http://www.charlesen.fr/" accesskey="5">[email protected]</a>
 
</p>
 </div>
</body>
</html>

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
 * @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;
}
?>
 

Le résultat en images :

Ecran d'accueil

Ecran - Page principale

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

Tester la validité du site

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

Laisser un commentaire

Ce site utilise Akismet pour réduire les indésirables. En savoir plus sur comment les données de vos commentaires sont utilisées.