This project is funded by the European Union through the Seventh Framework Programme (FP7/2010-2012) under grant agreement n°269954 - VOICES
2 minutes maximum par participant !
Au final…
Il ne peut en rester qu’un !
« Vous… vous avez un écran… heu… un écran… très petit »
Cyrano de Bergerac, Acte I scène 4
(version mobile)
En moyenne :
Dans tous les cas, les saisies sont difficiles sur un terminal mobile.
Trois méthodes principales pour interagir avec du contenu :
| Réseau | Bande passante moyenne | Temps nécessaire pour télécharger 100Ko |
|---|---|---|
| GSM | 10 Kb/s | 1 mn 20 s |
| GPRS | 50 Kb/s | 16 s |
| EDGE | 180 Kb/s | 4.5 s |
| 3G | 380 Kb/s | 2.1 s |
| 3G+ | 1 Mb/s | 0.8 s |
| Wi-Fi | 30Mb/s | 26 ms |
NB : 100Ko peuvent très bien coûter $1 !
| Réseau | Latence | Latence pour 10 échanges |
|---|---|---|
| GSM | 1 s – 2 s | 10 s – 20 s |
| GPRS | 600 ms – 700 ms | 6 s – 7 s |
| EDGE | 300 ms – 500 ms | 3 s – 5 s |
| 3G | 100 ms –300 ms | 1 s – 3 s |
| 3G+ | 50 ms – 150 ms | 500 ms – 1 500 ms |
| Wi-Fi | 1 ms – 5 ms | 10ms – 50 ms |
(feature phones, smartphones, flip, barres, écran allongé, etc.)
Quels sont les types de terminaux présents dans la salle ?
XHTML, c’est HTML écrit en respectant les contraintes syntaxiques de XML, par exemple :
<p>Bonjour</p><html><p class="section"><html xmlns="http://www.w3.org/1999/xhtml">HTML5 définit à la fois une sérialisation HTML et une sérialisation XHTML
Les deux !
Les documents polyglottes sont interprétés de la même manière par un parseur HTML et par un parseur XML.
Quelques règles supplémentaires à respecter :
xml:lang et lang<tbody>map et area)XHTML Basic 1.1 décrit une base de fonctionnalités communes implémentées par tous les navigateurs Web mobiles.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN"
"http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd"><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"><!DOCTYPE html>text/html pour les documents HTML et XHTMLapplication/xhtml+xml pour les documents XHTML
Utiliser text/html pour servir du contenu (X)HTML
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xml:lang="fr" lang="fr">
<head>
<meta http-equiv="Content-Type"
content="text/html; charset=utf-8" />
<title>Template HTML</title>
</head>
<body>
<h1>Template HTML</h1>
</body>
</html>Nous verrons par la suite comment compléter ce template pour préciser les dimensions de la fenêtre d’affichage.
Oui, l’important est de comprendre quelles fonctionnalités sont disponibles sur les terminaux mobiles:
manifest pour les applications hors ligneaudio et videoLe service de validation du W3C (en anglais) :
http://validator.w3.org/
Les formats pris en charge par les terminaux mobiles :
<?xml version="1.0"?>
<svg xmlns="http://www.w3.org/2000/svg"
version="1.2" baseProfile="tiny"
viewBox="0 0 30 10">
<desc>Un petit rectangle rouge</desc>
<rect x="10" y="0" width="10" height="10" fill="red"/>
</svg>L’exemple précédent s’affiche ainsi :
A la base :
margin, font-size, background, …)body { color: black; background-color: white; }
.code { border-left: thin solid black; }
#menu { float: right; margin-right: 2em; }Ne pas compter sur :
h1 + h2
[title]position: absolute; bottom: 0;
overflow: hidden;
display: table-cell;
list-style-position: inside;line-height: 3em;
cursor: crosshair;Le service de validation du W3C (en anglais) :
http://jigsaw.w3.org/css-validator/
é pour éé pour éPour afficher un caractère, le navigateur doit :
En règle générale sur les terminaux mobiles :
Content-Type renvoyé contient le codage de caractère utilisé.Maintenir une séparation nette entre les technologies :
Il est plus facile de partir de fondations solides et de rajouter quelques extensions que de devoir supprimer certaines fonctionnalités après-coup.
application/xhtml+xml@media et les types de media.text/html1px=0.75pt
1pt=1/72in
1em=14/16px (fixé par font-size)cm et le px !)1cm CSS = 1cm réel)
Pour un smartphone, si cette définition est bien suivie :
viewport<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Forcer la largeur du viewport</title>
<meta name="viewport" content="width=418,initial-scale=1.0" />
</head>
<body>[…]</body>
</html><meta name="viewport"
content="width=device-width,initial-scale=1.0" />margin-*, padding-*, line-height, font-size
width et min-widthImportant :
Les règles de positionnement peuvent ne pas être prises en charge par certains navigateurs mobiles. Soyez cohérents !
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Positionnement problématique</title>
<style type="text/css">
#content { margin-left: 110px; }
#menu { position: absolute; top: 0; left: 0; width: 90px; }
</style>
</head>
<body>
<div id="content">[…]</div>
<div id="menu">[…]</div>
</body>
</html>input)| Media type | Description |
|---|---|
| all | Pour tous les terminaux, valeur par défaut |
| screen | Pour les écrans d’ordinateurs classiques |
| handheld | Pour les écrans de terminaux mobiles |
| Pour l’aperçu avant impression et l’impression | |
| projection | Pour la projection de transparents |
@media handheld {
body { margin: 0; }
h1 { font-size: 1.3em; }
}@import url("mobile.css") handheld;media<link rel="stylesheet" href="mobile.css" media="handheld" />handheldhandheldhandheldInutile d’utiliser handheld au final !
Les requêtes de média CSS étendent les media types avec des critères supplémentaires :
width : largeur de la fenêtre d’affichagedevice-width : largeur de l’écranheight : hauteur de la fenêtre d’affichagedevice-height : hauteur de l’écranaspect-ratio : width / heightorientation : portrait ou paysageLes propriétés numériques se préfixent avec min- et max-.
width ou device-width ?width parce que la propriété est indépendante du terminal.
viewport)<meta name="viewport"
content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" type="text/css"
href="base.css" />
<link rel="stylesheet" type="text/css"
href="deuxcol.css"
media="only all and (min-width: 600px)
and (max-width: 800px)" />
<link rel="stylesheet" type="text/css"
href="troiscol.css"
media="only all and (min-width: 801px)" /><!--[if lt IE 9]>
<![if !IEMobile]>
<link rel="stylesheet" type="text/css"
href="troiscol.css" />
<![endif]>
<![endif]-->window.innerWidthRewriteCond %{HTTP_USER_AGENT} " MSIE " [NC]
RewriteCond %{HTTP_USER_AGENT}
"Windows Phone| IEMobile" [NC]
RewriteRule ^troiscol.css$ [F,L]Dans l’ensemble, ces bibliothèques sont lourdes pour les navigateurs mobiles (31Ko pour la version compressée de JQuery par exemple).
"use strict";<a href="javascript:clic();">Argh !</a>
document.getElementById("bouton")
.addEventListener("click", clic);XMLHttpRequest en particulier)if (window.navigator.geolocation) {
// Interface de géolocalisation disponible
[…]
} else {
// Pas d’interface de géolocalisation disponible
[…]
}Les navigateurs bloquent temporairement le chargement d’une page lorsqu’ils rencontrent un script.
Grouper les scripts à la fin du contenu HTML lorsque c’est possible :
<html>
<head>
<!-- Pas de script ici -->
</head>
<body>
<script type="text/javascript" src="scripts.js"></script>
</body>
</html>onmouse !
load, click, change, submit)| Réseau | Bande passante moyenne | Temps nécessaire pour télécharger 100Ko |
|---|---|---|
| GSM | 10 Kb/s | 1 mn 20 s |
| GPRS | 50 Kb/s | 16 s |
| EDGE | 180 Kb/s | 4.5 s |
| 3G | 380 Kb/s | 2.1 s |
| 3G+ | 1 Mb/s | 0.8 s |
| Wi-Fi | 30Mb/s | 26 ms |
NB : 100Ko peuvent très bien coûter $1 !
| Réseau | Latence | Latence pour 10 échanges |
|---|---|---|
| GSM | 1 s – 2 s | 10 s – 20 s |
| GPRS | 600 ms – 700 ms | 6 s – 7 s |
| EDGE | 300 ms – 500 ms | 3 s – 5 s |
| 3G | 100 ms –300 ms | 1 s – 3 s |
| 3G+ | 50 ms – 150 ms | 500 ms – 1 500 ms |
| Wi-Fi | 1 ms – 5 ms | 10ms – 50 ms |
Quelles sont les solutions possibles pour réduire l’impact des ces contraintes sur l’expérience utilisateur ?
Choisissez un site Web populaire (typiquement celui d’un quotidien), et déterminez le nombre de requêtes envoyées par un navigateur typique pour afficher la page.
cat script1.js script2.js > script.js@media !)<img src="http://nom1.example.com/img1" />
<img src="http://nom1.example.com/img2" />
<img src="http://nom1.example.com/img3" />
<img src="http://nom2.example.com/img4" />
<img src="http://nom2.example.com/img5" />Reproduisez le contenu ci-dessous en combinant les images (décoratives) suivantes dans un sprite.
Les environnements d’exécution des applications Web sont hétérogènes et évolutifs. La flexibilité permet de cibler un grand nombre de terminaux à coût réduit.
En matière d'applications mobiles, chaque détail compte et certains points techniques peuvent nettement améliorer l'expérience de l'utilisateur.
Certains outils mettent en exergue les gains possibles :
But :
Identifiez quelques idées possibles pour réduire la taille du contenu envoyé au navigateur
convert de la suite ImageMagickjheadDifférents types de caches :
Il suffit de répondre à deux questions :
C.f. « Un tutoriel de la mise en cache » de Mark Nottingham (en français).
Spécifiée dans deux en-têtes HTTP, souvent utilisés ensemble :
Expires qui précise une date absolue
Expires: Tue, 14 June 2011 15:19:00 GMTCache-Control: max-age qui précise une date relative à la date de requête du document
Cache-Control: max-age=300 pour 5mn| Type de document | Durée | Directive Cache-Control |
|---|---|---|
| Static HTML page | 1 semaine | Cache-Control: max-age=6004800 |
| Dynamic HTML page | 1 heure | Cache-Control: max-age=3600 |
| « Real-time » HTML page | 2 minutes | Cache-Control: max-age=120 |
| CSS, image, script | 1 mois | Cache-Control: max-age=2592000 |
Spécifiée dans deux autres en-têtes HTTP, souvent utilisés ensemble :
Last-Modified qui précise la date de dernière modification
Last-Modified: Mon, 13 June 2011 10:21:00 GMTETag qui precise un numéro de version
ETag: "dakar-42"La version peut aussi s’inclure dans le nom du document :
<script type="text/javascript" src="script-v1.7.js">
</script>Par exemple, sous Apache :
# Enable the mod_expires module
ExpiresActive On
# Set expiration date per document type
ExpiresByType text/html "access plus 1 week"
ExpiresByType text/css "access plus 1 month"
ExpiresByType image/jpeg "access plus 1 month"
ExpiresByType image/gif "access plus 1 month"
ExpiresByType image/png "access plus 1 month"
ExpiresByType text/javascript "access plus 1 month"TOUT ce qui peut l’être
(HTML, CSS, images, scripts, contenu AJAX, etc.)
Accept-Encoding envoyé par le navigateurContent-Enoding envoyé au navigateurSous réserve d’activer le module mod_deflate :
AddType .htmlc text/html
AddEncoding gzip .htmlcAccept-*User-AgentAccept-* (Accept, Accept-Charset, Accept-Encoding, Accept-Language) qui précisent certains paramètres du navigateurUser-Agent qui identifie le navigateur (mais pas uniquement)X-WAP-Profile qui identifie le terminal (mais pas uniquement)Accept-*Sous Apache :
Options +MultiViewsEn supposant la requête suivante :
GET /img HTTP/1.1
Host: example.com
Accept: text/html,image/png,image/jpeg;q=0.8
[…]Le serveur cherche img.png, puis img.jpg dans le répertoire demandé.
User-Agent ?Mettons en commun les User-Agent renvoyés par les navigateurs présents dans la salle. Commentaires ?
User-AgentLes chaines User-Agent:
Il y a des dizaines de milliers de possibilités.
RewriteEngine on
RewriteCond %{HTTP_USER_AGENT} "android" [NC]
RewriteRule ^/$ /index-android.html [L]
RewriteRule ^/$ /index.html [L]
Header merge vary "User-Agent"Les bases de decription de terminaux fournissent ce genre d’information :
En utilisant WURFL, préparer une page PHP qui affiche « Bonjour utilisateur mobile ! » lorsque la requête provient d’un terminal mobile et « Bonjour utilisateur statique ! » lorsque la requête provient d’un ordinateur de bureau.
http://www.w3.org/Mobile/training/
(prochaine session en Septembre)
But : partager de l’expertise sur des technologies mobiles utiles au Sénégal, et qui permettront à des entrepreneurs locaux de créer de nouveaux services, et de développer du contenu et des applications locales à même de leur donner des sources de revenu.
This project is funded by the European Union through the Seventh Framework Programme (FP7/2010-2012) under grant agreement n°269954 - VOICES