Applications mobiles
Upcoming SlideShare
Loading in...5
×
 

Applications mobiles

on

  • 495 views

 

Statistics

Views

Total Views
495
Views on SlideShare
494
Embed Views
1

Actions

Likes
0
Downloads
14
Comments
0

1 Embed 1

http://www.linkedin.com 1

Accessibility

Categories

Upload Details

Uploaded via as Adobe PDF

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment

Applications mobiles Applications mobiles Presentation Transcript

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