Développement mobile HTML5

Transcript

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

   View Slide

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

   View Slide

3. HTML5
   CSS3
   WEBGL
   Single Page
   Application
   Responsive
   AJAX
   

   View Slide

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

   View Slide

5. Sencha a réalisé un client HTML5 pour Facebook
   

   View Slide

6. ADAPTER SON APPLICATION AU MOBILE
   

   View Slide

7. View Slide

8. View Slide

9. View Slide

10. MEDIA QUERIES
    

    View Slide

11. Utiliser un framework CSS ( Bootstrap 3 )
    

    View Slide

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

    View Slide

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

    View Slide

14. Fonctions dédiées pour le mobile
    

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

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

    View Slide

22. Mettre en cache les assets
    ##
    CACHE MANIFEST
    # v0.1
    CACHE:
    index.html
    css/style.css
    img/logo.png
    

    View Slide

23. Utiliser les formulaires HTML5
     
     
    

    View Slide

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

    View Slide

25. OK
    MAINTENANT ON
    VEUT JOUER
    

    View Slide

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
    

    View Slide

27. Publier son application avec Phonegap
    

    View Slide

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
    
    

    View Slide