Le document aborde la conception et le développement d'applications et sites web adaptés à une multitude de dispositifs, soulignant l'importance d'un design responsive. Il détaille différents types de conception (statique, fluide, adaptatif, responsive) et mentionne les outils et méthodes pour optimiser l'expérience utilisateur selon l'appareil. La discussion inclut également des frameworks, des techniques de tests et les contraintes autour des composants web modernes.

1. Anne-Marie Dery
pinna@polytech.unice.fr
Année 2015-2016
1

2. 2

3. Dispositifs de tailles différentes :
1. Du petit téléphone peu puissant en calcul au
smartphone performant.
2. Des phablets aux tablettes.
3. Des ordinateurs portables, aux écrans d’ordinateurs
de bureau, pour finir sur des écrans de type TV (TV
connectée, Navigation sur console de Salon sur la
TV).
Dispositifs de puissances différentes : entre un
téléphone, une console de salon, et un ordinateur de
bureau.
Dispositif mobile nécessitant le mode offline.
3

4. Concevoir un site pour chaque dispositif visé : un site principal, un site pour
smartphones, un site pour tablettes, etc.
Test côté serveur sur le type d'appareil, renvoie vers une adresse web dédiée
Possibilité d'affiner précisément la structure du site et ses contenus.
Possibilité de cibler et de s'adapter à des techniques d’interactions
variées
Duplication du contenu
Maintenance de plusieurs versions de site et de plusieurs adresses web
Détection côté serveur ("UA sniffing") souvent biaisée ou non à jour
4
Alternative en attente d’une refonte

5. Développement spécifique dans chaque langage (IOS, Android, WindowsPhone)
Téléchargement et référencement dans un "Store" (AppStore, Google Play, Windows
store).
Prise en charge facilitée des fonctionnalités natives (touch,
accéléromètre, notifications, GPS, etc.)
Installation simple sur le dispositif
Totale "acclimatation" au périphérique (ergonomie, performances, densité
de pixels)
Présence sur Store avec "raccourci" sur le smartphone de l'utilisateur
Développement spécifique dans plusieurs langages (propres à iOS, Android,
WindowsPhone, etc.)
Coût du développement, des licences, et de la maintenance pour chaque
système d'exploitation
Contenu non indexable par un moteur de recherche web classique
Mise à jour de l'application nécessite une action de l'utilisateur
Nombre de cibles visées petit
5

6. « Solution de facilité" en vertu de son objectif principal : s'adapter à tout type
d'appareil de manière transparente pour l'utilisateur
Coûts et délais inférieurs aux solutions « ad-hoc »
Maintenance facilitée
Mise à jour transparente
Déploiement multi-plateformes
Envisageable en reconception
Sortent en premier dans les résultats Google
Fortes connaissances techniques
Veille technologique constante
Importance des tests ("device labs", simulateurs)
Difficile de contourner les limites ergonomiques et de
performances des navigateurs web
Un moyen parmi d'autres mais pas de « solution magique" à tous les problèmes.
6

7. 7

8.  Le terme de "Responsive Web design" a été introduit par
Ethan Marcotte dans un article publié en 2010.
 Conception Web de sites offrant une expérience de lecture et
de navigation optimales pour l'utilisateur quelle que soit sa
gamme d'appareil (téléphones mobiles, tablettes, liseuses,
moniteurs d'ordinateur de bureau).
◦ Une expérience utilisateur "Responsive" réussie implique un
minimum de redimensionnement (zoom), de recadrage, et
de défilements multidirectionnels de pages.
 Adaptations côté client (grilles flexibles en pourcentages,
images fluides et CSS3 Mediaqueries)
8

9. Un design statique (ou fixe) se réfère à des dimensions figées (par exemple 960px)
quelle que soit la surface de l'écran (avant l'arrivée du Responsive Web Design dans les
années 2010).
Un design "Liquide"
 Un site web Liquide (ou fluide) : toutes les largeurs de colonnes exprimées en
unités variables (pourcentages, em, vw, etc.) et qui s'adapte généralement
automatiquement à la taille de fenêtre…
Un design "Adaptive"
 Unités de largeur sont fixes, mais différentes selon la taille de l'écran, qui est
détectée via CSS3 Media Queries.
 Un tel design tient uniquement compte des principaux points de rupture (320px,
480px, 768px, Autant de gabarits fixes que de points de ruptures.
Un design "Responsive"
 méthodes CSS3 Media Queries permettant de modifier les styles (ré-organisation de
la page par exemple) selon certains critères, pour s'adapter complètement à la taille
d'écran, quel que soit le point de rupture.
9

10. 10
Définition
d’écran
Portrait Paysage
iphone 480X320 C C
Iphone 4 960X640 C B
Iphone 5 1136X640 B A

11. 11

12. Analyser les
besoins
Etudier
l’existant
(Manual
Design...)
Maquetter
Mockup et Responsive
design avec Balsamiq
12

13.  Développer avec ou
sans framework
 Tester (Test Studio
ou Qunit)
 Emuler
(Genymotion…)
 http://outils-
web.fr/5-
emulateurs-de-
telephones-mobiles-
en-ligne/
 Déployer
Outils pour tester le "responsive" d'un site
http://cybercrab.com/screencheck/
http://www.blogduwebdesign.com/ressources-
responsive/7-outils-pour-vous-aider-a-tester-
vos-sites-web-responsive/965
http://www.web-eau.net/blog/12-outils-pour-
valider-le-responsive-design-de-votre-site
13

14. Profusion de frameworks et de boilerplates ces
dernières années.
http://www.commitstrip.com/fr/2015/09/16/how-to-choose-the-
right-javascript-framework/
Mise à profit des technologies issues du web telles
que HTML5, CSS et JavaScript afin de fournir une
collection d’outils et modules facile à utiliser,
réutiliser et intégrer.
14

15. Moyen : Media queries
 A media query consists of a
media type and at least one
expression that limits the
style sheets' scope by using
media features, such as
width, height, and color.
Media queries, added in
CSS3, let the presentation
of content be tailored to a
specific range of output
devices without having to
change the content itself
15

16. media_query_list: <media_query> [, <media_query> ]*
media_query: [[only | not]? <media_type> [ and <expression> ]*]
| <expression> [ and <expression> ]*
expression: ( <media_feature> [: <value>]? )
media_type: all | aural | braille | handheld | print |
projection | screen | tty | tv | embossed
media_feature: width | min-width | max-width
| height | min-height | max-height
| device-width | min-device-width | max-device-width
| device-height | min-device-height | max-device-height
| aspect-ratio | min-aspect-ratio | max-aspect-ratio
| device-aspect-ratio | min-device-aspect-ratio | max-device-aspect-ratio
| color | min-color | max-color
| color-index | min-color-index | max-color-index
| monochrome | min-monochrome | max-monochrome
| resolution | min-resolution | max-resolution
| scan | grid
B
N
F
16

17. Objectif : adapter le contenu d’une page
Comment ?
découper en lignes divisées en colonnes (12 par défaut)
paramétrable grâce aux préprocesseurs CSS).
Pour chaque élément : donne la largeur en nombre de colonnes.
Implique :
Donner un rythme horizontal au visuel
Permettre de réorganiser la largeur des éléments et leur ordre en
fonction de la taille de l’écran.
Deux éléments côte à côte sur un écran
large peuvent se placer l’un en dessous de
l’autre à partir d’une certaine taille.
17

18. Objectifs : Eviter d’avoir à charger une image de taille
non adaptée au dispositif visé et avoir la qualité d’image
adaptée aux caractéristiques de l’écran.
Comment : charger un contenu spécifique à certains
types d’écrans a l’exécution, ce qui est un plus pour la
plasticité.
Ex : afficher une image sur un petit écran, typiquement
un téléphone, susceptible d’être sur un réseau
téléphonique payant, en lieu et place d’une carte
dynamique complète et interactive sur un ordinateur de
bureau.
18

19.  Organisation du CSS : ajout de nouvelles fonctionnalités: des
variables, des fonctions appelées mixins, gestion des
imports, imbrication des sélecteurs CSS, des fonctions
utilitaires, des opérateurs etc...
 Génération de feuilles CSS classiques
◦
Maintenance et propreté́ du code.
Méthodes de travail.
Paramétrer le style facilement avec une suite de
variables (Par exemple pour changer la palette de couleurs)
◦ http://blog.humancoders.com/les-id-es-re-ues-sur-les-
pr-processeurs-css-sass-53/
19

20. 20

21. 21

22.  A l’origine Twitter Blueprint, créé courant 2010
par Mark Otto et Jacob Thornton.
 Guide de style des outils internes à Twitter,
publié le 19 Août 2011 comme Open Source sur
GitHub
 Supporte PC, MAC, UNIX, Android, iOS, Windows
Phone, Firefox OS, BlackBerry OS
 Quid des navigateurs web et de leur version ?
22

23.  Approche modulaire : création des composants
indépendants, et réutilisables.
 Banques de composant.
 Templates de site/application.
 Les composants utilisent un mélange d’Adaptive et
de Responsive.
 Feuilles de styles écrites avec le préprocesseur SASS
 Design très typé : ne laisse pas facilement le place au
designer.
23

24. 24

25. <div class="container">
<div class="row" style="border:1px solid #ddd;">
<div class="col-xs-12 col-sm-9 col-md-9 col-lg-7 col-lg-offset-1"
style="background-color:orange;height:200px;">Texte
</div>
<div class="col-xs-12 col-sm-3 col-md-3 col-lg-2 col-lg-offset-1"
style="background-color:green;height:200px;">Menu
</div>
</div>
</div>
http://creersonsiteweb.net/page-bootstrap-grille 25
Très petit format.col-xs- < 768px (Smartphones)
Petit format.col-sm- < 992 px (tablettes)
Moyen format.col-md- <1200 px (petit écran)
Large format.col-lg- > 1200 px (écran travail)

26. /* Large desktop */ @media (min-width: 1200px) { ... }
/* Portrait tablet to landscape and desktop */
@media (min-width: 768px) and (max-width: 979px) { ... }
/* Landscape phone to portrait tablet */ @media (max-width: 767px) { ... }
/* Landscape phones and down */ @media (max-width: 480px) { ... } -
http://m5designstudio.com/2013/orlando-web-design/bootstrap-responsive-layout/
26

27. 27

28. Développé en interne chez ZURB (une agence de design de
produits, souvent web) comme outil de prototypage, et style de
base pour tous leurs clients depuis 2008,
rendu public sous le nom de Foundation en 2011.
Orienté prototypage : plus ouvert aux designers et à la création
d’UI.
Préprocesseur SASS
// $primary-color: #008CBA;
// $secondary-color: #e7e7e7;
// $alert-color: #f04124;
// $success-color: #43AC6A;
// $warning-color: #f08a24;
// $info-color: #a0d3e8;
28

29.  Composant JavaScript appelé Interchange.
◦ Plugin, qui permet de fournir une image adaptée à une
densité, une résolution et une taille d’écran, puis de
charger l’image qui correspond au contexte.
 Images et tout type de contenu.
<div data-interchange="[../examples/interchange/default.html, (small)],
[../examples/interchange/medium.html, (medium)],
[../examples/interchange/large.html, (large)]">
<div data-alert class="alert-box secondary radius">
This is the default content. <a href="#" class="close">&times;</a>
</div>
</div>
29
http://foundation.zurb.com/docs/components/interchange.html

30. Compétition
Grilles et Composants
Organisation :
Foundation for the Web, dédié à la création de sites web, et Foundation for
Apps, s’intégre avec AngularJS de Google, pour faciliter la création
d’applications, notamment mobile.
Version BootstrapUI d’AngularUI : portage de Bootstrap pour AngularJS
30
Foundation Bootstrap
Grille moyenne Juillet 2013 Août 2013
Orbit slider /
Caroussel
Septembre 2011 Février
2012Grille
Grille Flex Box oui Navigateur ?
http://foundation.zurb.com/docs/components/grid.html

31. 31

32. Sur le marché en 2014.
Frameworks Responsive Design du web moderne.
Similaire à Bootstrap : plus performant ?
Templates optimisés pour la performance
Layouts responsive (fluid pattern :fluid grid : grille
fluide / Flex-box)
Peu d’UI éléments ou d’autres composants.
changer style de base : propre style aux
applications.
32

33. Ce starter kit contient :
 Un serveur Web embarqué
 Du responsive
 De l’optimisation d'images
 Minification et optimisation JavaScript
 Minification et optimisation CSS
 Minification HTML
 Rapports de performance
 Plusieurs pages HTML optimisées pour mobile
 Un générateur de documentation
Nombreuses dépendances et mise en place
complexe
33

34. 34

35. Famille Wordpress.
Kit de développement qui
fournit de bonnes fondations
pour styliser son site web.
Open-source, créé par Dave
Gamache (V1.0.0 en mai
2011.
Collection de fichiers CSS
pour styliser rapidement une
page web et la rendre
responsive.
35

36. Découpe l'écran en largeur sur 960 pixel en
12 colonnes.
grille de 12 colonnes,
breakpoints, médiaqueries
ajuster le design,
le style de composants tels que les
tableaux, les tabs, les progress bars et autres.
Une grande liberté dans la personnalisation
36

37. 37

38. "Les Web Components permettent de combiner plusieurs éléments pour créer
des widget réutilisables avec un niveau de richesse et d'interactivité sans
commune mesure avec ce qui est aujourd'hui possible en se limitant aux
CSS »,explique le W3C.
3 principes de base :
les shadow DOM (création de balises / balises locales / réutlisation de
balises)
les éléments « personnalisables » (HML5 + Javascript)
Les Imports de HTML
Templates, décorateurs (faisant appel à des sélecteurs CSS)
http://blog.soat.fr/2015/02/html-5-introduction-aux-web-components
Shadow DOM : http://webcomponents.org/articles/introduction-to-shadow-
dom/
38

39. Google et Mozilla :
API de bas niveau (polyfills) pour l’exécution des
Web Component sur Firefox et Chrome.
Web Components: ensemble d’APIs (shadow DOM,
templates, custom elements, etc) pour réaliser des
widgets et d’éléments graphiques pour le web.
Polymer « implémente » les Web Components
39

40. Voici la philosophie décrite par Google :
 “Embrace HTML”, Tout est composant, même ce qui ne
touche pas à l’UI.
 “Leverage the evolving web platform”, du code de
meilleure qualité au cours du temps.
 “Minimize boilerplate code”:
◦ ○ Promouvoir la création de webapps natives, sans bibliothèque
supplémentaire.
◦ ○ Utiliser directement les standards du web et ainsi y contribuer.
◦
 “Salt to taste”, Polymer est conçu pour une utilisation à la
carte. Chaque environnement qui l’intègre choisit ce qu’il
veut utiliser et uniquement.
40

41. Polymer met à disposition :
 une version des polyfills, appelée Platform,
 un ensemble de Web Components : bibliothèque
Polymer
 un ensemble de composants uniquement
orienté interface utilisateurs : Paper Elements
(choix de design de Google).
 un éditeur graphique, du nom de code Pica,
pour prototyper un component, jusqu’à une
page complète avec des layouts sous la forme
de Components.
http://fr.slideshare.net/alexcheng1982/introduction-to-web-components
41

42. http://www.infoq.com/fr/news/2013/06/webcomponents 42

43. platform.js: un ensemble de shims, codes permettant de
proposer les concepts décrits en émulant, via javascript
uniquement, les fonctionnalités natives manquantes
polymer.js: Couche d’abstraction définissant une certaine
façon d’utilisation des fondations
Le but des Paper elements (Polymer UI) est de répandre les
notions de design propulsé dans les nouvelles versions des
applications Google à toute la communauté.
Les composants pas tous à un rendu sur la page.
Par exemple, l’élément polymerajax, destiné à réaliser des
appels AJAX.
http://www.infoq.com/fr/news/2013/06/webcomponents 43

44. Créer des « components » mais en s’abstrayant
totalement de l’environnement.
Implémentation uniquement réalisée en javascript,
aucun prérequis sur une API native au navigateur n’est
fait.
Deux principes fondamentaux :
◦ Le DOM est un handicap en terme de performances
◦ il faut Réutiliser les principes de programmation réactive
pour rendre les erreurs prédictibles
◦
 d’ou Virtual DOM au lieu du Shadow DOM défini par
le W3C.
44

45. Bibliothèque javascript.
Déclaration des templates et des styles est elle
aussi réalisée en javascript.
 ReactElement / ReactElement Factory
 ReactNode
 ReactComponent / ReactComponent Class
45
https://facebook.github.io/react/docs/glossary.html

46. React abstrait totalement la
manipulation du DOM.
Modification de l’état des
composants pour voir ceux-ci
être mis à jour automatiquement
et d’une façon optimale.
46
Exemple :
Soit une liste d’éléments rendus dans un élément html
<li>, avec l’élément “banana” puis à l’état n+1 la liste
contient à la place “cuillère” et “champignon”,
Approche “à la JQuery” : suppression de l’élément présent
puis insertion des éléments.
React altère l’élement présent pour qu’il affiche “cuillère”
et insérer un nouvel élément pour afficher “champignon”.
https://facebook.github.io/react/blog/2014/02/15/community
-roundup-16.html

47. Regarder aussi Flux
47
http://www.smashingmagazine.com/2015/06/qualities-
of-good-flux-implementations/

48. Les frameworks intègrent de nombreuses
dépendances.
Exemple :
Google Web Starter Kit a besoin de : NodeJs
(serveur), Ruby, Gulp (workflow), Sass.
Pour Bootstrap il faut également : GruntJs,
NodeJs, Sass
48

49. 49

50. Objectifs : Diminuer le coût et le temps de développement
et viser un marché large.
Développer des application pour plusieurs plateformes (iOS,
Android, Windows Mobile, BlackBerry/RIM, etc.) en
maximisant la réutilisation du code tout en conservant des
spécificités de chacune des cibles.
Souvent simples à utiliser : ils sont basés sur des langages
de scripting : CSS, HTML, et JavaScript.
Les principaux défauts viennent des évolutions fréquentes
des système des cibles qui impliquent de réécrire une partie
des générations de code.
50

51.  Examiner les 5 étapes suivantes :
◦ Le développement : existe-t-il un environnement de
développement ? Existe-t-il des librairies de composants ?
◦ Le déploiement sur chaque plateforme : quelles
plateformes sont supportées ?
◦ La compilation,
◦ L’exécution : quel est le temps d’exécution ? L’IHM est elle
utilisable et adaptée ? Bonne expérience utilisateur ?
◦ Comment doit on procéder pour distribuer ?
Chaque technologie n’intervient pas forcément dans
toutes ces étapes
51

52. La plus connue : PhoneGap / Cordova
développée par Nitobi software (prix à la conférence O'Reilly
Media's Web 2.0 de 2009), acquis par Adobe en 2011, utilise le
système d'Apache Cordova pour fonctionner.
Plus de quatre cent mille développeurs utilisent Phonegap pour
réaliser leurs applications mobiles.
Une solution alternative prometteuse : Xamarin
fondée par la société du même nom en 2011 : solution complète
avec tous les outils de développement se rapprochant du
développement natif.
Plus de sept cents milles adhérents.
Et aussi Titanium Mobile-Appcelerator et Ionic….
52

53. 53

54.  Basé sur les langages HML5, Java Script et CSS.
◦ Outil de développement libre : Eclipse, IntelliJ
◦ Outils complémentaires payants (par exemple, Adobe
PhoneGap Build, un éditeur WYSIWYG comme Adobe
Dreamweaver.).
◦ Communauté open source du web : de nombreuses
librairies comme jQuery Mobile, Kendo UI ou Onsen
UI ( qui fournit des composants en javascript/CSS
très similaires aux composants natifs).
recherche Google : trouver un composant IHM
54

55.  Api javascript pour accéder aux fonctions et
capteurs de l’appareil cible
◦ Accéléromètre, appareil photo, camera, boussole,
contacts, évènements, géolocalisation, globalisation,
inAppBrowser, accès multimédias, notification,
splashScreen.
55
réactions aux changements
d’environnement possibles
Des processus offerts par
les API natives ne
peuvent pas être utilisés.

56.  Android, iOS, Blackberry, Windows Phone, Bada…
et toute plateforme contenant un navigateur ayant
une webview PhoneGap réalisée
 Le framework natif (xCode, SDK Android, etc …)
compile le package et crée les binaires (apk, ipa,
etc..),
 A l’exécution, le code web est interprété par la
webview PhoneGap dédiée (plugins en natif
permettant de faire la jonction entre le code web
et le hardware).
 L’application s’exécute ensuite comme le ferait un
site web dans une webview.
.
56

57. 1. Installation de la
dépendance Node.js
2. Création d’un
environnement de
travail
3. Build du projet
4. Lancement sur un
émulateur
5. Préparation des
fichiers XML de
configuration pour
chaque cible.
6. Déploiement du
projet
57

58. NodeJS doit être installé sur l’ordinateur,
ainsi que les SDK cibles sur lesquels
l’application sera déployée (iOS, Android…).
Pour compiler une application iOS
Il faut être en possession d’un Mac.
Préparation de fichiers XML de configuration
pour chaque cible (le domaine de
l’application, les auteurs, des méta-données
sur la solution, et les domaines extérieurs
auxquels l’application se doit d’accéder
PhoneGap Build est un service qui compile
l’application pour les différentes
plateformes dans le Cloud, et ensuite
permet de facilement télécharger
l’application.
58

59.  Solutions responsive design clef en main.
 Cycle de vie meilleur que les applications web
détection des événements: gérer les actions à
réaliser pour chaque évènement.
 Développement de plugins natifs possibles
pour les développeurs mobiles
59

60.  Problématiques du web. : mode offline n’est
pas adapté du tout au webview.
 Impossible de prendre en compte le contexte
de la plateforme d’utilisation
 Pile de navigation et look and feel natif
difficiles à reproduire
60

61. 61

62. Développé par AppGyver : plate-forme
HTML5 au dessus de Cordova/Phonegap
Objectifs : Augmenter les performances
natives, simplifier le débogage et la
distribution.
62

63. 1. Profils d’approvisionnement : fichiers permettant
aux constructeurs (iOS, Android, Windows Phone…)
de vérifier les auteurs de l’application et le niveau
de leur compte.
2 Installation sur téléphone en scannant un QR code
3. Hot code reloading : recompiler de l’application
inutile pour intégrer les changements de code sur
le/les téléphone(s) connectés.
4. Simplification des processus pour la validation et
le déploiement de plugins.
5. Introduction de la technologie Web Angular.js.
63

64. 64

65.  Titanium Mobile possède son propre environnement
d’exécution.
 N’utilise pas de HTML/CSS pour implémenter
l’interface utilisateur.
 Fournit une machine virtuelle JavaScript pour accéder
au système natif
 Développement en JavaScript pour construire l’interface
utilisateur et pour implémenter le modèle de données
en utilisant l’API Titanium.
 Communauté open source, limitée en fonctionnalités.
 Fonctionnalités supplémentaires accessibles via une
souscription (documentation et accès à Appcelerator
developer center)
65

66.  Supporte seulement iOS, Android et BlackBerry.
◦ Android et BlackBerry moins bien supportés, majorité des
méthodes de l’API seulement pour iOS
 Distribution sur app store sans difficulté
 Le spectre de fonctionnalités qu’offre Titanium
Mobile est équivalent à celui de PhoneGap.
Pour créer des éléments graphiques, il est nécessaire de
maitriser l’API Titanium Javascrip. Construire une
application avec un look natif nécessite beaucoup moins
d’effort qu’une application web.
66

67. Titanium Studio basé sur Eclipse : IDE dédié fourni par
Appcelerator (Installation simple + installation des SDK de
chaque plateformes)
◦ Auto-complétion sur l’API Titanium Mobile,
◦ Prend en charge le déploiement sur émulateur ou
téléphone.
◦ Documentation complète, avec multitude d’exemples.
◦ Modularisation donc adaptabilité.
◦ Pas de WYSIWYG
◦ Prise en main de l’API Titanium
◦ Conception des interfaces utilisateur est possible avec
un émulateur ou un appareil
67

68.  Communauté :
◦ Réponses aux questions se font chaque semaine.
◦ Mise à jour et résolution de problèmes réguliers
◦ Titanium Mobile : perspectives sur du long terme
dépendent de la stratégie de l’entreprise
◦ Performances du runtime lourdes dûes au moteur
Javascript, à chaque interaction utilisateur, on passe
par les éléments natifs au Javascript.
68

69. 69

70. Outils de développement au sein de son IDE
Xamarin Studio.
Centralisation du code : métier, connexions réseau,
base de données et certaines parties d’IHM
Possibilité de définir des IHM spécifiques à chaque
plateforme (développeurs plus qualifiés mais IHM
« natives »).
Génération d’un projet de la plateforme souhaitée
intégrant une librairie contenant les composants :
iOS, Android et Windows Phone seulement.
70

71. À l’exécution, l’application agit comme le ferait
une application native.
Xamarin, via son cycle de développement
contrôlé permet de réaliser une interface
spécifique aux OS, bien sûr les applications
générées sont responsive design.
Xamarin déploie des composants natifs, de ce
fait les applications sont optimisées pour
chaque plateforme.
71

72. interface différente selon la
plateforme visée, (pour iOS
ressemble à celle
d’Interface Builder d’Apple)
interface intuitive pour
construire les IHM basé sur
du "drag and drop" de
widget.
Communauté et librairies à
leur début : se connecter au
store de Xamarin à
l’adresse suivante :
http://components.xamarin
.com/ et intégrer à Xamarin
Studio
IDE dédié au développement cross
plateforme mobile.
72

73. 73

74. 74

75. Critères Framework PhoneGap Ionic
Contexte d’usage
Tout type de support (mobile,
tablette, PC)
Tout type de support mais fournis
des jeux de look and feel desctiné à
une utilisation sur des supports
tactiles
Développement
HTML/CSS/JS
ajout de librairies ; JQuery mobile
ou Sencha
Accès aux fonctionnalités du
téléphone comme l’accéléromètre
ou encore l’appareil photo.
Orienté UI
basé sur AngularJS.
Classes CSS prédéfinies (à la façon
de Bootstrap)
Ajout de librairies possible : Cordova
Design et comportement
Interactions avec l’utilisateur
gérées ́par le développeur, soit en
mettant en place son propre CSS
soit en utilisant des surcouches à
Phonegap.
Système simple de mise en forme
(comme du Bootstrap).
Fournit des jeux de d’icônes, des
jeux d’animation et de ‘look and feel’
qui ressemblent à du natif.
Framework open source : Android ou iOS ou Windows
Phone… Framework orienté UI interaction et animations natives.
AngularJS Et Cordova .
75

76. Gros projets : délai pour permettre l’utilisation de nouveaux composants
proposés par les SDK natifs.
Gestion des performances : utilisant les technologies Web, les
environnements de tests fournis n’ont pas d’accès à l’ensemble des données
du support (utilisation du processeur, mémoire RAM utilisée, nombre de
lectures / écritures, etc.). Il est par conséquent difficile de déterminer les
performances / charges mémoire réelles de la solution développée.
Fluidité : Vue Web (WebView) induit un temps de réponse plus long que lors
de l’utilisation de composants natifs. Des différences de l’ordre des mili-
secondes restent perceptibles pour l’utilisateur
• Dépendance vis-à-vis du réseau de l’utilisateur : Si l’utilisateur ne dispose
pas d’une connexion internet, les solutions cross-platform, par défaut, n’ont
pas la possibilité d’afficher du contenu hors ligne.
.
76

77. Extensibilité : utile mais coûteux à maintenir (20% la part maximale de code
spécifique tolérable), et nécessite en outre encore plus de compétence que de
faire des applications natives à chaque plateforme.
Cout d’apprentissage du SDK de chaque fournisseur
Connaissance approfondie des langages Web est suffisante.
Rapidité : Simplicité de la mise en œuvre
Déploiement : le déploiement sur les supports est souvent un point noir dans
le développement mobile. Les solutions multi-plateformes en ont profité pour
proposer des solutions innovantes et performante. (Adobe PhoneGap Build,
ou Steroids)
77

78. Les applications massivement adaptées par le grand
public ont plusieurs points en commun, notamment
la facilité d’utilisation, une interface fluide, des
codes de navigation que l’utilisateur reconnaît.
Et sur ces points, PhoneGap arrive à les atteindre
sur une plateforme, mais des compromis seront fait
sur les autres, Xamarin permet de passer outres ces
compromis et de proposer une solution spécifique
à l’utilisateur et à son environnement d’utilisation.
78

79. 79

80. Pour tout savoir la Bible Material Design :
https://www.google.com/design/spec/material-design/introduction.html
Pensez à la structure et à la navigation adaptée
https://www.google.com/design/spec/patterns/app-structure.html
Adaptive UI
Responsive layouts in material design adapt to any possible screen size.
This adaptive UI guidance includes a flexible grid that ensures consistency
across layouts, breakpoint details about how content reflows on different
screens, and a description of how an app can scale from small to extra-
large screens.
Zoom sur les patterns :
https://www.google.com/design/spec/layout/adaptive-ui.html
80

81. Regardez aussi :
Adaptation à l’Utilisateur
https://www.google.com/design/spec/usability/bidirectionality.html
Choix des interactions
Responsive interactions
On ne choisit pas les interactions par hasard : tactile, souris, voix, clavier
Les éléments d’UI paraissent tangibles en ajoutant des animations
Pour simuler des manipulations directes par le biais de réponses multiples
tactiles et visuelles
https://www.google.com/design/spec/animation/responsive-
interaction.html#
81

82. Pour tout savoir la Bible
https://developer.apple.com/library/ios/documentation/UserExperie
nce/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/
doc/uid/TP40006556-CH54-SW1
Adaptivité et Layout
https://developer.apple.com/library/ios/documentation/UserExperie
nce/Conceptual/MobileHIG/LayoutandAppearance.html#//apple_ref/
doc/uid/TP40006556-CH54-SW1
Regardez aussi
https://developer.apple.com/library/ios/documentation/UserExperie
nce/Conceptual/MobileHIG/IconMatrix.html#//apple_ref/doc/uid/TP
40006556-CH27-SW1
82

83. 83

84.  http://setandbma.wordpress.com/2012/03/
19/mobile-game-development-tool-
comparison/
84

85. 1. Choisir un bon exemple (tableaux, images, tabulation,
listes…)
2. Montrer l’adaptation et ses limites
3. Livrer un mini tutorial et le code
4. Demo / Vidéo
5. N’oubliez pas les points suivants :
Environnement de développement : lequel comment
et pourquoi.
Déploiement : comment
Compilation et exécution
Tests et expérience utilisateur.
Un parmi Phonegap, Android, Bootstrap et un au choix
85

86. 86
illustrer avantages / inconvénients d'outils existants pour gérer les
pbs d'adaptation des IHM.
Application qui intègre des tableaux, des vidéos, des formulaires,
des publicités, des scrollbar, des menus et des navigations
complexes...
Choisir une parmi : HTML5 / Phonegap (à discuter) , Android et UNity
Une parmi : Xamarin, Webcomponent et Polymer, React et Meteor,
Ionic , Sencha, Widgetpad, webstarter Kit.