App Quick Start

This page is intended to support a workshop at the Learning 2.013 conference in Singapore. We'll download a sample app and pick it a part to see how it works. The sample app plays sound effects which children could make, for example, to support a school production.

Click here to go back to the more detailed general guide.

Getting Started

You will need to download Notepad++ to edit the sample app. Click here to download all the files that comprise the sample app which can be viewed and installed on iPod/iPhones from this webpage. If you don't know how to install a web based app here are some instructions.

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)
fx-... etc.
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:

<!doctype html> <html> <head> The section between the opening head tag and the closing head tag contains information about the webpage. </head> <body> The section between the opening body tag and the closing body tag is what will appear on the webpage. </body> </html>

The head is where the important stuff that makes the webpage work as a web app lives. Let's take a look.

<head> <title>SoundFX</title> <style> body { background-color: aliceblue; } h1 { color: red; margin-left:auto; margin-right:auto; width:300px; background-color:powderblue; text-align: center; font-family: sans-serif; border-radius: 5px;} p { margin-left:auto; margin-right:auto; width:300px; background-color:powderblue; font-sze: 14px; font-family: sans-serif; font-weight: bold; border-radius: 5px;} </style> <link rel="apple-touch-icon" href="apple-touch-icon.png" /> <link rel="apple-touch-startup-image" href="startup.png" /> <meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0; user-scalable=no;"/> <meta name="apple-mobile-web-app-capable" content="yes" /> <meta name="apple-mobile-web-app-status-bar-style" content="black" /> </head>

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:

<body> <h1>Sound FX</h1> <p><audio controls> <source src="fx-applause.mp3" type="audio/mpeg"> </audio><br>Applause</p> <p><audio controls> <source src="fx-baby_cry.mp3" type="audio/mpeg"> </audio><br>Baby Cry</p> <p><audio controls> <source src="fx-boom.mp3" type="audio/mpeg"> </audio><br>Boom</p> <p><audio controls> <source src="fx-car_horn.mp3" type="audio/mpeg"> </audio><br>Car Horn</p> <p><audio controls> <source src="fx-cheering.mp3" type="audio/mpeg"> </audio><br>Cheering</p> <p><audio controls> <source src="fx-dreamy.mp3" type="audio/mpeg"> </audio><br>Dreamy</p> <p><audio controls> <source src="fx-guitar_riff.mp3" type="audio/mpeg"> </audio><br>Guitar Riff</p> <p><audio controls> <source src="fx-harp.mp3" type="audio/mpeg"> </audio><br>Harp</p> <p><audio controls> <source src="fx-roar.mp3" type="audio/mpeg"> </audio><br>Roar</p> <p><audio controls> <source src="fx-thunder.mp3" type="audio/mpeg"> </audio><br>Thunder</p> <p><audio controls> <source src="fx-toilet.mp3" type="audio/mpeg"> </audio><br>Toilet</p> <p><audio controls> <source src="fx-underwater.mp3" type="audio/mpeg"> </audio><br>Under Water</p> <p><audio controls> <source src="fx-whalemoan.mp3" type="audio/mpeg"> </audio><br>Whale Moan</p> <p><audio controls> <source src="fx-wind.mp3" type="audio/mpeg"> </audio><br>Wind</p> <p><audio controls> <source src="fx-witch.mp3" type="audio/mpeg"> </audio><br>Witch</p> <p><audio controls> <source src="fx-wolf_howl.mp3" type="audio/mpeg"> </audio><br>Wolf Howl</p> </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 (instructions here). 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:

<!DOCTYPE html> <html manifest="manifest.appcache"> <head>

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.

CACHE MANIFEST CACHE: index.html startup.png stylesheet.css apple-touch-icon.png page2.html fx-applause.mp3 fx-... etc.

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 here.

And Finally

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.