Your browser doesn't support the features required by impress.js, so you are presented with a simplified version of this presentation.

For the best experience please use the latest Chrome or Safari browser. Firefox 10 (to be released soon) will also handle it.

Le Web : plate-forme de convergence des appareils connectés

http://kwz.me/bB

Ce project est financé par l’Union Européenne via le septième programme-cadre (FP7/2010-2012) sous l’agrément n°257800 Mobile Web Applications (MobiWebApp)

Dominique Hazaël-Massieux

Initiative Web Mobile

  • démarrée en 2005
  • rendre le Web plus accessible depuis les téléphones
  • accompagner la croissance du mobile comme plate-forme privilégiée

Différences ?

Écran

Taille

  • 13→20"
  • 3→4"

Écran

Résolution

  • 800→2000px
  • 320→1280px

Écran

Orientation

  • paysage
  • portrait

Clavier

Pointeur

Réseau

Bande passante

Latence

Coût / quota

On / off

Processeur
& mémoire

Batterie

Diversité
Fragmentation

Portabilité
& Maniabilité

Disponibilité

Capteurs

Audio / Vidéo

Web Mobile

  • Adapter l’affichage
  • Adapter les systèmes d’entrée
  • Réduire l’usage du réseau
  • Reduire l’usage du processeur et de la mémoire
  • Adapter le contenu

Affichage

  • Éviter le zoom et le défilement

Affichage adapté

<meta name='viewport' content='width=device-width'>

Style adapté à l’écran :

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

Affichage « liquide » ou « élastique » sur une colonne

Clavier ↘

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

Bientôt (?) :

<input type='text' speech>

Souris ↓

  • Zones de ciblage plus larges pour les interactions tactiles
  • Navigation séquentielle
  • Événements DOM touchstart, touchmove, touchend

Réseau ↘

  • Minification, compression
  • Cache HTTP
  • Réduire la taille et le nombre de requêtes : images, scripts, CSS
  • Utiliser XMLHttpRequest pour les mises-à-jour partielles
  • ⚠ cookies

Fonctionnement déconnecté

Stockage local :

window.localStorage

Base de données locale :

var db = window.indexedDB.open(dbname);

Cache pour fonctionnement hors-ligne :

<html manifest='manifest_file'>

Processeur & mémoire ↘

  • Images redimensionnées sur le serveur
  • ⚠ Scripts
  • ⚠ « page reflow & repaints »
  • ⚠Taille des pages et des objets JS
  • ⚠ Réseau

Diversité & Fragmentation

  • Adaptation de contenu
  • Responsive Web Design:
    • CSS Media Queries
    • Mobile first
    • Détections de fonctionnalités en JavaScript
  • Adaptation de contenu côté serveur

Applications Web Mobiles

  • vs applications « natives »
  • liberté de déploiement et de mise à jour
  • Sur toutes les plate-formes, tous les appareils
  • Financial Times, Facebook, Zynga, etc.

Applications Web Mobiles

  • Interface utilisateur
  • Capteurs
  • Intégration au matériel
  • Utilisation plus riche du réseau

Interface utilisateur

Survolez le cercle

La face cachée !

  • SVG
  • animations & transformations CSS3
  • canvas
  • polices WOFF
  • notifications

Capteurs

Geolocalisation :

navigator.geolocation.getCurrentPosition(…)

Acceleromètre / gyroscope :

addEventListener('devicemotion', …)

Intégration au matériel

Batterie :

x 
navigator.battery.addEventListener(
                      'dischargingtimechange', …)

Vibration :

navigator.vibrate(1000);

Caméra / microphone:

navigator.getUserMedia({video:true,audio:true},…)

Connectivité

Adaptation à la bande-passante :

if (navigator.connection.bandwidth) < 2 // MB/s)

Optmisation des requêtes initiées par le serveur :

var eventsource = new EventSource();
eventsource.onmessage = function(event) { … }

Connectivité

Connexions bidirectionnelles :

var socket = new WebSocket(
            'ws://game.example.com:12010/updates');
socket.onopen = function () { …};

Bientôt, connexions P2P:

var connection = new PeerConnection('STUNS example.net',
                          signalingCallback);

→ Communications temps-réel

Canvas + Tactile + Capteur + Réseau

Domaines d’applications

  • Jeux
  • Réalité augmentée
  • « Hyperdevices »
  • …

Web & TV

Web & automobile

Pour en savoir plus

Liens sur http://kwz.me/bb

Pour en savoir plus

Liens sur http://kwz.me/bb

S’impliquer

Liens sur http://kwz.me/bb

Use a spacebar or arrow keys to navigate