Thesis Presentation:Evaluation and prototyping of an HTML5 Client for iOS

devices

Amit Purkait

mobile

WEBNATIVE

native is

easy!

mobile

Platforms

Native

Native

Objective CJava

Java ME

C#

C/C++

.NET

RubyLua Visual Editor

Java EE

Native

!Native

Other platformsDefragmentation

What if?Native

http://www.publicdomainpictures.net/pictures/10000/velka/spider-web-pattern-1128739369633HK.jpg

web

why web?Runs on browser

Universal

HTML5 + CSS3 + JavaScript

Rapid development

Rapid deployment

Web

ProgrammingLanguages

Web

HTML5 CSS3

JavaScriptJavaScript

Web

HTML1989

HTML52011

HTML41997

CSS3Rounded borders

Animations3D acceleration

Translation

Transformation

Transperancy

Border Image

Gradient Background

Multiple Backgrounds

Word wrapWeb fonts

Overflow-x

Overflow-y

Web

JavaScript

Mobile Frameworks

Jquery Mobile

Jquery UI

iUI

The-M-Project

Sencha Touch

iWebKitJo-Mobile

jQ Touch

zepto.js

Frameworks

Help is there

Frameworks

Comparision tables 1

http://www.markus-falk.com/mobile-frameworks-comparison-chart/

Comparison ChartFrameworks

Filters:

● Platform : iOS, Android, Windows Phone, Blackberry OS, Symbian

● Languages : HTML CSS Javascript

● Target : Mobile website, web app

● UI Widgets : yes

Frameworks

Frameworks

HTML5 Client for iOS devices

mQuest

GWT(Java)

Web (HTML5, CSS3, JavaScript + Frameworks)

Analysis

GWT

Javascript

UI

JSNI Calls

Callbacks

interacts

Web Techonologies

Analysis

Analysis

Previous Client

Analysis

THESIS

OBJECTIVES- Define a better User Interface

- iOS look and feel

- Implement the required functions

UI Change

Need jquery theme

jQuery MobilePackage

CSS JS

Themeing mQuest

Change with jquery theme

.ui-header { ...}

li.ui-buttons { ...}

ui-text { ...}

ui-footer{ ...}

iOS Styling with CSS3

Change with jquery theme

iOS Styling with CSS3

Need old image

Results

Functions

Better UI Architecture

Functions

Expression parser

Functions

Date/time Questions

Functions

Matrix Question

Functions

Rank Question

Functions

GPS with HTML5

Deploying

mQuest

With PhoneGap

why PhoneGap?

Deploy

Deploy

PhoneGap's features

Source: http://phonegap.com/about/feature

Deploy

Process

Results

Final

thoughts

mQuestHTML5 Client

Questions?