Développement mobile HTML5

Node – Bordeaux JS 26 septembre 2013 Pierre Renaudin Développeur
Front-End chez Azendoo DÉVELOPPEMENT MOBILE HTML5

COMMENT DÉVELOPPER UNE APPLICATION POUR DES TÉLÉPHONES MOBILES AVEC INTERNET
DANS LES ANNÉES 2010 ?

HTML5 CSS3 WEBGL Single Page Application Responsive AJAX

OUI LE JAVASCRIPT EST PRÊT POUR FAIRE DES APPLICATIONS MOBILES

Sencha a réalisé un client HTML5 pour Facebook

ADAPTER SON APPLICATION AU MOBILE

MEDIA QUERIES

Utiliser un framework CSS ( Bootstrap 3 )

Tester les capacités du terminal mobile ( Modernizr ) -
Ajoute des classes CSS : .csstransitions - Teste en JavaScript : Modernizr.websockets

Choisir la librairie de manipulation du DOM ( Zepto )
- API similaire à jQuery - Optimisé pour l’utilisation sur mobile

Fonctions dédiées pour le mobile

Utiliser les TouchEvents $el.on(‘touchstart’, function(){ alert(‘TOUCH ME AGAIN’); });

UN CLICK AJOUTE UN DÉLAI DE 300 MS SUR UN
MOBILE

Détecter la localisation du terminal navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options);

Faire vibrer le téléphone navigator.vibrate(100); navigator.vibrate([ 50, 100, 50])

Contrôler la batterie du téléphone navigator.battery.charging : boolean navigator.battery.level :
0.0 – 1.0

Envoyer des notifications var notification = new Notification( ‘test’, {
title: ‘C’est moi’, body: ‘COUCOU’, url: ‘..jpg’ } )

Stocker des informations localStorage.setItem( ‘a’, ‘html5 rocks’ ) localStorage.getItem(‘a’) localStorage.clear()

Mettre en cache les assets ## <html manifest="site.manifest »> CACHE
MANIFEST # v0.1 CACHE: index.html css/style.css img/logo.png

Utiliser les formulaires HTML5 <input type=‘url’ /> <input type=‘date’
/>

TOUCH EVENTS MOTION SENSORS NATIVE FORM VIBRATION BATTERY LOCAL STORAGE
AUDIO / VIDEO HTML TAGS

OK MAINTENANT ON VEUT JOUER

$ -> npm install -g yo bower grunt-cli generator-mobile-boilerplate $
-> yo mobile-boilerplate …. DO YOUR AWESOME APP $ -> bower install $ -> grunt build && grunt deploy Utiliser les bons outils

Publier son application avec Phonegap

https://speakerdeck.com/prenaudin/ developpement-mobile-html5 Pierre Renaudin Développeur Front-End chez Azendoo http://azendoo.com Contact
: [email protected]

Développement mobile HTML5

Développement mobile HTML5

Pierre Renaudin

More Decks by Pierre Renaudin

Other Decks in Programming

Featured

Transcript

Node – Bordeaux JS 26 septembre 2013 Pierre Renaudin Développeur

COMMENT DÉVELOPPER UNE APPLICATION POUR DES TÉLÉPHONES MOBILES AVEC INTERNET

HTML5 CSS3 WEBGL Single Page Application Responsive AJAX

OUI LE JAVASCRIPT EST PRÊT POUR FAIRE DES APPLICATIONS MOBILES

Sencha a réalisé un client HTML5 pour Facebook

ADAPTER SON APPLICATION AU MOBILE

MEDIA QUERIES

Utiliser un framework CSS ( Bootstrap 3 )

Tester les capacités du terminal mobile ( Modernizr ) -

Choisir la librairie de manipulation du DOM ( Zepto )

Fonctions dédiées pour le mobile

Utiliser les TouchEvents $el.on(‘touchstart’, function(){ alert(‘TOUCH ME AGAIN’); });

UN CLICK AJOUTE UN DÉLAI DE 300 MS SUR UN

Détecter la localisation du terminal navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options);

Faire vibrer le téléphone navigator.vibrate(100); navigator.vibrate([ 50, 100, 50])

Contrôler la batterie du téléphone navigator.battery.charging : boolean navigator.battery.level :

Envoyer des notifications var notification = new Notification( ‘test’, {

Stocker des informations localStorage.setItem( ‘a’, ‘html5 rocks’ ) localStorage.getItem(‘a’) localStorage.clear()

Mettre en cache les assets ## <html manifest="site.manifest »> CACHE

Utiliser les formulaires HTML5 <input type=‘url’ /> <input type=‘date’

TOUCH EVENTS MOTION SENSORS NATIVE FORM VIBRATION BATTERY LOCAL STORAGE

OK MAINTENANT ON VEUT JOUER

$ -> npm install -g yo bower grunt-cli generator-mobile-boilerplate $

Publier son application avec Phonegap

https://speakerdeck.com/prenaudin/ developpement-mobile-html5 Pierre Renaudin Développeur Front-End chez Azendoo http://azendoo.com Contact