• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
Drupal as a Framework for Mobile Development
 

Drupal as a Framework for Mobile Development

on

  • 4,682 views

 

Statistics

Views

Total Views
4,682
Views on SlideShare
3,868
Embed Views
814

Actions

Likes
4
Downloads
0
Comments
0

8 Embeds 814

http://petixe.com 670
http://www.prometsource.com 125
http://prometsource.prometdev.com 9
http://prlog.ru 5
https://www.linkedin.com 2
http://www.slideshare.net 1
http://www.linkedin.com 1
https://duckduckgo.com 1
More...

Accessibility

Categories

Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Processing…
Post Comment
Edit your comment
  • Lightweight data interchange format. Short for js notation object.

Drupal as a Framework for Mobile Development Drupal as a Framework for Mobile Development Presentation Transcript

  • Drupal as a Framework for Mobile Development
    by Rachel Jaro
    Solutions Architect
    Promet Source
  • Overview
    3 Classifications of mobile development
    mDot
    Native
    Hybrid
    Drupal and the Mobile World
    Design and Development with Drupal using the 3 classifications above
  • Airplane
    Source: http://www.cagate.net/
  • The Taxi App
    iPad on the road
  • Mobile Development in the Old Days
  • New World
    Native or installable mobile application
    mDotor mobile browser based application
    Hybrid or app that uses both browser interfaces and native mobile components
  • mDot: Overview
    Mobile view
    Browser view
  • 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
  • mDot: Content Strategy
    Know the most important element
    Personalize - Better filters, better experience
  • 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
  • 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)">
  • 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
  • mDot: and Drupal development
    Process:
    Detection of mobile
    Redirecting or providing the right media queries
    Theme switching
  • mDot: Development
    Modules
    Drupal.org/project/Mobile_tools
    3rd party detection tools
    Wurfl
    browsecap
  • mDot: Development
    Recommended startup themes
    Fusion_mobile
    Nokia_mobile
  • Demo
  • Native: Overview
    And more…
  • Drupal and the Native App
    XML
    format
    SERVICES MODULE
    Device choice of
    Language:
    Java
    Objective-C
    etc
  • Hybrid and Drupal
    iPad app for Drivers
    Drupal Site
  • Drupal and the Hybrid Approach
    JSON
    format
    SERVICES MODULE
    HTML
    JS
    CSS
  • Demo
    Sneak peak at the code
  • Development Requirements
    Choose from cross platform tools
    Install iOSsdk and xcode
    Setup drupaland install services module
  • Hybrid: Cross Platform Tools
    Phonegap + (jQuery Mobile or Sencha Touch)
    Titanium/Appcelerator
    Others
    Rhomobile
    Monodroid
    MoSync
    WidgetPad
  • Hybrid Library Comparison
    Phonegap
    Easier to install
    Easier testing in browser
    Support for more mobile browser
    Titanium
    • Easier to get a native look
    • Better performance
    • Can be extended to add in any native feature
    More comparison at
    http://savagelook.com/blog/portfolio/appcelerator-vs-phonegap-vs-adobe-air
  • Xcode
  • 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
  • Services: Server
    JSON (JS Notation Object)
    XML-RPC
    JSON-RPC
    Sources:
    Drupal.org/project/json_server
  • Server: Authentication
    API Keys
    Session
  • Services: Services
    Node
    Views
    Users
    File
    Taxonomy
    System
    Search
    Your Custom Services module
  • Custom services
    implement hook_service()
    write callback functions
  • Demo
    p.loc/greenlight2/ipadtest/
    p.loc/greenlight2/xcode/Greenlight-xcode4/Greenlight/www
  • 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
  • Questions?
    Rachel Jaro
    rachel@promethost.com
    Twitter: petixe
    D.o: primerg
    We’re hiring!