How to Build Your Mobile App using HTML

Are you looking for an easy way to get started building mobile apps?   In this post, I would like to introduce you to a tool called JQuery Mobile that empowers you to craft mobile applications using HTML and a little bit of JavaScript.   This free tool builds upon the strengths of the jquery programming community who do a solid job of creating fun and well documented programming tools.

JQuery mobile works well in the following cases:

  1. Information apps: The application that you’re building is informational in nature.   If you’re trying to build a game or the next “Angry Birds,”  Jquery mobile is not a good fit.   This tool works well if your creating e-books, apps for conferences, promoting a band, or capturing information using simple forms.
  2. It’s just HTML: Learning Objective C or Java can be intimidating to people just learning how to program.   I greatly appreciate that JQuery mobile provides a solid place to start for novice app builders.
  3. Get started at no cost: What do you need to get started? A text editor, a web browser, and your creativity.  (notepad++, textwrangler for Mac, etc.)

In the following code sketch, I will outline how to create a simple application.   The app will show you how to create buttons on a list view, create a pop-out window, include text and images, and enable your users to navigate from one page to another. If you need training on HTML or JavaScript, please visit CodeAcademy.com for additional teaching.

In this  example, we will build a simple app to help promote a group or club.   It will consist of four pages: home, events, contact us, and news.   These pages will look something like this when we’re done. You can also check out a demo at this link.

Home screen

Home page

Contact us page

Events page

Events page

For a comprehensive introduction to JQuery Mobile, please visit http://learn.jquery.com/jquery-mobile/getting-started/

The HTML to create this small application is shown below.  How does this code work?

 

 

[cc lang=”html”]



Group App



My Group App

Etiam a lorem id nisl porttitor scelerisque sed vitae dolor. Nunc gravida leo quis dolor pretium sed eleifend nisl commodo. Cras id imperdiet tortor. Sed convallis massa vel sapien ullamcorper convallis. Vivamus elit odio, suscipit quis adipiscing at, dignissim interdum arcu.

Look forward to seeing you soon!

My Group – Contact us

Contact Us

Etiam a lorem id nisl porttitor scelerisque sed vitae dolor. Nunc
gravida leo quis dolor pretium sed eleifend nisl commodo. Cras id
imperdiet tortor. Sed convallis massa vel sapien ullamcorper
convallis. Vivamus elit odio, suscipit quis adipiscing at, dignissim
interdum arcu.

  • Mary Jane — President — E-mail
  • John Smith — Vice President — E-mail
  • Simon Flat — Communications — E-mail

Look forward to seeing you soon!

My Group – Events

Events

  • Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • Event 2: Quisque ut metus eu leo interdum volutpat.
  • Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.

Look forward to seeing you soon!

My Group – News

News

  • News 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
  • News 2: Quisque ut metus eu leo interdum volutpat.
  • News 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.

Look forward to seeing you soon!


[/cc]

In the HEAD of the document, we include JavaScript code references that enable JQuery mobile to function. JQuery mobile tries to use standard HTML structures to enable you to craft mobile user interfaces. If you removed these code references, you will notice that the web page reverts to standard web browser rendering rules.

[cc lang=”html”]

Group App



[/cc]

To create a button that moves the user from the home screen to the “Events” page, use the following code. The “#events” string corresponds to the “id” attribute of the page “events”. To see an example of opening a dialog box, look at the “#contact_us” link to see how that was done.

[cc lang=”html”]

  • Events
  • [/cc]

    The following code is responsible for creating the “Events” page in the application. The code sets the header, footer, and content of the page. The content of a JQuery mobile page is just HTML. To make it easier for the user to return to the home screen, I added the “data-add-back-btn” attribute and set it to true.

    [cc lang=”html”]

    My Group – Events

    Events

    • Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    • Event 2: Quisque ut metus eu leo interdum volutpat.
    • Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.

    Look forward to seeing you soon!


    [/cc]

    So… How do you make this HTML app available in the Android or iOS app store? Check out our post introducing PhoneGap.

    Let me know if you have any questions or comments!

    Related posts: