Here's a guide that I made if you are planning on making a web app. It contains images, tips, and references to get you started. Feel free to comment and correct me on spelling errors, broken links, etc.
What is a Web App?
Web Applications, or Web Apps, are websites designed specifically for the iPhone/iPod Touch. They give the feel of a normal application. They can be games, utilities, sports, you name it! Apple hosts many of the web apps available right on there website.
Click Here to view them. You will find that this is already in your iPhone's bookmarks.
Web Apps can be added to the Home Screen as Web Clips by tapping the Plus symbol at the bottom of your browser. With this you can quickly get to your favorite web page without having to go to the Bookmarks in Safari.
Note: iPod Touch firmware 1.1.3 and above required!
How To Make Web Clips
Making web clips couldn't be easier. Find a image you would like to use and crop it to 60 x 60. Name it apple-touch-icon.png and throw it into the root folder of your website and your done! Don't worry, your iPhone will automatically add the rounded shape, crop the image if need to, and give it the 'glossy' effect to make it fit in with the other icons around it.
Before Designing a Web App
There are several questions you need to ask yourself before you attempt this. Take a look at the following:
"Is my Web App idea useful?"
I've been seeing a lot of Apps beeing made that are completely pointless. Ask yourself:
"What will people think of my app?"
"Will they use it?" and "Who will?"
Making a web app is just like creating a website. So you will need a reliable host and server your application. Some servers and hosts cost money. Some are free, but place advertisements all over your pages. So ask yourself:
"Can I afford a web application?"
"Do I have the time to run and maintain it?"
Designing A Web Application
Below I have compiled several images that will give your App a iPhone feel. Feel free to take and use them.
Note: I have not created these images. If I know the source of the image I will post it.
Right Click to Save Image
Top Bar:
Background:
White Bar:
Transparent Buttons:
Transparent Slider:
Coding a Web Application
Most people think when coding a web application is the design must be in a 320 x 480 (iPhone/iPod Touch's browser dimensions) scale. This is incorrect. You may not know it, but the web app is most likely the exact same size as a normal web page but without the ability to zoom and sometimes scroll horizontally.
Click here in your computer's browser for an example. To apply these features, simply insert the following code into all of your pages:
[<
]meta name="viewport" content="
width=320,
initial-scale=1.0,
maximum-scale=1.0,
user-scalable=0"/"
[>
]
Note: Be sure to delete the red
[ and
] before you put add this to your page.
Width: How wide do want your web page to display? 320 is the width of the iPhone in portal mode.
Initial-Scale: This is what the browser begins at when first viewing the page. 1.0 is equal to 100% so the iPhone will display the whole page.
Maximum-Scale: Do you want your users to be able to zoom in? Keep this the same as the Initial-Scale.
User-Scalable: Marking this at 0 will disable zooming in or out. Marking this at 1 will allow it. Keep this at 0.
Finding a Host and Server
If you want people to be able to access your application you will need to find a host and server! You will need them to upload all of your pictures and code. Below I have compiled several that you might be interested in:
Freewebs - Free website, Free Hosting, Free Webpage -
Click Here
Advertising
So you're done with your application and it runs smoothly. Now is the time to advertise and tell the world about it! Here are some ways you can advertise your new application:
Create a website specifically for your app. Then sign to one of Google's advertising programs.
Join other iPhone forums and post your app.
Add your Web App to Apple's list -
Click Here
Other Guides
Click Here
Sources
Apple -
Click Here
Dan Dickinson's HOWTO: iPhone Webclip Icons -
Click Here
Freewebs - Free website, Free Hosting, Free Webpage -
Click Here