HTML5 & Mobile Web Apps

Dominique Hazael-Massieux
Mobile Web Initiative Activity Lead
@dontcallmedom
dom@w3.org

W3C

Taille d'écran

Clavier et souris

Réseau

CPU & batterie

Fragmentation

Connecté

Capteurs

Interactions

Multimedia

Personnel

Social

Utilisateurs

Vie privée / sécurité : opaques
Difficiles à trouver
Temps d'installation et maintenance
Non-liées

Developpeurs

Multitude d'OS, langages
Contrôle des App Stores et délais
Contrôle technologique et business

Users

« Safe » par défaut ~~Vie privée / sécurité : opaques~~
Moteurs de recherche ~~Difficiles à trouver~~
Sans installation ~~Temps d'installation et maintenance~~
Interliées ~~Non-liées~~

Developpeurs

Une seule plateforme technologique ~~Multitude d'OS, langages~~
Écosysème décentralisé ~~Contrôle des App Stores et délais~~
Évolution ouverte ~~Contrôle technologique et business~~

viewport

Par défaut : 800 à 1000px
<meta name='viewport' content=''>
- Descripteurs : width, height, target-densitydpi, initial-scale, user-scalable, …
- « A pixel is not a pixel is not a pixel »
- <meta name='viewport' content='width=device-width'>

Styles

Adaptation à la taille de l’écran :

<link rel='stylesheet' href='default.css'>
<link rel='stylesheet' href='large_screen.css'
    media='screen and (min-width:600px)'>

Agencement liquide ou élastique, de préférence sur une colonne

Entrées

Claviers:
- numérique : lent et difficile
- physique : touches minuscules
- virtuel : lent et encombrant
pas de souris

Réduire la tape

<input type=tel>
<input type=email>
<input type=date>
<datalist>

Sans souris

cibles d’action plus large pour interactions tactiles
:hover, onmouseover
touchstart, touchmove, touchend
Tactile multi-points

Réseau

bande passante
latence
coût et quotas
intermittent

Optimisations

Minification, compression (HTML, CSS, JS)
Cache (Cache-Control, Last-Modified)
Réduction en taille et en nombres :
- images : sprites CSS, EXIF, optimisation
- attention aux bibliothèques JS
- fusionner les CSS
Attention aux cookies

Hors-ligne

Stockage: localStorage, indexedDB.open(dbname), window.requestFileSystem
Cache hors-ligne :
<html manifest="list.manifest">

CPU & mémoire

CPU plus lents
Affecte la batterie
Mémoire plus limitée

Optimisations

Attention aux scripts
Reflow / repaints
Taille des pages et des objets JS
Utilisation réseau

Diversité et fragmentation

Diversité nettement plus importante
Grandes variations entre navigateurs

Adaptation de contenu

Design Web réactif (« responsive »)
- CSS Media Queries
- « Mobile First »
- Détection JavaScript
Adaptation côté serveur
Approches hybrides

Social

Liens
Gestion de l’identité
Web Real-Time Communications

Vie privée & Securité

SSL
Do-Not-Track
Content-Security Policy
API de Cryptographie

Media

SVG
canvas
CSS3 (animations, transformations)
WebGL (3D)
<audio> & <video>

Interactions

Speech API
NFC

Connectivité

AJAX
new XMLHttpRequest();
Web Sockets
new WebSocket('wss://…');
P2P, temps réel
new PeerConnection('STUNS …');
HTTP 2.0

Sensors

GPS
navigator.geolocation.getCurrentPosition()
Accéléromètre
addEventListener("devicemotion")
Boussole
addEventListener("deviceorientation")
Camera
navigator.getUserMedia({video:true})
Microphone
navigator.getUserMedia({audio:true})

Encadré Moustache

Beaucoup reste à faire

Finir les travaux en cours
Paiements
nouvelles APIs (par ex. NFC)
…

Impliquez vous

Devenir Membre du W3C
Participer aux Community Groups
Envoyer des retours sur les specs
Contribuer des cas de tests

En savoir plus

Use a spacebar or arrow keys to navigate