{"id":18,"date":"2013-06-02T13:57:43","date_gmt":"2013-06-02T13:57:43","guid":{"rendered":"http:\/\/thomasgr.im\/shares\/?p=18"},"modified":"2013-08-11T10:28:04","modified_gmt":"2013-08-11T10:28:04","slug":"making-app-with-phonegap-jqm-part-1-simple-html5-skeleton","status":"publish","type":"post","link":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/","title":{"rendered":"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton"},"content":{"rendered":"

In this series, I will explain how I am using PhoneGap<\/a> & jQuery.Mobile<\/a> (on top of jQuery<\/a>) to build an App for Android while being able to test it in my desktop browser. This is not an introduction on PhoneGap or jQuery.Mobile per se. I will not<\/strong> focus on Java and I won’t explain how to install PhoneGap or build the app from an IDE<\/abbr> like Eclipse; you may need to read some other tutorial<\/a> first to cover those points and then come back to this page when you can build your app from your IDE. Don’t worry too much though, you won’t need much knowledge of Java for I will expose some ways we can use to test the app in a desktop browser without the need to recompile it everytime we change something.<\/p>\n

Now this is my first app, which means that most of the code I’ve put in so far required some trial-and-error for it to work. Hopefully you’ll find (parts of) this tutorial useful and you’ll be able to code your way faster than me!<\/p>\n

Note:<\/u> I wouldn’t dare pretending my code is perfect, and for the very same reason it’s my first app there are most certainly better ways of doing some things; if you have any question or remark concerning my code, please do not hesitate to leave a comment<\/strong>, that’s the best way for everyone to improve their skills.<\/p>\n

Table of Contents<\/h2>\n

Here is how the tutorial is split:<\/p>\n

\n
Part I: A Simple HTML<\/abbr>5 Skeleton<\/dt>\n
HTML5 basic structure, resources order, multiple pages and a menu with icons<\/dd>\n
Part II: Loading JavaScript The Right Way<\/a><\/dt>\n
JavaScript load order, jqm settings, App.init() & execution levels<\/dd>\n
Part III: A Stateless Authentication Layer<\/a><\/dt>\n
REST<\/abbr> concepts, public\/private tokens, some PHP<\/abbr> server code<\/dd>\n
Part IV: ?<\/dt>\n
I’m not there yet!<\/dd>\n<\/dl>\n

Let’s Start With a (Very) Basic HTML5 Template<\/h2>\n


\nHere’s the basis for all the code we’ll put in index.html<\/kbd>. As you probably know, the HTML, CSS<\/abbr> & JS<\/abbr> code we’ll write in \/assets\/www<\/kbd> will be loaded and executed by a modern<\/strong> browser like Chrome for Mobile<\/a>, which means we can use most of the HTML5 specification in a reliable way, without having to fix other browser’s edge-cases.<\/p>\n

<!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n\t<meta charset="utf-8" \/>\r\n\t<title>App<\/title>\r\n\t<meta name="viewport" content="width=device-width, initial-scale=1" \/>\r\n\t<script charset="utf-8" src="js\/app.js"><\/script>\r\n\t<link rel="stylesheet" href="css\/app.css" \/>\r\n<\/head>\r\n<body>\r\n\t<h1>Hello!<\/h1>\r\n<\/body>\r\n<\/html><\/pre>\n
Not much to say so far, this is a bit plain but don’t worry we’ll soon add lots of stuff! Make sure the file loads correctly in your desktop browser as well as on your emulator, better make sure the basics work as expected before we add a bunch of complex stuff.<\/p>\n
Note the reference to js\/app.js<\/kbd> which will contain as much of the app’s JS code as possible, and css\/app.css<\/kbd> which is the same with CSS<\/p>\n
The <meta name=\"viewport\" \/><\/kbd> tag fixes a layout bug related to zooming, in some devices.<\/p>\n
Now I know that I promised not to focus on Java, but if your app is not supposed to be displayed horizontally, know that you can prevent the screen rotation by adding this to AndroidManifest.xml<\/kbd>, as a property of your main activity:<\/p>\n
<activity ... android:screenOrientation="portrait"><\/pre>\n
How to Load Resources In The Right Order<\/h2>\n
Now let’s add some of the resources (JS & CSS) which we’ll use throughout our app. We need to add a bunch of JS libraries —PhoneGap, jQuery & jQuery.Mobile— and their corresponding stylesheets. Because all of those libraries are critical for the app to work as expected, they will have to be loaded in the <head><\/kbd> part of the file so that they load as soon as possible. We will see in the next part of this tutorial how to make sure everyone of them has loaded properly before doing stuff in JavaScript.<\/p>\n
The load order is critical as well. You want to load PhoneGap (cordova-2.7.0.js<\/kbd>) first because it’s a pretty big library which has a bunch of self-executing code in it, used to establish a link between the HTML page and the phone native code. Then we have jQuery (jquery-1.9.1.min.js<\/kbd>) which in itself is pretty much just a library; we need it loaded before jQuery.Mobile (jquery-1.3.1.min.js<\/kbd>) because the latter does also have a lot of self-executing code used to modify the DOM<\/abbr> to make it more mobile-fashioned.<\/p>\n
Note that I have reserved some space for plugins your app might want to use later on, like FacebookConnect<\/a> or ToastNotifications<\/a>, because those are the kind of plugins which would probably need to be loaded early.<\/p>\n
As for the stylesheets, this is rather straight-forward: jQuery.Mobile, FontAwesome which I’ll use later on as icons throughout the app, and finally our own stylesheet.<\/p>\n
<head>\r\n\t<meta charset="utf-8" \/>\r\n\t<title>App<\/title>\r\n\t<meta name="viewport" content="width=device-width, initial-scale=1" \/>\r\n<!-- critical -->\r\n\t<!-- PhoneGap, jQuery, App, jQuery.Mobile -->\r\n\t<script charset="utf-8" src="js\/cordova-2.7.0.js"><\/script>\r\n\t<script charset="utf-8" src="js\/jquery-1.9.1.min.js"><\/script>\r\n\t<script charset="utf-8" src="js\/app.js"><\/script>\r\n\t<script charset="utf-8" src="js\/jquery.mobile-1.3.1.min.js"><\/script>\r\n<!-- critical -->\r\n<!-- plugins -->\r\n<!-- plugins-->\r\n<!-- themes -->\r\n\t<!-- jQuery Mobile, FontAwesome & App -->\r\n\t<link rel="stylesheet" href="css\/jquery-mobile\/jquery.mobile-1.3.1.min.css" \/>\r\n\t<link rel="stylesheet" href="css\/font-awesome\/css\/font-awesome.min.css" \/>\r\n\t<link rel="stylesheet" href="css\/app.css" \/>\r\n<!-- \/themes -->\r\n<\/head><\/pre>\n
jQuery.Mobile Page Structure<\/h2>\n
jQuery.Mobile allows us to integrate multiple activities into the same file, which is exactly what we’ll do in our app. For this to work, each page has to be built the following way:<\/p>\n
<div data-role="page" id="ActivityFoo">\r\n\t<div data-role="header">\r\n\t\t<h1>Header<\/h1>\r\n\t<\/div>\r\n\t<div data-role="content">\r\n\t\t<h1>Content<\/h1>\r\n\t<\/div>\r\n\t<div date-role="footer">\r\n\t\t<h1>Footer<\/h1>\r\n\t<\/div>\r\n<\/div><\/pre>\n
Here’s how we’d integrate two activities into our index.html<\/kbd> file :<\/p>\n
<body>\r\n\t<div data-role="page" id="ActivityFoo">\r\n\t\t<div data-role="header">\r\n\t\t\t<h1>Header 1<\/h1>\r\n\t\t\t<div class="topmenu" data-role="controlgroup" data-type="horizontal">\r\n\t\t\t\t<a class="current-page-item" href="index.html#ActivityFoo" title="Foo" data-role="button"><i class="fontawesome icon-home"><\/i><\/a>\r\n\t\t\t\t<a href="index.html#ActivityBar" title="Bar" data-role="button"><i class="fontawesome icon-ticket"><\/i><\/a>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t<div data-role="content">\r\n\t\t\t<h1>Content 1<\/h1>\r\n\t\t<\/div>\r\n\t\t<div date-role="footer">\r\n\t\t\t<h1>Footer 1<\/h1>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t<div data-role="page" id="ActivityBar">\r\n\t\t<div data-role="header">\r\n\t\t\t<h1>Header 2<\/h1>\r\n\t\t\t<div class="topmenu" data-role="controlgroup" data-type="horizontal">\r\n\t\t\t\t<a href="index.html#ActivityFoo" title="Foo" data-role="button"><i class="fontawesome icon-home"><\/i><\/a>\r\n\t\t\t\t<a class="current-page-item" href="index.html#ActivityBar" title="Bar" data-role="button"><i class="fontawesome icon-ticket"><\/i><\/a>\r\n\t\t<\/div>\r\n\t\t<div data-role="content">\r\n\t\t\t<h1>Content 2<\/h1>\r\n\t\t<\/div>\r\n\t\t<div date-role="footer">\r\n\t\t\t<h1>Footer 2<\/h1>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/body><\/pre>\n
… and so on. I have added the basis for a navigation menu, using icons from FontAwesome. Here’s the result:<\/p>\n
\"A
A simple yet beautiful navigation menu using FontAwesome icons<\/p><\/div>\n
The Final Code<\/h2>\n
<!DOCTYPE HTML>\r\n<html>\r\n<head>\r\n\t<meta charset="utf-8" \/>\r\n\t<title>App<\/title>\r\n\t<meta name="viewport" content="width=device-width, initial-scale=1" \/>\r\n<!-- critical -->\r\n\t<!-- PhoneGap, jQuery, App, jQuery.Mobile -->\r\n\t<script charset="utf-8" src="js\/cordova-2.7.0.js"><\/script>\r\n\t<script charset="utf-8" src="js\/jquery-1.9.1.min.js"><\/script>\r\n\t<script charset="utf-8" src="js\/app.js"><\/script>\r\n\t<script charset="utf-8" src="js\/jquery.mobile-1.3.1.min.js"><\/script>\r\n<!-- critical -->\r\n<!-- plugins -->\r\n<!-- plugins-->\r\n<!-- themes -->\r\n\t<!-- jQuery Mobile, FontAwesome & App -->\r\n\t<link rel="stylesheet" href="css\/jquery-mobile\/jquery.mobile-1.3.1.min.css" \/>\r\n\t<link rel="stylesheet" href="css\/font-awesome\/css\/font-awesome.min.css" \/>\r\n\t<link rel="stylesheet" href="css\/app.css" \/>\r\n<!-- \/themes -->\r\n<\/head>\r\n<body>\r\n\t<div data-role="page" id="ActivityFoo">\r\n\t\t<div data-role="header">\r\n\t\t\t<h1>Header 1<\/h1>\r\n\t\t\t<div class="topmenu" data-role="controlgroup" data-type="horizontal">\r\n\t\t\t\t<a class="current-page-item" href="index.html#ActivityFoo" title="Foo" data-role="button"><i class="fontawesome icon-home"><\/i><\/a>\r\n\t\t\t\t<a href="index.html#ActivityBar" title="Bar" data-role="button"><i class="fontawesome icon-ticket"><\/i><\/a>\r\n\t\t\t<\/div>\r\n\t\t<\/div>\r\n\t\t<div data-role="content">\r\n\t\t\t<h1>Content 1<\/h1>\r\n\t\t<\/div>\r\n\t\t<div date-role="footer">\r\n\t\t\t<h1>Footer 1<\/h1>\r\n\t\t<\/div>\r\n\t<\/div>\r\n\t<div data-role="page" id="ActivityBar">\r\n\t\t<div data-role="header">\r\n\t\t\t<h1>Header 2<\/h1>\r\n\t\t\t<div class="topmenu" data-role="controlgroup" data-type="horizontal">\r\n\t\t\t\t<a href="index.html#ActivityFoo" title="Foo" data-role="button"><i class="fontawesome icon-home"><\/i><\/a>\r\n\t\t\t\t<a class="current-page-item" href="index.html#ActivityBar" title="Bar" data-role="button"><i class="fontawesome icon-ticket"><\/i><\/a>\r\n\t\t<\/div>\r\n\t\t<div data-role="content">\r\n\t\t\t<h1>Content 2<\/h1>\r\n\t\t<\/div>\r\n\t\t<div date-role="footer">\r\n\t\t\t<h1>Footer 2<\/h1>\r\n\t\t<\/div>\r\n\t<\/div>\r\n<\/body>\r\n<\/html><\/pre>\n
Sorry if this first part was a bit slow, we’ll soon be looking at some more interesting stuff. Part 2 of this tutorial<\/a> should be published within a few hours\/days; in the mean time, happy coding! UPDATE:<\/strong> It’s online, check it out!<\/p>\n
<\/p>\n","protected":false},"excerpt":{"rendered":"
In this series, I will explain how I am using PhoneGap & jQuery.Mobile (on top of jQuery) to build an App for Android while being able to test it in my desktop browser. This is not an introduction on PhoneGap or jQuery.Mobile per se. I will not focus on Java and I won’t explain how to install …read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":72,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"categories":[10,2],"tags":[19,18,12,13,14,11],"class_list":["post-18","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-mobile","category-programming","tag-conception","tag-html5","tag-javascript","tag-jquery","tag-jquery-mobile","tag-phonegap"],"acf":[],"yoast_head":"\nMaking An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton - ThomasGR.IM<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton - ThomasGR.IM\" \/>\n<meta property=\"og:description\" content=\"In this series, I will explain how I am using PhoneGap & jQuery.Mobile (on top of jQuery) to build an App for Android while being able to test it in my desktop browser. This is not an introduction on PhoneGap or jQuery.Mobile per se. I will not focus on Java and I won’t explain how to install ...read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/\" \/>\n<meta property=\"og:site_name\" content=\"ThomasGR.IM\" \/>\n<meta property=\"article:published_time\" content=\"2013-06-02T13:57:43+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2013-08-11T10:28:04+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/thomasgr.im\/shares\/wp-content\/uploads\/sites\/3\/2013\/06\/PhoneGap.png\" \/>\n\t<meta property=\"og:image:width\" content=\"512\" \/>\n\t<meta property=\"og:image:height\" content=\"512\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Thomas\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\\\/\\\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#article\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/\"},\"author\":{\"name\":\"Thomas\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/#\\\/schema\\\/person\\\/a9f452898a055ceb0f17967802c852da\"},\"headline\":\"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton\",\"datePublished\":\"2013-06-02T13:57:43+00:00\",\"dateModified\":\"2013-08-11T10:28:04+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/\"},\"wordCount\":2117,\"commentCount\":5,\"image\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2013\\\/06\\\/PhoneGap.png\",\"keywords\":[\"Conception\",\"HTML5\",\"JavaScript\",\"jQuery\",\"jQuery.Mobile\",\"PhoneGap\"],\"articleSection\":[\"Mobile\",\"Programming\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/\",\"url\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/\",\"name\":\"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton - ThomasGR.IM\",\"isPartOf\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#primaryimage\"},\"image\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#primaryimage\"},\"thumbnailUrl\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2013\\\/06\\\/PhoneGap.png\",\"datePublished\":\"2013-06-02T13:57:43+00:00\",\"dateModified\":\"2013-08-11T10:28:04+00:00\",\"author\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/#\\\/schema\\\/person\\\/a9f452898a055ceb0f17967802c852da\"},\"breadcrumb\":{\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#primaryimage\",\"url\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2013\\\/06\\\/PhoneGap.png\",\"contentUrl\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/wp-content\\\/uploads\\\/sites\\\/3\\\/2013\\\/06\\\/PhoneGap.png\",\"width\":512,\"height\":512,\"caption\":\"PhoneGap - www.phonegap.com\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/2013\\\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\\\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/#website\",\"url\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/\",\"name\":\"ThomasGR.IM\",\"description\":\"Geeky Musing\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/#\\\/schema\\\/person\\\/a9f452898a055ceb0f17967802c852da\",\"name\":\"Thomas\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24002a8c89532079ac75ffa31bf174b5f4b88ef34601417767fd11b3d48436b7?s=96&d=mm&r=g\",\"url\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24002a8c89532079ac75ffa31bf174b5f4b88ef34601417767fd11b3d48436b7?s=96&d=mm&r=g\",\"contentUrl\":\"https:\\\/\\\/secure.gravatar.com\\\/avatar\\\/24002a8c89532079ac75ffa31bf174b5f4b88ef34601417767fd11b3d48436b7?s=96&d=mm&r=g\",\"caption\":\"Thomas\"},\"sameAs\":[\"https:\\\/\\\/thomasgr.im\\\/\"],\"url\":\"https:\\\/\\\/thomasgr.im\\\/shares\\\/author\\\/thomadmin\\\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton - ThomasGR.IM","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/","og_locale":"en_US","og_type":"article","og_title":"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton - ThomasGR.IM","og_description":"In this series, I will explain how I am using PhoneGap & jQuery.Mobile (on top of jQuery) to build an App for Android while being able to test it in my desktop browser. This is not an introduction on PhoneGap or jQuery.Mobile per se. I will not focus on Java and I won’t explain how to install ...read more","og_url":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/","og_site_name":"ThomasGR.IM","article_published_time":"2013-06-02T13:57:43+00:00","article_modified_time":"2013-08-11T10:28:04+00:00","og_image":[{"width":512,"height":512,"url":"https:\/\/thomasgr.im\/shares\/wp-content\/uploads\/sites\/3\/2013\/06\/PhoneGap.png","type":"image\/png"}],"author":"Thomas","twitter_card":"summary_large_image","schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#article","isPartOf":{"@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/"},"author":{"name":"Thomas","@id":"https:\/\/thomasgr.im\/shares\/#\/schema\/person\/a9f452898a055ceb0f17967802c852da"},"headline":"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton","datePublished":"2013-06-02T13:57:43+00:00","dateModified":"2013-08-11T10:28:04+00:00","mainEntityOfPage":{"@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/"},"wordCount":2117,"commentCount":5,"image":{"@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#primaryimage"},"thumbnailUrl":"https:\/\/thomasgr.im\/shares\/wp-content\/uploads\/sites\/3\/2013\/06\/PhoneGap.png","keywords":["Conception","HTML5","JavaScript","jQuery","jQuery.Mobile","PhoneGap"],"articleSection":["Mobile","Programming"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/","url":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/","name":"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton - ThomasGR.IM","isPartOf":{"@id":"https:\/\/thomasgr.im\/shares\/#website"},"primaryImageOfPage":{"@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#primaryimage"},"image":{"@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#primaryimage"},"thumbnailUrl":"https:\/\/thomasgr.im\/shares\/wp-content\/uploads\/sites\/3\/2013\/06\/PhoneGap.png","datePublished":"2013-06-02T13:57:43+00:00","dateModified":"2013-08-11T10:28:04+00:00","author":{"@id":"https:\/\/thomasgr.im\/shares\/#\/schema\/person\/a9f452898a055ceb0f17967802c852da"},"breadcrumb":{"@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#primaryimage","url":"https:\/\/thomasgr.im\/shares\/wp-content\/uploads\/sites\/3\/2013\/06\/PhoneGap.png","contentUrl":"https:\/\/thomasgr.im\/shares\/wp-content\/uploads\/sites\/3\/2013\/06\/PhoneGap.png","width":512,"height":512,"caption":"PhoneGap - www.phonegap.com"},{"@type":"BreadcrumbList","@id":"https:\/\/thomasgr.im\/shares\/2013\/making-app-with-phonegap-jqm-part-1-simple-html5-skeleton\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/thomasgr.im\/shares\/"},{"@type":"ListItem","position":2,"name":"Making An App With PhoneGap & jQm Part I: A Simple HTML5 Skeleton"}]},{"@type":"WebSite","@id":"https:\/\/thomasgr.im\/shares\/#website","url":"https:\/\/thomasgr.im\/shares\/","name":"ThomasGR.IM","description":"Geeky Musing","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/thomasgr.im\/shares\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/thomasgr.im\/shares\/#\/schema\/person\/a9f452898a055ceb0f17967802c852da","name":"Thomas","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/secure.gravatar.com\/avatar\/24002a8c89532079ac75ffa31bf174b5f4b88ef34601417767fd11b3d48436b7?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/24002a8c89532079ac75ffa31bf174b5f4b88ef34601417767fd11b3d48436b7?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/24002a8c89532079ac75ffa31bf174b5f4b88ef34601417767fd11b3d48436b7?s=96&d=mm&r=g","caption":"Thomas"},"sameAs":["https:\/\/thomasgr.im\/"],"url":"https:\/\/thomasgr.im\/shares\/author\/thomadmin\/"}]}},"_links":{"self":[{"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/posts\/18","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/comments?post=18"}],"version-history":[{"count":0,"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/posts\/18\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/media\/72"}],"wp:attachment":[{"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/media?parent=18"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/categories?post=18"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/thomasgr.im\/shares\/wp-json\/wp\/v2\/tags?post=18"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}