1. Développer pour le Web Mobile
en pratique : outils et techniques
Goulven CHAMPENOIS

2. Bonjour !

3. Ressources
Les liens sont dans files.userland.fr/pw2011

4. Sondage : avez-vous...

5. Sondage : avez-vous...
✓ Déjà consulté un site mobile ?

6. Sondage : avez-vous...
✓ Déjà consulté un site mobile ?
✓ Un smartphone ?

7. Sondage : avez-vous...
✓ Déjà consulté un site mobile ?
✓ Un smartphone ?
✓ Un netbook ?

8. Sondage : avez-vous...
✓ Déjà consulté un site mobile ?
✓ Un smartphone ?
✓ Un netbook ?
✓ Une tablette ?

9. Sondage : avez-vous...
✓ Déjà consulté un site mobile ?
✓ Un smartphone ?
✓ Un netbook ?
✓ Une tablette ?
✓ Développé un site mobile ?

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. Rappels

12. Rappels
✓ Smartphone / Feature
phone

13. Rappels
✓ Smartphone / Feature
phone
✓ Contexte / Usage mobile

14. Rappels
✓ Smartphone / Feature
phone
✓ Contexte / Usage mobile
✓ NavigateurProxy /
Complet / Hybride

15. Rappels
✓ Smartphone / Feature
phone
✓ Contexte / Usage mobile
✓ NavigateurProxy /
Complet / Hybride
✓ Webkit == Wekbit ?

16. Rappels
✓ Smartphone / Feature
phone
✓ Contexte / Usage mobile
✓ NavigateurProxy /
Complet / Hybride
✓ Webkit == Wekbit ?
✓ Click vs Touch

17. Rappels
✓ Smartphone / Feature ✓ Quelle taille fait 1px
phone
✓ Contexte / Usage mobile
✓ NavigateurProxy /
Complet / Hybride
✓ Webkit == Wekbit ?
✓ Click vs Touch

18. Rappels
✓ Smartphone / Feature ✓ Quelle taille fait 1px
phone
✓ Media Queries
✓ Contexte / Usage mobile
✓ NavigateurProxy /
Complet / Hybride
✓ Webkit == Wekbit ?
✓ Click vs Touch

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. 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. 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. Contraintes

23. Contraintes
✓ Réseau
✓ Processeur
✓ Espace pour cache
✓ Système de pointage
✓ Méthode de saisie

24. Quelques chiffres

25. Quelques chiffres
✓ Fin 2010, il s’est vendu plus de tablettes que de PC

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. 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. 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. 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. Performances

31. Performances
✓ Eviter Javascript

32. Performances
✓ Eviter Javascript
✓ Minifier

33. Performances
✓ Eviter Javascript
✓ Minifier
✓ Compresser

34. Performances
✓ Eviter Javascript
✓ Minifier
✓ Compresser
✓ Date d’expiration
lointaine

35. Performances
✓ Eviter Javascript
✓ Minifier
✓ Compresser
✓ Date d’expiration
lointaine
✓ HTML max 25ko

36. Performances
✓ Eviter Javascript ✓ CSS/JS/img < 1Mo
✓ Minifier
✓ Compresser
✓ Date d’expiration
lointaine
✓ HTML max 25ko

37. Performances
✓ Eviter Javascript ✓ CSS/JS/img < 1Mo
✓ Minifier ✓ Manifest
✓ Compresser
✓ Date d’expiration
lointaine
✓ HTML max 25ko

38. Performances
✓ Eviter Javascript ✓ CSS/JS/img < 1Mo
✓ Minifier ✓ Manifest
✓ Compresser ✓ localStorage
✓ Date d’expiration
lointaine
✓ HTML max 25ko

39. Performances
✓ Eviter Javascript ✓ CSS/JS/img < 1Mo
✓ Minifier ✓ Manifest
✓ Compresser ✓ localStorage
✓ Date d’expiration ✓ Eviter les cookies
lointaine
✓ HTML max 25ko

40. Détecter le type d’appareil

41. Détecter le type d’appareil
1. Chercher des mots-clés

42. Détecter le type d’appareil
1. Chercher des mots-clés
2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter

43. Détecter le type d’appareil
1. Chercher des mots-clés
2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter
3. Assumer le pire et demander à l’appareil

44. Appli native ou web ?

45. Appli native

46. Appli native
✓ Tourne plus rapidement
✓ Accès photo, contact, accéléromètre...
✓ Mais : 1 par OS
✓ Mais : délais AppStore

47. Appli web

48. Appli web
✓ Développeurs déjà formés
✓ Pas d’installation
✓ Mais : code branching

49. Système hybride
Développé en web, packagé en application

50. Système hybride
Développé en web, packagé en application
✓ Langages maîtrisés
✓ Compilation / Tests simplifiés
✓ Mais : API à apprendre
✓ Mais : intermédiaire en plus

51. Des questions ?
✓ goulvench@gmail.com
✓ @goulvench

52. Merci !
Crédits :
✓ Système de présentation : CSSS par Lea Verou
✓ Photo de Berlin sur flickr.com/photos/goulvenchampenois