I want to convert an existing website for mobile version, what will be the best choice for me.
Using JQuery Mobile on asp.net webform or asp.net mvc
Create application on phonegap for the targeted mobiles
Any Other ?
You would need to provide a lot more information about your goals and your background to answer the best solution for you.
However, I can clarify your title: PhoneGap is a complementary solution to jQuery Mobile. They provide different capabilities and work together. You can use one or both of them. Here's a picture.
PhoneGap does two major functions:
Converts JavaScript/HTML/CSS assets to a native app
Provides a set of JavaScript APIs that map to device capabilities, not otherwise accessible to a web app, like Contacts, Accelerometer, Telephony, GPS, etc
jQuery Mobile is a cross-platform user interface system. It is an extension to jQuery that provides a set of UI libraries specialized for mobile device programming including small screens and touch and swipe events.
Related
Say I build a super mobile friendly web application that I want in the Play Store for Android users to be able to download.
Could I use Xamarin to:
Wrap the entire mobile app as a single WebView
Register for mobile push notifications
Essentially shortlining an MVP of an android app by using an existing web app? If so, is there any well-known process or documentation that demonstrates this?
Probably the best approach for you would be using Xamarin Forms with one or more pages containing only web views.
I don't love Xamarin Forms because usually for me Xamarin Android+iOS gives a better result in similar time, but your app would be so simple that doesn't make sense to do it with Xamarin Android.
Make sure that your web app will show only what makes sense to be shown in your app, otherwise you risk to see double header/footer, useless buttons... but if the website is yours adding a few parameters to change a bit the UI won't be a problem I guess.
Have a look at this example:
https://github.com/xamarin/xamarin-forms-samples/tree/master/WorkingWithWebview
Another approach is the use of Razor to build your pages in html directly inside your app, but if I understood well it's not what you need:
https://developer.xamarin.com/guides/cross-platform/advanced/razor_html_templates/
Although it is technically possible to do this as the previous answer has suggested. I would recommended firstly reviewing, the relevant stores guidelines on submissions. Apple for example will not allow a submission to their store of any application that simply mirrors the functionality of a website. I suspect Google's would likely be the same.
However that said, to answer your question, Xamarin.Forms would be appropriate for a simple application like the one you are suggesting. Or if you prefer to build to a specific OS, then in iOS with Xamarin you would use the Safari View Controller that was added in it's xcode 8.1 release. Android uses something similar as does windows.
EDIT:
You can use the Web View control in Xamarins Andorid native PCL project to encapsulate your mobile friendly website within an application here is the documentation:
Xamarin Android Developer link to Android Web View
As for push notifications, yes this is perfectly possible using Xamarin.Android. and varies on implementation depending on what you want to use as the back end to handle them, I.E. Azure's notification hub etc.
I have tried to create simple apps for android. For this I used Eclipse.
I want to find out what there is out there (Good frameworks) for building platform independent apps. I fell over JQuery Mobile and PhoneGap/Apache Cordova (and some other frameworks).
What I was not able to find out, is what editor are used with JQuery Mobile. Am I wrong thinking that anything can be used, since it is just Javascript and css3? Can one use Visual studio for this?
I also read that JQuery mobile can be used with PhoneGap, with out further explanation. What does this mean exactly? Why would you use JQuery with PhoneGap, instead of using pure phoneGaP?
So to recap the questions
Can JQuery mobile be used with Visual Studio? If not, what editors do you suggest?
What does it mean that JQuery mobile can be used with PhoneGaP? I thought these 2 were separate frameworks?
1.Can JQuery mobile be used with Visual Studio? If not, what editors do you suggest?
You can use any UI framework ( Jquery Mobile, Sencha touch, Dojo toolit, Kendo UI, Ionic, ..etc) as all the frameworks are based on Javascript, HTML5 and CSS3.
As such you can choose any editors which you are comfortable with.
Some popular editors to name a few WebStorm, Sublime Text, Eclipse, Visual Studio.
2. What does it mean that JQuery mobile can be used with PhoneGaP? I thought these 2 were separate frameworks?
JQuery is a HTML5, CSS3 and JavaScript framework.
PhoneGap is a Webview Framework.
PHoneGap allows you to use ANY HTML5, CSS3 and JavaScript framework ( UI frameworks mentioned above) OR you could just use plain HTML5, CSS3 and JavaScript without ANY framework to build apps and then wrap it in PhoneGap.
Using PhoneGap you can have access to DEVICE APIs (like Device contact list, Acceloremeter, Camera etc), which otherwise would not have been possible using only HTML5, CSS and JS.
I have a codeigniter application for desktop can it be converted to a mobile app when accessed from a mobile using the same code?
You have two options, create a responsive design or create one desktop design and a mobile design based on the user agent.
If your design is easy to adapt for both worlds (desktop and mobile) with a little tweaking and a responsive design should be enough to do the trick. But before you choose this way remember that you have plenty of mobile devices with many screen resolutions.
I advise you to read this slideshow about the mobile web:
http://www.slideshare.net/bryanrieger/rethinking-the-mobile-web-by-yiibu
And just for information the types of mobile devices we have on the market.
http://jquerymobile.com/gbs/
To help you out with responsive design you can use some of the frameworks available on the internet:
Twitter bootstrap : http://twitter.github.com/bootstrap/index.html
Foundation 3: http://foundation.zurb.com/
Skeleton: http://www.getskeleton.com/
YAML 4: http://www.yaml.de/
You can see more frameworks here http://www.awwwards.com/what-are-frameworks-22-best-responsive-css-frameworks-for-web-design.html
In case your desktop layout doesn't fit as a proper mobile layout you can rely on the user agent, although he is not 100% accurate, and build two different layouts.
On the desktop side you can use some of the responsive frameworks mentioned before, for the mobile side you can use:
jQuery Mobile: http://jquerymobile.com/
iUI: http://www.iui-js.org/
UI ON TARGET: http://www.rikulo.org/
The best is a mix of the two worlds, a responsive design for small and large screens for users on a desktop and a proper design for mobile users.
the different between two is in the template or view part of application .
basically you have to identify visitor device and if it is a mobile show him the mobile view that you have prepared .
you can create great responsive mobile template using jquery mobile .
Yes, I've done exactly this in the past.
What I did is I used the user agent class to detect whether the user agent was a desktop or mobile client, and used that to set a flag in the sessions. Based on that, I served different views depending on the value of that flag. This approach has the advantage that the URLs remain the same regardless of which interface you're using.
I would recommend adding a way to manually override this, though, since detecting the user agent is never going to be 100% accurate.
i am building a new web site using asp.net mvc3 web application ,, and i found some free HTML5 templates in the web which i can add to my _layout view in my mvc3 web application. i read that HTML5 is able to automatically adapt to the screen size of any devices .
So does this mean that incase i use HTML5 inside my layout view , then my web site can be accessed using different mobile devices and the layout of my web site will automatically adapt to the screen size of the mobile devices?
BR
Not so simple. You need to contend with
Big variety of mobile devices. Some support HTML5, some partially support it and some don't support it at all.
Even if a mobile device does support HTML5, a mobile screen is a lot smaller than a desktop so it may not be able to rearrange the view properly.
How a user interacts with a mobile web app is quite different to a desktop web app, so even if it did rearrange the view properly the user experience could be crap.
A mobile user may be connecting over a low bandwidth connection. What size are your web pages, and are they suitable for distribution over 2g, 2.5g or 3g ?
Well, no, not always. HTML 5 is a very broad term and there are many devices. There is no real guarantee that something you write in any version of HTML 5 will show up as you want it in every browser except via testing it and experience from testing.
That said, I think you are referring to CSS media queries, which are not really related to ASP.NET MVC 3 or HTML 5. From the caniuse site here, you can get an idea of which browsers support media queries.
If you use CSS 3 media queries properly, and the browsers which you are targeting support the feature, then the answer to your question will be yes.
Nothing works automatically but I'd give it a guarded "maybe". The MVC3 sites I've developed work well on iPhone, iPad, Android and Windows Phone. For example link
Still needs to be valid HTML5, so I'd suggest using a validator though.
Screen size adaptation isn't a particular feature of HTML5 per se, it's a feature of a competent fluid design with HTML and CSS.
They should work out of the box on mobile devices (in the original iPhone demo, Steve Jobs showed how the iPhone did a good job of rendering existing websites), but there won’t be any automatic adaptation to screen size beyond what HTML already provides.
As far as HTML goes, <meta name="viewport"> can go a long way towards helping your site’s layout on Mobile WebKit-based devices (which is all iPhones, and I believe all Android devices). See e.g.
https://developer.mozilla.org/en/Mobile/Viewport_meta_tag
http://developer.apple.com/library/IOs/#documentation/AppleApplications/Reference/SafariWebContent/UsingtheViewport/UsingtheViewport.html.
I would lie to build a desktop app with Titanium and i thought that the API would give me access to a native ui for desktop. But reading the documentation it seems like the native ui api is directed only to mobile development, while for desktop you have to build the UI yourself in html and js and it will not be native code (with the risk of low performance animation and graphic).
Am i right?
Thanks
Yes you are right. Titanium Desktop only WebKit UI is possible: HTML5+js and/or PHP/Ruby/Python. You can see Tweetanium on git to see how Desktop/Mobile application can be designed. But simply also in mobile you can use a webkit view... It'sn't fast as native UI on mobile but it makes your UI code reusable in both world.
This is exactly what happens on PhoneGap project.