building mobile web apps
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 PresentationTRANSCRIPT
![Page 1: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/1.jpg)
Building Mobile Web AppsProcedure & Techniques for Mobile Web Apps
Presented at:Nextbridge LHR C1May 03, 20112
![Page 2: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/2.jpg)
Questions regarding previous session?
?
![Page 3: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/3.jpg)
RECAPE
![Page 4: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/4.jpg)
Do we fit in the wheel?
Java
C++
Objective C
PHP
RoR
.NET
![Page 5: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/5.jpg)
Heaven is!
Mobile Web Apps
![Page 6: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/6.jpg)
AGENDAToday’s
![Page 7: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/7.jpg)
Topics we will cover in this presentation
• Real cross platform possible?• Can we do from scratch?• The big sandwich• Existing libraries & comparison• Example Application
![Page 8: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/8.jpg)
TOPIC 1Real cross platform possible?
![Page 9: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/9.jpg)
Real cross platform possible?
Apple
iOS
Objective C
Samsung
Android
Java
RIM
BB OS
Java
Nokia
Symbian
C++
![Page 10: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/10.jpg)
Real cross platform possible?
?
iOS
AndroidSymbian
BB OS
![Page 11: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/11.jpg)
What is common?
What is common?
iOS
AndroidSymbian
BB OS
![Page 12: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/12.jpg)
What is common?
Screen Keypad
Battery Interface
OS
![Page 13: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/13.jpg)
What is common?
Web Browser
![Page 14: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/14.jpg)
What is common?
HTML
CSS
Java
Script
Mobile Web
App
Web Browsers
![Page 15: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/15.jpg)
TOPIC 2Can we do from scratch?
![Page 16: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/16.jpg)
Sample screen shot of a web page in mobile
![Page 17: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/17.jpg)
Bar-bone structure of Mobile Web App
![Page 18: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/18.jpg)
What feature browser support?
User Interaction Location
Local Storage
*Files Handling
![Page 19: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/19.jpg)
Does this all we need for a Mobile App?
?
![Page 20: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/20.jpg)
Other features we may need?
Accelerometer Compass
Camera Contacts
![Page 21: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/21.jpg)
TOPIC 3The big sandwich
![Page 22: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/22.jpg)
Three questions
Does one single thing can Cover all features?Cover all vendors?
Cover all platforms?
![Page 23: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/23.jpg)
We need platform?
One Platform
Deals all complexities
Expose Single Language Api
![Page 24: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/24.jpg)
We need platform?
PhoneGap
![Page 25: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/25.jpg)
PhoneGap
Its expose simple
JS API
![Page 26: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/26.jpg)
PhoneGap Api Reference
![Page 27: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/27.jpg)
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
![Page 28: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/28.jpg)
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
![Page 29: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/29.jpg)
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
![Page 30: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/30.jpg)
Bird Eye View
![Page 31: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/31.jpg)
Detail View
![Page 32: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/32.jpg)
Any thing to ask?
?
![Page 33: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/33.jpg)
Is something Missing?
?
![Page 34: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/34.jpg)
PhoneGap Api Reference
![Page 35: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/35.jpg)
What is missing?
User Experience
![Page 36: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/36.jpg)
Here comes?
Mobile UI Libraries
![Page 37: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/37.jpg)
TOPIC 4Existing libraries
![Page 38: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/38.jpg)
A lot of things available
jQuery Mobile jQTouch
iUI Choclate Chip
![Page 39: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/39.jpg)
Its all up to you?
ChooseWhich fits you?
![Page 40: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/40.jpg)
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
![Page 41: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/41.jpg)
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.
![Page 42: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/42.jpg)
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
![Page 43: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/43.jpg)
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
![Page 44: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/44.jpg)
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
![Page 45: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/45.jpg)
Framework?
Choice Is all Yours
![Page 46: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/46.jpg)
TOPIC 5Example Application
![Page 47: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/47.jpg)
Now its your turn to speak
![Page 48: Building Mobile Web Apps](https://reader036.vdocuments.site/reader036/viewer/2022062302/56816384550346895dd46b1a/html5/thumbnails/48.jpg)
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