Develop Reference

Using HTML to build phone application

I have tried some App Builder to build the mobile application such as Seattle Cloud, now I want try to build an android application without using the App Builder, but I figured out the page's extension is .HTML in the App Builder, but when I using Android Studio to build the app, the layout is using XML. I have experience to develop web application using PHP and now I want try to build an Android Application to view information from my web application, I feel confused, How should I start?

You can use Phonegap for hybrid app development using web technologies such as CSS, HTML, JavaScript and jQuery.
Other similar options available are Titanium SDK and Sencha Touch, but you will take time to get well with them. They are better than Phonegap in some areas, also device api support is available.
Whatever framework you use to build hybrid apps, you will have their respective js files and css to achieve functions. Some combine with PhoneGap in the end to use device api's, so it is better to go with PhoneGap or something like Titanium or Sencha. You may also have a look at Ionic framework, it uses AngularJS, HTML and CSS.

Use WebView. It's a view that displays web pages. You can use local html files as well as a URL. For more information:
http://developer.android.com/guide/webapps/webview.html

Android works in a very different compared to web apps. the design of the application is done in XML which will create native UI components and will be much faster the HTML counterparts.
There are different frameworks for developing an android app based on HTML/JavaScript
Sencha touch
Phonegap
Appcelerator Titanium (Although this may not be a pure HTML framework)
see: How to create an android app using HTML 5
But compared to apps based on HTML frameworks, native apps will be faster, consumes lower memory.
Visit http://developer.android.com/training/index.html to get started.

Alternative to phonegap super.loadurl(); function

Currently my app is working fine and I have used jquery mobile and phonegap and is only targeted at android users. The only phonegap code i am using is:
super.loadUrl("file:///android_asset/www/index.html");
By using jquery mobile and phonegap my application size has increased dramatically. Is there an alternative way to achieve the functionality of super.loadUrl() function just using plain java or java.net package.
Thanks in advance.

Actually your application size is not increased by this function. this is due to use of jquery mobile. when we use jquery mobile, it loads entire jquery mobile functions and files to one html. thats why it make app heavy and slower. So the suggestion would be to use plain javascript and jquery. i have also experienced this kind of problem. :)

offline HTML5 or native SDK for cross-platform app development or JQUERY mobile

I am planning to build an app for selecting things from a menu and manipulating with it. I was earlier thinking of learning java and build on android, but then I came across HTML5 and JQuery mobile.
Can anybody guide me what should I start learning? I am planning to build a simple app. I just want a good GUI and want to write once. That's why I thought I'll work on HTML5 and then store it locally and open it in webview component of different platforms. So I will write once and use it on all platforms.
Am I going in the right direction?
Also tell me the difference between HTML5, JQuery and Phonegap

I'll go through each of them in plain English.
Phonegap is a set of API's to do things such as take a photo using the phones camera, use the devices accelerometer, geolocation etc..
Basically, it is a way of communicating (through javascript) between your application and the device. For example, to take a photo (open the camera) using Phonegap you would do something like:
navigator.camera.getPicture( cameraSuccess, cameraError, [ cameraOptions ] );
This is in essence no more difficult than opening the camera in a native device language (ie: Objective C for iOS), but the beauty is that this piece of code would work on multiple device platforms (there are one or two little tweaks you have to do per device, but it is basically write once and use multi platform). So that's what Phonegap is. It is a bunch of API's to communicate with multiple device platforms using the same code.
jQuery, and more specifically in your case, jQuery mobile is a javascript library used mostly in user interface design (as well as Ajax). It makes it easier to perform animations (things like an image fading in, or moving across the screen), event handling (what happens when a user clicks, hovers, focuses on, an image or button or any element). For example, look at the following piece of code:
$('.mybutton').click(function(){
$('#myelement').fadeOut(500);
});
Those 3 lines of code fade out a specific image when a user clicks on a specific button in 500 miliseconds. Short and sweet. So that's exactly what jQuery is, a library that makes creating a nice UI easier.
jQuery mobile is (as the name suggests) aimed at mobile platform development. So besides the animations and events of jQuery, it includes functionality for touch and gestures (swipes etc..), as well as a great framework for handling pages and navigation within a mobile application.
HTML5 is the latest generation of HTML which is designed to provide a comprehensive application development platform for web based content that eliminates the need for 3rd party plugins like flash or java. Audio visual playback, drag and drop, local file storage with webSQL, and of course the canvas element for advanced drawing and animation.
Basically it's just the new version of HTML which allows a lot more modern functionality.
Are you heading in the right direction? Yes, you definitely are. While learning a mobile platforms native language has its perks and is well worthwhile, a lot of developers are turning to more universal platforms such as Phonegap.
A great place to start is right here (StackOverflow), and I would definitely suggest having a good read through the documentation for Phonegap and jQuery Mobile and playing around with some of the demos.
Here are a few useful links on the subject:
Questions and Myths About PhoneGap
Intro to Phonegap
jQuery Mobile: What Can It Do for You?
What is HTML5? (video)
Good luck and have fun

Html5 is the raw information. Jquery (a part of Javascript) codes the interactive elements. CSS is the design. Keep them all separate, web standards etc.
These technologies work for web-browsers, but non web-browsers cant read this code, like app stores etc. Phonegap packages this code so can be read on other platforms. So rather than redoing the code many times - write once publish everywhere, or somethign like that. It can be seen in this picture:

Phonegap is a framework which allows you to develop your application using HTML5, CSS and JavaScript and package it as a native app for each of the major mobile platforms. In theory you could write the application once and target the browser as well as the major mobile platforms (using Phonegap) with the same core codebase.
jQuery Mobile is a mobile development framework, built on HTML5, CSS and JavaScript which can be used in conjunction with Phonegap to build mobile apps. It provides a customisable, mobile-optimised user interface (think pages, headers, list items, form components) and a system for navigating between the pages of your application.
jQuery Mobile is dependant on the jQuery library which aims to make client-side scripting easier by papering over many of the browser inconsistencies which can make writing JavaScript difficult. It's particularly useful for selecting HTML elements and traversing the DOM, and is in use on 50% of all websites according to this survey.
Based on your description of the application and your stated desire to write code once which will run on various platforms, I would say that you are definitely on the right track.
Since it is built on these technologies, I would suggest you begin by trying to get a solid grounding in HTML, CSS and jQuery before looking at jQuery Mobile. I think you can probably ignore Phonegap for now safe in the knowledge that when you've built your application using the above technologies, you will be able to use the framework to package your application for the platforms you plan to target.

How to debug GUI part in Phonegap application?

I am writing a very simple Phonegap application on android. The problem is how to automatically test the GUI part of it. QUnit looks like a good choice to test only Javascript but it needs jquery library to support testing user actions, according to the Cookbook. Is it appropriate to include JQuery library in Phonegap application for testing purpose?
Here is an simple scenario. I have an input field in the application. And I want to test it to see if it could accept value. How should I do with it in Phonegap? Or is there other choice to test the GUI part of Phonegap application?
I also found this question about Selenium but I am trying to find other possible ways to do it.

Cordova (formerly Phonegap), by itself (basically), nothing have to do with javascript, it just a tool to wrap your html/js/css code in android WebView element. Cordova has methods to access device internals via cordova provided JS calls.
Well, you can unit-test your application even in chrome desktop browser. Also, if you want, you can include any JS libraries to be used in App. If you have any questions- just write comment

Is PhoneGap the right choice for me?

I am new to PhoneGap, and I have several questions:
I need a way to develop an application that will have iOS, Android, and other platform compatibility. In other words, I want to write 1 app and get compatibility versions for different platforms.
By reading the "Get Started" guide linked by the PhoneGap website, I found there are different procedures for different platforms. So to have compatibility versions across platforms, do I have to go one-by-one and change all of them if I make a modification to my app?
Also, what exactly is PhoneGap Build? It seems like I can avoid all that hassle mentioned previously and toss my app into the PhoneGap Build? Do I really not have to do anything besides writing the app? What if I need to make changes?
And finally, I've read that PhoneGap works with HTML, CSS, and Javascript, but not PHP. What if my app needs to contact a server? Can PhoneGap handle that?
Thank you for bearing with all these questions!

PhoneGap achieves platform compatibility by embedding a webview within your application. Therefore you can apply your knowledge in HTML, CSS, JavaScript and it additionally provides ways to interact with native features (e.g. camera, gps, ...).
With PhoneGap you write one general web app, tweak parts for the specific platform (sometimes you do not have to this at all) and build it for that platform. The latter can be handled with PhoneGap Build service: It takes your webapp and bundles it for the mobile operating systems out there (Embeds it within a Java app on Android, an Objective-C app on iOs)
PhoneGap is able to communicate with a server hosting a PHP script just as every other web application. Trying to dynamically load resources from remote sites can be quite a hassle but this is another question.

traumalles is correct. All your HTML/Javascript/CSS is running from within a webview on the device. Your code is, therefore, all "client-side." You can communicate with a server just like with any other page. When they say PhoneGap isn't compatible with PHP, they mean only that PhoneGap can't execute PHP code like it's a server, because it's not. It's just loading your webapp in, basically, a browser.

One other important question is what exactly do you mean with "other platforms" phonegap does provide many functionality for nearly every platform but the different webbrowser of the mobile devices have their problems and limitations.
For example are there many problems if you want to provide your application on a WindowsPhone Device because the Webbrowser has a few limitations which will cause your app to not look and behave like a native app.
Just look a bit through the phonegap API you will see that some functions are just available for IOS or for Android and there are a few only Blackberry methods and so on.
So you really have to be careful when a framework tells you it will work on all devices.
So i really don't have a problem with phonegap i worked with it very great but there will be limitations you have to deal with.
If you primarily want to develop for IOS and Android you can really achieve great native like results !