SlideShare a Scribd company logo
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
Evaluation and prototyping of an HTML5 Client for iOS devices
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
Themeing mQuest

                  jQuery Mobile
                  Package




         CSS                 JS
iOS Styling with CSS3

                   .ui-header {
                     ...
                   }

                                  li.ui-buttons {
                                    ...
                                  }

                   ui-text {
                     ...
                   }



                                  ui-footer{
                                    ...
                                  }
iOS Styling with CSS3
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
Deploy

            why
         PhoneGap?
Deploy

PhoneGap's features




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

Process
Results
Final
thoughts

        mQuest
        HTML5 Client
Questions?

More Related Content

PDF
Evaluation and prototyping of an HTML5 Client for iOS devices
PDF
Angular js gtg-27feb2013
PPTX
baidu开发者大会 - Web App开发框架介绍以及分析
KEY
LinkedIn Mobile: How do we do it?
PDF
An Intro to Mobile HTML5
PPTX
Angular JS - UI Development Online Training
PPTX
Introducing Kendo UI
Evaluation and prototyping of an HTML5 Client for iOS devices
Angular js gtg-27feb2013
baidu开发者大会 - Web App开发框架介绍以及分析
LinkedIn Mobile: How do we do it?
An Intro to Mobile HTML5
Angular JS - UI Development Online Training
Introducing Kendo UI

What's hot (17)

PDF
Blending Performance with Front-End Architecture
PPTX
JavaScript Architecture: The Front and the Back of It
PDF
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
PPTX
Kendo UI presentation at JsConf.eu
PDF
新版阿尔法城背后的前端MVC实践
PDF
[D2 오픈세미나]2.browser engine 이형욱_20140523
PPTX
Sap ep admin online training
PDF
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
PPTX
An overview of JavaScript
PDF
Introduction to Front End Engineering
PPSX
Javascript library toolbox
DOC
Sai Sharan_UI_Resume
PDF
Midgard Create and editing content via RDFa
PPTX
2010.11.27 - ITSpark ofline meeting #1, Cluj - Arhitecturi in Windows Azure (...
PPTX
Large-Scale Web Development with JavaScript
DOCX
Sr front end web developer Ln11
PPTX
Telerik Kendo UI Overview
Blending Performance with Front-End Architecture
JavaScript Architecture: The Front and the Back of It
Use Your WebDev Skills to Create Mobile Apps in Telerik Appbuilder (Jonathan ...
Kendo UI presentation at JsConf.eu
新版阿尔法城背后的前端MVC实践
[D2 오픈세미나]2.browser engine 이형욱_20140523
Sap ep admin online training
Crafting Rich Experiences with Progressive Enhancement [WebVisions 2011]
An overview of JavaScript
Introduction to Front End Engineering
Javascript library toolbox
Sai Sharan_UI_Resume
Midgard Create and editing content via RDFa
2010.11.27 - ITSpark ofline meeting #1, Cluj - Arhitecturi in Windows Azure (...
Large-Scale Web Development with JavaScript
Sr front end web developer Ln11
Telerik Kendo UI Overview
Ad

Viewers also liked (10)

DOCX
το τρενο φευγει στις οχτω
PPT
David clean nation
PPTX
Aula virtual
PPTX
Media Pembelajaran Biologi Kelas X
PPT
Models of spatial process by sushant
PPTX
BEHIND 3D &4D
PPT
NavigationLand & Marine Navigation using GNSS
PDF
PhD Thesis Defense - Enhancing Software Quality and Quality of Experience thr...
PDF
Ch 4 - Airport Mobile Internet as an Innovation Indicator
DOC
Thesis in IT Online Grade Encoding and Inquiry System via SMS Technology
το τρενο φευγει στις οχτω
David clean nation
Aula virtual
Media Pembelajaran Biologi Kelas X
Models of spatial process by sushant
BEHIND 3D &4D
NavigationLand & Marine Navigation using GNSS
PhD Thesis Defense - Enhancing Software Quality and Quality of Experience thr...
Ch 4 - Airport Mobile Internet as an Innovation Indicator
Thesis in IT Online Grade Encoding and Inquiry System via SMS Technology
Ad

Similar to Evaluation and prototyping of an HTML5 Client for iOS devices (20)

PDF
HTML5 and the dawn of rich mobile web applications
PDF
HTML5 and the dawn of rich mobile web applications pt 1
PDF
Building Cross Platform Mobile Web Apps
KEY
Why You Need a Front End Developer
PDF
Fragmentation in mobile design: fact or fiction
PDF
HiUED 前端/web 發展和體驗
PPTX
Asp.net mvc - Better User Experience with Kendo UI
PDF
Cross platform mobile web apps
PDF
Building cross platform mobile web apps
PDF
Building Cloud-Based Cross-Platform Mobile Web Apps
PDF
Evolving Mobile Architectures
DOCX
Tasvir_UI Developer
DOCX
Krishnakumar Rajendran (1)
PPTX
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
PDF
The Enterprise Dilemma: Native vs. Web
PDF
Developing the Next Generation Embedded HMIs
PDF
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
PDF
A Snapshot of the Mobile HTML5 Revolution
PDF
Easy HTML5 Data Visualization with Kendo UI DataViz
PPTX
Building single page applications
HTML5 and the dawn of rich mobile web applications
HTML5 and the dawn of rich mobile web applications pt 1
Building Cross Platform Mobile Web Apps
Why You Need a Front End Developer
Fragmentation in mobile design: fact or fiction
HiUED 前端/web 發展和體驗
Asp.net mvc - Better User Experience with Kendo UI
Cross platform mobile web apps
Building cross platform mobile web apps
Building Cloud-Based Cross-Platform Mobile Web Apps
Evolving Mobile Architectures
Tasvir_UI Developer
Krishnakumar Rajendran (1)
Building Mobile Web Apps using ASP.NET MVC, HTML5, & jQuery Mobile
The Enterprise Dilemma: Native vs. Web
Developing the Next Generation Embedded HMIs
Forum Nokia Dev. Camp - WRT training Paris_17&18 Nov.
A Snapshot of the Mobile HTML5 Revolution
Easy HTML5 Data Visualization with Kendo UI DataViz
Building single page applications

Recently uploaded (20)

PPTX
human mycosis Human fungal infections are called human mycosis..pptx
PPTX
Lesson notes of climatology university.
PPTX
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
PDF
Insiders guide to clinical Medicine.pdf
PPTX
PPH.pptx obstetrics and gynecology in nursing
PDF
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
PPTX
Microbial diseases, their pathogenesis and prophylaxis
PDF
Supply Chain Operations Speaking Notes -ICLT Program
PPTX
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
PDF
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
PDF
Complications of Minimal Access Surgery at WLH
PDF
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
PDF
Abdominal Access Techniques with Prof. Dr. R K Mishra
PPTX
Cell Structure & Organelles in detailed.
PDF
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
PPTX
Cell Types and Its function , kingdom of life
PDF
Computing-Curriculum for Schools in Ghana
PDF
STATICS OF THE RIGID BODIES Hibbelers.pdf
PDF
RMMM.pdf make it easy to upload and study
PPTX
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...
human mycosis Human fungal infections are called human mycosis..pptx
Lesson notes of climatology university.
school management -TNTEU- B.Ed., Semester II Unit 1.pptx
Insiders guide to clinical Medicine.pdf
PPH.pptx obstetrics and gynecology in nursing
Chapter 2 Heredity, Prenatal Development, and Birth.pdf
Microbial diseases, their pathogenesis and prophylaxis
Supply Chain Operations Speaking Notes -ICLT Program
IMMUNITY IMMUNITY refers to protection against infection, and the immune syst...
Saundersa Comprehensive Review for the NCLEX-RN Examination.pdf
Complications of Minimal Access Surgery at WLH
3rd Neelam Sanjeevareddy Memorial Lecture.pdf
Abdominal Access Techniques with Prof. Dr. R K Mishra
Cell Structure & Organelles in detailed.
The Lost Whites of Pakistan by Jahanzaib Mughal.pdf
Cell Types and Its function , kingdom of life
Computing-Curriculum for Schools in Ghana
STATICS OF THE RIGID BODIES Hibbelers.pdf
RMMM.pdf make it easy to upload and study
1st Inaugural Professorial Lecture held on 19th February 2020 (Governance and...

Evaluation and prototyping of an HTML5 Client for iOS devices

Editor's Notes

  • #2: Introduce Welcome Theme
  • #3: Let me start with a brief overview of mobile application development process. It is differentiated maily in two categories, native and web. We all know about native applicaiton. The apps that we use in our mobile phones. Clocks, phone, sms, camera app etc. Then there are web applications. Online always availabe. Lets start with native development process.
  • #4: Developing in native is easy. Let me explain. And Id explain later why i have the ! Mark behind it.
  • #5: We need to choose out of many platform the one we are going to develop. Choosing it can be tricky since there are many of them these days.
  • #6: Well that was the easy part. The second task is to choose the language to be written with. We choose the correct language we have to develop in. And most of the time it is already given by the software development kit provided by the mobile OS.
  • #7: We develop the software and we deploy it in corresponding markets.
  • #8: And wait for user to buy the software or click on the ads to generate income. That was easy. But what if we need to develop for other platforms.
  • #9: The question is what if we need to develop same software for other platform. Yes the same process repeats again. Choose platform Choose language Develop Deploy Then there is also a defragmentation problem in all major platforms. The developers have to change their code in order to fit with the device and hope it wont crash. Weren't it better if i could just write once and deploy in every device without the fear that it wont work in some.
  • #10: This is where web application development comes in. With web the problem with the platform differences and defragmentation is solved(?).
  • #11: So what does web do better than native application? Web applications run on browser. It universal because every mobile devices today have a mobile browser. It runs with known technologies like HTML5, css3 and JavaScript, which are easy to learn and understand. Moreover the development process for web applications are reduced when developing for cross platforms. It runs with the „motto code once use everywhere“
  • #12: So this means no more choosing the right platforms, no more learning various programming launguages and no more deploying it to the markets and waiting for it to be accepted. Web apps can be deployed in the Internet and is instantly available. Moreover there are tools with which web applicaitons can be packed like native applications which makes them easier to deploy in the markets.
  • #13: These three techonologies are the best technologies for the web. HTML5, CSS3 and JavaScript create the best team for web application development.
  • #14: HTML5 is the fifth revision of the original HTML for WWW in 1989. With HTML5, there are many features added to the last revision. Features like
  • #15: Features like Drag and Drop, Canvas 2D, Canvas 3D, audio-video integration, websql, webstorage, media capture, file api, web fonts, calendar api are included in the new HTML5 revision. Some of them are still in drafts and are in the the process of being implemented. HTML5 can do native functions like 3D acceleration, geolocation, webgl, contacts api, file api, touch events, canvas, which were not present in the last revision. With these functions being implemented in HTML web is now a powerful platform to develop native like applications.
  • #16: CSS3 brings in lots of new styling features too. Features like .......... gives the look and feel of the web applications a meaning. Now web application can have the look and feel of a native application with CSS3 and the difference is unnoticable. Various functions like animations and transformations, gradient backgrounds also make css preferable than using image in the application.
  • #17: And finally there is javascript and the javascript mobile frameworks which make life easier for mobile web developers. These frameworks brings in ready made tools to make mobile application look more like native applications.
  • #18: These are some of many javascript frameworks that exist today for mobile web development. So how do i choose from all these frameworks. Which one is good. Which is better? What suits to my project? There are actually so many frameworks that it would take a day or more to do the research. Luckily, there is help.
  • #19: Yes there is help. But not from this guy.
  • #20: This is it. A complete comparision of all the javascript frameworks that exists today. This chart is a part of a master project from markus falk. Previously this chart was static and was updated locally. Now it is updated from the developers themselves when new features are implemented or in progress. The frameworks are evaulated under the categories like Platform, language, Target, hardware, User Interface, SDK, Encryption, License. Yes i know what you are thinking, it hurts. Well luckily again he has a filter option where frameworks can be searched and filtered according to some categories.
  • #21: With the search which is relevant to this thesis, i can into following conclusion. The client need most of the platform support, it need to support web languages. It should be used to make mobile website and web app. Hybrid is not a concern yet. And it should have a cooperate design and support a set of native like widgets. It came up to these results.
  • #22: jQuery Mobile and Application Craft. Unfortunately Application craft is a could based application development process. And is charged monthly.
  • #23: mQuest a software developed by cluetec GmbH to interview... Let us analyse the client
  • #24: The logic part of the Client is handled by GWT Java. The UI is manipulated by javascript and HTML5 and CSS3. Jquery Mobile and other framework are used to provide the application most of the native look and feel.
  • #25: This is how it works. Java in GWT can call native javascript methods using the JSNI interface. Calls are sent to javascript which then builds up the UI. Upon an event in the UI, the javascript part get the response from the UI and sends it back to java in GWT. Which is also know as JSNI callbacks. Java part then evaluates the response and reacts accordingly. The Javascript and UI are the web technologies used and seen by the user.
  • #26: At the start of this thesis, there existed a mQuest HTML5 Client. This thesis implementation is based on previous implemenation. Lets analyse the previous mquest client and what it has to be worked on.
  • #27: Followin the start screen of the previous client. The widgets seen are a part of jQuery mobile widgets. The questions are contained in a drop down box. When a question is chosen it can be started with the button click. Async can be made with the mquest server whenever required. The collasped menu items seen belown of the screen provide additional settings, like deleting questionnaires, results, data or setting up the host address.
  • #28: What are the objectives of this thesis. - define... - ios … - implementation of..... To start with a better design, interface, lets start with what is wrong with the previous one.
  • #29: The start screen to the left is more web app than mobile web app. Why is that? Drop down boxes are mostly seen in websites, buttons like submit and cancel are seen in websites, collapsable items are amazing but not for mobile web apps. This had to be changed. And the changes were made. Drop down box is now a list with big clickable items which starts the questions selected. The list allows to see the information related to the questions at once. There is a new footer which supports the sync and menu button . The new interface is clean and easily accessible. It is more touch friendly and has a mobile look and feel. Lets get to the second objective to style it.
  • #30: jQuery mobile brings in its own style for its widgets. This can be seen in the jQuery Mobile package which includes the JS file along with a CSS. Without the CSS jQuery mobile is plain HTML. So how is the styling done,
  • #31: Each widget gets it own class in the CSS file. When a page is loaded with the widgets, CSS runs through the page and defines the styling of the corresponding class names. The re are many styling option from setting backgrounds, to margins, height, width, font set, padding, and transformation, translation along with animating objects.
  • #32: So when a page loads the jQuery stylesheet (CSS) themes the pages. This can be overridden if we need to create a custom stylesheet. In this example the iOS stylesheet is loaded after the jQuery mobile CSS and overrides the old styles. Similary another CSS overrides the iOS styling which give a persistent look and feel of mQuest Client over all devices and platforms.
  • #33: And after the CSS are applied with the Cleint following was the result of iOS sytling. This look pretty much similar to native iOS applications. Lets see the implemented features and function in the client.
  • #44: The final client can scale to any device sizes. A client has been loaded in the devices for a try out of the functions implemented the mQuest client provides.
  • #45: The client has still many rooms where optimisations can be done. Optimisation like reducing the jQuery selectors, using less frameworks, optimising the CSS files, less styles overriding, optimising the performance can still be made. There were also problems during the implementation of the Client. Those were integration the expression parsing, optimising the client from flickerings, and transistions, optimising the look and feel. Some of these were solved but some still need work. Not all the required functions were realised during this thesis. Many functions will be implemented in the future and this thesis provides a solid base for those implementations. All in all mQuest is a fully HTML5 Client which integrates lots of advanced features provided by today web technologies and has an advance set of questioning tools for face to face interview. Thank you.