Developing a Multi Platforms Web Applications for Mobile Device Using HTML5
Received Date: Feb 05, 2018 / Accepted Date: Feb 12, 2018 / Published Date: Feb 19, 2018
As the mobile phone has become more mature, the continuous development of both hardware and software has become increasingly popular. Nowadays the need to develop mobile application that can run over multi-platform is an essential problem because we have to conquer the difficulties of the variety of mobile platform such as building a different application for each platform is very expensive if written in each native language. Because of the availability of web browser in all mobile devices, it is suggested as an environment to run all web application. This research will examine the limitation and resources of mobile web applications for each individual platform then presenting a model that can be run in different platform for developing phase HTML and CSS3 combined with java script languages will be used, the application will be located on remote server that can be accessed using mobile device throughout the internet, to evaluate the application two test will be done to check the functionality and the availability.
Keywords: Mobile applications; HTML5; Multiple platforms; Web applications
Since the advent of the Internet as a universal technology, mobile computing continuously increased in important, beginning with smartphones in particular the iPhone. In 2010, Mobile devices and Smartphone shipments have surpassed the outsold of personal computers around 9 million dollars and Manufacturers sold more phone devices (101 million) than computers (92 million) in the last quarter of 2010. That means, the future goes to mobile device's market . In our daily life, it can be clearly seen that the way that people prefer for accessing the Internet in throughout mobile devices. So that, the people prefer accessing to their information while moving rather than being confined in front of the regular monitors. All these things can proof that it is not a surprise to see this huge increment in the usage of mobile devices . Several types of mobile devices have been presented by many manufacturers. These devices normally based on different platforms such as Android, iOS, WebOS, Windows, and Blackberry OS. Furthermore, each single device based on a specific platform which also supports specific application market such as Apple store and Android play store. That means each device has its own application and cannot run the application that belongs to other platforms. For Instance, Android application cannot run under iOS platform and vice versa. Thus, when developing a mobile application, it should have to consider the platform that this application will work on . In webbased application, web browsers work as compilers for this application. Web application contents are built under web technology context to run across the web. In general, all mobile devices now come with the web browser as an essential part of the device applications, the thing that makes the developing of mobile web application not very difficult task . Nowadays, World Wide Web composes such a great part of our daily life. Because it considered to be the most powerful medium for accessing the information and sharing resources . Over the years, the web has transferred from a single document to a widely popular design. Previously, the web page was composed of very simple content such as (Text, Image, URLs, and sometimes video). However, the new trend of web pages have been developed rapidly to adopt the desktop-style or native applications. That means there is no need to upload the page every time when clicking on a particular link. The web will be looks like windows regular applications. The page will be uploaded once, and the user can use it without reloading the pages . Consequently, it can be seen the new web application like web games and multimedia web applications and drug-drop web content as well. This new trend of web technology called Web-based Applications. Comparing with native application, web applications are quite different, web application is the application that runs over the web, or over an external server. Web application communicates with the machine through the web browser which sends and receives different types of files. On the other hand, native application is the application that runs in a particular machine under a specific operating system. Native applications normally don't need Internet connection to run, whereas the Internet is an initial part of web applications to run.
Recently, multi-platform applications have chances and constrains. The abundance of smartphone form aspects keep on to increase, with the display screen became one of the main components. Nowadays multi-platform applications need to adapt to varying screen sizes, aspect ratios, orientations, and resolutions . The smartphone also offer various new capabilities, for instance, accelerometer, GPS and camera. Multi-platform applications must be able to benefit of these ability in a portable way to send a rich and contextual user experiences through a wide range of smartphone devices . Basically, there are two challenges that come with mobile web applications. First, is the limitation of mobile device resources, which hinder the development for such multicontent application. Due to these limitations, a high overhead problem will occur. High overhead will make a big consumption to the device resources such as memory and battery life. Second, is the variety of mobile platforms, this produce the incompatibility issues among the mobile applications, the thing that makes the use of mobile devices application is exclusive for specific devices and not feasible for the other devices .
In the mobile system, the mobile device is considered to be a resource-constrained device. It normally equipped with limited processing power, variety of screens sizes, limited bandwidth and connectivity, and the device is relied on batteries for mobility and movement conditions . Web application as application that works over mobiles, represents the future technology of the web by adopting desktop-style mechanism. So that in the future we supposed to deal with websites same like the way of dealing with our native applications. These applications consist of many mechanisms and tools that used to perform different tasks on the web, such as drug-drop technique, sensors, and hardware accessibility . On the other hand, there are many platforms that the mobile devices based on such as android, iOS, WebOS, and Blackberry OS. Each platform has its own application's market, for example, Apple store and Android play store. Therefore, it is impossible to run an Android application under iOS environment. That means, before developing a mobile application, it should be determined on which platform will work. Thus, developing a multi-platform that allows the application to be run over all mobile devices become a very important task . This study is based on how to develop a multiplatform that allows the web applications to run overall devices even for different platforms. It uses the web browser as an environment to run all web applications due to the availability of the web browser over all mobile devices. There are many techniques and mechanisms that have been adopted to develop web-based applications, such as Microsoft Silverlight, Adobe Flash, Ajax, and so on. However, the applications that created with these technologies almost require for further installation, for instance, web application that has been developed with Silverlight cannot work properly until installing the Silverlight plug-in which almost different among the platforms.
The problem here is how to develop a web application that can run on all mobile devices without any additional installation. This research tries to answer this question. This research adopts HTML5 combined with CSS3 and Java script languages to develop the web applications. In the coming chapter, we will go in details to present an adequate information and background to the web applications to create a clear understanding of the idea of this research.
There are two main questions for this study, it must answer. The research questions are:
• What are the limitations of mobile device web application and resources?
• How to develop a multi-platform that enables the mobile applications to run overall platforms?
According to the research questions of this study, there are two main objectives it must achieve it at the result of study:
• Identify the limitations of mobile web application and resources.
• To develop a new multi-platform to enable the mobile applications to run over different mobile devices.
Significant of Research
Achieving the objectives that have been formulated in this research will lead to significant contribution. By designing a multi-platform application which will be run over all mobile devices will lead to valuable results that will overcome the obstacles of the variety of mobile platforms. Applying like this step for mobile application will create a new trend that the developer will follow to develop mobile web applications, which will run over different mobile devices, rather than developing specific application for specific platform. Moreover, this study will give a contribution to the mobile company to generate new product innovation in improving the quality of their mobile products, with lower funding, besides that the user can boost their productivity by using out systems platform, in addition, mobile market will be more competitive while giving the consumers (users) more attractive mobile with the excellent features.
Scope of Study
Many web technologies used to build the multi-platforms for mobile web-based applications. In this research, we adopt HTML5 and CSS3 combined with Java Script language as a multi-platform to develop a new mobile web application. For platforms, we will work with two platforms, which are Android and iOS as our environment to develop and test the web application. These platforms are chosen because they considered as a widely used nowadays by most of people.
The web application is one of the most important issues in the web technology. It also introduces the mobile devices and the most significant studies that have been done in order to develop mobile web applications. This section outlines the potential advantages of mobile web applications and mobile devices as well. It also highlights the mobile platforms and how to deal with the variety of these platforms among different mobile devices. As well as it explain the concept of Web-based Applications and HTML5.
Each manufacturer of phones device work with various operating system and the market share of phone device OS is very different with the key occupiers become Apple and Nokia as presented in Figure 1. Developing web applications of mobile devices faces a lot of challenges which a developer must overcome. The main challenge that faces the mobile applications' developer is how to develop a mobile application that can run over different platforms (multi-platform). Researchers have done number of studies that discuss this issue. Some of them produced the idea of using the web browser as a multi-platform to run the mobile applications and that why these applications called web applications .
Mobile web application
The mobile technology has developed very fast during the current era. From one side, it is very obvious how the mobile devices are developing, thus, it is not hidden that the rapid development of mobile devices has to take much more attention. This development includes both hardware and software. For hardware, we can see the development such as cameras, sensors, screens, and so on, on the other hand; the mobile software has developed as well such as mobile web applications. Many studies have gone into describe mobile applications and platforms .
Simply described the benefits of one platform versus another , Encourage movement away from iOS because of how locked a platform it is. Both make the argument that a platform choice should be influenced by what hardware is present on campus. Good points are made about cost of development on given platforms, programming language restrictions and software requirements  made additional comparison to mobile web applications and described the attractiveness of their being platform independent while mentioning that this does make it harder, in some cases impossible, to access device hardware like GPS, sound and camera. This is not to say that iOS and Android are the only platforms . Have done great work building a toolkit to make teaching mobile application development on the Blackberry easier and have shown how to integrate Blackberry development into a large number of courses. Substantial work has also gone into making mobile application development easier. According to Wolber D , he describes Google’s App Inventor and how it can be used to teach mobile application development and focuses on how easy and accessible App Inventor makes programming applications for Android.
HTML language is the most general markup language to design webpages. It build structured documents by works with tags via semantics for text - such as titles, textbox, and menus - in addition for design links and other elements. It lets designer also can create interactive forms and insert pictures and objects in webpages. HTML, which presented from the mid-1980s, the web-based application design job force started the standardization operation for HTML in 1995 with HTML 2.0. The W3C presented HTML 3.2, in 1996 and then Microsoft and Netscape removed the many proprietary elements. The method offers techniques for scripting, improved accessibility, established objects, style sheets, improved forms and richer tables for people with disabilities. However, HTML was still essentially concentrated on displaying text, not client-based applications or multi-media. Because of this, proprietary technologies like both Microsoft’s multimedia players and Apple’s QuickTime, presented in 1991; and Adobe Flash, which started in 1996, have been used for video. Technologies such as Google Gears and Oracle’s JavaFX, both first presented in 2007, make building Web-based desktop-style software easier for designers .
W3C is building HTML5 to create a standard with a set of capable feature that manipulates all the duties that the proprietary technologies nowadays perform, said specification editor Michael Smith, the consortium’s special missions subsection junior interim floor manager. As well as, HTML 5 will encourage newer mobile device technologies for example, location-based service’s (LBS) and geo location, and in addition newer open formats for instance, an open XML-based file format, scalable vector graphics. SVG, high-quality graphics and produces compact. Designer without needing to have license multiple proprietary technologies can develop Web-based applications .
Mobile device platform and web applications limitations
The development of web-based applications for smart mobile device has several limitations which a designer needs to overcome. There are different types of these challenges, the main kind is mobile device platform limitation such as (bandwidth, memory, CPU availability, batteries power, and screen size and storage capacity). Several Web applications were primarily built with either browser to server or server to server, not smart phone applications.
Mobile device applications have many difficulties to conquer as mentioned before. IN order to solve these nominated mobile methods need to be executed. This may contains treating big datasets that is requested , so it block unimportant downloads of data and to save where locally is data on the mobile device to avoid repeatedly requests for data and decrease the size of applications, hence it will keep more storage capacity. Also determining what is bandwidth of device on such as 3G and 2G can estimates how frequently the device polls the service this can be done by executing speed traps on the mobile device . Due to the limitation of mobile devices, and the behavior of web applications as an application that need to be connected throughout the Internet, overhead rate normally is to be high. To overcome the overhead problem, it should have to consider the mobile device limitations such as bandwidth, processor and memory size, screen size, and so on. HTML5 has provided with many tools that mitigate the overhead problem. The following sections describe HTML5 features.
Creating and processing graphics, animations and graphical effects on mobile devices with a limited screen size, processing power and memory is not easily accomplished. The most important advances in this area are the integration of SVG graphics and the <canvas> element added in HTML5 . 2D Vector Graphics (SVG) – SVG Tiny 1.2 specification. The Scalable Vector Graphics (SVG) format, which is an open XML-based file format, gives the chance for compact and highquality graphics. SVG graphics can be zoomed at the user request, an ability that advances importantly the creation of graphics on mobile devices with limited screen space. Furthermore, SVG graphics can be animated easily constituting the development of advanced and slick interfaces possible, while the application of graphic filters to multimedia content also becomes feasible .
The added <video> and <audio> tags improve the integration of multimedia content in web applications, since media files can be played without external plug-ins. Moreover, the interaction with multimedia content is enhanced in comparison with plug-ins. Finally, the video tags are codec-neutral, and as such the support nonproprietary .
Text input on mobile devices is not easy for most users, due to their limited keyboards. HTML5 adds new types of form controls that make input easier :
• Date and time entries (HTML 5 Date and Time state of input element) are supported by a number of dedicated form controls. For example, users can use a native calendar control.
• Customized text entries for telephone numbers, email addresses and URLs ease the input process of such data. This is accomplished by using virtual keyboards or accessing relevant data from the device .
Mobile devices are characterized by great variations, such as screen size, resolution, type of keyboard, and so on. Having the ability to retrieve data regarding the device that is accessing a web page is of great importance. This data can be used for adapting the layout and behavior of web application .
Besides the traditional interactions based on keyboard and mouse, mobile device users can use other ways of interactions, such as touchbased interactions and voice. Moreover, there is a need to make web applications able to react not just a specific user commands entered by key presses and touch events, but also to more abstract commands. It is obvious that advances in the area of user interactions will enhance data and command entry, and will contribute to the creation of more attractive and user-friendly web applications .
Performance and optimization
Performance plays a vital role in enhancing user experience on mobile devices, due to their CPU and battery limitations. HTML5 offers the following features .
• Page Visibility detection – Page Visibility API. The usage of resources is adjusted based on the needs of the application. For example, when a page is minimized the network. Activity is reduced.
• Threading – Web workers. The most resource-consuming operations are offloaded into a background process, keeping the user interface responsive.
The previous section presents an overall view of the works that related to this research, which have a direct relationship with the objective of this research. These literatures have been built to give an extensive understanding for the background of this research, as well as the domain of the study. Each one of the literatures has viewed to show how to select specific method to perform a specific activity. This section presents a new mechanism for developing multi-platform web application for mobiles, by adopting HTML5 as an environment to develop these applications, in a way that reduces the overhead rate. The methodology of this research can be outlined in four phases as given in Figure 2.
In this research the researcher need to identify who are the respondents, so the respondents are people who agree to take part in a research project. For example, who will use the research result, take advantage and who are interest in the work, they will be a research respondent. In the case of this study, it has many respondents and Interested for this research. Firstly, the researcher who are work in the mobile technology and its applications area and keep abreast of developments and solutions of the problems in this field. Secondly, the other respondents are the companies of developing mobile software application, especially which are specialize in mobile multi-platform web application. Finally, the community of end-users of mobile devices who are use the applications of mobile.
Phase I: identify mobile web application constrains
This phase involves a collection of the initial information about the web applications, also, collect all important information about mobile devices and the related constraints. After that, make the necessary comparisons to understand the weaknesses for each individual platform and the effect of each one of limitation. Performing this phase will lead to specify the problems and limitations of mobile web application and recourses. As well as it give a clear understanding about the mobile web applications' environment. All these information will facilitate the preparation to present the proposed model and how to solve the limitations problem. All these information will collect from literature review. This phase will answer first question to this study and achieve the first objectives.
Phase II: propose application model
The second phase is about presenting the proposed model. This model acts as the basic diagram which will be followed to develop a prototype for the application to be created. The model of this research is based on developing a mobile web application as a multi-platform to be ran over different mobile devices. This application supposed to be located on a remote server that can be accessed using a mobile device throughout Internet access.
Phase III: development application
Design and development a prototype for the proposed model in this phase. It involves developing a mobile web application using HTML5. This prototype should meet the claim of this research by reducing the overhead rate as well as working on different mobile platforms.
Phase VI: evaluation of application
This phase will be performed in order to ensure that the web application create performs the other two objectives of the research. Test pad will be established to check the functionality, also to check whether there is a difference in the performance with other application's platforms like WebGL. Furthermore, these applications should go throughout a usability test by making a test plan and follow the procedures to check if this application is usable or not.
This study presented solution to overcome the difficulties of development mobile web based application such as the limitation of mobile devices recourses for instance (bandwidth and memory) and the variety of mobile platform, it suggested a web based application as alternative to running native mobile applications and provide application based on modern web technologies including HTML and CSS3 combined with java script languages .the result of this research is valuable for developer because it create method that leads to develop mobile web application that can be used over different mobile devices rather than developing specific application for specific platform.
- Kocsis G, Ekler P (2012) Resource requirements estimating of mobile supported websites. Paper presented at the Cognitive Info communications (CogInfoCom), IEEE 3rd International Conference, pp: 309-314.
- P.Alston (2012) Teaching mobile web application development: challenges faced and lessons learned. Paper presented at the Proceedings of the 13th annual conference on Information technology education, pp: 239-244.
- Dickson PE (2012) Cabana: a cross-platform mobile development system. Paper presented at the Proceedings of the 43rd ACM technical symposium on Computer Science Education, pp: 529-534.
- Anttonen M, Salminen A, Mikkonen T, Taivalsaari A (2011) Transforming the web into a real application platform: new technologies, emerging trends and missing pieces. Paper presented at the Proceedings of the 2011 ACM Symposium on Applied Computing, pp: 800-807.
- Taivalsaari A, Mikkonen T (2011) The web as an application platform: The saga continues. Software Engineering and Advanced Applications (SEAA), 37th EUROMICRO Conference, pp: 170-174.
- Goadrich MH, Rogers MP (2011) Smart smartphone development: iOS versus Android. Paper presented at the Proceedings of the 42nd ACM technical symposium on Computer science education, pp: 607-612.
- Espada JP, Crespo RG, Martínez OS, G-Bustelo BCP, Lovelle JMC (2012) Extensible architecture for context-aware mobile web applications. Expert Syst Appl 39: 9686-9694.
- Al-Muhsen AA, Babiceanu FR (2011) Systems engineering approach to CPU scheduling for mobile multimedia systems. Paper presented at the Systems Conference (SysCon), IEEE International.
- Li D, Anand M (2009) MaJaB: improving resource management for web-based applications on mobile devices. Proceedings of the 7th international conference on Mobile systems, applications, and services, pp: 95-108.
- Morreale P, Suleski R (2009) System design and analysis of a web-based application for sensor network data integration and real-time presentation. Systems Conference, 3rd Annual IEEE.
- Phillips D, Thompson R (2013) Limitations & advances in mobile web application development. Enquiry-The ACES J. Undergrad.
- Kao YW, Lin CF, Yang KA, Yuan SM (2011) A cross-platform runtime environment for mobile widget-based application. Paper presented at the Cyber-Enabled Distributed Computing and Knowledge Discovery (CyberC), International Conference, pp: 68-71.
- Fenwick JB, Kurtz BL, Hollingsworth J (2011) Teaching mobile computing and developing software to support computer science education. Paper presented at the Proceedings of the 42nd ACM technical symposium on Computer science education, pp: 589-594.
- Mahmoud QH, Ngo T, Niazi R, Popowicz P, Sydoryshyn R, et al. (2009) An academic kit for integrating mobile devices into the CS curriculum. ACM SIGCSE Bulletin.
- Wolber D (2011) App inventor and real-world motivation. Proceedings of the 42nd ACM technical symposium on Computer science education.
- Vaughan-Nichols SJ (2010) Will HTML 5 restandardize the web? Comput 43: 13-15.
- Brandon D (2011) HTML 5 programming: conference tutorial. J. Comput Sci College 26: 61-61.
- Xinogalos S, Psannis KE, Sifaleras A (2012) Recent advances delivered by HTML 5 in mobile cloud computing applications: a survey. Proceedings of the Fifth Balkan Conference in Informatics, pp: 199-204.
Citation: Kadhim KJ, Odhaib MF, Hadi YH, Ameen HM, Muhdi AA, et al. (2018) Developing a Multi Platforms Web Applications for Mobile Device Using HTML5. J Inform Tech Softw Eng 8: 225. DOI: 10.4172/2165-7866.1000225
Copyright: © 2018 Kadhim KJ, et al. This is an open-access article distributed under the terms of the Creative Commons Attribution License, which permits unrestricted use, distribution, and reproduction in any medium, provided the original author and source are credited.
Select your language of interest to view the total content in your interested language
Share This Article
5th International Conference and Expo on Computer Graphics & Animation
September 26-27, 2018 | Montreal, Canada
6th Global Summit on Artificial Intelligence and Neural Networks
October 15-16, 2018 Helsinki, Finland
9th World Congress and Expo on Optics, Photonics and Telecommunication
November 22-24, 2018 Bucharest, Romania
- Total views: 644
- [From(publication date): 0-2018 - Sep 26, 2018]
- Breakdown by view type
- HTML page views: 575
- PDF downloads: 69