Node – Bordeaux JS 26 septembre 2013 Pierre Renaudin Développeur Front-Endchez Azendoo DÉVELOPPEMENT MOBILE HTML5
View Slide
COMMENT DÉVELOPPERUNE APPLICATION POURDES TÉLÉPHONESMOBILES AVEC INTERNETDANS LES ANNÉES2010 ?
HTML5 CSS3 WEBGL Single PageApplication Responsive AJAX
OUI LE JAVASCRIPT EST PRÊTPOUR FAIRE DESAPPLICATIONS 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 CLICKAJOUTE UN DÉLAIDE 300 MS SURUN 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 ## CACHE MANIFEST # v0.1 CACHE: index.html css/style.css img/logo.png
Utiliser les formulaires HTML5
TOUCH EVENTS MOTION SENSORS NATIVE FORM VIBRATION BATTERY LOCAL STORAGE AUDIO / VIDEO HTML TAGS
OK MAINTENANT ONVEUT 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]