Favorite Quote

"America always makes the right decision... after exhausting all the wrong ones"

paraphrase of President Eisenhower

Mobile Learning - Developing an App


Developing an App for iPod-Touch or iPhone


      The program that will be used for this process is Xcode which can be uploaded free from the Internet, but it is very large (over 2 GB). Typically it installs itself on the hard disk in an Application folder in a folder called Developer. The application that will be developed in this exercise simply consists of a single image and a related paragrah.

Opening Xcode

      After opening Xcode, choose a New Project under File. For this exercise select the View-based Applications icon. When promoted type a name for the project. Typically a short one word name is best as it will appear on the iPod beneath the icon.

Preparing Images

open       Find two images, one which will be the icon on the iPod and the other which will be the image in the application. Open the "icon" image in Photoshop. This image image sizeshould be essentially square with the width and height approximately equal. Under Image, choose Image Size. Deselect Constrain Proportions and set the width and height each to 57 and the resolution to 72. Click OK. Under File, select Save for Web. On the next screen, select jpg (near the upper right)save and Save. Save the image for easy access such as on the Desktop.

      Open the second image in Photoshop, set the width to 320 and the resolution to 72. Save for Web as a jpg in the same folder as the first image.

Setting up Xcode

      Back in Xcode, click on the triangle by Resources in the left column. Drag each of the two images into p listResources and click on Add with each image.
      In the same Resources folder, click or double click on the image that ends with /plist, such as Sheba-info.plist. In the empty box to the right of Icon file, type the name of the "icon image" exactly as it was named when it was saved.
      Open the second image in Photoshop, set the width to 320 and the resolution to 72. Save for Web as a jpg in the same folder as the first image.

Creating the App

inspector       Still in the Resources folder, click(or double click as needed) on the item that includes "ViewController.xib." Three new windows will appear. Ignore the upper left one. The middle one isbackground the view of the iPod and the right one gives some options. Under Tools in the top menu, select Inspector. A fourth window will appear.
      Click on the View window and then choose a backgroundviews   image color in the other window. Then click on the Image View image in the far right window, and choose the "second" image from the drop-down menu in the Image box. Click off and then back on the image in the View window to drag it to the desired location and size.
      Again in the far right window, select the Text View icon and drag it onto the View window. Highlight the random text and type the desired message. If you are adventrous you may change some of the quatlities of the text such as size and color.

Saving the App

ipod       During the process of creating the App, the program Interface Builder has been used. While still in Interface Builder, save the App by clicking on Save under the File menu item. If you allow the computer to choose the location of the Save, it will do it properly.
      Back in the Xcode, click on Build and Go in the top middle. Click on Save All. After some pause a facsimile of an iPod Touch will appear on the screen. In lieu of your finger on the iPod use the mouse to click on the button on the bottom of the iPod to return to the menu page and click on the icon you created to return to your App.