La mobilité dans Drupal

4 633 vues

Publié le

Session donnée lors du Drupal Camp Lyon 2012. Présentant les différentes alternatives pour gérer la mobilité avec Drupal.

- Responsive Design
- Contextes mobiles (themes mobiles)
- Applications Natives et intégrations en Web Services ou HTML5

Publié dans : Technologie
0 commentaire
2 j’aime
Statistiques
Remarques
  • Soyez le premier à commenter

Aucun téléchargement
Vues
Nombre de vues
4 633
Sur SlideShare
0
Issues des intégrations
0
Intégrations
62
Actions
Partages
0
Téléchargements
42
Commentaires
0
J’aime
2
Intégrations 0
Aucune incorporation

Aucune remarque pour cette diapositive
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • La mobilité dans Drupal

    1. 1. QUE FAIRE POUR CEUX QUI ONT DESFONDS SOMBRES POUR LEUR SLIDES ?
    2. 2. Mobilité & Multi-device avecpar @mtopolov CTO de @adyax & @padcms
    3. 3. 100 Experts Drupal, 45 gros projets Drupal en 2011
    4. 4. Mobilité ?
    5. 5. Web mobile c’est quoi ?Multiplicité des terminauxInterfaces tactilesUtilisation dans un contexte de vie couranteRéseaux à qualité aléatoire / mode offline
    6. 6. Multi-device ?
    7. 7. Multiplicité des terminaux + Nombreux ratios (4:3, 16:9, 16:10, 3:4, 1:1...) + Diverses résolutions (240x240 -> 2048x1536) = Importance à adapter le contenu au contenant
    8. 8. Tactile ?
    9. 9. Interfaces tactiles Les doigts sont plus gros et gauches que la souris Le scroll est simple et naturel (mais fatiguant en vertical) Contenus plus gros et disposés verticalement Nécessité de feedback visuel (pas de click-click)
    10. 10. Usage en conditions de vie courante
    11. 11. Théorie
    12. 12. La pratique c’est ça
    13. 13. ça
    14. 14. ça
    15. 15. ou même ça !
    16. 16. Contexte de vie couranteVitesse & Pertinence (couper le superflu)Le plus important d’abord (reograniser le contenu)Profiter, de la localisation (si pertinent)
    17. 17. EDGE ou Offline
    18. 18. Réseau aléatoire et offline Votre contenu devrait être disponible en cas de perte de la connexion internet Le contenu doit être le plus léger possible Le temps de réponse de votre serveur réduit au minimum.
    19. 19. Pourquoi est-ce important ?6 000 000 000 000 000 000 octets / mois
    20. 20. Explosion du trafic mobile en 2016 le trafic mobile sera multiplié par 30 Internet mobile c’est déjà 50% du trafic en Afrique et Asie 200 millions de tablettes dans le monde Aujourd’hui le trafic mobile c’est 50 fois le trafic broadband.
    21. 21. Je ne le vois pas... Poule/oeuf : les gens ne (re)viennent pas car votre site n’est pas adapté aux terminaux Référencement mobile n’est pas que du SEO (présence en App Store, Raccourcis Safari, TV connectés, portails mobiles, google mobile) Votre contenu n’est pas utilisé en mobilité (mais ce n’est pas une fatalité)
    22. 22. Solutions
    23. 23. Solutions Drupal Mobile Responsive Design Thème mobile (contexte mobile) Apps Natives (PhoneGap, Titanium, ou DYI) Un mot sur le web local
    24. 24. Que faire pour qui ? Responsive Thème Mobile App native eCommerce OUI Media NON OUI OUI Réseaux Sociaux NON OUI Marques OUI NONBases de données OUI NON ONG/Gov OUI NON
    25. 25. Responsive Design(ou comment briller en soirée geek)
    26. 26. Super trendy
    27. 27. Responsive designTrès sympa en démo client (l’effet «Waouuu»)Une réelle difficulté lors de l’intégration HTML = 2 foisplus long à faireNécessite un vrai travail fonctionnel en amontAvantage : peu d’impact sur le développement pur
    28. 28. Coté Drupal ?Omega, un starter thème responsive & grid (D7uniquement)Globalement le responsive ne concerne que très peuDrupal (Panels?)Penser à gérer les presets différents pour ImageCache
    29. 29. Concrètement<link href="/css/screen.css" type="text/css" rel="stylesheet"media="all" /><link rel="stylesheet" media="only screen and (max-width:1020px)" href="/css/screen_800.css" type="text/css" /><link rel="stylesheet" media="only screen and (max-width:600px)" href="/css/screen_320.css" type="text/css" />
    30. 30. Un peu de JS $(document).ready(function(){ if( screen.width < 750 || navigator.userAgent.match(/Android/i) || navigator.userAgent.match(/webOS/i) || navigator.userAgent.match(/iPhone/i) || navigator.userAgent.match(/iPod/i) ){ $(body).addClass(this-is-mobile); };
    31. 31. Quelques exemples responsive
    32. 32. Quelques exemples responsive
    33. 33. Quelques exemples responsive
    34. 34. Quelques exemples responsive
    35. 35. Quelques exemples responsive
    36. 36. Quelques exemples responsive
    37. 37. Theme mobile(ou plutôt le contexte mobile !)
    38. 38. Theme mobileQuand switcher sur le contexte mobile ?On switch pas de theme, mais bien de contexte,les Views, Panels, Modules custom sont impactés...Pour aller vite, utiliser jQuery Mobile, si le client est ok.
    39. 39. Quand switcher ?Le plus tôt possible (LB, Proxy).Ne surtout pas le faire dans Drupal (Browscap,Wurfl...) Load Cache / HTTP Drupal Balancer Proxy
    40. 40. Varnish (1/2)Cookie ? UA Erreur Custom Redirectif (!req.http.Cookie ~ "mdevice=desktop") { set req.http.X-Device = "pc"; if (req.http.User-Agent ~ "iP(hone|od)" || req.http.User-Agent ~ "Android" ||req.http.User-Agent ~ "Symbian" || req.http.User-Agent ~ "BlackBerry" || req.http.User-Agent ~ "^SonyEricsson" || req.http.User-Agent ~ "^Nokia" || req.http.User-Agent ~"^SAMSUNG" || req.http.User-Agent ~ "^LG" || req.http.User-Agent ~ " webOS") { set req.http.X-Device = "mobile"; }
    41. 41. Varnish (2/2)Cookie ? UA Erreur Custom Redirectif(req.http.X-Device == "mobile") { if(req.http.host !~ "m.erol.adyax.com:6081") { error 751 "m.erol.adyax.com:6081"; } }sub vcl_error { if (obj.status == 751) { if (obj.response ~ "m.erol.adyax.com:6081") { set obj.http.Location = "http://m.erol.adyax.com:6081" req.url; set obj.http.Vary = "Cookie"; set obj.http.Cache-Control = "private"; set obj.http.Expires = "Sat, 21 Aug 2022 06:00:00 GMT"; } set obj.status = 302; return(deliver); } }
    42. 42. Contexte mobile : principes Theme Custom / JQuery Mobile (Theme) ImageCache, Panels (Layout) Mobile Tools / Domains (mobile.tonsite.com) VARNISH (Redirection HTTP 302)
    43. 43. jQuery Mobile jQuery Mobile: «Touch-Optimized Web Framework for Smartphones & Tablets » On peut customiser facilement Ressemble à l’interface iPhonehttp://jquerymobile.com/
    44. 44. j-Query pour & contre Plus Moins Rapide à mettre en place Votre client doit accepter (2-3 jours) le design JQuery... Navigation proche des Difficile à hacker si on menus du terminal veut aller loin Vous évite de réfléchir au Vous évite de réfléchir au mobile mobile
    45. 45. Quelques exemples live
    46. 46. Quelques exemples live
    47. 47. Quelques exemples live
    48. 48. Quelques exemples live
    49. 49. Quelques exemples live
    50. 50. Applications Natives
    51. 51. Principes de baseVotre application doit récupérer le contenu depuisDrupalUne consultation en mode offline devrait êtrepossible (stockage interne des données)Le contenu peut être mis à jour à tout moment
    52. 52. Services 3.X Donne accès aux noeuds, files, taxonomies, users, views Gère la sécurité (API Key) Server API permet de coder ses propres protocoles
    53. 53. Problèmes courantsAbsence de structure dans les données (à cause deCCK)SOAP n’est pas standard et bugguéPas de WSDLProblèmes avec les NodeRefs, Medias, Champscomposés
    54. 54. <?xml version=1.0 ?><methodCall> <methodName>node.create</methodName> <params> <param> <value> <struct> <member> <name>type</name> <value> <string>story</string> </value> node.create </member> <member> <name>body</name> <value> <string>Create body input</string> </value> </member> <member> <name>title</name> <value> <string>Test title</string> </value> </member> </struct> </value> </param> </params></methodCall>
    55. 55. SOAP 399 octets<?xml version=1.0 encoding=UTF-8?><s:Envelope xmlns:s="http://www.w3.org/2001/06/soap-envelope" xmlns:xsi="http://www.w3.org/1999/XMLSchema-instance" xmlns:xsd="http://www.w3.org/1999/XMLSchema"> <s:Body> <x:FlickrRequest xmlns:x="urn:flickr"> <method>flickr.echo</method> <name>value</name> </x:FlickrRequest> </s:Body></s:Envelope>
    56. 56. XML-RPC 99 octets<?xml version="1.0"?><methodCall> <methodName>flickr.echo</methodName> <params/></methodCall>
    57. 57. JSON 68 octets{ "method" : "flickr.echo", "params" : null, "id" : 1}
    58. 58. B-PLIST 52 octets 6270 6c69 7374 3030 d101 0256 6d65 7468 6f64 5b66 6c69 636b 722e 6563 686f 080b 1200 0000 0000 0001 0100 0000 0000 0000 0300 0000 0000 0000 0000 0000 0000 0000 1e
    59. 59. ...sinon, il y a le HTML Toute l’application n’est qu’un loader de WebUI avec un wrapper dévénements JS Coté Drupal, on génére des pages HTML (avec Boost) La synchro est basée sur SVN (http://pecl.php.net/ package/svn/1.0.0)
    60. 60. Attention les dangers HTMLSur les terminaux WebUI sont lents => prégénrationen images + zones clicablesRéécriture des URL (navigation locale)Intégration de vidéos (parsing des <object>)
    61. 61. SG : Drupal web site + Mobile theme + iPad App
    62. 62. SG : Drupal web site + Mobile theme + iPad App
    63. 63. SG : Drupal web site + Mobile theme + iPad App
    64. 64. SG : Drupal web site + Mobile theme + iPad App
    65. 65. Liste des modules Mobiles utileshttp://drupal.org/project/mobile_toolshttp://drupal.org/project/domainhttp://drupal.org/project/browscaphttp://drupal.org/project/omegahttp://drupal.org/project/views_jqm
    66. 66. Premier outil de publication de magazines pour tablettes (iPad & Android) OPEN SOURCE Lancement : 15 Juin !!! http://padcms.com @PadCMS
    67. 67. Une question ? Nhésitez pas à nous solliciter. @adyax, @mtopolov

    ×