Applications mobiles

795 views

Published on

0 Comments
1 Like
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
795
On SlideShare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
27
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide

Applications mobiles

  1. 1. Applications mobiles One code to rule them all ! 1 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  2. 2. Cedric Gatay SRMvision - Tech Lead Android Developer @Cedric_Gatay 2 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  3. 3. Interfaces utilisateur 3 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  4. 4. Éléments de navigation• Interactions utilisateurs • Grille • Liste • Onglets • Skeumorphisme • Carrousel • Zone infinie 4 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  5. 5. Grille• Balance l’importance des éléments 5 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  6. 6. Liste• Efficace pour beaucoup d’éléments 6 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  7. 7. Onglets• Attention à marquer la différence visuelle 7 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  8. 8. Skeumorphisme• Réplique l’apparence d’un objet réel 8 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  9. 9. Carrousel• Navigation dans peu d’éléments 9 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  10. 10. Zone infinie• N’affiche qu’une partie de l’élément 10 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  11. 11. Éléments d’interface• Inscription / Connexion• Recherche• Action• Confirmation / Notification• Premier lancement 11 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  12. 12. Inscription / Connexion• Rendre facile l’inscription 12 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  13. 13. Recherche• Enrichir les résultats au fil de l’eau 13 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  14. 14. Action• Ne pas hésiter à utiliser du texte 14 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  15. 15. Notifications• Intrusif donc à utiliser avec précaution 15 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  16. 16. Premier lancement• Apprendre l’utilisation à ses utilisateurs 16 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  17. 17. Points de vigilance• Skeumorphisme mal choisi• Boites de dialogue inutiles• Non conforme aux recommendations• Interface surchargée 17 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  18. 18. Mobiles 18 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  19. 19. Points communs• Capteurs• Résolution limitée• Connectivité limitée• Puissance limitée 19 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  20. 20. Différences• OS différents• Environnement de développement 20 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  21. 21. Cible d’une application• grand nombre d’utilisateurs• grand nombre de devices Attention au coût de développement 21 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  22. 22. Problématiques• Beaucoup (trop ?) de plateformes• Marché verrouillé• Les utilisateurs veulent votre application peu importe leur device 22 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  23. 23. Problématiques• Nécessité de développer pour chaque device • Coûteux • Difficile 23 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  24. 24. Une solution• Technologies Web • ancien ( > 15 ans) • cible principale des mobiles 24 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  25. 25. Technologies Web• standardisé• peu coûteux• facile à comprendre 25 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  26. 26. Write Once Run Anywhere 26 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  27. 27. Tour d’horizon 27 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  28. 28. HTML 5• Certainement la seule technologie cross- platform• simple et universel 28 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  29. 29. HTML 5• nouveau standard du HTML• supporté par une majorité de browsers • http://caniuse.com 29 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  30. 30. Pourquoi HTML 5Extension d’HTML 4• nouvelles balises• nouveaux attributs• nouvelles API 30 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  31. 31. A quoi ça ressemble<!DOCTYPE html><html> <head> <title>Title</title> </head> <body> <p>Content</p> </body></html> 31 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  32. 32. HTML Doctype• Indispensable• Dicte au browser le mode de parsing 32 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  33. 33. HTML 5• Nouvelles balises • séparation contenu / présentation 33 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  34. 34. Nouvelles balises<section> zone de la page<header> en-tête de section<footer> pied de page de section<nav> zone de navigation 34 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  35. 35. HTML 5 Metadata• attribut data-* des balises• récupérable en JavaScript 35 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  36. 36. HTML 5 validation• indication du type de données• évite la validation JavaScript 36 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  37. 37. HTML 5 validation<input type="date"><input type="email"><input type="number"> 37 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  38. 38. HTML 5 Forms• autofocus • positionne le focus sur l’élément• placeholder • indique le contenu attendu 38 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  39. 39. HTML 5 Forms• required • indique que le champ doit être rempli• pattern • permet de spécifier le contenu attendu 39 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  40. 40. HTML5 Multimedia• <audio|video> • inclusion de fichier son / video • contrôlable en JavaScript 40 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  41. 41. HTML5 : stockage• localStorage • stockage clef / valeur • associé au site • persistant 41 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  42. 42. HTML5 : stockage• sessionStorage • perdu à la fermeture du browser 42 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  43. 43. HTML5 : stockage• WebSQL • implémentation SQL • persistant 43 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  44. 44. HTML5 : stockage• IndexedDB • évolution de WebSQL • peu supporté 44 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  45. 45. HTML5 : stockage• Cache d’application • utilisation hors ligne • écriture d’un fichier manifest • non supporté par IE 45 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  46. 46. HTML5 géolocalisation• récupération de la latitude/longitude• API JavaScript : navigator.geolocation• watchPosition() pour suivre le déplacement 46 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  47. 47. HTML5 websockets• communication bidirectionnelle• configuration serveur spécifique 47 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  48. 48. HTML5 Canvas• graphisme dans le browser• contrôlable par JavaScript 48 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  49. 49. HTML5 Web workers• JavaScript est mono-thread• traitement asynchrone • en arrière plan • non bloquant 49 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  50. 50. CSS 3 50 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  51. 51. CSS 3• Norme conjointe au HTML 5• Supporté par tous les navigateurs récents 51 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  52. 52. CSS 3• Plus simple• Meilleures performances 52 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  53. 53. CSS 3selecteur { propriete : valeur; propriete2 : val1, val2;} 53 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  54. 54. CSS 3• Héritage des propriétés• Combinaisons possibles h1,h2,h3 { color : blue; } 54 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  55. 55. CSS 3 sélecteurs• Par type a{}• Par id #element{}• Par classe .maClasse{} 55 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  56. 56. CSS 3 sélecteurs• h1 pp h1 • <p> contenus dans <h1>• h1 >>p p h1 • <p> fils direct de <h1>• h1 ++p p h1 • <p> juste après <h1> 56 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  57. 57. CSS 3 apparence margin border padding content 57 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  58. 58. CSS 3 positionnement• static • empilement des éléments 58 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  59. 59. CSS 3 positionnement• relative • identique static • ajustement left: 200px; possible • left,right • top,bottom 59 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  60. 60. CSS 3 positionnement• absolute top: 0; left : 0; top: 0; right : 0; • indépendant • coordonnées absolues • left,right bottom : 0; right : 0; • top,bottom 60 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  61. 61. CSS 3 positionnement• fixed • coordonnées fixes • fixe dans le viewport bottom 0; left: 0; 61 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  62. 62. CSS 3 float• l’élément ira aussi loin à gauche ou droite que possible• float : left|right|none|inherit;• l’élément suivant s’y adaptera• pour forcer un retour : clear 62 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  63. 63. CSS 3 effets• transformations• transitions• animations 63 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  64. 64. CSS 3 transform• 2D ou 3D scale• scale• rotate• skew rotat e skew 64 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  65. 65. CSS 3 transition• application au changement de style• caractéristiques • CSS à modifier • durée 65 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  66. 66. CSS 3 animation• permet d’animer le contenu de la page• possibilité de définir des boucles• déclenchées automatiquement 66 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  67. 67. CSS 3 media types• permet de cibler un media en particulier • screen • print • braille • tv 67 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  68. 68. CSS 3 media types• précisé dans l’inclusion de la feuille de style <link rel="stylesheet" href="style.css" media="screen"/> 68 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  69. 69. CSS 3 media types• @media dans le fichier CSS @media print { div { } } 69 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  70. 70. CSS 3 media queries• permet d’ajouter des conditions au style • largeur de l’écran • résolution de l’écran 70 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  71. 71. CSS 3 media queries• expression booléenne évaluée • cible des situations particulières@media screen and orientation : portrait { div { }} 71 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  72. 72. JavaScript 72 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  73. 73. JavaScript• Syntaxe simple• Héritage prototypal 73 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  74. 74. JavaScript• Importance croissante• Performances en amélioration continue • V8 • Nashorn 74 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  75. 75. JSON• JavaScript Object Notation• Format d’échange standardisé 75 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  76. 76. JSON{! "first": "John",! "last": "Doe",! "age": 39,! "sex": "M",! "salary": 70000,! "registered": true,! "favorites": {! ! "color": "Blue",! ! "sport": "Soccer",! ! "food": "Spaghetti"! }} 76 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  77. 77. JSON• Remplace le XML de plus en plus• Compact, rapide et flexible• Tous les navigateurs le comprennent 77 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  78. 78. JQuery• Bibliothèque permettant de • manipuler le DOM • ajouter des effets • gérer l’AJAX 78 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  79. 79. Pourquoi ?• Cross-browser• syntaxe des sélecteurs calquée sur CSS• enrichi JavaScript• communauté importante 79 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  80. 80. Concept• JQuery fait le lien entre le JavaScript et le HTML• Credo • trouver des éléments • leur appliquer une opération 80 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  81. 81. Utilisation• jQuery("selecteur") jQuery("selecteur") • trouve les éléments correspondant à "selecteur"• jQuery(".class") == $(".class") 81 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  82. 82. Fluent API• Syntaxe permettant de chainer les appels • $("selecteur") .show() .addClass("green"); 82 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  83. 83. JQuery• Attention aux performances • librairie prévue pour le desktop • poids et lenteur peuvent arriver 83 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  84. 84. Micro frameworks• Versions allégées des librairies desktop• Adaptées au mobile • mais pas reservées pour autant 84 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  85. 85. Zepto• Zepto (5-10ko) • puissance des sélecteurs jQuery • modulaire 85 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  86. 86. Hammer.js• Spécialisé dans le multitouch • indépendant • léger (2k) • pinch, swipe, tap... 86 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  87. 87. microjs.com 87 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  88. 88. Frameworks mobiles• Bibliothèque de composants• Émule ou s’interface avec le natif• Look And Feel spécifiques 88 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  89. 89. JQuery Mobile• Dérivé du célèbre framework • supporte les thèmes • multi plateforme • utilisé par beaucoup • amélioration du HTML 89 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  90. 90. • Basé sur ExtJS • vraie bibliothèque de composant • style proche du natif • courbe d’apprentissage plus élevée 90 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  91. 91. Application mobile ? 91 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  92. 92. Web application• HTML 5 + CSS 3 + JavaScript • Web application• L’utilisateur doit lancer son browser• Pas la visibilité obtenue grace à un store 92 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  93. 93. Application hybride• Application native offrant une vue sur la webapp • déployable dans les store • icône dédiée 93 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  94. 94. Application hybride• Implémentation simple • une Webview suffit ! 94 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  95. 95. Appareil photo 95 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  96. 96. API natives• Code de compatibilité dans l’application • interopérabilité avec le JavaScript ? • portabilité ? 96 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  97. 97. Frameworks• Idée principale • accès à toutes les spécificités • garder un code portable • enrichir les API JavaScript 97 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  98. 98. Appcelerator titanium 98 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  99. 99. Frameworks• Appcelerator Titanium • JavaScript vers code natif • compatibilité frameworks tiers délicate • licence complexe 99 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  100. 100. PhoneGap 100 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  101. 101. PhoneGap• API JavaScript• acheté par Adobe en 2011• libéré en tant qu’Apache Cordova 101 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  102. 102. PhoneGap• JavaScript API• PhoneGap fait le lien 102 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  103. 103. API native 103 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  104. 104. PhoneGap PhoneGap Android API provider iOS API provider PhoneGapWebView JavaScript BlackBerry API provider Windows API provider 104 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  105. 105. PhoneGap:Build• Build dans le cloud• Très récent• Évite toute la configuration locale 105 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  106. 106. Build 106 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  107. 107. Architecture 107 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  108. 108. Architecture• Contenu en HTML• Présentation en CSS• Interactions en JavaScript • accès API natives via PhoneGap 108 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  109. 109. Applications• Souvent connectées • application cliente • un serveur web • échange JSON / XML 109 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  110. 110. Côté web• HTTP • verbes • transport• implémentation libre • technologie 110 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  111. 111. Questions ?Merci de votre attention 111 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  112. 112. Mini projet Gestion de prêts 112 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  113. 113. Mini projet• Gestion de prêts • DVD, Livres, Argent, ... • Utilisation du carnet d’adresse 113 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  114. 114. Mini projet• 5 TP pour le faire• 2 à 4 personnes• Utilisation de PhoneGap 114 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  115. 115. Mini projet• Critères de notation • qualité de l’interface (/5) • qualité du code produit (/5) • richesse fonctionnelle (/10) 115 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  116. 116. Ressources• http://www.mobiledesignpatterngallery.com/mobile-patterns.php• http://phonegap.com/• http://caniuse.com/ Images belong to their respective authors 116 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together

×