You will need to download to edit the sample app. to download all the files that comprise the sample app which can be viewed and installed on iPod/iPhones from If you don't know how to install a web based app
Once the downloaded file has been unzipped you should have a folder containing these files:
apple-touch-icon.png (this image will be the app's icon)
fx-applause.mp3 (one of the fx sound files)
index.html (the webpage that makes the app)
manifest.appcache (this file forces all the files to be cached so that the app works offline)
startup.png (this image will be the app's splash screen)
Breaking the App apart
If you have installed Notepad++, there should be an option to 'Edit with Notepad++' when index.html is right-clicked. Otherwise, any text editor (such as Notepad) can be used. Now, let's look at how the webpage is constructed.
The page has two main sections:
The head is where the important stuff that makes the webpage work as a web app lives. Let's take a look.
There are three main areas here to look at.
1. The title is the wording that will appear on the tab of a webpage but also the suggested app name when the page is saved to an iPod/iPhone.
2. The area between the style tags controls the look of the webpage without cluttering the code in the body.
3. The final five lines are the code that make a webpage behave as an app when saved to an iPod/iPhone. They reference where the icon and splash screen images can be found; lock and scale the view; remove the header bar and control the appearance of the status bar.
Now let's look at the body:
The body has a simple layout because all the work to style it appear between the style tags in the head (or on a separate stylesheet if the site has multiple pages). Everything between each 'p' and the '/p' tag is a separate paragraph that has been styled in the head to have a powderblue backgound and rounded corners. The 'br' tag starts a new line in the paragraph. The audio tag which easily puts a sound player on the page is a new html5 feature which may not work with older browsers.
When the webpage is saved to the iPod/iPhone it appears like a native app, but it will only load when the device is connected to the internet. We need to force the browser to remember the pages so that the app works offline and the files load more quickly. This is done with a text file that has the extension .appcache. You will need to make a link to the .appcache file within the html tag at the top of the html code of the first page:
And now let's look at the manifest file. Using the correct syntax it simply lists the files to be saved. Be careful of using large files. To ensure it will work with all devices and browsers it is best to limit file sizes to 25Kb.
Finally, the icon is made by creating an image 57 x 57 pixels and saving as apple-touch-icon.png (corners will be rounded and a sheen put on automatically when it is loaded) and the splash screen needs to be 320 x 460 pixels and saved as startup.png.
Warning: it is a good idea to get in the habit of always using lower case letters for filenames and links. If you test a webpage on a Windows computer that is not case sensitive, links may work but fail when uploaded to the internet as most webservers are case sensitive.
Publishing the App
To load your app you need to be able to find it in the browser. There are others ways discussed on the general app making guide page, but the easiest and most effective is to purchase webspace from a hosting company that allows unlimited sub-domains. This sample app is published
Tadaaa! You and upper primary/elementary aged children can make fun and effective apps. As well as learning some core skills, children will be able to discover for themselves, using the multitude of internet resources, ways to style and design their apps as well as use their own fun and practical ideas for app concepts. Creativity unleashed.