Xavier Tannier [email protected] Web pour le mobile (introduction)

Xavier [email protected]

Web pourle mobile(introduction)

Programmation Web

MobileXavier Tannier

Appareils mobiles

Les limitations des appareils mobiles– La taille des écrans– La puissance de processeurs– La taille de la mémoire embarquée– La lenteur de la connexion

→ Un site Web pour mobiles doit être léger !

Les « plus » des appareils mobiles

– La géolocalisation– Le scrolling

2

Programmation WebXavier Tannier

Mobile

La diversité des supports

3

Navigateurs

…

Téléphones

…

Tablettes

…

Autres


Mobile

Résolutions

4

source : www.graphism.fr (Geoffrey Dorne)

http://www.graphism.fr/

Programmation Web


Mobilité et vitesse

Vitesse de chargement– Le réseau est plus lent que sur un support fixe !

→ Pas d’images inutiles→ Des images compressées au maximum→ Pas/moins de publicités

Vitesse de lecture– L’internaute mobile est pressé !

→ Navigation simplifiée→ Pas de longs blocs de texte (plutôt des listes à puces)

5


Mobile

Adaptation au supportpar exemple, accès aux boutons Androïd

Intégration au supporttéléchargement facile, icône à portée de doigt

Développement et maintenancecoûteux si on vise plusieurs plateformes

Modèle économiqueune appli payante reverse 30 % aux app stores

Dépendanceon est à la merci des changements décidés par Google, Apple & C°

Visibilitégrâce aux plateformes de téléchargement

Standards existants ou en cours de développement

Liberté de création pas de plateforme de téléchargementqui filtre arbitrairement

Adaptation au supportet à leurs différentes technologies

Sécuritépas de plateforme qui vérifie les sites

Performancesaccès par un navigateur avec des limitations en mémoire et en cache

Développement et maintenanceréduits

Site Web ou application ?

6


Mobile


7


Mobile

On perd beaucoup des avantages cités précédemment !Sans profiter plus des avantages des applications…

Expérience optimiséeen fonction du média

Des scripts de redirection pourtous les langages :

http://detectmobilebrowsers.com/


8

Un support = une page Web

Un seul site qui s’adapte

Cacher des images

Cacher du texte

Désactiver le scroll horizontal

Agrandir boutons et liens

Débuter par la version mobile

Progresser vers les versions plus grandes

Utiliser les « media queries »

Modifier le style de sa page classique

en fonction du support

Conception adaptative « Responsive Web Design »

Media Queries(CSS3)


Mobile

Syntaxe

10

<html> <head> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" media="screen and (max-width:640px)"

type="text/css" href="style-screen.css" />

<link rel="stylesheet" media="print" type="text/css" href="style-print.css" />

<link rel="stylesheet" media="handheld" type="text/css" href="style-mobile.css" />

</head>

Déclaration

Syntaxe• Opérateurs : "and", "only", "not" et "," (ou)• Exemple : "screen and (min-width: 200px) and (max-width: 640px)"

Pour éviter le redimensionnement automatique par le smartphone

On peut spécifier les contraintes ici ou dans le CSS


Mobile

Types de médias

11

screen Écrans classiques

handheld Périphériques mobiles ou de petite tailleprint Imprimantes

speech / aural Synthèses vocalesbraille Braille

embossed Imprimantes braille

projection Projecteurs (ou présentations par slides)

tty Polices fixes (télétypes, terminaux, …)

tv Téléviseursall Tous

La majorité des navigateurs sur smartphonesse considèrent comme « screen »

Critères

12

height * Hauteur de la zone d’affichage

width * Largeur de la zone d’affichage

aspect-ratio * Ratio du périphérique (4/3, 16/9…)

device-height * Hauteur du périphérique

device-width * Largeur du périphérique

device-aspect-ratio * Ratio de la zone d’affichage concernée

orientation Orientation (portrait ou landscape)

resolution * Résolution (en dpi ou en cpcm)

color * Support de la couleur

monochrome * Périphérique monochrome/à niveaux de griscolor-index * Nombre de couleurs dans l’indexgrid Périphérique de type grille (1) ou bitmap (0)

scan Type de balayage (interlace ou progressive)

* À utiliser avec

les préfixes -min et -max

Bonnes pratiques


Mobile

Mise en page

14

Pas de <div> imbriqués non nécessaires

Pas de flash (non compatible sur de nombreux supports)

Pas d’appel à des styles en ligne

Pas de positionnements absolus

Respecter les normes

Utiliser une mise en page simple

Utiliser des unités de mesures relatives (%, em, ex)

Utiliser les bornes min- et max-

Colonnes

15

Navigation

Menus

Contenu

Pub

News

Contenulié

Sur PC Sur mobile

Liens

Pub

Navigation

Menus

Pub

Contenu

Pub

News

Contenu lié

Liens

@media screen and (max-width:768px) {* { width: 100%; margin: 0;

padding: 0;}}

CSS

Contenu

16

Navigation

Menus

Contenu

Pub

News

Contenulié

Sur PC Sur mobile

Liens

Pub

Navigation

Menus

Pub

Contenu

Pub

News

Contenu lié

Liens

@media screen and (max-width:768px) {.not-mobile: { display: none; }

}

<div id="pub" class="not-mobile"></div>

CSS

HTML


Mobile

Divers

17

/* Césures, mots longs, passages à la ligne */@media screen and (max-width:768px) {

*: { word-wrap: break-word; -webkit-hyphens: auto; /* Safari/Chrome */ -moz-hyphens: auto; /* Firefox, other Gecko */ hyphens: auto; /* Opera/IE 8+ */

}}

CSS

/* Message personnalisé */@media screen and (max-width:768px) {

body:before {content: "Version mobile";display: block;

}}

CSS


Mobile

Divers

18

/* Pour empêcher les débordements * (width + padding + border = taille totale) */@media screen and (max-width:768px) {

*: { -webkit-box-sizing: border-box; /* Safari/Chrome */ -moz-box-sizing: border-box; /* Firefox, other Gecko */ box-sizing: border-box; /* Opera/IE 8+ */ }

}

CSS

Frameworks (librairies) pour mobile

Programmation Web


Frameworks pour mobile

• Choisissez-les basés sur HTML5 !– jQuery Mobile– Sencha Touch (2)– Dojo– The M Project– DHTMLX Touch– Mobilize.js

• Et d’autres spécifiques pour les jeux, les graphiques, les animations, etc.

Touch Events

Gérer les événements tactiles en javascript

Types d’événements

22

touchstart L’utilisateur pose un « touch point » (doigt ou stylet) sur la surface tactile

touchend L’utilisateur retire un touch pointtouchmove L’utilisateur déplace un touch point

touchenter Un touch point entre dans un élémenttouchleave Un touch point quitte un élémenttouchcancel Le navigateur arrête la prise en compte d’un

événement touch

/* Pour récupérer un événement touch et ses coordonnées */elem.addEventListener(‘touchstart’, callTouchStart, false);

function callTouchStart(e) { var touchPoint = e.touches.item(0); var x = touchPoint.screenX; var y = touchPoint.screenY; …}

Javascript

L’interface TouchEventtarget Object La cible associée à l’événement

type String Le type de l’événement (voir liste page précédente)touches TouchList La liste de tous les points de contact en cours

changedTouches TouchList La liste de tous les points de contact ayant été modifiés depuis le dernier événement

targetTouches TouchList La liste de tous les points de contact ciblés par un événement

altKey Boolean La touche alt était-elle enfoncée ?

ctrlKey Boolean La touche ctrl était-elle enfoncée ?

metaKey Boolean La touche meta était-elle enfoncée ?

shiftKey Boolean La touche shift était-elle enfoncée ?

23

/* Tester si la touche alt est enfoncée au moment de l’événement */function callTouchStart(e) { if (e.altKey) { … }}

Javascript


Mobile

L’interface TouchList

24

length long Le nombre de points de contacts

/* Pour parcourir la liste des points de contact */elem.addEventListener(‘touchstart’, callTouchStart, false);

function callTouchStart(e) { for (var i = 0 ; i < e.touches.length ; i++) { var touchPoint = e.touches.item(i); …}

Javascript

identifiedTouch(long id) Touch Renvoie le point de contact de la liste portant l’identifiant spécifié

Item(unsigned long index) Touch Renvoie l’élément index de la liste


Mobile

L’interface Touch

25

identifier long L’identifiant de l’objet

screenX, screenY long Les coordonnées par rapport à l’écranclientX, clientY long Les coordonnées rapport au navigateur, sans

prendre en compte le scrollpageX, pageY long Les coordonnées par rapport au navigateur, en

prenant en compte le scrolltarget EventTarget L’élément sur lequel le point de contact se trouve

Encore peu implémentés :

radiusX, radiusY long Le rayon du doigt (de l’ellipse de contact)

rotationAngle long L’angle (l’orientation) du doigt (de l’ellipse de contact)

force long La force de la pression (entre 0 et 1)

Pour en savoir plus

Programmation Web


Pour en savoir plus

27

• Mobile Web Application Best Practices (W3C) : http://www.w3.org/TR/mwapp

• Et un résumé :http://www.w3.org/2007/02/mwbp_flip_cards

• HTML5 pour le mobile :http://www.html5rocks.com/en/mobile

• Les standards du web mobile :http://www.w3.org/standards/webdesign/mobilweb

• Les applications hors ligne :http://www.w3.org/TR/2008/NOTE-offlinewebapps-20080530/

http://www.w3.org/TR/mwapp

http://www.w3.org/2007/02/mwbp_flip_cards

http://www.html5rocks.com/en/mobile

http://www.w3.org/standards/webdesign/mobilweb

http://www.w3.org/TR/2008/NOTE-offlinewebapps-20080530/

Documents

Xavier Tannier [email protected] Web pour le mobile (introduction)