Développer pour le Web Mobileen pratique : outils et techniques          Goulven CHAMPENOIS
Bonjour !
RessourcesLes liens sont dans files.userland.fr/pw2011
Sondage : avez-vous...
Sondage : avez-vous...✓ Déjà   consulté un site mobile ?
Sondage : avez-vous...✓ Déjà   consulté un site mobile ?✓ Un   smartphone ?
Sondage : avez-vous...✓ Déjà   consulté un site mobile ?✓ Un   smartphone ?✓ Un   netbook ?
Sondage : avez-vous...✓ Déjà   consulté un site mobile ?✓ Un   smartphone ?✓ Un   netbook ?✓ Une    tablette ?
Sondage : avez-vous...✓ Déjà   consulté un site mobile ?✓ Un   smartphone ?✓ Un   netbook ?✓ Une    tablette ?✓ Développé ...
Sondage : avez-vous...✓ Déjà   consulté un site mobile ?✓ Un   smartphone ?✓ Un   netbook ?✓ Une    tablette ?✓ Développé ...
Rappels
Rappels✓ Smartphone   / Feature phone
Rappels✓ Smartphone   / Feature phone✓ Contexte   / Usage mobile
Rappels✓ Smartphone   / Feature  phone✓ Contexte   / Usage mobile✓ NavigateurProxy /  Complet / Hybride
Rappels✓ Smartphone   / Feature  phone✓ Contexte   / Usage mobile✓ NavigateurProxy /  Complet / Hybride✓ Webkit   == Wekbi...
Rappels✓ Smartphone     / Feature  phone✓ Contexte    / Usage mobile✓ NavigateurProxy /  Complet / Hybride✓ Webkit    == W...
Rappels✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px  phone✓ Contexte    / Usage mobile✓ NavigateurProxy /  Co...
Rappels✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px  phone                               ✓ Media    Queries✓ ...
Rappels✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px  phone                               ✓ Media    Queries✓ ...
Rappels✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px  phone                               ✓ Media    Queries✓ ...
Rappels✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px  phone                               ✓ Media    Queries✓ ...
Contraintes
Contraintes✓ Réseau✓ Processeur✓ Espace   pour cache✓ Système   de pointage✓ Méthode    de saisie
Quelques chiffres
Quelques chiffres✓ Fin   2010, il s’est vendu plus de tablettes que de PC
Quelques chiffres✓ Fin   2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs ut...
Quelques chiffres✓ Fin   2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs ut...
Quelques chiffres✓ Fin   2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs ut...
Quelques chiffres✓ Fin   2010, il s’est vendu plus de tablettes que de PC✓ En2010, 25% des utilisateurs Facebook actifs ut...
Performances
Performances✓ Eviter   Javascript
Performances✓ Eviter   Javascript✓ Minifier
Performances✓ Eviter   Javascript✓ Minifier✓ Compresser
Performances✓ Eviter   Javascript✓ Minifier✓ Compresser✓ Date  d’expiration  lointaine
Performances✓ Eviter   Javascript✓ Minifier✓ Compresser✓ Date  d’expiration  lointaine✓ HTML     max 25ko
Performances✓ Eviter   Javascript   ✓ CSS/JS/img   < 1Mo✓ Minifier✓ Compresser✓ Date  d’expiration  lointaine✓ HTML     max...
Performances✓ Eviter   Javascript   ✓ CSS/JS/img   < 1Mo✓ Minifier               ✓ Manifest✓ Compresser✓ Date  d’expiration...
Performances✓ Eviter   Javascript   ✓ CSS/JS/img   < 1Mo✓ Minifier               ✓ Manifest✓ Compresser            ✓ localS...
Performances✓ Eviter   Javascript   ✓ CSS/JS/img    < 1Mo✓ Minifier               ✓ Manifest✓ Compresser            ✓ local...
Détecter le type d’appareil
Détecter le type d’appareil1. Chercher des mots-clés
Détecter le type d’appareil1. Chercher des mots-clés2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter
Détecter le type d’appareil1. Chercher des mots-clés2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter3. Assumer le pi...
Appli native ou web ?
Appli native
Appli native✓ Tourne   plus rapidement✓ Accès   photo, contact, accéléromètre...✓ Mais   : 1 par OS✓ Mais   : délais AppSt...
Appli web
Appli web✓ Développeurs      déjà formés✓ Pas   d’installation✓ Mais   : code branching
Système hybrideDéveloppé en web, packagé en application
Système hybrideDéveloppé en web, packagé en application✓ Langages   maîtrisés✓ Compilation    / Tests simplifiés✓ Mais   : ...
Des questions ?✓ goulvench@gmail.com✓ @goulvench
Merci !Crédits :✓ Système   de présentation : CSSS par Lea Verou✓ Photo   de Berlin sur flickr.com/photos/goulvenchampenois
Prochain SlideShare
Chargement dans…5
×

Développer pour le web mobile : outils et techniques

3 948 vues

Publié le

Publié dans : Technologie
0 commentaire
0 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

  • Soyez le premier à aimer ceci

Aucun téléchargement
Vues
Nombre de vues
3 948
Sur SlideShare
0
Issues des intégrations
0
Intégrations
175
Actions
Partages
0
Téléchargements
60
Commentaires
0
J’aime
0
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \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

    ×