Développement mobile HTML5

Développement mobile HTML5

C8ca9472c8318285fdbc31daa05cf698?s=128

Pierre Renaudin

September 26, 2013
Tweet

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

  7. None
  8. None
  9. None
  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