SlideShare une entreprise Scribd logo
1  sur  52
Télécharger pour lire hors ligne
Développer pour le Web Mobile
en pratique : outils et techniques




          Goulven CHAMPENOIS
Bonjour !
Ressources
Les 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é     un site mobile ?
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 ?
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   == Wekbit ?
Rappels
✓ Smartphone     / Feature
  phone

✓ Contexte    / Usage mobile

✓ NavigateurProxy /
  Complet / Hybride

✓ Webkit    == Wekbit ?

✓ Click   vs Touch
Rappels
✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px
  phone

✓ Contexte    / Usage mobile

✓ NavigateurProxy /
  Complet / Hybride

✓ Webkit    == Wekbit ?

✓ Click   vs Touch
Rappels
✓ Smartphone     / Feature     ✓ Quelle   taille fait 1px
  phone
                               ✓ Media    Queries
✓ Contexte    / Usage mobile

✓ NavigateurProxy /
  Complet / Hybride

✓ Webkit    == Wekbit ?

✓ Click   vs Touch
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
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
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
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 utilisaient leur
  mobile
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%
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
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
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 25ko
Performances
✓ Eviter   Javascript   ✓ CSS/JS/img   < 1Mo

✓ Minifier               ✓ Manifest

✓ Compresser

✓ Date  d’expiration
  lointaine

✓ HTML     max 25ko
Performances
✓ Eviter   Javascript   ✓ CSS/JS/img   < 1Mo

✓ Minifier               ✓ Manifest

✓ Compresser            ✓ localStorage

✓ Date  d’expiration
  lointaine

✓ HTML     max 25ko
Performances
✓ Eviter   Javascript   ✓ CSS/JS/img    < 1Mo

✓ Minifier               ✓ Manifest

✓ Compresser            ✓ localStorage

✓ Date  d’expiration    ✓ Eviter   les cookies
  lointaine

✓ HTML     max 25ko
Détecter le type d’appareil
Détecter le type d’appareil
1. Chercher des mots-clés
Détecter le type d’appareil
1. Chercher des mots-clés

2. Utiliser WURFL, DeviceAtlas ou Apache Mobile Filter
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
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 AppStore
Appli web
Appli web
✓ Développeurs      déjà formés

✓ Pas   d’installation

✓ Mais   : code branching
Système hybride
Développé en web, packagé en application
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
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

Contenu connexe

Similaire à Développer pour le web mobile : outils et techniques

Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueJulien Sicot
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?altima°
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimediadefimedia
 
Eurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransEurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransAgence-Eurelis
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleKseo Conseil
 
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)altima°
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?Chambé-Carnet
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettesCOMPETITIC
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Medialibs
 
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...UADF_CEF
 
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1Alban Oujagir
 
Présentation du framework Titanium
Présentation du framework TitaniumPrésentation du framework Titanium
Présentation du framework TitaniumDamien Laureaux
 
Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileMohamed BOURAOUI
 
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobileWeb in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobileFrédéric Harper
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Idean France
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012MBA Multimedia
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignGreg Hoin
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobilesneuros
 
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...polenumerique33
 

Similaire à Développer pour le web mobile : outils et techniques (20)

Ergonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèqueErgonomie web et mobile en bibliothèque
Ergonomie web et mobile en bibliothèque
 
Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?Web responsive & E-Commerce, un seul site pour tous les devices ?
Web responsive & E-Commerce, un seul site pour tous les devices ?
 
Responsive Web design - defimedia
Responsive Web design - defimediaResponsive Web design - defimedia
Responsive Web design - defimedia
 
Eurelis - Présentation multi-écrans
Eurelis - Présentation multi-écransEurelis - Présentation multi-écrans
Eurelis - Présentation multi-écrans
 
Comment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de GoogleComment se préparer au Mobile Index First de Google
Comment se préparer au Mobile Index First de Google
 
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
Web responsive & E-Commerce : un seul site pour tous les devices ? (version bis)
 
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
[Chambé-Carnet] Web Mobile : quelles opportunités, quels moyens ?
 
Competitic applications accessibles tablettes
Competitic   applications accessibles tablettesCompetitic   applications accessibles tablettes
Competitic applications accessibles tablettes
 
Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir Atelier - Stratégie Mobile : les clés pour réussir
Atelier - Stratégie Mobile : les clés pour réussir
 
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
Etre présent sur mobiles_Patrice de Saint-Steban_13ème rencontre des Tisseran...
 
ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1ESG - Application Mobile - Cours 1
ESG - Application Mobile - Cours 1
 
Présentation du framework Titanium
Présentation du framework TitaniumPrésentation du framework Titanium
Présentation du framework Titanium
 
Les Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobileLes Systèmes d'exploitation mobile
Les Systèmes d'exploitation mobile
 
Web in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobileWeb in - Mobile First: créer une bonne expérience mobile
Web in - Mobile First: créer une bonne expérience mobile
 
Salon Use IT Lyon
Salon Use IT LyonSalon Use IT Lyon
Salon Use IT Lyon
 
Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?Comment optimiser sa stratégie web pour les tablettes ?
Comment optimiser sa stratégie web pour les tablettes ?
 
Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012Mobile 201 - Conférence 2012
Mobile 201 - Conférence 2012
 
Bien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web DesignBien Démarrer avec le Responsive Web Design
Bien Démarrer avec le Responsive Web Design
 
Passage aux applications mobiles
Passage aux applications mobilesPassage aux applications mobiles
Passage aux applications mobiles
 
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
Nouveaux comportements des consommateurs: quelles evolutions ergonomiques, vi...
 

Plus de Goulven Champenois

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkGoulven Champenois
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)Goulven Champenois
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Goulven Champenois
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Goulven Champenois
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Goulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueGoulven Champenois
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masquesGoulven Champenois
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieGoulven Champenois
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusGoulven Champenois
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention dangerGoulven Champenois
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)Goulven Champenois
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifGoulven Champenois
 

Plus de Goulven Champenois (18)

TECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field checkTECHnosterone and UXtrogens: field check
TECHnosterone and UXtrogens: field check
 
Objectif zéro déchet (hévéa)
Objectif   zéro déchet (hévéa)Objectif   zéro déchet (hévéa)
Objectif zéro déchet (hévéa)
 
Objectif : zéro déchet
Objectif : zéro déchetObjectif : zéro déchet
Objectif : zéro déchet
 
Attention Déchets
Attention DéchetsAttention Déchets
Attention Déchets
 
Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?Pourquoi tous les développeurs sont ils barbus ?
Pourquoi tous les développeurs sont ils barbus ?
 
UX et santé
UX et santéUX et santé
UX et santé
 
Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !Burnout - Rallumons la flamme !
Burnout - Rallumons la flamme !
 
Pour un Web inclusif
Pour un Web inclusifPour un Web inclusif
Pour un Web inclusif
 
Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)Guérir le burnout (E1 2016)
Guérir le burnout (E1 2016)
 
Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016Guérir le burnout, c'est possible ! Mix-IT 2016
Guérir le burnout, c'est possible ! Mix-IT 2016
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Amélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratiqueAmélioration progressive, de la théorie à la pratique
Amélioration progressive, de la théorie à la pratique
 
Intitulés de poste, bas les masques
Intitulés de poste, bas les masquesIntitulés de poste, bas les masques
Intitulés de poste, bas les masques
 
Mobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à TroieMobile et accessibilité, une partie à Troie
Mobile et accessibilité, une partie à Troie
 
Responsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processusResponsive l'indispensable révolution des outils et processus
Responsive l'indispensable révolution des outils et processus
 
Poids des pages, attention danger
Poids des pages, attention dangerPoids des pages, attention danger
Poids des pages, attention danger
 
1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)1001 techniques pour exploser un projet (et comment les éviter)
1001 techniques pour exploser un projet (et comment les éviter)
 
Pourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactifPourquoi passer au web mobile avec le design réactif
Pourquoi passer au web mobile avec le design réactif
 

Développer pour le web mobile : outils et techniques

Notes de l'éditeur

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n