Développement mobile HTML5

C8ca9472c8318285fdbc31daa05cf698?s=47 Pierre Renaudin
September 26, 2013
Programming
0
85

Développement mobile HTML5

C8ca9472c8318285fdbc31daa05cf698?s=128

Pierre Renaudin

September 26, 2013
Tweet

More Decks by Pierre Renaudin

See All by Pierre Renaudin
C8ca9472c8318285fdbc31daa05cf698?s=48 prenaudin
0
8
C8ca9472c8318285fdbc31daa05cf698?s=48 prenaudin
1
74
C8ca9472c8318285fdbc31daa05cf698?s=48 prenaudin
0
45
C8ca9472c8318285fdbc31daa05cf698?s=48 prenaudin
0
230
C8ca9472c8318285fdbc31daa05cf698?s=48 prenaudin
0
170

Other Decks in Programming

See All in Programming
023b04c98f39cc041293d780352432ff?s=48 koic
4
1.6k
49833977598de9524fa85cacb93a42ce?s=48 philcalcado
0
110
9eed44f137609e6ce3b6f1e14f80b9e1?s=48 izumin5210
6
3k
948c23c57a850629ff283f2a83088173?s=48 yotuba088
1
160
E834b4b7cfcba6918f01f45d2916c302?s=48 f110
2
160
9f33218af7ae5c04e102fcc3076f2f5c?s=48 yhkaplan
1
250
641d1fa5dd5aac067e1731b4e03e1904?s=48 10xinc
0
860
1fe64ebb176498be5f73ab51986c6b7b?s=48 davidfowl
9
3.1k
6e39a16132f9e41e6869527ba0ced276?s=48 vashchenko
4
1.8k
9e840766611f942c7c0a9ad6987a5d78?s=48 kishida
2
2.2k
58d2fa98345951d9a57fdd6cfd5d0f64?s=48 aszx87410
0
470
Bc87ea9c7a0f85b8761b716a677c6694?s=48 adammc331
0
160

Featured

See All Featured
D09fad3e36ae6841f54820be0e907f7a?s=48 rocio
155
11k
A60068bce2e73de3a37ca9d2dbe36092?s=48 bryan
29
3.2k
3d4519fd34b76fb265fc0237f3792bd4?s=48 danielanewman
1
340
1b75d89772b7eea1f6c89fbf362607d9?s=48 moore
125
21k
8081b26e05bb4354f7d65ffc34cbbd67?s=48 chriscoyier
775
240k
Be9caeb9d4ef9944d151af909063ed6e?s=48 samlambert
236
9.8k
B3d6434763caa0ef5dc4b792662c49f7?s=48 smashingmag
227
17k
C0b42577cfc2b321be3474618107e933?s=48 samanthasiow
54
6k
5f50f94346fbcb23706f0707169317a4?s=48 aarron
254
36k
48c098b6579220a67a6ba949be6e4b5a?s=48 revolveconf
197
9.5k
282d599b414022eba5096510f675b6e2?s=48 chrislema
231
16k
170b760e0147792d0140e59ec78e9893?s=48 eitanlees
108
9.6k

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