How to build Mobile Applications using jQueryMobile

If you’ve been wondering how to build mobile applications using jQueryMobile, let us answer these three questions:

a) What is jQueryMobile and how can it help me build mobile applications?

b) What is the difference between a Mobile Web Application and a Native Application?

c) What pre-requisite knowledge do I need to use jQueryMobile?

English: jQuery Mobile logo.

English: jQuery Mobile logo. (Photo credit: Wikipedia)

 

 

 

 

 

Answers:

a) What is jQueryMobile and how can it help me build mobile applications?

jQueryMobile is a framework for building sites for smartphones and tablets, and lets not forget desktops! It’s a way of writing HTML so that the framework makes it look like a native application.

And the nice thing is that it supports all major devices, be it any web browser on any device. For example, Chrome on Linux, Firefox on Windows, Safari on iPhone, just to name a few.

All you really need to do to let the framework do its magic is add some extra meta-data to the HTML elements you’re probably already familiar with.

You can create a very very very simple html document, with unordered lists and listitems, links, you name it. And it’ll look like 1998. 🙂

But add a reference to jQuery and jQueryMobile in the head section, and voila! What a difference!

Here’s an example:

The 1998 version:

The 2013 version:

Notice the difference?

10,000 points are on offer for who can tell us what was added! Add a comment below and paste the relevant lines that turn the 1998 version into the 2013 version.

Hint: View Source!

This is easy! So get cracking and tell us what was added – there’s an easy 10,000 points for the very first person with the correct answer who responds – regardless of time zone. 🙂

(Don’t worry – any other answers that come in will win points also – as long as the answer is correct.)

Of course, you need to be registered! You can do that here!

 

b) What is the difference between a Mobile Web Application and a Native Application?

A native application, available or sold through app stores are written in difficult to learn languages like Objective-C and Java.

jQueryMobile on the other hand (as you’ve seen above with the 1998 and 2013 versions) lets you build web applications easily using the things you already know, like HTML, CSS and Javascript.

Disclaimer: although jQueryMobile lets you simulate many features of native applications, it won’t let you access the device hardware, like the camera etc, without additional “libraries” such as Phonegap or Cordova, and which require access to a Macintosh computer to build the native app, even when it’s written in HTML, CSS and Javascript. (For example, you cannot create a native application for iPhone using a Windows PC.)

 

c) What pre-requisite knowledge do I need to use jQueryMobile?

If you can understand the tag syntax of HTML, you can get started immediately.

 

Visual breakdown of the parts of a HTML element.

Visual breakdown of the parts of a HTML element. (Photo credit: Wikipedia)

 

 

 

 

 

 

 

The jQueryMobile framework will do all the hard work behind the scenes, giving your app the best possible display (as you saw with the 1998 version against the 2013 version)

All you need to do is take your HTML experience, add the jQueryMobile attribute values to elements, and you’ll be up and running in no time.

And to test drive every component in the library, and easily build pages by copying and pasting the markup configuration you need, visit the jQueryMobile Demo Centre.

If you have any other questions, head on over to the forums, and get in touch with other like-minded people, who will be happy to help you!

 

Did you win the 1998 – 2013 competition? Don’t worry, you will have been awarded points just for participating, and leaving your answer in the comments box.

 

 

Of course, if you don’t want to build mobile apps yourself, you can always use a third party solution

 

 

Enhanced by Zemanta

Leave a Reply

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