Loading presentation...

Present Remotely

Send the link below via email or IM

Copy

Present to your audience

Start remote presentation

  • Invited audience members will follow you as you navigate and present
  • People invited to a presentation do not need a Prezi account
  • This link expires 10 minutes after you close the presentation
  • A maximum of 30 users can follow your presentation
  • Learn more about this feature in our knowledge base article

Do you really want to delete this prezi?

Neither you, nor the coeditors you shared it with will be able to recover it again.

DeleteCancel

Make your likes visible on Facebook?

Connect your Facebook account to Prezi and let your likes appear on your timeline.
You can change this under Settings & Account at any time.

No, thanks

Mobile : enjeux, solutions...

Plusieurs raisons peuvent motiver le développement du canal mobile pour une entreprise. Dans ce cours, nous analysons le marché du mobile et les solutions possibles (site web mobile, appli native, appli hybride, site web Responsive Web Design)
by

Pierre Le Roux

on 17 January 2016

Comments (0)

Please log in to add your comment.

Report abuse

Transcript of Mobile : enjeux, solutions...

Mobile : Enjeux et solutions
Pierre Le Roux
Responsable informatique Média Courtage
Diplômé de l'UBO en 2004

Chef de projet chez Capgemini pendant 7 ans
Clients : Ifremer, Orange, SFR et Arkéa

Spécialisé en architectures J2EE et Système d'Information

Moi
fr.linkedin.com/in/pilerou/
pilerou@gmail.com
Master 2 DOSI
Développement de l'Offshore
des Systèmes d'Information

Durant ce cours...
... des
statistiques
: pour mieux comprendre les

tendances du marché et l'utilisation des mobiles
... les
solutions techniques
pour proposer des services à des utilisateurs sur mobile

Application mobile, Site web mobile...
... des
cas d'utilisations
, des exercices pour apprendre à développer sur les différents media

Android, JQuery Mobile, PhoneGap, Responsive Web Design ...
... Une
synthèse
des enjeux, des problématiques fréquentes sur ces développements

Tracking, Monitoring, expérience utilisateur, coût...
... Une
méthode d'éligibilité
de la solution technique en fonction du contexte du service à fournir

Définir la solution adéquate selon plusieurs critères
Tendances du marché mobile
Avant 2007 et l'arrivée de l'Iphone, les technologies n'ont jamais été au niveau des attentes des utilisateurs et des fournisseurs de services :
WAP
I-mode

Raisons :
Lenteur du réseau mobile
Téléphones conçus pour téléphoner et pas pour autre chose
Design des écrans WAP fournissant peu de convivialité
Faible part de détenteurs de téléphones utilisant des fonctionnalités Internet
Peu d'offre de services adaptés au mobile et peu de rentabilité pour les entreprises


Le WAP... un business très confidentiel
Premier Iphone : 2007
Premier mobile Android (HTC Dream) : 2008

Nouveaux mobiles en phase avec une amélioration du réseau :
3G en 2004
3G+ (UMTS) en 2010

Applications embarquées sur le mobile plus répandues et mieux conçues
Possibilité d'utiliser les applications offline avec synchronisation

==> Démocratisation des applications
==> Offre des (vrais) forfaits avec Internet mobile
==> Intérêt économique viable pour les entreprises d'investir dans les technologies mobiles
Apparition de l'Iphone et d'Android...
Internet sur mobile
Des utilisations qui évoluent
Modification des habitudes des utilisateurs : "always connected"
Réseaux sociaux, casual gaming...

Des mobiles ultra-performants :
Aussi performants que les PC
Ils savent tout faire et ouvrent des opportunités aux développeurs
GPS
Capteurs en tout genre...

Développement des tablettes ==> Augmentation des parts de marché par rapport aux PCs

Pour les entreprises web, développer le mobile n'est plus seulement un choix stratégique. C'est souvent une question de survie.
Les mobiles et tablettes remplacent les ordinateurs dans les foyers
Évolution de l'utilisation des mobiles
Les statistiques d'utilisation du mobile
Aujourd'hui, plusieurs solutions pour répondre à un besoin d'interaction avec des utilisateurs mobile

Avant de lancer son business sur mobile, il est important de :
comprendre les usages du mobile et les tendances du marché
cibler ses utilisateurs
définir la solution la plus adéquate pour mieux maîtriser les coûts et le Retour Sur Investissement (ROI)

Plusieurs sources de statistiques sur les usages lié au mobile :
Une synthèse des rapports disponibles :
http://www.smartinsights.com/mobile-marketing/mobile-marketing-analytics/mobile-marketing-statistics/
Les statistiques fournies par Google :
http://www.thinkwithgoogle.com/mobileplanet/en/
Ne pas de précipiter sur le code...
Bien comprendre le marché
42 %
des de la population française (de plus de 16 ans) a un smartphone contre
38 %
en 2012
Les ventes de mobile et tablettes ont dépassé les ventes de PC

Les smartphones sont un portail multi-activités
87 %
des utilisateurs de smartphones exploitent leur smartphone pour
garder le contact
: mail, réseaux sociaux, messagerie instantée...

70 %
suivent les
actualités

92 %
l'utilisent pour les
divertissements
: jeux, musique, vidéos...

Les smartphones sont utilisés partout :
97

%
à la maison
82 %
dans un magasin
80 %
au travail
Quelques chiffres... d'utilisation en 2013
76%
Au bar
36 %
en cours
Nombre d'applications téléchargées en moyenne par personne

32
applications installées

12
applications utilisées lors du dernier mois

4
applications payantes installées
Quelques chiffres... sur le business mobile
80 %
du temps passé sur mobile est sur des
applications
contre
20%
sur navigateur internet
Les sites web n'ont-ils aucun avenir sur mobile ?
Se méfier des chiffres...
Activités les plus consommatrices de temps sur mobile : jeux, réseaux sociaux...
Pour acheter sur Internet sur un besoin spécifique, le navigateur est davantage utilisé.
Sur leur mobile
51%
des utilisateurs de mobiles font des recherches :
64%
d'entre eux sur des produits
48%
recherchent des restaurants, cafés, bars...
35%
prospectent pour leur prochain voyage
21 %
s'intéressent à l'immobilier
20 %
recherchent un emploi
Quelques chiffres... le business mobile... pour quelles activités ?
L'application mobile embarquée n'est pas la solution à tout.
Selon le domaine d'activité, l'investissement dans les technologies mobiles est plus ou moins pertinent.
Pour certains secteurs, c'est incontournable
Pour d'autres, ça le sera bientôt. Il faut donc continuer à observer le marché... et être précurseur.
Les utilisateurs de smartphones effectuent des actions suite à des recherches d'informations locales

45%
ont contacté l'entreprise

59%
s'y sont rendus (magasins, restaurants...)

38 %
ont effectué un achat sur ce lieu de vente

26%
ont déjà fait des achats en ligne directement sur mobile

37 %
achètent parfois sur ordinateur après recherche sur mobile

45 %
de ceux qui achètent sur mobile le font au moins une fois par mois
Quelques chiffres... Vendre sur mobile
Le mobile offre un nouveau canal
d'apport d'affaires pour les entreprises
Les utilisateurs se plaignent (et donc n'achètent pas) car :
L'écran est trop petit pour une expérience agréable
Ils craignent pour leurs données : sécurité des saisies de cartes bancaires...
La saisie des informations est difficile
Ils ne sont pas habitués avec l'interface des smartphones
Les pages web trop longues à s'ouvrir
Des freins à la vente à prendre en considération
Les concepteurs (ergonomes , designers, développeurs) doivent apporter des solutions pour limiter les effets de ces freins à la vente à l'utilisation des interfaces mobile.
Choisir la solution technique
Enjeux du développement mobile
Développer un nouveau canal de communication a un coût
de mise en œuvre
de maintenance : en plus du site web... il conviendra désormais de maintenir un canal mobile
Assurer la portabilité de l'application sur différentes plateformes :
Systèmes différents : Iphone, Android, Blackberry, Bada, Windows Phone...
Taille des devices : téléphone, tablette,
Résolutions d'écrans différentes selon les appareils
Garantir les performances en optimisant les ressources de l'appareil et les interactions avec des systèmes répartis
Répondre à des règles ergonomiques et de navigation standards ==> Complexité : les règles sont différentes selon les systèmes
Site web
pour mobile

Application embarquée mobile native
Application embarquée hybride
Site web
Responsive
Web
Design

Nécessité de répondre à plusieurs questions :
Mes utilisateurs ont-ils besoin d'exploiter quotidiennement mon service sur leur mobile ?
Quel est mon budget pour développer ce canal ?
Quel est le Retour Sur Investissement escompté ?
Mes clients sont-ils des utilisateurs de mobiles ?

Mais c'est aussi une question technique
Mes développeurs sont-ils "à l'aise" avec la technologie mobile ?
Quelle est le niveau de performance que je vise ?
Je déploie sur téléphone ou aussi sur tablette ?
...

et ça conditionne le budget...
Plusieurs solutions sont alors possibles
Principe de base du site mobile
Une personne utilise son mobile, ouvre son navigateur ou est redirigée vers un lien
Un appel http se fait vers un serveur web distant
Le serveur web distant distribue un fichier html, CSS, js... exactement comme pour un site web standard
La différence ?
Le style du site web est adapté et dédié à une navigation sur mobile.
Opportunités...
Nécessité d'optimiser la navigation des utilisateurs mobile sur notre site dans le but de leur fournir un meilleur service
Quand développer un site mobile ?
Optimiser pour améliorer les ventes !
Autrement dit :
Récurrence des visites modérée
(1 fois par mois, par an...)
Éviter d'avoir besoin de télécharger une application embarquée
Besoin d'accès direct à la fonctionnalité
Chaque action fastidieuse et sans valeur fait sortir une part des utilisateurs du "tunnel" !
Moins de ventes !
Les caractéristiques technologiques
Développement HTML5, CSS3 et JS

Navigateur
Pas de nécessité de couvrir les navigateurs web des PCs ou anciennes versions d'Internet Explorer (7-8)
Navigateurs mobiles basés sur Webkit
Beaucoup de disparités entre les versions de navigateurs mobile et problèmes d'implémentation des normes HTML5 et CSS3
==> Exemple : gestion des 3D transforms, support de SVG...
http://caniuse.com/transforms3d
http://caniuse.com/svg
Nécessité de gérer les spécificités et
de connaître les disparités de plateforme
L'ennemi n°1 du site web mobile ?
...
...
La lenteur !
Les raisons :
Le réseau mobile moins performant que le réseau ADSL...
Les conséquences pour le développeur
Pas si simple de faire un site web mobile agréable
Les solutions techniques
Les frameworks web/js orientés mobile peuvent répondre à une ou plusieurs problématiques :
présenter un thème orienté mobile
gérer des transitions mobile (slide, pop...) lors des changements de page
gérer la navigation entre les pages
rechercher et manipuler les élements DOM de la page
effectuer des accès aux données : REST, stockage local...
assurer le binding automatique des éléments de la page
la compatibilité selon le mobile et le navigateur
Gérer les disparités entre devices (tailles d'écran, version de navigateur...)
Des mobiles moins performants que les postes fixes
Une gestion des clicks différente :
"Touch event" au lieu de "Click event"
==> Le navigateur attend 300ms à chaque pression sur un bouton avant de déclencher l'évenement onclick (attente pour vérifier qu'il ne s'agit pas d'un double clic)
==> Réaction moyenne ressentie par l'utilisateur
Limiter le nombre d'appels aux serveurs
Limiter le poids des pages
Éviter au navigateur de devoir redimensionner les images (coûteux en ressources du mobile)
Limiter le nombre d'opérations sur le DOM (recherche de balises...)
Limiter la taille du DOM (nombre de balises)
Pré-charger des pages en asynchrone
Stocker les données récupérées en local
Utiliser des solutions pour éviter les 300ms de latence sur clic : FastClick.js (
https://github.com/ftlabs/fastclick
)
Enjeux des frameworks
Sur la durée, gain de productivité à utiliser un framework
La plus grande difficulté : choisir le(s) framework
Pour ne pas dégrader la performance, ne pas intégrer trop de frameworks
Cartographie des frameworks
Quels sont les frameworks ?
Pas de nécessité d'accéder aux fonctions natives du mobile : contacts, GPS, caméra...
Thème
Transitions
et animations
Routing
Data binding
Manipulation DOM
Templates de pages
iScrolljs
{{mustache}}
Comment déterminer le(s) frameworks à utiliser ?
Alors quel framework choisir ?
Tout dépend du besoin :
Application web mobile devant fonctionner uniquement sur IOS ?
puis si nécessaire d'autres frameworks
Application web mobile devant fonctionner sur tous les navigateurs mobiles sans besoin de transitions ou animations...
rendu moins marqué IOS ou Android... Plus neutre
Alors quel framework choisir ?
Application web mobile devant fonctionner sur tous les mobiles avec un rendu (animations, transitions) très proches des applications mobiles embarquées
ou un autre framework qui fournit le même service
Plusieurs critères pour choisir :
le prix de la solution technique
la facilité de développement
la couverture des plateformes
les performances variables des solutions
la réutilisation envisagée dans le site web ?
l'activité de la communauté autour du framework
Focus sur Jquery Mobile
Avantages :
Couvre l'ensemble des besoins d'une navigation sur mobiles
Bénéficie d'une communauté importante
Gratuit
Couverture d'un grand nombre de mobiles et des différences entre les navigateurs
Documentation riche et outils permettant d'adapter le thème
Peut aussi être exploité pour une navigation web standard
Préoccupations :
Couverture importante... mais à trop couvrir, cela amène des lenteurs...
JqueryMobile transforme le DOM du fichier HTML en rajoutant des niveaux intermédiaires à la lecture du flux : problèmes de performances et de styles
Démarrer sur Jquery Mobile
Contenu de base :
1 JS Jquery 1 ou 2.0 (si couverture uniquement sur mobile)
1 JS JqueryMobile
des fichiers CSS
des images en SVG et PNG
Site :
http://jquerymobile.com/
Contenu personnalisé :
Possibilité de construire le JS en fonction de l'utilité :
http://jquerymobile.com/download-builder/
Possibilité de personnaliser le thème CSS :
http://themeroller.jquerymobile.com/
Coder en Jquery Mobile
Structure d'une application web mobile JQuery Mobile :
<!DOCTYPE html>
<html>
<head>
<title>Page Title</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.css" />
<script src="http://code.jquery.com/jquery-[version].min.js"></script>
<script src="http://code.jquery.com/mobile/[version]/jquery.mobile-[version].min.js"></script>
</head>

<body>

Contenu
</body>
</html>
Déclaration pour que le contenu s'adapte à la largeur de l'écran
Import du style de JqueryMobile
Import du Javascript de Jquery et de JqueryMobile
Coder en Jquery Mobile
Une simple page
<body>
<div data-role="page">
<div data-role="header">
...
</div>
<div role="main" class="ui-content">
...
</div>
<div data-role="footer">
...
</div>
</div>
</body>
Coder en Jquery Mobile
Gérer plusieurs pages... dans un seul fichier html
<body>
<div data-role="page" id="page_accueil">
<div data-role="header"><h1>Accueil</h1></div>
<div role="main" class="ui-content">
<p>Première page affichée dès le début.</p>
<p>Appel de la <a href="#page_deux">page 2</a></p>
</div>
<div data-role="footer"><h4>Page Footer</h4></div>
</div>

<div data-role="page" id="page_deux">
<div data-role="header"><h1>Page 2</h1></div>
<div role="main" class="ui-content">
<p>Cette zone n'est pas affichée au début. Nous sommes sur la deuxième page.</p>
<p><a href="#page_accueil">Retour à l'accueil</a></p>
</div>
<div data-role="footer"><h4>Page Footer</h4></div>
</div>
</body>
Affichage de la page d'accueil : première <div> avec pour "data-role" : "page"
La deuxième page est présente dans le DOM mais n'est pas affichée à l'écran
Le lien permet d'atteindre la page 2 par un système de fragment (#)
Le lien permet de revenir à la page d'accueil
Coder en Jquery Mobile
Gérer plusieurs pages... par des liens
page_accueil.html
...
<body>
<div data-role="page" id="page_accueil">
<div data-role="header"><h1>Accueil</h1></div>
<div role="main" class="ui-content">
<p>Première page affichée dès le début.</p>
<p>Appel de la <a href="page_deux.html">page 2</a></p>
</div>
<div data-role="footer"><h4>Page Footer</h4></div>
</div>
</body>
Affichage de la page d'accueil
La deuxième page est interprêtée et ajoutée dans le DOM de la page
En cliquant sur le lien, JQueryMobile le traitement suivant
Le lien permet de revenir à la page d'accueil et ce sans télécharger la page d'accueil car déjà présente dans le DOM
Multi Page Template
Single Page Template
page_deux.html
...
<body>
<div data-role="page" id="page_eux>
<div data-role="header"><h1>Page 2</h1></div>
<div role="main" class="ui-content">
<p>Cette zone n'est pas affichée au début. Nous sommes sur la deuxième page.</p>
<p><a href="page_accueil.html">Retour à l'accueil</a></p>
</div>
<div data-role="footer"><h4>Page Footer</h4></div>
</div>
</body>
Document
...
<body>
<div data-role="page" id="page_accueil"
data-url="/page_accueil.html" class="ui-page ..."
>
<div data-role="header"
class="..."
>><h1>Accueil</h1></div>
<div role="main" class="ui-content">
<p>Première page affichée dès le début.</p>
<p>Appel de la <a href="page_deux.html">page 2</a></p>
</div>
<div data-role="footer"
class="..."
>><h4>Page Footer</h4></div>
</div>















</body>
Affichage de la page page_accueil.html
==> Ajout du contenu dans le DOM du navigateur
Clic sur le lien vers page_deux.html
Interception JS du changement de page par Jquery Mobile
Téléchargement de la page page_deux.html par les scripts JS de Jquery Mobile
Ajout du contenu HTML obtenu dans page_deux.html à l'intérieur du DOM et dans les mécanismes Jquery Mobile
Jquery Mobile masque la div principale (data-role="page") de la page d'accueil
Jquery Mobile affiche la div principale (data-role="page") de la page page_deux.html
<div data-role="page" id="page_accueil"
data-url="/page_deux.html" class="ui-page ..."
>
<div data-role="header"
class="..."
><h1>Accueil</h1></div>
<div role="main" class="ui-content">
<p>Cette zone n'est pas affichée au début. Nous sommes sur la deuxième page.</p>
<p><a href="page_accueil.html">Retour à l'accueil</a></p>
</div>
<div data-role="footer"
class="..."
><h4>Page Footer</h4></div>
</div>
Éviter de bricoler une solution maison non maintenue
Coder en Jquery Mobile
Gérer les transitions
Jquery Mobile propose d'effectuer les changements de pages via des transitions
http://demos.jquerymobile.com/1.4.0/transitions/
Ces transitions peuvent être effectuées sur des changements de pages, des ouvertures de Dialog box ou de popup.
Les transitions peuvent être configurées directement sur les liens des pages WEB
<a href="page-transitions-page.html"
data-transition="pop"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline">page</a>
Ouverture d'une page avec la transition pop
<a href="page-transitions-dialog.html" data-rel="dialog"
data-transition="flip"
class="ui-btn ui-corner-all ui-shadow ui-btn-inline">dialog</a>
Ouverture d'une dialog box avec la transition flip
Les frameworks
Coder en Jquery Mobile
Single page ou Multi Page ?
User fact : Le temps de chargement de la première page est déterminant sur le nombre d'utilisateurs qui continuent à utiliser l'application
Si les transitions entre les pages sont trop longues et que cela nuit à la navigation, les utilisateurs quittent l'application
==> Single page alors !
Oui... mais :
==> Multi page alors ?
Il faut utiliser les deux selon la probabilité d'utilisation de la page.
Autre solution : le prefetching !
<a href="../pages-dialog/dialog-alt.html" data-prefetch="true">This link will prefetch the page</a>
Après les chargement d'une page, toutes les pages pointées par des liens disposant de l'attribut data-prefetch="true" sont chargées en différé
Coder en Jquery Mobile
Des composants graphiques
Une vaste librairie de composants graphiques
http://demos.jquerymobile.com/1.4.0/
Coder en Jquery Mobile
Naviguer en Javascript
$.mobile.navigate( "#page_deux", {
param1: "un paramètre"
...
});
Effectuer un traitement à l'affichage de la page
$( window ).on( "navigate", function( event, data ) {
// Modifier le contenu
});
Cas d'utilisation exercice 2
/accueil.html
Service
cloud
popup_un
page_accueil
Lien vers popup_un
Lien vers /page_deux/html
avec prefetch
Lien vers /page_trois.html
sans prefetch
/page_deux.html
page_deux
Affichage de la valeur du champ de saisie
Champ de saisie
Lien de retour à la page d'accueil
/page_trois.html
page_trois
Appel à un service cloud en transmettant la valeur du champ de saisie de la page d'accueil
Affichage de la page
Lorsque le résultat du service cloud est obtenu, on affiche le résultat à l'écran
Prefetch
Simple
lien
Bonnes pratiques de cinématique
Ne pas attendre les résultats des services distants pour naviguer vers la page.

Lors d'un clic visant à effectuer un appel serveur et afficher une page qui affiche le résultat, il faut effectuer l'appel au service REST en asynchrone, naviguer tout de suite vers la page cible qui présentera un message d'attente puis lorsque le résultat sera obtenu du webservice, la page sera mise à jour.

Les pages sont si possibles des pages statiques. Le dynamisme est géré côté client en interprétant le résultat des services REST.
Exercice pratique 2
Déployer un serveur REST Hello world
Télécharger les sources de base JQuery Mobile
https://github.com/pilerou/masterdosi-helloworld-nodejs
==> Suivre la procédure du README.md
Exercice pratique 1
Utiliser le principe du Multi-Pages Template
https://github.com/pilerou/masterdosi-jquerymobile/multipages-templates
==> Suivre la procédure décrite dans le README.md du projet
Utiliser le principe du single-Page Template
https://github.com/pilerou/masterdosi-helloworld-nodejs
==> Suivre la procédure du README.md
Application embarquée ?
Le site web mobile est visualisé dans le navigateur du téléphone ou de la tablette
L'application embarquée est une application installée sur le téléphone exécutable via un icône sur le "bureau" du téléphone
Les applications sont téléchargeables sur des "stores" propres à chaque plateforme.
iOS
Iphone...
Apple
Android
Store
Système
Devices
Editeur
...
Samsung...
Google
Blackberry
Blackberry
Blackberry
Autre solution ?
Non
Oui
Non
Les plateformes
http://www.idc.com/getdoc.jsp?containerId=prUS24442013
Android
iOS
Windows Phone
Blackberry
Others
Chaque plateforme a son langage de programmation.
Android a pris énormément de parts de marché ces dernières années
Parts de
marché
Langage
Environnement
81%
13%
3,6%
1,7%
0,6%
JAVA
Objective C
HTML5, JS,
C#, C++
JAVA ME
Tous
Apple iOS
Windows
Tous
Intérêts d'une application native
Installée une fois, elle est exploitable rapidement par l'utilisateur (pas de téléchargement d'applicatif supplémentaire)
Codée dans le langage natif de la plateforme, elle offre une expérience utilisateur plus agréable que le site web mobile :
la navigation et les transitions sont plus fluides
les fonctionnalités natives de la plateforme peuvent être utilisées : caméra...
les performances du device sont mieux gérées
Les appels aux serveurs de données ne sont nécessaires que pour obtenir des informations.
Les styles, les traductions... sont déjà embarquées dans l'application
Préoccupations
Plusieurs plateformes...
Si on développe une application native, cela signifie :
développer une application pour chaque plateforme visée
disposer d'un développeur spécialisé dans chaque plateforme
connaître les standards ergonomiques qui diffèrent
connaître les règles d'acceptation de distribution des applications sur les stores (différentes selon iOS, Android...)
Le phénomène
Android
Le système Android
des applications développées sur des couches techniques
Système d'exploitation basé sur un Kernel Linux
Linux Kernel
Dalvik
VM
Drivers : caméra, affichage, wifi...
Gestion de la batterie...
Core libs
Librairies
lib C/C++ : Sqlite, Webkit, libc,
SSL, FreeType, OpenGL,
Surface manager...
Application framework
lib Java : d'accès aux fonctions du système
Activity Manager, Telephony Manager...
Les applications
Applications de base : Contacts, Phone...
Applications téléchargées
Parts de marché
Plus d'un milliard de terminaux Android activés
1,5 millions d'activations par jour
Le développeur doit choisir entre :
couvrir un maximum de versions sans pouvoir utiliser toutes les dernières fonctionnalités
et couvrir les dernières versions et se limiter en terme de nombre d'utilisateurs
Développement d'apps
Développement en JAVA sur toute plateforme
Mise à disposition d'un SDK open-source
L'environnement a juste besoin d'être dézippé :
http://developer.android.com/sdk/index.html
Un site avec documentation, tutoriaux, exemples... :
http://developer.android.com/develop/index.html
Des environnements de développements éprouvés :
Eclipse : Android Developer Tools (ADT)
Intellij IDEA : Android Studio
Un émulateur intégré
Possibilité d'utiliser un autre émulateur plus performant :
Android Developer Tools
Applications
studio.sh
==> développer avec une version IntelliJ spécifique pour Android
SDK Manager
: Choisir et télécharger les versions Android sur lesquelles vous testerez
Structuration et orchestration d'une application
AndroidManifest.xml
Descripteur de l'application : AndroidManifest.xml
Le Manifest est à l'application Android ce que le web.xml est à la webapp
les
versions
Android, les
tailles d'écran
supportées....
les
permissions
dont l'application aura besoin : Internet, caméra, contacts...
le chemin de l'
icône
de l'application, le
thème
...
les fonctionnalités qui seront proposées : les classes
Activity
les actions qui permettront de déclencher les
Activities :
les
Intent-filter
Il se situe à la racine de l'application et il décrit :
la classe
Activity
par défaut qui sera lancée au démarrage
les
service
,
provider
,
receiver
...
Activities
en
fr
ar_MA
Les Resources
Views et Layouts
les Activities... les Controllers de l ' application
Même S'il ne s'agit pas d'une application pure du pattern MVC, L'
Activity
est en quelques sortes un
Controller
.

Une Activity correspond à un écran sur avec lequel l'utilisateur peut interagir
Les Activities ont pout but de gérer les interactions avec l'interface graphique.
Les traitements de l'Activity sont exécutés sur le
Thread UI
de l'application
L'Activity est codée en JAVA et est une classe héritant de
android.app.Activity
.
Elle peut déléguer l'affichage et le rendu à un
Layout
(bonne pratique)... mais elle peut aussi agir sur la vue dynamiquement (créer des composants...) modifier des valeurs...
Plusieurs activités par application
Une application comporte généralement plusieurs Acitivities
Une
Activity
par écran
Une seule
Activity
est active à un instant donné
Le système Android gère la "navigation" entre les Activities dans
Back Stack
Le Back Stack détermine quand il faut supprimer une Activity en fonction des ressources du mobile. Une Activity non visible peut être purgée par le
Back Stack
à tout moment.
Evénéments liés aux Activities et cycle de vie
Des événement sont déclenchés lorsque l'activité est créée, démarrée, masquée (mise en pause), réaffichée (resume), arrêtée (stop), redémarrée (restart) ou détruite par les gestionnaire Android.

Il est possible de réaliser des traitements à chacun des changements d'état en surchargeant des méthodes de la classe Activity.
Task et conservation des informations
Le système Android peut être amené à fermer :
des Activities en pause d'une application ouverte
une application non ouverte
Android veille au bon fonctionnement du système et décide de fermer toutes les
Task
inactives lorsque les ressources le nécessitent
Avant de fermer une Activity, Android sauvegarde tous les champs de l'écran qui disposent d'un identifiant (équivalent de id= en html)

Afin de ne pas perdre d'information supplémentaire gérée par le développeur, Android appelle la méthode
onSaveInstanceState(Bundle outState)
de l'Activity.
Il est donc possible de la surcharger et d'écrire des valeurs dans le Bundle.
Au redémmarrage, la méthode
onCreate(Bundle savedState)
est appelée en transmettant les données sauvegardées
Délégation de l'affichage des écrans
Les Activities exploitent, en principe, des templates XML permettant de représenter l'écran : les
Layouts
Un écran peut être composé de plusieurs layouts qui se succèdent ou qui s'inbriquent
Thread UI et robustesse de l'application
Toutes les actions relatives aux Activities sont traitées dans un même Thread :
le Thread UI
.
Lorsqu'un traitement dure trop longtemps sur le
Thread UI
, Android peut décider de fermer l'application en erreur.
Toutes les actions, potentiellement longues doivent être traitées dans d'autres Threads
Accès base de données SQLite
Accès à un serveur web
Longs traitements de données
Android met à disposition une class
AsyncTask
pour cela
Design directement dans l'activity?
Les Layouts et les Views
Les Views sont les éléments graphiques intégrés dans les écrans :
Ce sont des classes JAVA héritant de la classe
View
Les
Layouts
sont des containers de composants graphiques permettant de structurer les objets à l'écran :
LinearLayout
: éléments alignés :
de haut en bas
ou de gauche à droite
RelativeLayout
: positionnement en fonction de l'élément précédent
...
Les
Layouts
sont des objets
View
héritant de
ViewGroup
Un écran est composé d'un layout pouvant contenir d'autres layouts ou d'autres éléments graphiques...
Concevoir des écrans pour l'application
Les écrans peuvent être construits :
en
JAVA
en instanciant une classe Layout et des objets View...
en
XML
ou via l'éditeur graphique de l'environnement de dev
Les écrans ou blocs d'écrans utilisés par l'application sont stockés dans le répertoire
res/layout
Imbriquer les layouts et les Views
Un écran est basé sur un layout principal.
Ce layout peut inclure d'autres views et layouts :
directement dans le même fichier
déclaré dans un autre fichier
déclaré dans le même fichier
déclaré dans un autre fichier
activity_imbriquee_fille
utilise des fichiers XML pour construire les écrans
Java
Externaliser les messages et les configurations
En développement
Android
comme en
JAVA
, il est conseillé de stocker tous les messages "
internationalisables
" dans des fichiers
Android permet par ailleurs de gérer des configurations en fonction de plusieurs critères :
la langue de l'utilisateur
la taille de l'écran
la version d'Android
...
Gestion des identifiants
Les éléments graphiques (champs de formulaires, listes...) peuvent comporter des identifiants
Il est intéressant de fournir un
identifiant
à toute
View
avec laquelle les
Activities
doivent communiquer (lire ou modifier la valeur)
Les identifiants sont stockés dans une classe générée
R
La Classe R est une classe générée
La classe R est générée sur la base des fichiers XML présents dans le répertoire
res
d'un projet Android
Classe R
Toutes ces ressources sont stockées dans des fichiers XML situés dans le répertoire
res
Externaliser les messages et les configurations
Exemples :
Un fichier values-fr/strings.xml contiend les messages en français
values-en/strings.xml les messages en anglais
values/strings.xml les messages par défaut
Les messages sont exploitables dans les Layouts XML
600dp
Référencement des fichiers
res/layout
Référencement des Views présentes dans les fichiers
res/layout
Référencement des chaînes de caractères stockées dans les fichiers
res/values*/strings.xml
Les menus possibles stockés dans fichiers
res/menu
alimente la classe R
alimente la classe R
Utilisation de la classe R dans les Activities
Récupération d'une chaîne de caractères :
Exploite la classe R pour manipuler les chaînes, les views, les layouts...
Resources res = getResources();
String hellowWorld = res.getString(R.string.hello_world);
La classe R ne stocke que des références vers les objets... en quelques sortes des pointeurs
Manipulation des Views (objets dans les écrans)
Button buttonVersPageDeux = (Button)findViewById(R.id.buttonPageDeux);
Button buttonVersPageTrois = (Button)findViewById(R.id.buttonPageTrois);
EditText nomText = (EditText)findViewById(R.id.nomText);
TextView pageTroisLabel = (TextView)findViewById(R.id.pageTroisLabel);

pageTroisLabel.setText("Modification de la valeur d'un TextView");
Déclencher des actions
Lorsque l'utilisateur effectue une action, on peut lancer un traitement via l'ajout d'un Listener :
Plusieurs actions sont alors possibles :
effectuer un traitement dans l'application (stockage de données...)
naviguer vers une autre Activity dans l'application
naviguer vers une autre application : lancer un appel, un SMS, ouvrir un navigateur...
Intent
Demander l'exécution d'une action revient à exprimer une INTENTION auprès d'Android. Le système détermine alors l'action à exécuter.
Ce sont les Intents
J'ai l'intention de...
... naviguer vers une fonctionnalité qui affiche le détail d'un message
... contacter par téléphone le numéro 0607080901
... visualiser une page web
... visualiser une vidéo Youtube
...
Sur Android, on n'indique pas comment on souhaite que l'action soit exécutée, on exprime une intention et on laisse le système Android faire le reste.
On émet alors un Intent
Intent
Youtube
Android
Quelle Activity peut gérer l'Intent ?
Recherche des intent-filters positionnés sur l'ouverture de Youtube
...
Récupération de la liste des applications et Activities éligibles pour traiter l'Intent
...
Y a-t-il un programme préféré par l'utilisateur pour traiter ces types de demande ?
Non
Lancement de l'Activity choisie
Oui
Proposition des applications à l'utilisateur
Lancement de l'Activity préférée
Emettre, déclarer, recevoir un Intent
Activity d'origine
Dans la méthode onCreate
Manifest de notre app
Android
PageDeuxActivity
Appel de la méthode onCreate... onStart...
PageTroisActivity
Appel de la méthode onCreate... onStart...
Ajout d'un paramètre
Récupération du paramètre
Fonctionnement des Async Tasks
AsyncTask est une classe qui propose 3 fonctions principales pouvant être surchargées :
doInBackground
: fonctionnel à exécuter en tâche de fond :
Accès base de données, Appel serveur REST...
La méthode retourne le résultat attendu lorsque le traitement est terminée
Création d'une AsyncTask
Lors de la création d'une AsyncTask, on peut définir les types d'objets qui seront utilisés :
onPostExecute
: cette méthode prend en paramètre le résultat retourné par la méthode
doInBackground
elle prend alors en compte l'information pour mettre à jour l'interface graphique...
onProgressUpdate
: cette méthode peut être surchargée pour notifier de l'avancement de l'opération
Utilisation des AsyncTask et gestion du "callback"
Un traitement effectué par une AsyncTask peut potientiellement être lancé dans plusieurs Activities.
Les modifications faisant suite à l'AsyncTask sont elles spécifiques.
Les AsyncTask n'ont par défaut pas accès au contexte de l'Activity...
Bonne pratique
Créer une classe héritant de AsyncTask dans un fichier séparé
Surcharger la méthode doInBackground dans cette classe
Instancier la classe AsyncTask dans l'Activity en surchargeant les méthodes (selon le besoin) :
onProgressUpdate
onPostExecute
en paramètre de doInBackground
en paramètre de onProgressUpdate
en retour de doInBackground et donc en entrée de onPostExecute
Héritage
Surcharge de la méthode doInBackground
Traitement
Appel REST
Retour
Dans l'Activity (ou une inner class)
Instanciation et Héritage
Surcharge
Traitement du retour

Cas d'utilisation exercice
AccueilActivity.java
Service
cloud
accueil_activity.xml
Un TextView pour dire Bonjour
Bouton vers Ecran 2
Bouton vers Ecran 3
PageDeuxActivity.java
activity_deux.xml
Affichage d'un message indiquant qu'on est sur l'écran 2
Champ de saisie
Lien de retour à l'écran d'accueil
PageTroisActivity.java
page_trois
Appel via une AsyncTask du service Cloud
Affichage d'un TextView vide qui sera alimenté au retour du traitement asynchrone
exploite le layout
Gestion du clic sur le bouton vers Ecran 2
Gestion du clic sur le bouton vers Ecran 3
HelloWorldRestAsyncTask
Appel du service Cloud
Traitement de la réponse
Lien de retour à l'écran d'accueil
Au Retour affichage du résultat dans un TextView de activity_trois.xml
exploite le layout
exploite le layout
Appel Rest
Exercice pratique Android
Correction
https://github.com/pilerou/masterdosi-helloworld-android
Les sources sont commentées pour bien comprendre les concepts.
Le besoin ?
Une entreprise veut avoir une application embarquée
Expression de besoin : il faut déployer sur Android, iOS, Blackberry, Windows Phone
Recherche google :
Réponse :
Aucun résultat n'a été trouvé ou les résultats potentiels sont des menteurs
Problématique : comment distribuer sur toutes les plateformes sans avoir besoin d'embaucher ?
le dev iOS
le dev Windows Phone
le dev Blackberry
le dev Android
Ce profil n'a
pu être trouvé
Ce profil n'a
pu être trouvé
Solution 1
Déléguer à une agence de communication ou une société de services spécialisée
Un développement pour chaque plateforme
Nécessité de disposer d'un budget très conséquent pour le développement
Nécessité de disposer d'un budget très conséquent pour la maintenance évolutive de l'application
Pas de capitalisation interne sur les développements
Nécessité de passer par la société à chaque modification
Retour sur investissement à bien étudier
Solution 2
Revoir les ambitions à la baisse
Commencer l'activité sur une seule plateforme (choix à faire par segmentation marché) ...
Solution envisageable mais pas réalisable dans tous les domaines
Exemple : une banque ne pourra pas exclure certains de ses clients par un choix technologique
... puis développer sur les autres si la réussite est au rendez-vous
Solution 3
Utiliser une solution hybride
le dev iOS
le dev Windows Phone
le dev Blackberry
le dev Android
Ce profil n'a
pu être trouvé
Ce profil n'a
pu être trouvé
le dev app Hybride
Développeur HTML5 / CSS 3 / Javascript
Connaissances ergonomiques des plateformes
Connaissances de base sur le fonctionnement des applications natives
Principe de l'app hybride
Une promesse : Développer une fois, déployer partout
Exploitation d'une solution technique servant de couche d'abstraction afin d'éviter d'avoir à gérer les spécificités de chaque plateforme (langage, environnement, permissions...)
Process commun aux solutions hybrides :
Développement dans un langage générique
Configuration générale des fonctionnalités souhaitées
Passage des sources dans le transformateur du framework choisi
Génération de packages pouvant être déployés sur les mobiles (via le store)
L'application hybride a accès à la majorité des fonctionnalités du device comme une application embarquée native :
caméra
géolocalisation...
Appcelerator Titanium
Développer avec un SDK Javascript pour une compilation en langage natif
Titanium dispose de sa propre API Javascript
Le Javascript est ensuite transformé en code source Objective C (iOS), JAVA (Android)...
Le déploiement peut alors se faire pour chaque plateforme en utilisant le SDK propre à chaque service installé sur son poste
==> Nécessité d'installer tous les environnements de développement...
Titanium propose un service Cloud pour construire les packages de chaque plateforme
==> Pas d'environnement de développement Android, iOS... à installer.
Un environnement de développement basé sur Eclipse

Chaque solution a ensuite son fonctionnement et sa philosophie qui lui est propre
http://www.appcelerator.com/titanium/titanium-sdk/
PhoneGap
Développer en HTML5 / JS / CSS3, encapsuler les sources web pour chaque plateforme, déployer
Le développeur réalise une application web avec HTML5, JS et CSS3.
PhoneGap encapsule ces sources dans une application propre à chaque plateforme en exploitant le mécanisme des WebViews
principe présent dans tous les SDK : iOS, Android...
Le développeur est donc libre de choisir le framework Javascript de son choix
PhoneGap propose par ailleurs :
une librairie Javascript permettant d'accéder aux ressources natives : accéléromètre, caméra...
un mécanisme de construction de packages et de paramétrages
permettant d'ajouter des permissions...
un service Cloud permettant de construire les packages de
déploiement sans avoir besoin d'environnement de dev
http://phonegap.com/
Comparaison
Avantages
Génère du code natif et peut donc exploiter plus de fonctionnalités natives
Transitions natives entre écrans...
Permet de réexploiter du code d'un site web mobile
Facilité de développement
Documentation
Basé sur Apache Cordova
Communauté OpenSource
Editeur
Licence
Appcelerator
Adobe
Apache 2.0 license
Apache 2.0 license
Solution émergeante
Première version pendant l'été 2013
Basé sur Cordova et Phonegap, il dispose des mêmes fonctionnalités d'accès aux devices que ces librairies
Steroids propose des transitions natives et d'autres fonctionnalités supplémentaires
La réutilisabilité à partir d'un site web est moins importante mais l'expérience utilisateur peut être meilleure
Spécificités de Steroids :
pas de construction de packages sur poste local. déploiement uniquement sur le cloud
mise à disposition d'un système de tests intéressant : mise à disposition d'une application Android et iOS permettant de capturer un flashcode et tester sur mobile l'application
Limites :
les transitions ne sont aujourd'hui que pour iOS
Steroids ne supporte que iOS et Android
Appgyver Steroids
A suivre...
http://www.appgyver.com/
Installation
Selon la page http://phonegap.com/install/ on créée une application en 4 lignes :
Un peu plus compliqué... car plusieurs pré-requis doivent être installés
Installation pré-requis
Les pré-requis suivants doivent être installés avant d'utiliser PhoneGap
Android SDK
(si on souhaite déployer sur Android pour les tests)
http://developer.android.com/sdk/index.html
Ant
(outil de déploiement)
http://ant.apache.org/bindownload.cgi
Node JS
(nécessaire pour récupérer le package phonegap)
http://nodejs.org/
Git
(exploité pour plusieurs plugins PhoneGap permettant de gérer les permissions...)
https://help.github.com/articles/set-up-git
Vérification pré-requis
On vérifie que les pré-requis sont bien installés dans une console
Windows
Linux, MAC
echo %ANT_HOME%
Ant
echo $ANT_HOME
==> La variable d'environnement doit être configurée et pointer vers le répertoire apache-ant-1.x.x installé à l'étape précédente
le PATH
echo %PATH%
echo $PATH
==> La variable d'environnement doit être configurée et référencer les répertoires :
%ANT_HOME%\bin
$ANT_HOME/bin
... Android\sdk\platform-tools
... Android\sdk\tools
... Android/sdk/platform-tools
... Android/sdk/tools
... Git\bin
... Git/bin
... nodejs
... nodejs
Ant
Android
Git
node.js
Développons autour de PhoneGap
Création de l'app
Installation de PhoneGap via Node JS

npm install -g phonegap
Création d'un projet

cd workspace
phonegap create
dosiphonegap
fr.univbrest.masterdosi MasterDosiPhoneGap
cd
dosiphonegap
Les ressources web utilisées par PhoneGap sont dans le répertoire
www
La première page chargée au démarrage de l'appli sera
www/index.html
La configuration générale de l'application (couvrant toutes les plateformes) est dans
www/config.xml
http://docs.phonegap.com/en/edge/config_ref_index.md.html
Nom et description tels qu'ils apparaîtront sur le store
Possibilité d'ajouter une abstration
X-platforms
des permissions
Généralités qui permettront de générer l'application sur les différentes plateformes
config.xml
=
et mes applications iOS Android... ???
Mon projet contient du web... Où est le fichier APK pour déployer sur Android ?
Nulle part pour l'instant... Il faut ajouter le support pour les plateformes ciblées : iOS, Android...
Contenu du projet après ajout de plateforme
L'ajout d'une plateforme supportée ajoute des fichiers dans le projet
plugins/android.json
Pour ajouter une plateforme à notre application il s'agit d'appeler :
phonegap build android
phonegap build ios
...
Pour déployer sur une plateforme, on utilise :
phonegap install android
phonegap run android
ou
si on veut construire et déployer (build puis install)
Lancement
erreur due à l'absence de terminal
Démarrage du terminal
Emulateur Android
Emulateur Genymotion
Device connecté
Lancement de nouveau
dans le menu
{"prepare_queue":{"installed":[],"uninstalled":[]},"config_munge":{},"installed_plugins":{},"dependent_plugins":{}}
Spécificités de l'utilisation d'Android dans le cadre du projet Phonegap
platforms/android
Sources Android générées
Dans le AndroidManifest.xml, une permission est déjà activée :
Ne pas modifier ces fichiers. Ils sont générés par Phonegap
Ajouter mes sources
Toutes les sources web peuvent être intégrées dans le projet dans le répertoire www
Les sources doivent être embarquées en HTML, CSS et JS
Les appels à des services extérieurs doivent être limités
Rappel de notre contexte Jquery Mobile
/accueil.html
Service
cloud
popup_un
page_accueil
Lien vers popup_un
Lien vers /page_deux/html
avec prefetch
Lien vers /page_trois.html
sans prefetch
/page_deux.html
page_deux
Affichage de la valeur du champ de saisie
Champ de saisie
Lien de retour à la page d'accueil
/page_trois.html
page_trois
Appel à un service cloud en transmettant la valeur du champ de saisie de la page d'accueil
Affichage de la page
Lorsque le résultat du service cloud est obtenu, on affiche le résultat à l'écran
Prefetch
Simple
lien
Application PhoneGap
Les liens entre les ressources
PhoneGap apprécie moyennement les liens basés sur des urls commençant par /
Il y voit un problème XSS.
Deux solutions :
autoriser tous les appels vers des sites extérieurs dans
www/config.xml
:
<access origin="*" />
transformer les
liens sans "/"
: "/page2.html" --> "page2.html"
Certains fichiers doivent rester dans www :
répertoire res : images, splashscreen...
img : logo de l'application
Localhost n'est plus vraiment 127.0.0.1
Puisque PhoneGap est lancé dans l'émulateur, localhost est pour lui le device virtuel...
L'émulateur offre toutefois la possibilité d'accéder au PC du développeur et donc aux serveurs qui y sont hébergés :
et non pas votre PC !
ipconfig /all
Et les logs ?
Toutes les logs tracées via console.log sont écrites dans les logs de l'émulateur :
Genymotion :
Windows
: %LocalAppData%\Genymobile\Genymotion\deployed\YOUR_VIRTUAL_DEVICE\
Mac OS X
: $HOME/.Genymobile/Genymotion/deployed/YOUR_VIRTUAL_DEVICE/
Linux
: $HOME/.Genymobile/Genymotion/deployed/YOUR_VIRTUAL_DEVICE/

Emulateur :
lancer
adb logcat
Accès aux fonctions natives
Phonegap (Cordova) accède aux fonctions natives via des plugins
Les plugins sont des couches d'abstraction de fonctionnalités natives permettant d'être exécutées sur toutes les plateformes.
Cordova (et donc PhoneGap) propose des plugins de façon native via l'utilisation de
phonegap.js
(ou cordova.js).
Cette librairie est mise à disposition dès le déploiement

Il est possible de :
- de développer ses propres plugins
- d'importer des plugins de base
- d'importer des plugins développés par la communauté
https://build.phonegap.com/plugins

phonegap plugin add org.apache.cordova.network-information

Dans la ligne de commande
Android
IOS
...
dans res/xml/config.xml
dans platforms/android/AndroidManifest.xml
dans config.xml
...
déploie pour toutes les plateformes
1 seul code JS pour couvrir toutes les plateformes
Exercice pratique
Phase 1 : installer PhoneGap
Vérifier l'installation
Déployer l'application exemple sur un émulateur
Phase 2 : importer les sources html dans le projet
Adapter les sources pour assurer la navigation
Adapter l'adresse du serveur REST pour pouvoir y accéder (127.0.0.1 n'est pas l'adresse de votre PC pour l'émulateur)
Phase 3 : Ajouter FastClick.js
Améliorer les performances du click (éviter la latence de 300ms)
Phase 4 : Ajouter une fonctionnalité native de votre choix (caméra...)
Choix à faire sur http://docs.phonegap.com/fr/edge/index.html
Ajouter le plugin, observer les différences dans les fichiers, exploiter le plugin
Assurer la testabilité dans le navigateur
Il peut être difficile de tester une application sur mobile : debugguer...
La solution la plus optimale est de rendre le code testable à la fois en mode application embarquée et en mode site web
Pour cela, il faut rajouter une couche d'abstraction pour effectuer un traitement ou l'autre.
Je veux ouvrir une alert
JS standard
function notification (...) {
alert(message);
}
Phonegap (pourmob.js)
function notification (...) {
navigator.notification.alert(
'You are the winner!', // message
alertDismissed, // callback
'Game Over', // title
'Done' // buttonName
);
}
alert(message);
notification (...);
pournav.js
Import du fichier
pournav.js
si test de l'application dans Chrome
<script src="lib/pournav.js">
<script src="lib/pourmob.js">
Import du fichier
pourmob.js
si test de l'application sur mobile
Problématiques liées aux sites mobiles
Comment éviter la double maintenance d'un site mobile et d'un site web ?
Comment offrir une navigation mobile et web proche sur les deux devices ?
Les utilisateurs de votre site web ne trouvent pas leurs repères sur le site mobile et vis et versa.
Comment gérer la diversité des résolutions et tailles d'écrans afin d'offrir une navigation intéressante?
http://www.pinterest.com/pin/470555861036599883
La solution : Le Responsive Web Design
Principe : développer un seul site qui s'adapte à toutes les tailles d'écran
Le nom du concept a été créé par Ethan Marcotte en 2010
Solution rendue possible par des fonctionnalités de :
- HTML5
- CSS3
Le RWD, des bonnes pratiques devenues une norme :
- Rendre le contenu adaptatif : ne pas positionner de taille fixe...
- Utiliser des grilles fluides
- Alléger le contenu pour distribuer le contenu vraiment essentiel à l'utilisateur
- Exploiter des technologies HTML5 et CSS3 pour afficher, masquer, déplacer, remplacer des contenus selon les tailles d'écran
Plus qu'une technologie ou des règles ergonomiques, le Responsive Web Design est une philosophie de réalisation de site web/mobile visant à apporter les informations à l'utilisateur de la meilleure des façons selon le device et la taille d'écran.
Premier principe technique du RWD
CSS3 apporte plusieurs nouvelles fonctionnalités :
les transformations 3D
les bordures arrondies
...
Le Responsive Web Design par l'exemple
Un site référence les réalisations les plus intéressantes
http://www.mediaqueri.es
http://packlove.com/
1 seul et même site mais avec un contenu et une mise en forme qui s'adaptent
RWD ?
Techniquement ?
Mais surtout :
Les Mediaqueries
Capacité à appliquer un style CSS différent selon :
la taille de l'écran
la résolution de l'écran
le ratio width / height (4/3 16/9...)
le type de media : screen, print, 3D-glasses
l'orientation : landscape ou portrait
http://www.w3.org/TR/css3-mediaqueries
Possibilité d'appliquer des règles de styles :
directement dans du code CSS
@media screen and (min-width: 400px) and (max-width: 700px) { … }
en conditionnant le téléchargement complet d'un fichier CSS
<link rel="stylesheet" media="print and (min-width: 25cm)" href="http://…" />
La grille fluide
Les éléments et blocs d'informations sont intégrés dans une grille.
Pré-requis
Les tailles des élements dans la grille doivent être fixées en proportionnel
Les styles float: left et float: right sont à éviter autant que possible
Les tableaux (<table>) sont à proscrire tout comme les positionnements absolus...
Selon la taille de l'écran, les éléments sont repositionnés à la ligne.
Ainsi :
On disposera de plusieurs colonnes sur les écrans larges
On réduira le nombre de colonnes et leur taille lorsque l'écran rétrécit.
Les tailles des composants
Les tailles des composants et contenus sont exprimées de préférence :
- en
pourcentage
- en
em
- en
pixel
en définissant la taille
minimum
et la taille
maximum
- en
pixel
en
dur
: dans ce cas, il convient obigatoirement d'appliquer une taille différente selon les tailles d'écran (avec les mediaqueries)
min-width : 100px;
max-width : 250px;
Il est souvent conseillé d'adapter les tailles des composants en fonctions de la taille d'écran et de les conserver en proportionnelle pour assurer la compatibilité avec toutes les tailles d'écran intermédiaires.
Largeur fluide mais jamais supérieure à 250px et jamais inférieure 100px
min-height : 150px;
La hauteur sera d'au moins 150 pixels et sera fluide si la taille d'écran est suffisamment grande
@media screen and (min-width:768px) and (max-width: 1024px) {
min-width : 100px;
max-width : 250px;
}
@media screen and (min-width:1024px) and (max-width: 2048px) {
min-width : 250px;
max-width : 500px;
}
Une solution de base pour concevoir sa grille
GridPak
Le Responsive Web Design commence par la définition des résolutions d'écrans supportées.
Généralement, un site Responsive Web Design gère au minimum 3 types d'écrans :
- les petits (mobiles) : largeur d'écran inférieure à 480px
- les moyens (tablettes) : largeur comprise entre 480px et 768px
- les grands (PC) : largeur supérieure à 768px

Souvent, on rajoute un point de rupture supplémentaire au dessus de 1024px.
Gridpak : générer sa grille CSS
Une fois les points de rupture définis, on peut générer la grille CSS :
un fichier CSS et un fichier SCSS (SASS)
un fichier html de test et un fichier javascript permettant de visualiser une page de test et les colonnes
On peut alors utiliser le source html comme base pour effectuer des tests en insérant des contenus.
Un peu de terminologie de design web
On parle d'un site à design :
static
: la taille du canevas est positionné en dur (souvent 960px). Lorsque la fenêtre rétrécit, la taille du contenu ne varie pas et les zones sont alors masquées.
On obtient alors une barre de défilement horizontale pour visualiser tout le contenu.
Le site http://liquidapsive.com/ permet de tester les différents designs.
responsive
: les tailles des blocs sont définies en pourcentage ou en fixe et les layouts sont définis pour chaque taille d'écran
liquid
(ou fluide) : les tailles des blocs sont définies en pourcentage de la taille de l'écran. Lorsque l'écran est très grand ou très petit, le rendu peut être soit trop large, soit trop serré.
adataptive
: les tailles de chaque bloc (<div>) sont définies en pourcentage pour chaque bloc et pour certaines définitions. Les blocs se retaillent alors en fonction de la taille de l'écran et se repositionnent à l'écran
Frameworks ?
Différence avec un site web mobile
Puisque le site peut être visualisé sur un mobile comme sur un navigateur PC, certaines règles varient.
Un site web mobile utilisant des fonctionnalités telles que le prefetch ou les transitions... utilise beaucoup de Javascript.
Le Javascript n'est pas l'ami des bots Google... et du SEO. Il apporte des difficultés à parcourir le site et donc à bien l'indexer.
Un site web mobile JQM sera intéressant si on n'a pas besoin d'indexer le contenu (application web mobile : formulaire...) mais ne sera pas pertinent si on veut afficher et indexer du contenu.
Un site Responsive Web Design doit donc :
ne pas incorporer de javascript ou être visualisable sans javascript
éviter les transitions et animations entre pages (peu ergonomique sur navigateur web)
avoir un design simple et épuré plutôt que chargé :
amélioration de la lisibilité pour le lecteur
facilité à maintenir le site
en simplifiant le contenu et en enlevant les blocs superflus, on facilite la vie du développeur sans détériorer l'expérience utilisateur
Des frameworks... encore...
Intégrer toutes les bonnes pratiques peut être laborieux
2 frameworks sortent du lot :
Twitter Bootstrap
Les frameworks apportent une solution encore
Foundation
http://foundation.zurb.com/
http://getbootstrap.com/
Comparaison intéressante avec des exemples de codes :
http://responsive.vermilion.com/compare.php
Thèmes
Des thèmes Bootstrap et Foundation sont intégrés dans tous les principaux CMS (Content Management System) et CMS de vente en ligne :
Wordpress
Drupal
Prestashop
...
Sources JAVA
développées
Sources JAVA
développées
Layouts
d'écrans
Contenu des menus
Internationalisation des libellés
Console d'exécution permettant de filtrer les logs
Devices virtuels
SDK Manager
Lanceur d'appli
AVD Manager
: Définir les devices virtuels ou physiques sur lesquels vous voulez tester
Full transcript