Invasions multi-écrans

Agnès Labbé Thibaut Sailly Invasions multi-écrans - WIF2012 www.pia.fr @missagla
@thibautsailly

Le programme de cette belle matinée WEB 2h APP hybride
0h45 Responsive web design Conception Outils & méthodes PhoneGap

Matinée à thème Un site qui permet de consulter les
photos prises par les fans dans diﬀérentes villes du monde, et d’ajouter soi-même des photos.

Le périmètre à couvrir WEB - Consultation du service APP
hybride - Actions, ajout d’images

Et vous ?

WEB - Conception des écrans Lister les blocs de contenu
Déﬁnir et sécuriser leurs limites Lister les terminaux à prendre de compte Déterminer les diﬀérentes largeurs des écrans à concevoir Croquis des écrans Validation d’un markup commun à tous

Définir et sécuriser leurs limites Lister les terminaux à prendre de compte Déterminer les différentes largeurs des écrans à concevoir Croquis des écrans Validation d’un markup commun à tous Le titre Navigation primaire Items du flux Navigation secondaire Lien d’inscription

Déﬁnir et sécuriser leurs limites Lister les terminaux à prendre de compte Déterminer les diﬀérentes largeurs des écrans à concevoir Croquis des écrans Validation d’un markup commun à tous Le titre : “invasions” Navigation primaire : “cities”, “search”, “shop”, “login” Items : • photo : format 4/3 • ville : 20 caractères max • auteur : 15 caractères max • date : jj/mm/aa • adresse : 70 caractères max Navigation secondaire : “past”, “future” Lien d’inscription : “play”

Déﬁnir et sécuriser leurs limites Lister les terminaux à prendre de compte Déterminer les plages d’écrans à concevoir Croquis des écrans Validation d’un markup commun à tous Smartphone Tablette Laptop Desktop medium Desktop large

Déﬁnir et sécuriser leurs limites Lister les terminaux à prendre de compte Déterminer les diﬀérentes largeurs des écrans à concevoir Croquis des écrans Validation d’un markup commun à tous Smartphone < 480 Tablette 480 · · · 1024 Laptop 200 · · · 800 Desktop medium 800 · · · 1200 Desktop large 1200 · · · ∞

Déﬁnir et sécuriser leurs limites Lister les terminaux à prendre de compte Déterminer les diﬀérentes largeurs des écrans à concevoir Croquis des écrans Validation d’un markup commun à tous Au boulot

WEB - Conception des écrans Le titre : “invasions” Navigation
: “cities”, “search”, “shop”, “login” Items : • photo : format 4/3 • ville : 20 caractères max • auteur : 15 caractères max • date : jj/mm/aa • adresse : 70 caractères max Navigation chronologique : “past”, “future” Lien d’inscription : “play” 20 minutes

... Navigation primaire Photos items Description items Navigation secondaire Lien
d’inscription

Navigation primaire Photos items Description items Navigation secondaire Lien d’inscription
...

... ... ... Titre Navigation primaire Photos items Description items
Navigation secondaire Lien d’inscription

WEB - Ecriture du markup Petit apparté sur les outils

WEB - Ecriture du markup Petit apparté sur les outils
édition du code aﬃchage dans le navigateur analyse Thème couleur Auto-complétion Raccourcis clavier Organisation du code Inspecteur de code Mesures à l’écran Guides Documentation

WEB - Ecriture du markup <html> <head> </head> <body> </body>
</html>

WEB - Ecriture du CSS * { margin:0; padding:0; }

APP hybride PhoneGap (Cordova)

APP Hybride - Contexte 44% Smartphones Abonnés mobiles 30% 50%
iOS Android 40 000 000 En 2 ans Tablettes mobile desktop > facebook, twitter ...

APP Hybride - Contexte Portail mutli-activités Applications omni-présentes Vie quotidienne

APP Hybride - Marché Objective C Java Java / ActionScript
C# iOS Android Blackberry Windows Phone 29% 53% 10% 3%

APP Hybride - Solutions Mobile Native App Mobile Web App
Mobile Hybride App

Mobile Hybride App Avantage : performances Inconvénient : dépendant du device

Mobile Hybride App Avantage : atteint tous les terminaux Inconvénient : pas d’accès aux fonctionnalités natives

Mobile Hybride App Avantage : accès aux fonctionnalités native du device Inconvénient : performances ﬂexibles ( ~ complexité app)

APP Hybride - PhoneGap Qu’est ce que c’est ? Un
«pont» entre les technos web et les fonctionnalités du smartphone

APP Hybride - PhoneGap Qu’est ce que c’est ? •
une librairie javascript • une librairie native pour chaque plateforme • un support de compilation et de déploiement open source

APP Hybride - PhoneGap Ca n’est pas ? • un
framework UI • n'inclus pas un browser ou un engin de rendu • ne se compile pas • chaque plateforme nécessite sa propre compilation • la compatibilité HTML5/CSS3 varie en fonction des plateformes

APP Hybride - PhoneGap Fonctionnalités • Accelerometer • Camera •
Compass • Contacts • File • Geolocalisation • Media • Network • Notiﬁcation (alert, sound, vibration) • Storage

APP Hybride - PhoneGap Architecture App Native (.apk, .ipa ...)
API native (sensors) Web view native votre code HTML JS CSS

APP Hybride - PhoneGap

APP Hybride - PhoneGap Exemples

APP Hybride - Développer avec PhoneGap Développer Compiler Tester Débugger

• Télécharger Phonegap • Utiliser l’IDE HTML/CSS de votre choix • écrire le html / css nécessaire ... • tester dans le navigateur • insérer le javascript

CSS / HTML

APP Hybride - Développer avec PhoneGap Js Développer Compiler Tester
Débugger

en fonction du device cible, installer le SDK & IDE recommandé : Compiler sur votre poste • Xcode pour iOS • Eclipse pour Android • Webworks pour Blackberry • Nokia Web Tools pour Symbian • ...

en fonction du device cible, installer le SDK & IDE recommandé : • ouvrir un compte sur build.phonegap.com • ! iOS : nécessiter de posséder un compte Apple Developer Compiler sur le cloud : PhoneGap Build

build.phonegap.com

xCode

• Utiliser un navigateur moderne • Installer un émulateur oﬃciel (http://www.mobilexweb.com/emulators) • Installer l’émulateur Ripple (mutliplateforme) • Récupérer des devices cibles

• Utiliser le navigateur pour débugger votre HTML / JS / CSS • Sur le terminal : impossible de faire du ligne par ligne • solution 1 : utiliser WEINRE (Web Inspector Remote) pour manipuler le DOM depuis votre ordinateur • solution 2 : debug.phonegap.com • (! whitelist)

APP Hybride - Développer avec PhoneGap WORA ? (Write Once,
Run Anywhere ?) Les challenges

WORA ? (Write Once, Run Anywhere ?) APP Hybride -
Développer avec PhoneGap Les challenges La vérité : Write Once, Debug Everywhere

APP Hybride - Développer avec PhoneGap Les challenges • Les
tests • Les perfs • Frameworks du marché vs. custom • Hybride ?

APP Hybride - Développer avec PhoneGap Nos conseils • Tester
rapidement dans le terminal (émulateur non fiable) • Créer un seul projet multiplateforme, mutualiser au maximum le code HTML/CSS/JS / industrialiser • Bien définir l’architecture globale en fonction de la complexité de l’app : utilisation d’un framework UI du marché vs développement custom ? • Travailler l’UX pour reproduire les effets natifs (touchdown, touchafter ...)

Agnès Labbé Thibaut Sailly Invasions multi-écrans - WIF2012 www.pia.fr @missagla
@thibautsailly bit.ly/KNplk2

Invasions multi-écrans

Invasions multi-écrans

Other Decks in Technology

Featured

Transcript