SlideShare a Scribd company logo

For a Social Local and Mobile Drupal

•Download as KEY, PDF•
•
Adyax
Adyax

Presentation given at Drupal Business days, in Wien, may 2012. Learn some 'dos & donts' about Social Local and Mobile Drupal

1 of 74
Social, Local & Mobile by @mtopolov CTO of @adyax & @padcms
100 Drupal Experts, 45 big Drupal projects in 2011
For a Social Local and Mobile Drupal
SoLoMo ?
SoLoMo ? SOcial : Facebook, Twitter, Friends, Activity,...
SoLoMo ? SOcial : Facebook, Twitter, Friends, Activity,... LOcal : Geocoding, Foursquare, Google Maps...
SoLoMo ? SOcial : Facebook, Twitter, Friends, Activity,... LOcal : Geocoding, Foursquare, Google Maps... MObile : JQuery Mobile, Responsive, PhoneGap...
Act 1 : Let’s have friends... ACT 1 : THE SOCIAL
For a Social Local and Mobile Drupal
Drupbook ? Twipal ? no ! Drupal is not the good solution to run a whole social network*
Drupbook ? Twipal ? no ! Drupal is not the good solution to run a whole social network* But, you can enable social capabilities in a Drupal site ** It was a joke, okay ? * mainly because you’ll need to recode 50% of modules and add many tricks to get acceptable page response time in connected mode. Maybe in D8, with all the services stuff... Use Ruby, Python, Scala or Assembler** for that.
For a Social Local and Mobile Drupal
Commons ? Commons is an Acquia Drupal distribution, packaging «social» modules.
Commons ? Commons is an Acquia Drupal distribution, packaging «social» modules. Well, avoid it : Useless bulk of dozens of modules. More messy than usable.
For a Social Local and Mobile Drupal
Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world.
Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world. Localized, multiple countries, groups, likes, friends, event attendees, votes, ugc, local
Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world. Localized, multiple countries, groups, likes, friends, event attendees, votes, ugc, local With, for the social part : Flag, Views & Voting API
Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world. Localized, multiple countries, groups, likes, friends, event attendees, votes, ugc, local With, for the social part : Flag, Views & Voting API Yeah, that’s it...
For a Social Local and Mobile Drupal
For a Social Local and Mobile Drupal
For a Social Local and Mobile Drupal
For a Social Local and Mobile Drupal
For a Social Local and Mobile Drupal
For a Social Local and Mobile Drupal
For a Social Local and Mobile Drupal
Social Sharing Sharing : don’t loose time with modules, small FB/ Twitter code directly in your theme Open Graph must be inserted in all pages (use MetaTag module) You may use Facebook Share Avoid AddThis, ShareThis, Social Share and so on...
Advanced Open Graph No really nice existing modules So need to code Idea : Link your users to Networks, then use retrieved data about friends & co inside your site
http://wefeedback.org
http://wefeedback.org
http://wefeedback.org
http://wefeedback.org
http://wefeedback.org
Social «Donts» Organic groups : Ugly and useless in 80% cases Forum : Drupal forum is just awful Chat : no way, if your client asks for, say no User Relationship : Too big in the new «follow me» world, use Flag instead
ACT 2 : THE LOCAL
What is Local btw ? Everything ! Geocoded content Geocoded users / vistors Geographical Search And no, putting a Google Map does NOT mean Local
Content geocoding Well, Location module is really nice, useful for 90%. Manages POI only Geo (buggy) but manages Polygons & Lines GeoField to store your POI coordinates
Display Geo Data GMap module : simpliest integration Open Layers module : really nice maps effect. KLM & Clusterer to display high amount of markers
Geographical search HTML5 to ask for visitor localisation MySQL is not suitable* Apache SOLR 3.4 or 4 have a Spatial Search (distance & boxing) reaaaaally cool. MongoDB is an alternative (with it’s GeoSpatial Indexing) * SELECT id_geo FROM mybase.mytable AS p WHERE 6371 * 2 * ATAN2 ( SQRT ( ( SIN( ( RADIANS(p.lat - 43.27292469899955000) / 2 ) * SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) + COS ( RADIANS (43.27292469899955000 )) * COS ( RADIANS ( p.lat ) ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) ) ) , SQRT ( 1 - (SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) * SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) + COS ( RADIANS (43.27292469899955000) ) * COS ( RADIANS (p.lat) ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) ) ) ) < 1
ACT 3 : THE MOBILE
Mobile : What is different Why you should consider iPad theme in a different way of your Deskop 960px theme.
iPads and Smartphones are tactile... Fingers are larger and less agile There is no rollover
But vertical scroll is easier... so, design bigger, dispose vertically
What my options are ? Mobile theme switched by UA Responsive Design Native App connected trough Services
Mobile Theme Using Domains, jQuery Mobile, Mobile Tools
jQuery Mobile jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets It’s customizable :)) Looks like iPhone
jQuery pros & cons PROS CONS Fast to integrate (2-3 If your client agrees to fit days) jQuery Mobile design... Nice «device» oriented Hard to hack if you want interface elements more (pre-loaders, ...) Avoids you to «think» Avoids you to «think» mobile mobile
Mobile Theme How To 1. Drupal Theme with jQuery Mobile (or Not) 2. ‘Domains’ module / Mobile Tools 3. Switch on UA 4. But offer possibility to go back (cookies based rule) 5. With Varnish a little bit more tricky (VCL provided on demand)
When switch to mobile URL As soon as possible (LB / Cache, not Drupal) Don’t forget to cache redirections Load Cache / HTTP Drupal Balancer Proxy
http://lecollectif.orange.fr
http://lecollectif.orange.fr
http://lecollectif.orange.fr
http://lecollectif.orange.fr
http://lecollectif.orange.fr
Responsive Design Yeah this trendy thing everybody is talking about.
Trendy, yeah ?
Responsive design Really awesome during presales demos (wow effect) Really pain-in-the-a** HTML slicing (take x2 more time than classical slicing) Needs a smart designer / UX master
In Drupal ? Omega Theme is almost the only helper available Omega is grid based, so will help moving blocs But you’ll still have to think about your content
Some examples of Drupal Responsive
Some examples of Drupal Responsive
Some examples of Drupal Responsive
Some examples of Drupal Responsive
Some examples of Drupal Responsive
Some examples of Drupal Responsive
Native Apps Connect your apps to Drupal
Services Services module is your friend Use REST PList server instead of any Xml-Rpc, SOAP or even JSON. On App side we tried native, PhoneGap and Titanium, PhoneGap is our choice for 80% of Apps, 20% remain native.
TrickZ You can also send HTML to your devices On device side, just show a WebView Sync «new» content and render it offline on the device Take care : WebView is usually slow
SG : Drupal web site + Mobile theme + iPad App
SG : Drupal web site + Mobile theme + iPad App
SG : Drupal web site + Mobile theme + iPad App
SG : Drupal web site + Mobile theme + iPad App
«Take home» messages Drupal & SoLoMo
Take Home Messages Do not try to create a social network with Drupal You must go mobile NOW. As there are hundreds of divices : go Responsive VS Mobile Theme «Local» means fast search = Apache SOLR / Mongo
Modules List Social Local Mobile http://drupal.org/project/fb http://drupal.org/project/location http://drupal.org/project/mobile_tools http://drupal.org/project/privatemsg http://drupal.org/project/gmap http://drupal.org/project/domain http://drupal.org/project/flag http://drupal.org/project/geo http://drupal.org/project/browscap http://drupal.org/project/userpoints http://drupal.org/project/geofield http://drupal.org/project/omega http://drupal.org/project/twitter http://drupal.org/project/search_api_location http://drupal.org/project/facebookshare http://drupal.org/project/location_feeds http://drupal.org/project/flag_abuse http://drupal.org/project/votingapi

More Related Content

For a Social Local and Mobile Drupal

  • 1. Social, Local & Mobile by @mtopolov CTO of @adyax & @padcms
  • 2. 100 Drupal Experts, 45 big Drupal projects in 2011
  • 5. SoLoMo ? SOcial : Facebook, Twitter, Friends, Activity,...
  • 6. SoLoMo ? SOcial : Facebook, Twitter, Friends, Activity,... LOcal : Geocoding, Foursquare, Google Maps...
  • 7. SoLoMo ? SOcial : Facebook, Twitter, Friends, Activity,... LOcal : Geocoding, Foursquare, Google Maps... MObile : JQuery Mobile, Responsive, PhoneGap...
  • 8. Act 1 : Let’s have friends... ACT 1 : THE SOCIAL
  • 10. Drupbook ? Twipal ? no ! Drupal is not the good solution to run a whole social network*
  • 11. Drupbook ? Twipal ? no ! Drupal is not the good solution to run a whole social network* But, you can enable social capabilities in a Drupal site ** It was a joke, okay ? * mainly because you’ll need to recode 50% of modules and add many tricks to get acceptable page response time in connected mode. Maybe in D8, with all the services stuff... Use Ruby, Python, Scala or Assembler** for that.
  • 13. Commons ? Commons is an Acquia Drupal distribution, packaging «social» modules.
  • 14. Commons ? Commons is an Acquia Drupal distribution, packaging «social» modules. Well, avoid it : Useless bulk of dozens of modules. More messy than usable.
  • 16. Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world.
  • 17. Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world. Localized, multiple countries, groups, likes, friends, event attendees, votes, ugc, local
  • 18. Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world. Localized, multiple countries, groups, likes, friends, event attendees, votes, ugc, local With, for the social part : Flag, Views & Voting API
  • 19. Good example : McIn (mcin.com) is a private social network we’ve built for any McDonald’s worker around the world. Localized, multiple countries, groups, likes, friends, event attendees, votes, ugc, local With, for the social part : Flag, Views & Voting API Yeah, that’s it...
  • 27. Social Sharing Sharing : don’t loose time with modules, small FB/ Twitter code directly in your theme Open Graph must be inserted in all pages (use MetaTag module) You may use Facebook Share Avoid AddThis, ShareThis, Social Share and so on...
  • 28. Advanced Open Graph No really nice existing modules So need to code Idea : Link your users to Networks, then use retrieved data about friends & co inside your site
  • 34. Social «Donts» Organic groups : Ugly and useless in 80% cases Forum : Drupal forum is just awful Chat : no way, if your client asks for, say no User Relationship : Too big in the new «follow me» world, use Flag instead
  • 35. ACT 2 : THE LOCAL
  • 36. What is Local btw ? Everything ! Geocoded content Geocoded users / vistors Geographical Search And no, putting a Google Map does NOT mean Local
  • 37. Content geocoding Well, Location module is really nice, useful for 90%. Manages POI only Geo (buggy) but manages Polygons & Lines GeoField to store your POI coordinates
  • 38. Display Geo Data GMap module : simpliest integration Open Layers module : really nice maps effect. KLM & Clusterer to display high amount of markers
  • 39. Geographical search HTML5 to ask for visitor localisation MySQL is not suitable* Apache SOLR 3.4 or 4 have a Spatial Search (distance & boxing) reaaaaally cool. MongoDB is an alternative (with it’s GeoSpatial Indexing) * SELECT id_geo FROM mybase.mytable AS p WHERE 6371 * 2 * ATAN2 ( SQRT ( ( SIN( ( RADIANS(p.lat - 43.27292469899955000) / 2 ) * SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) + COS ( RADIANS (43.27292469899955000 )) * COS ( RADIANS ( p.lat ) ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) ) ) , SQRT ( 1 - (SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) * SIN( RADIANS(p.lat - 43.27292469899955000) / 2 ) + COS ( RADIANS (43.27292469899955000) ) * COS ( RADIANS (p.lat) ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) * SIN ( RADIANS(p.lon - 5.36235809326171900) / 2 ) ) ) ) < 1
  • 40. ACT 3 : THE MOBILE
  • 41. Mobile : What is different Why you should consider iPad theme in a different way of your Deskop 960px theme.
  • 42. iPads and Smartphones are tactile... Fingers are larger and less agile There is no rollover
  • 43. But vertical scroll is easier... so, design bigger, dispose vertically
  • 44. What my options are ? Mobile theme switched by UA Responsive Design Native App connected trough Services
  • 45. Mobile Theme Using Domains, jQuery Mobile, Mobile Tools
  • 46. jQuery Mobile jQuery Mobile: Touch-Optimized Web Framework for Smartphones & Tablets It’s customizable :)) Looks like iPhone
  • 47. jQuery pros & cons PROS CONS Fast to integrate (2-3 If your client agrees to fit days) jQuery Mobile design... Nice «device» oriented Hard to hack if you want interface elements more (pre-loaders, ...) Avoids you to «think» Avoids you to «think» mobile mobile
  • 48. Mobile Theme How To 1. Drupal Theme with jQuery Mobile (or Not) 2. ‘Domains’ module / Mobile Tools 3. Switch on UA 4. But offer possibility to go back (cookies based rule) 5. With Varnish a little bit more tricky (VCL provided on demand)
  • 49. When switch to mobile URL As soon as possible (LB / Cache, not Drupal) Don’t forget to cache redirections Load Cache / HTTP Drupal Balancer Proxy
  • 55. Responsive Design Yeah this trendy thing everybody is talking about.
  • 57. Responsive design Really awesome during presales demos (wow effect) Really pain-in-the-a** HTML slicing (take x2 more time than classical slicing) Needs a smart designer / UX master
  • 58. In Drupal ? Omega Theme is almost the only helper available Omega is grid based, so will help moving blocs But you’ll still have to think about your content
  • 59. Some examples of Drupal Responsive
  • 60. Some examples of Drupal Responsive
  • 61. Some examples of Drupal Responsive
  • 62. Some examples of Drupal Responsive
  • 63. Some examples of Drupal Responsive
  • 64. Some examples of Drupal Responsive
  • 65. Native Apps Connect your apps to Drupal
  • 66. Services Services module is your friend Use REST PList server instead of any Xml-Rpc, SOAP or even JSON. On App side we tried native, PhoneGap and Titanium, PhoneGap is our choice for 80% of Apps, 20% remain native.
  • 67. TrickZ You can also send HTML to your devices On device side, just show a WebView Sync «new» content and render it offline on the device Take care : WebView is usually slow
  • 68. SG : Drupal web site + Mobile theme + iPad App
  • 69. SG : Drupal web site + Mobile theme + iPad App
  • 70. SG : Drupal web site + Mobile theme + iPad App
  • 71. SG : Drupal web site + Mobile theme + iPad App
  • 73. Take Home Messages Do not try to create a social network with Drupal You must go mobile NOW. As there are hundreds of divices : go Responsive VS Mobile Theme «Local» means fast search = Apache SOLR / Mongo
  • 74. Modules List Social Local Mobile http://drupal.org/project/fb http://drupal.org/project/location http://drupal.org/project/mobile_tools http://drupal.org/project/privatemsg http://drupal.org/project/gmap http://drupal.org/project/domain http://drupal.org/project/flag http://drupal.org/project/geo http://drupal.org/project/browscap http://drupal.org/project/userpoints http://drupal.org/project/geofield http://drupal.org/project/omega http://drupal.org/project/twitter http://drupal.org/project/search_api_location http://drupal.org/project/facebookshare http://drupal.org/project/location_feeds http://drupal.org/project/flag_abuse http://drupal.org/project/votingapi

Editor's Notes

  1. \n
  2. \n
  3. \n
  4. \n
  5. \n
  6. \n
  7. \n
  8. \n
  9. \n
  10. \n
  11. \n
  12. \n
  13. \n
  14. \n
  15. \n
  16. \n
  17. \n
  18. \n
  19. \n
  20. \n
  21. \n
  22. \n
  23. \n
  24. \n
  25. \n
  26. \n
  27. \n
  28. \n
  29. \n
  30. \n
  31. \n
  32. \n
  33. \n
  34. \n
  35. \n
  36. \n
  37. \n
  38. \n
  39. \n
  40. \n
  41. \n
  42. \n
  43. \n
  44. \n
  45. \n
  46. \n
  47. \n
  48. \n
  49. \n
  50. \n
  51. \n
  52. \n
  53. \n
  54. \n
  55. \n
  56. \n
  57. \n
  58. \n
  59. \n
  60. \n
  61. \n
  62. \n
  63. \n
  64. \n
  65. \n
  66. \n
  67. \n
  68. \n
  69. \n
  70. \n
  71. \n
  72. \n
  73. \n
  74. \n
  75. \n
  76. \n