HTML5 mobile app development basics for Nokia devices

Published on November 29, 2011

HTML5 mobile app development basics for Nokia devices

This post was in the " Smart phones for smart positions ".

HTML5 - a new technology that allows you to create applications of different levels of complexity Of course, not all mobile browsers support HTML5 in its entirety..
The new Nokia models support html5.

Online, offline and LocalStorage
most the best feature of HTML5 I think, is support for online and offline health, and of course LocalStorage.
Support offline. That is, you can run the application and use it without the need for an Internet connection.
Now we will consider one of the important tools when creating applications - AppCache. AppCache allows you to store information locally on the device, and disconnects in the connection will not affect the performance of the application. To provide this support, you need to create a special file (Manifest) containing a list of files for storage locally.
CACHE MANIFEST
CACHE:
/system/js/jquery-1.7.min.js
/system/css/style.css
NETWORK:
/system/php/login.php

With the CACHE parameter, we tell the browser that these files need to be downloaded. NETWORK - indicates that we need internet here. That is, you used the application, at that moment there was a need to go to the login.php page, the application will automatically connect to the Internet, and you will continue to use it calmly.
But creating a manifest is not all, you need to make it clear to the browser that it exists. To do this, you need to attach it to the page using a tag. The value of the manifest attribute is the path to the manifest file.

manifest="manifest.mf"


Go ahead.
LocalStorage - this is a very good HTML5 feature that allows you to store data in the local browser database. Someone might say that LocalStorage is like cookies. But this is not so; it is much more convenient and functional. The bottom line is, you have written several functions on javascript and work as with a database.
image

This code will create a local database, which you see in the screenshot above.

var DB;
var shorlName='TestBase';
var versionBase='1.0';
var DisplayName='TestBase';
var maxsize=65536;
    DB=openDatabase(shorlName,versionBase,DisplayName,maxsize);
    DB.transaction(
       function(transaction) {
                transaction.executeSql(
                            'CREATE TABLE IF NOT EXISTS sites'+
                            '(url TEXT NOT NULL,'+
                            'name TEXT NOT NULL);'
					                  );
							}
					);


With the openDatabase () parameter, we indicate that we need to create the database using the specified parameters.
Next, using transaction, we create the necessary tables. I won’t show the whole principle of work, it uses Sql, which, as stated in the specification, supports any sql commands. I'll show you how to add data:
transaction.executeSql('INSERT INTO testbase (text, name) VALUES ("Значение 1","Значение 2")');

This row will add data to the table, unless of course it exists.
image

JavaScript
To develop a mobile application, you can use jquery (jquerymobile).
Jquerymobile is a framework blinded based on jQuery and jQuery UI, and most importantly with HTML5 support. Jquerymobile works great with external and internal links.
For example, when you go to another page - contact.php, Jquery will pull out href and generate an ajax request, if an error occurs, a window will appear informing about this.
Internal links should be built as follows: Link
An important attribute in building pages is the data-role. It is for him that Jquery will search for the necessary elements.
Foo is the unique identifier that jquery will use. What else I would like to note on Jquerymobile is the support for themes. In essence, these are Css files that already contain styling for interface elements.
I will give a small code:

  <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.css" />
    <script src="http://code.jquery.com/jquery-1.4.3.min.js"></script>
    <script src="http://code.jquery.com/mobile/1.0a1/jquery.mobile-1.0a1.min.js"></script>
<div data-role="page">
    <div data-role="header">
       <h1>Заголовок</h1>
    </div>
    <div data-role="content">
        <p>Контент</p>
    </div>
    <div data-role="footer">
        <h4>The Footer</h4>
    </div>
</div>


As we can see, this is standard markup; there is nothing new except the data-role attribute.
Iron phone.
Many probably have a question, but how can I write an HTML5 application that can use the phone’s hardware (camera, memory, etc.). Then PhoneGap comes to our aid. I will not consider the full principle of work in it, I will only describe some features.
PhoneGap is an open source framework that allows you to access the glands of your phone. What PhoneGap allows you to work with:
1. Accelerometer
2. Camera
3. Compass
4. Device (collecting device information)
5. Geolocation
6. Notification (Visual, sound notifications on the device)
7. Network (Quick check of the network status, as well as information about the network.)
8. Capture (Capture media files.)
9. Contacts (Work with the device’s address book)
10. Files (Work with the file system)
11. Storage
12. Media (Recording and playing audio files)
The framework supports the following platforms: iPhone, Android, OS, WebOS, WP7, Symbian, Bada.
With the advent of new platforms, this list is expanding. Although all platforms do not interest us. The project is under constant development, so some systems do not support certain properties, as can be seen in the screenshot (although it may be a little outdated).
image

We see that Symbian does not support 3 properties, let's hope that this will be fixed soon. The Symbian line shows that not only devices with this system are supported, but also their updates (Anna, Belle ... the list is constantly updated). How does PhoneGap work?

image
image