graphic with four colored squares

Plasticité des IHM : le Web et l’adaptation de contenu

Dominique Hazaël-Massieux
W3C Mobile Web Initiative Lead
Email:dom@w3.org
Microblog:@dontcallmedom

Présentation

Couverture de « Relever le défi du Web mobile »

Plan

W3C

Standards W3C

Standardisation

Domaines de standardisation

Technologies Web & IHM

Open Web Client diagram

Plan

Le Web partout

Le Web pour tous

Le Web sur tout support

Le Web est présent sur les ordinateurs, les téléphones, les tablettes, les liseuses électroniques, les télé, les systèmes de navigation, etc.

Un Seul Web

Les mêmes technologies pour servir tous ces besoins

Besoins différents

Adaptation de contenu

Plan

Ecrans

Répartition des tailles et résolutions d’écran

(mais aussi, orientation)

Périphériques d’entrée

Capteurs

Réseau

Puissance

Contexte d’usage

Plan

Adaptation côté client

Adaptation côté client > Plan

Fenêtre d’affichage

Unités CSS

Le pixel de référence

Représentation visuelle d’un pixel de référence

Pour un smartphone, si cette définition est bien suivie :

Fenêtre d’affichage en pratique

La directive viewport

Une fenêtre d’affichage de 418 pixels CSS de large
<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>

Revenir au pixel de référence

Revenir au pixel de référence
<meta name="viewport"
           content="width=device-width,initial-scale=1.0" />

CSS Media Queries

Les requêtes de média CSS permettent de n’appliquer des règles CSS qu’aux navigateurs remplissant certains critères :

Les propriétés numériques se préfixent avec min- et max-.

Prise en charge des CSS media queries

Responsive Web Design

cf MediaQueri.es

Points de rupture

Pragmatic Responsive Design

Images

Adaptation côté client > Plan

Périphériques d’entrée : pointage

Périphériques d’entrée : clavier

Réduire / optimiser les entrées de texte

<input type=tel>
<input type=email>
<input type=date>
<input type=range>
<datalist><option value=…></datalist>

Bientôt (?):

<input type='text' speech>

Composants additionels

Adaptation côté client > Plan

APIs de capteurs

Détection d’API

Adaptation côté client > Plan

Adaptation au réseau

Adaptation côté client > Plan

Processeur et Batterie

Adaptation côté client > Plan

Contexte

Plan

Adaptation côté serveur

Comment adapter côté serveur ?

En-têtes HTTP

Négotiation de contenu

Adaptation basée sur Accept-*

Sous Apache :

Options +MultiViews

En 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é.

La jungle des User-Agent

Les chaines User-Agent:

Il y a des dizaines de milliers de possibilités.

Adaptation simple et limitée

RewriteEngine on
 
RewriteCond %{HTTP_USER_AGENT} "android" [NC]
RewriteRule ^/$ /index-android.html [L]
 
RewriteRule ^/$ /index.html [L]
 
Header merge vary "User-Agent"

Adaptation plus générique

Les bases de decription de terminaux fournissent ce genre d’information (WURFL, DeviceAtlas)

Bientôt : Interfaces utilisateurs par modélisation

Granularité d’adaptation côté serveur

Quelle adaptation choisir ?

Plan

Applications distribuées

Démo

Plasticité des IHM : le Web et l’adaptation de contenu

Dominique Hazaël-Massieux
W3C Mobile Web Initiative Lead
Email:dom@w3.org
Microblog:@dontcallmedom