applications mobiles

Pulling ITSM together Cedric Gatay - [email protected]

Applications mobilesOne code to rule them all !

1

mailto:[email protected]



Cedric GataySRMvision - Tech LeadAndroid Developer

@Cedric_Gatay

2




Interfaces utilisateur3




Éléments de navigation

4

• Interactions utilisateurs

• Grille

• Liste

• Onglets

• Skeumorphisme

• Carrousel

• Zone infinie




Grille

• Balance l’importance des éléments

5




Liste

• Efficace pour beaucoup d’éléments

6




Onglets

• Attention à marquer la différence visuelle

7




Skeumorphisme

• Réplique l’apparence d’un objet réel

8




Carrousel

• Navigation dans peu d’éléments

9




Zone infinie

• N’affiche qu’une partie de l’élément

10




Éléments d’interface

• Inscription / Connexion

• Recherche

• Action

• Confirmation / Notification

• Premier lancement

11




Inscription / Connexion

• Rendre facile l’inscription

12




Recherche

• Enrichir les résultats au fil de l’eau

13




Action

• Ne pas hésiter à utiliser du texte

14




Notifications

• Intrusif donc à utiliser avec précaution

15




Premier lancement

• Apprendre l’utilisation à ses utilisateurs

16




Points de vigilance

• Skeumorphisme mal choisi

• Boites de dialogue inutiles

• Non conforme aux recommendations

• Interface surchargée

17




Mobiles18




Points communs

19

• Capteurs

• Résolution limitée

• Connectivité limitée

• Puissance limitée




Différences

20

• OS différents

• Environnement de développement




Cible d’une application

• grand nombre d’utilisateurs

• grand nombre de devices

Attention au coût de développement

21




Problématiques

• Beaucoup (trop ?) de plateformes

• Marché verrouillé

• Les utilisateurs veulent votre application peu importe leur device

22




Problématiques

• Nécessité de développer pour chaque device

• Coûteux

• Difficile

23




Une solution

• Technologies Web

• ancien ( > 15 ans)

• cible principale des mobiles

24




Technologies Web

• standardisé

• peu coûteux

• facile à comprendre

25




Write Once Run Anywhere26




Tour d’horizon27




HTML 5

28

• Certainement la seule technologie cross-platform

• simple et universel




HTML 5

• nouveau standard du HTML

• supporté par une majorité de browsers

• http://caniuse.com

29



http://caniuse.com

http://caniuse.com


Pourquoi HTML 5

Extension d’HTML 4

• nouvelles balises

• nouveaux attributs

• nouvelles API

30




A quoi ça ressemble<!DOCTYPE html><html> <head> <title>Title</title> </head> <body> <p>Content</p> </body></html>

31




HTML Doctype

• Indispensable

• Dicte au browser le mode de parsing

32




HTML 5

• Nouvelles balises

• séparation contenu / présentation

33




Nouvelles balises

<section> zone de la page

<header> en-tête de section

<footer> pied de page de section

<nav> zone de navigation

34




HTML 5 Metadata

• attribut data-* des balises

• récupérable en JavaScript

35




HTML 5 validation

• indication du type de données

• évite la validation JavaScript

36




HTML 5 validation

<input type="date">

<input type="email">

<input type="number">

37




HTML 5 Forms

• autofocus

• positionne le focus sur l’élément

• placeholder

• indique le contenu attendu

38




HTML 5 Forms

• required

• indique que le champ doit être rempli

• pattern

• permet de spécifier le contenu attendu

39




HTML5 Multimedia

• <audio|video>

• inclusion de fichier son / video

• contrôlable en JavaScript

40




HTML5 : stockage

• localStorage

• stockage clef / valeur

• associé au site

• persistant

41




HTML5 : stockage

• sessionStorage

• perdu à la fermeture du browser

42




HTML5 : stockage

• WebSQL

• implémentation SQL

• persistant

43




HTML5 : stockage

• IndexedDB

• évolution de WebSQL

• peu supporté

44




HTML5 : stockage

• Cache d’application

• utilisation hors ligne

• écriture d’un fichier manifest

• non supporté par IE

45




HTML5 géolocalisation

• récupération de la latitude/longitude

• API JavaScript : navigator.geolocation

• watchPosition() pour suivre le déplacement

46




HTML5 websockets

• communication bidirectionnelle

• configuration serveur spécifique

47




HTML5 Canvas

• graphisme dans le browser

• contrôlable par JavaScript

48




HTML5 Web workers

• JavaScript est mono-thread

• traitement asynchrone

• en arrière plan

• non bloquant

49




CSS 350




CSS 3

51

• Norme conjointe au HTML 5

• Supporté par tous les navigateurs récents




CSS 3

52

• Plus simple

• Meilleures performances




CSS 3

selecteur { propriete : valeur; propriete2 : val1, val2;}

53




CSS 3

• Héritage des propriétés

• Combinaisons possibles

54

h1,h2,h3 { color : blue;}




CSS 3 sélecteurs

• Par type

• Par id

• Par classe

55

a{}

#element{}

.maClasse{}




CSS 3 sélecteurs

• h1 p

• <p> contenus dans <h1>

• h1 > p

• <p> fils direct de <h1>

• h1 + p

• <p> juste après <h1>

56

h1 p

h1 > p

h1 + p




CSS 3 apparence

57

margin

border

padding

content




CSS 3 positionnement

• static

• empilement des éléments

58





• relative

• identique static

• ajustement possible

• left,right

• top,bottom

59

left: 200px;





• absolute

• indépendant

• coordonnées absolues

• left,right

• top,bottom

60

top: 0;left : 0;

top: 0;right : 0;

bottom : 0;right : 0;





• fixed

• coordonnées fixes

• fixe dans le viewport

61

bottom 0;left: 0;




CSS 3 float

• l’élément ira aussi loin à gauche ou droite que possible

• float : left|right|none|inherit;

• l’élément suivant s’y adaptera

• pour forcer un retour : clear

62




CSS 3 effets

• transformations

• transitions

• animations

63




CSS 3 transform

• 2D ou 3D

• scale

• rotate

• skew

64

scale

rotate skew




CSS 3 transition

• application au changement de style

• caractéristiques

• CSS à modifier

• durée

65




CSS 3 animation

• permet d’animer le contenu de la page

• possibilité de définir des boucles

• déclenchées automatiquement

66




CSS 3 media types

• permet de cibler un media en particulier

• screen

• print

• braille

• tv

67




CSS 3 media types

• précisé dans l’inclusion de la feuille de style

<link rel="stylesheet"

href="style.css"

media="screen"/>

68




CSS 3 media types• @media dans le fichier CSS

69

@media print { div { }}




CSS 3 media queries

• permet d’ajouter des conditions au style

• largeur de l’écran

• résolution de l’écran

70




CSS 3 media queries• expression booléenne évaluée

• cible des situations particulières

71

@media screen and orientation : portrait { div { }}




JavaScript72




JavaScript

73

• Syntaxe simple

• Héritage prototypal




JavaScript

74

• Importance croissante

• Performances en amélioration continue

• V8

• Nashorn




JSON

• JavaScript Object Notation

• Format d’échange standardisé

75




JSON{! "first": "John",! "last": "Doe",! "age": 39,! "sex": "M",! "salary": 70000,! "registered": true,! "favorites": {! ! "color": "Blue",! ! "sport": "Soccer",! ! "food": "Spaghetti"! } }

76




JSON

• Remplace le XML de plus en plus

• Compact, rapide et flexible

• Tous les navigateurs le comprennent

77




JQuery

78

• Bibliothèque permettant de

• manipuler le DOM

• ajouter des effets

• gérer l’AJAX




Pourquoi ?

• Cross-browser

• syntaxe des sélecteurs calquée sur CSS

• enrichi JavaScript

• communauté importante

79




Concept

• JQuery fait le lien entre le JavaScript et le HTML

• Credo

• trouver des éléments

• leur appliquer une opération

80




Utilisation

• jQuery("selecteur")

• trouve les éléments correspondant à "selecteur"

•

81

jQuery("selecteur")

jQuery(".class") == $(".class")




Fluent API

• Syntaxe permettant de chainer les appels

•

82

$("selecteur") .show() .addClass("green");




JQuery

• Attention aux performances

• librairie prévue pour le desktop

• poids et lenteur peuvent arriver

83




Micro frameworks

• Versions allégées des librairies desktop

• Adaptées au mobile

• mais pas reservées pour autant

84




Zepto

• Zepto (5-10ko)

• puissance des sélecteurs jQuery

• modulaire

85




Hammer.js

• Spécialisé dans le multitouch

• indépendant

• léger (2k)

• pinch, swipe, tap...

86




microjs.com87




Frameworks mobiles

• Bibliothèque de composants

• Émule ou s’interface avec le natif

• Look And Feel spécifiques

88




JQuery Mobile

• Dérivé du célèbre framework

• supporte les thèmes

• multi plateforme

• utilisé par beaucoup

• amélioration du HTML

89




• Basé sur ExtJS

• vraie bibliothèque de composant

• style proche du natif

• courbe d’apprentissage plus élevée

90




Application mobile ?91




Web application

92

• HTML 5 + CSS 3 + JavaScript

• Web application

• L’utilisateur doit lancer son browser

• Pas la visibilité obtenue grace à un store




Application hybride

• Application native offrant une vue sur la webapp

• déployable dans les store

• icône dédiée

93




Application hybride

• Implémentation simple

• une Webview suffit !

94




Appareil photo 95




API natives

96

• Code de compatibilité dans l’application

• interopérabilité avec le JavaScript ?

• portabilité ?




Frameworks

• Idée principale

• accès à toutes les spécificités

• garder un code portable

• enrichir les API JavaScript

97




Appcelerator titanium98




Frameworks

• Appcelerator Titanium

• JavaScript vers code natif

• compatibilité frameworks tiers délicate

• licence complexe

99




PhoneGap100




PhoneGap

• API JavaScript

• acheté par Adobe en 2011

• libéré en tant qu’Apache Cordova

101




PhoneGap

• JavaScript API

• PhoneGap fait le lien

102




API native103




PhoneGap

PhoneGap

104

WebViewPhoneGapJavaScript

Android API provider

iOS API provider

BlackBerry API provider

Windows API provider




PhoneGap:Build

• Build dans le cloud

• Très récent

• Évite toute la configuration locale

105




Build106




Architecture

107




Architecture

• Contenu en HTML

• Présentation en CSS

• Interactions en JavaScript

• accès API natives via PhoneGap

108




Applications

• Souvent connectées

• application cliente

• un serveur web

• échange JSON / XML

109




Côté web

• HTTP

• verbes

• transport

• implémentation libre

• technologie

110




Questions ?Merci de votre attention

111




Mini projetGestion de prêts

112




Mini projet

• Gestion de prêts

• DVD, Livres, Argent, ...

• Utilisation du carnet d’adresse

113




Mini projet

• 5 TP pour le faire

• 2 à 4 personnes

• Utilisation de PhoneGap

114




Mini projet

• Critères de notation

• qualité de l’interface (/5)

• qualité du code produit (/5)

• richesse fonctionnelle (/10)

115




Ressources

• http://www.mobiledesignpatterngallery.com/mobile-patterns.php

• http://phonegap.com/

• http://caniuse.com/

Images belong to their respective authors

116



http://www.mobiledesignpatterngallery.com/mobile-patterns.php

http://www.mobiledesignpatterngallery.com/mobile-patterns.php

http://phonegap.com/

http://phonegap.com/

http://caniuse.com/

http://caniuse.com/

applications mobiles

Documents