View
44
Download
1
Category
Tags:
Preview:
DESCRIPTION
Presented at: Nextbridge LHR C1 May 03, 20112. Building Mobile Web Apps. Procedure & Techniques for Mobile Web Apps. Questions regarding previous session?. ?. RECAPE. Do we fit in the wheel?. RoR. PHP. .NET. Heaven is!. Today’s. AGENDA. Topics we will cover in this presentation. - PowerPoint PPT Presentation
Citation preview
Building Mobile Web AppsProcedure & Techniques for Mobile Web Apps
Presented at:Nextbridge LHR C1May 03, 20112
Questions regarding previous session?
?
RECAPE
Do we fit in the wheel?
Java
C++
Objective C
PHP
RoR
.NET
Heaven is!
Mobile Web Apps
AGENDAToday’s
Topics we will cover in this presentation
• Real cross platform possible?• Can we do from scratch?• The big sandwich• Existing libraries & comparison• Example Application
TOPIC 1Real cross platform possible?
Real cross platform possible?
Apple
iOS
Objective C
Samsung
Android
Java
RIM
BB OS
Java
Nokia
Symbian
C++
Real cross platform possible?
?
iOS
AndroidSymbian
BB OS
What is common?
What is common?
iOS
AndroidSymbian
BB OS
What is common?
Screen Keypad
Battery Interface
OS
What is common?
Web Browser
What is common?
HTML
CSS
Java
Script
Mobile Web
App
Web Browsers
TOPIC 2Can we do from scratch?
Sample screen shot of a web page in mobile
Bar-bone structure of Mobile Web App
What feature browser support?
User Interaction Location
Local Storage
*Files Handling
Does this all we need for a Mobile App?
?
Other features we may need?
Accelerometer Compass
Camera Contacts
TOPIC 3The big sandwich
Three questions
Does one single thing can Cover all features?Cover all vendors?
Cover all platforms?
We need platform?
One Platform
Deals all complexities
Expose Single Language Api
We need platform?
PhoneGap
PhoneGap
Its expose simple
JS API
PhoneGap Api Reference
How to setup PhoneGap on Windows
Pre-requisites
•Eclipse•Android SDK•Android ADT Plugin
Install•Download SDK•Install Eclipse•Install Android ADT Plug-in in Eclipse
How to setup PhoneGap on Windows
Start •Download PhoneGap•Create New “Android” project in Eclipse
Configure•Create ‘lib’, ’assets/www’ directories•Copy cordova-1.x.x.js to www folder•Copy xml folder to res folder•Change `Activity` to `DroidGap` for main activity•http://phonegap.com/start#android
How to setup PhoneGap on Windows
Main FileIndex.html
•<!DOCTYPE HTML><html><head><title>PhoneGap</title><script type="text/javascript" charset="utf-8" src="cordova-1.x.x.js"></script></head><body><h1>Hello World</h1></body></html>
Run • Choose AVD • Start Android Simulator
Bird Eye View
Detail View
Any thing to ask?
?
Is something Missing?
?
PhoneGap Api Reference
What is missing?
User Experience
Here comes?
Mobile UI Libraries
TOPIC 4Existing libraries
A lot of things available
jQuery Mobile jQTouch
iUI Choclate Chip
Its all up to you?
ChooseWhich fits you?
Features on a glancejQuery Mobile
jQ Touch Choclate Chip
iUI Sencha Touch
Basic Mobile Interface List
List with Custom Formatting
Standard Alert Dialog
Input Dialog with button (e.g; 'OK', 'Cancel')Custom Toolbars (headers and footers)Form Elements
Animations
Sample tests we have taken
1. Inserting 500 items in database2. Retrieving 500 items from database
and display in <li>3. Displaying 1000 items with JS Loop4. Displaying a page of 1000 items with
hardcoded html.
Tests results performance
Inserting 500 items in database
Retrieving 500 items from database and display in <li>
Displaying 1000 items with JS Loop
Displaying a page of 1000 items with harcoded html
0200
400600
8001000
12001400
1600
Choclate ChipiUISencha TouchJQTouchjQuery Mobile
Tests results smoothness
Inserting 500 items in database
Retrieving 500 items from database and display in <li>
Displaying 1000 items with JS Loop
Displaying a page of 1000 items with harcoded html
0 1 2 3 4 5 6 7 8 9
Choclate ChipiUISencha TouchJQTouchjQuery Mobile
Tests results effects quality
Inserting 500 items in database
Retrieving 500 items from database and display in <li>
Displaying 1000 items with JS Loop
Displaying a page of 1000 items with harcoded html
0 1 2 3 4 5 6 7 8
Choclate ChipiUISencha TouchJQTouchjQuery Mobile
Framework?
Choice Is all Yours
TOPIC 5Example Application
Now its your turn to speak
BUILDING MOBILE WEB APPSProcedure & Techniques for Mobile Web Apps
Designed & delivered by:Nazar HussainTraining Manager
Assisted by:
Khawar ShahzadAssociate Software Engineer
Presented at:Nextbridge LHR C1May 03, 2012
Recommended