Your SlideShare is downloading. ×
0
Social, Local & Mobileby @mtopolov CTO of @adyax & @padcms
100 Drupal Experts, 45 big Drupal projects in 2011
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 Mobi...
Act 1 : Let’s have friends...  ACT 1 : THE SOCIAL
Drupbook ? Twipal ? no !Drupal is not the good solution to run a whole socialnetwork*
Drupbook ? Twipal ? no !     Drupal is not the good solution to run a whole social     network*     But, you can enable so...
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 mo...
Good example :McIn (mcin.com) is a private social network we’ve builtfor any McDonald’s worker around the world.
Good example :McIn (mcin.com) is a private social network we’ve builtfor any McDonald’s worker around the world.Localized,...
Good example :McIn (mcin.com) is a private social network we’ve builtfor any McDonald’s worker around the world.Localized,...
Good example :McIn (mcin.com) is a private social network we’ve builtfor any McDonald’s worker around the world.Localized,...
Social Sharing Sharing : don’t loose time with modules, small FB/ Twitter code directly in your theme Open Graph must be i...
Advanced Open GraphNo really nice existing modulesSo need to codeIdea : Link your users to Networks, then use retrieveddat...
http://wefeedback.org
http://wefeedback.org
http://wefeedback.org
http://wefeedback.org
http://wefeedback.org
Social «Donts»Organic groups : Ugly and useless in 80% casesForum : Drupal forum is just awfulChat : no way, if your clien...
ACT 2 : THE LOCAL
What is Local btw ? Everything !Geocoded contentGeocoded users / vistorsGeographical SearchAnd no, putting a Google Map do...
Content geocodingWell, Location module is really nice, useful for 90%.Manages POI onlyGeo (buggy) but manages Polygons & L...
Display Geo DataGMap module : simpliest integrationOpen Layers module : really nice maps effect.KLM & Clusterer to display...
Geographical search     HTML5 to ask for visitor localisation     MySQL is not suitable*     Apache SOLR 3.4 or 4 have a S...
ACT 3 : THE MOBILE
Mobile : What is differentWhy you should consider iPad theme in adifferent 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,                  ...
What my options are ?Mobile theme switched by UAResponsive DesignNative App connected trough Services
Mobile ThemeUsing Domains, jQuery Mobile, Mobile Tools
jQuery MobilejQuery Mobile: Touch-Optimized Web Framework forSmartphones & TabletsIt’s customizable :))Looks like iPhone
jQuery pros & cons        PROS                       CONS Fast to integrate (2-3   If your client agrees to fit          da...
Mobile Theme How To1. Drupal Theme with jQuery Mobile (or Not)2. ‘Domains’ module / Mobile Tools3. Switch on UA4. But offe...
When switch to mobile URLAs soon as possible (LB / Cache, not Drupal)Don’t forget to cache redirections      Load      Cac...
http://lecollectif.orange.fr
http://lecollectif.orange.fr
http://lecollectif.orange.fr
http://lecollectif.orange.fr
http://lecollectif.orange.fr
Responsive DesignYeah this trendy thing everybody is talking about.
Trendy, yeah ?
Responsive designReally awesome during presales demos (wow effect)Really pain-in-the-a** HTML slicing (take x2 more timeth...
In Drupal ? Omega Theme is almost the only helper available Omega is grid based, so will help moving blocs But you’ll stil...
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 AppsConnect your apps to Drupal
ServicesServices module is your friendUse REST PList server instead of any Xml-Rpc, SOAPor even JSON.On App side we tried ...
TrickZ You can also send HTML to your devices On device side, just show a WebView Sync «new» content and render it offline ...
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» messagesDrupal & SoLoMo
Take Home MessagesDo not try to create a social network with DrupalYou must go mobile NOW. As there are hundreds ofdivices...
Modules List                Social                                    Local                                         Mobile...
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
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
Upcoming SlideShare
Loading in...5
×

For a Social Local and Mobile Drupal

3,695

Published on

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

Published in: Technology
0 Comments
6 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total Views
3,695
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
36
Comments
0
Likes
6
Embeds 0
No embeds

No notes for slide
  • \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
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • \n
  • Transcript of "For a Social Local and Mobile Drupal"

    1. 1. Social, Local & Mobileby @mtopolov CTO of @adyax & @padcms
    2. 2. 100 Drupal Experts, 45 big Drupal projects in 2011
    3. 3. SoLoMo ?
    4. 4. SoLoMo ?SOcial : Facebook, Twitter, Friends, Activity,...
    5. 5. SoLoMo ?SOcial : Facebook, Twitter, Friends, Activity,...LOcal : Geocoding, Foursquare, Google Maps...
    6. 6. SoLoMo ?SOcial : Facebook, Twitter, Friends, Activity,...LOcal : Geocoding, Foursquare, Google Maps...MObile : JQuery Mobile, Responsive, PhoneGap...
    7. 7. Act 1 : Let’s have friends... ACT 1 : THE SOCIAL
    8. 8. Drupbook ? Twipal ? no !Drupal is not the good solution to run a whole socialnetwork*
    9. 9. 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 timein connected mode. Maybe in D8, with all the services stuff... Use Ruby, Python, Scala or Assembler** for that.
    10. 10. Commons ?Commons is an Acquia Drupal distribution, packaging«social» modules.
    11. 11. Commons ?Commons is an Acquia Drupal distribution, packaging«social» modules.Well, avoid it : Useless bulk of dozens of modules.More messy than usable.
    12. 12. Good example :McIn (mcin.com) is a private social network we’ve builtfor any McDonald’s worker around the world.
    13. 13. Good example :McIn (mcin.com) is a private social network we’ve builtfor any McDonald’s worker around the world.Localized, multiple countries, groups, likes, friends,event attendees, votes, ugc, local
    14. 14. Good example :McIn (mcin.com) is a private social network we’ve builtfor 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
    15. 15. Good example :McIn (mcin.com) is a private social network we’ve builtfor 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 APIYeah, that’s it...
    16. 16. 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...
    17. 17. Advanced Open GraphNo really nice existing modulesSo need to codeIdea : Link your users to Networks, then use retrieveddata about friends & co inside your site
    18. 18. http://wefeedback.org
    19. 19. http://wefeedback.org
    20. 20. http://wefeedback.org
    21. 21. http://wefeedback.org
    22. 22. http://wefeedback.org
    23. 23. Social «Donts»Organic groups : Ugly and useless in 80% casesForum : Drupal forum is just awfulChat : no way, if your client asks for, say noUser Relationship : Too big in the new «follow me»world, use Flag instead
    24. 24. ACT 2 : THE LOCAL
    25. 25. What is Local btw ? Everything !Geocoded contentGeocoded users / vistorsGeographical SearchAnd no, putting a Google Map does NOT mean Local
    26. 26. Content geocodingWell, Location module is really nice, useful for 90%.Manages POI onlyGeo (buggy) but manages Polygons & LinesGeoField to store your POI coordinates
    27. 27. Display Geo DataGMap module : simpliest integrationOpen Layers module : really nice maps effect.KLM & Clusterer to display high amount of markers
    28. 28. 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
    29. 29. ACT 3 : THE MOBILE
    30. 30. Mobile : What is differentWhy you should consider iPad theme in adifferent way of your Deskop 960px theme.
    31. 31. iPads and Smartphones are tactile... Fingers are larger and less agile There is no rollover
    32. 32. But vertical scroll is easier... so, design bigger, dispose vertically
    33. 33. What my options are ?Mobile theme switched by UAResponsive DesignNative App connected trough Services
    34. 34. Mobile ThemeUsing Domains, jQuery Mobile, Mobile Tools
    35. 35. jQuery MobilejQuery Mobile: Touch-Optimized Web Framework forSmartphones & TabletsIt’s customizable :))Looks like iPhone
    36. 36. 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
    37. 37. Mobile Theme How To1. Drupal Theme with jQuery Mobile (or Not)2. ‘Domains’ module / Mobile Tools3. Switch on UA4. But offer possibility to go back (cookies based rule)5. With Varnish a little bit more tricky (VCL provided on demand)
    38. 38. When switch to mobile URLAs soon as possible (LB / Cache, not Drupal)Don’t forget to cache redirections Load Cache / HTTP Drupal Balancer Proxy
    39. 39. http://lecollectif.orange.fr
    40. 40. http://lecollectif.orange.fr
    41. 41. http://lecollectif.orange.fr
    42. 42. http://lecollectif.orange.fr
    43. 43. http://lecollectif.orange.fr
    44. 44. Responsive DesignYeah this trendy thing everybody is talking about.
    45. 45. Trendy, yeah ?
    46. 46. Responsive designReally awesome during presales demos (wow effect)Really pain-in-the-a** HTML slicing (take x2 more timethan classical slicing)Needs a smart designer / UX master
    47. 47. 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
    48. 48. Some examples of Drupal Responsive
    49. 49. Some examples of Drupal Responsive
    50. 50. Some examples of Drupal Responsive
    51. 51. Some examples of Drupal Responsive
    52. 52. Some examples of Drupal Responsive
    53. 53. Some examples of Drupal Responsive
    54. 54. Native AppsConnect your apps to Drupal
    55. 55. ServicesServices module is your friendUse REST PList server instead of any Xml-Rpc, SOAPor even JSON.On App side we tried native, PhoneGap and Titanium,PhoneGap is our choice for 80% of Apps, 20% remainnative.
    56. 56. 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
    57. 57. SG : Drupal web site + Mobile theme + iPad App
    58. 58. SG : Drupal web site + Mobile theme + iPad App
    59. 59. SG : Drupal web site + Mobile theme + iPad App
    60. 60. SG : Drupal web site + Mobile theme + iPad App
    61. 61. «Take home» messagesDrupal & SoLoMo
    62. 62. Take Home MessagesDo not try to create a social network with DrupalYou must go mobile NOW. As there are hundreds ofdivices : go Responsive VS Mobile Theme«Local» means fast search = Apache SOLR / Mongo
    63. 63. Modules List Social Local Mobilehttp://drupal.org/project/fb http://drupal.org/project/location http://drupal.org/project/mobile_toolshttp://drupal.org/project/privatemsg http://drupal.org/project/gmap http://drupal.org/project/domainhttp://drupal.org/project/flag http://drupal.org/project/geo http://drupal.org/project/browscaphttp://drupal.org/project/userpoints http://drupal.org/project/geofield http://drupal.org/project/omegahttp://drupal.org/project/twitter http://drupal.org/project/search_api_locationhttp://drupal.org/project/facebookshare http://drupal.org/project/location_feedshttp://drupal.org/project/flag_abusehttp://drupal.org/project/votingapi
    1. A particular slide catching your eye?

      Clipping is a handy way to collect important slides you want to go back to later.

    ×