drupal & mobilité

Download Drupal & Mobilité

Post on 20-Jun-2015

3.786 views

Category:

Technology

6 download

Embed Size (px)

DESCRIPTION

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

TRANSCRIPT

  • 1. Mobilit Comment Drupal peut-il nous aider ? Jean-Baptiste Guerraz - jbguerraz@gmail.com

2.

  • Jean-Baptiste Guerraz
  • Directeur de projet / Adyax
  • Je gre des projets Drupal majeurs pour des comptes tels que Socit Gnrale, Le muse du Louvres, Slate, Orange, Le Quotidien du mdecin, Groupe Moniteur ...
  • Dans le domaine de la mobilit, j ai eu entre autres la charge du site mobile institutionnel de la Socit Gnrale, de l application IPad "Socit Gnrale - Review", de la version mobile du site Slate.fr...

Jean-Baptiste Guerraz - jbguerraz@gmail.com 3. C est 40 gros sites Drupal en 2011 4. 1 internaute sur 3 est un mobinaute ! > Source Mdiamtrie 2me trimestre 2011 FRANCE 2011 5. Les Franais, connects & mobiles ! 2007 2011 +62% en4 ans +37% en4 ans > Source Mdiamtrie 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 dbit 3 fois plus lent ! 2010 FRANCE > Sources Baromtre des connexions fixes et mobiles - DegroupTest Et instable 9. Constructeurs & parts de march 2011 FRANCE > Sources Etude IDC 10. La diversit des rsolutions 2011 > Sources Top des ventes (Orange, Bouygues, Phone House, Institut GFK) & spcifications 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 CurveNokia C2 11. Autant d OS que de diffrences ! 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. 3 groupes de navigateurs, que choisir ? 2011 > Sources Mobile market overview - QuirksMode MONDE

  • Pass
  • Support CSS & JS passable ou inxistant
  • Support HTML3
  • Moteurs de rendu peu rapides
  • Prsent
  • Bon support CSS & JS
  • Support HTML 5 partiel (vido & audio)
  • Moteurs de rendu rapides
  • Futur
  • Trs bon support CSS (3) & JS
  • Support HTML 5 avan (Cache, DB, )
  • Moteurs de rendu performants

14. Comment diffuser large ? 2011 > Sources Google ;) FRANCE 15. Market places, o en sommes-nous ? 2011 > Sources ABI researchBusiness Wire MONDE 16. Usage : App ou Web (-app) ? 2011 > Sources FlurryComscore USA 17. On conclut ?

  • Le mobile, faut y aller ! (et mme penser m-commerce)
  • Le mobinaute est un boulimique hyperactif ! : Droit au but et vite ! Pensez aux caches, l ergonomie, aux contenus !
  • Une connexion lente ( et pas permanente ) pour un hyperactif : attention aux ressources et au DOM ! Et pensez aux caches client !
  • 3 groupes de rsolutions : pensez adaptif, flexible ! Responsive ! Vraiment, attention au DOM !
  • 2 versions c est assez ! : un thme futur et probablement un thme pass (le prsent se contentera du pass).
  • Pourquoi choisir ?! Une App et une Web-App = Hybride

18. Quel socle architectural pour Drupal ?

  • Module MobileTools
  • Module Domain (Domain Access & Domain Theme)

19. Plan de redirection : Drupal or Not ?

  • Qui peut implmenter le plan de redirection ?
    • Le serveur load-balancer
    • Le serveur proxy-cache
    • Le serveur HTTP
    • L applicatif Drupal, via le module MobileTools
  • Device detection (CF WURFL) et Browser detection (CF BrowserCap) peuvent vous aider.
  • N oubliez pas de cacher la redirection !
    • Vary : User-Agent
    • Cache-Control : private
    • Expires : Sat, 21 Aug 1982 06:00:00 GMT

20. 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 ?

  • Ds que possible !
    • Minimisez le temps de connexion au serveur applicatif, redirigez ds que possible et cachez la redirection !
  • Mais pas Drupal !
    • Si vous ne disposez que d un serveur web, privilgi l usage du serveur HTTP (dbut de chaine) Drupal.

21. Multi-site avec Drupal ? Create a new domain record :easy ! 22. Slection du thme ? Domain Theme = Click & Play ! 23. Slection du thme ? Click & Play ! 24. Slection du thme ? L alternative Mobile Tools Mobile Tools :Un seul thme mobile. Peux convenir une implmentation minimale d un site mobile. 25. Publication multi-sites ? Domain Access = Un contrle fin sur la publication multi-device (node/addnode/edit form alter) 26. Slection du contenu ? Views + Domain Views = Du contenu sur mesure 27. Slection du gabarit ? Domain C t ools + Panels = Une ergonomie ddie & volutive ! 28. Slection du gabarit ? Click 29. Slection du gabarit ? Alternative Mobile Tools Click 30. Slection du gabarit ? &Play ! 31. Cration du thme ?

  • Mobilize, Don t Miniaturize (Bob Miller).
  • Pensez responsive, ou minima fluid.
  • Utilisez l argument media de la balise link pour conditionner la slection de la feuille de style a appliquer au HTML.
  • Minimiser l arbre DOM = aussi peu de HTML que possible.
  • N incluez que les fichiers JavaScript et CSS ncessaires (pensez au hook_preprocess_page pour nettoyer les inclusions CSS & JS)
  • Responsive Design = Parcimonie ! (Masquer 50% des lments HTML C est trop !).

32. Un thme Fluid ?

  • m .slate.fr sur iPhone

33. Un thme Fluid ?

  • m .slate.fr sur iPad

34. Un thme Responsive ?

  • b rowser.nokia.com

35. Fluid ? Responsive ?

  • Fluid = Tout en pourcentage !
  • Responsive = Media queries, une CSS par groupe d cran ! (En cascade plutt qu en remplacement).
    • Le thme AdaptiveTheme (compatible avecPanel Everywhere ) est une bonne base ! Ou encore le thme OmegaTheme .
    • Le module tinySrc est une bonne solution aux problmes d images.

Type dappareil Proprits de lappareil. Nous pourrions ajouter : and (orientation: landscape) 36. Animations & CSS3

  • Animations
    • Pas de manipulation DOM (element.top & element.left)
      • CSS 3 : Pas de Translate, TranslateX, TranslateY
        • CSS 3 : Translate3D (GPU )
    • Pas de Jquery
      • DOM Selector API : document.querySelectorAll()
      • Ou bien, J Q uery Mobile

37. Les formulaires & HTML5

  • Formulaires
    • Pas de plugin J Q uery / custom JS-CSS
      • HTML5 Forms (email, url, tel, couleur, range, search, nombres, dates)

38. Fonctionnalits HTML5 ?

  • Audio
  • Vido
  • La lecture automatique n est pas supporte par IOS.
  • L audio n est pas support par les premires versions d Android. Cela tant une solution de contournement existe :

39. Fonctionnalits HTML5 ?

  • Golocalisation
    • Permet de localiser l utilisateur
    • navigator.geolocation.getCurrentPosition(Success_callback,Error_callback,Parameters);
      • S uccess_callback : La fonction appele en cas de golocalisation russie (la position sera alors passe en argument)
      • Error_callback : La fonction appele en cas d chec.
      • Parameters : {enableHighAccuracy : true} pour activer le GPS par exemple .

40. Fonctionnalits HTML5 ?

  • Session storage
    • Permet de stocker des donnes localement pour la dure de la visite sur le site (une fois termine, les donnes sont perdues)
      • La mmoire utilise pour stocker les donnes est limite (selon les navigateurs) quelques mga-octets
    • // Sauvegarde de la donne
    • sessionStorage.setItem( Drupagora', Drupal pour les DSI et chefs de projets );
    • // Lecture de la donne sauvegarde
    • alert("Drupagora, c est : " + sessionStorage.getItem( Drupagora'));
    • // S