applications mobiles

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

Applications mobilesOne code to rule them all !

Cedric GataySRMvision - Tech LeadAndroid Developer

@Cedric_Gatay

Interfaces utilisateur3

Éléments de navigation

• Interactions utilisateurs

• Grille

• Liste

• Onglets

• Skeumorphisme

• Carrousel

• Zone infinie

Grille

• Balance l’importance des éléments

• Efficace 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 infinie

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

Éléments d’interface

• Inscription / Connexion

• Recherche

• Action

• Confirmation / Notification

• Premier lancement

Inscription / Connexion

• Rendre facile l’inscription

Recherche

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

Action

• Ne pas hésiter à utiliser du texte

Notifications

• 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

Mobiles18

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

• Difficile

Une solution

• Technologies Web

• ancien ( > 15 ans)

• cible principale des mobiles

Technologies Web

• standardisé

• peu coûteux

• facile à comprendre

Write Once Run Anywhere26

Tour d’horizon27

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

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écifier le contenu attendu

HTML5 Multimedia

• <audio|video>

• inclusion de fichier 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 fichier 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

• configuration serveur spécifique

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 350

• Norme conjointe au HTML 5

• Supporté par tous les navigateurs récents

• Plus simple

• Meilleures performances

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

• Héritage des propriétés

• Combinaisons possibles

h1,h2,h3 { color : blue;}

CSS 3 sélecteurs

• Par type

• Par id

• Par classe

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

h1 > p

h1 + p

CSS 3 apparence

margin

border

padding

content

CSS 3 positionnement

• static

• empilement des éléments

• relative

• identique static

• ajustement possible

• left,right

• top,bottom

left: 200px;

• absolute

• indépendant

• coordonnées absolues

• left,right

• top,bottom

top: 0;left : 0;

top: 0;right : 0;

bottom : 0;right : 0;

• fixed

• coordonnées fixes

• fixe dans le viewport

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

CSS 3 effets

• transformations

• transitions

• animations

CSS 3 transform

• 2D ou 3D

• scale

• rotate

• skew

rotate skew

CSS 3 transition

• application au changement de style

• caractéristiques

• CSS à modifier

• durée

CSS 3 animation

• permet d’animer le contenu de la page

• possibilité de définir 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

href="style.css"

media="screen"/>

CSS 3 media types• @media dans le fichier 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 { }}

JavaScript72

JavaScript

• Syntaxe simple

• Héritage prototypal

JavaScript

• Importance croissante

• Performances en amélioration continue

• V8

• Nashorn

• 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"! } }

• Remplace le XML de plus en plus

• Compact, rapide et flexible

• 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")

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

jQuery("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 (5-10ko)

• puissance des sélecteurs jQuery

• modulaire

Hammer.js

• Spécialisé dans le multitouch

• indépendant

• léger (2k)

• pinch, swipe, tap...

microjs.com87

Frameworks mobiles

• Bibliothèque de composants

• Émule ou s’interface avec le natif

• Look And Feel spécifiques

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 ?91

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 suffit !

Appareil photo 95

API natives

• 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

Appcelerator titanium98

Frameworks

• Appcelerator Titanium

• JavaScript vers code natif

• compatibilité frameworks tiers délicate

• licence complexe

PhoneGap100

PhoneGap

• API JavaScript

• acheté par Adobe en 2011

• libéré en tant qu’Apache Cordova

PhoneGap

• JavaScript API

• PhoneGap fait le lien

API native103

PhoneGap

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

Build106

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

Documents

emerging trends and uses of mobiles applications

explorer la récurrence d’usage des applications mobiles...

blue solutions · 02 — message du président 04 —...

devmobca: applications mobiles: hybrid ou natif?

chp2 - conception ux-ui des applications mobiles

stores d’entreprise, comment déployer vos applications...

applications mobiles de santé et objets connectés : vers...

applications mobiles et analytiques avec sap hana cloud...

ebook inflexsys : applications mobiles : usages pertinents...

cn4 - communiquer à travers internet et les applications...

applications mobiles en rhone-alpes

sites, webapps et applications mobiles

rv tic - les applications mobiles

applications mobiles et sécurité

usages et valeurs des applications mobiles pour les … ·...

cabestan gestion des notifications sur applications mobiles

applications mobiles

les applications mobiles de santé sont-elles efficaces

les applications mobiles pour l’apprentissage des langues

applications mobiles colloque ia-tice lille 2011