Different ways to make an app
Apps for Android and Apple devices are made professionally using the software development kit (SDK) provided for each platform. Apps made this way are called 'native apps'. Not only are the knowledge and skills required to use SDKs out of the reach of primary schools, native apps for Apple devices can only be put onto the device via Apple's App Store, (unless the device has been 'jailbroken'), and not all apps are accepted for the store.
Other software environments can be used to make native apps, most notably App Inventor for Android. App Inventor uses snap together blocks of code similar to the Scratch programming environment for children. Apps made with App Inventor can be put straight onto you own Android devices, and with some jiggery-pokery can be put onto App Market from where people all over the world can download them. (I was amazed that my test app, Fast Ukeule Tuner, which I made this way has already been downloaded over 10,000 times!). App Inventor might possibly be used with upper KS2 children who have a very firm grounding in using Scratch software.
There are a number of online services that will allow you to make apps for different platforms. Although these are largely template driven, they do allow for a degree of innovative design and some will allow you to build in a degree of interactivity. Although they will allow you to make a working app relatively simply, they are not free, and making apps this way does not put the creator truly in charge. The learning is less and the skills learned aren't particularly transferable.
To my mind, the best way to make apps for mobile devices is not to build native apps at all, but to make web apps. Web apps appear on your device just like native apps. They are launched on iPods/iPhones by tapping an icon like any other app and appear like any other app but are actually web pages running in the internet browser without displaying any of the tool or navigation bars. Making web apps has a number of advantages. They can be made to work on all platforms and devices and can easily be installed on those devices. But, most importantly, they are reasonably straight forward to make, using skills that are increasingly important and transferable.
Getting Started - making web pages with html and css
The main skills involved in learning to make an web are to build a web page using html and to style it with a css stylesheet. These will undoubtedly be useful skills for your children for some time into the future. Using a WYSIWYG editor (such as Kompzer or FrontPage) for designing a web page is quick and easy but I would advise against it for this project. If children don't first learn to design with html alone, they will never have a thorough understanding of how web pages work. For this excercise, using a WYSIWYG designer would take control from the children and also produce messy html code that is harder to follow and edit.
A good text editor programme for composing web pages and stylesheets is essential. I'd very much recommend using the free and excellent . Once Notepad++ is loaded, select html from the language menu and begin typing to start making a web page. If the correct language is chosen, it will automatically save with the file extension .html which will ensure that it opens in your web browser when double clicked. To edit an existing page, right click and choose 'Edit with Notepad++'.
The Code Academy website( ) is an excellent resource to use for both learning html and css. It contains a number of interactive courses submitted by users that allow learners to practice their skills as they learn. There is the option to log in and keep a record of progress or you can jump in at any point without registering. After a few beginner lessons on html and a few beginner lessons on using css to make a stylesheet, children should be able to have a go at making their own simple web page comprising images, headings, links and text. Here's a couple of pages I knocked up to help them (click to download):
At this stage of the process, children will be learning an enormous amount. They should be given plenty of opportunity to experiment and develop web pages of interest to them. I would definitely recommend using the excellent resources at . This is the organisation responsible for setting html and css standards. Their website contains excellent clear and interactive excercises for learning how to use different elements. More able children should be able to independently explore the website learning new techniques.
By now children should have learned how to design and style web pages by hard coding them. This is a major amount of learning and a very worthwhile goal in itself. Perhaps you could consider setting this as the target to achieve for one term, and then consider whether or not to later take the next steps - re-editting to work as web apps, and designing an icon and splash screen.
Making Web Pages into Apps
The first consideration needs to be to style a web page so that it works at both iPod/iPhone portrait and landscape orientations (i.e 320 x 460px and 460 x 320px). Consideration needs to be given to style elements such as images with fixed widths or a percentage, so that they resize automatically when the iPod/iPhone is rotated. We used Google Chrome for testing our pages with the extension to quickly test how our pages would look in both orientations.
Next the pages need to be served as an app for iPod/iPhone. This is done by pasting the following html to the head of each page:
This code will tell the device from where to get the icon and splash screen, set the zoom to an appropriate size; remove all navigation bars and control the appearance of the status bar. Once the a link to the web page has been saved as an icon on the springboard, when it is launched it will be full screen without the navigation bar. This makes it appear as an app, but you must ensure that all navigation is built into the pages as you won't be able to rely on the back button. Any links to other web pages that make up the app will jump out of full screen. This is fixed by pasting the following code into the top of the head of every page in the app other than the first page:
Now the all the web pages in your app will appear like an app, but they 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 to write the manifest file. Simply paste the follwing text into Notepad++ and list every page in your website. If files such as images are in a sub folder, that will have to be included as shown below. Save the file as manifest.appcache in the same folder as your web pages.
Finally, to complete the app we need to make an icon and a splashscreen. The icon will appear on the springboard of the iPod/iPhone and be used to launch the app. If you don't create one, your device will use a snapshot of the home page. Simply save a suitable image 57 x 57 pixels into the website folder with the name apple-touch-icon.png. You made a reference to this location in the code in the head of the web page, but your device should look for a file of this name anyway. A simple image works best. The iPod/iPhone will round the corners for you and put a sheen on it automatically. Also you need to create a splash screen which will be shown while the app is loading in the background. This should be an image 320 x 460 pixels for iPods and iPhones up to 4G and should be saved as startup.png. If you load the app onto a device with a different viewport size such as an iPad, the app should work but the splash screen won't. We use the free image editing programme Paint.NET with the children for image editing tasks like this.
These images were created by a pupil for use with a currency converter app:
You should have as a minimum the following files with the following names in your website folder:
Warning: children should be encouraged to use lower case for all file names (and all coding) to prevent errors. File names on Windows computers aren't case sensitive and so a link to Images/Hornbill.jpg will find images/hornbill.jpg. Most web sites are served on Unix/Linux computers which are case sensitive. Additionally, your browser will search a website for the file index.html to open with. It won't accept Index.html.
Publishing your Apps
To load your app you need to be able to find it in the browser. There are two ways to go about this: serve it from your own computer or purchase internet hosting. The first is only suitable for testing one app at a time but is free. The second is very much the best and easiest solution and also costs very little.
There are a number of freeware programmes you can run on your computer that will make it act as a web server. I've used nginx-1.2.7 successfully. Download it and unzip it. It doesn't matter where you put it on your computer. (I've already edited this copy to add the .appcache mime type.) Put your files in the html folder and then double-click nginx.exe to start serving your website. You can check it's running by clicking ctrl+alt+del and selecting Task Manager and then the Processes tab. There should be two entries for nginx. You can also stop nginx by ending the processes here. You should find your website on the same computer by typing localhost:80 into the browser address bar. On other devices on the same network you should be able to find it by typing in the serving computers IP address to followed by :80. To find your IP address go to start>run>cmd and type ipconfig into the command console.
As the website content is cached in the iPod/iPhone's memory referenced by website/IP address, it's only possible to serve one app at a time from each computer. This is the main reason why buying commercial hosting is better. Most hosting companies' packages include unlimited sub-domains. This means that if you buy the domain www.primary-apps.com you can have sub-domains 100square.primary-apps.com anad vcop.primary-apps.com and as many other addresses as you wish. Each of these sub-domains is capable of hosting a separate app at the same time. I've used for hosting this site and all apps and have been thoroughly satisfied. The user has a control panel from where sub-domains can be instantly created, code and wysiwyg editors for web pages and a simple file manager for uploading files to your webspace. (For faster and more flexible uploading of multiple files use a dedicated ftp programme such as
Installing your Apps
Once your apps have been uploaded to their own sub-domain, they are ready to be installed on your iPod/iPhone. for instructions on how to do this. Once the app has been added to the home screen and launched you will need to browse the app whilst online so that the browser can download and cache all the content as directed by the manifest.appcache file. You can check that this has been successful by going to Settings>Safari>Advanced>Website Data and checking for your sub-domain in the listing.
I've run this projcet with a number of Year 6 & 7 classes for one term. Initially, they made great progress learning html and css, and managed to wade through the rest with various degrees of success. Regardless of what apps they produced, I was very impressed by how much new knowledge they absorbed and skills they acquired along the way. In conclusion, I consider the project has been very succesful and I look forward to improving and extending it next year. The latter half of the project is where the higher and lower performers separated the most. This can be helped by supporting children with ready made apps to edit and extend. to download a template for a simple web page made ready to be an iPod/iPhone app.