Stories on maker education and innovation 

Home mobile How to Build Your Mobile App using HTML
formats

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?

 

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
  <head>
    <title>Group App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" type="text/css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js" type="text/javascript"></script>
  </head>
  <body>
    <div data-role="page">
      <div data-role="header">
        <h1>
          My Group App
        </h1>
      </div><!-- /header -->
      <div data-role="content">
       
        <ul data-role="listview" data-inset="true" data-filter="true">
      <li>
            <a href="#events">Events</a>
          </li>
          <li>
            <a href="#contact_us" data-rel="dialog">Contact us</a>
          </li>
          <li>
            <a href="#news">News</a>
          </li>      
        </ul>
        <img src="img/student_group_pic.jpg" align="left" style="padding:10px;"> 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.
      </div><!-- /content -->
      <div data-role="footer">
        <h4>
          Look forward to seeing you soon!
        </h4>
      </div><!-- /header -->
    </div><!-- /page -->
    <div data-role="page" id="contact_us" data-add-back-btn="true">
      <div data-role="header">
        <h1>
          My Group - Contact us
        </h1>
      </div><!-- /header -->
      <div data-role="content">
        <img src="img/student_group_pic.jpg">
        <h3>
          Contact Us
        </h3>
        <p>
          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.
        </p>
        <ul>
          <li>Mary Jane -- President -- <a href="#">E-mail</a>
          </li>
          <li>John Smith -- Vice President -- <a href="#">E-mail</a>
          </li>
          <li>Simon Flat -- Communications -- <a href="#">E-mail</a>
          </li>
        </ul>
      </div><!-- /content -->
      <div data-role="footer">
        <h4>
          Look forward to seeing you soon!
        </h4>
      </div><!-- /header -->
    </div><!-- /page -->
   
    <div data-role="page" id="events" data-add-back-btn="true">
      <div data-role="header">
        <h1>
          My Group - Events
        </h1>
      </div><!-- /header -->
      <div data-role="content">
        <h3>
          Events
        </h3>
        <ul>
          <li>Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>Event 2: Quisque ut metus eu leo interdum volutpat.
          </li>
          <li>Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.
          </li>
        </ul>
      </div><!-- /content -->
      <div data-role="footer">
        <h4>
          Look forward to seeing you soon!
        </h4>
      </div><!-- /header -->
    </div><!-- /page -->
   
   
    <div data-role="page" id="news" data-add-back-btn="true">
      <div data-role="header">
        <h1>
          My Group - News
        </h1>
      </div><!-- /header -->
      <div data-role="content">
        <h3>
          News
        </h3>
        <ul>
          <li>News 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>News 2: Quisque ut metus eu leo interdum volutpat.
          </li>
          <li>News 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.
          </li>
        </ul>
      </div><!-- /content -->
      <div data-role="footer">
        <h4>
          Look forward to seeing you soon!
        </h4>
      </div><!-- /header -->
    </div><!-- /page -->
       
  </body>
</html>

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.

1
2
3
4
5
6
7
  <head>
    <title>Group App</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.css" type="text/css">
    <script src="http://code.jquery.com/jquery-1.8.3.min.js" type="text/javascript"></script>
    <script src="http://code.jquery.com/mobile/1.2.1/jquery.mobile-1.2.1.min.js" type="text/javascript"></script>
  </head>

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.

1
<li><a href="#events">Events</a></li>

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.

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
    <div data-role="page" id="events" data-add-back-btn="true">
      <div data-role="header">
        <h1>
          My Group - Events
        </h1>
      </div><!-- /header -->
      <div data-role="content">
        <h3>
          Events
        </h3>
        <ul>
          <li>Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.
          </li>
          <li>Event 2: Quisque ut metus eu leo interdum volutpat.
          </li>
          <li>Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.
          </li>
        </ul>
      </div><!-- /content -->
      <div data-role="footer">
        <h4>
          Look forward to seeing you soon!
        </h4>
      </div><!-- /footer -->
    </div><!-- /page -->

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:

 

 
 Share on Facebook Share on Twitter Share on Reddit Share on LinkedIn
No Comments  comments 
© Inspired To Educate
credit