Thursday, August 25, 2011

HTML5 Application Cache Tutorial

Hello all, not much time to talk about. Here straight way we goto the tutorial of HTML5 Application Cache. I hope u know what it is and how useful it is, if not, I will tell you in short.

Application Cache or AppCache is HTML5 feature using which whole or a part of website can be made available offline. It has following great advantages.

  • Make your web apps available offline.
  • Load your web apps faster.
  • Reduce the server load.
  • Save bandwidth.
There are some changes to be made on server in order to provide support for AppCache.

   If you are using Apache, LAMP, WAMP, MAMP or any other server based on Apache, follow the steps below.

1. Goto appropriate installation directory or search for httpd.conf file.
2. Add 'AddType text/cache-manifest .appcache' to it and save the file.
3. Restart the server.

Or if you are using Google App Engine. Put the following code in your app.yaml file.


- url: /mystaticdir/(.*\.appcache)
  static_files: mystaticdir/\1
  mime_type: text/cache-manifest
  upload: mystaticdir/(.*\.appcache)


Now you are set to use AppCache for the content hosted from this server.

Download the AppCache Demo Project from here and open index.html

Use Google Chrome to study this sample application. In Chrome browser press 'Ctrl+Shift+I' to open Chrome Developer Tools and click on resources tab. When the index.html downloaded from the above project is loaded in the browser. You should see something link as shown in the picture.

cached resource from your localserver


Now just open the cache manifest file and change the version no. in it. Make some change to the already cached files and click refresh in the browser. The newly changed file is cached again.

Application Cache can be used by mobile phones also to make web apps more responsive. Android 2.2 and above supports HTML5 Application Cache.

Update: You can check out what has been cached and what not in your Chrome browser by typing 'chrome://appcache-internals' in the address bar.

Update: If you want to check support for various HTML5 features in your browser, you can use the following Apps.

Chrome App
Android App

Saturday, August 13, 2011

Creating Nested List using jQueryMobile

  Hi folks, for the past 2 days I have been working on creating a small demo nested list for mobile applications using jQueryMobile(JQM).

    jQueryMobile is one of the most famous mobile UI framework. It is based on jQuery and currently in Beta. Thought its Beta, the perfomance of Nested Lists using JQM is really good on low end mobile devices as well. I have tested it for only Android 2.2 though.


   What I have noticed while writing my last two mobile Apps using JQM is that list transition is more responsive than page transition. I had to put much time to get JQM Nested Lists working, so I just created a simple nested list application shown in the picture above. Its freely available for download under GNU GPL v3 Open Source License. The link for the open source page is JQM Nested List.

Update: After downloading the code given below, please do open it using a webkit based browser like Google Chrome or Apple Safari.

Download Nested List Demo Code


Update: Code to dynamically create jQuerymobile nested list.

LinkWithin

Related Posts Plugin for WordPress, Blogger...

Share This

Share |