2012.02.drupal camp.singapore.mobile.v.1
DESCRIPTION
Drupal Camp Singapore Mobile Development Options for Drupal.TRANSCRIPT
![Page 1: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/1.jpg)
Mobile Web Development Options
Twitter: @akucharski
We are hiring!
![Page 2: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/2.jpg)
About Me
• Co-Presenter• Andy Kucharski
• @akucharski
• Promet Source• Founder
• Provides Strategy and Management Direction
![Page 3: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/3.jpg)
About Me – miss wintertime
![Page 4: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/4.jpg)
About Daniel Honrade
• Co-Presenter• @danielhonrade
• JQuery mobile drupal
• created a mobile jquery custom subtheme
• project: www.mcmcauto.com
• Promet Source
• Lead Drupal Themer
![Page 5: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/5.jpg)
Promet Source background
• Company Background• Founded in 2003
• 30 + employees
• Offices in Chicago IL, Sunnyvale, CA, Cebu, Phillipines
• Company Offerings• Promet Source
• Web Development
• Mobile Application Development
![Page 6: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/6.jpg)
Promet Mobile Work
• M.DOT sites (Drupal)
• Responsive Design and Theming (Drupal)
• Mobile Application Development• Native development for:
• IOS
• Android
• Hybrid development with Phonegap
• Full Service Drupal Agency •
![Page 7: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/7.jpg)
I want a mobile site...
• What is a mobile site?
• What does it mean?
• Why do you want one?
![Page 8: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/8.jpg)
Mobile Application Opportunities
• By 2013, mobile phones will overtake PCs as the most-common Web access device worldwide
• Transportation CIO’s made Mobility one of their top priorities for next two years
![Page 9: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/9.jpg)
Fun mobile stats
• Q4 2011• 60 Million Android devices activated by Google
• 37 Million Apple iPhones sold
• Apple stats• Apple sold 37 million iPhones in the quarter, a 128%• iPad sales hit 15.4 million, a rise of 111%.• Mac sales were 5.2 million, an increase of 26%.• Apple sold 15.4 million iPods, a number which is down 21% as the iPhone
cannibalizes sales of more limited-function devices.• Apple now has $97.6 billion in cash on hand.
• “Drupal” searched 60,000 times last month on mobile devices with full internet browser
![Page 10: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/10.jpg)
Drupal as a multiplatform CMS
Mobile App
Services
Contributed Modules
Drupal Core
![Page 11: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/11.jpg)
Simple Option – use a third party to create a m.dot site
• M.Dot – separate Domain• Use a third party such as Mobify or MoovWeb
• They provide tools to transform your layouts
• They will host your mobile site
• They will provide javascript to redirect upon mobile detection
![Page 12: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/12.jpg)
Simple Option – use a third party to create a m.dot site
• Advantages• Fast and easy
• Free options available
• Disadvantages• Multiple platforms
• Loose some control to the third party
• Commercial support may get pricey
![Page 13: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/13.jpg)
Separate Templates
• Switch Theme – performance hit• Detect device and present proper theme
• Advantages• Control
• Disadvantages• Multiple themes to maintain
• Detection not always reliable
![Page 14: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/14.jpg)
Promet's Setup for Mobile Browsing
• Mobile JQuery module - uses theme from www.mobilejquery.com• setup as base theme
• create a subtheme - separate folder
• configure necessary blocks for mobile only
• Browscap module - device detection• maintains a table or list of current devices for detection
• Mobile Tools module - admin ui for theme switching• Options for mobile url or theme switching
![Page 15: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/15.jpg)
Sample: www.mcmcauto.com
![Page 16: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/16.jpg)
Promet's Responsive Design/Theme Setup
• OM base theme & subtheme
• OM Tools - collection of tools• system tools - jquery mediaqueries
• options:
• media - screen, print, projector, etc.
• minimum browser width in px
• maximum browser width in px
• Responsive CSS files• style360.css
• style_screen_min100_max640.css
• style_screen_min641_max800.css
• style_screen_min801_max1024.css
• style_screen_min1025_max6000.css
• style_screen_min1200_max6000.css
• style.css
![Page 17: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/17.jpg)
Responsive
![Page 18: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/18.jpg)
App
![Page 19: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/19.jpg)
Call Screen
Pull down menu allows Users to assign calls to
drivers.
User can click on any call to view in entirety & make revisions.
![Page 20: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/20.jpg)
Dispatch's Driver map
Hold curser over orange dot to display cab number.
All iPads have GPS tracking to manage cab’s location.
![Page 21: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/21.jpg)
Use Hybrid Development Platform – we chose PhoneGap
![Page 22: 2012.02.drupal camp.Singapore.mobile.v.1](https://reader035.vdocuments.site/reader035/viewer/2022062617/54bd51d14a7959031e8b45f6/html5/thumbnails/22.jpg)
Questions?www.prometsource.com
Twitter: @akucharski
We are hiring!