Diese Präsentation wurde erfolgreich gemeldet.
Wir verwenden Ihre LinkedIn Profilangaben und Informationen zu Ihren Aktivitäten, um Anzeigen zu personalisieren und Ihnen relevantere Inhalte anzuzeigen. Sie können Ihre Anzeigeneinstellungen jederzeit ändern.
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...
Nächste SlideShare
Wird geladen in …5
×

Drupal as a Framework for Mobile Development

5.293 Aufrufe

Veröffentlicht am

Veröffentlicht in: Technologie
  • Als Erste(r) kommentieren

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 />

×