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


                              Amit Purkait
NATIVE WEB



mobile
!
native is

easy
Native



  mobile
Platforms
Native
                     Java
    Objective C
                                    C#



      .NET                     Java ME

                    Lua
                                Visual Editor
   Ruby

          Java EE           C/C++
Native
Native




         !
Native

What if?
    Other platforms
    Defragmentation
web



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


      Programming
       Languages
Web


       HTML5
        CSS3
      JavaScript
1989 HTML


1997 HTML4


2011 HTML5
Web
                        3D acceleration
                                                      Animations

                                      Translation
               Word wrap
                                                            Rounded borders
Web fonts



Multiple Backgrounds
                         CSS3
                                                       Transformation


     Gradient Background              Transperancy
                                                                 Overflow-y


                       Border Image            Overflow-x
JavaScript
Mobile
Frameworks
Frameworks


          Jquery UI                           The-M-Project

                           Jquery Mobile


                      jQ Touch
 iUI
                                           Sencha Touch




       iWebKit              zepto.js
                                                 Jo-Mobile
Frameworks


Help is there
Frameworks                                       Comparison Chart




                 Comparision tables 1




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


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

●
    Languages : HTML CSS Javascript

●
    Target : Mobile website, web app

●
    UI Widgets : yes
Frameworks
mQuest


    HTML5 Client for iOS devices
Analysis

                GWT
                (Java)

Web
(HTML5, CSS3,
JavaScript +
Frameworks)
Analysis
                  GWT
           Callbacks


                             JSNI Calls


           Javascript
                            interacts




                       UI
                                          Web Techonologies
Analysis
Previous Client
Analysis
THESIS
OBJECTIVES
- Define a better User Interface

- iOS look and feel

- Implement the required functions
UI Change




            Need jquery theme
Themeing mQuest

                  jQuery Mobile
                  Package




         CSS                 JS
iOS Styling with CSS3

                            .ui-header {
                              ...
                            }

                                           li.ui-buttons {
                                             ...
                                           }


 Change with jquery theme   ui-text {
                              ...
                            }



                                           ui-footer{
                                             ...
                                           }
iOS Styling with CSS3




 Change with jquery theme
Results




Need old image
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
Deploy

            why
         PhoneGap?
Deploy

PhoneGap's features




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

Process
Results
Final
thoughts

        mQuest
        HTML5 Client
Questions?

Evaluation and prototyping of an HTML5 Client for iOS devices