Applications mobiles

Applications mobiles
One code to rule them all !

1 Cedric Gatay - c.gatay@srmvision.com Pulling ITSM together

Cedric Gatay
SRMvision - Tech Lead
Android Developer

@Cedric_Gatay


Interfaces utilisateur

Éléments de navigation
• Interactions utilisateurs
• Grille
• Liste
• Onglets
• Skeumorphisme
• Carrousel
• Zone inﬁnie


Grille
• Balance l’importance des éléments


Liste
• Efﬁcace pour beaucoup d’éléments


Onglets
• Attention à marquer la différence visuelle


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


Carrousel
• Navigation dans peu d’éléments


Zone inﬁnie
• N’afﬁche qu’une partie de l’élément


Éléments d’interface

• Inscription / Connexion
• Recherche
• Action
• Conﬁrmation / Notiﬁcation
• Premier lancement

Inscription / Connexion
• Rendre facile l’inscription


Recherche
• Enrichir les résultats au ﬁl de l’eau


Action
• Ne pas hésiter à utiliser du texte


Notiﬁcations
• Intrusif donc à utiliser avec précaution


Premier lancement
• Apprendre l’utilisation à ses utilisateurs


Points de vigilance

• Skeumorphisme mal choisi
• Boites de dialogue inutiles
• Non conforme aux recommendations
• Interface surchargée


Mobiles

Points communs

• Capteurs
• Résolution limitée
• Connectivité limitée
• Puissance limitée


Différences

• 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


Problématiques

• Beaucoup (trop ?) de plateformes
• Marché verrouillé
• Les utilisateurs veulent votre application
peu importe leur device


Problématiques

• Nécessité de développer pour chaque
device
• Coûteux
• Difﬁcile


Une solution

• Technologies Web

• ancien ( > 15 ans)

• cible principale des
mobiles


Technologies Web

• standardisé
• peu coûteux
• facile à comprendre


Write Once Run Anywhere

Tour d’horizon

HTML 5

• Certainement la seule technologie cross-
platform
• simple et universel


HTML 5

• nouveau standard du HTML
• supporté par une majorité de browsers
• http://caniuse.com


Pourquoi HTML 5

Extension d’HTML 4
• nouvelles balises
• nouveaux attributs
• nouvelles API


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


HTML Doctype

• Indispensable
• Dicte au browser le mode de parsing


HTML 5

• Nouvelles balises
• séparation contenu / présentation


Nouvelles balises

<section> zone de la page
<header> en-tête de section
<footer> pied de page de section
<nav> zone de navigation


HTML 5 Metadata

• attribut data-* des balises
• récupérable en JavaScript


HTML 5 validation

• indication du type de données
• évite la validation JavaScript


HTML 5 validation

<input type="date">
<input type="email">
<input type="number">


HTML 5 Forms

• autofocus
• positionne le focus sur l’élément
• placeholder
• indique le contenu attendu


HTML 5 Forms

• required
• indique que le champ doit être rempli
• pattern
• permet de spéciﬁer le contenu attendu


HTML5 Multimedia

• <audio|video>
• inclusion de ﬁchier son / video
• contrôlable en JavaScript


HTML5 : stockage

• localStorage
• stockage clef / valeur
• associé au site
• persistant


HTML5 : stockage

• sessionStorage
• perdu à la fermeture du browser


HTML5 : stockage

• WebSQL
• implémentation SQL
• persistant


HTML5 : stockage

• IndexedDB
• évolution de WebSQL
• peu supporté


HTML5 : stockage

• Cache d’application
• utilisation hors ligne
• écriture d’un ﬁchier manifest
• non supporté par IE


HTML5 géolocalisation

• récupération de la latitude/longitude
• API JavaScript : navigator.geolocation
• watchPosition() pour suivre le
déplacement


HTML5 websockets

• communication bidirectionnelle
• conﬁguration serveur spéciﬁque


HTML5 Canvas

• graphisme dans le browser
• contrôlable par JavaScript


HTML5 Web workers

• JavaScript est mono-thread
• traitement asynchrone
• en arrière plan
• non bloquant


CSS 3

CSS 3

• Norme conjointe au HTML 5
• Supporté par tous les navigateurs récents


CSS 3

• Plus simple
• Meilleures performances


CSS 3

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


CSS 3
• Héritage des propriétés
• Combinaisons possibles
h1,h2,h3 {
color : blue;
}


CSS 3 sélecteurs
• Par type
a{}
• Par id
#element{}
• Par classe
.maClasse{}


CSS 3 sélecteurs
• h1 pp
h1
• <p> contenus dans <h1>
• h1 >>p p
h1
• <p> ﬁls direct de <h1>
• h1 ++p p
h1
• <p> juste après <h1>

CSS 3 apparence
margin
border
padding

content


CSS 3 positionnement

• static
• empilement des
éléments


• relative
• identique static
• ajustement left: 200px;
possible

• left,right
• top,bottom

• absolute top: 0;
left : 0;
top: 0;
right : 0;

• indépendant
• coordonnées
absolues

• left,right bottom : 0;
right : 0;

• top,bottom


• fixed
• coordonnées
fixes

• fixe dans le
viewport bottom 0;
left: 0;


CSS 3 ﬂoat

• l’élément ira aussi loin à gauche ou droite
que possible
• ﬂoat : left|right|none|inherit;
• l’élément suivant s’y adaptera
• pour forcer un retour : clear


CSS 3 effets

• transformations
• transitions
• animations


CSS 3 transform

• 2D ou 3D scale

• scale
• rotate
• skew rotat
e
skew


CSS 3 transition

• application au changement de style
• caractéristiques
• CSS à modiﬁer
• durée


CSS 3 animation

• permet d’animer le contenu de la page
• possibilité de déﬁnir des boucles
• déclenchées automatiquement


CSS 3 media types

• permet de cibler un media en particulier
• screen
• print
• braille
• tv

CSS 3 media types

• précisé dans l’inclusion de la feuille de style
<link rel="stylesheet"
href="style.css"
media="screen"/>


CSS 3 media types
• @media dans le ﬁchier CSS
@media print {
div { }
}


CSS 3 media queries

• permet d’ajouter des conditions au style

• largeur de l’écran

• résolution de l’écran


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

• cible des situations particulières

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


JavaScript

JavaScript

• Syntaxe simple
• Héritage prototypal


JavaScript

• Importance croissante
• Performances en amélioration continue
• V8
• Nashorn


JSON

• JavaScript Object Notation
• Format d’échange standardisé


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


JSON

• Remplace le XML de plus en plus
• Compact, rapide et ﬂexible
• Tous les navigateurs le comprennent


JQuery

• 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


Concept

• JQuery fait le lien entre le JavaScript et le
HTML
• Credo
• trouver des éléments
• leur appliquer une opération


Utilisation

• jQuery("selecteur")
jQuery("selecteur")
• trouve les éléments correspondant à
"selecteur"
• jQuery(".class")
== $(".class")


Fluent API

• Syntaxe permettant de chainer les appels
• $("selecteur")
.show()
.addClass("green");


JQuery

• Attention aux performances
• librairie prévue pour le desktop
• poids et lenteur peuvent arriver


Micro frameworks

• Versions allégées des librairies desktop
• Adaptées au mobile
• mais pas reservées pour autant


Zepto

• Zepto (5-10ko)
• puissance des sélecteurs jQuery
• modulaire


Hammer.js

• Spécialisé dans le multitouch
• indépendant
• léger (2k)
• pinch, swipe, tap...


microjs.com

Frameworks mobiles

• Bibliothèque de composants
• Émule ou s’interface avec le natif
• Look And Feel spéciﬁques


JQuery Mobile

• Dérivé du célèbre framework
• supporte les thèmes
• multi plateforme
• utilisé par beaucoup
• amélioration du HTML

• Basé sur ExtJS
• vraie bibliothèque de composant
• style proche du natif
• courbe d’apprentissage plus élevée


Application mobile ?

Web application

• 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


Application hybride

• Implémentation simple
• une Webview sufﬁt !


Appareil photo

API natives

• Code de compatibilité dans l’application
• interopérabilité avec le JavaScript ?
• portabilité ?


Frameworks

• Idée principale
• accès à toutes les spéciﬁcités
• garder un code portable
• enrichir les API JavaScript


Appcelerator titanium

Frameworks

• Appcelerator Titanium
• JavaScript vers code natif
• compatibilité frameworks tiers délicate
• licence complexe


PhoneGap

PhoneGap

• API JavaScript
• acheté par Adobe en 2011
• libéré en tant qu’Apache Cordova


PhoneGap
• JavaScript API
• PhoneGap fait le lien


API native

PhoneGap
PhoneGap
Android
API provider

iOS
API provider
PhoneGap
WebView
JavaScript
BlackBerry
API provider

Windows
API provider


PhoneGap:Build

• Build dans le cloud
• Très récent
• Évite toute la conﬁguration locale


Build

Architecture


Architecture

• Contenu en HTML
• Présentation en CSS
• Interactions en JavaScript
• accès API natives via PhoneGap


Applications

• Souvent connectées
• application cliente
• un serveur web
• échange JSON / XML


Côté web

• HTTP
• verbes
• transport
• implémentation libre
• technologie

Questions ?
Merci de votre attention


Mini projet
Gestion de prêts


Mini projet

• Gestion de prêts
• DVD, Livres, Argent, ...
• Utilisation du carnet d’adresse


Mini projet

• 5 TP pour le faire
• 2 à 4 personnes
• Utilisation de PhoneGap


Mini projet

• Critères de notation
• qualité de l’interface (/5)
• qualité du code produit (/5)
• richesse fonctionnelle (/10)


Ressources

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

• http://phonegap.com/

• http://caniuse.com/

Images belong to their respective authors


Applications mobiles

Empfohlen

Empfohlen

Weitere ähnliche Inhalte

Ähnlich wie Applications mobiles

Ähnlich wie Applications mobiles (20)

Applications mobiles