How to deploy a Jquery mobile project with phone gap - html

i have created my Mobile application with Jquery mobile now i want it to deploy
now how should i deploy across platforms like and android Iphone etc.,
Phone Gap looks promising but it is confusing plus it looks like i have to re code stuff again
please Help
Thanks

jQuery mobile framework provides tools for mobile UI. It is used in combination with standard web application backends. Such applications are deployed on web servers! If you want to make hybride apps you can use PhoneGap, that's right.
PhoneGap projects use an open packaging model that follows the W3C Widget Packaging specification. You have to adjust your project according to the specifications or simply deploy it as a web application on a web server.

Related

How to compile a webapp to an hybrid one/jpk for my mobile phone without framework?

I have to build a hybride app, out of my webapp. It´s not allowed to use a middleware framework like phonegap which just builds it. In my app I want to show that HTML5 already allows to use a lot of functions of the mobile phone like the geolocation, instead of frameworks which can do the same, so I cannot use the framework for building my app. Which program should I use, VS? And how can I build my application(jpk) without a framework like that to test it on my mobile phone?
You should create a simple application with a webview and run your webapp inside this webview.
The problem is: hybrid frameworks like Cordova or Phonegap arent supose to just implement mobile features like camera or gps, they are useful writing once and run everywhere without complaining about iOs and Android code or even for fallbacks. Probably in the future youre not even going to install applications in your phone to use all mobile features using only browser features.
Here are some helpful links:
https://developer.android.com/guide/webapps/webview.html
https://developers.google.com/web/fundamentals/getting-started/codelabs/your-first-pwapp/
https://developer.mozilla.org/en-US/Apps/Progressive

Need to convert my HTML5 based web application into a mobile app which will target all mobile devices

Is it possible to convert my existing HTML/jquery.js website into a mobile app that targets all device (iPhone, Android, Blackberry, etc.). Below are the points I can think of. Please correct me if I'm wrong.
Add jquerymobile.js and change the css style (based on the device which is accessing your site).
What all points should I consider while converting my existing desktop based website into a mobile one. Or should I start creating a mobile website (MVC4 mobile website) from scratch? If that is the case then I have to maintain 2 code bases (1 for desktop and 1 for mobile) which I don't want to do.
You may avoid the need for two code bases if you design your Web app in a device-agnostic way. That means that it can be displayed on many different screen sizes (anything from small mobile phones to plasma TV sets) and navigated using many different input methods (mice, keyboards, touch screens, game pads, etc.). Various techniques to do that are nowadays known as "mobile first" or "responsive design". For a good start, see:
Creating a Mobile-First Responsive Web Design
320 and Up - the ‘tiny screen first’ responsive boilerplate
Mobile HTML5 Boilerplate
the Responsive Mobile First template from Initializr
Twitter Bootstrap
Zurb Foundation
For more see: Nice intro to Web Design frameworks (a video by Edreih Aldana)
Keep in mind that it may not always be possible or convenient if your application is very complicated and in the end you may end up with two (or more) code bases in that case, but most of the websites and Web apps can be built using those principles in mind.
Also keeping in mind the Web Content Accessibility Guidelines can make it much easier to design websites that can work on many devices and with many input methods.
You haven't specifically asked for this but additionally you can use PhoneGap to convert mobile websites or Web apps to actual native mobile applications for iOS, Android, Blackberry, Windows Phone, Palm WebOS, Bada and Symbian, so you can have your apps available for installation from various app stores for those particular platforms.
Update 2016
I wrote this answer in 2012 and some relevant tools have been developed since then:
Ionic - a hybrid mobile app framework based on Angular
React Native - a framework to build native apps based on React
Framework7 - a hybrid mobile app framework based on Dom7 (similar to jQuery)
Intel XDK (formerly known as appMobi)
Appcelerator
AppGyver
NativeScript
Onsen UI
More at the Mobile Frameworks Comparison Chart
This question was asked 3 years ago and has good answers, I just want to add some info, based on my experience:
It's better not create separate mobile design, but modify existing web with responsive web design using Bootstrap.
Then you have two options:
Create Hybrid Web App using Apache Cordova, it's almost the same as PhoneGap, mentioned above.
I'm using Visual Studio, so I used VS project template.
Hosted Web App using Manifoldjs.
I thinks this option is easy, you just take your existing web site and wrap it, creating Web App.
And if you use Visual Studio, you can create hosted Web App even without Manifilod.
You can try PhoneGap, a fast way to deploy your app to various kinds of devices.
Try the free phonegap build service. You upload your html stuff, and it will automatically generate apps for different devices!
You can also try Appery.io to easily build a web app. Here is an article that shows you how to make an iOS app from your website. If your website is responsive, it will automatically target all mobile screen sizes. http://www.techlivewire.com/4844/generate-an-iphone-app-for-your-website.html

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