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.).
Related
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.
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.
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
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
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