There are many apps implement UI with UIWebView and HTML.
The HTML5 is very powerful, that I could hardly tells the difference between cocoa components and HTML elements.
Is there any method to determine whether the app is using HTML instead of cocoa components?
I'm currently implementing a application that the UI view is just a UIWebView pointing to a web site.
It depends on how much like a ios "app" the web site looks like. The only difference I can see is the loading speed of graphics from a web site is slower than locally stored graphics in a app. If you crafted the web site well enough, you would not be able to tell.
There is a big difference in look and feel of WebView app and native applications.. Main difference is UI responsiveness. Native applications tend to behave snappier, table views in those applications scroll more naturally, buttons and controls are more responsive.
It can't be explained in few lines, but you should feel it when using application. We made few cross platform apps with web technologies, and they can't be compared to native ones... No matter how hard we tried to emulate native behaviors...
Related
I want to start developing IPhone application.
I need to understand something about it - I am working with a graphic designer.
If she supplies the GUI in HTML - will it be easy for me to develop with it?
How does it work? like regular web development?
Apple uses Objective C and Cocoa for iPhone applications. Neither uses HTML; you'll instead be using interactive controls like you'd find in a desktop application. Whether it's easy for you to develop using an HTML mockup will depend entirely on your skills with Cocoa. (In the same way I encourage designers to give me mockups in Photoshop knowing that I can easily build HTML versions of them.)
You might want to start with some of Apple's documentation on iPhone development: http://developer.apple.com/devcenter/ios/index.action
For GUI development of your own apps you have several options:
Code: UIKit framework in Objective-C
Interface Builder: Tool to click
your GUI together, but the logic
will be coded like in 1 in C, Obj-C
or C++
You can build a HTML gui and
present it in a web view, but for
native apps, this will only bring
you so far.
Oh, and no native Flash on iOS. :-)
You could write an app that uses HTML for its UI - in essence you'd simply be wrapping a webkit widget and driving your app from events generated by that UI. However, that's not going to give you a UI that really takes advantage of the phone.
For that, you need to get down and dirty with Objective C and the Cocoa Touch API for iOS. Another option is using Flash CS5, which is ActionScript based.
Strictly speaking, the answer is no, your HTML skills are not transferrable.
That said, there are two projects that deserve looking into, both of which are about producing native (or "native-ish") apps from HTML and JavaScript. The first is PhoneGap, and the second (which I think is more robust and promising) is called Appcellerator.
Neither of them give you really-and-truly full access to to the iPhone API, but they do allow a significant flattening of the learning curve for people who already have well developed web app skillz.
If you go the native route, bear this in mind: it took me about a month to go from being a web developer to being a slightly competent iOS developer, and six months or so to feel solid and reliable and productive with iOS.
If I wanted to develop my mobile app's front end using js,css,html in order to target both Android and iPhone, what gotchas do I need to look out for?
I'm not looking for the comparison of native vs web development as much as I'm concerned about performance and development issues.
I've been doing a fair amount of research into this, below are a few of the main problems i found.
Touch events are inconsistent across different devices.
There isn't any good way to perform fixed positions. Which would be required for a simple title bar.
Currently there is no framework that supports multiple resolution devices, i.e. the UI looks pixilated on the new iPhone 4 retina display.
Mobile devices have small amounts of memory and slow CPUs, the use of any mainstream JavaScript framework significantly reduces performance (including jQuery).
Make sure you use WebKit animations/transitions rather than performing the animations in JavaScript (this utilizes hardware acceleration).
I cant think of any more right now, but when i do i'll let you know.
Android currently doesn't have hardware acceleration in the browser, but that's changing in 3.0 - http://android-developers.blogspot.com/2011/03/android-30-hardware-acceleration.html.
If you are using native scrolling (preferred on Android at the moment), make sure you handle touch correctly so that when you scroll touchstart isn't immediately opening new views.
LocalStorage is fast. You can store JSON in LocalStorage by using JSON's stringify and parse. HTML Database with SQLite is slower.
Sencha is beautiful, but restricting. jQueryMobile has a strong support base with great feature set, but still buggy.
Google Closure Compiler has issues with PhoneGap, and other libraries. May want to use YUICompressor.
In Android, use native choices for maps and menus. Maps are a link to google maps. Menus are lists stylized a button (see jQueryMobile).
Use a templating engine like Mustache or Handlebars. Handlebars allows for logic and helpers, plus all the goodies Mustache supplies.
CSS3 tables are your friend for 100% flexible content buckets.
Check out PhoneGap plugins in Github. There's a ContactView I wrote for Android for the company I work for - http://www.reardencommerce.com, where we are building html5 apps in javascript and node.js.
AJAX cross-domain or from local file system works on mobile. It also works on Safari Mac only if you read app from file:// protocol.
There are settings you can change in Chrome windows/mac to allow cross-domain AJAX, but it lowers your security levels. You may get viruses.
Too many CSS3 Gradients greatly slow down your app.
Drop Shadows, gradients, and rounded corners with CSS3 aren't pretty on Android.
I'm trying to list Web features (HTML, CSS, Javascript, APIs)
that can be used for mobile web pages, things we don't usually
use on Desktop browsers.
So far, I have:
geolocation
orientation
viewport (width, scale)
touch-events
tap-highlight-color
map and youtube links open in a dedicated app
tel: links support
specific keyboard layout depending on the form (type=number, email, ...)
What do I miss here?
The question would be: "If I am a Desktop Web developer, what should I consider to build a mobile version of my website?"
Actually, a lot of these are already in the HTML5 standard. They are not, in fact, Android/iPhone specific.
For example, the following are part of the HTML5 spec:
Geolocation: already implemented in Gecko (Firefox) and Webkit (Safari/Chrome)
Viewport: accessible using Javascript
Number/email/phone number-specific fields: implemented in part by several browsers
Your major concern when dealing with mobile versions of your site (assuming you mean touch-enabled smartphone) is the size of your icons/buttons/text/controls/etc. Anything else, including multi-touch, is simply an extra.
As for other extras, you could consider using something like JQTouch (http://www.jqtouch.com/) to provide a more "native" look and feel on the mobile client. JQTouch provides things like native animations, AJAX interface, specialized buttons/toggles/text fields, and themes that make iPhone web apps look better. It should also work on Android, since its browser is also based on Webkit.
For more information on iPhone/Android web frameworks, see http://distractable.net/coding/iphone-android-web-application-frameworks/.
I'm looking to create a mobile version of our website/web app. What's a good way to provide the best, most fully featured version.
Part of the reason for creating it is instead of an iPhone app, so I'd like to offer an iPhone web app that takes full advantage of the iPhone's version of WebKit (so CSS animations, being able to rely on good javascript support etc). However, I'd also like the site to work well on other smart phones as well as more basic mobile phones as well.
Do I create two sites (Mobile WebKit and basic mobile web) and redirect based on User Agent? Can I create one site that degrades well? What are the possibilities, and how do other people handle it?
Also: are mobile web simulators worth a damn? I have an iPhone, so can test easily on that. If I want to test on Blackberry/Palm Pre do I really need a device or are there reliable simulators?
These are some of the iPhone specific libraries that provide a native look and feel on webkit:
iUi
jQTouch
Sencha Touch
iWebkit
Getting it to work on most phones will definitely be an issue with most libraries as they are built around with the iPhone's screen size (320x480) in mind.
To get a wider coverage of devices including Android and J2ME phones, checkout Yahoo Blueprint. It's a markup language that translates for various platforms and devices.
You could either get the mobile view based on User Agent by dynamically switching the stylesheet on your server when spitting the page. This is not a recommended approach though for heavy-duty pages as you will still be sending huge chunks of data that would not be rendered. Alternatively, if you have a clear separation of your views, you can templatize the view based on User Agent and/or other parameters. This has the advantage of keeping your controller logic in one place with only changing views. You could use the above libraries for iPhone/iPod Touch and switch to a simpler mobile version for other smartphones or tweak it as you want.
Creating a separate mobile version of the site can be painstakingly difficult to maintain when changes arise.
The iPhone and Android simulators are as close as it gets to the real deal. The iPhone won't let you do stuff like make calls on the simulator for obvious reasons, but the Android provides mock implementations for basically everything on the device.
We are developing an ASP.Net web application and need that application to work properly on iPhone
Are there any memory constraints for an ASP.Net web application to work properly on iPhone
are there any issues with usage of ASP.net controls like gridview/ tab view etc.
would there be any issues with 3rd party controls like Ajax RADSchduler from Telerik
any other other constraints for a web application to work on iPhone.
Thnx
Amit
If we are talking about a standard asp.net website, memory constraints aren't really the issue. Asp.net just generates (ugly) html with some javascript. Nothing really special about that. Memory in this setup is important server-side. Offcours asp.net tends to generate lots of bloat when viewstate is enabled (without it, too). And this IS an issue when it comes to bandwidth, especially for mobile applications.
When using the Asp.net Ajax Toolkit, it should work crossbrowser. Apple Safari version 2.0 or later versions are supported.
Checkout the docs for the 3rd party controls, which browsers are supported. If Safari is supported, it should work.
But i would suggest using asp.NET MVC instead of standard asp.net controls, because it allows full control over html and javascript. This will ensure minimum use of bandwith and maximum javascript performance. Or any other language/framework with full control like php/codeigniter or python/django. And maybe a javascript library like mootools, jquery or prototype.
I think having a real iPhone to test on would be most optimal.
As for integrating third-party components you should be able to ask the vendor about their support. These Telerisk and Infrastigistic components look great, but you need to ask yourself do you need that amount of power and options, if you follow the mantra of the iPhone and Apple in general you'll want to keep it as simple as possible.
One approach is to develop a different view for the iPhone, keeping the display basic and optimized to the dimensions of the screen and the touch system rather than cursor.
Since Safari is based on Webkit you can get some basic compatibility testing on your local PC.