Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.
Mobilité Comment Drupal peut-il nous aider ? Jean-Baptiste Guerraz - jbguerraz@gmail.com
<ul><li>Jean-Baptiste Guerraz </li></ul><ul><li>Directeur de projet / Adyax </li></ul><ul><li>Je gère des projets Drupal m...
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 conten...
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 ...
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écifica...
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 <ul><li>Passé </li>...
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 ?   <ul><li>Le mobile, faut y aller ! (et même penser m-commerce) </li></ul><ul><li>Le mobinaute est un boulim...
Quel socle architectural pour Drupal ? <ul><li>Module « MobileTools » </li></ul><ul><li>Module « Domain » (« Domain Access...
Plan de redirection : Drupal or Not ? <ul><li>Qui peut implémenter le plan de redirection ? </li></ul><ul><ul><li>Le serve...
when HTTP_REQUEST { log local0. &quot;[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header &quot;User-Agent&quot;]&quot...
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éme...
Publication multi-sites ? « Domain Access » = Un contrôle fin sur la publication multi-device (node/add  –  node/edit form...
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 ? <ul><li>« Mobilize, Don ’ t Miniaturize » (Bob Miller). </li></ul><ul><li>Pensez « responsive », ou à ...
Un thème « Fluid » ? <ul><li>m .slate.fr sur iPhone </li></ul>
Un thème « Fluid » ? <ul><li>m .slate.fr sur iPad </li></ul>
Un thème « Responsive » ? <ul><li>b rowser.nokia.com </li></ul>
« Fluid » ? « Responsive » ? <ul><li>« Fluid » = Tout en pourcentage ! </li></ul><ul><li>« Responsive » = Media queries, u...
Animations & CSS3 <ul><li>Animations </li></ul><ul><ul><li>Pas de manipulation DOM (element.top & element.left) </li></ul>...
Les formulaires & HTML5 <ul><li>Formulaires </li></ul><ul><ul><li>Pas de plugin J Q uery / custom JS-CSS </li></ul></ul><u...
Fonctionnalités HTML5 ? <ul><li>Audio </li></ul><ul><ul><li><audio src= ” drupagora.mp3&quot; controls> </video> </li></ul...
Fonctionnalités HTML5 ? <ul><li>Géolocalisation </li></ul><ul><ul><li>Permet de localiser l ’ utilisateur </li></ul></ul><...
Fonctionnalités HTML5 ? <ul><li>Session storage </li></ul><ul><ul><li>Permet de stocker des données localement pour la dur...
Fonctionnalités HTML5 ? <ul><li>Local storage </li></ul><ul><ul><li>Permet de stocker des données localement pour une duré...
Fonctionnalités HTML5 ? <ul><li>DB storage </li></ul><ul><ul><li>Permet de stocker des données localement pour une durée i...
Fonctionnalités HTML5 ? <ul><li>Cache </li></ul><ul><ul><li>Les applications « offline » utilisent « l ’ application cache...
Fonctionnalités HTML5 ? <ul><li>Cache </li></ul><ul><ul><li>Un petit exemple </li></ul></ul><ul><ul><ul><li>Déclaration de...
Optimisations de performances ? <ul><li>Aussi peu d’éléments HTML que possible </li></ul><ul><ul><li>Un design simple </li...
Drupal-App-ify ? <ul><li>Une   application  native :  une  connexion  à  Drupal  via le module  Services  ! </li></ul><ul>...
Drupal-App-ify : Native, comment ? <ul><li>Concept </li></ul><ul><ul><li>Créer une application native. </li></ul></ul><ul>...
Drupal-App-ify : Hybride, comment ? <ul><li>Concept </li></ul><ul><ul><li>Embarquer un navigateur dans une application. </...
SocieteGenerale.com  –  Un bel exemple ! <ul><li>Un site, un site mobile, une application I P ad : L ’ ensemble entièremen...
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
<ul><li>Pour aller plus loin, retrouver cette présentation sur « SlideShare » </li></ul><ul><ul><li>Cherchez « jbguerraz »...
Upcoming SlideShare
Loading in …5
×

Drupal & Mobilité

4,579 views

Published on

Conférence Drupagora : Drupal & Mobilité (Multi-Devices).

Published in: Technology

Drupal & Mobilité

  1. 1. Mobilité Comment Drupal peut-il nous aider ? Jean-Baptiste Guerraz - jbguerraz@gmail.com
  2. 2. <ul><li>Jean-Baptiste Guerraz </li></ul><ul><li>Directeur de projet / Adyax </li></ul><ul><li>Je gère des projets Drupal majeurs pour des comptes tels que Société Générale, Le musée du Louvres, Slate, Orange, Le Quotidien du médecin, Groupe Moniteur ... </li></ul><ul><li>Dans le domaine de la mobilité, j ’ ai eu entre autres la charge du site mobile institutionnel de la Société Générale, de l ’ application IPad &quot;Société Générale - Review&quot;, de la version mobile du site Slate.fr... </li></ul>Jean-Baptiste Guerraz - jbguerraz@gmail.com
  3. 3. C ’ est 40 gros sites Drupal en 2011
  4. 4. 1 internaute sur 3 est un mobinaute ! > Source « Médiamétrie – 2ème trimestre 2011 » FRANCE 2011
  5. 5. Les Français, connectés & mobiles ! 2007 2011 +62% en 4 ans +37% en 4 ans > Source « Médiamétrie » FRANCE
  6. 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. 7. Usage : plus, mais surtout, plus vite ! 2011 FRANCE > Sources « Xiti Monitor »
  8. 8. Connexion : un débit 3 fois plus lent ! 2010 FRANCE > Sources « Baromètre des connexions fixes et mobiles - DegroupTest » Et instable …
  9. 9. Constructeurs & parts de marché 2011 FRANCE > Sources « Etude IDC »
  10. 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. 11. Autant d ’ OS que de différences ! 2011 > Sources « Smartphones dans l ’ Europe des 5 - Comscore » EUROPE
  12. 12. Plus de navigateurs que d ’ OS … 2011 FRANCE > Sources « Statcounter Global Stats (Janvier à Septembre) » 2010
  13. 13. 3 groupes de navigateurs, que choisir ? 2011 > Sources « Mobile market overview - QuirksMode » MONDE <ul><li>Passé </li></ul><ul><li>Support CSS & JS passable ou inéxistant </li></ul><ul><li>Support HTML3 </li></ul><ul><li>Moteurs de rendu peu rapides </li></ul><ul><li>Présent </li></ul><ul><li>Bon support CSS & JS </li></ul><ul><li>Support HTML 5 partiel (vidéo & audio) </li></ul><ul><li>Moteurs de rendu rapides </li></ul><ul><li>Futur </li></ul><ul><li>Très bon support CSS (3) & JS </li></ul><ul><li>Support HTML 5 avançé (Cache, DB, …) </li></ul><ul><li>Moteurs de rendu performants </li></ul>
  14. 14. Comment diffuser large ? 2011 > Sources « Google ;) » FRANCE
  15. 15. Market places, où en sommes-nous ? 2011 > Sources « ABI research – Business Wire » MONDE
  16. 16. Usage : App ou Web (-app) ? 2011 > Sources « Flurry – Comscore » USA
  17. 17. On conclut ?  <ul><li>Le mobile, faut y aller ! (et même penser m-commerce) </li></ul><ul><li>Le mobinaute est un boulimique hyperactif ! : Droit au but et vite ! Pensez aux caches, à l ’ ergonomie, aux contenus ! </li></ul><ul><li>Une connexion lente ( et pas permanente ) pour un hyperactif : attention aux ressources et au DOM ! Et pensez aux caches client ! </li></ul><ul><li>3 groupes de résolutions : pensez adaptif, flexible ! Responsive ! Vraiment, attention au DOM ! </li></ul><ul><li>2 versions c ’ est assez ! : un thème « futur » et probablement un thème « passé » (le « présent » se contentera du « passé »). </li></ul><ul><li>Pourquoi choisir ?! Une App et une Web-App = Hybride </li></ul>
  18. 18. Quel socle architectural pour Drupal ? <ul><li>Module « MobileTools » </li></ul><ul><li>Module « Domain » (« Domain Access » & « Domain Theme ») </li></ul>
  19. 19. Plan de redirection : Drupal or Not ? <ul><li>Qui peut implémenter le plan de redirection ? </li></ul><ul><ul><li>Le serveur « load-balancer » </li></ul></ul><ul><ul><li>Le serveur « proxy-cache » </li></ul></ul><ul><ul><li>Le serveur « HTTP » </li></ul></ul><ul><ul><li>L ’ applicatif « Drupal », via le module « MobileTools » </li></ul></ul><ul><li>« Device detection » (CF « WURFL ») et « Browser detection » (CF « BrowserCap ») peuvent vous aider. </li></ul><ul><li>N ’ oubliez pas de cacher la redirection ! </li></ul><ul><ul><li>Vary : User-Agent </li></ul></ul><ul><ul><li>Cache-Control : private </li></ul></ul><ul><ul><li>Expires : Sat, 21 Aug 1982 06:00:00 GMT </li></ul></ul>
  20. 20. when HTTP_REQUEST { log local0. &quot;[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header &quot;User-Agent&quot;]&quot; if {[matchclass [HTTP::header &quot;User-Agent&quot;] contains $::MobileUserAgents] } { HTTP::redirect &quot;http://m.holidayextras.co.uk[HTTP::uri]&quot; log local0. &quot;[IP::client_addr]:[TCP::client_port]: UA: [HTTP::header &quot;User-Agent&quot;], redirecting&quot; } } Plan de redirection : Drupal or Not ? <ul><li>Dès que possible ! </li></ul><ul><ul><li>Minimisez le temps de connexion au serveur applicatif, redirigez dès que possible et cachez la redirection ! </li></ul></ul><ul><li>Mais pas Drupal ! </li></ul><ul><ul><li>Si vous ne disposez que d ’ un serveur web, privilégié l ’ usage du serveur HTTP (début de chaine) à Drupal. </li></ul></ul>
  21. 21. Multi-site avec Drupal ? Create a new domain record : easy !
  22. 22. Sélection du thème ? “ Domain Theme” = Click & Play !
  23. 23. Sélection du thème ? Click … … & Play !
  24. 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. 25. Publication multi-sites ? « Domain Access » = Un contrôle fin sur la publication multi-device (node/add – node/edit form alter)
  26. 26. Sélection du contenu ? « Views » + « Domain Views » = Du contenu « sur mesure »
  27. 27. Sélection du gabarit ? « Domain C t ools » + « Panels » = Une ergonomie dédiée & évolutive !
  28. 28. Sélection du gabarit ? Click …
  29. 29. Sélection du gabarit ? Alternative « Mobile Tools » Click …
  30. 30. Sélection du gabarit ? … & Play !
  31. 31. Création du thème ? <ul><li>« Mobilize, Don ’ t Miniaturize » (Bob Miller). </li></ul><ul><li>Pensez « responsive », ou à minima « fluid ». </li></ul><ul><li>Utilisez l ’ argument « media » de la balise « link » pour conditionner la sélection de la feuille de style a appliquer au HTML. </li></ul><ul><li>Minimiser l ’ arbre DOM = aussi peu de HTML que possible. </li></ul><ul><li>N ’ incluez que les fichiers JavaScript et CSS nécessaires (pensez au hook_preprocess_page pour « nettoyer » les inclusions CSS & JS) </li></ul><ul><li>Responsive Design = Parcimonie ! (Masquer 50% des éléments HTML … C’ est trop !). </li></ul>
  32. 32. Un thème « Fluid » ? <ul><li>m .slate.fr sur iPhone </li></ul>
  33. 33. Un thème « Fluid » ? <ul><li>m .slate.fr sur iPad </li></ul>
  34. 34. Un thème « Responsive » ? <ul><li>b rowser.nokia.com </li></ul>
  35. 35. « Fluid » ? « Responsive » ? <ul><li>« Fluid » = Tout en pourcentage ! </li></ul><ul><li>« Responsive » = Media queries, une CSS par groupe d ’ écran ! (En cascade plutôt qu ’ en remplacement). </li></ul><ul><ul><li>Le thème «  AdaptiveTheme  » (compatible avec Panel Everywhere ) est une bonne base ! Ou encore le thème «  OmegaTheme  ». </li></ul></ul><ul><ul><li>Le module  «  tinySrc  » est une bonne solution aux problèmes d ’ images. </li></ul></ul>Type d’appareil Propriétés de l’appareil. Nous pourrions ajouter : “ and (orientation: landscape)”
  36. 36. Animations & CSS3 <ul><li>Animations </li></ul><ul><ul><li>Pas de manipulation DOM (element.top & element.left) </li></ul></ul><ul><ul><ul><li>CSS 3 : Pas de Translate, TranslateX, TranslateY </li></ul></ul></ul><ul><ul><ul><ul><li>CSS 3 : Translate3D (GPU  ) </li></ul></ul></ul></ul><ul><ul><li>Pas de Jquery </li></ul></ul><ul><ul><ul><li>DOM Selector API : document.querySelectorAll() </li></ul></ul></ul><ul><ul><ul><li>Ou bien, J Q uery Mobile </li></ul></ul></ul>
  37. 37. Les formulaires & HTML5 <ul><li>Formulaires </li></ul><ul><ul><li>Pas de plugin J Q uery / custom JS-CSS </li></ul></ul><ul><ul><ul><li>HTML5 Forms (email, url, tel, couleur, range, search, nombres, dates) </li></ul></ul></ul>
  38. 38. Fonctionnalités HTML5 ? <ul><li>Audio </li></ul><ul><ul><li><audio src= ” drupagora.mp3&quot; controls> </video> </li></ul></ul><ul><li>Vidéo </li></ul><ul><ul><li><video src= ” drupagora.mp4&quot; controls> </video> </li></ul></ul><ul><li>La lecture automatique n ’ est pas supportée par IOS. </li></ul><ul><li>L ’ audio n ’ est pas supporté par les premières versions d ’ Android. Cela étant une solution de contournement existe : </li></ul><ul><ul><li><video src=”drupagora.mp3&quot; onclick=&quot;this.play();&quot;> </video> </li></ul></ul>
  39. 39. Fonctionnalités HTML5 ? <ul><li>Géolocalisation </li></ul><ul><ul><li>Permet de localiser l ’ utilisateur </li></ul></ul><ul><ul><li>navigator.geolocation.getCurrentPosition(Success_callback,Error_callback,Parameters); </li></ul></ul><ul><ul><ul><li>S uccess_callback : La fonction appelée en cas de géolocalisation réussie (la position sera alors passée en argument) </li></ul></ul></ul><ul><ul><ul><li>Error_callback : La fonction appelée en cas d ’ échec. </li></ul></ul></ul><ul><ul><ul><li>Parameters : « {enableHighAccuracy : true} » pour activer le GPS par exemple . </li></ul></ul></ul>
  40. 40. Fonctionnalités HTML5 ? <ul><li>Session storage </li></ul><ul><ul><li>Permet de stocker des données localement pour la durée de la visite sur le site (une fois terminée, les données sont perdues) </li></ul></ul><ul><ul><ul><li>La mémoire utilisée pour stocker les données est limitée (selon les navigateurs) à quelques méga-octets </li></ul></ul></ul><ul><ul><li>// Sauvegarde de la donnée </li></ul></ul><ul><ul><li>sessionStorage.setItem( ’ Drupagora', ‘ Drupal pour les DSI et chefs de projets ’ ); </li></ul></ul><ul><ul><li>// Lecture de la donnée sauvegardée </li></ul></ul><ul><ul><li>alert(&quot;Drupagora, c ’ est : &quot; + sessionStorage.getItem( ’ Drupagora')); </li></ul></ul><ul><ul><li>// Suppression de la donnée </li></ul></ul><ul><ul><li>sessionStorage.removeItem( ’ Drupagora'); </li></ul></ul>
  41. 41. Fonctionnalités HTML5 ? <ul><li>Local storage </li></ul><ul><ul><li>Permet de stocker des données localement pour une durée indéterminée </li></ul></ul><ul><ul><ul><li>La mémoire utilisée pour stocker les données est limitée (selon les navigateurs) à quelques méga-octets </li></ul></ul></ul><ul><ul><li>// Sauvegarde de la donnée </li></ul></ul><ul><ul><li>localStorage.setItem( ’ Drupagora', ‘ Drupal pour les DSI et chefs de projets ’ ); </li></ul></ul><ul><ul><li>// Lecture de la donnée sauvegardée </li></ul></ul><ul><ul><li>alert(&quot;Drupagora, c ’ est : &quot; + localStorage.getItem( ’ Drupagora')); </li></ul></ul><ul><ul><li>// Suppression de la donnée </li></ul></ul><ul><ul><li>localStorage.removeItem( ’ Drupagora'); </li></ul></ul>
  42. 42. Fonctionnalités HTML5 ? <ul><li>DB storage </li></ul><ul><ul><li>Permet de stocker des données localement pour une durée indéterminée. </li></ul></ul><ul><ul><ul><li>La mémoire utilisée pour stocker les données est limitée (selon les navigateurs) à quelques méga-octets, cette limite peut être outrepassé si l ’ utilisateur le permet (un prompt lui demande l ’ autorisation). </li></ul></ul></ul><ul><ul><ul><li>Les requêtes SQL pour « DB storage » sont semblables a des requêtes SQL classiques. </li></ul></ul></ul>
  43. 43. Fonctionnalités HTML5 ? <ul><li>Cache </li></ul><ul><ul><li>Les applications « offline » utilisent « l ’ application cache » du navigateur, qui permet : </li></ul></ul><ul><ul><ul><li>D ’ utiliser une application web ou de naviguer sur un site sans connexion internet. </li></ul></ul></ul><ul><ul><ul><li>D ’ améliorer la vitesse de chargement des pages puisque les fichiers sont présents en local. </li></ul></ul></ul><ul><ul><ul><li>De réduire la charge du serveur, puisqu ’ en effet, il n ’ enverra que les fichiers qui auront changés depuis le dernier passage de l ’ utilisateur. </li></ul></ul></ul><ul><ul><ul><li>Attention : le cache d ’ une application est limité à 5Mo. </li></ul></ul></ul>
  44. 44. Fonctionnalités HTML5 ? <ul><li>Cache </li></ul><ul><ul><li>Un petit exemple </li></ul></ul><ul><ul><ul><li>Déclaration de l’usage du cache application : </li></ul></ul></ul><ul><ul><ul><ul><li><html manifest=&quot;site.manifest”> </li></ul></ul></ul></ul><ul><ul><ul><li>Structure du fichier manifest : </li></ul></ul></ul><ul><ul><ul><ul><li>CACHE MANIFEST </li></ul></ul></ul></ul><ul><ul><ul><ul><li># v0.1 </li></ul></ul></ul></ul><ul><ul><ul><ul><li>CACHE: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>index.html </li></ul></ul></ul></ul><ul><ul><ul><ul><li>css/style.css </li></ul></ul></ul></ul><ul><ul><ul><ul><li>img/logo.png </li></ul></ul></ul></ul><ul><ul><ul><ul><li>FALLBACK: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>/ /offline.html </li></ul></ul></ul></ul><ul><ul><ul><ul><li>NETWORK: </li></ul></ul></ul></ul><ul><ul><ul><ul><li>* </li></ul></ul></ul></ul>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”
  45. 45. Optimisations de performances ? <ul><li>Aussi peu d’éléments HTML que possible </li></ul><ul><ul><li>Un design simple </li></ul></ul><ul><ul><li>Du contenu adapté au mobile (pas de romans avec 15 photos) </li></ul></ul><ul><li>Aussi peu de Javascript que possible </li></ul><ul><ul><li>Des comportements simples </li></ul></ul><ul><li>Se décharger sur le navigateur </li></ul><ul><ul><li>HTML5 (form, cache, ...) autant que possible </li></ul></ul><ul><ul><li>CSS3 (Translate3D, Gradient, …) autant que possible </li></ul></ul><ul><li>Cache, cache, et encore cache </li></ul><ul><ul><li>Varnish, Redirections, HTML, JS, CSS, Images, … </li></ul></ul>
  46. 46. Drupal-App-ify ? <ul><li>Une application native : une connexion à Drupal via le module Services ! </li></ul><ul><li>Une application hybride : un site web consulté via une application native qui embarque la version “API” du navigateur mobile (Safari Mobile, etc..) </li></ul><ul><ul><li>Attention , la version “ API ” ne réagit pas exactement comme la version navigateur . </li></ul></ul><ul><ul><li>L’usage du HTML5 et du CSS3 est indispensable pour une fluidité similaire à une applicaton native. </li></ul></ul><ul><ul><li>Le support du mode “ offline ” est aussi indispensable . </li></ul></ul>
  47. 47. Drupal-App-ify : Native, comment ? <ul><li>Concept </li></ul><ul><ul><li>Créer une application native. </li></ul></ul><ul><ul><li>Utiliser Drupal comme source de données via le module Services. </li></ul></ul><ul><li>Implémentation </li></ul><ul><ul><li>Titanium ! </li></ul></ul><ul><ul><ul><li>Supporte 2 plateformes (IOS, Android) </li></ul></ul></ul><ul><ul><ul><li>Rendu natif des éléments HTML/CSS (convertion) </li></ul></ul></ul>
  48. 48. Drupal-App-ify : Hybride, comment ? <ul><li>Concept </li></ul><ul><ul><li>Embarquer un navigateur dans une application. </li></ul></ul><ul><ul><li>Exposer en JavaScript les fonctions native (photo, vidéo, acceleromètre, contacts, stockages, notifications, …). </li></ul></ul><ul><li>Implémentation </li></ul><ul><ul><li>PhoneGap ! </li></ul></ul><ul><ul><ul><li>Supporte 7 plateformes (IOS, Android, RIM, WebOS, Symbian, Bada, Windows Phone) </li></ul></ul></ul><ul><ul><ul><li>Fondé sur un socle HTML5/CSS3/JS </li></ul></ul></ul>
  49. 49. SocieteGenerale.com – Un bel exemple ! <ul><li>Un site, un site mobile, une application I P ad : L ’ ensemble entièrement généré par (le même) Drupal, et publiant, en partie, les mêmes articles  </li></ul>
  50. 50. To be continued …
  51. 51. Le premier CMS Open Source pour les tablettes. Disponible en téléchargement Q1 2012. Beta privée en cours…
  52. 52. Merci pour l ’ écoute ! A mon tour … Des questions ?  Jean-Baptiste Guerraz - jbguerraz@gmail.com
  53. 53. <ul><li>Pour aller plus loin, retrouver cette présentation sur « SlideShare » </li></ul><ul><ul><li>Cherchez « jbguerraz » </li></ul></ul>Jean-Baptiste Guerraz - jbguerraz@gmail.com

×