Drupal as a Framework for Mobile Development<br />by Rachel Jaro<br />Solutions Architect<br />Promet Source<br />
Overview<br />3 Classifications of mobile development<br />mDot<br />Native<br />Hybrid<br />Drupal and the Mobile World<b...
Airplane<br />Source: http://www.cagate.net/<br />
The Taxi App<br />iPad on the road<br />
Mobile Development in the Old Days<br />
New World<br />Native or installable mobile application<br />mDotor mobile browser based application<br />Hybrid or app th...
mDot: Overview<br />Mobile view<br />Browser view<br />
Designing with mDot in mind<br />Have a Content strategy<br />content defines the design<br />Responsive web design<br />r...
mDot: Content Strategy<br />Know the most important element<br />Personalize - Better filters, better experience<br />
mDot: Responsive web design<br />the site must be build with flexible not fixed layouts foundation                    <br ...
mDot: Media Queries<br /><link media="screen and (max-device-width: 480px)"><br /><link media="screen and (max-device-widt...
mDot: Mobile first<br />Reasons for designing mobile first rather than desktop environment.<br />forces us to simplify    ...
mDot: and Drupal development	<br />Process:<br />Detection of mobile<br />Redirecting or providing the right media queries...
mDot: Development<br />Modules<br />Drupal.org/project/Mobile_tools<br />3rd party detection tools<br />Wurfl<br />browsec...
mDot: Development<br />Recommended startup themes<br />Fusion_mobile<br />Nokia_mobile<br />
Demo<br />
Native: Overview<br />And more…<br />
Drupal and the Native App<br />XML<br />format<br />SERVICES MODULE<br />Device choice of <br />Language:<br />Java<br />O...
Hybrid and Drupal<br />iPad app for Drivers<br />Drupal Site<br />
Drupal and the Hybrid Approach<br />JSON<br />format<br />SERVICES MODULE<br />HTML<br />JS<br />CSS<br />
Demo<br />Sneak peak at the code<br />
Development Requirements<br />Choose from cross platform tools<br />Install iOSsdk and xcode<br />Setup drupaland install ...
Hybrid: Cross Platform Tools<br />Phonegap + (jQuery Mobile or Sencha Touch)<br />Titanium/Appcelerator<br />Others<br />R...
Hybrid Library Comparison<br />Phonegap<br />Easier to install<br />Easier testing in browser<br />Support for more mobile...
Better performance
Can be extended to add in any native feature</li></ul>More comparison at <br />http://savagelook.com/blog/portfolio/appcel...
Xcode<br />
Drupal Integration w/ Services Module<br />3 components of Services module<br />server modules – receive and render reques...
Services: Server<br />JSON (JS Notation Object)<br />XML-RPC<br />JSON-RPC<br />Sources:<br />Drupal.org/project/json_serv...
Server: Authentication<br />API Keys<br />Session<br />
Services: Services<br />Node<br />Views<br />Users<br />File<br />Taxonomy<br />System<br />Search<br />Your Custom Servic...
Upcoming SlideShare
Loading in …5
×

Drupal as a Framework for Mobile Development

4,966 views

Published on

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

No Downloads
Views
Total views
4,966
On SlideShare
0
From Embeds
0
Number of Embeds
874
Actions
Shares
0
Downloads
0
Comments
0
Likes
5
Embeds 0
No embeds

No notes for slide
  • Lightweight data interchange format. Short for js notation object.
  • 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: http://www.cagate.net/<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 />Drupal.org/project/Mobile_tools<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 />http://savagelook.com/blog/portfolio/appcelerator-vs-phonegap-vs-adobe-air<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 />Drupal.org/project/services<br />
    29. 29. Services: Server<br />JSON (JS Notation Object)<br />XML-RPC<br />JSON-RPC<br />Sources:<br />Drupal.org/project/json_server<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 />rachel@promethost.com<br />Twitter: petixe<br />D.o: primerg<br />We’re hiring!<br />

    ×