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 »...
Prochain SlideShare
Chargement dans…5
×

Drupal & Mobilité

4 560 vues

Publié le

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

Publié dans : Technologie
1 commentaire
4 j’aime
Statistiques
Remarques
Aucun téléchargement
Vues
Nombre de vues
4 560
Sur SlideShare
0
Issues des intégrations
0
Intégrations
794
Actions
Partages
0
Téléchargements
65
Commentaires
1
J’aime
4
Intégrations 0
Aucune incorporation

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

    ×