1. Drupal as a Framework for Mobile Development by Rachel Jaro Solutions Architect Promet Source

2. Overview 3 Classifications of mobile development mDot Native Hybrid Drupal and the Mobile World Design and Development with Drupal using the 3 classifications above

3. Airplane Source: http://www.cagate.net/

4. The Taxi App iPad on the road

5. Mobile Development in the Old Days

6. New World Native or installable mobile application mDotor mobile browser based application Hybrid or app that uses both browser interfaces and native mobile components

7. mDot: Overview Mobile view Browser view

8. Designing with mDot in mind Have a Content strategy content defines the design Responsive web design responsive architecture, where people responds to each actions. environment reacts to the user. Mobile First design for mobile first rather than desktop environment

9. mDot: Content Strategy Know the most important element Personalize - Better filters, better experience

10. mDot: Responsive web design the site must be build with flexible not fixed layouts foundation Ex. use em, percentages and float images must be flexible as well. set max-width property of css to 100% img. object {max-width: 100%} #do-theevent {width: 65%} Choose if you want media queries or mobile detection

11. mDot: Media Queries <link media="screen and (max-device-width: 480px)"> <link media="screen and (max-device-width: 1024px)"> <link media="screen and (orientation: portrait)"> <link media="screen and (orientation: landscape)"> <link media="screen and (-webkit-min-device-pixel-ratio:2)">

12. mDot: Mobile first Reasons for designing mobile first rather than desktop environment. forces us to simplify forces you to focus. forces you to think like a user

13. mDot: and Drupal development Process: Detection of mobile Redirecting or providing the right media queries Theme switching

14. mDot: Development Modules Drupal.org/project/Mobile_tools 3rd party detection tools Wurfl browsecap

15. mDot: Development Recommended startup themes Fusion_mobile Nokia_mobile

16. Demo

17. Native: Overview And more…

18. Drupal and the Native App XML format SERVICES MODULE Device choice of Language: Java Objective-C etc

19. Hybrid and Drupal iPad app for Drivers Drupal Site

20. Drupal and the Hybrid Approach JSON format SERVICES MODULE HTML JS CSS

21. Demo Sneak peak at the code

22. Development Requirements Choose from cross platform tools Install iOSsdk and xcode Setup drupaland install services module

23. Hybrid: Cross Platform Tools Phonegap + (jQuery Mobile or Sencha Touch) Titanium/Appcelerator Others Rhomobile Monodroid MoSync WidgetPad

25. Better performance

26. Can be extended to add in any native featureMore comparison at http://savagelook.com/blog/portfolio/appcelerator-vs-phonegap-vs-adobe-air

27. Xcode

28. Drupal Integration w/ Services Module 3 components of Services module server modules – receive and render request auth modules - authentication services modules – process and return data Source: Drupal.org/project/services

29. Services: Server JSON (JS Notation Object) XML-RPC JSON-RPC Sources: Drupal.org/project/json_server

30. Server: Authentication API Keys Session

31. Services: Services Node Views Users File Taxonomy System Search Your Custom Services module

32. Custom services implement hook_service() write callback functions

33. Demo p.loc/greenlight2/ipadtest/ p.loc/greenlight2/xcode/Greenlight-xcode4/Greenlight/www

34. Keys to Successful Hybrid App don’t simply release a hybrid version of the mobile web site, make the experience feel like a native app optimize performance of your Drupal site

35. Questions? Rachel Jaro rachel@promethost.com Twitter: petixe D.o: primerg We’re hiring!