Free Online Courses for Software Developers - MrBool
× Please, log in to give us a feedback. Click here to login

You must be logged to download. Click here to login


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation


MrBool is totally free and you can help us to help the Developers Community around the world

Yes, I'd like to help the MrBool and the Developers Community before download

No, I'd like to download without make the donation

How to develop Mobile applications with HTML5 and JavaScript templates

The article will explain some of the vital concepts and attributes that involves HTML5 that would lead to setting up of the platform for future mobile as well as web development projects. We will also discuss about the JavaScript templates.

HTML5: The need of the hour

HTML5 is a buzz these days and is used in several of the developments going around in web, desktop and mobile applications. With the new web standards in place nowadays, there are some of them that allow the features to be handled by some of the most popular programming languages such as HTML, CSS and JavaScript.

Browser Compatibility

The most important thing that needs to be followed while using any programming language is that it should support all the available browsers available. The good thing is it is not much of an issue as far as the mobile world is concerned. One should test the application on real devices and not just the simulators.


When a website is visited that is not designed for the mobile browsers, the first impression that appears is the zoomed out feature. This is done so as to make the website viewable. Based on the browser, the default viewport width is set between 800 and 980 pixels. This permits the end user to view the entire website and then accordingly the zoom can be done. In case, the website is created especially for mobile devices, the recommendation would be to set the initial viewport. This is achieved via the viewport meta tag.

<meta name="viewport" content = "width=device-width”>

This makes the viewport to the device’s width thereby making the content does not appear as zoomed out initially. One would require disabling the zooming completely, hence the user doesn’t intentionally zoom out and hamper the User Interface. This has to be done by setting user-scalable to no.

<meta name="viewport" content = "width=device-width ,  user-scalable=no">

There are some websites that currently deploy the width of the viewport to 320. This is for the reason that this number is the width of the iPhone. But in general if we talk, it would be a better approach to make use of “device-width” instead of 320.

Features of HTML 5

Figure 1: Features of HTML 5

The two features of HTML5, caching with the cache manifest and local storage permits for entirely functional offline sites.

HTML5 Caching

HTML5 caching permits the users to see the websites that have been visited by them before and that too without a connection to the web. This is not just beneficial for the users that may face issues with the coverage but it can also help in resolving the coverage issues.

In order to set up the HTML5 caching, the need is to add a manifest file to the html tag of every page for which the cache needs to be done.

<html manifest="/cache.manifest">

The file begins with “CACHE MANIFEST” and then specifies the files that should be cached by the application.



These files will be available offline now. The list of gotchas is not small with the cache manifest. Let us review some of the key ones.

First, the site of yours will be default to cached files over recently downloaded ones. This means that even if there is an alteration in the cache from the time the user has last visited the page in the browser, there will be old pages displayed by the browser. This will continue until and unless the page is not refreshed or the JavaScript is given the directions to update.

Another complex and big gotcha is the process to manage the process of downloading by the browser. Every single file is re-downloaded in case the browser identifies that there is a change in the altered. It actually makes the process expensive and in case even a single file fails to correctly download, the update will be suspended by the browser. It will now load the earlier cache. There will be no error that will be posted by default in such situation. But one can make use of JavaScript to identify the error thrown by the manifest.

$(function() {
$(window.applicationCache).bind("error", function() {
alert("Cache: update failed");

jQuery Templates

JavaScript templates are considered to be the best means to populate the content. This way, the content will no longer be a part of the HTML page. This will stop it to get cached with the cache manifest. It will be required to download and add jQuery and the jQuery template plugin to application you are using.

The steps to use these templates are:

  1. Define the template.
  2. Define the collection.
  3. Tell jQuery to populate to the page with the template.

Let us see an illustration for a simple blog application.

Listing 1: Define the template:

<script id="post_template" type="text/html”>





Listing 2: Define the collection

var posts = [
{ Name: "First!", Body: "This is pretty cool" },
{ Name: "Another post", Body: "This is pretty cool" },
{ Name: "Yet another blog post", Body: "This is pretty cool" }];

Listing 3:Tell jQueryto populate to the page with the template.

$( "#post_template" ).tmpl( posts ).appendTo( "#blog_posts" );



<div id="blog_posts"></div>


Though we have this content loaded via JavaScript however it is not dynamic. It is just defined on the page. For dynamic content, one would require to make use of the JSON that is provided by the server. Let us make an assumption that our blog application provides us with the JSON representation of our blog at the following URL:


The next step would be to inform the jQueryto make a request for the JSON and then make use of it to populate the page.

<script type="text/javascript">
$.getJSON('/posts.json', function(data) {
$( "#post_template" ).tmpl( data ).appendTo( "#blog_posts" );

There is also a need to alter the template thereby enabling it to manage the JSON elements, substituting for Name and post.body for Post:

<script id="post_template" type="text/html">

Executing all this will make our blog to fetch the content that is that is not cached in the cache manifest. This will be making use of jQuery templates to populate the page. But make sure the mobile browser can connect to our server else it will not work fine. Though this gives an impression of like two steps forward and three steps back, but doing all this, we are almost landed up with a working mobile HTML5 app. There will be a need to include one last component of HTML5 that is known as Local Storage.

Local Storage

Talking in brief about the Local Storage, it is nothing but a client-side key-value store that is been implemented by the browser. The function of the same is to actually store strings of text locally and post doing this, making them recall at a later stage. We have used it here to store JSON thereby making us to populate the blog with posts even at the time when there is no connection to the server.

We will be making use of a plugin to manage the process for us. The jQuery Offline plugin deploys content from Local Storage during the time of unavailability of the server. This will actually store the new content in local storage as and when it’s received.

In order to make use of this plugin, we need to change the getJSON call to retrieveJSON. There will also be required to alter the script slightly for the reason that there is one key significant difference between getJSON and retrieveJSON. The retreiveJSON will be executed two times-first time to pull the content from the cache and then to retrieve the fresh content from the server. This will make the posts to be displayed twice in case we just append the new posts to the page.

<script type="text/javascript">
$.retrieveJSON('/posts.json', function(data) {
$( "#blog_posts" ).html($( "#post_template" ).tmpl( data ));



The article focussed on the technologies that is helping mobile development look easier via the help of HTML5 and JavaScript template.

Software Developer from India. I hold Master in Computer Applications Degree and is well versed with programming languages such as Java, .Net, C and C++ and possess good working knowledge on Mobile Platforms as well.

What did you think of this post?
To have full access to this post (or download the associated files) you must have MrBool Credits.

  See the prices for this post in Mr.Bool Credits System below:

Individually – in this case the price for this post is US$ 0,00 (Buy it now)
in this case you will buy only this video by paying the full price with no discount.

Package of 10 credits - in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download few videos. In this plan you will receive a discount of 50% in each video. Subscribe for this package!

Package of 50 credits – in this case the price for this post is US$ 0,00
This subscription is ideal if you want to download several videos. In this plan you will receive a discount of 83% in each video. Subscribe for this package!

> More info about MrBool Credits
You must be logged to download.

Click here to login