Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Développement mobile HTML5

Développement mobile HTML5

Pierre Renaudin

September 26, 2013
Tweet

More Decks by Pierre Renaudin

Other Decks in Programming

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 : [email protected]

    View Slide