How To Build iPad Apps as a Non-Programmer

If you want to build your first iPad app but don’t have experience in object-based software programming, a Web app is a great way to start. At its core, a Web app is simply a webpage that has been specifically formatted for an iPad. Users can save your Web app to their home screen with its own icon, just like any app that was downloaded from the Apple App Store.

Instructions

1. Getting Started

   • 1
     Draw a design for your app using a pencil and paper. Decide what the app should be able to do. Prioritize what it needs to do compared to what you would like it to do.
     
   • 2
     Familiarize yourself with Hypertext Markup Language, Extensible HTML, Cascading Style Sheets and JavaScript. There are many good books available in bookstores and your local library. There are also tutorials and samples of code available online, as well as Web development forums where people can help you make your Web app do what you need it to do.
     
   • 3
     Register for the free Apple Safari Developer program at developer.apple.com. This will give you access to Apple’s Developer Library, including tutorials and sample code specifically for iPads.
     
   • 4
     Compare what you need and what you want the Web app to do with the capabilities of the different types of Web code available.
     

   Building and Testing a Web App

   • 5
     Decide on a program to use for developing your web app. Programs such as Adobe Dreamweaver or InDesign CS5 can make it easier if you have experience with them. You can also build the Web app from scratch using a basic text editor like Notepad.
     
   • 6
     Download and install the Safari Web browser from apple.com/safari. This is the Web browser used by the iPad. You can modify your Web app and test it directly from your computer.
     
   • 7
     Click the Safari “File” menu, select “Preferences” and click the “Advanced” button. Click the “Show Develop Menu in Menu Bar” option.
     
   • 8
     Select the “Develop” menu in Safari, “User Agent,” “Other” and paste the following code “Mozilla/5.0 (iPad; U; CPU OS 3_2 like Mac OS X; en-us) AppleWebKit/531.21.10 (KHTML, like Gecko) Version/4.0.4 Mobile/7B334b Safari/531.21.10” to have the browser mimic that used by an iPad.
     
   • 9
     Used fixed positioning in the CSS code of the Web app to ensure Safari on your computer does not distort the page while you are building and testing the app.
     
   • 10
     Use a constant viewport width meta tag in the header of the web page, such as “<meta name="viewport" content="width=device-width" />” to ensure the page behaves as a full-page app on the iPad.
     
   • 11
     Use the touch events in the Web app, such as “touchstart,” “touchmove,” “touchend,” and “touchcancel,” rather than using mouse events.
     
   • 12
     Use the “<textarea>” tag to signify areas where the viewer may enter text. This code will launch the iPad keyboard. The iPad does not support “contenteditable” commands in a webpage or Web app.
     
   • 13
     Upload the Web app to a Web server. For most purposes, it is best to use your own domain URL, hosted on a Web server.
     
   • 14
     Add an icon that can be used on the iPad when users select to save your app to their home screen. You can do this by making a 114 by 114 pixel PNG file and uploading it to your Web app folder. Add a link in the header of the Web app in the format “<link rel="ipad-icon” href="./ipad-icon.png" />” so the iPad can find the icon when users save your Web app to the home screen.
     

Tips & Warnings

• If you're unfamiliar with terms like meta tags, touch events and mouse events, don't worry. You will soon understand them as you study the basic Web languages.