Développement mobile HTML5

Transcript

1. Node – Bordeaux JS 26 septembre 2013 Pierre Renaudin Développeur Front-End chez Azendoo DÉVELOPPEMENT MOBILE HTML5
2. COMMENT DÉVELOPPER UNE APPLICATION POUR DES TÉLÉPHONES MOBILES AVEC INTERNET DANS LES ANNÉES 2010 ?
3. HTML5 CSS3 WEBGL Single Page Application Responsive AJAX
4. OUI LE JAVASCRIPT EST PRÊT POUR FAIRE DES APPLICATIONS MOBILES
5. Sencha a réalisé un client HTML5 pour Facebook
6. ADAPTER SON APPLICATION AU MOBILE
10. MEDIA QUERIES
11. Utiliser un framework CSS ( Bootstrap 3 )
12. Tester les capacités du terminal mobile ( Modernizr ) - Ajoute des classes CSS : .csstransitions - Teste en JavaScript : Modernizr.websockets
13. Choisir la librairie de manipulation du DOM ( Zepto ) - API similaire à jQuery - Optimisé pour l’utilisation sur mobile
14. Fonctions dédiées pour le mobile
15. Utiliser les TouchEvents $el.on(‘touchstart’, function(){ alert(‘TOUCH ME AGAIN’); });
16. UN CLICK AJOUTE UN DÉLAI DE 300 MS SUR UN MOBILE
17. Détecter la localisation du terminal navigator.geolocation.getCurrentPosition( successCallback, errorCallback, options);
18. Faire vibrer le téléphone navigator.vibrate(100); navigator.vibrate([ 50, 100, 50])
19. Contrôler la batterie du téléphone navigator.battery.charging : boolean navigator.battery.level : 0.0 – 1.0
20. Envoyer des notifications var notification = new Notification( ‘test’, { title: ‘C’est moi’, body: ‘COUCOU’, url: ‘..jpg’ } )
21. Stocker des informations localStorage.setItem( ‘a’, ‘html5 rocks’ ) localStorage.getItem(‘a’) localStorage.clear()
22. Mettre en cache les assets ## <html  manifest="site.manifest  »> CACHE MANIFEST # v0.1 CACHE: index.html css/style.css img/logo.png
23. Utiliser les formulaires HTML5 <input  type=‘url’  />   <input  type=‘date’  />  
24. TOUCH EVENTS MOTION SENSORS NATIVE FORM VIBRATION BATTERY LOCAL STORAGE AUDIO / VIDEO HTML TAGS
25. OK MAINTENANT ON VEUT JOUER
26. $ -> 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
27. Publier son application avec Phonegap
28. https://speakerdeck.com/prenaudin/ developpement-mobile-html5 Pierre Renaudin Développeur Front-End chez Azendoo http://azendoo.com Contact : pierre.renaudin.fr@gmail.com