MobileWeb

South Bay Drupal Group

is

Silicon Valley Drupal User

Group(SVDUG)

Sponsors:Halosys Technologies Inc. & UCSC Extension

Halosys Confidential 2

What’s the hurry?

57 Millions

7 Millions

Halosys Confidential 3

Comments Blog

Journals

Gallery About Us

DiscussionsStore

Events

Mobile Platforms

DRUPAL & Mobile Convergence

Mobile Strategies for DRUPAL sites

Halosys Confidential 4

The Road to Mobilization

Points to ponder• Various shapes and sizes of screens• Supported features range from:

– SMS only to – Complete Applications on new Smart Phones

• Detecting the Mobile device and then delivering Mobile Content for specific devices

• Utilizing location to deliver the content

• HTML/CSS Compliance

• Javascript (Google Analytics code on the server)

• Cleanup xHTML and CSS

• Reducing download Size

Halosys Confidential 5

Halosys Confidential 6

Device Detection

(Desktop, Mobile Device, Kind of Mobile Device)

Options available: • Browscap: based on Browser detection• WURFL : based on Device detection

Switch the Site based on the device

The following themes could be utilized to make the site Mobile Friendly: • .Mobi_theme• iUI (iPhone)• Bluemobi• Mobile • iWebKit: One of the latest Releases

Making your site Mobile Friendly - I

Halosys Confidential 7

Functionality & Modules

Enable only the relevant functionality & the modules for Mobile Site

Test the Site Online

These online tools will help emulate the iPhone browser•iPhoneTester.com•TestiPhone.com

Making your site Mobile Friendly - II

Halosys Confidential 8

A Mobile themed DRUPAL Site in iPhone Browser - I

Form elements are themed. All form elements look like default iphone forms.

What it means:•No need to add custom user-login, comments or node add forms for your iphone website•Directly use Drupal default forms and that will be automatically converted into iPhone style form elements

Halosys Confidential 9

A Mobile themed DRUPAL Site in iPhone browser

How this is achieved:

Changes are made in template.php where individual field's theme function is overridden

Halosys Confidential 10

Case Study: www.emilybarnes.com

Halosys Confidential 11

Regular vs. Mobile (iWebKit) Theme for EmilyBarnes.com

emilybarnes.comemilybarnes.com Tinyurl.com/halo321Tinyurl.com/halo321

Halosys Confidential 12

Reference links to get startedhttp://drupal.org/project/mobile_tools

•http://drupal.org/project/iwebkit

http://drupal.org/project/idrupal

http://drupal.org/project/idrupal_ui

Summary: Making DRUPAL Site Mobile friendly

Halosys Confidential 13

DRUPAL + iPhone iPhone Apps that talk to

DRUPAL

Halosys Confidential 14

Why build a Native iPhone App?

A native iPhone app gives the developerall the power of the iPhone hardware:

• GPS• Audio• Camera, Video• Accelerometer• Compass• A local database • Internet connectivity.

Do you have content that could be monetized?

•A native app could be priced with this content

• In App purchase option could be utilized on iPhone to sell value added services within the app

Halosys Confidential 15

Creating iPhone Applications for DRUPAL

DRUPAL + iPhone Application: What you need?

Halosys Confidential 16

DRUPAL (Well Structured Data)

JSON Server Module

Services Module

XML-RPC

XCode with iPhone SDK 3.x

TouchJSON library http://code.google.com/p/touchcode/wiki/TouchJSON

** Wordpress for iPhone has an open source XML-RPC client http://iphone.trac.wordpress.org

Halosys Confidential 17

Native App with the user able to set preferences

Development using Dashcode

Halosys Confidential 18

Dash Code is an Apple approved alternate route to creating apple GUI. Instead of being dependent on an Objective-C base, DashCode lets one use Javascript, HTML, and CSS to create iPhone GUIs and Web Apps

Dash Code is an Apple approved alternate route to creating apple GUI. Instead of being dependent on an Objective-C base, DashCode lets one use Javascript, HTML, and CSS to create iPhone GUIs and Web Apps

mobiforge.com/developing/story/build-web-apps-iphone-using-dashcode

sourceforge.net/projects/quickconnect

www.phonegap.com

Books

DEVELOPING HYBRID APPLICATIONS FOR THE IPHONE, Addison-Wesley, 2009Author: Barney, Lee,

CREATING MAC WIDGETS WITH DASHCODE,  Apress, 2009 Murray, William,

Halosys Confidential 19

ChecklistBefore you start coding Objective-C

orEngage an iPhone Developer

Initial Questions

• Does your application use location based services? • If your application content requires network

connectivity, how should it behave when the connection is lost or too slow for proper use?

• What are the key views or screens that your users are most likely to want to access quickly for this application

• What are the preferences the user will be able to set

• Forms and data that the user would have to enter.• Screen shots or links to similar applications on the

web or other devices. • Do you have anything to be saved on iPhone itself?• Continued (case to case)

Halosys Confidential 20

Accuracy Levels

Software Messages

Main Screens or

activities

User Permissions

Info capture fields

Reference Apps

Memory Usage of

iPhone

– Yahoo Stencils: http://developer.yahoo.com/ypatterns/about/stencils/

– GraffleTopia: Stencils for OmniGraffle:http://www.graffletopia.com/categories/iphone

– iPhone UI Stencil Kit: Stainless steel kit to wireframe and app http://www.uistencils.com/iphone-stencil-kit.html

– If you use PhotoShop, you will like this: http://blog.metaspark.com/2009/02/fireworks-toolkit-for-creating-iphone-ui-mockups

• Have Answers to these basic questionsHalosys Confidential 21

Sketch It /Wireframe It / Mock It Up

Thank You

2953 Bunker Hills,Santa Clara, CA 95054

200 Continental Blvd,El Segundo, CA - 90245

Los Angeles Area

San Francisco Bay Area

Halosys Technologies Inc.

www.halosys.com

Avinash Harshavi@halosys.com

contact@halosys.com