The History Of User Interface Standards

Published Date: 02 Nov 2017

1.0 Introduction

In the past couple of years we have witnessed tremendous growth of mobile users all over the world. The reason for that is the entry of smartphones in the market at affordable prices. That triggered a major shift in the way we access the internet today with mobile phones becoming the primary access point for internet usage. In today's fast paced world, phones are not just used for calling or playing games there are more used to organize a complete day, check and send emails, make conference calls, fulfill some business tasks, shopping and even to connect to social networks and perform bunch of different activities.

This growth of mobile phone market generated a huge demand for various mobile applications. Numerous mobile applications are developed and are available in order to simplify various tasks to the end users which all results in an accelerated growth of application development for mobile devices. Mobile application development is the process by which the application software is designed, developed and tested for various hand-held devices like mobile phones, tablets, PDAs, etc..

In just a few short years, smartphones changed our habits and the way we connect to the content. On the following figure is presented the growth in smartphone usage in the USA according to the ComCast data mining center. [24][26] In July 2007, there were only 9 million Americans owning a smartphone which was around 4 percent of the entire mobile market. In March 2012, nearly 110 million Americans owned one and by the end of the year according to the ComCast predictions, smartphone owners will become the new mobile majority.

Figure 1 Increase of Smartphone owners in USA [26]

Due to affordable prices and tight and fast race between numerous mobile vendors for bigger market share, smartphone usage is increased in the whole world and is currently one of the biggest and most worth industries.

Earlier, mobile developers had many difficulties while developing applications as they had to build better, unique, competing and hybrid applications which would include various tasks like messaging, managing contacts or calling in a user friendly way. However, the launch of new mobile platforms for smartphones like Android or iOS brought a revolution in a mobile application development. Anyone who had some basic knowledge about coding or scripting could have start building its own application. Mobile application development suddenly stop being a nightmare.

Almost every mobile vendor has its own platform. The most popular platforms are: Google Android, Apple iPhone iOS, RIM Blackberry OS, Symbian OS or Windows Phone. They all provide their own SDK (Software Development Kit) used by developers to create appropriate applications. Developers are also provided a market or a place where they can publish their creations to the world.

Today, most online businesses like news or shopping sites, social networks and even job portals have developed mobile application for their clients. This trend brings them a huge popularity, better services to clients and in the end profit. According to the market research experts from the Strategy Analytics [25] there were 8.2 billion mobile application downloads in 2010 globally and is expected to reach 80 billion in 2014 which will be worth $35 billion.

Figure 2 Number of applications downloaded from the Apple App Store vs number of applications downloaded from the Google Play Android App store. [24]

1.1 Problem definition

Main driving force of today's modern society that influences most business decisions is a profit. Most of the investments are made to reduce costs or to increase a profit. In 2011, having a mobile application went from "nice to have" to "must to have" for businesses of all sizes. In 2012, the same shift is taking place when it comes to supporting multiple mobile platforms. Although some companies decide to have an application for only one platform, the majority still focuses to produce applications for multiple mobile platforms.

Developing an application for each platform is a challenge especially if the resources are limited. Having a development team that has to produce a native code application for multiple platforms or even worse, having more development teams in order to produce same application for different mobile platforms results in huge costs both in time and money. If you add to that maintenance and further development, the cost in the end is few times higher than the initial one.

Suddenly the idea of developing a single application that runs on every platform became a goal. However, that was much harder to achieve and various solutions came across. The main problem and difference between applications on different platforms was in user interface design and its standards. This UI diversity is made with purpose. At the beginning, platforms had to differentiate themselves in order to get a share on the market. This resulted in a competitive improvements. In the other hand, it created more and more challenges for the designers and developers as they had to have a broad spectrum of skills.

The solution came across as HTML5. A new, enhanced version of Hypertext Markup Language which, although not finished and not fully supported by some web browser vendors, makes the web a first-class environement for creating real applications. It reinforces JavaScript's existing toolset with key extensions to the browser APIs that make it easier to create applications that feel complete and not just some static views.

As the number of mobile applications continualy increases, more and more developers start to use HTML5, JavaScript and CSS3 to create a web or native mobile applications. As a standardized language, HTML5 provides a native support for many features that used to be possible only with some plugins or with complex code. Developers have tried lots of things to make their applications richer, more interactive so they used various plugins, from ActiveX controls to Flash. HTML5 now gives new features that almost completely eliminate these third-party technologies.

By using a combination of HTML5, JavaScript and then wrapping it all in a relatively thin native-code wrapper we are able to produce an efficient cross platform application. The advantage of this approach is that it acts as a combination of both HTML5 and native applications meaning that we have a common development language, a common set of APIs for all supported platforms and enhanced access to the device over a pure HTML5 web application.

1.2 Objective

As described in the previous section of this chapter, the main problem in mobile application development is not having a standardizes way of developing a user interface.

For that reason main objective of this thesis is to prove that by using HTML5, one is able to create a standardized, cross-platform application with a multiplatform user interface support. Besides, it will point out that user interface developed with HTML5 is much more convenient for developers and reduces companies development, improvement and maintenance costs.

To prove and support the main objective, thesis will discuss following statements:

1. HTML5 is an acceptable solution for creating a standardized user interface that will work on major mobile platforms.

2. Creating a cross-platform application decreases initial and future development costs in resources as well as in time.

3. By using a combination of HTML5, JavaScript and thin native-code wrapper we are able to produce an efficient cross platform application.

4. Thesis will discuss and try to give best ways and practices for designing user interfaces for cross-platform mobile applications. Discussion will be also on issues relevant for native mobile application design.

5. Having a reusable C++ object oriented library of HTML5 elements gives developer an opportunity to create a cross-platform user interface with ease and without mixing markup with the programming code.

2.0 Related work

Building a mobile app that runs on more than one platform, with minimal code changes, is a technical Holy Grail. With diversity of mobile platforms like iOS, Android, Blackberry, Symbian, Windows Phone 7 and many more, developers all around the world cope with incredible challenge in order to design and develop mobile applications that would run on all this platforms.

When we build an application for a mobile device, we usually build it using the SDK(Software Development Kit) which is made especially for that platform. This gives us nice look and feel as well as full access to features specific to that device or operating system. Sometimes, however, we just want to code using just web standards and be able to run the application on multiple platforms and systems. This is similar to coding a mobile website except that, as a local application, it can lunch faster, work offline and have access to local resources.

Today, smartphones and tablets are almost everywhere, and with them, mobile applications. But what does this proliferation of different devices mean for a developers entering the market? Should they focus a single platform, building their applications twice for iOS and Android, or use a cross platform framework? In the following section I will give a short summary of the different technologies on the market at the moment.

In 2007, Apple lunched its iPhone that really started the smartphone era. At the beginning, iPhone did not allow third-party native-code applications to be installed which meant that developers in order to add their own content had to do so using HTML web apps that ran in the phone's browser. There were some extinctions to make such applications look like Apple's app rather than normal web pages, but access to hardware was limited. However, with 2008 came the App Store and with it the opportunity for developers to develop native apps in programming language Objective C. This also was not without some limitations. Development required a Mac, Xcode, and only documented parts of the API were available. The resulting applications had to be checked before being published. The iPhone dominance today, means that mobile developers had to target only one platform, one device and a very small set of OS versions.

In 2005 Google acquired Android and three years later it launched its first handset. The Android platform has since then made an explosion of devices. [8] On Wikipedia there is a list of over 100 devices made by over 30 manufacturers. [9] They now collectively account for over 50% of worldwide smartphone sales. Unlike the iOS which runs only on iPhones, Android platform runs on multiple devices which vary in almost everything: screen size, resolution, processor speed, memory, features, and OS versions.

Suddenly the idea of developing a single application that runs on every platform became a goal that was much harder to achieve. Various solutions came across. Some of the most constructive one where:

a) Cross-platform compilers

b) HTML5 web applications

c) HTML5 hybrid applications

[10] Cross compilers are compilers capable of creating executable code for a platform other than the one on which the compiler is running. Its main use is to separate the build environment from target environment. There are various cross-platform compilers, starting from the lowest level, C cross compiler which is used by various SDK platforms. There is also a Xamarin [11] which offers a C# compiler targeting both Android and iOS. These and other similar platforms offer a common language but we still need one to be compiled for multiple devices.

With HTML5 running in web browsers we are able to provide rich client-side experience with local storage, geolocation, audio and video, offline working, accelerated graphics operations and more. Besides, running the application in the browser has some major advantages for both user and developer. [12] For the user, there is no commitment to the application meaning he tries it and if he does not like it he can move to the next page. There is no need for cluttering the disk. For the developers, there is no need for installation program or new versions to be send as they do automatically.

The last solution is to develop the application using a combination of HTML5, JavaScript and usually some extra libraries and then wrapping it all in a relatively thin native-code wrapper. The advantage of this approach over the previous two is that it acts as a combination of both HTML5 and native applications. That means that we have a common development language, a common set of APIs for all supported platforms and enhanced access to the device over a pure HTML5 web application. Local storage can exceed 5MB limit, photos from local device can be uploaded, background services can run and many more. Currently, the best wrapper is [15] PhoneGap framework which is an Apache open source project and provides a platform-specific wrapper for Android, iOS, Blackberry, Windows Phone.

2.1 User Interface standards

As innovators seek to find new possibilities and solutions as the one mentioned in the previous section, emerging technologies often go through a period of rapid change. Alternative solutions to problems compete for mind and market share. Mobile user interface (UI) technologies are currently at its peak. Phones and tablets that use Apple's iOS (iPhone, iPad), Google's Android architecture, Blackberry's operating system, Windows Phone mobile operating system all offer different UI design approaches.

This UI diversity is made with purpose. Platforms must differentiate themselves in order to get a share on the market. For example, on the Android platform, carriers and device vendors must distinguish their products. By doing this they create even more diversity. In one hand, this resulting diversity is good as it makes competitive improvements however, it creates even more challenges for developers and designers who are creating the applications and websites for these devices.

Currently, development teams, in order to create applications that run natively on multiple device types and platforms, need:

a) Skills in different development technologies

b) Knowledge about device capacities (device number increases rapidly)

c) Knowledge of different UI style standards

d) Multiple programming and cross porting efforts

e) Expensive and demanding multi-device and multiplatform test effort

However, mobile web technologies now provide a more effective way to develop applications that are usable on various device platforms. By using JavaScript and its libraries such as jQuery or Sencha Touch, developers can now write programs for mobile UI just once and run that application almost anywhere. Developers do not have to learn numerous, different platforms and frameworks, and do not have to redevelop their applications and port them to supported platforms. This advantage is not only developer oriented. Even users will benefit as they would not have to install the web application. They will always use the latest version of the application and they will not have to install updates from the online application store. Application deployers benefit by not having to worry about supporting users running on a different versions of the same application.

This paper will further explore and try to give best ways and practices for designing UI for mobile applications. It will also discuss issues relevant for native mobile application design, however the focus will be on cross-platform design. Due to the relative market share the thesis will focus on three most popular platforms: iOS, Android and Windows Phone.

2.2 Programming standards

Programming mobile applications in native code depends on the platform towards which they are focused as well as the terminals where these applications may be made to function. As I have mentioned in the previous section, the focus of this paper will be mainly on the most popular platforms: iOS, Android and Windows Phone. In iOS(the Apple platform) the native applications framework(group of programming libraries) is based on Objective C as a programming language. It is a default application language for Apples most consumed products iPhone and iPad. However, the application does not have to be programmed in Objective C in whole. The logic and the code behind can be even programmed with C++ but the UI part has to be programmed with Objective C.

Java programming language is commonly used for Android applications, although using Java Virtual Machine we are able to use other languages as well, in particular C++ or Jython(Java Phython). [14] By using the latest Android NDK we are able to implement parts of the application using native-code languages such as C and C++. Windows Phone chose .NET platform which theoretically is a Multilanguage platform, where developers mostly use C# as well as C++ for its choice in building mobile applications.

To conclude, different vendors prefer different programming language. However unlike in the field of UI, programming is pretty much standardized and till now all the major mobile platforms have included different language options in their SDKs in order to increase their developers base and in the end popularize its platform at the end users. After analyzing the platforms, programming language capacities as well as my possibilities and preferences I have decided to use C++ as my programming choice and have used it for developing the application which is further explained in the coming chapters.

3.0 Methodology

This section will contain a list and description of all tools, terminology and design principles that were used throughout my research and that are relevant for understanding this paper properly. They are just briefly discussed in the amount that is required for successful understanding of the results of my findings.

Throughout this chapter the main focus will be on the technologies that have been used in developing the thesis application. It includes Hypertext Markup Language (HTML) which is the main markup language used for displaying web pages and other information that can be displayed in a web browser. With its fifth revision (HTML5) developers are now provided with some useful additional tools such as: Offline Web Storage, GeoLoaction API, Canvas drawing and may more. It is standardized by the W3C.

Besides the HTML, thesis will discuss about JavaScript and C++ programming language in the amount which is needed for understanding thesis application described in the following chapter. JavaScript is a scripting language implemented as part of the web browsers in order to enhance user interface and in this thesis it will have the same function, enriching the user interference within the application. On the other hand, C++ is one of the most popular programming languages and is implemented on a various hardware and software operating system platforms. Due to its efficiency many C++ applications are made in the field of application software, device drivers, embedded software, high performance client server applications and entertainment software. The thesis application is actually a version of client server application which uses C++ for its operating purposes and HTML and JavaScript for its user interface.

3.1 Tools and Environment

Apart from the mentioned technologies, in the thesis will also be given a short insight in tools and environment that were used in order to produce thesis application. Although it is not important for understanding this thesis work, it might be a useful information for those who are trying to develop some other applications using the same methodology as in this paper. It might help someone else in continuing or improving the work and digging it deeper after analyzing and understanding this thesis.

Different goals in the development resulted in different principles and design trade-offs between languages. As previously mentioned, The decision is to use C++ as a core programming language for the thesis application. Unlike Java where we have single inheritance, C++ allows a class to have several parents which in the end and due to the application requirements resulted in choosing C++ as preferred choice.

The application that was developed and presented in this paper is developed under Windows 7 environment using following tools:

1. Qt 4.8.2 for additional GUI

2. Visual Studio 2010 for development of application source code in C++

3.2 Web programming

With the invention of the World Wide Web, the Internet gained tremendous popularity. This increased the volume of requests users made from various Web sites. It became obvious that the degree of interactivity between the user and the Web site would be crucial. The power of the Web is now not only in serving content to users but also in responding to user requests and generating Web content dynamically.

The Web uses a client-server model: browser (the client) makes a request of a web server. Most of these requests are simple requests like those for documents, images or some data which server delivers to the browser for display.

However, [7] sometimes we want the server to do more than just displaying the contents of a file. We would like to do something with a server-side program. This "something" can be reading or sending e-mail, looking up for phone number in a database or ordering a book online. This means that the browser must be able to send information to the server, and the server must be able to use that information and return the result to the user. During this interaction, the web server and the client communicate through the HTTP (Hyper-Text Transfer Protocol) which is a platform-independent protocol for transferring requests and files that answer those requests over the Internet.

[6] HTTP defines several request types (also known as request methods), each with its differences. The two most common are get and post. These request types retrieve and send client form data from and to a Web server. A form is an XHTML element that may contain text fields, radio buttons, check boxes and other graphical user interface components that allow user to enter and submit data into a Web page. These forms can also contain hidden fields, which are not exposed as GUI components. They are just used to pass additional data not specified by the user to the form handler on the Web server.

Unlike HTTP, CGI (Common Gateway Interface) is a standard protocol for enabling applications (commonly called CGI programs or CGI scripts) to interact with Web servers and (indirectly) with clients (e.g. Web browsers). CGI is a standard for external gateway programs to interface with information servers such as HTTP servers. A plain HTML document is static, which means it exists in a constant state: a text file that does not change. A CGI program, on the other hand, is executed in real-time, so that it can output dynamic information.

3.3 HTML5

HTML is a Hyper-Text Markup Language for creating Web content. Unlike procedural programming languages such as C, Fortran, Cobol and Visual Basic, HTML is a markup language that specifies the format of text that is displayed in a Web browser.

HTML started a long time ago. Its first draft on internet was way back in 1993 and after realizing its potential, the World Wide Web Consortium (W3C) upgraded it incrementally to a version 4.0 and set it as a standardized web language in 1999. At that time, HTML was primitive and tools were unavailable. Web applications barely existed except few primitive text-processing scripts. Pages were coded by hand in a basic text editor. They were updated rarely, every few weeks or months.

However, as the internet world rapidly developed, HTML due to its limitations was considered a dead-end and the world started to shift to XML or XHTML. Despite, HTML refused to die and most of the web applications were still developed with HTML. Due to its shortcomings, the idea of improving HTML developed. Wanting to improve this web platform further and to take it to a new level, the group of people within W3C created a HTML5 specification in 2004. In 2008, they developed a first working draft for HTML5.

Today, HTML5 is a language still under development but major browser vendors are excitedly implementing its new features. Browser feedbacks are analyzed and they improve the specification. In the following sections and chapters I will give an insight in how it solves some very practical problems. For now just think of plugins. HTML5 provides a native support for many features that used to be possible only with some plugins or with complex code. For example, Flash plugin is mostly blocked by some browsers and Apple products even do not support it. Developers have tried lots of things to make their applications richer, more interactive so they used various plugins, from ActiveX controls to Flash. HTML5 now gives us new features that almost completely eliminate these third-party technologies.

This new version of HTML is very interesting topic about which one can write without stopping. However, the thesis writing will now focus on the part of HTML5 which is actually related to the thesis application. With HTML5 we now have new tags and elements, but those which I intend to describe are related to forms. In case that the reader is interested more about other elements, structures and features of HTML5 he can find lots of documentation on the web as well as in the various books listed in my references.

3.3.1 HTML5 Forms

[6] When browsing Web sites, users often need to provide information such as e-mail addresses, search keywords or zip codes. HTML provides a mechanism, called a form, for collecting such user information.

Data that user enter on a Web page normally is sent to a Web server that provides access to a site's resources (e.g., HTML documents or images). These resources are located either on the same machine as the Web server or on a machine that the Web server can access through the network. When a browser requests a Web page or file that is located on a server, the server processes the request and returns the requested resource. A request contains the name and the path of the desired resource and the method of communication. HTML documents use the HTTP.

[6] HTML form sends the form data to the Web server, which passes the form data to a CGI (Common Gateway Interface) script (i.e. program) written in C++, C, Perl or some other language. The script processes the data received from the Web server and typically returns information to the Web server. The web server then sends the information in the form of an HTML document to the Web browser.

If the reader ever designed or write a complicated user interface, he knows how limiting the basic HTML form controls are. The developer could use text fields, select menus, radio buttons, check boxes and sometimes multiple select which was so complicated that the developer had to write a manual in order to explain clients how to use it. In case that the developer wanted something more like for example date and time picker or a slider, he would have to use a combination of HTML, CSS and JavaScript which in the end resulted with a spaghetti code and was a nightmare for every developer especially in the part of maintenance or not to mention changing it.

Today, HTML5 gives us better user interface controls. With its integrated form controls we are now able to add sliders, calendars, color pickers with an ease. It enhances the classic form that has been in HTML for last 20 years with a bunch of new form types. Most of these are variations of the classic <input type="text"> tag. These new form types provide us with more flexibility in the types of input a form can take, and the interface it provides.

For example, on a mobile device, changing the input type within form will also result that the device put up a custom keyboard to enable the user to enter the right kind of data. If type is set to number, the device will automatically put up a numeric keyboard. In case that type is set to email, the keyboard will beside the normal alphabet include some additional symbols or special characters mostly used in email addresses like @ sign.

Forms can contain visual and non-visual components. Visual components include clickable buttons and other graphical user interface components with which users interact. Non-visual components, called hidden inputs, store any data that the document author specifies, such as e-mail addresses and HTML document file names that act as links.

If you as a reader ask yourself what is so important in forms that we have to talk about them and why are they so interested, I will give you a short answer now and as you read more you will notice its importance. All of us were faced up with some applications on the web that had to be filled with some necessary (or not) data, either as a job application, newsletter signup or even email login. All of them work on the same principle - HTML form. Forms have been the backbone of the explosion of the Web. Without form controls, web business transactions, social discussions and efficient searches would simply be impossible.

There are various form designs. Some of them are more demanding and with more requirements, some or not. However, most of them usually ask for name, a contact email address, date of birth or gender. These are also field which are HTML control elements. I will now give a short intro in some of them, mostly in the new ones which came as an upgrade in the new HTML5. In case you are not familiar with the basics of form usage, I recommend any of the numerous books and tutorials on creating and handling form values otherwise, if you are familiar, you will be happy to know that:

a) Forms are still encapsulated within <form> element.

b) Forms still send values of the controls to the server when the user submits the page

c) All of the familiar form controls - text fields, check boxes, radio buttons, etc..- are still present in HTML5 and work as before

d) Form controls are still fully scriptable so the developers are able to write their own modifiers or event handlers.

In order to create a HTML form, a <form> tag is used. The form tag can also contain various attributes such as method or action. Using method = "post" appends form data to the browser request, which contains the protocol and the requested resource's URL. This URL is specified within the action attribute. Scripts located on the Web server's computer can access the form data send as part of the request. For example, a script may take the form information and perform some operations like update of information (e.g. mailing list).

In the following figure is displayed the basic HTML code for creating form that does a POST request. Within I have wrapped a text field, label and submit button which were all already part of the HTML. Labels are essential when creating accessible forms. The for attribute of the label references the id of its associated form element. The ordered list <ol> is used just for displaying elements in a nice order. For that we can also use tables or even div structures.

<form method="POST" action="/verify.cgi">

<fieldset>

<legend>Form Example</legend>

<ol>

<li>

<label for="name">Name</label>

<input type="text" name="name" id="name">

</li>

<li>

<input type="submit" value="Submit">

</li>

</ol>

</fieldset>

</form>

Figure 3 Example of a basic HTML form. Left part contains HTML code, right part is HTML user interface.

HTML form can consist of various HTML elements. The most important form element is the <input> element. It is used to select user information. An <input> element can vary in many ways, depending on the type attribute. It can be of type text-field, checkbox, password, radio button, submit button and more. Besides, an <input> element we have other elements which are also used a lot. Examples are label, buttons, textarea and even select list. However, starting with HTML5 we have some additional controls that make developers life easier and that I will cover on the following pages.

First element from the new set of user interface controls provided by HTML5 that I intend to cover and do have in my thesis application is slider. Sliders are mainly used to let users decrease or increase a numerical value and could be a great way to quickly allow users to both visualize and modify a value for some property. In order to implement it, we use the range type.

<label for="temperature">Set room temperature</label>

<input type="range" id="temperature" min="10" max="30">

Figure 4 HTML5 form element of type range - Slider. Example shows both HTML5 code implementation and its corresponding user interface.

By setting the min and max attribute values, developer can set constraints on a numerical picker for in this case room temperature. By this, the slider can operate only within the set boundaries. On the previous example, the values are from 10(min) to 30(max). Unfortunately, as one can probably see, the slider comes without a numerical representation in browser. That is why it is practically impossible for the user to know what is the current selected value. However, to fix this we can use a JavaScript handler "onchange" and implement a short script within HTML document.

Next, new and very useful user interface control is spinbox. We all use numbers a lot, and although typing numbers is very simple, spinboxes make minor numerical adjustments easier. Spinbox is user interface control with arrows that increment or decrement value in the box. In order to implement it we use number type. We can even set the minimal and maximal spinbox value by using the min and max attributes within its declaration. Also, one can control the size of the increment or decrement step by giving a value to the step parameter. The default value is 1 but can be any numerical value.

<label for="pressure">Set pressure</label>

<input type="number" id="pressure" min="10" max="30" step="0.10" value="20">

Figure 5 HTML5 form element of type number - SpinBox. Example includes both HTML5 code and its corresponding user interface.

Recording dates is pretty important task and the crew that developed HTML5 noticed it. We all have seen web applications that require from user to enter a date for flight, concert ticket or job appointment. As they are complicated to enter in a correct format, developers had to use complex JavaScript codes or widgets, some of them even plugins. <input type="date"> solves the problem. Here is the example of its implementation.

<label for="dob">Date of Birth:</label>

<input type="date" id="dob" name="dob" value="2012-12-12">

Figure 6 HTML5 form element of type date - DatePicker. Figure gives insight in both HTML5 code as well as its user interface.

Additional form elements which are covered in my thesis work and come along with HTML5 are listed in the following table.

Type

Purpose

Color

Color selector represented either with wheel or picker

Datetime

Full date and time display, with time zones

Datetime-local

Date and time display

Time

Time selector

Week

Selector for week

Month

Selector for month

Email

Input field for email; triggers customized keyboard on mobile devices

Url

Input field for url; triggers customized keyboard on mobile devices

Tel

Input field for telephone; triggers customized keyboard

Search

Same input field as text, difference in style

Table 1: List of all new form elements in the enhanced version of HTML - HTML5.

Besides the listed elements, HTML5 brought us some new attributes that one can use in order to make user interface richer and more user-friendly oriented. In the following table, I will just briefly mention some of them, however, they have significant value and contribute for more user-friendly interface.

Attribute

Purpose

Autofocus

The element gets the input focus immediately when the page loads.

Autocomplete

Tells the browser or application whether or not the value for this input should be saved for future.

Placeholder

Gives input control an easy way to provide descriptive, alternate hint text which is shown only when the user has not yet entered any values.

Required

The value must be set if the form is to be submitted.

Multiple

Allows users to select multiple files or email addresses.

Pattern

Allows to set a custom regular expression that the input must match.

Min & Max

Sets constraints on a numerical values.

Step

Sets the granularity of increments or decrements in value as the range is adjusted.

Datalist

Acts as a select list, where user can choose one of the options.

ValueAsNumber

Converts a value of a control from text to number and reverse.

Table 2: List of all new form element attributes in HTML5.

3.4 Document Object Model (DOM)

The Document Object Model (DOM) is a cross-platform and language-independent interface that allows programs and scripts to dynamically access and update the content, structure and style of a document. DOM is a W3C standard and defines a standard for accessing HTML and XML documents. We have three types of DOM:

a) XML DOM - standard model for XML documents

b) HTML DOM - standard model for HTML documents

c) Core DOM - standard model for any structured document

The thesis and its application will focus mainly on HTML DOM. It defines the objects and properties for all HTML elements, and the methods to access them. HTML DOM takes everything inside the HTML document as a node. This means that:

- The entire document is a document node

- Every HTML element is an element node

- The text inside elements are nodes

- Every attribute is an attribute node

HTML DOM views HTML document as tree structure, called a Node Tree. All nodes in the tree can be accessed by JavaScript. All HTML elements(nodes) can be modified, and nodes can be created or deleted. The following figure gives us an insight in how one node tree of HTML document looks like.

Figure 7 Node Tree of HTML document.

Within HTML DOM, the thesis will concentrate on Document Object Model (DOM) events. These events allow event-driven programming languages like JavaScript to register various event handlers/listeners on the element nodes inside HTML. A JavaScript can be executed when an event occurs, for example, when a user clicks on a HTML element - button. To execute code when a user clicks on an element just add JavaScript code to an HTML event attribute "onclick". Some of the examples of HTML events are:

a) User clicks on the element

b) When page has loaded

c) When image has loaded

d) When mouse moves over an element

e) When an input field is changed

f) When an HTML form is submitted

g) When a user hits a key

There is a huge collection of events that can be generated by most element nodes, however the thesis and the application will cover mostly HTML form events. The events can be clustered into the following groups:

a) Mouse events

b) Keyboard events

c) HTML frame events

d) HTML form events

e) User interface events

f) Mutation events

To assign events to HTML form elements we should use the following event attributes which are listed in the following table.

Event

Purpose

onclick

Triggers when the user clicks on the element

onchange

The event triggers when the content of a form element, the selection or the checked state have changed ( for <input>, <select> and <textarea>)

onselect

The event occurs when a user selects some text (for <input> and <textarea>)

onsubmit

Triggers when a form is submited

onreset

Triggers when the form is reset

onfocus

The event occurs when an element gets focus

onblur

The event happens when a form element loses focus

Table 3: List of DOM Events associated with HTML forms.

3.5 JavaScript

JavaScript is a scripting language that is used in order to enhance the user interface within the application. However, it is a complex language and demands its own book. This thesis will not go deeper into details with JavaScript, instead it will cover the amount required for a successfully understanding of the thesis paper and the application. Those interested in this language and its capabilities have numerous books and tutorials on the web to read.

As this thesis is about User Interface development, I have developed a small JavaScript example application which uses all the previously mentioned technologies: HTML5 form, DOM and JavaScript. This application will give an insight in how is it all connected and how JavaScript enhances the user interface on the fly. First of all, we need to have a small HTML document with some basic elements like on the following figure.

<!DOCTYPE html>

<html>

<head><title>JavaScript Function - Test</title></head>

<body><button type="button" id="dugme" onClick="addForm()" value="0">Add form!</button>

<div id="forma"> </div>

</body>

</html>

Figure 8 HTML File with DOM Event associated with HTML Button element.

In the HTML document we have just one button on which is displayed "Click me" and beside its descriptive attributes, it also contains a DOM event of type "onClick". This means that after the user clicks the button element, the event will trigger the addForm() function and perform some operations. In the following figure is presented addForm() function.

<script>

function addForm()

{

element=document.getElementById('dugme')

if (element.value.match("0"))

{

element.value="1";

element.innerHTML="Remove form!";

formica = document.getElementById("forma");

var para1 = document.createElement("label");

para1.innerHTML="Username: ";

var para2 = document.createElement("input");

para2.type='text';

para2.name='username';

para2.id='username';

para2.addEventListener('change', function(){alert('onChange - Event listener activated');}, false)

var para3 = document.createElement("br");

var para4 = document.createElement("label");

para4.innerHTML="Password: ";

var para5 = document.createElement("input");

para5.type='text';

para5.name='password';

para5.id='password';

formica.appendChild(para1)

formica.appendChild(para2);

formica.appendChild(para3);

formica.appendChild(para4);

formica.appendChild(para5);

}

else

{

element.value="0";

element.innerHTML = "Add form!";

document.getElementById("forma").innerHTML=" ";

}

}

</script>

Figure 9 JavaScript Code example

The addForm() function is a simple JavaScript function which creates a small HTML form with four elements: two labels and two text fields. After creation of elements and its attributes, this small form is inserted within div with id="forma". The result of this operation is presented on the following figure.

Figure 10 User interface generation using JavaScript and HTML

The display text on the button also changes, and after clicking again we remove the created form from the div. This is a small example which gives us an insight in how JavaScript can enhance user interface and/or perform some client-side operations like validation, checking, matching, etc.. In the previous example, one can also see how is another event listener added to a newly formed form attribute, in this case it is "onChange" event which triggers every time a content of a form element is changed.

3.6 C++

C++ is a general-purpose programming language and is considered as an intermediate-level language as it combines both low-level and high-level language features. It is developed as an enhancement to the C programming language this firstly included classes, then virtual functions, operator overloading, multiple inheritance, exception handling and many more features.

Today, it is one of the most popular programming languages and as an efficient compiler to native code, we have various applications in the domain of system software, application software, device drivers, high-performance client-server applications and embedded software.

C++ supports an object-oriented design (OOD) approach which makes software development faster, with less errors and the code is reusable. With this approach, it is possible to create a real life objects as a objects in code where we have objects as classes and real life object attributes as our class object properties. OOD uses inheritance relationships, where new object classes are derived by reusing properties of existing classes and adding unique properties of their own. The thesis application also uses OOD approach and fully implements all HTML5 form elements as a class objects and its attributes as a object properties. More about the thesis application and its C++ implementation is presented in the following chapters.

5.0 Discussion

In this section of the thesis the discussion will be on the methodology and approach used for the thesis as well as on the thesis application itself. Parts that will be discussed are the following:

a) Cross platform framework

b) Object oriented approach to the thesis C++ Library

c) HTML5 as UI

As previously stated, building a mobile app that runs on more than one platform, with minimal code changes, is a challenging task. With diversity of mobile platforms like iOS, Android, Blackberry, Symbian, Windows Phone 7 and many more, developers all around the world cope with incredible challenge in order to design and develop mobile applications that would run on all this platforms. In order to cope with this challenge, one should develop the application using a combination of HTML5, JavaScript and usually some extra libraries and then wrapping it all in a relatively thin native-code wrapper.

5.1 Cross platform framework

In last two years, having a mobile application shifted from "nice to have" to "must to have" for businesses of all sizes. However, the most recent trend is having an application that supports multiple mobile platforms. Developing for all of these platforms is a challenge, especially for the developer or business with limited resources. Fortunately, there is a solution to this problem and it is the cross platform mobile framework.

Figure 11 PhoneGap cross-platform framework [15][15] Cross-platform framework includes development frameworks like Appcelerator's Titanium or PhoneGap. They all help in that they limit the work that a developer or development team has to put in to creating applications for iOS, Android, BlackBerry or Windows Phone.

As with any development strategy, there are advantages and disadvantages to taking a cross-platform approach to mobile application design and development.

5.1.1 Advantages

The purpose of most cross platform frameworks is to limit resources as well as development time by having users write their code in one language that can easily be compiled to multiple platforms. To do this, most frameworks allows users to write applications in dynamic programming language like JavaScript instead of Objective-C or Java.

The advantages of using a cross-platform framework and building a cross-platform applications are:

a) Code is reusable - means that instead of having to write the specific function or process for each platform, a developer just has to write code once and reuse it in later projects or on other platforms.

b) Plugins - Most cross platform development frameworks offer easy access to plugins and modules that can easily integrate with other services and tools. [20]

c) Easy for Web Developers - Most cross-platform frameworks are dynamic and simple for web developers to use as many of them support HTML5 and CSS3. [20]

d) Reduced development costs - Is perhaps the biggest advantage because it allows companies and brands to get an application onto other platforms without having to invest in a separate developer or team. [20]

e) Support for Enterprise and Cloud Services - In addition to plugins and modules for specific functions, most frameworks also have the option to directly integrate with cloud services. [20]

f) Easy Deployment - Deploying and compiling applications is much faster in a cross-platform scenario. This is especially true with many of the new cloud-based build tools that various frameworks are starting to push out. [20]

5.1.2 Disadvantages

a) Unsupported features - there is always a chance that some feature of an operating system may not be supported by the framework that one is using. If the OS vendor adds a new feature in it then the framework will also require an update to support these changes. [20]

b) Restricted use of personal tools - Frameworks have their own development tools that they want the developers to use which results in that developers have to accustom to something new, unfamiliar or even uncomfortable. [20]

c) Slow performance - One of the major disadvantages with cross-platform frameworks is that sometimes the applications developed on them might not run as fast as expected. [20]

d) Limited support for 3D and high quality graphics - Often the cross-platform frameworks do not offer support for high quality graphics and 3D graphics. [20]

5.2 OO approach to thesis C++Library

One of the problems when coding in C++ is how best to generate HTML. Although some may not see that as a problem, but mixing code and markup is never a good idea and certainly is not pretty. Pretty code is clear and clear code means easy to read, easy to understand, easy to modify and last but not least important - easy to debug.

String button = "<button name =\"my_button\" style=\"width: 100px;\">My Button</button>"

Cout << button;C++ code can contain a mixture of C++ and HTML. So for example one can write:

Figure 12 Unefficient mixture of C++ and HTML

This small example does not look so bad, however what happens when developer needs to make more complex HTML pages with different user interface controls and their attributes. The code suddenly does not look so pretty at all. The resulting code is almost difficult to read, debug and maintain. The basic idea though is to threat markup (HTML) as a language that creates objects. The best examples of this idea are in Flash and .NET where XAML is used as object instantiation and initialization language.

A common way for programming languages to generate their user interfaces is to create objects for each type of user interface control that can be used. For example, if one wants to create an HTML button, he should first create a Button class complete with a range of properties corresponding to the attributes of a button. For example, a class for UI control button in C++ thesis library which uses object oriented approach is shown on the following figure.

Figure 13 Object Oriented way of implementing HTML in C++

#include "button.h"

Button::Button(string name, string text) : DOMEvents()

{

setName(name);

this->defaultText = text;

startTag = "<button ";

endTag = "</button>";

}

string Button::getHTMLString()

{

string attributes="";

string space="\t";

map<string, string>::iterator iter;

for( iter = attribute_list.begin(); iter != attribute_list.end(); iter++ )

{

attributes += iter->first + "=\"" + iter->second + "\"" + space;

}

string htmlString = startTag + attributes + " >" + this->defaultText + endTag;

return htmlString;

}

At this point, one might think that this is not an improvement and that the HTML string form is still needed and will be true. However, the advantage of this approach is not in the creation of the class, it is in its use. For example, once a Button class is created, it is easy to create as many buttons as one wants without any sign of HTML mixed with the rest of the C++ code. To create a button in HTML, it is enough to simply create an instance of the button class. The example is shown on the following figure.

Button *button = new Button(name, text);

Figure 14 OO way to instantiate HTML button class object

In this case, the button attributes were defined within the constructor but in other classes within C++ thesis library, there exist numerous functions for setting up the UI contol attributes. Also, as one can notice, the Button class derives from the DOMEvents class which defines all the DOM events for the specified user interface control such as onClick. To implement onClick method, one should just use the follwing code which is very convenient.

Button.onClick("mainwindow.submit()");

Figure 15 OO approach for assigning DOM event to HTML button user interface control

Finally, when the button is created and when is ready to be a part of the HTML page and rendered within some web viewer, all what is necessary to do is to call getHTMLString() method like it is shown on the following figure.

Cout << button.getHTMLString();

Figure 16 Retrieving generated HTML code for a button user interface control

The point is if there exists a suitable library of HTML classes then one can write applications and form user interface without mixing HTML and a chosen programming language, in this case C++. Also, there is no visible HTML text anywhere in the part of the program one is writting. If this object oriented approach is addopted, the generation of the HTML pages with HTML form elements will be much simpler to understand and maintain.

Generating quality HTML form pages and neatly structured user interfaces may not be the main role for any application use, however it definitly affects on the applications overall standing and user experience. Having a library which enables object-oriented way of generating HTML form elements definitly makes a life easier for most developers.

5.3 HTML5 as UI

HTML5 is a brand new verion of HTML although it is not finished yet. It makes the web a first-class environement for creating real applications. [12] HTML5 reinforces JavaScript's existing toolset with key extensions to the browser APIs that make it easier to create applications that feel complete, not just views on some distant server process.

As the number of mobile applications continualy increases, more and more developers start to use HTML5, JavaScript and CSS3 to create a web or native mobile applications. [21] This process is very usefull when dealing with cross-platform developement or when working with some content that already exists in some form on the web.

[22] HTML5 gives us better user interface controls. For ages we were forced to use JavaScript or CSS to construct sliders, calendar date pickers or color pickers. These are all defined as real elements in HTML5 along other user interface controls like: drop-down lists, checkboxes or radio buttons. Although these element are not fully supported in every browser, it is still something on what a common developer should keep an eye on especially when developing a web-based application. In addition to improved usability without reliance on JavaScript libraries, there is another benefit and it is improved accessability. Meaning that screen readers and other browsers can implement these user interface controls in specific ways so that they work easily consume the content.

[23] Due to usability purpose the web sites made by developers are highly interactive nowadays and for this developers need to include fluid animations, stream video or play music. Till now they have only the option to integrate it with the help of Flash or Silverlight, Flex or javascript like tools. But these consume so much time to develop and even the complexity of web application also increased. But now with the help of HTML5 it is possible to embed video and audio, high quality drawings, charts and animation and many other rich content without using any plugins and third party programmas as the functionality is built into the browser.

Besides all the mentioned benefits of using HTML5 as a user interface, there are also some disadvantages in its use. One of the main problem with HTML5 acceptance by the developers is the fact that only the modern browsers support it. Different browser vendors implement HTML5 in a different way and with a diffrent amount of integrated user interface contols. This results in not so full support for most of the elements, however one should have in mind that HTML5 is still in development phase and will have to be fully integrated at the end. Even if it happens, the majority of people will still use older versions of some browsers.

Another problem is that although parts of the language are very stable, the language itself is considered a work in progress which means that any of the elements chould change at any time. However, it is encouraging to know that a major part of the language is stable and will not be changed. Disadvantage of using HTML5 as user interface is also the fact that rich media has to be compressed in multiple formats in order to be compatible with most browsers. This needs some more work but at the end all the issues will be resolved.

6.0 Conclusion

Even though this thesis paper does not present a ground breaking discovery it gives a new view on the concept of building a cross-platform that is used in today's application development. The initial goal of using HTML5 as a standard for user interface development proved to be a good solution despit its current shortcommings. Having a mobile application that is developed once and is able to be deployed to all HTML5-compliant devices, including the desktop, is showed to be a good idea and for cost reasons alone this is a huge advantage especially if one needs to build several applications. Besides, HTML5 development is also easier to learn which in the end results with a bigger database of experienced developers.

Implementing HTML5 form elements using the object oriented approach in C++ resulted in having a useful and developer-oriented library of various user interface controls which besides enabling a developer to create a cross-platform form application, enhances the end user experience. Well proven object oriented concepts once more demonstrated true power of their design possibilities. Having an object oriented library of different HTML5 form elements significantly reduces mixing the programming code with a markup language and in the end makes it easier for developer to read, understand, modify and most important debug the end code.

Despite the fact that developing the native code user interface returns a bit faster applications, having a mobile application that runs on multiple mobile platforms without major problems pays out in the end more. This in turn reduces the overall development costs as well as the required time costs. Although HTML5 is a language still under development, it siginificantly reduces the amount of time a developer needs to create a full-featured applications user interface.

7.0 Future Work

Despite the fact that the current version of thesis C++ library contains an object oriented implementation of all up to date HTML5 form elements, this language is still under development and based on some prediction will be fully finished till 2022. This gives much more space and time for the W3C to implement an additional user interface controls based on browser vendor requests. In the end that means that the current version of thesis C++ library will for sure have to be upgraded at least with some additional attributes if not for additional elements.

Also what is important to mention is that at the moment of writing this thesis, major browsers and web viewers do not fully support HTML5 form elements. Till now, only Internet Explorer 9, Opera and Google Chrome implemented most of the HTML5 markup. It is expected that the rest of the major browser vendors integrate the HTML5 language and support the enhanced version of this markup.

For the future work, one should have to keep an eye on the future work of a W3C which defines a specification for the HTML5.