HTML5 and Mobile Phones/Mobile Apps


Last time we learned about Application Cache and its uses. Today we are going to learn something about HTML5 with mobile apps.
There is a lot of controversy among the developers between HTML5 and Native Apps. First let’s see what are these native apps? It’s a software developed specifically to run on the architecture of a mobile device and which is downloadable, purchased and upgraded through a central distribution portal (such as the App store).

  • HTML5 vs Native Apps:
    • Compared to older versions of HTML, HTML5 makes it much easier to create full featured web applications that can be updated remotely with new functionality without requiring users to download and install an update each time.
    • HTML5 helps reduce the functionality gap between mobile sites and apps.
    • It is much cheaper to develop HTML5 mobile apps than it is to create native apps.
    • Reason is that, for iOS and iPhone apps, the developer need to know objective “C programming”, for android, they need to know “java” and for windows phone they need to know “C#”.
    • These developers cost a lot more than an HTML-javascript web developers.
    • Another reason is that the cost of the actual software to develop the net of apps is extremely expensive and HTML5 uses open source IDE’s and is cheaper from software point of view.
    • HTML5 mobile apps is catching on fast and some say it will replace native mobile apps and the App Store.
  • Hybrid Apps:
    • A hybrid mobile app takes an HTML mobile app and inserts it inside a native wrapper (container).
    • Hybrid apps, like native apps, run on the device, and are written with web technologies like HTML5, CSS and JavaScript. Hybrid apps run inside a native container on a mobile device.
    • A web-to-native abstraction layer enables access to device capabilities that are not accessible in Mobile Web applications, such as camera and local storage.
    • It is shown in the figure below:
    • Native_html5_hybrid
      fig 1

    • Here we have shown two tables, which give us some information of which different API’s are available for which mobile browser.
    • Mobile browsers are more complicated than desktop browsers, because there are different versions of different browsers on different phones of different platform.
    • A table with browsers supporting applications like Web Storage, Application Cache etc. is shown below:
    • Mobile_browser_Support_1_table
      fig 2

    • A table with browsers supporting applications like Canvas, SVG etc. is shown below:
    • Mobile_browser_Support_2_table
      fig 3

  • Using Frameworks:
    • To create a mobile App with HTML5 many frameworks are used.
    • The popular HTML5 friendly Mobile Frameworks are:
      • Titanium
      • Sencha Touch
      • Sproutcore Touch
      • PhoneGap
    • PhoneGap framework is mostly used by beginners.
  • Using Application Cache:
    • When we are creating or building an html5/native hybrid app, we need to use appcache because we have a splash (startup) screen and icons on the phone and we want to use it without connecting to the internet.
    • To do this, we need to use a server where we can change the HTTP headers on our files.
    • We can use any Apache server and add something to the .htaccess file.
  • HTML5 Markup Layout:
  • Here is an example of a hybrid HTML5 for apple iphone app.

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1.0, maximum-scale=1.0"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <link rel="apple-touch-icon" href="iphone-appname-icon.png"/>
    <link rel="apple-touch-startup-image" href="startup.png"/>
    <link rel="stylesheet" href="style.css" type="text/css" media="screen,mobile" title="main" charset="utf-8"/>
    <title>Your App Title</title>
         <!--Put your markup here-->
    	 <script type="text/javascript" src="yourjavascript.js"></script>

    This is a code for an app that will run on an apple iphone. The working is done using javascript.

  • Icons and Start Screens:
    • For any kind of hybrid or native app, we need certain aspects to fit in with the other apps.
    • Icons should have specific size.
    • For example :
      • iphone icons should be 57px*57px size.
      • Splash or startup screen should be 320px*460px in size and should be in .png or .jpg format.

    This was a new concept of using HTML5 in mobile apps with its some advantages over native apps.


Please enter your comment!
Please enter your name here