Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Drupal as a Framework for Mobile Development


Published on

Published in: Technology
  • Be the first to comment

Drupal as a Framework for Mobile Development

  1. 1. Drupal as a Framework for Mobile Development<br />by Rachel Jaro<br />Solutions Architect<br />Promet Source<br />
  2. 2. Overview<br />3 Classifications of mobile development<br />mDot<br />Native<br />Hybrid<br />Drupal and the Mobile World<br />Design and Development with Drupal using the 3 classifications above<br />
  3. 3. Airplane<br />Source:<br />
  4. 4. The Taxi App<br />iPad on the road<br />
  5. 5. Mobile Development in the Old Days<br />
  6. 6. New World<br />Native or installable mobile application<br />mDotor mobile browser based application<br />Hybrid or app that uses both browser interfaces and native mobile components<br />
  7. 7. mDot: Overview<br />Mobile view<br />Browser view<br />
  8. 8. Designing with mDot in mind<br />Have a Content strategy<br />content defines the design<br />Responsive web design<br />responsive architecture, where people responds to each actions. environment reacts to the user.<br />Mobile First<br />design for mobile first rather than desktop environment<br />
  9. 9. mDot: Content Strategy<br />Know the most important element<br />Personalize - Better filters, better experience<br />
  10. 10. mDot: Responsive web design<br />the site must be build with flexible not fixed layouts foundation                    <br />Ex. use em, percentages and float<br />images must be flexible as well. set max-width property of css to 100%<br />img. object {max-width: 100%}<br />#do-theevent {width: 65%}<br />Choose if you want media queries or mobile detection<br />
  11. 11. mDot: Media Queries<br /><link media="screen and (max-device-width: 480px)"><br /><link media="screen and (max-device-width: 1024px)"><br /><link media="screen and (orientation: portrait)"><br /><link media="screen and (orientation: landscape)"><br /><link media="screen and (-webkit-min-device-pixel-ratio:2)"><br />
  12. 12. mDot: Mobile first<br />Reasons for designing mobile first rather than desktop environment.<br />forces us to simplify              <br />forces you to focus.               <br />forces you to think like a user<br />
  13. 13. mDot: and Drupal development <br />Process:<br />Detection of mobile<br />Redirecting or providing the right media queries<br />Theme switching<br />
  14. 14. mDot: Development<br />Modules<br /><br />3rd party detection tools<br />Wurfl<br />browsecap<br />
  15. 15. mDot: Development<br />Recommended startup themes<br />Fusion_mobile<br />Nokia_mobile<br />
  16. 16. Demo<br />
  17. 17. Native: Overview<br />And more…<br />
  18. 18. Drupal and the Native App<br />XML<br />format<br />SERVICES MODULE<br />Device choice of <br />Language:<br />Java<br />Objective-C<br />etc<br />
  19. 19. Hybrid and Drupal<br />iPad app for Drivers<br />Drupal Site<br />
  20. 20. Drupal and the Hybrid Approach<br />JSON<br />format<br />SERVICES MODULE<br />HTML<br />JS<br />CSS<br />
  21. 21. Demo<br />Sneak peak at the code<br />
  22. 22. Development Requirements<br />Choose from cross platform tools<br />Install iOSsdk and xcode<br />Setup drupaland install services module<br />
  23. 23. Hybrid: Cross Platform Tools<br />Phonegap + (jQuery Mobile or Sencha Touch)<br />Titanium/Appcelerator<br />Others<br />Rhomobile<br />Monodroid<br />MoSync<br />WidgetPad<br />
  24. 24. Hybrid Library Comparison<br />Phonegap<br />Easier to install<br />Easier testing in browser<br />Support for more mobile browser<br />Titanium<br /><ul><li>Easier to get a native look
  25. 25. Better performance
  26. 26. Can be extended to add in any native feature</li></ul>More comparison at <br /><br />
  27. 27. Xcode<br />
  28. 28. Drupal Integration w/ Services Module<br />3 components of Services module<br />server modules – receive and render request<br />auth modules - authentication<br />services modules – process and return data<br />Source:<br /><br />
  29. 29. Services: Server<br />JSON (JS Notation Object)<br />XML-RPC<br />JSON-RPC<br />Sources:<br /><br />
  30. 30. Server: Authentication<br />API Keys<br />Session<br />
  31. 31. Services: Services<br />Node<br />Views<br />Users<br />File<br />Taxonomy<br />System<br />Search<br />Your Custom Services module<br />
  32. 32. Custom services<br />implement hook_service()<br />write callback functions<br />
  33. 33. Demo<br />p.loc/greenlight2/ipadtest/<br />p.loc/greenlight2/xcode/Greenlight-xcode4/Greenlight/www<br />
  34. 34. Keys to Successful Hybrid App<br />don’t simply release a hybrid version of the mobile web site, make the experience feel like a native app<br />optimize performance of your Drupal site <br />
  35. 35. Questions?<br />Rachel Jaro<br /><br />Twitter: petixe<br />D.o: primerg<br />We’re hiring!<br />