Download - Formation mobile-cross-platform
![Page 1: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/1.jpg)
02.10.15 1
Responsive design &
développement mobile
« cross-platform »Polytech’Nice
vendredi 2 octobre 2015
![Page 2: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/2.jpg)
02.10.15 2
Au programme …
1. Sites web responsive
2. Développement mobile cross platform
![Page 3: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/3.jpg)
02.10.15 3
Avant de commencer …
Faisons les présentations
![Page 4: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/4.jpg)
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)
![Page 5: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/5.jpg)
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
![Page 6: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/6.jpg)
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
![Page 7: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/7.jpg)
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 ?
![Page 8: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/8.jpg)
02.10.15 8
Partie 1
Sites web responsive
![Page 9: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/9.jpg)
02.10.15 9
Au programme …
1. Vous avez dit responsive ?
2. CSS3 et les media-query
3. Exemple d’un framework : Bootstrap
![Page 10: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/10.jpg)
02.10.15 10
Vous avez dit responsive ?
Media queries en CSS3
![Page 11: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/11.jpg)
02.10.15 11
Ce qu’on entend par responsive
![Page 12: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/12.jpg)
02.10.15 12
Ce qu’on entend par responsive
![Page 13: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/13.jpg)
02.10.15 13
Comment procéder ?
• Avant CSS3, on avait déjà
• Depuis CSS3, on a :
![Page 14: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/14.jpg)
02.10.15 14
Format des media-query
![Page 15: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/15.jpg)
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,
![Page 16: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/16.jpg)
02.10.15 16
Niveau compatibilité ?
![Page 17: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/17.jpg)
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
![Page 18: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/18.jpg)
02.10.15 18
Parlons peu, mais bien
Voici quelques exemples de sites
responsive réalisés en @media queries
![Page 19: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/19.jpg)
02.10.15 19
Responsive ? OK. Tests ? …
Multiplication des résolutions
Multiplication des devices
Multiplication des tests
![Page 20: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/20.jpg)
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 !
![Page 21: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/21.jpg)
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 …
![Page 22: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/22.jpg)
02.10.15 22
Et bootstrap dans tout ça ?
Framework HTML, CSS & JS
![Page 23: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/23.jpg)
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
![Page 24: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/24.jpg)
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 :
![Page 25: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/25.jpg)
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é
![Page 26: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/26.jpg)
02.10.15 26
La grille de Bootstrap
Dans le code, ces classes sont cumulables:
![Page 27: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/27.jpg)
02.10.15 27
La grille de Bootstrap
Avec quelques outils pour vos sites responsive :
![Page 28: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/28.jpg)
02.10.15 28
Les containers de Bootstrap
• Bootstrap propose 2 containers :
– un de largeur fixe
– un de pleine largeur
![Page 29: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/29.jpg)
02.10.15 29
Sur une page
![Page 30: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/30.jpg)
02.10.15 30
![Page 31: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/31.jpg)
02.10.15 31
Bootstrap c’est aussi
• Un style CSS global: typo, couleurs, mises en forme :
– Tableaux
– Boutons
![Page 32: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/32.jpg)
02.10.15 32
Bootstrap c’est aussi
– Formulaires
![Page 33: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/33.jpg)
02.10.15 33
Bootstrap c’est aussi
– Navbar, Tabs, et bien d’autres éléments …
Plus d’infos sur : http://getbootstrap.com
![Page 34: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/34.jpg)
02.10.15 34
Oui, mais j’ai IE 8 …
Les réfractaires sous XP
![Page 35: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/35.jpg)
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>)
![Page 36: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/36.jpg)
02.10.15 36
Parlons peu, mais bien
Voici quelques exemples de sites
responsive réalisés avec Bootstrap
![Page 37: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/37.jpg)
02.10.15 37
Questions
Et réponses …
![Page 38: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/38.jpg)
02.10.15 38
Partie 2
Applications mobiles cross-platform
![Page 39: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/39.jpg)
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
![Page 40: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/40.jpg)
02.10.15 40
Bien choisir sa techno
Application ou site mobile,
Que choisir ?
![Page 41: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/41.jpg)
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
![Page 42: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/42.jpg)
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
![Page 43: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/43.jpg)
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
![Page 44: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/44.jpg)
02.10.15 44
Phonegap / Apache Cordova
Des applis mobiles en Javascript ?
C’est possible …
![Page 45: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/45.jpg)
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
![Page 46: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/46.jpg)
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
![Page 47: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/47.jpg)
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
![Page 48: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/48.jpg)
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 !
![Page 49: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/49.jpg)
02.10.15 49
Ce qui est supporté
![Page 50: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/50.jpg)
02.10.15 50
Ce qui est supporté
![Page 51: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/51.jpg)
02.10.15 51
Ce que ça donne
![Page 52: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/52.jpg)
02.10.15 52
Ce que ça donne
![Page 53: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/53.jpg)
02.10.15 53
Phonegap / Apache Cordova
Oui mais techniquement ça donne quoi ?
![Page 54: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/54.jpg)
02.10.15 54
Installer Phonegap
• Prérequis :
– Node JS
– SDK cible (Android, iOS …)
![Page 55: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/55.jpg)
02.10.15 55
Avec Cordova
![Page 56: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/56.jpg)
02.10.15 56
Exemple de projet
![Page 57: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/57.jpg)
02.10.15 57
Exemple de projet
![Page 58: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/58.jpg)
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
![Page 59: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/59.jpg)
02.10.15 59
Le fichier config.xml (Android)
![Page 60: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/60.jpg)
02.10.15 60
Le fichier config.xml (iOS)
![Page 61: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/61.jpg)
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
![Page 62: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/62.jpg)
02.10.15 62
Quelques composants …
• Accéléromètre
• Caméra
• Boussole
• Contacts
• Géolocalisation
• Lecteur multimédia
• Stockage
• Notifications
• …
![Page 63: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/63.jpg)
02.10.15 63
Utilisation de la géolocalisation
Avec l’outil en ligne de commande :
Sous Android :
![Page 64: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/64.jpg)
02.10.15 64
Utilisation de la géolocalisation
Sous iOS :
Sous Windows :
![Page 65: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/65.jpg)
02.10.15 65
Utilisation de la géolocalisation
![Page 66: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/66.jpg)
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
![Page 67: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/67.jpg)
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
![Page 68: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/68.jpg)
02.10.15 68
Anatomie d’un plugin Android
![Page 69: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/69.jpg)
02.10.15 69
Anatomie d’un plugin iOS
![Page 70: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/70.jpg)
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
![Page 71: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/71.jpg)
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 …
![Page 72: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/72.jpg)
02.10.15 72
jQuery Mobile
Sites mobiles cross platform
![Page 73: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/73.jpg)
02.10.15 73
Petites questions …
Qu’est-ce que jQuery ?
A quoi cela sert-il ?
Pourquoi l’utiliser ?
![Page 74: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/74.jpg)
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
![Page 75: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/75.jpg)
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
![Page 76: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/76.jpg)
02.10.15 76
Petit tour des fonctionnalités
http://demos.jquerymobile.com/1.4.4/
![Page 77: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/77.jpg)
02.10.15 77
Onsen UI
Fait pour Phonegap
![Page 78: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/78.jpg)
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/
![Page 79: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/79.jpg)
02.10.15 79
Construit pour Phonegap
![Page 80: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/80.jpg)
02.10.15 80
Avec Phonegap ?
• Une fois cordova installé
• Téléchargez un « thème »
• Et démarrez!
![Page 81: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/81.jpg)
02.10.15 81
Structure d’un fichier
![Page 83: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/83.jpg)
02.10.15 83
Conclusion
All good things must come to an end
![Page 84: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/84.jpg)
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
![Page 85: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/85.jpg)
02.10.15 85
Questions
Et réponses …
![Page 86: Formation mobile-cross-platform](https://reader031.vdocuments.pub/reader031/viewer/2022030303/587b444a1a28ab9c0e8b65f5/html5/thumbnails/86.jpg)
02.10.15 86
Coordonnées
Christophe BONNET
+377 97 98 36 98
http://www.i2n.mc