Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Internet mobile
Jean David Olekhnovitch - jd@olek.fr
Version du 10/11/2017
L’ancêtre du
Smartphone : le PDA
• Personal Digital Assistant
• Assistant de poche

(agenda, carnet d’adresses..)
Les smartphones
• Tel + PDA + haut débit + miniaturisation =
Smartphone
• Au début, de simples téléphones avec
quelques fo...
2007 : le tournant de
l’iPhone
Ce qu’a apporté
l’iPhone
• Un système d’exploitation d’ordinateur :
Unix
• Une interface utilisateur tactile
• Une synchro...
L’arrivée d’Android
• Lancé fin 2007 par Google à partir
d’un rachat
• Bases similaires à iOS : Unix,
interface tactile
• F...
Android : quelques
chiffres
• 300 millions de tél activés vendus par
trimestre
• Plus d’un million d’apps
• 90 milliards d...
Le souci d’Android : la
fragmentation
• Google ne s’occupe (presque) pas du
hardware
• Les téléphones Android sont très
hé...
Microsoft : l’historique
Déchu
• Windows Phone était un OS prometteur...
mais qui a été abandonné
• Après de multiples ten...
RIM : Blackberry, star
obsolète
• Existe depuis 1999
• A démocratisé l’usage du mail sur son
portable
• A loupé le passage...
Samsung : le géant
silencieux
• Samsung est présent depuis toujours sur le
mobile
• Le catalogue, très large, permet de co...
Source : Numérama
Au delà du téléphone
mobile
Les nouveaux médias
La tablette : remplaçant
du PC ?
L’iPad : invention d’un
marché
• Pour une fois,Apple crée un
marché, et ne s’attaque pas à
un existant
• Pourtant, les ess...
Concurrence : mobile
ou ordinateur ?
• Les tablettes Android sont de ‘simples’
smartphones élargis, sans réelle démarche
s...
Un marché bien
particulier
Une croissance
hypothétique
Vers la conquête
d’autres terrains
• TV connectée (AppleTV, GoogleTV...)
• Voitures (CarPlay...)
• Montres connectées
• Et...
Le hardware
aujourd’hui
• 4G/WiFi/Bluetooth
• GPS systématique (+triangulation)
• Accéléromètre (+gyroscope..)
• Caméra fr...
Les différents types de
réseau mobile
• GPRS : 9600bps
• Edge : 56Kbps
• UMTS (3G) : 384Kbps
• 4G : jusqu’à 300Mbps
• La 5...
L’omniprésence du
Bluetooth
• Autrefois réservé aux liaisons sans fil bas
débit, le Bluetooth est aujourd’hui un
format per...
NFC : l’authentification
simplifiée à l’extrême
• Near Field Communication
• Permet de lire/écrire des identifiants et
inform...
QRCode : la fausse
bonne idée ?
• Une sorte de code-barre 2D pour
remplacer la saisie d’URL ou de codes
• Intuitivité disc...
L’enjeu de la
géolocalisation
• Une des valeurs ajoutées très forte d’un
téléphone
• De multiples technos croisées :
• GPS...
Paiement mobile
• Deux modes possibles :
• Extension du paiement sans contact
• L’authentification permet des montants
plus...
L’enjeu des notifications
• Enjeu marketing : essentiel pour relancer
l’utilisateur
• Enjeu technique : de nombreux problèm...
Ceci est une révolution
: l’AppStore
• Regroupement à un endroit
unique des ressources softs
• Installation ultra simplifié...
Achat en
boutique d’un CD
Installation du
logiciel
Enregistrement
en ligne
Mises à jour
manuelles
Découverte
via pub/magaz...
Rémunération de
l’application
• Deux modes :
• Achat de l’application
• Achat «In App»
• A chaque fois : 30% pour le diffu...
Un monde en
perpétuelle évolution
• iOS + iPhone : un par an
• A surveiller : keynotes annuelles (en
septembre pour l’iPho...
Les applis à venir
• M-commerce
• Réalité augmentée
• Interactions multi-plateformes
• ...
L’eldorado de la réalité
augmentée
• La puissance de calcul des téléphones
permet aujourd’hui des traitements inédits
sur ...
Réalité augmentée vs
réalité virtuelle
• La réalité virtuelle propose une immersion
totale dans un monde n’existant pas
• ...
TP1 : 5 sujets d’étude
• Le potentiel de la réalité augmentée
• Vers la disparition des smartphones ?
• Les tablettes vont...
Développement
d’apps mobile
Du site responsive jusqu’au
développement natif
Développement
d’applications web
• Historique : en 2000, le WAP (utilisation de
WML, un HTML très simplifié)
• Depuis 2007,...
Design responsive
• Utilisation des feuilles de style pour
proposer un affichage différent entre PC,
tablette, smartphone
•...
Particularités d’un
développement web
• Multiplateformes : on repose sur les
standards HTML5/CSS3
• Sans installation
• Sa...
Accelerated 

Mobile Apps
• A l’origine une technologie Open Source
• Facilite l’accès au mobile via des version
dégradées...
Progressive Web Apps
• Défini par Google en 2015
• Se positionne entre l’app mobile et le site
responsive
• Sorte d’extensi...
Capacité d’une PWA
• Utilisation hors ligne
• Temps de chargement rapides et
asynchrones
• Notifications push
• Icône sur l...
Développer une appli
mobile
• Un vrai travail de développeur
• Basé sur des environnements spécifiques
• iOS : Swift + XCod...
App vs Web
App Web
Parfaitement intégré au tél Simplicité de développement
Facilité d’installation Réutilisation infra web...
Applications hybrides
• Utilisation d’un environnement de
développement unique pour les deux
plateformes
• IONIC
• React
•...
Architecture d’une app
hybride
Codage unique :
- soit avec des
technos web
(HTML/CSS/JS…)
- soit avec un
métalangage
Génér...
Spectre des possibilités
Web
mobile
Responsive
Dév
natif
Dév
hybride
Progressive
Web Apps
AMP
Web App
Responsive design
Un peu de responsive, beaucoup de CSS
CSS pour mobile
• Le duo HTML/CSS est tout à fait adapté
pour un affichage sur téléphone mobile
• Le HTML représente le con...
CSS adaptatif
• Idée majeure du responsive : rendre le CSS
multifacette en fonction du device
• En fait, cette idée a touj...
Les medias queries
@media	screen	and	(max-width:	480px)	
{	
				nav	
				{	
								display:	block;	
								width:	100%;	...
Structure générale du
CSS modifié
p	
{	
		…	
}	
…

@media	screen	and	(max-width:	480px)	
{	
		…	
}

@media	screen	and	(max-...
Insertion dans le code
HTML
<html>	
<head>	
		<link	rel="stylesheet"	type="text/css"	href="monstyle.css">	
		<meta	name="v...
Structuration en
plusieurs fichiers CSS
@import	url("fineprint.css")	print;	
@import	url("bluish.css")	projection,	tv;	
@im...
Structuration des pages
avec Bootstrap
• Les media queries CSS permettent
d’adapter le look d’une page à son média
• Mais ...
Insertion de Bootstrap
<html>	
<head>	
		<link	rel="stylesheet"	type="text/css"	href="monstyle.css">	
		<meta	name="viewpo...
Structure de base d’un
HTML Bootstrap
<div	class="container">	
		<div	class="row">	
				<div	class="col">	
						Colonne	1...
Grids bootstrap
• Bootstrap ordonnance les éléments sous
forme de grille, lignes puis colonnes
• Chaque grille est en fait...
Exemple de grille
Bootstrap
• Une grille est basée sur
• Des lignes
• 12 colonnes par grille
• Chaque “bloc” peut prendre ...
Exemple de grille mixte
• Mélange de trois types de blocs :
• Mobile ( “.col-12”)
• Tablette (“.col-sm-6”)
• Desktop (“.co...
Les différents médias
définis par Bootstrap
Préfixe - sm md lg xl
Largeur
max
576px 768px 992px 1200px >1200px
Nom
extra
sma...
Exercice 1 : portfolio
• Créer avec HTML, CSS, Bootstrap une page
permettant d’afficher une grille de portfolio
avec des ta...
Exercice 2 : blog
• Créer avec HTML, CSS, Bootstrap une page
affichant un blog sur 3 colonnes
• La version tablette (1024px...
Progressive
web apps
Entre web et app, une alternative
qui peut devenir grande ?
PWA : Google sort du
marché des apps
• Idée : reprendre toutes les briques de
HTML5 + d’autres et simuler ce qu’est une
ap...
Quelques exemples
• A exécuter sur Chrome !
• Mise en cache de pages Wikipedia
• https://wiki-offline.jakearchibald.com
• P...
En coulisses
• Responsive design pour l’interface
• Web Services et Web sockets pour accéder
aux serveurs sans passer par ...
Tâches de fond
• Service Workers : permet de gérer le cache
entre navigateur et serveur
• Web Workers : permet des traitem...
Etat des lieux des
implémentations
Source : Clever Age
Mise en pratique
• https://codelabs.developers.google.com/
codelabs/your-first-pwapp
• Nécessite Google Chrome
• et aussi d...
Mécanismes mis en
place
• Affichage météo
• Chargement asynchrone des données
• Stockage local du paramétrage (liste de
vil...
Icône sur le bureau
• Deux mécanismes différents
• Sur Android, rendu disponible
automatiquement à la deuxième
utilisation...
3 GROUPES, 3 SUJETS
• Application touristique
• TV connectée, montres connectées,
ubiquité numérique : application
multipl...
A rendre
• Présentation orale + support éventuel à
chaque étape
• 3 axes à prendre en compte :
• technique : présentation ...
Différentes étapes de la
création
1. Définition du concept, et du périmètre des
fonctionnalités
2. Cahier des charges
3. Mo...
Internet mobile : conception de sites et d'applications
Upcoming SlideShare
Loading in …5
×

Internet mobile : conception de sites et d'applications

400 views

Published on

Pour mieux comprendre l'offre mobile, les possibilités des devices, les perspectives, et les différents choix technologiques lors d'un lancement de projet mobile

Published in: Technology
  • Be the first to comment

  • Be the first to like this

Internet mobile : conception de sites et d'applications

  1. 1. Internet mobile Jean David Olekhnovitch - jd@olek.fr Version du 10/11/2017
  2. 2. L’ancêtre du Smartphone : le PDA • Personal Digital Assistant • Assistant de poche
 (agenda, carnet d’adresses..)
  3. 3. Les smartphones • Tel + PDA + haut débit + miniaturisation = Smartphone • Au début, de simples téléphones avec quelques fonctions avancées • De plus en plus de puissance au fil des années • Les smartphones les plus récents sont plus puissants qu’un ordinateur !
  4. 4. 2007 : le tournant de l’iPhone
  5. 5. Ce qu’a apporté l’iPhone • Un système d’exploitation d’ordinateur : Unix • Une interface utilisateur tactile • Une synchronisation solide avec son ordinateur • En fait, plus un travail de compilation de briques existantes
  6. 6. L’arrivée d’Android • Lancé fin 2007 par Google à partir d’un rachat • Bases similaires à iOS : Unix, interface tactile • Format ouvert : OS disponible pour tous constructeurs • Certains constructeurs apportent une surcouche spécifique
  7. 7. Android : quelques chiffres • 300 millions de tél activés vendus par trimestre • Plus d’un million d’apps • 90 milliards d’apps téléchargées par an
  8. 8. Le souci d’Android : la fragmentation • Google ne s’occupe (presque) pas du hardware • Les téléphones Android sont très hétérogènes • Conséquence : difficile de développer une application exploitant toutes ses spécificités
  9. 9. Microsoft : l’historique Déchu • Windows Phone était un OS prometteur... mais qui a été abandonné • Après de multiples tentatives • Microsoft reviendra forcément... • ....mais on ne sait pas où et quand • Pour les professionnels ? • Sur un créneau disruptif ?
  10. 10. RIM : Blackberry, star obsolète • Existe depuis 1999 • A démocratisé l’usage du mail sur son portable • A loupé le passage au tactile • Ne subsiste aujourd’hui que par Android • Bon exemple d’un virage technique loupé
  11. 11. Samsung : le géant silencieux • Samsung est présent depuis toujours sur le mobile • Le catalogue, très large, permet de couvrir les marchés les plus modestes comme les Premium • A du mal à se sortir de l’uniformité d’Android
  12. 12. Source : Numérama
  13. 13. Au delà du téléphone mobile Les nouveaux médias
  14. 14. La tablette : remplaçant du PC ?
  15. 15. L’iPad : invention d’un marché • Pour une fois,Apple crée un marché, et ne s’attaque pas à un existant • Pourtant, les essais ont été nombreux dans les années passées (TabletPC..) • Cible : l’utilisateur débutant, pour qui le PC est inaccessible
  16. 16. Concurrence : mobile ou ordinateur ? • Les tablettes Android sont de ‘simples’ smartphones élargis, sans réelle démarche spécifique • Microsoft s’est engouffré dans le marché pour décliner son Windows et le concept de PC dans une version plus portable avec la Surface
  17. 17. Un marché bien particulier
  18. 18. Une croissance hypothétique
  19. 19. Vers la conquête d’autres terrains • TV connectée (AppleTV, GoogleTV...) • Voitures (CarPlay...) • Montres connectées • Et surtout... la création d’écosystèmes
  20. 20. Le hardware aujourd’hui • 4G/WiFi/Bluetooth • GPS systématique (+triangulation) • Accéléromètre (+gyroscope..) • Caméra frontale • Appareil photo+vidéo 4K
  21. 21. Les différents types de réseau mobile • GPRS : 9600bps • Edge : 56Kbps • UMTS (3G) : 384Kbps • 4G : jusqu’à 300Mbps • La 5G commence a être déployée au Japon
  22. 22. L’omniprésence du Bluetooth • Autrefois réservé aux liaisons sans fil bas débit, le Bluetooth est aujourd’hui un format performant et économe en énergie • Audio : casques sans fil.. • Connectivité : montres connectées • Liaison économe vers l’extérieur (beacons...)
  23. 23. NFC : l’authentification simplifiée à l’extrême • Near Field Communication • Permet de lire/écrire des identifiants et informations basiques • Possibilité d’embarquer sur des cartes passives • IOS très fermé
  24. 24. QRCode : la fausse bonne idée ? • Une sorte de code-barre 2D pour remplacer la saisie d’URL ou de codes • Intuitivité discutable • Et pourtant une utilité réelle
  25. 25. L’enjeu de la géolocalisation • Une des valeurs ajoutées très forte d’un téléphone • De multiples technos croisées : • GPS (+Galileo) • Altimètre, boussole • Triangulation mobile • En intérieur : beacons
  26. 26. Paiement mobile • Deux modes possibles : • Extension du paiement sans contact • L’authentification permet des montants plus élevés • Authentification du paiement en ligne • Diffusion rendue difficile par la nécessité d’un lobbying fort
  27. 27. L’enjeu des notifications • Enjeu marketing : essentiel pour relancer l’utilisateur • Enjeu technique : de nombreux problèmes ont dû être résolus (notion de ‘push’, économie d’énergie) • Enjeu de sécurité : solliciter son téléphone de l’extérieur est risqué
  28. 28. Ceci est une révolution : l’AppStore • Regroupement à un endroit unique des ressources softs • Installation ultra simplifié • Pré-sélection (qualitative?) des applications • Paiement ultra simplifié
  29. 29. Achat en boutique d’un CD Installation du logiciel Enregistrement en ligne Mises à jour manuelles Découverte via pub/magazine Découverte sur l’AppStore Achat en ligne Download/ Installation implicite Mises à jour automatisées
  30. 30. Rémunération de l’application • Deux modes : • Achat de l’application • Achat «In App» • A chaque fois : 30% pour le diffuseur
  31. 31. Un monde en perpétuelle évolution • iOS + iPhone : un par an • A surveiller : keynotes annuelles (en septembre pour l’iPhone) • Android : un par an (+ de multiples devices) • A surveiller : Google I/O • Comme souvent, le marché US est précurseur des évolutions en Europe
  32. 32. Les applis à venir • M-commerce • Réalité augmentée • Interactions multi-plateformes • ...
  33. 33. L’eldorado de la réalité augmentée • La puissance de calcul des téléphones permet aujourd’hui des traitements inédits sur un device mobile
  34. 34. Réalité augmentée vs réalité virtuelle • La réalité virtuelle propose une immersion totale dans un monde n’existant pas • Casques immersifs, vision 3D... • La réalité augmentée permet de juxtaposer sur une vision de la réalité des informations supplémentaires
  35. 35. TP1 : 5 sujets d’étude • Le potentiel de la réalité augmentée • Vers la disparition des smartphones ? • Les tablettes vont elles remplacer complètement le marché du PC ? • Les différents modèles économiques de l’appstore • Bluetooth et 5G, les applications de la connectivité du futur
  36. 36. Développement d’apps mobile Du site responsive jusqu’au développement natif
  37. 37. Développement d’applications web • Historique : en 2000, le WAP (utilisation de WML, un HTML très simplifié) • Depuis 2007, les navigateurs embarqués utilisent le même moteur que leur version PC (Safari pour iPhone, Chrome pour Android...) • Apparition du responsive design en 2010
  38. 38. Design responsive • Utilisation des feuilles de style pour proposer un affichage différent entre PC, tablette, smartphone • En théorie, permet de s’adapter à n’importe quelle taille
  39. 39. Particularités d’un développement web • Multiplateformes : on repose sur les standards HTML5/CSS3 • Sans installation • Sans infrastructure particulière (idem web) • Plus abordable qu’un dév d’app mobile • Nécessité d’être connecté
  40. 40. Accelerated 
 Mobile Apps • A l’origine une technologie Open Source • Facilite l’accès au mobile via des version dégradées de HTML et Javascript • Accélère l’accès via divers caches • Essentiellement exploitée par Google qui en fait un facteur de positionnement • Devient du coup un facteur essentiel de positionnement SEO • Mais va contre la notion d’Internet neutre
  41. 41. Progressive Web Apps • Défini par Google en 2015 • Se positionne entre l’app mobile et le site responsive • Sorte d’extension « détachable » d’un site mobile • Apple tarde à suivre…
  42. 42. Capacité d’une PWA • Utilisation hors ligne • Temps de chargement rapides et asynchrones • Notifications push • Icône sur l’écran d’accueil • Gestion de l’orientation d’écran • Géolocalisation
  43. 43. Développer une appli mobile • Un vrai travail de développeur • Basé sur des environnements spécifiques • iOS : Swift + XCode • Android : Java + Android Studio
  44. 44. App vs Web App Web Parfaitement intégré au tél Simplicité de développement Facilité d’installation Réutilisation infra web Référencement via le store Implicitement ouvert aux autres Nécessité d’un AppStore Intégration moins forte à l’IHM Développement complexe Nécessite d’être online
  45. 45. Applications hybrides • Utilisation d’un environnement de développement unique pour les deux plateformes • IONIC • React • VueJS • …
  46. 46. Architecture d’une app hybride Codage unique : - soit avec des technos web (HTML/CSS/JS…) - soit avec un métalangage Génération codes natifs Compilation via XCode Compilation via Android Studio iOS Android
  47. 47. Spectre des possibilités Web mobile Responsive Dév natif Dév hybride Progressive Web Apps AMP Web App
  48. 48. Responsive design Un peu de responsive, beaucoup de CSS
  49. 49. CSS pour mobile • Le duo HTML/CSS est tout à fait adapté pour un affichage sur téléphone mobile • Le HTML représente le contenu • Le CSS le met en forme (couleur, taille, positionnement à l’écran…) • Tous les éléments HTML s’affichent tout à fait correctement sur mobile
  50. 50. CSS adaptatif • Idée majeure du responsive : rendre le CSS multifacette en fonction du device • En fait, cette idée a toujours existé au sein du CSS • Mais au départ, plutôt pour des médias style print
  51. 51. Les medias queries @media screen and (max-width: 480px) { nav { display: block; width: 100%; } } Bloc représentant un sous-ensemble du code CSS Support sur lequel s’appliquera le(s) style(s)
  52. 52. Structure générale du CSS modifié p { … } …
 @media screen and (max-width: 480px) { … }
 @media screen and (max-width: 1024px) { … } … Styles par défaut Surcharge des styles par médias
  53. 53. Insertion dans le code HTML <html> <head> <link rel="stylesheet" type="text/css" href="monstyle.css"> <meta name="viewport" content="width=device-width" /> </head> <body> … </body> </html> Zoom adapté à la page Insertion du fichier .css
  54. 54. Structuration en plusieurs fichiers CSS @import url("fineprint.css") print; @import url("bluish.css") projection, tv; @import 'custom.css'; @import url('landscape.css') screen and (orientation:landscape); @import url(‘mobile.css’) screen and (max-width: 480px); • Il est possible d’insérer plusieurs fichiers CSS à partir d’un fichier CSS “maître” • En faisant des import par media, on conditionne leur chargement, et ainsi on optimise le volume de données à charger
  55. 55. Structuration des pages avec Bootstrap • Les media queries CSS permettent d’adapter le look d’une page à son média • Mais pour structurer la mise en page (blocs, paragraphes, etc…) il vaut mieux utiliser Bootstrap, qui regroupe de multiples outils adaptés à cette structuration
  56. 56. Insertion de Bootstrap <html> <head> <link rel="stylesheet" type="text/css" href="monstyle.css"> <meta name="viewport" content="width=device-width" /> <link rel="stylesheet" href=“https://maxcdn.bootstrapcdn.com/bootstrap/ 3.3.7/css/bootstrap.min.css”> 
 </head> <body> …
 <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script>
 <script src=“https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/ bootstrap.min.js”></script> </html> Récupérer le code exact sur http://getbootstrap.com
  57. 57. Structure de base d’un HTML Bootstrap <div class="container"> <div class="row"> <div class="col"> Colonne 1 </div> <div class="col"> Colonne 2 </div> <div class="col"> Colonne 3 </div> </div> </div>
  58. 58. Grids bootstrap • Bootstrap ordonnance les éléments sous forme de grille, lignes puis colonnes • Chaque grille est en fait multiple • On peut définir, pour chaque ligne, le nombre de colonnes en fonction du media
  59. 59. Exemple de grille Bootstrap • Une grille est basée sur • Des lignes • 12 colonnes par grille • Chaque “bloc” peut prendre plusieurs colonnes • Exemple de ligne avec 3 colonnes :
  60. 60. Exemple de grille mixte • Mélange de trois types de blocs : • Mobile ( “.col-12”) • Tablette (“.col-sm-6”) • Desktop (“.col-lg-8”) • D’autres exemples sur http://getbootstrap.com/docs/4.0/examples/grid/ Mobile first !
  61. 61. Les différents médias définis par Bootstrap Préfixe - sm md lg xl Largeur max 576px 768px 992px 1200px >1200px Nom extra small small medium large xtra large Ex de style .col-12 .col-sm-8 .col-md-6 .col-lg-4 .col-xl-4
  62. 62. Exercice 1 : portfolio • Créer avec HTML, CSS, Bootstrap une page permettant d’afficher une grille de portfolio avec des tailles multiples d’images Extra track : utilisation de https://isotope.metafizzy.co
  63. 63. Exercice 2 : blog • Créer avec HTML, CSS, Bootstrap une page affichant un blog sur 3 colonnes • La version tablette (1024px) ne devra en afficher que deux • La version mobile affichera le tout verticalement et sans barre du haut
  64. 64. Progressive web apps Entre web et app, une alternative qui peut devenir grande ?
  65. 65. PWA : Google sort du marché des apps • Idée : reprendre toutes les briques de HTML5 + d’autres et simuler ce qu’est une app.. dans un navigateur web • Offline, géolocalisation, icône sur le bureau.. • Google est à l’initiative • Apple tarde à suivre
  66. 66. Quelques exemples • A exécuter sur Chrome ! • Mise en cache de pages Wikipedia • https://wiki-offline.jakearchibald.com • Prise de notes • https://sii.im/playground/notes/ • Média proposant un mode offline complet • https://app.ft.com/ ou www.lequipe.fr • D’autres sur https://pwa.rocks
  67. 67. En coulisses • Responsive design pour l’interface • Web Services et Web sockets pour accéder aux serveurs sans passer par HTTP • API d’accès aux fonctions avancées (géoloc, audio, vidéo, vibrations, accéléromètres..)
  68. 68. Tâches de fond • Service Workers : permet de gérer le cache entre navigateur et serveur • Web Workers : permet des traitements de fond (calcul…)
  69. 69. Etat des lieux des implémentations Source : Clever Age
  70. 70. Mise en pratique • https://codelabs.developers.google.com/ codelabs/your-first-pwapp • Nécessite Google Chrome • et aussi d’installer Web Server for Chrome
  71. 71. Mécanismes mis en place • Affichage météo • Chargement asynchrone des données • Stockage local du paramétrage (liste de villes à afficher) • Mode offline pour les pages • Mode offline pour les données • Icône sur le bureau
  72. 72. Icône sur le bureau • Deux mécanismes différents • Sur Android, rendu disponible automatiquement à la deuxième utilisation • Sur iOS, hack Javascript
  73. 73. 3 GROUPES, 3 SUJETS • Application touristique • TV connectée, montres connectées, ubiquité numérique : application multiplateforme • Réalité augmentée et géolocalisation
  74. 74. A rendre • Présentation orale + support éventuel à chaque étape • 3 axes à prendre en compte : • technique : présentation et justification des choix techniques • business : offres et modèles économiques • Fonctionnalités : ce qu’on choisit de faire...et de ne pas faire
  75. 75. Différentes étapes de la création 1. Définition du concept, et du périmètre des fonctionnalités 2. Cahier des charges 3. Mockups d’interface 4. Maquette responsive 5. Définition des API 6. Conception de l’application

×