Presentation given at Drupal Business days, in Wien, may 2012. Learn some 'dos & donts' about 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

4. SoLoMo ?

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

29. http://wefeedback.org

30. http://wefeedback.org

31. http://wefeedback.org

32. http://wefeedback.org

33. http://wefeedback.org

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

50. http://lecollectif.orange.fr

51. http://lecollectif.orange.fr

52. http://lecollectif.orange.fr

53. http://lecollectif.orange.fr

54. http://lecollectif.orange.fr

55. Responsive Design
Yeah this trendy thing everybody is talking about.

56. Trendy, yeah ?

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

72. «Take home» messages
Drupal & SoLoMo

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