![Page 2: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/2.jpg)
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
![Page 3: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/3.jpg)
Programmation WebXavier Tannier
Mobile
La diversité des supports
3
Navigateurs
…
Téléphones
…
Tablettes
…
Autres
![Page 4: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/4.jpg)
Programmation WebXavier Tannier
Mobile
Résolutions
4
source : www.graphism.fr (Geoffrey Dorne)
![Page 5: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/5.jpg)
Programmation Web
MobileXavier Tannier
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
![Page 6: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/6.jpg)
Programmation WebXavier Tannier
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
![Page 7: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/7.jpg)
Programmation WebXavier Tannier
Mobile
Site Web ou application ?
7
![Page 8: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/8.jpg)
Programmation WebXavier Tannier
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/
Site Web ou application ?
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 »
![Page 9: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/9.jpg)
Media Queries(CSS3)
![Page 10: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/10.jpg)
Programmation WebXavier Tannier
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
![Page 11: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/11.jpg)
Programmation WebXavier Tannier
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 »
![Page 12: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/12.jpg)
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
![Page 13: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/13.jpg)
Bonnes pratiques
![Page 14: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/14.jpg)
Programmation WebXavier Tannier
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-
![Page 15: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/15.jpg)
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
![Page 16: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/16.jpg)
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
![Page 17: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/17.jpg)
Programmation WebXavier Tannier
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
![Page 18: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/18.jpg)
Programmation WebXavier Tannier
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
![Page 19: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/19.jpg)
Frameworks (librairies) pour mobile
![Page 20: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/20.jpg)
Programmation Web
MobileXavier Tannier
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.
![Page 21: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/21.jpg)
Touch Events
Gérer les événements tactiles en javascript
![Page 22: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/22.jpg)
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
![Page 23: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/23.jpg)
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
![Page 24: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/24.jpg)
Programmation WebXavier Tannier
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
![Page 25: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/25.jpg)
Programmation WebXavier Tannier
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)
![Page 26: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/26.jpg)
Pour en savoir plus
![Page 27: Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)](https://reader035.vdocuments.fr/reader035/viewer/2022081420/551d9db8497959293b8dc0cc/html5/thumbnails/27.jpg)
Programmation Web
MobileXavier Tannier
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/