{"id":849,"date":"2013-05-15T03:00:38","date_gmt":"2013-05-15T03:00:38","guid":{"rendered":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=849"},"modified":"2013-05-15T03:29:53","modified_gmt":"2013-05-15T03:29:53","slug":"how-to-build-your-mobile-app-using-html","status":"publish","type":"post","link":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/how-to-build-your-mobile-app-using-html\/","title":{"rendered":"How to Build Your Mobile App using HTML"},"content":{"rendered":"\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fhow-to-build-your-mobile-app-using-html%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n<p style=\"text-align: justify;\">Are you looking for an easy way to get started building mobile apps? \u00a0 In this post, I would like to introduce you to a tool called <a href=\"http:\/\/jquerymobile.com\/\" target=\"_blank\">JQuery Mobile<\/a> that empowers you to craft mobile applications using HTML and a little bit of JavaScript. \u00a0 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.<\/p>\n<p style=\"text-align: justify;\">JQuery mobile works well in the following cases:<\/p>\n<ol>\n<li><strong>Information apps:<\/strong> The application that you&#8217;re building is informational in nature. \u00a0 If you&#8217;re trying to build a game or the next &#8220;Angry Birds,&#8221; \u00a0Jquery mobile is not a good fit. \u00a0 This tool works well if your creating e-books, apps for conferences, promoting a band, or capturing information using simple forms.<\/li>\n<li><strong>It&#8217;s just HTML:<\/strong> Learning Objective C or Java can be intimidating\u00a0to people just learning how to program. \u00a0 I greatly appreciate that JQuery mobile provides a solid place to start for novice app builders.<\/li>\n<li><strong>Get started at no cost:<\/strong> What do you need to get started? A text editor, a web browser, and your creativity. \u00a0(notepad++, textwrangler for Mac, etc.)<\/li>\n<\/ol>\n<p>In the following code sketch, I will outline how to create a simple application. \u00a0 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 <a href=\"http:\/\/CodeAcademy.com\" target=\"_blank\">CodeAcademy.com<\/a> for additional teaching.<\/p>\n<p>In this \u00a0example, we will build a simple app to help promote a group or club. \u00a0 It will consist of four pages: home, events, contact us, and news. \u00a0 These pages will look something like this when we&#8217;re done.  You can also <a href=\"http:\/\/inspiredtoeducate.net\/jquerymobile\/jquerymobile.htm\" target=\"_blank\">check out a demo at this link.<\/a> <\/p>\n<div id=\"attachment_850\" style=\"width: 564px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/home_screen.jpg\"><img aria-describedby=\"caption-attachment-850\" loading=\"lazy\" class=\"size-full wp-image-850 \" title=\"home_screen\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/home_screen.jpg\" alt=\"Home screen\" width=\"554\" height=\"481\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/home_screen.jpg 554w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/home_screen-300x260.jpg 300w\" sizes=\"(max-width: 554px) 100vw, 554px\" \/><\/a><p id=\"caption-attachment-850\" class=\"wp-caption-text\">Home page<\/p><\/div>\n<div id=\"attachment_851\" style=\"width: 544px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events.jpg\"><img aria-describedby=\"caption-attachment-851\" loading=\"lazy\" class=\"size-full wp-image-851\" title=\"Contact us\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events.jpg\" alt=\"\" width=\"534\" height=\"590\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events.jpg 534w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events-271x300.jpg 271w\" sizes=\"(max-width: 534px) 100vw, 534px\" \/><\/a><p id=\"caption-attachment-851\" class=\"wp-caption-text\">Contact us page<\/p><\/div>\n<div id=\"attachment_853\" style=\"width: 522px\" class=\"wp-caption alignnone\"><a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events2.jpg\"><img aria-describedby=\"caption-attachment-853\" loading=\"lazy\" class=\"size-full wp-image-853 \" title=\"events\" src=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events2.jpg\" alt=\"Events page\" width=\"512\" height=\"295\" srcset=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events2.jpg 512w, http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-content\/uploads\/2013\/05\/events2-300x172.jpg 300w\" sizes=\"(max-width: 512px) 100vw, 512px\" \/><\/a><p id=\"caption-attachment-853\" class=\"wp-caption-text\">Events page<\/p><\/div>\n<p>For a comprehensive introduction to JQuery Mobile, please visit\u00a0<a href=\"http:\/\/learn.jquery.com\/jquery-mobile\/getting-started\/\">http:\/\/learn.jquery.com\/jquery-mobile\/getting-started\/<\/a><\/p>\n<p>The HTML to create this small application is shown below. \u00a0How does this code work?<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>[cc lang=&#8221;html&#8221;]<br \/>\n<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.01\/\/EN\"><br \/>\n<html><br \/>\n  <head><br \/>\n    <title>Group App<\/title><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/mobile\/1.2.1\/jquery.mobile-1.2.1.min.css\" type=\"text\/css\">\n    <script src=\"http:\/\/code.jquery.com\/jquery-1.8.3.min.js\" type=\"text\/javascript\"><\/script><br \/>\n    <script src=\"http:\/\/code.jquery.com\/mobile\/1.2.1\/jquery.mobile-1.2.1.min.js\" type=\"text\/javascript\"><\/script><br \/>\n  <\/head><br \/>\n  <body><\/p>\n<div data-role=\"page\">\n<div data-role=\"header\">\n<h1>\n          My Group App<br \/>\n        <\/h1>\n<\/p><\/div>\n<p><!-- \/header --><\/p>\n<div data-role=\"content\">\n<ul data-role=\"listview\" data-inset=\"true\" data-filter=\"true\">\n<li>\n            <a href=\"#events\">Events<\/a>\n          <\/li>\n<li>\n            <a href=\"#contact_us\" data-rel=\"dialog\">Contact us<\/a>\n          <\/li>\n<li>\n            <a href=\"#news\">News<\/a>\n          <\/li>\n<\/ul>\n<p>\t\t<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.\n      <\/div>\n<p><!-- \/content --><\/p>\n<div data-role=\"footer\">\n<h4>\n          Look forward to seeing you soon!<br \/>\n        <\/h4>\n<\/p><\/div>\n<p><!-- \/header -->\n    <\/div>\n<p><!-- \/page --><\/p>\n<div data-role=\"page\" id=\"contact_us\" data-add-back-btn=\"true\">\n<div data-role=\"header\">\n<h1>\n          My Group &#8211; Contact us<br \/>\n        <\/h1>\n<\/p><\/div>\n<p><!-- \/header --><\/p>\n<div data-role=\"content\">\n        <img src=\"img\/student_group_pic.jpg\"><\/p>\n<h3>\n          Contact Us<br \/>\n        <\/h3>\n<p>\n          Etiam a lorem id nisl porttitor scelerisque sed vitae dolor. Nunc<br \/>\n          gravida leo quis dolor pretium sed eleifend nisl commodo. Cras id<br \/>\n          imperdiet tortor. Sed convallis massa vel sapien ullamcorper<br \/>\n          convallis. Vivamus elit odio, suscipit quis adipiscing at, dignissim<br \/>\n          interdum arcu.\n        <\/p>\n<ul>\n<li>Mary Jane &#8212; President &#8212; <a href=\"#\">E-mail<\/a>\n          <\/li>\n<li>John Smith &#8212; Vice President &#8212; <a href=\"#\">E-mail<\/a>\n          <\/li>\n<li>Simon Flat &#8212; Communications &#8212; <a href=\"#\">E-mail<\/a>\n          <\/li>\n<\/ul><\/div>\n<p><!-- \/content --><\/p>\n<div data-role=\"footer\">\n<h4>\n          Look forward to seeing you soon!<br \/>\n        <\/h4>\n<\/p><\/div>\n<p><!-- \/header -->\n    <\/div>\n<p><!-- \/page --><\/p>\n<div data-role=\"page\" id=\"events\" data-add-back-btn=\"true\">\n<div data-role=\"header\">\n<h1>\n          My Group &#8211; Events<br \/>\n        <\/h1>\n<\/p><\/div>\n<p><!-- \/header --><\/p>\n<div data-role=\"content\">\n<h3>\n          Events<br \/>\n        <\/h3>\n<ul>\n<li>Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n          <\/li>\n<li>Event 2: Quisque ut metus eu leo interdum volutpat.\n          <\/li>\n<li>Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.\n          <\/li>\n<\/ul><\/div>\n<p><!-- \/content --><\/p>\n<div data-role=\"footer\">\n<h4>\n          Look forward to seeing you soon!<br \/>\n        <\/h4>\n<\/p><\/div>\n<p><!-- \/header -->\n    <\/div>\n<p><!-- \/page --><\/p>\n<div data-role=\"page\" id=\"news\" data-add-back-btn=\"true\">\n<div data-role=\"header\">\n<h1>\n          My Group &#8211; News<br \/>\n        <\/h1>\n<\/p><\/div>\n<p><!-- \/header --><\/p>\n<div data-role=\"content\">\n<h3>\n          News<br \/>\n        <\/h3>\n<ul>\n<li>News 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n          <\/li>\n<li>News 2: Quisque ut metus eu leo interdum volutpat.\n          <\/li>\n<li>News 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.\n          <\/li>\n<\/ul><\/div>\n<p><!-- \/content --><\/p>\n<div data-role=\"footer\">\n<h4>\n          Look forward to seeing you soon!<br \/>\n        <\/h4>\n<\/p><\/div>\n<p><!-- \/header -->\n    <\/div>\n<p><!-- \/page --><\/p>\n<p>  <\/body><br \/>\n<\/html><\/p>\n<p>[\/cc]<\/p>\n<p>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.<\/p>\n<p>[cc lang=&#8221;html&#8221;]<br \/>\n  <head><br \/>\n    <title>Group App<\/title><br \/>\n    <meta name=\"viewport\" content=\"width=device-width, initial-scale=1\">\n    <link rel=\"stylesheet\" href=\"http:\/\/code.jquery.com\/mobile\/1.2.1\/jquery.mobile-1.2.1.min.css\" type=\"text\/css\">\n    <script src=\"http:\/\/code.jquery.com\/jquery-1.8.3.min.js\" type=\"text\/javascript\"><\/script><br \/>\n    <script src=\"http:\/\/code.jquery.com\/mobile\/1.2.1\/jquery.mobile-1.2.1.min.js\" type=\"text\/javascript\"><\/script><br \/>\n  <\/head><br \/>\n[\/cc]<\/p>\n<p>To create a button that moves the user from the home screen to the &#8220;Events&#8221; page, use the following code. The &#8220;#events&#8221; string corresponds to the &#8220;id&#8221; attribute of the page &#8220;events&#8221;. To see an example of opening a dialog box, look at the &#8220;#contact_us&#8221; link to see how that was done.<\/p>\n<p>[cc lang=&#8221;html&#8221;]<\/p>\n<li><a href=\"#events\">Events<\/a><\/li>\n<p>[\/cc]<\/p>\n<p>The following code is responsible for creating the &#8220;Events&#8221; 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 &#8220;data-add-back-btn&#8221; attribute and set it to true.<\/p>\n<p>[cc lang=&#8221;html&#8221;]<\/p>\n<div data-role=\"page\" id=\"events\" data-add-back-btn=\"true\">\n<div data-role=\"header\">\n<h1>\n          My Group &#8211; Events<br \/>\n        <\/h1>\n<\/p><\/div>\n<p><!-- \/header --><\/p>\n<div data-role=\"content\">\n<h3>\n          Events<br \/>\n        <\/h3>\n<ul>\n<li>Event 1: Lorem ipsum dolor sit amet, consectetur adipiscing elit.\n          <\/li>\n<li>Event 2: Quisque ut metus eu leo interdum volutpat.\n          <\/li>\n<li>Event 3: Vestibulum accumsan erat vitae leo imperdiet faucibus.\n          <\/li>\n<\/ul><\/div>\n<p><!-- \/content --><\/p>\n<div data-role=\"footer\">\n<h4>\n          Look forward to seeing you soon!<br \/>\n        <\/h4>\n<\/p><\/div>\n<p><!-- \/footer -->\n    <\/div>\n<p><!-- \/page --><br \/>\n[\/cc]<\/p>\n<p>So&#8230; How do you make this HTML app available in the Android or iOS app store?  <a href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=828\" title=\"Learn to Build Your Own Mobile App using PhoneGap\" target=\"_blank\">Check out our post introducing PhoneGap<\/a>.<\/p>\n<p>Let me know if you have any questions or comments!<\/p>\n<p>Related posts:<\/p>\n<ul>\n<li><a title=\"Learn how to create a mobile app in minutes using Corona SDK\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=355\"  target=\"_blank\">Learn how to create a mobile app in minutes using Corona SDK<\/a><\/li>\n<li><a title=\"Learn to Build Your Own Conversational Bot using ChatScript\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=795\"  target=\"_blank\">Learn to Build Your Own Conversational Bot using ChatScript<\/a><\/li>\n<li><a title=\"How To 3D Print Your Minecraft Creations\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=738\"  target=\"_blank\">How To 3D Print Your Minecraft Creations<\/a><\/li>\n<li><a title=\"Benefits of Teaching Kids To Code That No One Is Talking About\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=623\"  target=\"_blank\">Benefits of Teaching Kids To Code That No One Is Talking About<\/a><\/li>\n<li><a title=\"5 reasons to love Khan academy for computer science\" href=\"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/?p=202\"  target=\"_blank\">5 reasons to love Khan academy for computer science<\/a><\/li>\n<\/ul>\n<p>&nbsp;<\/p>\n\n<!-- Facebook Like Button v1.9.6 BEGIN [http:\/\/blog.bottomlessinc.com] -->\n<iframe src=\"http:\/\/www.facebook.com\/plugins\/like.php?href=http%3A%2F%2Finspiredtoeducate.net%2Finspiredtoeducate%2Fhow-to-build-your-mobile-app-using-html%2F&amp;layout=standard&amp;show_faces=false&amp;width=450&amp;action=like&amp;colorscheme=light\" scrolling=\"no\" frameborder=\"0\" allowTransparency=\"true\" style=\"border:none; overflow:hidden; width:450px; height: 30px; align: left; margin: 2px 0px 2px 0px\"><\/iframe>\n<!-- Facebook Like Button END -->\n","protected":false},"excerpt":{"rendered":"<p>Are you looking for an easy way to get started building mobile apps? \u00a0 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. \u00a0 This free tool builds upon [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[15,16,8,1],"tags":[],"_links":{"self":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/849"}],"collection":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/comments?post=849"}],"version-history":[{"count":26,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/849\/revisions"}],"predecessor-version":[{"id":873,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/posts\/849\/revisions\/873"}],"wp:attachment":[{"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/media?parent=849"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/categories?post=849"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/inspiredtoeducate.net\/inspiredtoeducate\/wp-json\/wp\/v2\/tags?post=849"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}