Xavier Tannier Web pour le mobile (introduction)

Présentation au sujet: "Xavier Tannier Web pour le mobile (introduction)"— Transcription de la présentation:

1 Xavier Tannier xavier.tannier@limsi.fr Web pour le mobile (introduction)

2 Programmation Web Mobile Xavier 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

3 Programmation Web Xavier Tannier Mobile La diversité des supports 3 Navigateurs … Téléphones … Tablettes … Autres

4 Programmation Web Xavier Tannier Mobile Résolutions 4 source : www.graphism.fr (Geoffrey Dorne)www.graphism.fr

5 Programmation Web Mobile Xavier Tannier Mobilité et vitesse Vitesse de chargement – Le réseau est plus lent que sur un support fixe ! Pas dimages inutiles Des images compressées au maximum Pas/moins de publicités Vitesse de lecture – Linternaute mobile est pressé ! Navigation simplifiée Pas de longs blocs de texte (plutôt des listes à puces) 5

6 Programmation Web Xavier Tannier Mobile Adaptation au support par exemple, accès aux boutons Androïd Intégration au support téléchargement facile, icône à portée de doigt Développement et maintenance coûteux si on vise plusieurs plateformes Modèle économique une appli payante reverse 30 % aux app stores Dépendance on 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échargement qui filtre arbitrairement Adaptation au support et à leurs différentes technologies Sécurité pas de plateforme qui vérifie les sites Performances accès par un navigateur avec des limitations en mémoire et en cache Développement et maintenance réduits Site Web ou application ? 6

7 Programmation Web Xavier Tannier Mobile Site Web ou application ? 7

8 Programmation Web Xavier Tannier Mobile On perd beaucoup des avantages cités précédemment ! Sans profiter plus des avantages des applications… Expérience optimisée en fonction du média Des scripts de redirection pour tous les langages : http://detectmobilebrowsers.com/ Site Web ou application ? 8 Un support = une page Web Un seul site qui sadapte 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 »

9 Media Queries (CSS3)

10 Programmation Web Xavier Tannier Mobile Syntaxe 10 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

11 Programmation Web Xavier Tannier Mobile Types de médias 11 screenÉcrans classiques handheldPériphériques mobiles ou de petite taille printImprimantes speech / auralSynthèses vocales brailleBraille embossedImprimantes braille projectionProjecteurs (ou présentations par slides) ttyPolices fixes (télétypes, terminaux, …) tvTéléviseurs allTous La majorité des navigateurs sur smartphones se considèrent comme « screen »

12 Critères 12 height*Hauteur de la zone daffichage width*Largeur de la zone daffichage 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 daffichage concernée orientationOrientation (portrait ou landscape) resolution*Résolution (en dpi ou en cpcm) color*Support de la couleur monochrome*Périphérique monochrome/à niveaux de gris color-index*Nombre de couleurs dans lindex gridPériphérique de type grille (1) ou bitmap (0) scanType de balayage (interlace ou progressive) * À utiliser avec les préfixes -min et -max

13 Bonnes pratiques

14 Programmation Web Xavier Tannier Mobile Mise en page 14 Pas de imbriqués non nécessaires Pas de flash (non compatible sur de nombreux supports) Pas dappel à 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-

15 Colonnes 15 Navigation Menus Contenu Pub News Contenu lié 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

16 Contenu 16 Navigation Menus Contenu Pub News Contenu lié 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; } } CSS HTML

17 Programmation Web Xavier 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

18 Programmation Web Xavier 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

19 Frameworks (librairies) pour mobile

20 Programmation Web Mobile Xavier Tannier Frameworks pour mobile Choisissez-les basés sur HTML5 ! – jQuery Mobile – Sencha Touch (2) – Dojo – The M Project – DHTMLX Touch – Mobilize.js Et dautres spécifiques pour les jeux, les graphiques, les animations, etc.

21 Touch Events Gérer les événements tactiles en javascript

22 Types dévénements 22 touchstartLutilisateur pose un « touch point » (doigt ou stylet) sur la surface tactile touchendLutilisateur retire un touch point touchmoveLutilisateur déplace un touch point touchenterUn touch point entre dans un élément touchleaveUn touch point quitte un élément touchcancelLe navigateur arrête la prise en compte dun é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

23 Linterface TouchEvent targetObjectLa cible associée à lévénement typeStringLe type de lévénement (voir liste page précédente) touchesTouchListLa liste de tous les points de contact en cours changedTouchesTouchListLa liste de tous les points de contact ayant été modifiés depuis le dernier événement targetTouchesTouchListLa liste de tous les points de contact ciblés par un événement altKeyBooleanLa touche alt était-elle enfoncée ? ctrlKeyBooleanLa touche ctrl était-elle enfoncée ? metaKeyBooleanLa touche meta était-elle enfoncée ? shiftKeyBooleanLa 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

24 Programmation Web Xavier Tannier Mobile Linterface TouchList 24 lengthlongLe 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)TouchRenvoie le point de contact de la liste portant lidentifiant spécifié Item(unsigned long index)TouchRenvoie lélément index de la liste

25 Programmation Web Xavier Tannier Mobile Linterface Touch 25 identifierlongLidentifiant de lobjet screenX, screenYlongLes coordonnées par rapport à lécran clientX, clientYlongLes coordonnées rapport au navigateur, sans prendre en compte le scroll pageX, pageYlongLes coordonnées par rapport au navigateur, en prenant en compte le scroll targetEventTargetLélément sur lequel le point de contact se trouve Encore peu implémentés : radiusX, radiusYlongLe rayon du doigt (de lellipse de contact) rotationAnglelongLangle (lorientation) du doigt (de lellipse de contact) forcelongLa force de la pression (entre 0 et 1)

26 Pour en savoir plus

27 Programmation Web Mobile Xavier Tannier Pour en savoir plus 27 Mobile Web Application Best Practices (W3C) : http://www.w3.org/TR/mwapp 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/