HTML 5 Tutorial » Tutorials

How HTML5 Aids Mobile Financial App Development

the Editor — Wed, 28 Mar 2012 18:59:59 +0000

HTML5 Series- Part 2: How HTML5 Aids Mobile Financial App Development

This is our second post in the HTML5 series. There are number of new tags in HTML5 that aid in the development of mobile financial apps. In this post, I aim to explain these new HTML5 tags and how they facilitate the building of fully functional financial apps with native user experience.

We partnered with our friends at OpenFin, to develop a HTML5-based mobile app. They developed a HTML5-based financial app (PNL tool) for the iPad. The app gets updated every five minutes and provides quotes for securities across multiple asset classes (stock, bonds, options and futures). The app was developed in 2 weeks flat. As they say, seeing is believing. To get a feel of how powerful HTML5 apps can be, download the app for free on your iPad.

The installation instructions and the download link for the HTML5 app are given below:

On your iPad, visit: https://pnlhd.openf.in/app/pnlhd.html.
Tap on the install button.
Follow the 3-step instructions to install the mobile app.

In my last post, I outlined why HTML5 is a good platform for developing mobile financial apps. The key advantages that HTML5 provides are summarized below:

HTML5-based financial apps work cross-platform and a single mobile app lets you support clients across all mobile platforms (you might need to optimize the mobile app to counter differences like screen sizes on different devices).
HTML5-based financial apps let you take control of mobile app support, enhancing reliability, as you don’t have to depend on the platform provider (Apple store) for support.
HTML5 mobile apps provide a very strong visualization interface that supports native user experience, making financial data far more intuitive.
HTML5 mobile apps can be instantly deployed and updated in real-time, allowing you to constantly add new features and differentiate from competitors.
HTML5 mobile apps are just as powerful as native apps, providing optimal performance required for financial apps.
HTML5-based financial apps are secure, if HTML5 specifications are used in conjunction with security best practices.

HTML5 Tags & How They Aid Financial App Development

This section explains the HTML5 features we used, how they were used and the advantages they provide.

HTML5, not HTML:

The first step is to inform the mobile browser that the financial app is HTML5-based, and not HTML-based. The way to do this is to include the HTML5 doctype.

The valid doctype for HTML5 is

PNL HD Financial-App

Unlocking storage

One of the biggest hurdles developers of financial apps face, is the limited storage space available for mobile apps. Financial apps need to store data for a multitude of reasons such as updating security quotes and news. It is often inefficient to store such data on a server. Fortunately, the HTML5 specifications contain a standard for local storage which is supported by browsers on all mobile platforms.

There are two types of storage available for the client code in HTML5, local storage and the SQL database:

Local Storage:

Local storage is a simple key-value store that supports only strings as both keys and values. Local storage can be manipulated using two basic operations, set and get, as shown below:

//To save an item into local storage
localStorage.setItem(key, value);

//To get an item from local storage
value = localStorage.getItem(key);

In our financial app, we used this to store application installation keys, session information and user preferences. It is limited in size to 5mb on iOS.

SQL Storage:

SQL storage is a light SQL database. It generally occupies 5Mb, but subject to user permissions, it can occupy up to 50Mb. We used this database to cache app data, dynamic image assets, and user preferences. It supports all of the CRUD operations.

Making the application work offline

For financial apps, functionality gets reduced if the user does not have a constant connection to the Internet. However, applications should not fail completely because the user is not connected to the Internet. Imagine financial apps not displaying your portfolio, just because the mobile app is offline.

The manifest enables financial apps to work in offline mode. It is very easy to use but you must make sure all static assets are listed in your app.manifest file and that the manifest is referenced in your .html file before the tag:

The assets listed in the manifest file must not exceed 5Mb in total.

There’s another advantage to this, and that is speed. As financial apps have to be functional even offline, the HTML, JavaScript and CSS are all cached. This ensures that the mobile app is as fast and powerful as a native app.

Using the canvas tag

Canvas is a very simple pixel-based drawing API, but if used the right way it provides scripts with a resolution-dependent bitmap canvas, which can be used for rendering graphs or other visual images on the fly.

To use the canvas tag, you’ll need two things:

A Canvas tag in the HTML to place the drawing canvas
JavaScript to do the drawing
// Checking that element is in the DOM and that the browser supports canvas if(drawingCanvas.getContext) { // Initialize a 2-dimensional drawing context var context = drawingCanvas.getContext(’2d’); //Canvas commands go here };

In the mobile app we developed, we needed to manipulate existing images (which were returned as a result of the web service calls). External images can be loaded using the drawImage method.

context.drawImage(imgObj, XPos, YPos, Width, Height);

After the image has been loaded, you can make manipulations like pixel manipulation and drawing text to the canvas, all of which make rendering of financial data more intuitive.

Making Financial Apps secure

Security is one of the top concerns that crops up when people think of HTML5 mobile apps. Below are the major security threats that HTML5-based financial apps face and best practices to counter these threats.

General Considerations:

Financial apps that are HTML5 standards compliant benefit from full browser security and sandbox.Therefore, they have limited and controlled access to local resources including other apps that are running on the same device. These limitations are valuable because it gives users the comfort that developers don’t have access to any of the proprietary information that resides on their device.

Malicious Code:

JSON (JavaScript Object Notation) is the preferred data transport in HTML5-based mobile apps because it is fast and very easy to use. Unfortunately, JSON also exposes you to running malicious code if the code somehow makes it into the data you are handling. It is critical to scrub all data that passes through an application and remove any code.

Cross Site Scripting (XSS):

Cross-Site Scripting is a danger for all mobile apps. XSS allows attackers to inject malicious code into client-side scripts. To eliminate this threat, you should limit the locations from which the financial app downloads content, and treat all incoming data as potentially malicious code.

Local Storage:

Threats related to use of the HTML5 local storage and database can be mitigated by encrypting the local database. In financial apps, all the data stored in the Local Storage and Database should be encrypted using an encryption library. Also, threats related to exploitation of the manifest file should be eliminated by using HTTPS.

I hope that the HTML5 blog series was able to convince you that HTML5 is a viable platform for quickly and efficiently developing financial apps. Please feel free to comment, I would love to hear you views on the same.

How to Build Financial Mobile Apps in Record Time

Please join Xignite and our panel of experts for a discussion on how financial services firms can quickly develop mobile apps to enhance customer engagement and marketing efforts. In this informative online seminar, our panel will offer unique insight into the business side of mobile app development, click the link above to register…

Developing Cross-Platform HTML5-based Financial Apps

the Editor — Thu, 08 Mar 2012 11:00:08 +0000

Six Advantages of Developing Cross-Platform HTML5-based Financial Apps: Part 1

With the advent of smartphones and tablets, there has been a marked change in how people connect to the Internet. Consumers can now connect to the Internet, anytime, anywhere. As a consequence, many new mobile apps are being developed, while a number of traditional desktop/laptop-based apps are gradually getting ported to mobile. Financial service organizations have been measured in their transition to mobile apps. (To learn more about the evolution of mobile financial apps read our recent post “The 3 Phase Evolution of Buy-side Mobile Apps). There are multiple advantages, which HTML5-based financial apps offer. In this blog post, I explore the top 6 advantages that HTML5 offers.

Advantage #1: One version of the financial app caters to clients across multiple platforms (iOS, Android, Blackberry, Windows etc).

HTML5 is a web-based, cross-platform specification. A de facto requirement for any modern mobile operating system is the inclusion of a HTML5-compliant web browser. All the leading mobile platforms use HTML5 as their base. This offers two distinct advantages:

If financial apps are developed on HTML5, there’s no need to develop individual versions for the various platforms. This saves resources, both in terms of time and money.
As HTML5 apps are web-based, they can be accessed via a mobile device, laptop or desktop. This ensures that clients are offered the same interface across all devices.

Advantage #2: HTML5-based financial apps provide 24-7 reliability.
Financial apps need 24-7 reliability.

There should never be a point in time, when a user can’t access the app.

The advantage HTML5-based financial apps provide in this regard is two-fold.

There is one centralized database, and if a problem arises, it can be tracked and resolved.
Also from a reliability point of view, HTML5-based financial apps lets you take care of the support yourself and not rely on the platform provider.

Advantage #3: HTML5-based financial apps provide a strong visual interface.

The new HTML5 specifications have a very strong charting interface. The best way to describe data in financial apps is by means of charts. HTML5 facilitates this need. The primary reason Internet usage has grown exponentially on smart phones and tablets, is the user experience these devices offer.

Charts and graphs are far more intuitive when viewed on mobile devices. HTML5-based financial apps offers features such as the ability to zoom in and out of charts or select particular data points by touching the screen, which is unique to mobile devices.

Advantage #4: HTML5 specifications let you employ an agile development process.

One of the primary problems with native apps is the approval process that platform providers have in place. The process can be tedious and time-consuming. The same issue arises when new features need to be added to financial apps. This kills any differentiation advantage you might get from being first-to-market.

HTML5 apps let you subvert both issues, as HTML5 apps are web-based and therefore require no approval.

Advantage #5: HTML5 specifications provide the functionality a financial app requires.

Native apps offer much more control over the device, but the difference is access to additional device features such as camera and additional memory. These features are nice to have, but enterprise apps, especially financial ones, generally don’t require access to these features.
Primary financial app use cases are requirements like updating price quotes, charting and pulling research and news. These can be handled efficiently in HTML5-based financial apps.

Advantage #6: HTML5-based financial apps are secure.

HTML5 is just a specification for rendering pages on the web. Thus it offers the same level of security, as any internet based application would. Apps that are standards compliant HTML5 applications benefit from the full browser security.

The major causes of concern in HTML5-based financial apps arise from using features such as cross-document messaging and clickjacking. Such features don’t add to the usability or power of financial apps and thus security is not a concern in using HTML5 for financial apps.

Now that I have outlined why HTML5 is an excellent platform for developing financial apps, in my next post I will provide step-by-step instructions on how we developed a HTML5-based financial app (P&L Tool) with our friends at OpenFin. This app will demonstrate the ease and speed with which a powerful HTML5-based financial app can be developed.

Working with HTML5 localStorage()

the Editor — Tue, 11 May 2010 09:41:40 +0000

HTML5 is fast approaching and getting wide spread usage. Most are familiar with the new tags like header, section and footer and everybody is aware of the new video tags thanks to Apple vs Adobe. However, there is a lot more to HTML5 those just those two aspects.

I want to focus on localStorage() this time. localStorage is a client-side key-value database, meaning it is stored in the users browser. This means the users data is saved on their machine inside their browser. This also means that their data is only available to them when on that machine and in that browser. Remember that localStorage is per browser not per computer.

Browser support is always a huge topic when discussing new html5 or even css3 aspects. This is due to such a wide spread of support from the big browsers right now. In the case of localStorage, it is supported by Safari 4+, Mobile Safari (iPhone/iPad), Firefox 3.5+, Internet Explorer 8+ and Chrome 4+. This only leaves out Opera who currently does not support this storage. Depending on your target audience browser support may be an issue for you.

HTML5 localStorage() is a four part series of articles where I will show you how to create a simple html5 time tracking web app using localStorage as the sole database. The series will walk you through the basics of localStorage to advanced techniques to leverage the power of this new html5 database. We won’t stop at just the functionality of the app but in part four we will cover styling the app with html5 and css3 to create an iPhone(ish) web app.

Here is a quick example of what the javascript looks like to access localStorage();

if (typeof(localStorage) == ‘undefined’ ) {
alert(‘Your browser does not support HTML5 localStorage. Try upgrading.’);
} else {
try {
localStorage.setItem(“name”, “Hello World!”); //saves to the database, “key”, “value”
} catch (e) {
if (e == QUOTA_EXCEEDED_ERR) {
alert(‘Quota exceeded!’); //data wasn’t successfully saved due to quota exceed so throw an error
}
}

document.write(localStorage.getItem(“name”)); //Hello World!
localStorage.removeItem(“name”); //deletes the matching item from the database
}

In the code snippet above we are doing several things including checking if your browser supports localStorage, saving a new item to the database, retrieving that item and displaying it and then removing the item. The above is your typical Hello World example but shows you just how easy it is to use. The time tracking app we will create will be storing a unique id as the key and joining multiple values into one string, as localStorage only supports storing of strings. I will be making the source code available at the end of each article along with the full source and the working app at the end of the series, which you can follow here.

” Written for HTML5Tutorial.net by James Fleeting, a web designer and developer obsessed with the future of the web working at Crane | West Advertising Agency in Wichita Falls, Texas. “

html5 monitoring

the Editor — Wed, 02 Sep 2009 17:44:04 +0000

Here is another impressive HTML5 example, while its not exactly advanced it does show demonstrate the raw power of HTML 5. This could also be used as a Windows Vista desktop widget or even for Windows 7 once it is released. This code could be changed to check the status of your domains. (Please test this out by disabling your internet connect either unplug your network cable, or go into “Work Offline” with your browser)

Please click “Read More” to see the full HTML5 code.

To render what you see above you will need the following code:
[stextbox id="alert" caption="Status monitoring" color="ffffff" ccolor="ffffff"]Network monitoring:

HTML5 Demo: online connectivity monitoring

Status Monitoring

Current network status: checking…

[/stextbox]

Drag and drop

the Editor — Wed, 02 Sep 2009 17:03:35 +0000

As we have mentioned in some of our previous articles & tutorials HTML 5 offers designers, developers and people in general a much richer experience, we are still just scraping the surface of the new markup, so today we are going to have a look at how to create a HTML 5 page that uses the new drag and drop feature. Note we are displaying this via an iframe so if your having any trouble viewing the demo please let us know, another reason it may not show will be due to your browser, this is working in the latest Firefox browser only at the moment..

Basic HTML 5 layout code:

HTML5 Drag and drop demonstration

Drag and drop HTML5 demo

there are many other variables that can be used also, we will coer this another day.

ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>

ondragstart=”return dragStart(event)”
ondragend=”return dragEnd(event)”>drag me

ondragenter=”return dragEnter(event)”
ondrop=”return dragDrop(event)”
ondragover=”return dragOver(event)”>

Example created by HTML Tutorials.

We will cover JavaScript in depth at a later date, for now copy and paste the code above and have a play around with it and see what you can come up with, this was more or less an example to demonstrate HTML5′s tremendous power.

Basic HTML 5 layout

the Editor — Wed, 02 Sep 2009 07:27:25 +0000

Today we are going to have a quick look into the layout of HTML 5, we have put together a very basic HTML 5 page so that you can get a rough idea of what to expect from the upcoming code.

(Example currently undergoing an update, sign up to our rss feed to be notified of it’s completion, it will be fantastic!)

As you can see it is a very basic page, however you will need to start from the bottom with HTML 5 as it varies quite a lot from the old HTML 4 code reference.

Currently the only browser to fully support HTML 5 reference code is Safari you can download it HERE.

Make sure you bookmark our website, we are in the process of putting together more HTML 5 tutorials.