Jitendra Shahs FMP

Mobi Academy Introduction

Native Android Applications can be developed in its native code, Java and Iphone applications can be developed in Objective-C but using one or the other means coding 10,000s of lines of code. Smartphone applications can now be made using the same web technologies, websites are made of and total up to 200 lines of code for a simple application! The languages used are HTML5, CSS3 & JavaScript buy using the right frameworks. All you really need to understand is the HTML as most of the heavy lifting will be done for you!

HTML5 HTML5 Stands for Hyper Text Mark-up Language is a mark up language which is written within < / > brackets and is used to represent and display data inside of web browsers, on the internet. The latest version of HTML5 has made the coding process easier and more logical thanks to its new set of meaningful tags such as the header tag for the header, the nav tag used for navigation and the p tag used for paragraphs <header> Header Content </header> <nav> Navigation Links </nav> <p> Paragraph </p>

CSS3 CSS3 CSS which stands for Cascading Style Sheets is a styling language that works with HTML to make the HTML look good and is used for positioning and presenting HTML however you want. Using this alongside HTML, CSS is used to describe the presentation for HTML tags such as the font, colour, layout and size. When it comes to writing CSS, a HTML element is called and the CSS code is written inside curly brackets { } and every line of CSS ends with a semi colon ; HTML tag { The CSS code goes here; }

JQuery Mobile

Jitendra Shahs FMP

Mobi Academy

jQuery is a language developed from JavaScript and is the easy version of JavaScript! jQuery Mobile (developed by the people behind jQuery) is a touch optimized user interface framework compatible with most smart phone devices. Designed to simplify the development of mobile applications, the jQuery mobile framework has all the CSS and JavaScript code you need to develop popular user interface such as mobile menu items and navigation. To use it, all you need to do is use the frameworks preset HTML tags and everything else is generated by the framework. Their write less, do more motto sums up the framework and is why you do not need to know any JavaScript or CSS what so ever to get started but will always come in handy if you are familiar, even on a basic level. Code Editors To start coding, you will need a code editor. Notepad is an obvious and popular choice but is not the most practical choice as it was not originally build to coding to begin with. Code editors, built for coding allow you to efficiently test your code on the browsers installed on to your computer, they colour code and highlight lines of code making it easier to follow and read and also, using a code editor to develop is over all, good practice. Some popular code editors are: Notepad++ Lightweight, has many features and can also be extended with plugins. Originally built for Windows but can be used on all major Operating Systems Comodo Edit Just as good as Notepad++ but with less features. One of its popular features is just like the firebug feature of being able to select elements inside a What You See Is What You Get Editor (WYSIWUG) to pick out the code and directly edit it! Firebug This is an in-browser code editor and will be looked at in a later section for when it comes to customizing the application. This editor isnt so good for starting off development as it is for customizing what you have developed later. You can also use it to view other websites and web apps source code and is good to learn code or adapt from other peoples.

Getting Started To get started, open up your text editor and save the blank file as index.html. The .html extension will tell your text editor that you are starting a web page and that to open it using your default web browser. Whenever you land on your website the index page is the first page you land on. This is your home page.

Jitendra Shahs FMP

Mobi Academy

The first line of code is going to be < ! doctype > which tells the browser you will be writing HTML code <!DOCTYPE>

Inside The head After the doctype comes three important HTML tags, the html tag, the head and the body. Everything you ever write will be inside a single html tag and will finish with a single html tag. This is to let the browser know that whatever you write in between these tags is html code The head tag contains all the information of the website such as the title of the page along with the files which play a part to make the page work which in this case are the JavaScript and CSS files. All of this is hidden and will not be seen by the browser, it will just make things work. The body is where you code all the physical items for the app and this will be seen in the browser. To help you remember what goes where: The head is the brain of the page and the body is where all the organs are to make everything work <head> <title>Mobi Academy</title> <link rel="stylesheet" href="css/style.css"> <script src="js/script.min.js"></script> </head>

<body> <h1> Header </h1> <p> Paragraph </p> </body> The CDN The Content Delivery Network (also known as CDN) is basically a few lines of code you just copy and paste inside your web document. This then allows you to use whatever the hosted code is trying to do without having to download any files. A major advantage to this is that the web page doesnt have to load these files as they are already hosted online and just makes use of its code. This allows the web page to load much faster.

Jitendra Shahs FMP

Mobi Academy

However, if you wanted direct access to these files to, for example, edit them then you would have to download them onto your computer and place them in the same folder as your project. jQuery Mobile can be used just by copying and pasting three lines of code inside your head tag. You can find the three lines of code on their websites download page. <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.css" /> <script src="http://code.jquery.com/jquery-1.9.1.min.js"></script> <script src="http://code.jquery.com/mobile/1.3.1/jquery.mobile-1.3.1.min.js"></script>

Data Role Explained jQuery Mobiles uses data-roles to bring up elements onto a web page. These are basically words or phrases inside speech marks which are preset to a certain function. Using these data role functions will allow you to utilize all user interface features jQuery has to offer, without coding them and are quite simple to use. For example, a buttons data- role will look like data-role=button and are put inside HTML tags for them to work for that specific element. The data role function does all the hard work for you and allows you to easily pull out elements from jQuery, position elements according to the frameworks presets, theme an element along with some advanced functions. Thanks to data-roles, bare minimum coding is involved in developing your app as you let data-roles take care of all the heavy lifting If you wanted, for example a link tag which links to a seprate page if a data-role button function is applied, the link will turn into a button <a href="index.html">Link button</a> <a href="index.html" data-role="button">Link button</a>

Header This is the toolbar on the top which commonly contains the title contain navigational or action elements such as the menu or back button which are positioned on either the left or the right of the header bar. Using navigational elements inside the header bar allows you to save space but using too many will make your app look confusing and messy. To generate a header, all you have to do is make a div with the data-role header inside of it

Jitendra Shahs FMP

Mobi Academy

Just like on websites, the header uses the heading tag H1. These tags are sized in order of how big or small you may want the heading to be (H1 being the biggest to H6 being the smallest). After the header, close the div tag you originally created The heading tag is useful for titling each page of your application <div data-role="header"> <h1>Header Title</h1> </div>

Footer The footer works in the same way as the header, but at the bottom of your application. This is the toolbar that works in a similar way the header does button the bottom which can commonly contain the sub title along with sub navigational or action elements positioned either the left or the right of the footer bar. Using navigational elements inside the footer bar allows you to save space but using too many will make your app look confusing and messy. To generate a header, all you have to do is make a div with the data-role footer inside of it Just like the header, the footer uses the heading tag H1. These tags are sized in order of how big or small you may want the heading to be (H1 being the biggest to H6 being the smallest). After the header, close the div tag you originally created The footer tag is useful for sub titling each page of your application <div data-role="Footer"> <h1>Footer Title</h1> </div>

Fixed Content Fixed content (also known as fixed positioning) is content which stays on the screen, in the same position no matter how much you scroll. These are known as global elements and are useful for things like immediate navigation. A good example of this is the header or even the menu button which the user might always want access to or even menu items such as previous or next pages. This can save the user time scrolling up and down each time they want to go elsewhere. You can achieve this by using the data-role fixed attribute inside which ever element you want fixing so that they stay in the same place regardless of how far you have scrolled <div data-role="header" data-role=fixed >

Jitendra Shahs FMP <h1>Header Title</h1> </div>

Mobi Academy

Multiple Pages If your applications page has too much going on then you can also separate each page into its own HTML file which will also make the code easier to read, follow and organize. This might effect loading times but doesnt seem to be much of a problem in most cases. This method of other website pages has been the orthodox method of making websites and linking to web pages for years and should be familiar to anyone whos familiar with making websites. To link to another page, use the HTML link tag. When you specify which file it is going to link to, make sure you add the . Html on the end of it so that it links to the right file too or it either will link to another file with the same name or not work all together. Close the tag using the </ a> to let the page know that the link ends here <a href="page1.html">First Menu</a> <a href="page2.html">Second Menu</a>

Single Page App Instead of dealing with multiple HTML web page files for each page you create (the tradition method) you can create all of your pages inside a single page. Advantage to this is that it increases loading speeds but as you write more code on to the single page, it may become harder to read and to keep up with it. <a href="#page1">First Menu</a> <a href="#page2">Second Menu</a>

List Menu The list menu is a typical vertical menu you find on Smartphone applications which most Smartphone users are familiar with. This list of items can group the same type of navigation elements together in form of a listed menu and you can have unlimited amount of items. If your application grows too complex then you might want to think about adding secondary menu list items, on another page from your main menu items, allowing you to organize your menu more effectively. Using HTMLs unordered list tag </ ul> you can generate a list menu. An ordered list </ ol> will generate a list with numbers along the side which you can experiment with

Jitendra Shahs FMP <ul data-role="listview">

Mobi Academy

<li><a href="page1.html">First Menu</a></li> <li><a href="page2.html">Second Menu</a></li> <li><a href="page3.html">Third Menu</a></li> </ul>

Customizing List menus List menu items can be customized by using a numbered list, using thumbnails, or even icons depending on the look you are trying to achieve. List dividers can be used to title each list in the page, so for example, List A then a number of items follow it followed by List B all in a single list. Unlink lists which are generated using the unordered list tag </ ul>, a list divider uses just a list tag </ li> along with the data-role list-divider attribute <ul data-role="listview"> <li data-role="list-divider">List A</li> <li><a href="page1.html">First Menu</a></li> <li><a href="page2.html">Second Menu</a></li> <li data-role="list-divider">List A</li> <li><a href="page3.html">Third Menu</a></li> <li><a href="page4.html">Fourth Menu</a></li> </ul>

Nav Bar A basic navigational element similar to the list menu but instead of being a vertical list, the navigation bar is a horizontal list. Unlike the list menu where you can have unlimited menu items, you can only have up to five nav bar items. This nav bar can either be placed below the header for example, as secondary navigation or above the footer depending on what you want to achieve with it. A good example of how to use the nav bar are the previous and next buttons and it is common for them to be fixed items

Jitendra Shahs FMP <div data-role=navbar> <ul>

Mobi Academy

<li><a href=previous.html>Previous</a></li> <li><a href=next.html>Next</a></li> </ul> </div>

Basic Buttons Buttons are used primarily for navigation and are developed in a similar way to HTML links as every other linked item. This means they behave in the same way every other form of navigation works. You can get a basic button which is shown below and you can also have grouped buttons and inline buttons. To generate a button, the button data-role attribute is used To improve user experience, these buttons come with a preset styling which makes the button behave and look like a real button so that whenever it is pushed, it gets indented just like a real button. <a href=page1.html data-role=button >Button 1</a> <a href=page2.html data-role=button >Button 2</a>

Group Buttons Group buttons are the same as basic buttons but visually contained together in a single block by using the data-role controlgroup attribute. These types of buttons are used primarily for navigation and are developed in a similar way to HTML links. This means they behave in the same way every other form of navigation works. You can merge buttons horizontally or vertically depending on what you are trying to achieve. The default option is vertical but if you want to set the buttons to align horizontally then simply add data-type=horizontal to the end of the data role attribute. Please not, to set these horizontal, this time it is not data-role nut data-type To improve user experience, these buttons come with a preset styling which makes the button behave and look like a real button so whenever it is pushed, it gets indented. <div data-role=controlgroup data-type=horizontal> <a href=page1.html data-role=button >Button 1</a> <a href=page2.html data-role=button >Button 2</a>

Jitendra Shahs FMP </div>

Mobi Academy

Button Icons The jQuery Framework comes with a set of icons (also known as glyph icons) which are commonly used in mobile applications. A major advantage to these icons is that it will save you so much time from having to reinvent the wheel and can also be used on all the menu items including the nav bar and list menu An obvious downfall to using these icons is that they can look amateur, look out of place inside your app or look too generic as there are many other applications in the stores and online right now who have already overused these icons before To use jQuery Mobiles selected set of button icons you will need to use data-icon attribute inside of the button tag which will generate one of the preset icons for you. Please note that this is not the data-role attribute but data-icon attribute. The icon sets are as follows: left arrow, right arrow, up arrow, down arrow, delete, plus, minus, check, gear, refresh, forward, back, grid, star, alert, info, home and search. Other custom glyph icons can be downloaded from the internet and included inside of your app simply by adding the glphs style sheets inside the </ head> section of your application data-icon=arrow-l data-icon=arrow-r data-icon=arrow-u data-icon=arrow-d <a href=page1.html data-role=button data-icon=info >Button 1</a>

Button Icon Positions The jQuery Framework comes with a set of icons (also known as glyph icons) which are commonly used in mobile applications. By default these icons are set to the left side but can also be set to the right, top or bottom of a button

Text There are two main types of text that you need to be aware of. Titles and paragraphs.

Jitendra Shahs FMP

Mobi Academy

Titles or Headings work similarly to headers and footers but with any data-role attributes. Paragraphs are basically surrounded by the HTML paragraph tag, again without any data-role attributes <h1>This is a title</h1> <p>Paragraph</p>

Images Images are relatively straight forward, if you want to implement an image inside of your app then you can just use the HTML image tag and code it in using a single line of code. jQuery mobile will do the rest and resize the image according to the screen size of your mobile phone or browser making your image fully responsive. If you wanted to customize this image in any way then a few lines of CSS code will need to be coded. Below you can see an example of an image inside of the header <header data-role="header"> <h1>My App</h1> <img src="images/smiley.gif"> </header> Collapsing When theres too much content on a page you can neatly organize it all in collapsible drop down boxes (also known as accordion menus). This drop down feature is not only good for long text but can work with most elements jQuery Mobile offers including long list menu items for when your menu list starts becoming too long and complex. You can achieve this collapsible content by using the data-role collapse attribute inside of whatever youre trying to collapse. For example, if you wanted to collapse a list of menus into one heading which drops down, you will put it inside of the tag you are trying to collapse. You can use this feature on paragraphs, forms and most of the user interface elements generated by this framework This feature is good for organizing content that is similar to each other, save the user time by reducing the amount of scrolling they have to do to get to content and also make content much easier to find A disadvantage to this is that everything remains hidden unless the menu is not interacted with so may require the user to open and close each section until they find the content they want. But you can counter this by organizing your drop down boxes sensibly and logically <h1 div data-role="collapsible" >

Jitendra Shahs FMP <p>This is a collapsible paragraph</p> </h1>

Mobi Academy

Form Elements Building a form is easy in jQuery Mobile as all you need to do is use basic HTML tags and the jQuery Mobile framework will do the rest in terms of styling it. You can have a number of form elements such as text input, slider, radio buttons, check boxes, select menus. To start off using a form, all form elements must be coded within the field contain data-role attribute so that these elements can be recognized as a form element by jQuery Mobile. <div data-role="field contain"> This is where all form elements go </div> Text Input Text inputs are text areas where text can be inputted. These are good for writing text in or building forms. You can generate these using basic text input HTML tags. jQuery mobile will style it and do the rest. The label for basic attribute inside the first tag supports text and numerical values Using the label input HTML5 attribute you will need to specify what this text box is for. Common labels apart from text include, password, telephone number, e-mail address, number and telephone number. These can be set by using the following tags: text, password, email, tel and number <div data-role="field contain"> <label for="basic">Title of Box:</label> <input type="text" name="name" id="basic" value=" /> </div>

Slider Sliders in jQuery mobile provide with with an interface element which is good for ranging and picking numbers. For example, if you wanted the user to input a percentage of 1% to 100% then instead of typing that in, you can use the slider to drag across in for form.

Jitendra Shahs FMP

Mobi Academy

The label for slider attribute inside the first tag supports the slider function and will generate the slider. If this isnt specified then the slider will not work. Please note that this is different from the basic label for attribute in a text input tag. You will need to specify the range at what the slider starts on using the value attribute and the lowest and highest points of the slider using the min and max attributes <div data-role="field contain"> <label for="slider">Input slider:</label> <input type="range" name="slider" id="slider" value="0" min="0" max="100" /> </div>

Radio Buttons & Check Boxes Radio buttons are like multiple choice check boxes. These are good for showing multiple options for when a user must choose one. You can use this by using the label type attribute radio The input type radio-choice attribute inside the HTML tag is for each option in order of how you went them to appear. For example radio-choice1 will be for option one and radio-choice2 will be for option two The label for attribute generates a name for each feild <div data-role="field contain"> <input type="radio" name="radio-choice-1" id="radio-choice-1" value="choice-1" checked="checked" /> <label for="radio-choice-1">Option 1</label> <input type="radio" name="radio-choice-1" id="radio-choice-2" value="choice-2" checked="checked" /> <label for="radio-choice-2">Option 2</label> </div>

Select Menus Select menus, also known as drop down menus are similar to radio buttons and check boxes as they provide the same function. These will give you a multiple choice but in form of a drop down box where you chose one option or another. You will need to specify what each option is using the HTML option value attribute

Jitendra Shahs FMP <div data-role="field contain">

Mobi Academy

<label for="select-choice-1" class="select">Title of Select Menu:</label> <select name="select-choice-1" id="select-choice-1"> <option value="red">Red</option> <option value="green">Green</option> <option value="blue">Blue</option> <option value="yellow">Yellow</option> </select> </div>

Search A search bar lets anyone get to content immediately, especially for people who know exactly what they are looking for or do not want to browse through information they might not require. jQuery mobile offers an AJAX search feature which means that search results are displayed almost immediately without loading anything, as everything is already loaded by the applications framework itself. Again, thanks to jQuery Mobile, everything is coded for you and you can use it simply by writing a line of code. If the user makes a spelling mistake or if the user doesnt know what the term is then the search bar is rendered useless which is why it should not be the only way the user has access to information they want <label for="search-basic">Search Bar Title:</label> <input type="search" name="search" id="search-basic" value="" />

Arranging Elements Interface elements in jQuery mobile can be arranged however you want them to be. For example, if you wanted a button within your header then all you have to do is put the button code inside the header tags. Its simply about the logic of how to arrange the code. Another example is when you want an element to appear just before another element, then the code for this element will be just before the element in question. You can mix and match your elements to achieve the look you want You rearrange almost any element but sometimes you might come across an element which cannot be arranged however you want. This is where you can one of two things. Either find an alternative

Jitendra Shahs FMP

Mobi Academy

way or develop that specific element yourself which will require you to custom code some HTML, CSS and some JavaScript using jQuery. A good example of this is using buttons in jQuery Mobile. Buttons put inside of the content is just as acceptable as buttons put inside of the header or footer for example; the menu button or options button are common elements inside of a typical mobile application <div data-role="header" data-role=fixed > <h1>Header Title</h1> <a href="#" data-role="button" data-icon="gear">Filter</a> <a href="#" data-role="button" data-icon="grid">Menu</a> </div>

Popup jQuery mobile comes with its own popup feature Inside a popup menu, you can have a menu, form or an image depending on what you are trying to achieve Even though popup are annoying, they can serve as good notification functions such as letting the user know something is going wrong, confirming the users interaction by telling them the information is sent or to deliver a reference of some sort such as instructions. To use the popup feature, simply use the data-role popup attribute to a button tag jQuery Mobile offers a variety of popups including: A popup menu Nest Popup menu Popup form Dialogue A popup Image To use any of these all you have to do is wrap whatever content your wanting to popup, inside of a popup menu. If for example, you wanted a standard popup which popups some text, you would put this text inside of HTML paragraph </o> tags and wrap it within the popup tags below The standard popup function which can be seen below: <a href="#popupBasic" data-rel="popup">Open Popup</a> <div data-role="popup" id="popupBasic"> <p>This is a completely basic popup, no options set.<p>

Jitendra Shahs FMP </div>

Mobi Academy

Animation Transitions jQuery Mobile comes with two preset animation transitions for when the user interacts with the app to, for example, go to a different page. The two main ones are slide and flip but you can also use fade, pop, flip, turn, flow, side fade, slide, slide up and slide down. If the user interacted with the navigation to go to a different page then the page will flip or slide into a smooth transition. These transitions can lag on cheaper phones and some android devices due to the devices hardware but work smoothly on IPhones. Other transitions can be done but will require custom coding. To make use of these transitions, simply use the data-transition attribute to a link followed by your desired animation effect. These can be applied to any linked items including popup links. <a href="index.html" data-transition="pop">I'll pop when clicked!</a>

Default Preset Themes jQuery Mobile comes with 5 sets of default themes you can use to customize your application. These themes are Black, Blue, Grey, Yellow and White can be fixed and matched to achieve the look you want. Each theme is assigned a letter which can easily be used and implanted in all aspects or your interface elements. A Black B Blue C Grey D White E - Yellow Although good for prototyping, these are default presets; they have to overused by thousands of applications and will only make your application look very generic. Its a good idea to go straight into the CSS files and edit them, tailoring and customizing each User Interface element to whatever you want To use a preset theme by jQuery, just use the data-theme attribute followed by the theme you would like to use <div data-role="header" data-theme="b"> <h1>Default jQM Page</h1>

Jitendra Shahs FMP </div>

Mobi Academy

The Grid System By default, jQuery Mobile comes with a one column grid system. If you wanted to extend that grid system to two, three or four columns then it is relatively easy to do. These grid system are good for arranging interface elements alongside each other and even for the famous grid menu format you mind on many Smartphone menus and Smartphone applications A major downside to using the default grid systems is that these grid systems are difficult to work with once the application becomes alot more robust. When you want to place interface elements whenever you want, it might feel quite restrictive and will require custom coding but in most cases, isnt a problem Grids work in a similar way to preset themes in the sense that all you need to do is assign a letter to the element depending on which grid you would like to use: A 2 Column Grid B 3 Column Grid C 4 Column Grid D 5 Column Grid Because these grid have already been preset and made by the framework, you just have to use the CSS class to align your elements to which ever grid you would like you use: <div class="ui-grid-a"> <div class="ui-block-a"><strong>I'm Block 1</strong> and text inside will wrap</div> <div class="ui-block-b"><strong>I'm Block 2</strong> and text inside will wrap</div> </div>

CSS Using CSS (Cascading Style Sheets) can be used to customize all aspects of your app. To specifically find which element you want to customize, you can use an in browser code editor called Firefox. This editor allows you to select any element on your app and change its CSS rules in real time. It also allows you to see where the specific lines of CSS code are and in which file. When you are happy with the results, you can changes; you can simply just edit the CSS file itself for the changes to take effect then you will need to refresh your browser.

Jitendra Shahs FMP

Mobi Academy

Do not refresh your page if you are editing the CSS using firebug as you will lose all changes. Refreshing your page is a simple way to just start again. However, if you used the CDN (the three lines of jQuery Mobile code that is hosted online) then you will have to host at least the CSS file inside the same folder as your application to edit the CSS files as you will not be able to edit files you do not have access to.

JQM Alternatives Just like how jQuery Mobile uses HTML handles to generate content, there are other frameworks for the mobile and the web and they all essentially do exactly the same thing. It is a good idea to stick with the popular ones as they will have good online documentation and community support where there will be more people using the same framework which will mean more tutorials and more help to not only get you started but also advance on to the more robust features. A disadvantage to using these frameworks is that they will work however they were made to work and if you ever wanted to do something different then it will require heavy customization. Also, customizing the original files may even be overkill and take longer than to just build the UI from scratch. Here are some popular examples of jQuery Mobile alternatives: JQM Touch JQ Touch is very similar to JQuery Mobile however, JQ Touch is optimized online for certain browsers (ONLY supported on iPhone and Android devices) whereas jQuery Mobiles framework is trying to target as many devices as possible, all at once. jQuery Mobile also is maintained, developed and updated more often than JQ Touch meaning problems and bugs are fixed faster. jQuery Mobile has a larger community around it which means there is more tutorials and help online from the community compared to the JQ Touch framework. When it comes to mobile web apps frameworks features, jQuery is an obvious winner with many more features supporting most devices. Sencha Touch This is one of the leading mobile application frameworks used to make major smartphone applications written in purely JSON (a certain type of JavaScript) and has many more advanced features. The Facebook application is just one of the examples of what it can do. Whereas jQuery Mobile is more designer friendly, Sencha is more developer friendly and has a very steep learning curve compared to jQuery Mobile. Once youve learnt the ins and outs of the framework, developing on this platform can be rewarding

Jitendra Shahs FMP

Mobi Academy The Full Version will include:

JSON Feeds - JSON stands for JavaScript YouTube feeds - Parse YouTube feeds onto your application Flicker Photo API - Use Flickrs API to display your Flickr images inside your application Twitter API - Use Twitters API to display your twitter feed inside your application Phone Gap This platform allows you to author native Smartphone applications and also gives you access to call the Smartphones native functions and wrap it around the mobile container. You can use this framework to call a Smartphones native functions such as camera, contacts and calendar using JavaScript. This framework will then wrap your web application around a container, mimicking a real Smartphone application ready for distribution in the App Stores A major disadvantage is that is JavaScript and HTML5 API heavy. If you are not familiar with JavaScript then it can be a constant struggle achieving what you want but is still a framework to make note of and become familiar with if you want to start building more robust applications Lean how to How to distribute you application to the Apple or Android app store which is also done in Phone Gap