Développer pour le web mobile : outils et techniques

4,539 views

Published on

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
4,539
On SlideShare
0
From Embeds
0
Number of Embeds
174
Actions
Shares
0
Downloads
63
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Développer pour le web mobile : outils et techniques

    1. 1. Développer pour le Web Mobileen pratique : outils et techniques Goulven CHAMPENOIS
    2. 2. Bonjour !
    3. 3. RessourcesLes liens sont dans files.userland.fr/pw2011
    4. 4. Sondage : avez-vous...
    5. 5. Sondage : avez-vous...✓ Déjà consulté un site mobile ?
    6. 6. Sondage : avez-vous...✓ Déjà consulté un site mobile ?✓ Un smartphone ?
    7. 7. Sondage : avez-vous...✓ Déjà consulté un site mobile ?✓ Un smartphone ?✓ Un netbook ?
    8. 8. Sondage : avez-vous...✓ Déjà consulté un site mobile ?✓ Un smartphone ?✓ Un netbook ?✓ Une tablette ?
    9. 9. Sondage : avez-vous...✓ Déjà consulté un site mobile ?✓ Un smartphone ?✓ Un netbook ?✓ Une tablette ?✓ Développé un site mobile ?
    10. 10. Sondage : avez-vous...✓ Déjà consulté un site mobile ?✓ Un smartphone ?✓ Un netbook ?✓ Une tablette ?✓ Développé un site mobile ?✓ Développé une appli mobile ?
    11. 11. Rappels
    12. 12. Rappels✓ Smartphone / Feature phone
    13. 13. Rappels✓ Smartphone / Feature phone✓ Contexte / Usage mobile
    14. 14. Rappels✓ Smartphone / Feature phone✓ Contexte / Usage mobile✓ NavigateurProxy / Complet / Hybride
    15. 15. Rappels✓ Smartphone / Feature phone✓ Contexte / Usage mobile✓ NavigateurProxy / Complet / Hybride✓ Webkit == Wekbit ?
    16. 16. Rappels✓ Smartphone / Feature phone✓ Contexte / Usage mobile✓ NavigateurProxy / Complet / Hybride✓ Webkit == Wekbit ?✓ Click vs Touch
    17. 17. Rappels✓ Smartphone / Feature ✓ Quelle taille fait 1px phone✓ Contexte / Usage mobile✓ NavigateurProxy / Complet / Hybride✓ Webkit == Wekbit ?✓ Click vs Touch
    18. 18. Rappels✓ Smartphone / Feature ✓ Quelle taille fait 1px phone ✓ Media Queries✓ Contexte / Usage mobile✓ NavigateurProxy / Complet / Hybride✓ Webkit == Wekbit ?✓ Click vs Touch
    19. 19. Rappels✓ Smartphone / Feature ✓ Quelle taille fait 1px phone ✓ Media Queries✓ Contexte / Usage mobile ✓ Design réactif (responsive✓ NavigateurProxy / web design) Complet / Hybride✓ Webkit == Wekbit ?✓ Click vs Touch
    20. 20. Rappels✓ Smartphone / Feature ✓ Quelle taille fait 1px phone ✓ Media Queries✓ Contexte / Usage mobile ✓ Design réactif (responsive✓ NavigateurProxy / web design) Complet / Hybride ✓ Mobile != iPhone✓ Webkit == Wekbit ?✓ Click vs Touch
    21. 21. Rappels✓ Smartphone / Feature ✓ Quelle taille fait 1px phone ✓ Media Queries✓ Contexte / Usage mobile ✓ Designréactif (responsive✓ NavigateurProxy / web design) Complet / Hybride ✓ Mobile != iPhone✓ Webkit == Wekbit ? ✓ Natif != Mieux✓ Click vs Touch
    22. 22. Contraintes
    23. 23. Contraintes✓ Réseau✓ Processeur✓ Espace pour cache✓ Système de pointage✓ Méthode de saisie
    24. 24. Quelques chiffres
    25. 25. Quelques chiffres✓ Fin 2010, il s’est vendu plus de tablettes que de PC
    26. 26. Quelques chiffres✓ Fin 2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs utilisaient leur mobile
    27. 27. Quelques chiffres✓ Fin 2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs utilisaient leur mobile✓ En 2011, ils sont 50%
    28. 28. Quelques chiffres✓ Fin 2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs utilisaient leur mobile✓ En 2011, ils sont 50%✓ 33% des messages postés sur Facebook viennent d’un mobile
    29. 29. Quelques chiffres✓ Fin 2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs utilisaient leur mobile✓ En 2011, ils sont 50%✓ 33% des messages postés sur Facebook viennent d’un mobile✓ 40% des tweets viennent d’un mobile
    30. 30. Performances
    31. 31. Performances✓ Eviter Javascript
    32. 32. Performances✓ Eviter Javascript✓ Minifier
    33. 33. Performances✓ Eviter Javascript✓ Minifier✓ Compresser
    34. 34. Performances✓ Eviter Javascript✓ Minifier✓ Compresser✓ Date d’expiration lointaine
    35. 35. Performances✓ Eviter Javascript✓ Minifier✓ Compresser✓ Date d’expiration lointaine✓ HTML max 25ko
    36. 36. Performances✓ Eviter Javascript ✓ CSS/JS/img < 1Mo✓ Minifier✓ Compresser✓ Date d’expiration lointaine✓ HTML max 25ko
    37. 37. Performances✓ Eviter Javascript ✓ CSS/JS/img < 1Mo✓ Minifier ✓ Manifest✓ Compresser✓ Date d’expiration lointaine✓ HTML max 25ko
    38. 38. Performances✓ Eviter Javascript ✓ CSS/JS/img < 1Mo✓ Minifier ✓ Manifest✓ Compresser ✓ localStorage✓ Date d’expiration lointaine✓ HTML max 25ko
    39. 39. Performances✓ Eviter Javascript ✓ CSS/JS/img < 1Mo✓ Minifier ✓ Manifest✓ Compresser ✓ localStorage✓ Date d’expiration ✓ Eviter les cookies lointaine✓ HTML max 25ko
    40. 40. Détecter le type d’appareil
    41. 41. Détecter le type d’appareil1. Chercher des mots-clés
    42. 42. Détecter le type d’appareil1. Chercher des mots-clés2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter
    43. 43. Détecter le type d’appareil1. Chercher des mots-clés2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter3. Assumer le pire et demander à l’appareil
    44. 44. Appli native ou web ?
    45. 45. Appli native
    46. 46. Appli native✓ Tourne plus rapidement✓ Accès photo, contact, accéléromètre...✓ Mais : 1 par OS✓ Mais : délais AppStore
    47. 47. Appli web
    48. 48. Appli web✓ Développeurs déjà formés✓ Pas d’installation✓ Mais : code branching
    49. 49. Système hybrideDéveloppé en web, packagé en application
    50. 50. Système hybrideDéveloppé en web, packagé en application✓ Langages maîtrisés✓ Compilation / Tests simplifiés✓ Mais : API à apprendre✓ Mais : intermédiaire en plus
    51. 51. Des questions ?✓ goulvench@gmail.com✓ @goulvench
    52. 52. Merci !Crédits :✓ Système de présentation : CSSS par Lea Verou✓ Photo de Berlin sur flickr.com/photos/goulvenchampenois

    ×