SlideShare une entreprise Scribd logo
1  sur  53
Mobilité Comment Drupal peut-il nous aider ? Jean-Baptiste Guerraz - jbguerraz@gmail.com
[object Object],[object Object],[object Object],[object Object],Jean-Baptiste Guerraz - jbguerraz@gmail.com
C ’ est 40 gros sites Drupal en 2011
1 internaute sur 3 est un mobinaute ! >   Source  « Médiamétrie – 2ème trimestre 2011 » FRANCE 2011
Les Français, connectés & mobiles ! 2007 2011 +62% en  4 ans +37% en  4 ans >   Source  « Médiamétrie » FRANCE
M-Commerce, de belles perspectives ! 2010 2015 FRANCE 500 Millions d’€ 13 Milliards d’€ >   Sources « Le marché des contenus mobiles à l ’ horizon 2015 – Xerfi »
Usage : plus, mais surtout, plus vite !  2011 FRANCE >   Sources « Xiti Monitor »
Connexion : un débit 3 fois plus lent ! 2010 FRANCE >   Sources « Baromètre des connexions fixes et mobiles - DegroupTest » Et instable …
Constructeurs & parts de marché 2011 FRANCE >   Sources « Etude IDC »
La diversité des résolutions … 2011 >   Sources « Top des ventes (Orange, Bouygues, Phone House, Institut GFK) & spécifications constructeurs » 240 x 240 FRANCE 800 x 480 (Galaxy) 320 x 240 400 x 240 640 X 360 480 x 320 960 x 640 (Iphone) 800 x 480 (Dell Streak) 1024 X 600 1024 x 768 (Ipad) 1280 x 800 (Galaxy Tab) 1366 x 768 Tablettes Mobiles 160 x 128 BB Curve  Nokia C2
Autant d ’ OS que de différences ! 2011 >   Sources « Smartphones dans l ’ Europe des 5 - Comscore » EUROPE
Plus de navigateurs que d ’ OS … 2011 FRANCE >   Sources « Statcounter Global Stats (Janvier à Septembre) » 2010
3 groupes de navigateurs, que choisir ? 2011 >   Sources « Mobile market overview - QuirksMode » MONDE ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Comment diffuser large ? 2011 >   Sources « Google ;) » FRANCE
Market places, où en sommes-nous ? 2011 >   Sources « ABI research  –  Business Wire » MONDE
Usage : App ou Web (-app) ? 2011 >   Sources « Flurry  –  Comscore » USA
On conclut ?   ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Quel socle architectural pour Drupal ? ,[object Object],[object Object]
Plan de redirection : Drupal or Not ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
when HTTP_REQUEST { log local0. "[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header "User-Agent"]" if {[matchclass [HTTP::header "User-Agent"] contains $::MobileUserAgents] } { HTTP::redirect "http://m.holidayextras.co.uk[HTTP::uri]" log local0. "[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header "User-Agent"], redirecting" } } Plan de redirection : Drupal or Not ? ,[object Object],[object Object],[object Object],[object Object]
Multi-site avec Drupal ? Create a new domain record :  easy !
Sélection du thème ? “ Domain Theme” = Click & Play !
Sélection du thème ? Click … … & Play !
Sélection du thème ? L ’ alternative « Mobile Tools » “ Mobile Tools” :  Un seul thème mobile. Peux convenir à une implémentation minimale d ’ un site mobile.
Publication multi-sites ? « Domain Access » = Un contrôle fin sur la publication multi-device (node/add  –  node/edit form alter)
Sélection du contenu ? « Views » + « Domain Views » = Du contenu « sur mesure »
Sélection du gabarit ? « Domain C t ools » + « Panels » = Une ergonomie dédiée & évolutive !
Sélection du gabarit ? Click …
Sélection du gabarit ? Alternative « Mobile Tools » Click …
Sélection du gabarit ? … &  Play !
Création du thème ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Un thème « Fluid » ? ,[object Object]
Un thème « Fluid » ? ,[object Object]
Un thème « Responsive » ? ,[object Object]
« Fluid » ? « Responsive » ? ,[object Object],[object Object],[object Object],[object Object],Type d’appareil Propriétés de l’appareil. Nous pourrions ajouter : “ and (orientation: landscape)”
Animations & CSS3 ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Les formulaires & HTML5 ,[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Fonctionnalités HTML5 ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],Version Sa mise à jour entraine une mise à jour du cache par le navigateur CACHE Le liste des fichiers a placer en cache FALLBACK Liste des fichiers a remplacer par d’autre si “offline” NETWORK Liste des fichiers disponibles uniquement si “online” Le mime-type du fichier manifest doit être “text/cache-manifest”
Optimisations de performances ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Drupal-App-ify ? ,[object Object],[object Object],[object Object],[object Object],[object Object]
Drupal-App-ify : Native, comment ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
Drupal-App-ify : Hybride, comment ? ,[object Object],[object Object],[object Object],[object Object],[object Object],[object Object],[object Object]
SocieteGenerale.com  –  Un bel exemple ! ,[object Object]
To be continued …
Le premier CMS Open Source pour les tablettes. Disponible en téléchargement Q1 2012. Beta privée en cours…
Merci pour l ’ écoute ! A mon tour …  Des questions ?   Jean-Baptiste Guerraz - jbguerraz@gmail.com
[object Object],[object Object],Jean-Baptiste Guerraz - jbguerraz@gmail.com

Contenu connexe

Similaire à Drupal & Mobilité

Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Raphaël Goetter
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Fasterize
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8davrous
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEODimitri Brunel
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidemaru.maru
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxFrédéric Harper
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogySacha Leprêtre
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !VISEO
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsThomas Bassetto
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications WebNicolas Hoffmann
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet DrupalAdyax
 
Dojo Mobile @ Devoxx France
Dojo Mobile @ Devoxx FranceDojo Mobile @ Devoxx France
Dojo Mobile @ Devoxx Francecjolif
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14FullSIX Group
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflineDNG Consulting
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetDevclic
 

Similaire à Drupal & Mobilité (20)

Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
Un site mobile en une heure ? Top chrono ! (Barcamp-Bordeaux 2011)
 
HTML5 en projet
HTML5 en projetHTML5 en projet
HTML5 en projet
 
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
Comment Rue Du Commerce est devenu le site e-commerce le plus rapide de France ?
 
L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8L'histoire d'html5 pour les développeurs windows phone 8
L'histoire d'html5 pour les développeurs windows phone 8
 
Do you speak technique ?
Do you speak technique ?Do you speak technique ?
Do you speak technique ?
 
Evolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEOEvolutions et nouveaux outils SEO
Evolutions et nouveaux outils SEO
 
jQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-sidejQuery mobile / PhoneGap : contenus dynamiques client-side
jQuery mobile / PhoneGap : contenus dynamiques client-side
 
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveauxMobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
Mobiz - 2012-11-15 - HTML5, une révolution à plusieurs niveaux
 
Gtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogyGtug2 Mobile app with web technlogy
Gtug2 Mobile app with web technlogy
 
Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !Javascript as a first programming language : votre IC prête pour la révolution !
Javascript as a first programming language : votre IC prête pour la révolution !
 
Android introvf
Android introvfAndroid introvf
Android introvf
 
L'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objetsL'Open Web en tant que pierre angulaire du développement multi-objets
L'Open Web en tant que pierre angulaire du développement multi-objets
 
jQuery Mobile & Applications Web
jQuery Mobile & Applications WebjQuery Mobile & Applications Web
jQuery Mobile & Applications Web
 
Réussir son projet Drupal
Réussir son projet DrupalRéussir son projet Drupal
Réussir son projet Drupal
 
Dojo Mobile @ Devoxx France
Dojo Mobile @ Devoxx FranceDojo Mobile @ Devoxx France
Dojo Mobile @ Devoxx France
 
Responsive web design new14
Responsive web design new14Responsive web design new14
Responsive web design new14
 
Présentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'OfflinePrésentation GWT et HTML 5 pour l'Offline
Présentation GWT et HTML 5 pour l'Offline
 
Kiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internetKiwiparty 2011 - Optimisation des sites internet
Kiwiparty 2011 - Optimisation des sites internet
 
Meetup sencha
Meetup senchaMeetup sencha
Meetup sencha
 
Webdesign, UX et UCD #1
Webdesign, UX et UCD #1Webdesign, UX et UCD #1
Webdesign, UX et UCD #1
 

Drupal & Mobilité

  • 1. Mobilité Comment Drupal peut-il nous aider ? Jean-Baptiste Guerraz - jbguerraz@gmail.com
  • 2.
  • 3. C ’ est 40 gros sites Drupal en 2011
  • 4. 1 internaute sur 3 est un mobinaute ! > Source « Médiamétrie – 2ème trimestre 2011 » FRANCE 2011
  • 5. Les Français, connectés & mobiles ! 2007 2011 +62% en 4 ans +37% en 4 ans > Source « Médiamétrie » FRANCE
  • 6. M-Commerce, de belles perspectives ! 2010 2015 FRANCE 500 Millions d’€ 13 Milliards d’€ > Sources « Le marché des contenus mobiles à l ’ horizon 2015 – Xerfi »
  • 7. Usage : plus, mais surtout, plus vite ! 2011 FRANCE > Sources « Xiti Monitor »
  • 8. Connexion : un débit 3 fois plus lent ! 2010 FRANCE > Sources « Baromètre des connexions fixes et mobiles - DegroupTest » Et instable …
  • 9. Constructeurs & parts de marché 2011 FRANCE > Sources « Etude IDC »
  • 10. La diversité des résolutions … 2011 > Sources « Top des ventes (Orange, Bouygues, Phone House, Institut GFK) & spécifications constructeurs » 240 x 240 FRANCE 800 x 480 (Galaxy) 320 x 240 400 x 240 640 X 360 480 x 320 960 x 640 (Iphone) 800 x 480 (Dell Streak) 1024 X 600 1024 x 768 (Ipad) 1280 x 800 (Galaxy Tab) 1366 x 768 Tablettes Mobiles 160 x 128 BB Curve Nokia C2
  • 11. Autant d ’ OS que de différences ! 2011 > Sources « Smartphones dans l ’ Europe des 5 - Comscore » EUROPE
  • 12. Plus de navigateurs que d ’ OS … 2011 FRANCE > Sources « Statcounter Global Stats (Janvier à Septembre) » 2010
  • 13.
  • 14. Comment diffuser large ? 2011 > Sources « Google ;) » FRANCE
  • 15. Market places, où en sommes-nous ? 2011 > Sources « ABI research – Business Wire » MONDE
  • 16. Usage : App ou Web (-app) ? 2011 > Sources « Flurry – Comscore » USA
  • 17.
  • 18.
  • 19.
  • 20.
  • 21. Multi-site avec Drupal ? Create a new domain record : easy !
  • 22. Sélection du thème ? “ Domain Theme” = Click & Play !
  • 23. Sélection du thème ? Click … … & Play !
  • 24. Sélection du thème ? L ’ alternative « Mobile Tools » “ Mobile Tools” : Un seul thème mobile. Peux convenir à une implémentation minimale d ’ un site mobile.
  • 25. Publication multi-sites ? « Domain Access » = Un contrôle fin sur la publication multi-device (node/add – node/edit form alter)
  • 26. Sélection du contenu ? « Views » + « Domain Views » = Du contenu « sur mesure »
  • 27. Sélection du gabarit ? « Domain C t ools » + « Panels » = Une ergonomie dédiée & évolutive !
  • 28. Sélection du gabarit ? Click …
  • 29. Sélection du gabarit ? Alternative « Mobile Tools » Click …
  • 30. Sélection du gabarit ? … & Play !
  • 31.
  • 32.
  • 33.
  • 34.
  • 35.
  • 36.
  • 37.
  • 38.
  • 39.
  • 40.
  • 41.
  • 42.
  • 43.
  • 44.
  • 45.
  • 46.
  • 47.
  • 48.
  • 49.
  • 51. Le premier CMS Open Source pour les tablettes. Disponible en téléchargement Q1 2012. Beta privée en cours…
  • 52. Merci pour l ’ écoute ! A mon tour … Des questions ?  Jean-Baptiste Guerraz - jbguerraz@gmail.com
  • 53.

Notes de l'éditeur

  1. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  2. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  3. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  4. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  5. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  6. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.
  7. D ’ autres informations sont disponibles : position.timestamp : renvoie le timestamp de l ’ heure à laquelle a été mise à jour la position position.coords.altitude : correspond à l ’ altitude de l ’ utilisateur position.coords.accuracy : correspond à la précision des coordonnées position.coords.altitudeAccuracy : correspond à la précision de l ’ altitude position.coords.heading : correspond à l ’ angle compris entre 0 et 360° par rapport au Nord position.coords.speed : correspond à la vitesse de l ’ utilisateur par rapport à sa dernière position.