The document discusses mobile application development from a web developer's perspective, comparing web apps and native apps in terms of development ease, control, and capabilities. It covers technologies and frameworks for mobile app development, including Objective-C, Java, HTML5, PhoneGap, and Titanium Mobile. Key features such as geolocation, offline caching, and mobile UI frameworks are highlighted, alongside considerations for style sheets and API access.

1. MOBILE APPLICATION
DEVELOPMENT
Curix InfoTech Pvt. Ltd.
From a Web Developer’s Perspective

2. Today’s Mobile Technology

3. Today’s Mobile Technology
 High-speed Internet
 Edge/3G: 100 Kbps–1.5
Mbps
 Wifi: 10+ Mbps
 Significant processor
speeds
 Significant graphical
capabilities
 Touch interfaces

4. Web App vs. Native App

5. Web App vs. Native App
Easy to develop
Don’t require approval
Maintained centrally
Not on App Store
Limited to HTML/CSS/
JavaScript capabilities

6.  Better UI
 More powerful
 More control
 Access to GPU
 Costly to develop
 Requires approval
Web App vs. Native App

7.  Mobile & Smartphone Style sheets
 • Viewport Definition
 • Optimized Graphics
…vs. Mobile Website

8. Technologies
• Objective-C & Cocoa Touch (iPhone-only)
• Java (Blackberry, Android, Symbian)
• PalmMojo [HTML5, JS, CSS + Dojo-based framework]
(Palm-only)
• Visual C#/Visual Basic/.NET (Windows Mobile-only)
• C++ (Symbian, Windows Mobile)
• HTML5, JavaScript and CSS
• PhoneGap
• TitaniumMobile
• Rhomobile

9. HTML5, JavaScript & CSS
The
basics
 CSS2“Handheld” Media Stylesheets
 CSS3 Media Queries
 Apple* Viewport

10. Advanced  • HTML5 Offline Caching
 • HTML5 SQLite-compatible Offline
Storage
 • CSS3 CSS Animations
 • W3C API Geo location
 • HTML5 Canvas
HTML5, JavaScript & CSS

11. Mobile JS/CSS Frameworks
jQTouch
jQuery plugin for iPhone UI
http://www.jqtouch.com/
Safire
iPhone UI clone
http://code.google.com/p/safire/
iWebKit
Extensive iPhone UI clone
http://iwebkit.net/
WebApp.Net
iPhone UI clone + framework
http://webapp-net.com/
Dashcode
Apple’s Dashboard Toolkit
http://bit.ly/7sntmM
IUI
(Older) iPhone UI clone
http://code.google.com/p/iui/
XUI
Mobile-focused framework
http://xuijs.com/
CiUI
CNET’s iPhone UI clone
http://bit.ly/5p4tMY
UiUIKit
CSS-only iPhone UI clone
http://bit.ly/7Qtnhx
Magic Framework
iPhone UI clone
http://bit.ly/6zJ4eK

12. PhoneGap
PhoneGap
 WebKit-wrapper application
 Consistent APIs for device functions
 Geolocation
 Vibration
 Accelerometer
 Etc
 Supports many devices

13. PhoneGap Device Support

14. TitaniumMobile
Titanium
Mobile
 Accelerometer
 Database
 File system
 Geolocation
 Mapping
 Media
 Networking
+
Native UI
Components

15. Titanium0.9/1.0
 iPad & Blackberry support
 Less reliance on web
 views (slow)
 Dynamic APIs
 More extensible
 5x+ performance
 increases
 New APIs
 Animation
 Streaming Audio
 Proximity Sensor
 Low-level Graphics
 Network Streaming

16. PhoneGap vs. Titanium
 Easier to
start
 Supports
more
 Platforms
 Mobile & desktop
 Native UI
 Poor
documentation
Both fully open source!

17. PhoneGap vs. Titanium

18. PhoneGap vs. Titanium

19. Objective-C/Cocoa Touch
 100% Native Application
 Full native performance
 Access to entire iPhone SDK & UI
Components
 Interface Builder
 iPhone/iPad-only
 Mac development-only*
* No matter what you need a Mac to compile for

20. DEMO
HTML5
Offline
Caching

21. HTML5 Offline Caching

22. Mobile Stylesheets
To account for Windows Mobile, conditional
comments are required (not shown).

23. Mobile Stylesheets
To account for Windows Mobile, conditional comments
are required (not shown).

24. Mobile Stylesheets
To account for Windows Mobile, conditional comments
are required (not shown).

25. Mobile Stylesheets
To account for Windows Mobile, conditional comments
are required (not shown).

26. Viewport Scaling
 Width
 Height
 initial-scale
 minimum-scale
 maximum-scale
 user-scalable
Tip:
When setting the
width/height
you can use “device-width”
and
“device-height” to match the
size of the user’s device.

27. HTML5 SQLite Storage

28. CSS3 Transitions
 Properties: none, all, <property>
 Timing: ease, ease-in, ease-out, ease-in-out,
 cubic-bezier(x1, y1, x2, y2)

29. Geolocation API

30. Geolocation API

31. Geolocation API

32. Geolocation API

33. Geolocation API

34. Phone-Specific Tags
 apple-mobile-web-app-capable (yes/no)
 apple-mobile-web-app-status-bar-style
(default,
black, black-translucent)
 format-detection (telephone=no)

35. Philly New Media Hub Mobile

36. IUI Code Example

37. IUI Code Example

38. IUI Code Example

39. IUI Code Example

40. G-19, Sec – 63 Noida-201301
Curix InfoTech Pvt. Ltd.
Sandeep Verma (Director)
Curix InfoTech Pvt. Ltd.
Ph:0120-4331955
Web: http://www.curixinfotech.com
Email: sales@curixinfotech.com