Le web mobile est en train d’exploser, d’autant que les principaux périphériques proposent désormais de « vrais » navigateurs, de l’iPhone à Androïd, de Mimo à PalmOS, et même les nouveaux Blackberry.
S’il est déjà bien d’exploiter des feuilles de style mobiles pour adapter l’expérience utilisateur, on souhaite souvent accéder aux capacités du périphérique (géolocalisation, vibreur, accéléromètre…) et offrir une expérience globale aussi « native » que possible.
Il n’est pas pour autant nécessaire de développer des versions natives distinctes ! Des frameworks existent pour un déploiement universel, et cerise sur le gâteau : ça se passe en JavaScript !
Cet atelier vous fera faire un tour d’horizon des principaux frameworks actifs, exemples et démonstrations à l’appui.
Les moteurs JavaScript récents sont ultra-rapides, on commence à pouvoir faire de vraies animations en CSS, on peut dessiner en bitmap comme en vectoriel dans plein de navigateurs, et la vraie 3D accélérée sans plugin est en train de poindre le bout de son nez…
En somme, Flash n’a plus guère d'argument côté effets visuels. D'autant qu'il prend, au final, beaucoup plus de ressources que ses alternatives.
Alors, qu'est-ce que vous attendez pour vous y mettre ? Cet atelier fera un tour d'horizon des possibilités, exemples à l'appui, afin de vous mettre le pied à l'étrier.
Les slides de mon talk à la Kiwiparty 2014 sur la logique Responsive : comment appréhender les différentes problématiques que pose le Responsive Design tout en conservant une bonne maintenabilité
Présentation donnée à SudWeb 2013 (http://www.sudweb.fr/2013), le 17 mai, sur le Responsive Web Design à BBC News (http://m.bbc.co.uk/news).
La technique "Cutting the Mustard" est documentée en détail sur le blog de l'équipe Responsive News: http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Sprockets is an easy solution to managing large JavaScript codebases by letting you structure it, bundle it with related assets, and consolidate it as one single file, with pre-baked command-line tooling, CGI front and Rails plugin. It's a framework-agnostic open-source solution that makes for great serving performance while helping you structure and manage your codebase better.
Best Practice Solutions for Frequest Ajax Use Cases With PrototypeChristophe Porteneuve
These use cases drop in time and again: checkbox lists; live login validation; dynamic form rows; server-side processing progress indicators; list reordering using drag and drop; and more… As always, there are a lot of terrible ways to achieve those, several decent ones, and precious few really good takes. This session will review several such use cases and detail various ways to implement them, contrasting the ugly and the beautiful, showing useful reflexes and rules of thumb, with a special focus on performance and maintenance.
Les moteurs JavaScript récents sont ultra-rapides, on commence à pouvoir faire de vraies animations en CSS, on peut dessiner en bitmap comme en vectoriel dans plein de navigateurs, et la vraie 3D accélérée sans plugin est en train de poindre le bout de son nez…
En somme, Flash n’a plus guère d'argument côté effets visuels. D'autant qu'il prend, au final, beaucoup plus de ressources que ses alternatives.
Alors, qu'est-ce que vous attendez pour vous y mettre ? Cet atelier fera un tour d'horizon des possibilités, exemples à l'appui, afin de vous mettre le pied à l'étrier.
Les slides de mon talk à la Kiwiparty 2014 sur la logique Responsive : comment appréhender les différentes problématiques que pose le Responsive Design tout en conservant une bonne maintenabilité
Présentation donnée à SudWeb 2013 (http://www.sudweb.fr/2013), le 17 mai, sur le Responsive Web Design à BBC News (http://m.bbc.co.uk/news).
La technique "Cutting the Mustard" est documentée en détail sur le blog de l'équipe Responsive News: http://responsivenews.co.uk/post/18948466399/cutting-the-mustard
Sprockets is an easy solution to managing large JavaScript codebases by letting you structure it, bundle it with related assets, and consolidate it as one single file, with pre-baked command-line tooling, CGI front and Rails plugin. It's a framework-agnostic open-source solution that makes for great serving performance while helping you structure and manage your codebase better.
Best Practice Solutions for Frequest Ajax Use Cases With PrototypeChristophe Porteneuve
These use cases drop in time and again: checkbox lists; live login validation; dynamic form rows; server-side processing progress indicators; list reordering using drag and drop; and more… As always, there are a lot of terrible ways to achieve those, several decent ones, and precious few really good takes. This session will review several such use cases and detail various ways to implement them, contrasting the ugly and the beautiful, showing useful reflexes and rules of thumb, with a special focus on performance and maintenance.
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
Actionscript. Language de programmation utilisé pour le développement de jeux, d'applications web, de lecteurs vidéo et de sites web.
Il est maintenant possible de l'utiliser pour le développement pour les mobiles et les tablettes. Que ça soit pour la plate-forme Android, iOS ou pour la tablette Blackberry Playbook, un projet en actionscript peut être utilisé pour tous.
Une code pour les développer tous.
Cette présentation montrera la situation réel de l'actionscript dans l'éco-système du développement mobile actuel.
Ce qui sera couvert:
Quels sont les avantages et les désavantages de cette technologie?
Un exemple réel svp!
Mon équipe web peut-il développer mon application? Oui, mais... voici mes conseils.
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ?
Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
"It's an App World", nous disait Flurry (solution de mobile analytics) en 2014. Pourtant, les marques font face à des coûts de déploiement et de maintien des applications souvent élevés. Pire encore, selon Google, seules 3 applications - sur la moyenne de 15 qu'en compte un smartphone en France - seraient régulièrement utilisées par un mobinaute. Alors avec ses 20% de temps passé sur mobile, le navigateur web présente-t-il une alternative efficace aux stores ? Etat des lieux des usages, des solutions techniques, des expériences créatives et des enjeux marketing que le Mobile Web permet encore d'adresser. Avec beaucoup d'exemples concrets à la clé !
Développement d'applications mobiles hybrides avec IONIC 2 et Angular 2. Depuis l'installation jusqu'à l'utilisation de plugins natifs tels que stockage de données, géolocalisation, liaison serveur API Rest...
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
Après le succès de la première séance, je présente avec Mélanie Bessagnet (@mbessagnet) pour la deuxième fois la session "Introduction au développement iOS" organisée par iConcept à Toulouse et ekito.
La présentation permettra en 3 heures d'aborder de nombreux thèmes, aussi bien pratiques que techniques sur le développement d'application iOS (iPhone et iPad). Elle est destinée à la fois aux néophytes, mais aussi aux développeurs (java, web, php) ... car une séance de 45 minutes sera du code pure (et donc du pure bonheur ;).
Voici le programme :
Succès d'IOS
iOS
l'excellence Ergonomique
App Store (en quoi consiste la publication sur l'app store ? nous expliquerons aussi en détail les différentes licences développeurs)
Développer
Concevoir (avec Story Boarding)
Profiles et Certificats
Beta Testing
MDM (nous expliquerons comment est géré une flotte de terminaux (iPhone, iPad) gràce au Mobile Device Management)
Coder
L'environnement de développement XCode
Objective-C en 15 minutes
Les nouveautés du SDK iOS 5 (ARC, iCloud, Apparearence, ...)
Coding (Pratique)
il s'agit de coder une première (petite) application. Le code de l'application sera disponible en début de séance.
Contenu connexe
Similaire à Tirer parti des périphériques mobiles dans une application web : qui a dit qu’il fallait coder plusieurs versions natives ?
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
Conférence au salon E-Commerce Paris 2012 de Stéphane Lecouturier Directeur Création & User Experience, altima°.
Applications (iPhone, Android, iPad…) ? Site mobile ? Ou site responsive qui s’adapte à tous les devices ?
Même si l’enjeu du mobile est devenu une évidence, la tactique pour l’aborder l’est beaucoup moins.
Clarifiez votre vision du mobile en 45 minutes de démêlage de l’univers bouillonnant du cross-device.
Actionscript. Language de programmation utilisé pour le développement de jeux, d'applications web, de lecteurs vidéo et de sites web.
Il est maintenant possible de l'utiliser pour le développement pour les mobiles et les tablettes. Que ça soit pour la plate-forme Android, iOS ou pour la tablette Blackberry Playbook, un projet en actionscript peut être utilisé pour tous.
Une code pour les développer tous.
Cette présentation montrera la situation réel de l'actionscript dans l'éco-système du développement mobile actuel.
Ce qui sera couvert:
Quels sont les avantages et les désavantages de cette technologie?
Un exemple réel svp!
Mon équipe web peut-il développer mon application? Oui, mais... voici mes conseils.
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
NodeJs, GruntJs, Bower, Karma, ... des buzzwords dont nous entendons parler, que nous voyons passer dans les blogs/articles. Mais à quoi servent-ils ?
Comment industrialiser nos développements Javascript ? Mettre en place des tests unitaires dans une application Web ? Générer de la documentation ? Des métriques qualités ? La couverture de code ? Comme avec Maven ? Nous verrons concrètement comment articuler tous ces outils autour d'une application école, pour démystifier tout ça.
Web Mobile : quelles opportunités face aux apps ?NiceToMeetYou
"It's an App World", nous disait Flurry (solution de mobile analytics) en 2014. Pourtant, les marques font face à des coûts de déploiement et de maintien des applications souvent élevés. Pire encore, selon Google, seules 3 applications - sur la moyenne de 15 qu'en compte un smartphone en France - seraient régulièrement utilisées par un mobinaute. Alors avec ses 20% de temps passé sur mobile, le navigateur web présente-t-il une alternative efficace aux stores ? Etat des lieux des usages, des solutions techniques, des expériences créatives et des enjeux marketing que le Mobile Web permet encore d'adresser. Avec beaucoup d'exemples concrets à la clé !
Développement d'applications mobiles hybrides avec IONIC 2 et Angular 2. Depuis l'installation jusqu'à l'utilisation de plugins natifs tels que stockage de données, géolocalisation, liaison serveur API Rest...
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
Alors que le Web évolue, les standards doivent suivre la cadence. Cette nouvelle version de HTML vous offre la simplicité et la puissance pour créer une expérience mobile encore meilleure. De plus, avec des philosophies telles que le "Responsive Web Design", nous voyons ce dernier autrement: il n'y a plus de Web spécifique aux différentes plateformes, mais un Web adaptatif. Voyons ensemble quelques-unes des fonctionnalités d'HTML5, le principe du design adaptatif et bien sûr, de quelle manière la version 5 de HTML révolutionne le Web, mais surtout la mobilité d'aujourd'hui et de demain.
"Introduction aux Developements iOS" in Three hoursLaurent MEURISSE
Après le succès de la première séance, je présente avec Mélanie Bessagnet (@mbessagnet) pour la deuxième fois la session "Introduction au développement iOS" organisée par iConcept à Toulouse et ekito.
La présentation permettra en 3 heures d'aborder de nombreux thèmes, aussi bien pratiques que techniques sur le développement d'application iOS (iPhone et iPad). Elle est destinée à la fois aux néophytes, mais aussi aux développeurs (java, web, php) ... car une séance de 45 minutes sera du code pure (et donc du pure bonheur ;).
Voici le programme :
Succès d'IOS
iOS
l'excellence Ergonomique
App Store (en quoi consiste la publication sur l'app store ? nous expliquerons aussi en détail les différentes licences développeurs)
Développer
Concevoir (avec Story Boarding)
Profiles et Certificats
Beta Testing
MDM (nous expliquerons comment est géré une flotte de terminaux (iPhone, iPad) gràce au Mobile Device Management)
Coder
L'environnement de développement XCode
Objective-C en 15 minutes
Les nouveautés du SDK iOS 5 (ARC, iCloud, Apparearence, ...)
Coding (Pratique)
il s'agit de coder une première (petite) application. Le code de l'application sera disponible en début de séance.
Similaire à Tirer parti des périphériques mobiles dans une application web : qui a dit qu’il fallait coder plusieurs versions natives ? (20)
"Introduction aux Developements iOS" in Three hours
Tirer parti des périphériques mobiles dans une application web : qui a dit qu’il fallait coder plusieurs versions natives ?
1. TIRER PARTI DES PÉRIPHÉRI-
QUES MOBILES DANS UNE
APPLICATION WEB
Qui a dit qu’il fallait coder plusieurs versions natives ?
Christophe Porteneuve @ Paris Web 2010
3. Les applis natives ?
Pas besoin pour…
• L&Fsimilaire au natif (CSS + JS, les gars ! Et iUI, Jo, Sencha
Touch…)
• Géolocalisation (fournie par le navigateur)
• Sons (HTML5 <audio> pawa)
• Stockage
persistent côté client (localStorage, Web Storage,
Web SQL Database, Lawnchair, PersistJS…)
• Notifications « push » avec l’appli ouverte (Web Sockets)
4. En revanche, besoin des applis
natives pour…
• Contacts
• Envoi de SMS/MMS
• Enregistrement de son/vidéo
• Photos (prise, modification et accès bibliothèque)
• Accéléromètre / Magnétomètre / Vibreur…
• Notifications « push » avec l’appli fermée
• D’une manière générale, les capacités du périphérique
6. Applis 100% web
• HTML permet la structure qu’on veut
• CSS permet l’aspect qu’on veut
• JS permet le comportement qu’on veut
• On a la géolocalisation
• On a le son
• Pourquoi changer ?
7. 100% web : les outils
• HTML5, CSS3 (dont Transforms, Animations, Transitions), JS
• CSS Media Queries
• XUI, ZeptoJS
• Jo, Wink, Sencha Touch
• Web Storage, Web SQL Database, Lawnchair, PersistJS
• Web Sockets, Socket.IO
8. Un mot sur CSS Media Queries
// http://www.w3.org/TR/css3-mediaqueries/
// La CSS entière :
<link rel="stylesheet" type="text/css" href="…"
media="screen and (min-device-width: 800px)" />
// Fragment dans une CSS :
@media screen and (min-device-width: 800px) {
…
}
• Une vraie démo concrète qu’elle est bien
• En natif sur Saf3+, FF3.5+, Chrome, Opera 7+, IE9+
• Utilisable
sur Saf2+, FF, Chrome, Opera 7+, IE5+ avec
http://code.google.com/p/css3-mediaqueries-js
9. Web mobile : souvenez-vous…
• JS va moins vite (voire beaucoup moins vite !)
• La bande passante est plus petite
• Le cache est très sélectif (limites de taille, etc.)
Y’a pas de mouseover / mouseout / :hover
• Mais on a (en général) HTML5, CSS3, DOM2, SVG…
10. Frameworks JS pour le mobile
• On oublie Prototype, jQuery, Dojo, YUI, MooTools, ExtJS…
• XUI
• ZeptoJS
• iUI
• Jo, Wink, Sencha Touch
• Et en complément, Lawnchair, PersistJS, Socket.IO…
11. 100% web : pour/contre
• Avantages
• Que des choses qu’on aime déjà
• Développement dans ton navigateur !
• Pas d’App Stores, de validations, de déploiement…
• Inconvénients
• Pas d’accès à la majorité des capacités des périphériques
12. Applis « 95% web »
• Lorsque
les technos web suffisent à l’aspect, mais que le
comportement requiert 1+ fonctions du périphérique
• Cas les plus fréquents :
• Notifications « push »
• Vibreur
• Accéléromètre
13. 95% web : les outils
• Les mêmes que pour le 100% web…
• …plusles SDK natifs ou leur enrobage « unifié » (voir
approche suivante)
14. 95% web : pour/contre
• Avantages
• Presque tous ceux du 100% web
• Accès à toutes les capacités des périphériques
• Inconvénients
• App Stores, soumission + acceptation, déploiement, etc.
• Il faut se farcir les différentes plates-formes ciblées
15. Applis natives basées
HTML+CSS+JS : « hybrides »
• Le périphérique est censé faire partie intégrante de
l’expérience utilisateur qu’on recherche
• Mais côté UI, les technos web suffisent toujours à nos besoins.
• Besoins typiques :
• Manipulation d’images (prise de photo, accès albums…)
• Prise de son (chat audio, identification de musique…)
• Accès au carnet d’adresses
17. Phonegap
• API JavaScript unifiée, accessible direct dans tes pages
• Fournit un accès aux capacités locales du périphérique
• Camera / Contact / Device / Network / Notification / …
• iPhone, Android, webOS, Symbian, Blackberry, WP7 (bientôt)
• Fait par Nitobi. Open-source. Sur Github.
18. Titanium Mobile
• API JavaScript unifiée, mais pas dans les pages directement…
• Fournit un accès aux capacités locales du périphérique
• Camera / Contact / Device / Network / Notification / …
• iPhone, Android
• Fait par Appcelerator. Mix OSS/commercial.
19. Unify
• En gros, Phonegap + qooxdoo + SASS
• Maintenu par Deutsche Telekom.
• Open-source depuis JSConf.eu 2010. Sur Github.
• http://unify.github.com/unify/ (pas bien référencé encore…)
20. Un mot sur les SDK…
• Mais comme c’est trop super chiant !
• Le simulateur Android met 3 plombes à démarrer
• Le SDK Blackberry ne tourne que sur Windows (?!)
• Le SDK webOS nécessite une VM VirtualBox (bon…)
• Et puis simulateur ≠ périphérique !
21. …mais patience !
• build.phonegap.com
• En ligne, gratuit
• Tufiles ton www/, ils te sortent ton appli packagée pour
chaque plate-forme prise en charge !
• Sortie prévue fin novembre 2010
• apparat.io
• Même principe, sortie théorique octobre 2010 (ahem…)
22. Hybrides : pour/contre
• Avantages
• Sion se débrouille bien, on code son appli une seule fois, et
on la déploie sur l’ensemble des plates-formes prises en
charge !
• Inconvénients
• Ilfaut quand même installer/configurer tous les SDK et outils
associés…
23. Applis 100% natives
• On utilise le SDK natif de la plate-forme, son langage, son API
• On a accès à l’intégralité des API de la plate-forme, donc on
peut proposer une expérience aussi riche et « native » qu’on
le souhaite.
24. 100% natives : les outils
• Bin, les SDKs, quoi (tous gratuits) :
• iOS= Xcode (excellentes docs) + iPhone Developer
Program pour pouvoir déployer sur périph./store ($99/an)
• Android = Eclipse + Android SDK
• webOS = SDK/PDK (basé Java + JS)
• Symbian = Aptana + SDK
• Blackberry = Eclipse + SDK (mais que Windows !)
25. 100% natives : pour/contre
• Avantages
• On peut utiliser la totale des fonctions du SDK et du
périphérique
• On garantit (si on veut) un L&F natif
• Inconvénients
• On doit apprendre l’API (voire un langage), et parfois payer
pour avoir le droit de déployer (Apple/iOS, $99/an).
26. En résumé…
100% 95% 100%
Hybride
web web natif
browsers + browsers +
Dév. browsers EDI
EDI/outils EDI/outils
browsers + browsers +
Tests browsers sim./périph.
sim./périph. sim./périph.
duplication
Multi-PF universel assez facile assez facile
d’effort
Distrib. App Stores App Stores App Stores
pas besoin ! (mais pas souvent)
27. Il est plus que temps !
• Laconsultation web sur les mobiles / tablettes / etc. est en
train d’exploser celle sur desktop.
• Utiliser
intelligemment les capacités du périphériques permet
des passerelles sympa (réalité augmentée, media blogging, geo
blogging… jusqu’où s’arrêteront-ils ?)
• Toutes
les technos sont là, utilisables pour la grosse majorité
du marché des smartphones ! Allez-y, bordel !