Learn some of the basics for developing ASP.NET applications targeted to the iPhone.
By Steve C. Orr
If you haven't gotten your hands on an iPhone yet, you owe yourself some tinkering time even if you don't plan to blow your hard earned paycheck on such an expensive device. Keep in mind that - like all technology - the prices will come down relatively rapidly. It's a virtual certainly that eventually everybody will either have one or they'll be using similar copycat devices that are bound to join the competition in time. The touch sensitive interface means you may want to think a bit differently about software development. The future is a place where mice and physical keyboards may become scarce. Read on to find out how software is developed for the iPhone and learn about the major implications that the iPhone has for the future of web and software development.
The Big Picture
The iPhone is always connected to the World Wide Web. When it's not taking advantage of local WiFi hotpots for a full throttle experience, it falls back to AT&T's respectably fast wireless EDGE network. This means that developing for portable devices no longer has to mean building occasionally connected, miniature, underpowered user interfaces.
Instead, developing software for the iPhone is essentially the same process as building a web site. The iPhone's built-in web browser is not only an amazingly fun and useful way to surf the Internet, it's also the gateway for all custom iPhone applications. It is so good at displaying standard web pages that you may never need to develop an application specifically for the iPhone. Your iPhone users can likely use your pre-existing web applications with few, if any, problems.
Figure 1: The iPhone displays real, complete web pages in all their original glory. Zooming, scrolling, and navigation are easy.
Going on Safari
Just when Microsoft's Internet Explorer team thought they had their hands full with the increasing competition from Firefox, along comes Safari with a stunning blow.
The Safari web browser used to be largely ignored by web developers. It was generally considered a high priority only if the web site specifically targeted Mac users. With the recent release of Safari for Windows and the Safari browser that's built into the iPhone, Safari is suddenly a major player in the browser market and can no longer be ignored.
Most web pages display flawlessly by default on the iPhone. I've surfed countless web sites with few problems. Nevertheless, if you want to develop a web application specifically for iPhone users, then it can certainly be done with carefully crafted HTML output. Feel free to continue using your current web development tools such as Visual Studio and ASP.NET for iPhone development since they emit the standard HTML that the iPhone craves.
Another approach is to enhance your existing web applications with iPhone support. With a couple lines of code you can sniff out the iPhone users and present a modified user interface to them. The following VB.NET function returns true if the current user is surfing your site using an iPhone:
Public Shared Function IsIPhoneUser() As Boolean
Return HttpContext.Current.Request.UserAgent.ToLower.Contains("iphone")
End Function
As you might expect, there are a few Safari features that couldn't make it into the iPhone version, mostly as security precautions. There are also some sizing issues worth contemplating when designing apps for the iPhone's uniquely small (yet sometimes seemingly huge) user interface. Luckily Apple has provided some custom browser extensions that developers can use to help massage any kinks that may pop up.
Size Matters
The iPhone's native resolution is 320x396 pixels when held upright in portrait mode. But that doesn't necessarily mean you need to develop your iPhone pages at that resolution since the iPhone scales pages amazingly well. You can embed meta tags in a page's HTML to give the iPhone clues about how the page is sized and how its viewport should be allowed to scale:
<meta name="viewport" content="width = 320" />
<meta name="viewport" content="initial-scale=1, user-scalable=no" />
To gain a little extra vertical space, you can scroll the browser's address bar off screen upon page load with a line of JavaScript such as this:
window.scrollTo(0,1); //Best called from the onload event
To detect when a user has rotated their iPhone from portrait to landscape (or vice versa) you can use the window.onresize event.
Looks Matter
One of the biggest things you can do to make a web page more usable for iPhone users is to make input elements larger. For example, a standard sized button works fine for a mouse click, but the relatively fat size of a person's fingertip benefits from a larger target.
Elements can be made more attractive and usable in other ways. For example, the iPhone will automatically convert hyperlinks that contain telephone numbers into hot spots that automatically dial that number when clicked. This assumes the iPhone recognizes the link as a phone number. To ensure the iPhone will recognize the link as a phone number, format it like this:
<a href="tel:1-425-555-5555">1-425-555-5555</a>
For an input field that is intended to accept phone numbers, zip codes, or any other numeric input, you can ensure that the iPhone's numeric keypad automatically appears when that field gets focus instead of the usual text entry keyboard. This is done by putting the strings "phone" or "zip" somewhere within the input element's name attribute, like this:
<input id="txtPostalCode" name="billing_zip" type="text" />
Safari also supports a variety of custom CSS extension tags that are not currently part of the HTML standard. These webkit styles allow unique effects such as the ability to render checkboxes that look like buttons, glowing effects, and a wide variety of other experimental abilities that you may wish to tinker with.
What's Supported? What's Not?
iPhone version of Safari does have a few limitations of which you should be aware, these limitations are surprisingly few and far between when compared with the capabilities of other so-called 'internet enabled' devices. Most notable is the iPhone's lack of support for Adobe Flash. This is due to the fact that plug-ins and downloads of all kinds are prohibited on the iPhone. Unfortunately this also rules out Silverlight as a development option. The iPhone's included PDF support is a notable aberration.
My thorough tests ASP.NET AJAX have determined that it works perfectly for the iPhone, allowing ASP.NET developers to create cutting edge Web 2.0 applications.
Summary
The iPhone's ultra-rich, always connected browser environment is destined to redefine the way mobile device applications are built. A few touches of an iPhone is all it takes to convince virtually anyone that they are experiencing the future of user interfaces. A new wave of web application software is forming, so I suggest you hop on and surf it to success!
I've developed an iPhone-targeted web site using the ASP.NET development techniques detailed in this article: visit iPhonePlaza now!
No comments:
Post a Comment