1 / 22

Comparison of three mobile site development frameworks

Comparison of three mobile site development frameworks. Comparison of three mobile site development frameworks. Comparison of three mobile site development frameworks. Main screen. Login screen. Single selection. Date picker. Slider. Checkbox.

hanzila
Download Presentation

Comparison of three mobile site development frameworks

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Comparison of three mobile site development frameworks

  2. Comparison of three mobile site development frameworks

  3. Comparison of three mobile site development frameworks

  4. Main screen

  5. Login screen

  6. Single selection

  7. Date picker

  8. Slider

  9. Checkbox

  10. Try these examples on our dev website, at http://137.82.134.27/mobile

  11. Creating an off line Web application with HTML5 • HTML is a programming language used for building and displaying web pages. • Its latest edition is HTML5 which offers cool features such as: • Better aspect : native support for rounded corners, gradient colors, • Multimedia: HTML5 can render video and audio without the need of third party plugins such as Adobe Flash.  • Local storage: web applications can store fair amounts of data on the user’s device. • Off line functionality: Developers can write web application that can run locally on the phone browser, without an internet connection.

  12. Websites, Web applications, Off-line Web Applications, Native Application • HTML5 offers users a better experience, beyond of the traditional websites and web applications. • To demonstrate this, we have created an off-line Web application, which we transformed later into a native application that can be downloaded on Android devices, and which uses phone’s vibration and geo-location services. • First of all, we will review the distinguish characteristics of: • Websites, • Web applications, • Off-line Web Applications, • Native Application

  13. 1. Websites: • Consist of web pages and services hosted on a remote servers • Users only consume info by browsing web pages • Users need internet access to those servers • Everything [web pages, databases] is stored on the server • Examples: Google search Figure 1: mobile website

  14. 2. Web applications: • Consist of web pages or services that allow user to accomplish some tasks • Users can consume, produce or manipulate info. • Users need access to Internet • Everything [web pages, databases] is stored on the server • Examples: • reservation and/or payment systems [e.g. Amazon], • calories counting application [Figure 2.b] Figure 2.a) Web application: Amazon shopping cart

  15. 2. Web applications: Figure 2.b) Web application: Kilo - a calories counting application.[1] [As seen on our development server at http://137.82.134.27/mobile] [1]: web app developed by following the examples in the book “Building iPhone Apps with HTML, CSS, and JavaScript” by J. Stark

  16. 3. Offline Web applications: • HTML5 apps can runoffline on devices that support this feature. Offline web apps can use data stored on device into a local database. •  To make a web application run locally on iPod, for instance, tap on the “+” sign at the bottom of the screen, and then select “Add to Home Screen” as seen in Figure_3. • After that, the app can be launched from icon on the iPod’s home screen, even without internet connection! Figure 3: How to store a web application into an iPod touch Launch App

  17. 3. Off line Web applications [continued]: • A well written web app can look and behave like a native one, as seen in Figure 4: Figure 4: Side-by-side look at Facebook’s native app and mobile web app: [source: http://sixrevisions.com/mobile/native-app-vs-mobile-web-app-comparison/]

  18. 4. Native and Hybrid applications: • While off line Web Application can run …well, off line, and look and behave like native apps, they can access only a limited set of the features on the mobile phones, as seen in Table 1

  19. 4. Native and Hybrid applications [continued]: To overcome these limitations, there are two possibilities: • Write a pure nativeapp, which may not practical when targeting more than two types of devices, since, for instance, the same app developed for Android will not run on iPhone. • Create a hybrid app, which is a Native App with a Web App Inside. With a hybrid app, the entire user interface appears in a browser window, with a native app wrapped around it to provide access to device functionality not available via the browser [1]. By using a specialized tool, PhoneGap, we were able to transform our WebApp into an Android hybrid app that can be downloaded from our development website. In this new incarnation, our app is now able to access the vibration and geo-location features of the cell phones. PhoneGap offers a cloud based service that can transform a HTML5 web applications into hybrid for a large number of devices: iPhone/iPad/iPod, Android, Symbian [Nokia], BlackBerry, Samsung Bada, WebOS, Windows Phone [1] Source: Lionbridge: Mobile Web Apps vs. Mobile Native Apps: How to Make the Right Choice 

  20. Try these examples on our dev website, at http://137.82.134.27/mobile

  21. QUESTIONS?

More Related