Since we’ve started studying developing web mobile apps in my Mobile Media class, I am increasingly reminded how design can lead to better implementation/functionality and vice versa. It’s way too easy to rush into programming and curse yourself at the half-way mark, saying, “If I’d sat down earlier and really thought about my application, I would never have designed it this way. ” Too often at ITP, I feel like we’re in such a rush to program, we often forget to take some time to sketch, wireframe an idea, study the interaction to make sure its effective and clear before implementing. After doing some rough research on mobile app interfaces, I came across Web Design Inspiration for the iPhonewhich shed some visual light on what works, etc. for this tiny screen platform.
For my mobile media midterm, I choose to focus on developing my street photography site, StreetSnaps. StreetSnaps lets mobile users to snapshoot stylish people on the street, upload from their mobile phones or cameras, and see the results of what have been posted online. Peruse through different neighborhoods to see the different looks for each New York neighborhood listed.
Design: StreetSnaps sports two designs, one made specifically for web browsers and for iPhones/Android web-kit enabled browsers. The web interface takes advantage of horizontal scrolling to allow a photographic touch that lets users scroll as if viewing a camera roll. The mobile web interface utilizes JQTouch to create a “mobile-app feel” and utilizes vertical scrolling.
The PHP script in StreetSnaps will auto-detect whether the user is using an iPhone, iPod Touch, or Google Android phone to forward them directly to my designed mobile site.
So, Microsoft’s 2010 Design Expo Challenge is “Service Meets Social” and ITP is ready to tackle that amorphous concept now that Prof. Nancy Herchinger has finalized our teams. My teammates, Julio Terra, Noah Waxman, Tianwei Liu, and I tussled with the ideas of household savings management for families versus making environmentally food accessible to urban dwellers. How can technology aid either need? What serves as a greater impact? Food for thought (pun intended).
After much discussion, my teammates and I are looking at the issue of making local, environmentally friendly food available to urban dwellers. Essentially, we’d like to strengthen the community of local farmers to local customers for those of us who would like to see better bulk buying power, accessibility, etc. then what is currently accessible (local bodega, super market, farmer’s market, Whole Foods, FreshDirect.com, etc). New York City has a very strong network of CSAs and Farmer’s Market and we hope that we can make local agriculture even stronger by expanding the options for where local farmers can market their wares (directly to consumers) with the convenience of online technology. As Noah said: “Let’s empower local farmers to retail their own produce while giving urban-dwellers a greater sense of connection to the food they eat.”
We’ll be doing investigations and interviews with farmers, current networks between consumers/local farmers, profiling produce selection at various locations, among others for the next weeks ahead. Let’s just say: Google Wave will be our very close friends while we’re coordinating this.
Street fashion, as self-photographed by stylish individualists, is increasingly becoming the successor to mainstream fashion media with individuals turning online for visual inspiration, rather then traditional fashion magazines. With an explosion of cheap consumer technology and free online publishing platforms, people have the means to immediately share their fashionable observations in near real-time. A stylish democracy of sorts.
So far, this creative self-expression has been documented through online networks, street photographer sites, and personal blogs. See the examples below: LookBook, The Sartorialist, and Vogue’s TweetChic (which is more capturing thought of fashion insiders then their photos).
However, wouldn’t it be great to see documentation in real time with less effort (ie., no need to plug your camera and upload?) – something as easy as whipping out your cellphone and capturing a shot on the street? Living in New York, I see fashion as divided by different neighborhood tribes – East Village, SoHo, Brooklyn, Upper East Side, Harlem, Meatpacking District, etc.
Plans: Explore MMS, extracting caption data and, perhaps, geo-location data, and extend Street Snapsso it can be subdivided by neighborhood so people can peek at New York’s unique styles. Adapt the SnapStyle website so that it can be easily viewable in a mobile webviewer, which would be great when after people submit their snapshots, they can then view it on their smartphones.
So far, from the documentation I’ve been reading, Apple doesn’t include EXIF data when photos are snapped with 3rd party iPhone apps but there appears to be some workarounds. That’s going to be an area of exploration.
Execution: Explore photo submission process, so users can be filtered by neighborhood (EXIF data?) or by self-captioning their location? How can we provide easier to find, readble caption information? Currently, I use the <title> tag within the <img> tag so when the cursor hovers, the caption data is seen there. I will have to explore Webkit and JQTouch.
Shawn’s Advice: ”Come up with a midterm project idea, talk with potential collaborators. Document and describe the idea on your blog and prepare to discuss it in class next week. Your documentation/description should include what the idea is, why you want to do it and a diagram of how it will work (wireframes, napkin drawings, etc..). “
Street Snaps is an MMS service where users can submit their fashion or street photos via cellphones/smartphones through MMS and see it live on my website. Snap your shot, MMS it to cindyw.itp@gmail.com, and see it uploaded to Street Snaps.
Behind the scenes: This MMS service is being powered by a PHP script provided by Prof. Shawn Van Every where my MySQL database is collecting all submitted MMS and logging it. I’m outputting all my photo submissions via my PHP website here (seen above). I’ve used the meta-tag <title> to encase the MMS info to serve as a pop-up caption (Caption, Time Stamp). Ideally, I’d like to filter out the photo results based on certain keywords in the MMS message. Otherwise, I think this is a handy resource for people who want a micro-photoblog or even as informational as a missing-persons database. Food for thought.
In the spirit of Valentine’s Day, I decided to create an SMS service that would help socially awkward nerds find other socially awkward nerds: ITP NYU Geek Pick Up Line Generator. Using TextMarks, I created an account and keyword that would trigger my PHP script that prints out a randomized funny (or terribly corny) line that nerds (may) relate to one another. I tried for some variety after using this as my source of witticisms. Whether you’re a math geek, gamer geek, or coder geek, I hope you can enjoy this. How does it work? Text 41411 to NYUITP Geek and have fun with the response back! Who knows, maybe you’ll find a good ice breaker at your next social meetup.
Add on: I’m also flexing my n00b MySQL skills and created a table so I can log the frequency of people trying out this service for metric purposes. Privacy will be preserved since I’m only using this as an educational exercise. My original idea, Free Food Notification system @ ITP, didn’t have enough data to populate it as I was searching for free food deals in the NYU area and couldn’t find a consistent, up-to-date source. Looks like, it may be a work in progress for later.
First Assignment: Describe an SMS based application that would be helpful to have at ITP
Grad students are notorious for a few things : a) time-deprived b) being financially iffy and c) starved. So, what better text messaging based service that we, at ITP can cook up then (hear me out without laughing): Free Food SMS Alert System. Think about it. The NYU area offers a slew of free eating options whether its faculty meet-and-greets, study breaks, food marketing stunts, etc. Currently, students only know about these opportunities via word-of-mouth or through their friends network. You might be on Twitter, you might not be, but if you opt to receive the Free Food SMS Alert System, you’ll only be notified when FREE FOOD is present.
Implementation: The person providing the info would need to answer a few brief questions so the SMS service can output the Who, What, Where, How so students can seek out the food source. User interface to provide information is undecided but would optimally be either through the web browser or through SMS interface. Mmm…
Advantages: Timeliness: Faster to receive then a Twitter message, SMS messages can route to students in questionable cell-coverage areas (elevators). Accessibility: SMS is available for non-smartphone owning students. Only students who opt for the service get notified.
Helping people overcome long distances, TweetChime is a melodic chime that communicates people’s sentiments and transmits them into melody. So, no matter where you are, you can let your loved ones know you’re thinking of them and they can hear your sentiment in real-time in sound. By using Twitter, you can send your preferred sentiment, anytime and anywhere at your convenience.
In this case, in the video above, my brother, Pat has sent me this coded message: “@tweetchime [dinnertime] awww yeah!” Why? Because he has an odd sense of humor from living in Mobile, Al. which somehow is lost on me in New York City. Ah, family.
Who Could Use TweetChime?
TweetChime is great for ambient contact technology. In other words, you can keep yourself open to others without them having to actively message you (through phone/IM/email). Vice versa, they can quickly tweet you and have the satisfaction of knowing that you will hear their tweet melody in real time on your side. The TweetChime is unobtrusive and (if prototyped further) can blend into your household.
Long distance friends/family
Parents who want to communicate with their kids (who can’t read time, distinguish technology)
Visually Impaired
Interact with TweetChime:
Would you like to send a sentiment to me? Please tweet to @tweetchime, the TweetChime’s Twitter account.
How to Send: TweetChime recognizes the coded message within the brackets [ ]. The TweetChime website will scan Twitter’s search results looking for messages aimed at @tweetchime.
I have programmed a reply that TweetChime can recognize from a Twitter message. Choose your choice below:
@tweetchime [be happy]
@tweetchime [congratulations]
@tweetchime [missing you]
@tweetchime [holla]
@tweetchime [coming home]
@tweetchime [dinner time]
ex: cwong08 says: “@tweetchime [dinner time] Mom is serving mashed potatoes and turkey! Mmmm!
Where Does My Tweet Go?
TweetChime will be searching for all mentions of itself (@tweetchime) through Twitter’s public search time line. When it finds the coded tweet (1 of the 6 above), it’ll understand it and output into a short melody that the TweetChime owner will understand.
I managed to make it work! Here’s it in action: Five Servomotors using the servo library within Arduino to function within sequence with room for a delay so each servomotor can complete their action before proceeding to the next action.
New things I learned:
1) Servo library can be used on non-PWM slots on the Arduino. You are not limited by slots 3, 5, 6, 9, 10, 11.
2) Heat shields are a must-have on a voltage regulator where you plan to have your device on for anything above 5 minutes (IMHO)
About a week left before finals are due. Here’s where I stand:
Construction: 90% done. I learned how to use a power drill, the wood shop, and cut saw for all this work! Amazing. Tom Igoe recommended a good way for me to mount my servo motors by using included metal screws with the servo motors to these wood planks. Now, I just need to staple chimes in place, mount a headboard to the front, and plant my arduino and breadboard to the back.
TweetChime Website: Interaction is in place. Can tweak more with JAVAscript, CSS to make it more pretty but the basic interaction is there. Updated the Twitter parsing so friends and family don’t have to use previously formatted message (ex: @tweetchime 65 #tweetchime). Now, they can send a brief message that cues the melodies like this: “@tweetchime [thinking of you]“. So far, I have coded messages such as thinking of you, holla, congratulations, and missing you.
Arduino Coding: Unfortanately, the servo library I was using can only handle up to 3 servomotors. After testing the 4th servo motor, the TweetChime started acting up with servo motors working erratically, out of order, and sometimes randomly without input from my website. Not good. So, I have to redo Arduino coding to use PULSE method (with MILLIS) and not use the servo library.
