Midsemester Review

Documentation for all

Week 2 - Mobile App Development with PhoneGap/Cordova

Get started on the app idea you came up with in class. Write out the concept, use cases, and user scenario on your blog. Wireframe and Start on the UI development (HTML/CSS/JavaScript). Read and respond to The Fable of the User-Centered Designer on your blog.

In class I pitched something around notifications, but I decided to create an app instead since notifications are so different between the platforms. 

Then someone told me about the Marvel API, and I had Six Degrees of Kevin Bacon on my mind since I had recently explained it to my parents. Thus was born Six Degrees of Marvel

Wireframes 


Week 3 - Mobile Development Continued

Using your existing app design (or starting something new), integrate jQuery Mobile.
Start building out functionality of your app using JavaScript with PhoneGap.

I had finished the initial wireframes for Six Degrees of Marvel as Week 2's homework assignment and decided to build the UI using jQuery Mobile. Styling with responsive design CSS was time consuming but a good exercise in understanding how to build a responsive application that could scale to the different form factors (I used the Chrome emulator to test for multiple phones and tablets). However, on the JavaScript side of things I ran into problems when I copy-pasted code for the viewchanger from the jQuery Mobile site to test it. 

Progress Report


Week 4 - Cameraphones, Media Sharing, News, and Activism; Media Capture, Playback, and Sharing

Develop a small quick application that features viewing, capturing, or sharing images or video.

My idea was to create an application that makes a photo the user takes look like the Andy Warhol painting of Marilyn Monroe. This is the pseudocode of the program

Initialize

  • Setup application
  • Include the PhoneGap camera add on

Camera

  • Pull up the camera
  • User takes the picture
  • Photo appears on next screen (drawn on canvas element) with filter already applied

Interaction

  • To change filter, user taps on photo
  • To save photo, user taps on the Save Button

I created the main page of the app but wasn't able to pull up the camera since I was apparently not setting up the initialize and deviceReady functions we'd covered in class correctly. I did find some great CSS filters that make the photo look like it was a Warhol painting when I make this app


Week 5 - Sensors - Compass, Touch, Accelerometer
Location and Mapping

Extend some of the examples from class, for example, create a finger painting application or use the accelerometer to draw

Brainstorm and come up with 2 different midterm ideas, document them on your blog in whatever means you need to explain the idea to class (images, text, video, other apps, etc..)

I worked with the map functions since I'm using maps in my Project Development Studio game - I had a variable scope issue that stopped me from opening a map in the code, but I was able to pull the phone's location as a latitude and longitude coordinate. This would have tied into my first idea for my midterm project, which was to prototype some of the functions of my PDS game, which is being written in Swift. If the user is in a certain location, then the camera function gets triggered to show an augmented reality animation. The second idea was to keep working on Six Degrees of Marvel to get it to work.

Midterm Ideas


Week 6 - Network Services, Data Storage/Persistence; Midterm Discussion

Build, document and prepare to present your midterm project. Remember this is a one week assignment so while it is more than a weekly homework assignment it doesn’t have to be a full application. It could be a portion of an overall idea or a smaller project. Please make sure you document the concept/idea, do wireframes and any other diagrams you might need, and finally execute it.