TechExchange:  Introduction To Building a Mobile Web App Using JQuery

 

With over 5 million Zimbabweans using mobile to access the Internet, it becomes almost imperative you offer mobile support for your website visitors. JQuery Mobile offers a quick and easy way to achieve this. In this tutorial we are going to look into the benefits of JQuery Mobile and create our very first mobile web app. Before we begin, it assumed to you have a basic understanding of HTML, CSS and Javascript or JQuery. This tutorial is perfect for novice web designers.

 By Gwinyai Nyatsoka

What Is JQuery Mobile?

jquery

JQuery Mobile is a cross platform mobile framework designed to simplify and enhance the development of mobile web applications by integrating HTML5, CSS3, jQuery and jQuery UI into one framework that is not only robust, but maintainable and organized. In other words, JQuery is your usual client side development languages put together into re-usable elements that can make a mobile compatible website.

At the end of this tutorial we will end up with the following mobile web app.

Benefits of Using JQuery Mobile

The real benefit of JQuery Mobile comes in when you have a separate subdomain to offer a mobile website. You’ve seen this with Facebook. When you query m.facebook.com Facebook gives you a completely different layout that fits a mobile screen. In the backend, a server user agent string detects whether you are using a mobile and redirects you here automatically if you are using a mobile to try and access Facebook. But you can also go here manually from a desktop, Facebook has no problems with that.

Another beauty of JQuery Mobile is that you can take what you have made with it and convert it into a iOS and Android app using Phonegap. Apps made this way are called Hybrid apps which are distinct from Native apps where you use the frameworks created by Apple to make iOS apps and Android to make Android apps. You might choose this way to avoid the difficulty of going through a learning curve and complexity. For iOS apps you would need to learn XCode with Swift or Objective C programming. For Android apps, you would need to learn Java with Android Studio to make Android apps. However, the downside is that you lose the native feel with Hybrid apps and might suffer performance issues depending on how data intensive your app is.

building mobile app Building-Mobile-Apps-Without-Coding

Other Alternatives To JQuery Mobile

Before I begin, I must make the disclaimer that of course there are other solutions out there. Ratchet is a recent emerging alternative to JQuery Mobile which affords a more native feel to Android and iOS mobile users. Responsive web design where the CSS3 media queries are used to detect screen size and change a web page’s layout is another. This tutorial is not about which technology is better than the other but merely an article about how to use JQuery Mobile to make mobile websites.

Getting Started On Our JQuery Mobile Web App

Create a folder on your desktop and name it MobileApp. Inside this folder, create three subfolders names CSS, Scripts and images. You should have this.

getting atrted

Visit the JQuery Mobile website using the URL http://jquerymobile.com/download/ and download the latest stable release ZIP folder. Extract the ZIP folder and in it you should find a jquery.mobile-1.4.5.min.js and jquery.mobile-1.4.5.min.css files (at the time of writing, JQuery Mobile version 1.4.5 was available but yours might be different). Copy these files. Copy jquery.mobile-1.4.5.min.js into your Scripts folder and rename it jquery.mobile.js. Copy jquery.mobile-1.4.5.min.css into your CSS folder and rename it jquery.mobile.css. Now visit the JQuery website using the URL http://jquery.com/download/ and download the uncompressed version of JQuery 2x. Copy this file into your Scripts folder and rename it jquery.js. The images you need can be downloaded from http://codesagetechnology.com/jquerytutorialimages. Copy these images and paste them in your Images folder.

Now here is the code that makes all the magic. Copy and paste this into an index.html file and drop this in your MobileApp folder. We’ll be explaining what it all means shortly but if you open index.html in your browser you should get the same web app we are trying to make.

 

<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1″ /><link rel=”stylesheet” href=”CSS/jquery.mobile.css” /><script src=”Scripts/jquery.js“></script><script src=”Scripts/jquery.js“></script></head><body><div data-role=”page” data-add-back-btn=”true” id=”page1″ data-theme=”a”><div data-role=”header” data-position=”fixed” style=”background-color:#993333″><h1><img src=”images/headlogo.png” /></h1></div><div data-role=”navbar”><ul>

ul>

images/pic1.png” /><h2>Latest Mens Wear

What’s new in men’s department

  • <img src=”

images/pic2.png” /><h2>Latest Womens Wear

New women’s clothing

  • <img src=”

images/pic3.png” /><h2>Summer Cool Wear</h2><p>New prime Adidas Sports wear</p></li><li><img src=”images/pic4.png” /><h2>Night Wear</h2><p>Excellent night wear apparel</p></li></ul>   </div><div data-role=”footer”><h4>Mobile App</h4></div></div></body></html>

 

 

Setting Up the Head Section

Let’s start with the first section of code.

<!DOCTYPE html><html lang=”en”><head><meta charset=”utf-8″ /><meta name=”viewport” content=”width=device-width, initial-scale=1″ /><link rel=”stylesheet” href=”CSS/jquery.mobile.css” /><script src=”Scripts/jquery.js“></script><script src=”Scripts/jquery.js“></script></head>

 

DOCTYPE is an HTML5 declaration. It signifies the beginning of your HTML document to the browser. Html lang is the language of your web page which in this case is English. Head is where we put all meta tags and links to Javascript and CSS resources. Meta charset defines the character encoding of your web page which is usually utf-8.

The meta viewport tag is very important. This tag tells the browser to scale your web page in a mobile device appropriately. What follows are links to the CSS and Javascript files you pasted into subfolders.

Creating the Header

<body><div data-role=”page” data-add-back-btn=”true” id=”page1″ data-theme=”a”><div data-role=”header” data-position=”fixed” style=”background-color:#993333″><h1><img src=”images/headlogo.png” /></h1></div>

You will notice the data-role attribute in the div tags. These data-* attributes are a recent addition to HTML5 and allow you to create custom attributes to store arbitrary snippets of metadata for your javascript. Therefore, data-role has a specific meaning to JQuery Mobile. For example, the first data-attribute is data-role=”page”. This tells JQuery Mobile you want you are defining a JQuery Mobile page. This should usually be below the first HTML body tag.

The data-add-back-btn again has specific meaning to JQuery Mobile. This allows you to add a back button so that if you navigate away from this page, JQuery will place a convenient back button to come back. We have set this to true. The data-theme attribute allows you to use predefined JQuery Mobile layouts that ship with JQuery Mobile. We are using theme “a” here but there are others like theme “b” and “c”.

Now we want to put the ABC logo in. We start by adding the attribute data-role=”header” which will create a JQuery Mobile header. We have made the header fixed with data-position=”fixed” so that as we scroll down the page the logo follows along. We have changed the background colour of the header to :#993333 a  bright pink colour. Now we add the logo as an image in between the div tag with the data-role=”header” attribute.

Creating the Navigation Bar

<div data-role=”navbar”><ul><li><a href=”#” data-icon=”home” >Home</a></li><li><a href=”#” data-icon=”search”>About</a></li><li><a href=”#” data-icon=”info”>Contact</a></li></ul></div>

 

We start by creating a data-role=”navbar” attribute which makes our unordered list into a neat navigation bar. The data-icon attribute will create JQuery Mobile icons for you with the navigation bar.  For example, the data-icon=”home” will create a familiar house icon. We have not defined any pages that you can actually navigate to if you click any of the options in the navigation bar. But all you need to do is replace the # sign with a new page if you would like, for example, contacts.html.

Creating the Listview

 

We created a div tag with the attribute data-role=”content”. This is what tells JQuery Mobile you have started putting the main content of your web app. It usually follows the div tag with the data-role=”header” attribute.

A listview creates another neat way to navigate around your mobile web app. The attribute data-role=”listview” will make an unordered list into a listview. How you arrange the elements under the listview will affect how it will appear. For example, in this listview, the sibling elements are simply an unordered list.

<div data-role=”content” style=”background-color:#cd5c5c”><ul data-role=”listview” data-inset=”true”><li><a href=”#”>Spring Summer Catalogue</a></li><li><a href=”#”>Fashion Book</a></li><li><a href=”#”>My Account</a></li>

</ul>

However the listview that directly follows it has an img, h2, and p tags defined in each li element. This creates a different listview which looks a lot like a product catalog.

<ul data-role=”listview” data-inset=”true”><li><img src=”images/pic1.png” /><h2>Latest Mens Wear</h2><p>What’s new in men’s department</p></li><li><img src=”images/pic2.png” /><h2>Latest Womens Wear

New women’s clothing

  • <img src=”

images/pic3.png” /><h2>Summer Cool Wear</h2><p>New prime Adidas Sports wear</p></li><li><img src=”images/pic4.png” /><h2>Night Wear</h2><p>Excellent night wear apparel</p></li></ul>   </div>

 

We define a data-inset=”true” attribute because this will neatly pack the listview with slightly rounded borders.

Creating the Footer

Now for the last part, the footer.

<div data-role=”footer”><h4>Mobile App</h4></div></div></body></html>

 

The footer is simple defined using the data-role=”footer” attribute.

Gwinyai Nyatsoka is a programmer, web developer and the founder of codesage. you may contact him  directly for any more information.

Nicole Madziwa

Apparently, NetOne Directors Owned Firstel, Reluctant To Pay $11m

Previous article

The New ZOL Zimbabwe Website Intuitive

Next article

Comments

Leave a reply

Your email address will not be published. Required fields are marked *