HTML5 Mobile Application Template - html

I am going to develop one HTML5 Mobile application, my plan is: i am going to develop the pages in web-browser like firefox and then i am planning to convert it for mobile using PhoneGap Application. I plan to use jQuery Mobile also, please suggest me the template to start with. Thanks in advance for any help.

You can check following...On JqueryMobile site's demo section you can find all the templates for your needs...
http://jquerymobile.com/demos/1.2.0/
http://www.mrova.com/free-mobile-template-mobi/
Also please visit nice What jQuery Mobile Means for Developers article and understand what it offers against your requirements before kick starts.

Related

HTML5 Application Start

I am going to be creating a fairly large application soon. I want it to be an HTML5 Application, cross platform, and for mobile devices. I also want there to be a Desktop version, and a mobile version.
What tools are there, that will help me to start creating an HTML5 application? I am up for learning any language needed.
Can I use Joomla, as a content management system (since it is an HTML application), since it has module for authentication and other good stuff?
Thank you very much!
If you want to structure an app, there are scaffolding tools such as Yeoman.
If you're looking for a cross platform HTML5 development platform, there is PhoneGap as well as many others.
As for design, look into responsive web design so it works anywhere. You won't get the performance of native applications on mobile devices, but it's getting better all the time.

Difference between jQuery Mobile and PhoneGap

jQuery Mobile and PhoneGap both appear to be targeting cross-browser mobile development based on HTML5, but what are the major differences between the two?
What are the Pros and Cons of each framework?
Why would you choose one over the over?
Simply put jQuery Mobile is a UI toolkit for building mobile web applicaitons.
PhoneGap is a JavaScript framework which allows you to access native device functionality like the camera, contacts, file system, etc. PhoneGap does not provide UI elements.
If you want to create a hybrid mobile app, one which is built using HTML5 but runs on a device like a native app, you would not choose one over the other. You'd use both.
JQuery mobile is a javascript library for mobile broswing (mostly adapt the user-interface for better user experience on mobile devices)
Phonegap is a cross-platform development framework that provides core mobile device features to web-based mobile apps (Extracted from here)
Basically, you cannot use phonegape to take pictures from a website, but you can build an app with HTML and javascript (Phonegap) that access to some features in the mobile.
By the way you can use both in the same application: link
JQM is just a javascript framework, gives you some UI controls, animations and manages page navigation for you.
It's still a javascript webpage, so you don't actually have anything compiled in the end. Because of this your users access it using their BROWSER pointing to a URL, just like a normal website (only those are called Web-Apps in iOS language).
PhoneGap is just a Native project (written for all major Mobile hardware, like iOS, Android, BB, WP7, etc...) that wraps a WebView control (basically a browser window) inside an app. You could include your .js/.html files, and those would be loaded LOCALLY. Another feature of PhoneGap is a jscript bridge between your code and the phone's native capabilities (like for example taking a picture from javascript!).
You end up with a NATIVE APPLICATION that you can then post to the AppStore/AndroidMarket.
Hope this helps clarifying the difference.
The jQuery Mobile documentation has a page about making an app with PhoneGap and jQuery Mobile: http://jquerymobile.com/demos/1.0/docs/pages/phonegap.html

1 HTML5 code to rule them all

We're new to mobile. We have our HTML5 page (w/ PHP) up and running live. We now want to go mobile. Whether it's a native app or mobile web doesn't make a difference in our situation. We just want to have 1 set of code to maintain (with only minor tweaks here or there for different platforms). We've played around somewhat with Titanium & Phonegap but it seems like we have to make a LOT of modifications to our HTML5 code.
When people talk about a "mobile web app" (ie http://techcrunch.com/2011/11/18/financial-times-mobile/) what do they mean? Is it simply loading our HTML5 website from an iphone? If not, what development frameworks should we use? thx!
I don't see much difference between a mobile web app and a web app. Browsers on smartphones are sometimes even better then browsers people use at home...
Things you should really keep in mind are screen sizes and no mouseover effects.
Common used technologies for a mobile web app are:
HTML 5, CSS , JS , jQuery, jQuery Mobile (which was released 1.0 a few days ago!)
Server technologies are pretty much the same.
In order to generate the impression of a native app you could then use Phonegap.
I recommend using the Sencha framework for mobile apps. It makes your HTML5 app look like, and feel like a native app for any phone OS.
You can surely implement a mobile web application by implementing it as a web application. Obviously you have to give special consideration to the targeted mobile devices, and do lots of prototyping & testing. Browsers are really getting better on the mobile devices - so that's something good.
If you can create the experience you want in a web application, then great! As of now many developers find it worthwhile to write applications that directly target mobile devices, while also providing a web application. Once you have multiple kinds of clients, it's a good idea to implement the functionality in your application in a web API, which is accessible to the various clients (web app (browser), iOS app, Android app, etc.).

Can we use PhoneGap for Mobile Sites Development?

Can any one please suggest me the way to develop the Mobile sites .We already have the Main Desktop site and want to develop the mobile versions so what is the best way to developed the mobile version of the site. My site is based on Joomla but i did not find any module full fill our requirement now i want to know one thing more is there any way to develop the mobile site using some software which use API of my main site to access the data base because i have API because i already develop my native app for iPHONE and ANDROID.
Thanks in Advance
I think no.. because Phonegap uses a native library (plug-in) to make things works, for example you have to include phonegap.jar for android projects. And in your website you cant include native code..
Take a look at jQuery Mobile and Sencha Touch

Forms example or plugins for mobile web development

I am looking for a good jQuery plugin for form Web development for mobile websites like iPhone, Android, etc. I checked jQTouch, and it seems buggy when it comes to forms for mobile web apps. Any suggestions?
I am trying to display results based on user input from Google, Twitter, or Flickr. Any examples/demos would be much appreciated.
I need some plugins or examples for mobile forms that are not buggy like jQTouch is.
You can look here:
https://github.com/Modernizr/Modernizr/wiki/HTML5-Cross-browser-Polyfills
Look under "Web Forms" and it has a number of JQuery Forms libs.