David Phillips

Concept, Code & Design

Hiya! I'm a recent ITP graduate student living in New York. I am hybrid of both designer and front end developer. I make a mean Keynote too.

Midterm! – Wear Where. An iPhone app.

Posted on by admin
Front page

Front page

So, for my midterm, I wanted to create an agitprop website designed for a teenage demographic.  It would be called “Wear Where?” and it would let them know if their clothes were made in sweatshops or not.

I was terrified of the complexity, but I was committed to making it happen.  My fears were seriously unfounded.  Due the popularity of the iPhone, there are a ton of tutorials.  The one that matched my needs the most was from nettuts.com.  I finished the tutorial and now it was time to implement my code.  I have grand plans to let Wear Where? to be a native app with the capability to do barcode recognition, but for now, the easiest implementation is a drop down menu that correlates with either a PHP script for a MySQL database.  After discussing it with Corey the resident, the best way to organize it is with multi-sub-folders and then correlating id tags with a php script that changes the image and body text source with the correlating brand names.

When the user chooses the Gap for their brand name, the results page takes Gap with an id tag of ‘gap’ and throws it into my images and content lines of code, <? echo ‘<img src=”brands/’ . $brand . ‘/img1.jpg” alt=”logo”>’; ?>.  I had to be careful not to use double quotes within single quotes.  I also had issues with calling the $brand variable within the image source code, I had to take on the whole img tag to get it to work.  Not sure why, but it was an easy enough fix.  For the content, I wanted either a happy or sad mascot icon, but I ran out of time and just hardcoded the image in.

I spent some (re: too much) time on the logo/mascot, the happy wire hanger, and getting the background to work.  I was having issues the jQuery images aligning to the right, thus forcing my user to scroll to the right and ruining the vertical flow, so I made the background a repeatable image, which was fun cuz I’ve never used the offset tool(ultimately I just created vertical lines instead of diagonal, even though it’s not as cool.  Also had to kill my gradient.)  I also had issues with getting the background to stay constant when the user scrolled down, but again, it was a time issue.

In future versions, I hope to combine with a non-corrupt labor organization or some other NGO, get a thorough listing of sweatshop conditions, pay rates, etc and create a native app that allows for barcode recognition so it can be actually used in stores, in addition to a contact form to get further information or to submit new brands to look for.  But, this being my first semi-big project, we’ll see how it goes.

Screenshots:

Results page with first image

Results page with first image

results page with 2nd image and Read More jquery button

results page with 2nd image and Read More jquery button

This entry was posted in Comp Media for the Web. Bookmark the permalink.

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>