Mobile Web – S12 – Montgomery

Linking to tab page

The tab page in its earlier version

The tabs functioning

The tabs functioning

The tabs functioning

More seamless incorporation of tabs

More seamless incorporation of tabs

Orientation change works

Orientation change works

init and showtabs working, as indicated by console.log command lines.

Here is a link to the KITer app with extra credit elements incorporated.


Here’s my app so far. It does not communicate to the server/database. It is not complete, but what I have so far. I cannot upload the zipped up file here.

first iteration of KITer

KITer homepage

KITer second page. Search contacts.

KITer second page. Search contacts.

First KITer iteration. Search contacts success

Search contacts on latest KITer iteration

Search contacts on latest KITer iteration

Search contacts success on latest KITer iteration

Third page of latest iteration of KITer

What happens when the record button is hit

Plays what was recorded

That’s it, so far. This is not finished, but it is as far as I could get on my very rudimentary knowledge on javascript, jquery, etc.

Similar apps are:

Call Reminder Widget:

  • creates a call log of the last time you called people
  • no close contacts list function
  • no reminder/voice-recorded reminder
  • (therefore no customizable timeframe for reminder)
  • no text log/reminder

Call Your Folks:

  • does everything in my proposed app
  • one thing it doesn’t: personalized voice-recorded reminder
  • people say it doesn’t work unless in app itself the whole time (same as in Phonegap)
  • timeframes are built-in, rather than customizable
  • no text log/reminder
Phone Tracks:
  • very advanced version of same idea
  • no voice-recorded reminder
  • no completely customizable call frequency

But these apps actually work, so they have the ultimate edge over my app.


For this assignment, we were to play with DOM and Events in Javascript, and to make a page for the app we proposed. Here is what I worked on on the computer, before I tried it on my tablet.

This slideshow requires JavaScript.

I’m having a hard time slowing down enough to actually absorb what I’m learning, or maybe it’s the other way around… I have some different versions of what I tried to do for my first (attempt) at a mobile splash page.

screen shot of my tablet running the app

screen shot of my tablet running the app; this is where the image button I put in (the orange circle) directs to once pressed. It'll eventually (hopefully) direct to the next page, where the contacts will be chosen, for next time.

The "Get Contacts" button actually does work! But I will have to find a way to select and save a contact from a search, and add it to a list, next time.

Want to KIT button. This might not make it to the next round. It was just to play around with the button functionality and alerts, etc. But I made it have relevant prompts.

Want to KIT button functionality

The “Record a reminder” button doesn’t work. Nothing happened, even though I tried to put the call for it in the code. captureAudio did not seem to work, the way I did it. I need some help on how to move forward. Looking a bit shoddy at this point…

Link to my app.

I tried manipulating (through Firebug) a bunch of different versions of the Phonegap index.html. Here is what I ended up with.

playing with the Phonegap index.html

playing with the Phonegap index.html

This is what I started with:

Before editing in Firebug

Here is my Project Stages Outline.

Mobile Web App (KITer) Project Outline

(mockup to come)

Here is just a beginning of what I would like the app to look like. So many apps are dark and “slick”-looking that I wanted something a little more bright and happy looking. I think I don’t usually go for that, but I wanted to, here. I will still have to figure out, I think, what the rest of the pages will look like, but this is the general feel of the UI, right now, as visualized in Photoshop.

A mock -up of the first landing page, once the app is launched.

The second landing page, as I presume it might look

Mock-up of page to record your message to yourself.



I would like to create an app that recognizes when you haven’t talked to your family or close friends in a while (providing it’s an Android phone). It will tally when you last called a list of telephone numbers, and if you haven’t called them in a specified number of days or weeks, an alert will come up, telling you that they might like to hear from you/might be feeling lonely/ and that you should call them. Not necessarily a guilt app, but a love your family and friends app. Another implementation could be something called, “What Haven’t I Done, Lately” app. Using the same idea as above, it would be an app that shows your call or text activity, highlighting whom you have called or texted and those you have not, with a prompt that would alert you that “It’s been a while since you…” I would like to implement a protocol for the user to create a voice or video recording of themselves that would serve as the alert they would like to hear/see.

So that answers the first question from the assignment (“What do you want to do?”) and the 1/2 page written proposal.

“Why do you want to do it?” I would like to create this app because I really lose track of when I have last talked to my family and friends, but most importantly, my grandmother, who is 83.

“What topics from the syllabus will be utilized?” I would think that I would need to use the tools available in the PhoneGap API, Events (when a call to a certain number I specify is made — startbutton and endbutton). I would also use Notifications to alert when it’s been too long since the last call to that number was made. The Audio Playback could be used to record my voice saying, “Call Grandma” or “Call Susie.”

“What will I try to do that’s not on the syllabus? (not recommended)”  I don’t think I will attempt anything outside of the APIs and plugins available.

“What similar apps are out there?”  There are reminder apps like Missed Call Reminder, Life Reminders, RemindMe, COL Reminder, Easy Reminder, Calendar Event Reminder, Med Minder, and more.

“How is yours different?”  My app would be a specific app that will be mostly customizable, creating more personal attachment to it than other apps out there. The personal voice recording will be even more vital in creating that attachment and incentive to call/communicate with your friends and family.


I’ve gotten the app to work, after talking with Sean, I tried a bunch of different things, and it worked. But I am not quite sure which of these steps made the difference. First, I plugged in my Android tablet and tried to configure it. That didn’t do anything. Then, I tried to add a new Android Virtual Device. I did, and also made a new Android project, but those didn’t work. But I did get the same xlargeScreens error, so I deleted that line from the AndroidManifest. Then, I went back to my original code and pasted my html/css into the new test project, which didn’t work. So I just ran the original app and then it started to initialize and stall, showing the app that says simple ANDROID_. I exited that, but then there was an error saying I cancelled the process, so I started it again, since that was a different error than I had before. I waited and the app came up, finally! It’s very simple, but I have done it, and that feels pretty good.

Added image and changed h2 color to tan for better readability. Realized I had to drag the image into the phonegap library instead of the image folder I made in order for the image to actually show up.

the app for the 1st assignment, finished for the most part. 😉

Without image:




code/console updates

Here is some progress (of sorts) that I have made, trying to get this app to run. I added the html that I want, tested it in TextMate, it ran fine on the browser (Chrome), so then I inserted it into the <body> tags in the PhoneGap index.html. Let me say that at first, I couldn’t get PhoneGap to run again, even though it had run in class. Here are some screenshots of my struggle. I will have to work on this more through the morning.

This slideshow requires JavaScript.