当前位置:文档之家› Smart Phones Application development using HTML5

Smart Phones Application development using HTML5

Smart Phones Application development using HTML5
Smart Phones Application development using HTML5

Smart Phones Application development using HTML5 and related technologies: A tradeoff between cost and quality

Abstract

Smart Phone Revolution has forced companies to develop the smart phone versions of their applications. Smart Phone market is very fragmented and volatile and there is no single dominant platform. Building native applications for all the platforms is too costly and time consuming. As HTML5 is emerging as a viable option for building cross platform applications, experts are debating their quality and cost effectiveness. In this research paper we have evaluated the quality as per ISO 9126 and look closely where HTML5 based applications are standing against the major quality factors of ISO 9126. In this paper HTML5 based applications were evaluated against the quality factors like Functionality, Usability, Efficiency, Maintainability, Reliability and Portability. We have also discussed the possible cost effectiveness of HTML5 based applications in comparison with native application development.

Keywords: HTML5, Smart Phones development, Quality Attributes.

1. Introduction

Since the emergence of IPhone in 2007, smart phones (SP) have revolutionized the domain of cellular technology.Smart phones have already made a huge impact in our society. The ability of smart phones to give us the features that could be accessed only through personal computers in past are the major reason behind the popularity of Smart phones. Due to this dramatic growth of smart phone market, mobile application development has also seen a huge surge. Every business wants to target smart phone market because they want to stay relevant with their customer base. The biggest issue in capturing their customer base is that the smart phone market is very fragmented and there is no single popular platform that customers prefer. The market is divided among different players and that is why businesses are confused i.e. Which platform they should choose so that they could capture most of their customer base. In fact due to the fragmentation of market they can’t just chose one platform. For capturing the whole customer base businesses have to develop multiple applications due to different platforms.

2. An Overview of Smart Phone market

As opposed to PC market where there is one single platform which is clearly a dominant force i.e. Microsoft Windows; the smart phone market is very much fragmented and distributed amongst various OS vendors.According to the latest data released by Gartner, a leading research company, market is divided amongst Google’s Android, Nokia’s Symbian, Apple’s IOS, and RIM’s Blackberry Operating Systems. According to the data released from third quarter of 2011 in table 1. Android has the majority of the market share with 52.5%. Symbia currently holds 16.9% of the market share while Apple’s IOS has a 15% share[1]

Table 1: Worldwide smartphone sales by Operating System

3.Development platforms for Smart Phones

Smart Phone market is divided amongst multiple major players. In this section we have discussed in detail about the differences in the development platforms of these smart phone platforms.

3.1 Android

Android is Linux based operating system. Android OS consist of various components which include a Linux kernel, Android runtime, Set of various libraries, Application framework and Applications. Android uses Linux kernel version 2.6 for providing its essential services, such as process management, memory management, security etc. Android runtime includes Dalvik virtual machine. Dalvik Virtual Machine is conceptually quite similar to Java Virtual machine but instead it uses a different file format. Android applications are written in java language and compiles into dex files. These dex files are packaged into a single file called Android Package (apk).The dex files are optimized for consuming minimal memory[2].

3.2 IOS

Apple IOS is derived for MAC OS and specially designed for IPhone. The basic foundation of IOS stands on original MAC OS X including OS kernel, BSD sockets and C/C++ compilers for getting native performance[3].The stability and performance of IOS is excellent. IOS supports Objective-C language for developing applications. Apple provides IPhone SDK to developers for developing applications for IPhone. The programming framework used for user interaction in IOS is Cocoa Touch[4].

3.3 Symbian

Symbian operating system was designed by Symbian foundation and quite recently Nokia has announced to open source the Symbian OS. Symbian OS is a micro kernel based Operating System which is the basic reason behind its robustness and responsiveness[5]. Nokia recommends QT for development and publishing applications. QT SDK has an excellent support of easily creating applications along with tools that comes with QT SDK. Development of User Interfaces is simplified by QT which provides a new QML language which is quite similar to popular JavaScript language.

3.4 BlackBerry

BlackBerry OS was developed and designed by Canadian Company, Research in Motion (RIM). RIM does not share the information about the internal design and architecture of BlackBerry OS[5]. Black Berry applications can be developed using Java language. BlackBerry provides a blackberry Plugin for eclipse and also provides an integrated development environment through JDE (Java development Environment). BlackBerry Java SDK includes Java Me API’s as well as BlackBerry specific API’s.

3.5 Windows Phone

Windows Phone is Microsoft based Compact edition of windows i.e. Window CE. Windows Phone supports Silverlight and powerful XNA framework for building applications. Windows Phone SDK comes up with V isual Studio 2010 IDE for building applications, Windows Phone Emulator, XNA Game Studio and Expression Blend software[6]. The Silverlight framework is used for event driven applications and provides a XAML based syntax for creating Rich User Interfaces. The XNA framework is used for games and provides a great gaming experience. With the latest version of windows phone these two frameworks could also be combined into one single application.

4. HTML5, Related T echnologies and Hybrid Approach

In this section we have discussed various features of HTML5 that could help in building high quality applications. We have also discussed the CSS and hybrid approach of development.

4.1 HTML5

HTML (Hyper Text Markup Language) is the basic markup language which is used to display web pages. HTML was initially developed to display only simple static web pages. These simple static pages were comprised of some static text and simple images without any animation. As with the growth and popularity of World Wide Web businesses found the need of some complex applications that could cater the need of their users. There was the requirement of more user interactive websites with dynamic content. Due to the limitations of HTML developers were heavily dependent on third party plugins like Flash or Silverlight. The biggest disadvantage of these third party tools is that the users are required to install the plugins for these third party tools to view the page. Also as they were propriety technologies they were not supported on different mobile platforms.

4.1.1 Canvas

The canvas element facilitates developers to draw diagrams, graphics and complex animations[7]. The canvas is very simple yet very powerful as almost all kind of 2d graphics could be drawn very easily with the help of Canvas. Canvas is a low level bit map based element. JavaScript is used to communicate with the canvas element and all kind of images and graphics are drawn using JavaScript on canvas. All graphics are rendered within the defined width and height. With the use of JavaScript we can get the reference of canvas element and then can draw required graphics easily[7].

4.1.2 Local Storage

One of the biggest limitations of HTML was the absence of any data storage capability. Client Side storage is the basic requirement for any interactive modern day application. This was the area where native applications had a huge advantage over web applications. HTML5 solved that issue by introducing many data storage capabilities. One of those is local storage which is also referred as Web Storage as per HTML5 specification[8]. Local Storage provides a way for web pages to store data as key/value pair within the browser. This key/value pair data persist even after we close the browser.

4.1.3 Web SQL Database

Web SQL Database is another specification that is used for storing and persistence purposes. HTML5 brings the capabilities of Relational SQL to the client side with the help of Web SQL Database[9]. The SQLite database is pre-embedded in the browsers which provide all the capabilities of defined and structured data storage. As the database is embedded in the browser it

does not require any installation. The default size of each database is 5Mega byte which can be extended with the permission of the user[10].

4.1.4 Video and Audio

HTML5 provides the video and audio elements through which web pages can play the video and audio without requiring any third party plugins. The biggest issue with HTML5 audio or video is the dispute of codecs among the browsers. For example Mozilla and opera supports Theora which safari does not support instead it supports H.264 which is also supported by IE9. Both IPhone and Android also supports H.264 on their mobile browsers. W3C recommends OggV orbis and Ogg Theora for audio and video respectively[11].

4.1.5 Geolocation API

HTML5 provides Geolocation API to developers which facilitates in adding location based features to their applications. Location Based Services are quite popular these days in native applications. HTML5 Geolocation API provides the geographical position of a user by finding its latitude and longitude. The HTML5 geolocation API finds the location of a user through GPS or using Network signals like tower or using other sources like IP Addresses etc.[12].

4.2 CSS3

CSS (Cascading Style Sheet) is the markup language through which we can give styles to different elements of our webpage. CSS3 is the next version of cascading style sheet. In CSS3 many new features have been added to enhance the user experience and look & feel of the elements.CSS3 allows developers to achieve important design features such as animations or transitions of an element and also through CSS3 it has become very easier to achieve the existing design features very easier for example presenting the content in multiple columns etc. Similarly we can select the specific element easily by using CSS3 which was only possible through JavaScript before. CSS3 is divided into various modules[11]. Each module is independent and there are around 50 such modules. Modern mobile browsers already started supporting many features of CSS3.

4.3 Hybrid Approach

Hybrid applications are the combination of native applications and web development. In Hybrid Application developers write their code in HTML5/CSS and JavaScript and could also access the device hardware features through native access. The hybrid application get access to device API’s using a bridge between the browser and the device. This allows hybrid applications to get access to all the hardware features of the device. PhoneGap is an HTML5 application platform that allows developers to write smart phone applications in HTML5/CSS and JavaScript and access the device API’s through PhoneGap JavaScript API’s [13]. The PhoneGap works by taking all the code that is written in HTML, CSS and JavaScript and wraps it in the native device web view control. The application runs inside a web view control but it behaves like a normal application i.e. it is impossible for user to differentiate it with the normal application. PhoneGap also provides a set of JavaScript functions that are mapped to native device functions. Through these JavaScript functions we could easily access device features like Camera, Accelerometer, GPS etc.

5. Quality Attributes of HTML5 bases Smart Phone Applications

According to ISO 9126 there are six major quality attributes. These factors are Functionality, Usability, Efficiency, Reliability, Maintainability and portability[14].

5.1 Functionality

Functionality is evaluated by determining the availability of different features in HTML5

technology, especially the device based features which are being used commonly in native application. According to the functionality test results most of the device features are available to modern versions of Smart Phones specially IPhone, Android and Windows Phone 7 through PhoneGap frame work. Some features are missing from both Symbian and BlackBerry. Although most of the device features are available in HTML5 but still there are many features which are not available to HTML5 based apps. Such as we can’t change the wallpaper of our phone, or add the ringtones to our phone etc. Similarly, there are many cloud based service API’s such as Apple’s ICloud services or Google’s cloud print services which are available to native apps but are not available to HTML5 applications. Other utility services such as Google’s C2DM which is available to native Android developers for utilizing Push based services are also not available in HTML5. Different open source implementations of some of these services are available to HTML5 based developers but they are not as reliable yet.

5.2 Usability

The usability factor of HTML5 based Smart Phone apps are evaluated on the basis of the overall user satisfaction in using HTML5 based Smart Phone applications. For this purpose we have developed a simple sample application and distributed this sample application to customers who are also the frequent users of native Smart Phone applications. Most of the Smart Phones today have touch-based interfaces and easy touch interaction plays an important part in the overall usability of the application. Building applications with web based technologies is always different and challenging. Our sample application is a simple Employee Information system. This application was deployed on multiple platforms and handed over to seven experienced Smart Phone users. The usability factor was evaluated on their feedback. For their feedback a questionnaire was developed and distributed to these customers. Customers were asked about their opinion on Visual appeal of the application; Ease of navigation from one form to another, Touch based control responsiveness, Task completion time, Individual Screen’s design, Organization and proper use of controls, scrolling behavior of the screens and overall usability satisfaction. According to the feedback of these customers the overall usability results were very satisfactory and on the basis of these results more complex usability survey could be done.

5.3 Efficiency

The efficiency factor is evaluated on the basis of response and processing times. The efficiency factor means how effectively an application does its required task i.e. How quickly and efficiently an application performs its job. According to a study, for a user the task is instant if it is taking around 0.1 seconds to perform. If the task is taking around 1 second then the delay would be noticeable to a user but user will not be disturbed with this delay. However if some task is taking around 10 seconds to perform then user starts getting annoyed and this is the time limit when some feedback should be given to user from the system[15]. For evaluating the efficiency of HTML5 based applications some normal performance tests were conducted which were, Application launch time and execution time of different tasks. These tests were conducted on almost the same hardware specifications. The first series of tests were conducted to measure the application launch time.

Table 2: Application Launch Time test results

Fig.1 Application launch time test results

The time an application launch took on android was between 3-5 seconds (3000 to 5000ms) as presented in the table 2 which was under the acceptable limit as discussed in the response time study. In the second series of tasks we moved from one screen to another in our application and recorded the execution time of the whole process. In our application list of employees is retrieved from the database and presented in the form of a table with images when we move from one screen to another.

Table 3: Screen Navigation and data Retrieval Test Results

Fig 2 Screen navigation and data retrieval test results

We also recorded the process of inserting an employee record in the database and showing the success message i.e. the total execution time between the add button tap and success notification from the application.

Table 4: Data Insertion Test Results

Fig 3 Data insertion test results

As per the results execution time moving from one screen to another and data insertion time on the local database were quite acceptable.

5.4 Maintainability

Maintainability is the degree of flexibility an application provides in changes and extensibility. Developers always found it hard to maintain the programs written in JavaScript in comparison with high level languages such as Java and C#. Due to the unstructured nature of JavaScript language programs written in JavaScript are very difficult to understand. Although the quality of the person writing the code is also very important but because JavaScript is an unstructured language an average developer finds it hard to write good manageable code in comparison with Java or C#. Especially when the size and numbers of JavaScript files in the application increases the complexity of the code increases so much that it becomes much difficult too. Maintenance of JavaScript code is very much dependent on the expertise of person writing the code. Writing managed code in JavaScript is difficult in comparison with other languages such as Java or C# but by applying proper design patterns it is very much possible to write managed JavaScript code. As JavaScript is gaining importance very fast progress is being made from different companies on providing good debugging and code inspecting tools for JavaScript.

5.5 Reliability

Reliability factor of HTML5 based applications were evaluated on the basis of the Jquery Mobile based Employee Information application that we developed for usability testing. For evaluating the reliability of hardware access we added an extra form in the application which accessed the different hardware API’s. As done previously the application was handed over to seven existing customers. The questionnaire was also distributed to those customers for getting their feedback. This time the questions were related to reliability factor of the application. Questions included in the questionnaire were Successful application load, Successful screen navigation, Touch based event responsiveness, application response rate, Data persistence and retrieval, devic e API’s accessibility and overall reliability of the application. The overall reliability factor results in case

of this survey were quite satisfactory. Although some customers were unhappy because some features were not of that caliber due to the fact that the device API’s were not working properly on their devices. There were some data persistence issues with one of the customers other than that the reliability of the application was quite satisfactory and more complex research in this area could be done on the basis of these results.

5.6 Portability

The biggest reason of smart phones application development using technologies like HTML, CSS and JavaScript is to achieve cross platform portability. Without any major changes in the code PhoneGap provides the portability for HTML5 based applications. For screen designing and UI development cross platform tools like Jquery Mobile and JQTouch helps developers to build consistent screens across multiple Platforms. For evaluating portability we deployed our Employee Management Application For Multiple Platforms successfully without any major problem.

6.Cost Effectiveness of building HTML5 based Applications

For finding the cost effectiveness of building HTML5 based applications we have found the difference in estimated cost of a native application and HTML5 based application. We have done our estimations and evaluations on the basis of an already developed application. Smart Cash Flow application is a smart and easy-to-use personal budget organizer. This application provides full control on personal finances by managing income and expense categories and multiple accounts. According to the results the minimum total estimated time for developing the application is 206 hours and if we build it for five multiple platforms to gain the maximum market the estimated time to develop and ship the application is around 1046 hours. This show how much time consuming application development could be if we build it natively. On the other hand the total estimated development time of building HTML5 application for all the five platforms was 338 hours which shows the effectiveness of developing HTML5 based application. The total development time and cost of HTML5 based application is 67% lesser then native application development which shows the cost effectiveness of HTML5 based application. The real advantage of HTML5 based application is its cross platform support on multiple platforms which is the main reason behind cost effectiveness.

Table 5:Cost Estimations of Native Application and HTML5 based Application

7. Conclusion and Future Work

The first goal of this research paper was to evaluate the quality of HTML5 based application development on smart phones. The quality was gauged against the ISO 9126 standard. There are six major factors according to ISO 9126 standard, which are Functionality, Usability, Efficiency, Maintainability, Reliability and Portability. Functionality was evaluated by finding the availability of different features to HTML5 applications specially the device based features which are being used commonly in native applications. Usability was evaluated on the basis of the overall user

satisfaction in using HTML5 based Smart Phone applications. As per the feedback the results were quite satisfactory. The efficiency was evaluated on the performance of task completed in our application and most of the results were quite satisfactory. Maintainability of HTML5 based application was evaluated on the degree of flexibility HTML5 based applications provide in future changes after the initial development. Reliability factor was also evaluated on the basis of customer feedback and as per our study the results were quite satisfactory. Portability is perhaps the biggest advantage of building HTML5 based applications during the study we successfully ported our application to multiple platforms using PhoneGap. The second goal of the study was to find out the cost effectiveness of building HTML5 based applications and for this purpose a real world project was estimated on the basis of per man hour and a comparison of its timelines and cost were made and as per our study we found out that HTML5 based application was around 67% cost effective. Although our study is still in its initial phases but we have found out that HTML5 has a great potential to be great cross platform language without compromising too much on quality. As per our study the initial level performance tests were also quite satisfactory and more advanced tests should be done on these basis. Future work could be carried out by extending the application used in this study to include more complex tasks and then all the quality factors should be evaluated on those complex scenarios. The cost estimations should also be extended by including the developer per hour cost differences according to different technologies.

References

[1] Gartner. (2011). Gartner Says Sales of Mobile Devices Grew 5.6 Percent in Third Quarter of 2011; Smartphone Sales Increased 42 Percent.

[2] Google. (2008). Android developer : What is Android?

[3] Apple. About the Technologies for Developing Mac OS X Software.

[4] Apple. Cocoa Touch.

[5] R. Dorokhova and N. Amelichev, "Comparison of Modern Mobile Platforms from the Developer Standpoint," Open Source and Linux Lab (OSLL), St. Petersburg Electro technic al University, 2010.

[6] Microsoft. Application Platform Overview for Windows Phone.

[7] W. W. W. C. (W3C). (2011). HTML5 A vocabulary and associated APIs for HTML and XHTML.

[8] W. W. W. (W3C). (2012). Web Storage.

[9] W. W. W. C. (W3C). (2010). Web SQL Database.

[10] R. Leblon, "Building advanced offline web applications with HTML 5," UPC-Barcelona Tech, 2010.

[11] G. Jakus and J. Sodnik, "New technologies for web development," Electro technical Review: Ljubljana, Slovenia, 2010.

[12] W. W. W. (W3C). (2012). Geolocation API Specification.

[13] Adobe. (2012). PhoneGap Documentation.

[14] A. Spriestersbach and T. Springer, "Quality Attributes in mobile Web Application Development," Dresden University Of Technology.

[15] J. Nielsen. Response Times: The Three Important Limits.

智能手机使用HTML5和相关技术应用的发展:

成本与质量之间的权衡

摘要

智能手机革命迫使企业开发他们的智能手机版本的应用程序。智能手机市场非常分散,不稳定,没有一个占主导地位的平台。对于所有平台构建本地应用太昂贵和费时。由HTML5是新兴作为构建跨平台的应用程序的一个可行的选择,专家们正在讨论他们的质量和成本效益。在本研究论文我们已经按ISO 9126质量进行评估并仔细观察基于HTML5应用程序在哪里与ISO 9126的主要质量因素相对立。本文基于HTML5应用程序进行评估与质量因素,如功能、可用性、效率、可维护性、可靠性和可移植性。我们还讨论了与本地应用开发相比基于HTML5的应用程序的成本效益。

1.简介

自2007年iPhone的出现,智能手机(SP)革新了蜂窝技术的领域。智能手机已经在我们的社会中造成了巨大的影响。智能手机给我们最大的变化是可以访问过去只能通过个人电脑访问的功能,这是是智能手机的流行背后的主要原因。由于智能手机市场的大幅增长,移动应用程序开发也出现了巨大的飙升。每个企业都想瞄准智能手机市场,因为他们想保留他们的客户基础。捕捉他们的客户群中最大的问题是,智能手机市场非常分散,没有一个流行的受客户喜欢的单一平台,市场划分成不同的阵营,这就是为什么商家都搞不清楚,即哪个平台,他们应该选择,使他们能够捕捉到大部分的客户群。事实上,由于市场的分散,他们不能只选择了一个平台。要获得整个客户群的企业必须开发多个应用程序由于不同的平台。

2.智能手机市场概述

相对于PC市场上有一个单一的平台,显然有一个占主导力量即微软的Windows,智能手机市场非常分散,分为不同的操作系统供应商。根据一家领先的研究公司Gartner公布的最新数据,市场被划分在谷歌的Android,苹果的IOS,诺基亚的塞班,RIM的黑莓操作系统。据2011年第三季度在表1中公布的数据显示Android有广大的市场份额为52.5%。 Symbia 目前拥有的市场份额为16.9%,而苹果的IOS拥有15%的市场份额。

表1:全球智能手机销售的操作系统

操作系统市场份额(%)(2011年第3季度)

安卓52.5

塞班16.9

iOS 15.0

黑莓11.0

Bada 2.2

微软 1.5

其他0.9

3.智能手机开发平台

智能手机市场被多个主要参与者划分。在本节中,我们将详细讨论智能手机的不同的开发平台。

3.1安卓

Android是基于Linux的操作系统。Android操作系统包含各种组件,包括Linux内核,Android运行时,设置各种库、应用程序框架和应用程序。Android使用Linux内核版本2.6提供基本服务,如进程管理、内存管理、安全等等。Android运行时包含Dalvik虚拟机。Dalvik虚拟机在概念上非常类似于Java虚拟机,而是它使用一个不同的文件格式。Android 应用程序是用java语言编写和编译成DEX文件。这些DEX文件打包成一个名为Android的文件包(apk)。该DEX文件的消耗最小的内存优化。

3.2 IOS

苹果IOS派生为MAC OS和专门为IPhone设计的操作系统。 IOS的基本依据是建立在原来的MAC OS X上,包括OS内核,BSD套接字和C / c++编译器来获取本机性能[3]。IOS 的稳定性和性能都非常出色。IOS支持Objective-C语言开发应用程序。苹果提供了IPhone SDK方便开发人员为IPhone开发应用程序。用于用户交互的编程框架在IOS是Cocoa Touch。

3.3 塞班

塞班操作系统是由塞班基金会和最近诺基亚宣布开源Symbian操作系统共同设计,Symbian操作系统的稳定性和响应性背后的基本原因是Symbian操作系统是微基于内核的操作系统,诺基亚推荐使用QT开发和发布应用程序。QT SDK很好的支持用户独自轻松的使用QT SDK的工具来创建应用程序,用户界面开发是QT提供的一种类似于流行的JavaScript 的语言的简化版的QML语言。

3.4 黑莓

黑莓操作系统是由加拿大公司开发和设计,Research in Motion(RIM)。 RIM公司不共享黑莓OS有关内部设[5]和体系结构的信息。黑莓的应用程序可以使用Java语言开发。黑莓提供黑莓的Eclipse插件,并且还提供了一个JDE的集成开发环境(Java开发环境)。黑莓的Java SDK包括Java ME的API的还有黑莓特有的API。

3.5 Windows Phone

Windows Phone的是微软基于Window CE的紧凑型版本。Windows Phone支持Silverlight 和强大的XNA框架来构建应用程序。Windows Phone SDK带来了Visual Studio 2010 IDE 来构建应用程序,Windows Phone模拟器,XNA游戏工作室和Expression Blend软件[6]。Silverlight的框架是用于事件驱动的应用程序,并提供了一个基于XAML的语法,用于创建富用户界面。XNA框架是用于游戏,并提供了出色的游戏体验。基于Windows的最新版本手机这两个框架也可以合并成一个单一的应用程序。

4.HTML5,相关技术和混合方法

在本节中,我们将讨论HTML5的各种特性,这些特性可以帮助构建高质量的应用程序。我们还讨论了CSS和混合使用方法的发展。

4.1 HTML5

HTML(超文本标记语言)是用于显示网页的基本标记语言。HTML最初是只显示简单的静态的网页。这些简单的静态页面包含了一些静态文本,没有任何简单的动画图像。万维网的增长和企业的普及发现需要一些复杂的应用程序才能够满足用户的需要。在用户互动的网站上对于动态内容有更多的要求,由于HTML的开发商的局限性和很大程度上依赖于第三方插件如Flash或Silverlight。这些第三方工具最大的缺点是用户需要安装这些第三方工具来查看网页。同时他们也没有适当的技术在不同的移动平台使用。

4.1.1 Canvas

Canvas元素有利于开发人员绘制图表,图形和复杂的动画[7]。Canvas是非常简单且非常强大的,因为几乎所有种类的2D图形都可以很容易地在帆布的帮助下得出。Canvas是一个基于低水平位图的元素。JavaScript是用来沟通与canvas元素和各种使用JavaScript 在Canvas上绘制的图形图像。所有图形的范围由宽度和高度呈现,随着JavaScript的使用,我们可以得到的canvas元素的引用,然后可以很容易地得出所需的图形。

4.1.2 本地存储

HTML的一个最大的限制是没有任何数据存储能力,客户端存储是现代任何交互式应用程序的基本要求,这是本地应用程序相对于web应用程序的一个巨大的优势,HTML5通过引入许多数据存储功能解决了这个问题。其中之一是本地存储其也被称为HTML5规范Web存储[8],本地存储在浏览器内提供了一种以键/值对为数据存储的方法用于网页。即使我们关闭了浏览器该键/值对数据的持久化。

4.1.3 Web SQL 数据库

Web SQL数据库是另一种规范用于存储和持久化,HTML5带来的关系型数据库SQL对Web SQL 数据库有很大的帮助,SQLite数据库被预先嵌入在浏览器中提供定义和结构化的所有功能的数据存储。作为被嵌入在浏览器中的数据库,它不需要任何安装。每个数据库的默认大小为5M字节并且可以用户拥有可扩展权限[10]。

4.1.4视频和音频

HTML5提供的视频和音频元素通过web页面可以直接播放视频和音频而不需要任何第三方插件。而HTML5的音频或视频的最大的问题在于浏览器的编解码器之争,例如Mozilla 和Opera支持Theora格式而Safari浏览器不支持,Safari浏览器支持H.264,IE9也支持H.264。无论IPhone和Android在他们的移动浏览器中都支持H.264。W3C推荐的音频和视频分别为OGG Vorbis和 OGG Theora。

4.1.5地理定位API

HTML5提供地理定位API,这有利于增加他们在应用程序中开发基于位置的功能。在本地应用程序中基于定位的服务是很受欢迎的,HTML5地理定位API提供了一个用户的地理位置的纬度和经度。HTML5的地理位置API通过GPS或使用网络信号,如基站或使用其它来源,如IP地址等找到了用户的位置[12]。

4.2 CSS3

CSS(层叠样式表)是标记语言,通过它我们可以给网页显示不同风格的元素。CSS3是层叠样式表的下一个版本。在CSS3中众多新功能已被添加,以提高用户体验,CSS3允许开发者实现重要的设计特性,例如动画元素或者转换元素,并且通过CSS3还可以使现有的设计特点变得更加容易实现,如展示多个列中的内容等等。同样我们也能很容易地通过CSS3创建那些只能通过JavaScript实现的元素。CSS3分为各个模块[11]。每个模块是独立的,大约有50个这样的模块。现代的移动浏览器已经开始支持CSS3的许多功能。

4.3 混合应用

混合应用是本地应用程序和Web开发相结合。混合应用程序开发人员在HTML5 / CSS 和JavaScript中编写代码,也可以通过本地接入设备访问硬件特性。混合应用程序通过访问设备的API在浏览器和设备之间架起一座桥梁。混合应用允许对所有硬件设备进行访问。PhoneGap的是一个HTML5应用平台,许开发人员通过PhoneGap的JavaScript API编写智能手机应用程序的HTML5/ CSS和JavaScript和访问设备的API[13]。PhoneGap把所有写在HTML、CSS和JavaScript的代码封装到了本地设备的Web视图控件,该应用程序在Web视图控件内运行,但它的行为像一个正常的程序,用户很难区分开来。PhoneGap 还提供了一组JavaScript函数,映射到本地设备的功能,通过这些JavaScript函数我们可以很容易地访问设备特性,如相机、加速度计、GPS等。

5.HTML5基于智能手机应用的质量属性

根据ISO9126有六大质量属性。这些因素是功能性,可用性,效率,可靠性,可维护性和可移植性[14]。

5.1功能

功能是通过评估确定HTML5技术不同特性的可用性,尤其是基于设备的特性,这些特性在本机应用程序中经常使用的。根据功能测试结果大多数的设备功能可通过PhoneGap 框架的最新版本版本用于智能手机,尤其是IPhone,Android和Windows Phone7。某些功能缺失来自Symbian和黑莓。虽然HTML5可用大部分的设备功能,但还是有很多特点是HTML5的应用程序不能使用的。比如我们不能改变我们的手机壁纸,或添加铃声到我们的电话等等。同样,也有很多基于云服务的API,如苹果的iCloud服务或谷歌的云打印服务提供给本机应用程序,但不可用于HTML5的应用程序。其他公用事业服务,如谷歌的C2DM 这是提供给原生的Android开发人员使用,推送服务也无法提供给HTML5。不同的开源实现这些服务对于HTML5开发人员是可行的,但是他们并不可靠。

5.2 可用性

基于HTML5的智能手机应用程序的可用性评估是基于整体用户满意度评价的基础上进行评估的,为此,我们制定了一个简单的示例应用程序,并且风发给经常使用智能手机的用户,如今大多数的智能手机都有触摸屏和简易的交互应用软件,这在整个应用程序是十分重要的一部分。构建应用程序与基于Web技术总是不同的,具有挑战性的。我们的示例应用程序是一个简单的员工信息系统。这个应用程序是部署在多个平台和移交给七个经验丰富的智能手机用户。可用性是通过他们的反馈进行评估。把对于反馈的调查问卷分发给客户。客户被问及他们对应用程序的视觉吸引力,一种方便的导航到另一种,触控响应,任务完成时间,个别屏幕的设计,组织和正确使用的控件,屏幕滚动行为和总体可用性的满意度。根据客户的反馈总体可用性的结果非常令人满意,在这些结果的基础上可以做更复杂的可用性调查。

5.3 效率

评估效率因素是在响应和处理时间的基础上进行的。效率的因素是指应用如何有效地完成其的任务,也就是应用程序如何快速、高效地执行其工作。一项研究表明,对用户的任务是即时的,且如果它正在约为0.1秒内完成。如果任务大约为1秒钟,将延迟显示给用户,但用户将不会被该延迟干扰。然而,如果某些任务花费10秒左右来执行,就会导致用户开始变得恼火,并且系统应该反馈一些时间限制给用户。对基于HTML5的应用程序进行一些常规的效率性能测试,应用程序启动时间和不同的任务执行时间的效率。这些测试是在几乎相同的硬件规格进行。首先进行了一系列的应用程序的启动时间的测试测量。

表2:应用程序启动时间测试结果

图1应用程序启动时间测试结果

应用启动了Android上的时间为3-5秒(3000?5000毫秒),如表2所示,通过讨论研究提出这个响应时间是在可以接受范围内的极限。在第二个系列的任务中,我们从一个屏幕移动到另一个应用程序并记录整个过程的执行时间。当我们从一个屏幕移动到另一个时,我们雇员的应用程序列表被从数据库中检索出来,并且以表格的形式展示图片。

表3:屏幕导航和数据检索测试结果

图2屏幕导航和数据检索的测试结果

我们也记录插入一个雇员记录在数据库中,并显示成功的消息,即从应用程序中添加按钮点击并成功的通知的总执行时间的过程。

表4:数据插入测试结果

图3数据插入测试结果

按照该结果执行时间从一个屏幕移动到另一个屏幕和数据插入的时间在本地数据库是完全可以接受的。

5.4可维护性

可维护性是指改变和扩展应用的难易程度,开发商总是觉得JavaScript编写的代码相对与Java和C#语言编写的程序可读性差。由于用JavaScript编写的非结构化性质的JavaScript语言程序是很难理解的。虽然人编写代码的质量也是非常重要的,但是因为JavaScript是一种结构化语言,与Java或c#相比开发人员很难写出容易维护的代码。尤其是在应用程序中JavaScript文件的大小和数量增加了代码的复杂性,使它也变得过于复杂。JavaScript代码的维护是非常依赖于专业的人。JavaScript语言相比于其他语言如Java 或C#很难写托管代码,但通过采用适当的设计模式,JavaScript语言也可以写出托管代码。来自不同公司提供的良好的调试和代码检查工具,使得JavaScript获得重要的快速发展。

5.5可靠性

HTML5应用程序的可靠性评估是在我们开发的可用性测Jquery手机员工信息应用基础上进行的,对于评估硬件访问的可靠性,我们的应用程序在访问不同的硬件API时增加了一个额外的表格。正如前面所做的应用程序被移交给7的现有客户。问卷还分发给这些客户并获取他们的反馈。此时的问题是有关该应用程序的可靠性因素。问卷问题包括应用可用负载,可用屏幕导航,基于触摸的事件的响应能力,应用程序的响应速度,数据持久性和检索,设备API的访问和应用程序的整体可靠性。整体可靠性因素在本次情况下的调查的是比较满意的。虽然有些客户很不高兴因为一些功能没有而导致该设备API的在其设备上工作不正常。除了有一些数据持久性问题的客户以外,其他应用程序的可靠性是相当令人满意的,并且这方面更复杂的研究可以在这些结果的基础上完成的。

5.6可移植性

智能手机应用程序开发利用技术的最大依靠就是HTML,CSS和JavaScript是能实现跨平台可移植性。PhoneGap提供基于HTML5应用程序在可移植性上代码中没有任何重大变化。屏幕界面设计和UI开发跨平台工具如Jquery移动和JQTouch帮助开发人员构建跨多个平台一致的屏幕。评估可移植性时我们的员工管理应用程序成功部署多个平台且没有任何重大问题。

6.建设基于HTML5的应用程序的成本效益

为了寻找建设基于HTML5的应用程序的成本效益,我们找到了一个原生应用和HTML5的应用程序的估计费用的差异。在我们已经开发的应用程序的基础上,完成了我们的估计和评价。智能资金流动应用程序是智能和易于使用的个人预算管理软件。这个应用程序提供了完全控制在个人多个帐户财务管理收入和费用。结果显示开发应用程序的最低总预计时间是206个小时,如果我们建立五个平台来获得最大市场,预计应用程序开发时间大约1046个

小时。这表明如果我们在本地构建它可能耗费多少时间使用在应用程序的开发,在另一方面建立对所有五个平台的HTML5应用程序的预计总开发时间为338小时,这也表明了开发基于HTML5的应用程序的有效性。基于HTML5的开发时间和总成本是本地的应用程序开发应用程序的67%,这也显示了基于HTML5应用程序的成本效率。基于HTML5应用程序的成本效率的最主要的优在于他的跨多平台。

表5:本地应用和基于HTML5的应用成本估算

7.结论和未来的工作

本研究论文的首要目标是评估HTML5开发基于智能手机应用程序的质量。质量按照ISO 9126衡量标准。根据ISO 9126标准有六个主要因素,功能、可用性、效率、可维护性、可靠性和可移植性。功能是通过评估确定不同特性的可用性,尤其HTML5应用程序使用专门为那些本地应用程序提供的功能时的可用性,可用性是在使用HTML5基于智能电话应用的整体用户满意度的基础上进行评价。按照反馈的结果是相当满意的。在我们的应用程序中任务完成的效率是评价表现大部分的结果非常令人满意。HTML5的基础应用维护上的灵活性是在经过HTML5应用程序最初的发展后,对未来的变化进行了评估。可靠性因素也是在客户反馈的基础上进行评估的,根据我们的研究结果非常令人满意。构建基于HTML5应用程序的最大优势是可移植性,在研究过程中我们成功地使用PhoneGap移植应用程序到多个平台。这项研究的第二个目的是要找出基于HTML5应用程序的成本效益并且通过在真实的项目中预估个人的工作时间的基础上比较其时间和成本,按照我们的研究我们发现基于HTML5应用程序节省成本67%左右。虽然我们的研究还处于起步阶段,但我们已经发现,在不牺牲太多的质量,HTML5具有很大的潜力成为主流的跨平台语言,按照我们的初始的研究水平和性能测试也都相当满意,更先进的测试可在此基础上完成。未来的工作可以由本研究中使用的应用程序扩展到包括更复杂的任务,然后所有质量因素应在这些复杂的场景下进行评估。计成本也应该拓展到包括根据开发人员不同的技术每小时成本差异。

参考

[1]Gartner公司。(2011年)。Gartner表示,销售移动设备同比增长5.6%,2011年第三季度;智能手机销量增长42%。

[2]谷歌。(2008)。Android开发者:Android是什么?

[3]苹果。关于技术开发的Mac OS X软件。

[4]苹果。Cocoa 触摸。

[5] R. Dorokhova和N. Amelichev,“从开发者立场比较现代移动平台”开源和Linux 实验室(OSLL),圣彼得堡电工大学,2010。

[6]微软。应用平台概述的Windows Phone。

[7] W·W·W·C。(W3C)。(2011年)。HTML5的一个词汇和HTML和XHTML 相关的API。

[8] W·W·W·(W3C)。(2012年)。Web存储。

[9] W·W·W·C。(W3C)。(2010年)。网络SQL数据库。

[10] R.莱布隆,“建设先进的离线Web应用程序与HTML5”UPC-巴萨技术,2010。

[11] G. Jakus和J. Sodnik,“Web开发的新技术”电子技术回顾:斯洛文尼亚的卢布尔雅那,2010年

[12] W. W. W.(W3C)。(2012年)。地理定位API规范。

[13]的Adobe。(2012年)。PhoneGap的文档。

[14] A. Spriestersbach和T.施普林格,“移动Web应用程序开发质量属性”德累斯顿工业大学。

[15] J.尼尔森。响应时间:三个重要限制。

相关主题
文本预览
相关文档 最新文档