Basic HTML5 mobile app development for Nokia devices

This post participates in the competition " Smart phones for smart posts ".

HTML5 is a new technology that allows you to create applications of various levels of complexity. Of course, not all mobile browsers support HTML5 in full.
New Nokia models support html5.

Online, offline and localstorage
The best feature of HTML5, I think , is support for online and offline health, and of course LocalStorage.
Support offline. Ie 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 breaks 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 to download these files. NETWORK - indicates that we need the Internet here. Ie you used the application, at this moment there was a need to go to the login.php page, the application will automatically connect to the Internet, and you will quietly continue using.
But to create a manifest is not everything, you need to let the browser know that it exists. To do this, it must be tied to the page using the 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 feature of HTML5, which allows you to store data in the local browser database. Someone might say LocalStorage is similar to cookies. But it is not, it is much more convenient and functional. The point is, you have written several functions in javascript and work as with a database.


This code will create the local database that 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 specify that we need to create a database, using the specified parameters.
Next, using the transaction, we create the necessary tables. I will not show the whole principle of operation, Sql is used here, which as stated in the specification supports any sql commands. I will show you how to add data:

 transaction.executeSql('INSERT INTO testbase (text, name) VALUES (" 1"," 2")'); 

This line will add data to the table, if of course it exists.


Javascript
To develop a mobile application, you can use Jquery (Jquerymobile).
Jquerymobile is a framework that is blinded based on jQuery and jQuery UI, and most importantly with HTML5 support. Jquerymobile works great with external and internal links.
For example, when switching to another page - contact.php, jQuery will pull out the href and form an ajax request, if an error occurs, a window will appear, notifying of this.
Internal links should be built as follows: Link
An important attribute when building pages is the data-role. It is for him Jquery, will find the right elements.
Foo is the unique identifier that Jquery will use. What else I would like to mention on Jquerymobile, is the support for those. In fact, 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 a standard markup, there is nothing new, except for the data-role attribute.
Iron phone.
Many probably have a question, but how to write an HTML5 application that can use the phone’s hardware (camera, memory, etc.). This is where PhoneGap comes to the rescue. I will not consider the full principle of work in it, I will only describe some features.
PhoneGap is an open source framework that will allow access to the phone's hardware. What allows PhoneGap to work with:
1. Accelerometer
2. Camera
3. Compass
4. Device (device information collection)
5. Geolocation
6. Notification (Visual, sound notifications on the device)
7. Network (Quick check of network status, as well as information about the network.)
8. Capture (Media Capture.)
9. Contacts (Working with the device address book)
10. Files (Working with the file system)
11. Storage
12. Media (Record and Play Audio Files)
The framework supports the following platforms: iPhone, Android, OS, WebOS, WP7, Symbian, Bada,
With the advent of new platforms, this list expands. Although all platforms do not interest us. The project is under constant development, therefore some properties do not support certain systems, as can be seen in the screenshot (although it may be a bit outdated).


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