Twentysomething: I love my iPhone! I could spend all day doing stuff on it. (thinks) You know, my personal website doesn't display very well on it, though. Everything's all tiny and jumbled up. I wonder how I could fix that?
And so our hero consults The Google for answers. He's not ready to pay the $99 for the privilege of submitting real native apps to the App Store, so he's settling for a little web app development.
There are two ways to develop for the iPhone. One, you can create a full-blown native app, which you can distribute via the iTunes App Store and possibly make money from. Two, you can create a web-based app, which will display in the iPhone's browser. You can't make money off a web app, but you don't have to pay the $99 fee to be in the iPhone Developer Program, either. On top of that, there are really two options for web development: modify an existing web page so it displays well in Mobile Safari, or use Dashcode to mimic the look and feel of a native app.
First, let's look at modifying an existing web page. Web pages are traditionally designed for full-size computer monitors with resolutions of 800x600, 1280x1024, or something similar. The iPhone is considerably smaller than that at 320x480 pixels. If left to its own devices, the iPhone will assume a page width of 980 pixels and scale that to fit the display. In portrait orientation (home button to the bottom), that means tiny pictures and illegible text, since 980 pixels is being forced into 320. Landscape orientation (home button to left or right) fares a little better, since it's only having to reduce to 480 pixels. Still, it generally ends up being pretty tiny.
So, how do we fix that? Obviously, we could leave it as-is and force the user to manually zoom in by double-tapping elements or pinching, but come on. We're classier than that. We're going to make use of a simple meta tag to change the scale. Drum roll please...<meta name="viewport" content="width=device-width">
Hallelujah, text that's readable without a microscope!*
"That's great," our hero muses, "but I want something...better. How can I create something that looks more like an app and not a web page?"Enter Dashcode. This is a free program (Macs only, sorry Windows devs) that includes templates, buttons, and code snippets that allow you to create real web apps that look like native apps. You can't take advantage of as many of the iPhone's built-in features this way, but for someone operating on a budget, it's a pretty good alternative.
When you open Dashcode, you can choose a template for your project: Browser, Utility, RSS, Podcast, or Custom. Browser is pretty much a menu interface: You put in a list of stuff, and when someone taps on an item, they get more information about that item. Utility's default interface is a notepad/text area with customizable settings. RSS lets you specify a Feed URL and displays a list of article headlines from that feed. Podcast functions very similarly, but instead of articles, it displays podcast titles and allows the user to listen to them. Custom presents you with a blank slate that you can customize to your needs. Whichever template you choose, you have to provide it with data sources and whatever functionality you need.
Either way you go, you're well on your way to creating a good web app!
*Obviously, there are more things you can tweak to optimize your web page for the iPhone. This is merely the most obvious and easiest. Seriously, Google is your friend.
Quote of the Day:
I was feeling pretty creaky after hearing the TV reporter say, "To contact me, go to my Facebook page, follow me on Twitter, or try me the old-fashioned way -- e-mail."
--Reader's Digest, November 2009, pg. 210
No comments:
Post a Comment