Mobile Web: Week #3 Homework

For the homework, we were supposed to go through some JavaScript exercises in the browser console to play with the Document Object Model and with events.  We were also supposed to post some screenshots of the first pages made for our mobile apps.  To avoid spamming my blog, the rest of the post is below the jump:

Screenshot Gallery of both the mobile app and the homework exercises:

var main = document.getElementById("main");
main.className = "RedBackground";
mainkids = main.childNodes;
mainkids[0];
mainkids[1];
mainkids[0].textContent = "happy";
mainkids[1].style.display = "none";
mainkids[1].style.display = "inline";
mainkids[1].style.fontSize = "40pt";
mainkids[1].innerHTML = "<button>HI GUYS</button>";
function buttonClick() {
  var answer = confirm("woot woot!");
  if (answer) {
    alert("nice!");
  }
  else {
    alert("whatevs...");
  }
}

I made some concept images for the mobile app Phil and I are working on.  They were made primarily with jQuery Mobile and jQuery/UI.  The web version looks a lot better than the mobile version, but we didn’t really discover this till we loaded up the pages we made (broadcaster.html, viewer.html, and beacon.html) in our Android emulator, and then when I loaded up the app through Eclipse and PhoneGap onto my Samsung Galaxy Nexus ICS 4.0.2 phone.  So obviously our next minor task is to clean up the UI a bit (and further refine which buttons we need and which are redundant).  But mostly, it’s adjusting to more limited real estate on the screen, so there’s no room for columns.

Primarily our main problems so far have been figuring out exactly how the user will flow through the app from page to page.  We’ve assumed that we probably won’t work on a web client explicitly for this project (to direct viewers towards a phone broadcaster), just so we get more practice coding for a mobile app.  The format of HTML, JS, etc. though lends itself towards easily working on two separate client versions of the same content.  We are most worried about being able to interface with a phone’s GPS, its database (for images and video), and its camera (we know we won’t be able to do livestreaming via video at this point).

You can see the web mockups at this very early stage at http://benturner.com/streeteyes/.  Phil wrote up a post as part of our homework on his blog.

The screenshots of our mobile app:

  • Sean Montgomery

    Lookin good, Ben.  I’m not totally sure I understand your dilemmas, but let me know if you’re having trouble with it and we can discuss in person. 10/10