Your SlideShare is downloading. ×
Applications mobiles
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

Applications mobiles

564
views

Published on


0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
564
On Slideshare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
25
Comments
0
Likes
0
Embeds 0
No embeds

Report content
Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
No notes for slide

Transcript

  • 1. Applications mobiles One code to rule them all ! 1 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 2. Cedric Gatay SRMvision - Tech Lead Android Developer @Cedric_Gatay 2 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 3. Interfaces utilisateur 3 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. Grille• Balance l’importance des éléments 5 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 6. Liste• Efficace pour beaucoup d’éléments 6 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 7. Onglets• Attention à marquer la différence visuelle 7 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 8. Skeumorphisme• Réplique l’apparence d’un objet réel 8 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 9. Carrousel• Navigation dans peu d’éléments 9 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 10. Zone infinie• N’affiche qu’une partie de l’élément 10 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 11. Éléments d’interface• Inscription / Connexion• Recherche• Action• Confirmation / Notification• Premier lancement 11 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 12. Inscription / Connexion• Rendre facile l’inscription 12 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 13. Recherche• Enrichir les résultats au fil de l’eau 13 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 14. Action• Ne pas hésiter à utiliser du texte 14 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 15. Notifications• Intrusif donc à utiliser avec précaution 15 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 16. Premier lancement• Apprendre l’utilisation à ses utilisateurs 16 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. Mobiles 18 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. Différences• OS différents• Environnement de développement 20 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. Problématiques• Nécessité de développer pour chaque device • Coûteux • Difficile 23 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 24. Une solution• Technologies Web • ancien ( > 15 ans) • cible principale des mobiles 24 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 25. Technologies Web• standardisé• peu coûteux• facile à comprendre 25 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 26. Write Once Run Anywhere 26 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 27. Tour d’horizon 27 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 28. HTML 5• Certainement la seule technologie cross- platform• simple et universel 28 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. Pourquoi HTML 5Extension d’HTML 4• nouvelles balises• nouveaux attributs• nouvelles API 30 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. HTML Doctype• Indispensable• Dicte au browser le mode de parsing 32 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 33. HTML 5• Nouvelles balises • séparation contenu / présentation 33 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. HTML 5 Metadata• attribut data-* des balises• récupérable en JavaScript 35 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. HTML 5 validation<input type="date"><input type="email"><input type="number"> 37 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. HTML5 Multimedia• <audio|video> • inclusion de fichier son / video • contrôlable en JavaScript 40 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 41. HTML5 : stockage• localStorage • stockage clef / valeur • associé au site • persistant 41 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 42. HTML5 : stockage• sessionStorage • perdu à la fermeture du browser 42 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 43. HTML5 : stockage• WebSQL • implémentation SQL • persistant 43 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 44. HTML5 : stockage• IndexedDB • évolution de WebSQL • peu supporté 44 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. HTML5 websockets• communication bidirectionnelle• configuration serveur spécifique 47 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 48. HTML5 Canvas• graphisme dans le browser• contrôlable par JavaScript 48 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. CSS 3 50 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. CSS 3• Plus simple• Meilleures performances 52 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 53. CSS 3selecteur { propriete : valeur; propriete2 : val1, val2;} 53 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. CSS 3 sélecteurs• Par type a{}• Par id #element{}• Par classe .maClasse{} 55 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. CSS 3 apparence margin border padding content 57 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 58. CSS 3 positionnement• static • empilement des éléments 58 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. 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. 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. CSS 3 effets• transformations• transitions• animations 63 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. 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. 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. 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. CSS 3 media types• @media dans le fichier CSS @media print { div { } } 69 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. JavaScript 72 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 73. JavaScript• Syntaxe simple• Héritage prototypal 73 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 74. JavaScript• Importance croissante• Performances en amélioration continue • V8 • Nashorn 74 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 75. JSON• JavaScript Object Notation• Format d’échange standardisé 75 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. 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. 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. 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. 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. Fluent API• Syntaxe permettant de chainer les appels • $("selecteur") .show() .addClass("green"); 82 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. Zepto• Zepto (5-10ko) • puissance des sélecteurs jQuery • modulaire 85 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. microjs.com 87 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. • 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. Application mobile ? 91 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. Application hybride• Implémentation simple • une Webview suffit ! 94 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 95. Appareil photo 95 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. Appcelerator titanium 98 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. PhoneGap 100 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. PhoneGap• JavaScript API• PhoneGap fait le lien 102 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 103. API native 103 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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. Build 106 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 107. Architecture 107 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. Applications• Souvent connectées • application cliente • un serveur web • échange JSON / XML 109 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 110. Côté web• HTTP • verbes • transport• implémentation libre • technologie 110 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 111. Questions ?Merci de votre attention 111 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 112. Mini projet Gestion de prêts 112 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. Mini projet• 5 TP pour le faire• 2 à 4 personnes• Utilisation de PhoneGap 114 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together
  • 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. 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

×