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

1. Internet mobile
Jean David Olekhnovitch - jd@olek.fr
Version du 10/11/2017

2. L’ancêtre du
Smartphone : le PDA
• Personal Digital Assistant
• Assistant de poche
(agenda, carnet d’adresses..)

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. 2007 : le tournant de
l’iPhone

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. 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. 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. 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. 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. 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. 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

13. Source : Numérama

14. Au delà du téléphone
mobile
Les nouveaux médias

15. La tablette : remplaçant
du PC ?

16. 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

17. 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

18. Un marché bien
particulier

19. Une croissance
hypothétique

20. 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

21. Le hardware
aujourd’hui
• 4G/WiFi/Bluetooth
• GPS systématique (+triangulation)
• Accéléromètre (+gyroscope..)
• Caméra frontale
• Appareil photo+vidéo 4K

22. 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

23. 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...)

24. 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é

25. 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

26. 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

27. 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

28. 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é

29. 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é

30. 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

31. Rémunération de
l’application
• Deux modes :
• Achat de l’application
• Achat «In App»
• A chaque fois : 30% pour le diffuseur

32. 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

33. Les applis à venir
• M-commerce
• Réalité augmentée
• Interactions multi-plateformes
• ...

34. 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

35. 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

36. 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

37. Développement
d’apps mobile
Du site responsive jusqu’au
développement natif

38. 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

39. 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

40. 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é

41. 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

42. 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…

43. 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

44. Développer une appli
mobile
• Un vrai travail de développeur
• Basé sur des environnements spécifiques
• iOS : Swift + XCode
• Android : Java + Android Studio

45. 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

46. Applications hybrides
• Utilisation d’un environnement de
développement unique pour les deux
plateformes
• IONIC
• React
• VueJS
• …

47. 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

48. Spectre des possibilités
Web
mobile
Responsive
Dév
natif
Dév
hybride
Progressive
Web Apps
AMP
Web App

49. Responsive design
Un peu de responsive, beaucoup de CSS

50. 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

51. 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

52. 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)

53. 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

54. 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

55. 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

56. 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

57. 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

58. 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>

59. 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

60. 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 :

61. 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 !

62. 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

63. 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

64. 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

65. Progressive
web apps
Entre web et app, une alternative
qui peut devenir grande ?

66. 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

67. 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

68. 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..)

69. Tâches de fond
• Service Workers : permet de gérer le cache
entre navigateur et serveur
• Web Workers : permet des traitements de
fond (calcul…)

70. Etat des lieux des
implémentations
Source : Clever Age

71. Mise en pratique
• https://codelabs.developers.google.com/
codelabs/your-first-pwapp
• Nécessite Google Chrome
• et aussi d’installer Web Server for
Chrome

72. 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

73. Icône sur le bureau
• Deux mécanismes différents
• Sur Android, rendu disponible
automatiquement à la deuxième
utilisation
• Sur iOS, hack Javascript

74. 3 GROUPES, 3 SUJETS
• Application touristique
• TV connectée, montres connectées,
ubiquité numérique : application
multiplateforme
• Réalité augmentée et géolocalisation

75. 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

76. 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