Develop iOS, Android and Windows applications using HTML – Part 1

Prerequisites: Basic knowledge of HTML , CSS and jQuery Mobile

 

This is the part one of the series, You can directly to second part from Develop iOS, Android and Windows applications using HTML – Part 2

 

There are different ways to develop mobile applications. One is to develop the applications using the Native Software Development Tools ( like developing Android applications using Eclipse in JAVA, or developing iOS application using XCode in Objective C) and the other one is to develop cross platform (i.e. platform independent applications, iOS, Android, Windows,  BBM) applications using Hybrid Development Tools in HTML5 and CSS.   To know about the difference between Native and Hybrid application development, please refer here . This tutorial will be a part of the series and some more tutorials will follow after this post.

 

Step 1

Donwload a Text Editor to write HTML code. Proffered ones are Notepad++ and Sublime Text. I am using a great Text Editor called Sublime Text 2 which you can download here.

Step 2

Download  Wamp Server from here.  After installation, run it and go to localhost. You will see an image as shown below.

wamp

 

Step 3

Go to the wamp server installation directory and create a folder named “HelloWorld” in www . (path: C:wampwww)

HelloWorld

Download jQueryMobile reference files from here to  Include the jQuery Mobile Scripts into your html page . Download Minified: jquery.mobile-1.3.1.min.js and Minified with Default theme: jquery.mobile-1.3.1.min.css (Right Click and Save As).

After this, Download jQuery scripts from hereDownload the compressed, production jQuery 1.10.1 and create a new folder in “HelloWorld” by the name of “jquery-mobile” .

jquery-mobile

Step 4

Go to “HelloWorld” folder and create a new .html file using using sublime text.

Reference the scripts downloaded in Step 3 and create the basic HTML Structure as shown below :

   1:  <!DOCTYPE>

 

   2:  <html>

 

   3:  <head>

 

   4:      <meta charset="UTF-8" />

 

   5:      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

   6:      <title>ChillGeeks</title>

 

   7:      <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

   8:      <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

   9:      <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

  10:  </head>

 

  11:  

 

  12:  <body>

 

  13:  

 

  14:  </body>

 

  15:  </html>

This is the basic page without any content. Now go to http://view.jquerymobile.com/1.3.1/dist/demos/ and click on Header Toolbar. View the source of any header you like to insert. I am in love with blue color so I am using that.

Insert the below code in the <body> tag :

   1:  <div data-role="header" data-theme="b">

 

   2:          <h1>Chill Geeks</h1>

 

   3:  </div>

 

After this your code looks like this :

   1:  <!DOCTYPE>

 

   2:  <html>

 

   3:  <head>

 

   4:      <meta charset="UTF-8" />

 

   5:      <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

   6:      <title>ChillGeeks</title>

 

   7:      <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

   8:      <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

   9:      <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

  10:  </head>

 

  11:  

 

  12:  <body>

 

  13:      <div data-role="header" data-theme="b">

 

  14:          <h1>Chill Geeks</h1>

 

  15:      </div>

 

  16:  </body>

 

  17:  </html>

Save it and run http://localhost/helloworld/ on your Chrome. It should look like this :

appWithHeader

This won’t give you the feel of how it would look on Mobile. To do this, download the mobile simulator ripple from here and add it to Chrome.  Enable it and your app will look like this :

appWithHeaderEmulator

 

You can put any type of the element using jQueryMobile demo website. Just visit here .

After this initial header, let us just add some form elements. We will be adding textboxes and buttons.

Now after the closing div tag of the header, just add the following code :

 

<div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

        </br>

 

        <input type="text" name="text" id="name" value="" placeholder="Enter Your Name">

 

        <input type="tel" name="text" id="phone" value="" placeholder="Enter Your Phone Number">

 

        <input type="text" name="text" id="address" value="" placeholder="Enter Your Address">

 

</div>

 

The data-role element in the above code defines the role of the content and then map its designing as based on the jQueryMobile scripts. After this , let’s add a submit button.

</br>

 

    <div style="text-align:center">

 

        <a href="#" data-role="button" data-inline="true" data-theme="b" >Submit</a>

 

    </div>

After this, your complete code looks like this :

<!DOCTYPE>

 

<html>

 

<head>

 

    <meta charset="UTF-8" />

 

    <meta name="viewport" content="user-scalable=no, width=device-width, initial-scale=1, maximum-scale=1">

 

    <title>ChillGeeks</title>

 

    <link href="jquery-mobile/jquery.mobile-1.3.0.min.css" rel="stylesheet" type="text/css" />

 

    <script src="jquery-mobile/jquery-1.8.2.min.js" type="text/javascript"></script>

 

    <script src="jquery-mobile/jquery.mobile-1.3.0.min.js" type="text/javascript"></script>

 

</head>

 


 

<body>

 

    <div data-role="header" data-theme="b">

 

        <h1>Chill Geeks</h1>

 

    </div>

 

    <div data-role="content">

 

        <h3>

 

            This demo will show you how to add form elements

 

        </h3>

 

        </br>

 

        <input type="text" name="text" id="name" value="" placeholder="Enter Your Name">

 

        <input type="tel" name="text" id="phone" value="" placeholder="Enter Your Phone Number">

 

        <input type="text" name="text" id="address" value="" placeholder="Enter Your Address">

 

    </div>

 

</br>

 

    <div style="text-align:center">

 

        <a href="#" data-role="button" data-inline="true" data-theme="b" >Submit</a>

 

    </div>

 


 

</body>

 

</html>

Save the document and run http://localhost/helloworld/ on your Chrome. It should look like this :

App

 

This is the basic application, and does nothing but helps you to understand how to create mobile application. This currently runs on your browser, however, in the next tutorial, I’ll show you how to run this on your mobile.

How to get rid of annoying online ads in 2 simple steps

Today, online ads get more and more annoying, which spoils everyone’s browsing experience. Almost every major website in invested by ads: Facebook, Google, YouTube and many others. Also, new obtrusive forms of advertising are being introduced: video ads are one of the latest obnoxious trends in advertising. However, there is a very simple and quick way to get rid of all annoying ads. We have written earlier on how to block flash content in the browser.

 

With no doubt, Adblock Plus is the best way to block ads. Being introduced in 2006 as a Firefox-only plugin, today it is by far the most downloaded browser extension in the world, available for free on Chrome, Firefox, Opera and Android OS (Internet Explorer support is coming soon too). Besides being the most reliable solution for blocking ads, Adblock Plus also can be configured to block malware, disable tracking and remove social media buttons from websites. The installation is very easy, and it takes a few seconds:

 

Step 1: Please go to https://adblockplus.org, which is the official website of the extension.

 

Step 2: Hit the big green “Install” button, which will download the extension and install it in a few seconds. (Please note, you will require Firefox/Chrome/Opera, if you do not have one of these browsers, please install this first).

 

After installing the extension, no configuration is required – all annoying ads will be blocked automatically.

 

 

Adblock Plus blocks ads using filterslists, which include a large set of rules that tell the extension to block certain elements. These filterlists are constantly maintained by a vast Adblock Plus community, which will ensure that all the latest ads will be blocked too. Also, there is a wide choice of local filters, which block ads on local websites, as well as an option to create custom rules for blocking of whitelisting any elements. For more advanced information about Adblock Plus, please go to: http://adblockplus.org/en/tutorials.