Formation mobile-cross-platform

1 526 vues

Publié le

Christophe Bonnet

Publié dans : Logiciels
0 commentaire
1 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
1 526
Sur SlideShare
0
Issues des intégrations
0
Intégrations
936
Actions
Partages
0
Téléchargements
33
Commentaires
0
J’aime
1
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive

Formation mobile-cross-platform

  1. 1. 02.10.15 1 Responsive design & développement mobile « cross-platform » Polytech’Nice vendredi 2 octobre 2015
  2. 2. 02.10.15 2 Au programme … 1. Sites web responsive 2. Développement mobile cross platform
  3. 3. 02.10.15 3 Avant de commencer … Faisons les présentations
  4. 4. 02.10.15 4 Qui suis-je ? • Ingénieur Polytech’Nice – Promotion 2006 • Fondateur & Gérant d’i2N depuis 2007 • Consultant auprès des entreprises pour les accompagner dans leur gestion des technologies de l’information (web, mise en place de solutions logicielles & matérielle)
  5. 5. 02.10.15 5 i2N : Notre métier Conception de sites Internet sur mesure (institutionnel, e-commerce, mobile) Suivi et développement (référencement, stratégie social media) Développement de logiciels sur mesure Gestion de parcs informatiques & Maintenance
  6. 6. 02.10.15 6 i2N : Nos références Mairie de Monaco, Sûreté Publique de Monaco, SBM, Education Nationale, Grimaldi Forum, Radio Vitamine, Radio Riviera … Tous secteurs : Immobilier, BTP, Institutionnels, Juridique, Services … www.i2n.mc
  7. 7. 02.10.15 7 Et vous ? Quelques questions pour vous … Quelles sont vos connaissances en Javascript ? Avez-vous déjà développé nativement pour mobile ? Avez-vous déjà développé un site adapté aux mobiles ?
  8. 8. 02.10.15 8 Partie 1 Sites web responsive
  9. 9. 02.10.15 9 Au programme … 1. Vous avez dit responsive ? 2. CSS3 et les media-query 3. Exemple d’un framework : Bootstrap
  10. 10. 02.10.15 10 Vous avez dit responsive ? Media queries en CSS3
  11. 11. 02.10.15 11 Ce qu’on entend par responsive
  12. 12. 02.10.15 12 Ce qu’on entend par responsive
  13. 13. 02.10.15 13 Comment procéder ? • Avant CSS3, on avait déjà • Depuis CSS3, on a :
  14. 14. 02.10.15 14 Format des media-query
  15. 15. 02.10.15 15 Concrètement … • Où place-t-on ce code ? – Dans les feuilles de styles CSS traditionnelles • Que peut-on faire ? – Tout! C’est un CSS qui est exécuté avec la condition de largeur / hauteur du media  On peut donc envisager de : • cacher des éléments, • les redimensionner, • les repositionner, • changer la taille des polices et leurs couleurs,
  16. 16. 02.10.15 16 Niveau compatibilité ?
  17. 17. 02.10.15 17 Quel impact pour mon IHM ? • Un site responsive doit se concevoir à la base : – On va créer l’interface utilisateur desktop en pensant qu’on va devoir faire une interface responsive – On va utiliser un système de grille pour gérer les repositionnements (12 colonnes en général) – Le but étant de maximiser l’expérience utilisateur, il faut donc penser à ce dont l’utilisateur aura besoin en mobilité et au moyen le plus simple pour lui de l’atteindre
  18. 18. 02.10.15 18 Parlons peu, mais bien  Voici quelques exemples de sites responsive réalisés en @media queries
  19. 19. 02.10.15 19 Responsive ? OK. Tests ? … Multiplication des résolutions  Multiplication des devices  Multiplication des tests
  20. 20. 02.10.15 20 Plus de tests ? • Le responsive design ouvre un large champ des possibles • On peut prendre en charge tout un tas de nouveaux cas • On multiplie donc le nombre de device capables de lire l’IHM • On veut améliorer l’expérience utilisateur  Ca veut donc dire plus de tests !
  21. 21. 02.10.15 21 Quels outils ? • Vos navigateurs favoris ont ce qu’il faut – F12 sur Google Chrome – Ctrl + Maj + M sur Firefox • Ne pas délaisser les tests réels sur smartphone / tablette – Les navigateurs mobiles (iOS notamment) nous réservent parfois quelques surprises …
  22. 22. 02.10.15 22 Et bootstrap dans tout ça ? Framework HTML, CSS & JS
  23. 23. 02.10.15 23 On parlait de grille … Pour un design responsive, on donne en général une largeur en colonnes lesquelles occupent un % de la largeur de l’écran
  24. 24. 02.10.15 24 La grille de Bootstrap Bootstrap propose une liste de classes CSS permettant de matérialiser cette grille. Celles-ci sont placées dans une div de classe row :
  25. 25. 02.10.15 25 La grille de Bootstrap • Les classes sont de différent types pour définir la largeur d’une colonne en fonction du device utilisé
  26. 26. 02.10.15 26 La grille de Bootstrap Dans le code, ces classes sont cumulables:
  27. 27. 02.10.15 27 La grille de Bootstrap Avec quelques outils pour vos sites responsive :
  28. 28. 02.10.15 28 Les containers de Bootstrap • Bootstrap propose 2 containers : – un de largeur fixe – un de pleine largeur
  29. 29. 02.10.15 29 Sur une page
  30. 30. 02.10.15 30
  31. 31. 02.10.15 31 Bootstrap c’est aussi • Un style CSS global: typo, couleurs, mises en forme : – Tableaux – Boutons
  32. 32. 02.10.15 32 Bootstrap c’est aussi – Formulaires
  33. 33. 02.10.15 33 Bootstrap c’est aussi – Navbar, Tabs, et bien d’autres éléments …  Plus d’infos sur : http://getbootstrap.com
  34. 34. 02.10.15 34 Oui, mais j’ai IE 8 … Les réfractaires sous XP
  35. 35. 02.10.15 35 On a pensé à vous ! • HTML5 Shiv et Respond.js vont ajouter le support IE8 à Bootstrap : (ce code est à ajouter dans le <head>)
  36. 36. 02.10.15 36 Parlons peu, mais bien  Voici quelques exemples de sites responsive réalisés avec Bootstrap
  37. 37. 02.10.15 37 Questions Et réponses …
  38. 38. 02.10.15 38 Partie 2 Applications mobiles cross-platform
  39. 39. 02.10.15 39 Au programme … 1. A chaque projet sa techno 2. 1 code  Plusieurs plateformes 3. La puissance de jQuery sur mobile 4. Quelques librairies mobiles intéressantes
  40. 40. 02.10.15 40 Bien choisir sa techno Application ou site mobile, Que choisir ?
  41. 41. 02.10.15 41 Se poser les bonnes questions • Que voulons nous faire avec notre mobile ? – Consultation de pages Internet – Consultation de données disponibles hors ligne – Consultation de données remises à jour – Interaction avec une application ou un site web – Utiliser les fonctionnalités du mobile (boussole, géolocalisation, accéléromètre) – Jeux en 3D – Streaming audio et vidéo
  42. 42. 02.10.15 42 Avoir les bonnes réponses • Que voulons nous faire avec notre mobile ? – Consultation de pages Internet  Site mobile – Consultation de données disponibles hors ligne  Site mobile / application – Consultation de données remises à jour  Site mobile / application – Interaction avec une application ou un site web  Site mobile / application – Utiliser les fonctionnalités du mobile (boussole, géolocalisation, accéléromètre)  Application Phonegap / native – Tirer parti du mobile à 100% (jeux en 3D, streaming audio et vidéo)  Application native
  43. 43. 02.10.15 43 Le cross platform c’est bien • Mais on n’a pas accès à toutes les fonctionnalités du mobile • Mais on n’a pas une gestion aussi fine des performances • Mais on n’est pas aussi rétro compatible qu’on le souhaiterait (quoi que) Par contre, on gagne du temps si le choix est fait à bon escient
  44. 44. 02.10.15 44 Phonegap / Apache Cordova Des applis mobiles en Javascript ? C’est possible …
  45. 45. 02.10.15 45 Vous avez dit Phonegap ? • Le principe général : – 1 code unique – Plusieurs plateformes cibles • Les avantages: – Temps de développement réduit – Maintenabilité sur différentes plateformes – 1 seul langage pour différentes plateformes
  46. 46. 02.10.15 46 Phonegap ou Cordova ? • Phonegap est une distribution de Cordova – Cordova est le moteur qui fait tourner Phonegap – Phonegap peut proposer quelques plugins complémentaires< (notamment propriétaires) • Cependant … – Ils restent tous les 2 gratuits – Ils restent tous les 2 open source
  47. 47. 02.10.15 47 Vous avez dit Phonegap ? • Cherche à réduire l’écart entre les téléphones • Concrètement : – Outil de création d’un projet type pour chaque OS – 1 répertoire pour le code – Code HTML + Javascript – Librairie Javascript à inclure – Fichier de préférences à éditer suivant les besoins • En pratique, Phonegap crée une WebView qui exécute du code Web
  48. 48. 02.10.15 48 Vous avez dit Phonegap ? • Cependant : – Quelques petits inconvénients liés à une WebView – N’évite pas les tests sur les différentes plateformes ! – Difficile à déboguer finement car ça reste du JS … • Mais ces inconvénients sont à mettre en perspective par rapport au gain de temps et aux avantages !
  49. 49. 02.10.15 49 Ce qui est supporté
  50. 50. 02.10.15 50 Ce qui est supporté
  51. 51. 02.10.15 51 Ce que ça donne
  52. 52. 02.10.15 52 Ce que ça donne
  53. 53. 02.10.15 53 Phonegap / Apache Cordova Oui mais techniquement ça donne quoi ?
  54. 54. 02.10.15 54 Installer Phonegap • Prérequis : – Node JS – SDK cible (Android, iOS …)
  55. 55. 02.10.15 55 Avec Cordova
  56. 56. 02.10.15 56 Exemple de projet
  57. 57. 02.10.15 57 Exemple de projet
  58. 58. 02.10.15 58 Le fichier config.xml • Définition – des composants disponibles – du nom de l’application – du splashscreen – de paramètres globaux – …  Différent suivant les cibles
  59. 59. 02.10.15 59 Le fichier config.xml (Android)
  60. 60. 02.10.15 60 Le fichier config.xml (iOS)
  61. 61. 02.10.15 61 Le fichier config.xml • <widget> : domaine de l’application • <name> : nom de l’application • <description> & <author> : métadonnées • <content> : page de démarrage (défaut : index.html) • <access> : domaines extérieurs auxquels l’application peut accéder
  62. 62. 02.10.15 62 Quelques composants … • Accéléromètre • Caméra • Boussole • Contacts • Géolocalisation • Lecteur multimédia • Stockage • Notifications • …
  63. 63. 02.10.15 63 Utilisation de la géolocalisation Avec l’outil en ligne de commande : Sous Android :
  64. 64. 02.10.15 64 Utilisation de la géolocalisation Sous iOS : Sous Windows :
  65. 65. 02.10.15 65 Utilisation de la géolocalisation
  66. 66. 02.10.15 66 Ajoutez votre code natif … • Possibilité de développer des plugins natifs • Appels depuis le code Javascript : • winParam : Fonction appelée en cas de réussite • Error : Fonction appelée en cas d’erreur • Service : classe de la méthode appelée • Action : méthode appelée
  67. 67. 02.10.15 67 Utilisation d’un plugin • Déclarer le plugin dans le fichier config.xml On définit la fonction echo sur l’objet window qui appelle la méthode echo de la classe Echo
  68. 68. 02.10.15 68 Anatomie d’un plugin Android
  69. 69. 02.10.15 69 Anatomie d’un plugin iOS
  70. 70. 02.10.15 70 Pour aller plus loin … • Possibilité d’inclure des librairies Javascript spécifiques • Possibilité d’écrire des plugins natifs – Si cela ne vaut pas un développement spécifique … • L’API en ligne : http://docs.phonegap.com • Le Wiki : https://github.com/phonegap/phonegap/wiki
  71. 71. 02.10.15 71 Le look d’une application native ? • Malgré tous ces avantages • Malgré tous ces composants • Cela garde le look d’un site mobile et non d’une application :/  Des librairies peuvent vous y aider …
  72. 72. 02.10.15 72 jQuery Mobile Sites mobiles cross platform
  73. 73. 02.10.15 73 Petites questions … Qu’est-ce que jQuery ? A quoi cela sert-il ? Pourquoi l’utiliser ?
  74. 74. 02.10.15 74 jQuery mais en mobile • jQuery est utilisable sur Mobile • jQueryMobile apporte des fonctionnalités cross platform => Layout, Dialog, Transitions, Multipage • Différents thèmes • Outil WYSIWYG de mise en forme • Possibilité de décliner un site en 3 versions : classique, tablette et mobile
  75. 75. 02.10.15 75 Avec Phonegap ? • Intégration possible avec Phonegap • Inclusion simple du code JS et HTML dans l’application et le tour est joué • Quelques variables à régler
  76. 76. 02.10.15 76 Petit tour des fonctionnalités http://demos.jquerymobile.com/1.4.4/
  77. 77. 02.10.15 77 Onsen UI Fait pour Phonegap
  78. 78. 02.10.15 78 Construit pour Phonegap • Librairie JS • Définit un lot de balises HTML et d’attributs sémantiques • Fonctionnalités cross platform et widgets => Layout, Dialog, Transitions, Multipage • Différents thèmes • Thèmes et gabarits disponibles  http://onsen.io/
  79. 79. 02.10.15 79 Construit pour Phonegap
  80. 80. 02.10.15 80 Avec Phonegap ? • Une fois cordova installé • Téléchargez un « thème » • Et démarrez!
  81. 81. 02.10.15 81 Structure d’un fichier
  82. 82. 02.10.15 82 Petit tour des composants http://components.onsen.io/
  83. 83. 02.10.15 83 Conclusion All good things must come to an end
  84. 84. 02.10.15 84 En bref … • Le responsive saura vous apporter une IHM adaptée à tous vos supports • Bien utilisé, Phonegap pourra vous faire gagner du temps en développement pour plusieurs cibles • jQuery Mobile / OnsenUI vous permettra de faire de beaux sites / applicationscross- platform • N’évite pas les tests sur les différentes plateformes
  85. 85. 02.10.15 85 Questions Et réponses …
  86. 86. 02.10.15 86 Coordonnées Christophe BONNET cbonnet@i2n.mc +377 97 98 36 98 http://www.i2n.mc

×