How to Create an iPhone Web App for Your Classes

Posted by johnnykissko on Nov 21, 2010

I’ve always wanted my own iPhone app.  However, I wasn’t willing to pay the development fees to get an app loaded in the iPhone app store.  Furthermore, I wanted to avoiding paying fees for other services that would build an app for me.  Although either of these options would have worked, I would have been paying monthly or yearly fees to keep my app available.

I searched around and found a free way to accomplish what I needed done.  Using a template from the modmyi.com forums, I was able to design a basic web app for the iPhone that adheres to the iPhone navigation that so many mobile users have grown familiar with.  However, it didn’t work properly, and I had to make some modifications to get it to work.  So, the template available here is a consolidated effort.

In 8 steps, I’ll show you how you can build your very own iPhone web app for your class.  Grab yourself a drink, a snack, and whatever else will help keep you focused.  Similar to reading a recipe, this is fairly straightforward, but if you get too distracted, things may not turn out the way you’d hoped for.  I tried to simplify this as much as possible so that anyone could get their class on the iPhone.  However, if you run into any trouble, contact me and I’ll do my best to help you.

In this tutorial, you’ll be modifying an iPhone web app html template to meet your class’ needs.

Throughout this guide, there are a couple of rules and suggestions that you must remember:

• This is the example Algebra web app I created with this code.  I suggest you view it to better understand the structure of how to design your web app.
• The content and resources contained within each category in my example web app are not true to real Algebra I content.  They are there merely to serve as examples.
• Don’t remove: # symbols, quotes, tags (such as <li>, </a>, and </li>), window.open, or anything else in the html code that looks technical. It’s there for a reason.
• Within the code, if a course’s content is capitalized, that’s the way you need to write yours.

As you’re following each step, you may want to reference back to the following pictures as a way to better understand the structure of my example course I used to create this guide:

 

Step 1: Download this template: iphone.zip (modified from isite template at modmyi.com forums) & unzip all of the files to a folder titled “iphone” (without the quotes) on your desktop.

Step 2: Open the index.html that you just unzipped in your favorite html-editing software (notepad will also work).

Step 3: Find Section 1 in the index.html file.  You will see the following code (you may need to click the image to view it properly):

 

1. Change Algebra I to be your course’s name.  Don’t remove the quotes or anything else.
2. Modify your course’s topics to align with your content.  For example, change #equations to be #novels, and then change Equations to be Novels.
3. Repeat this process for all main categories within your course. If you need to define additional categories beyond what I have in my example, simply copy and paste an entire line of code, like:

and just replace #slope and Slope with your course’s content.

Note: Don’t remove or modify the “About” line of code.

Step 4: Find Section 2 in the index.html file.  You’ll see the following code:

 

 

1. Modify all terms with the # symbol preceding it to reflect your course’s content (singlestep, multistepequations, bothsides, etc.)
2. Replace the titles (Single Step Equations, Multistep Equations, Equations with Variables on Both Sides, etc.) with a title that reflects your course’s content.  Recommendation: make it similar to the term with the # sign associated with it.

 

Step 5: Find Section 3 in the index.html file.  You’ll see the following code.  You may need to click on the image below in order to enlarge it for better viewing.

1. Modify the url to match your bio page, modify the name to reflect your name (take note that there are two entries for your name).  Again – don’t remove the single quotation marks, just the URL (make sure it begins with http://) and your name

 

Step 6: Now, find Section 4.  You should see the following code.  Once again, you may need to click this image in order to enlarge it.

Author’s note: there is more to this section, but it wasn’t necessary to include it in this snippet I wanted to reduce the length of the post

1. See how my id’s reflect my descriptions from Step 4?  You should replace the id’s here to match the descriptions you gave in Step 5.
2. Replace the URL with the URL that links to your resource
3. Replace the description following the URL with your description.  Do not remove the single quotation marks or anything else, just replace the URL and make sure it begins with http://
4. >Modify the title of your description that’s found by the </a> tag.  For example, the title for my first Video is Single-Step Video 1.  You will replace that with whatever you’d like.  Again – only replace the title and none of the tags (like </a> and </li>)
5. Repeat this process for every single subdirectory that you have, making sure to not remove any of the quotation marks or tags – just the titles, descriptions, and URLs

Step 7: Almost done!  Find Section 5.  You’ll see the following code:

1. ONLY replace Topic: and Objective: with whatever you want your site’s search terms to be.
2. Save the file as “index.html” and say “yes” to overwriting the previous file if you’re prompted to do so.

Note: I’ve had some trouble with the search feature.  If you’re able to get it properly functioning 100% of the time, please let me know.

Step 8:Now, upload the entire “iphone” folder to your website.  To access the file, simply type your website’s name into the iPhone’s browser, followed by /iphone/index.html.

Congratulations!   You now have your own iPhone web app!  Your students will think you’re incredible, and it’s because you are.  If you ever need to update resources or links, you’ll just need to modify the html code in the index.html file or the actual resources themselves.  Nobody will ever have to download updates from the app store to receive current information from you!

I would also recommend you save a bookmark to your iPhone’s home screen so that your web app is easily accessible.  This can be done by clicking the “+” symbol in iPhone’s Safari and then selecting “Add to Home Screen.”

If you want to see my class’ real iPhone web app that my students use, check out my complete Algebra I app.  It’s a work in progress; but even still, student engagement with this new navigation has been great!

You can get more advanced with this, such as adding customized buttons, pictures, and navigation options.

Did I leave anything out?  Feel free to contact me with questions, concerns, or customization requests and I’ll do the best I can to help you.

Thanks to Ambro @ FreeDigitalPhotos.net for this post’s featured image.