How to Build Forms and Apps for the iPod
Even with limited knowledge of Web coding it is possible to quickly build your own forms and applications for the iPod Touch, iPhone or iPad. To build these forms from scratch you would need expertise in PHP, HTML5, JavaScript and CSS. However, even if you aren't sure what these acronyms mean, there are plenty of sample pages available online from experienced developers that you can use to make your own apps and forms.
Other People Are Reading
Instructions
-
-
1
Ensure that you have access to a Web server a PHP Application Server and an SQL database. Most Web hosting companies make PHP and SQL available to you when you sign up for Web hosting services. Consult the Web host's documentation to see how to access them.
-
2
Browse Apple's Safari Development Library for sample code to use as the basis of your Web form. Other developer websites like net.tutsplus.com have free sample code to help you design forms and apps for mobile devices like the iPod Touch or iPhone.
-
-
3
Open the template files in a basic text editor like Notepad. If you have experience with a Web design program like Dreamweaver, use this to open the files instead.
-
4
Save any file using PHP code using the ".php" extension, rather than ".html" even if there is HTML in the page.
-
5
Substitute any mouse events in the page, such as "mouseover" with touch events like "touchstart," "touchmove" and "touchcancel." Apple iOS devices do not recognize mouse events.
-
6
Make use of iOS specific code in CSS to make use of iPhone and iPod Touch features. For example, to create a text field using rounded corners, in the characteristic iOS style, you can use the following code:
{
-webkit-border-radius:10px;
} -
7
Make use of the iOS "autocorrect" or "autocapitalize" attributes in text fields to correct spelling mistakes or add capitals to the first letters in words or sentences. For example, the following code automatically capitalizes the first letter of words in the city name field, the first letter of a sentence in a comments field, but not in the username field:
<form autocapitalize="words">
City: <input name="city" autocapitalize="characters">
Comments: <textarea name="comments" autocapitalize="sentences"></textarea>
Username: <input name="username" autocapitalize="none">
</form> -
8
Upload your files to a Web server, then navigate to the app page with your iPod Touch or iPhone. Test the app thoroughly before directing anyone to your new app.
Creating Your Own App Icon
-
9
Create an icon image to represent your Web app using any graphic design or photo editing program that lets you save PNG format images. Size the image so that it is 114 by 114 pixels.
-
10
Save the image as "apple-touch-icon.png." Upload the image into the root directory on your Web server using an FTP client like Filezilla. This image will be displayed on the iPod or IPhone when users save the app to their home screens.
-
11
Insert “<link rel="apple-touch-icon” href="./ apple-touch-icon.png" />” in the header of the Web app page. This tells the iPod or iPhone where to find the icon image. The iPod Touch or iPhone will stylize the image with round corners and a shine effect as it does with all icons.
Making Your App Available Offline
-
12
Insert the line " <html manifest="/offline.manifest">" in the head of the Web app page. This directs the iPod to your "manifest" file, which lists the files and images the iPod needs to save to cache to run the app offline.
-
13
Create a basic text file named "manifest" without the ".txt" extension. Insert "CACHE MANIFEST" in the first line, "CACHE" in the second line, then each file and image used by the app in a separate line after that, including any CSS files. This specifies that these files are to be held in the iPod cache to store your app offline. Upload this file to the root directory of your Web server.
-
14
Locate the ".htaccess" file in the root directory of your Web server and insert "AddType text/cache-manifest .manifest" as a new line in this file. This directs the iPod where to locate the manifest file.
-
1
