Sharing Story, Facebook

We had the folks from Facebook join us at SVA for a workshop Saturday morning. So, with the help of our classmate, Benjamin Gadbaw, we imagined how SPOKED could be shared through a Facebook app.


SPOKED Choose your color. Track your bike rides.
See your snazzy patterns emerge on your city map.


In her Facebook timeline, Kristin sees a comparison chart between she and her friend Carrie. While she has been consistently riding, she notices that Carrie has been consistently slacking. It hasn’t even been raining lately. She wonders what’s keeping her off.


Kristin comments on the chart to encourage Carrie saying, “Holy Cow! Carrie, you should ride tomorrow! It’s going to be sunny and beautiful!


When Carrie sees the message, she goes to the SPOKED website to see what’s been happening on the streets of New York lately. Her friends have been taking their typical commutes to work and it looks like a few rides to the park, but her personal map is completely blank. She thumbs through some archives, because she knows she’s done better in the past.


The next morning, even though she’s fallen off the boat, Carrie is determined to make some marks on her city. She ditches the subway and the coffee routine she recently fell in love with, and wrestles her bike out of her tiny apartment.


She starts tracking on her SPOKED app before taking off. She’s got to prove to Kristin that she can do it. While she’s had a couple weeks off, she feels pretty good to be on two wheels again. Not to mention, the two hours of fresh air, make her so happy!


Kristin sees in her ticker that Erin is on her bike cranking up miles across the Brooklyn Bridge. She smiles and sends some encouragement her way.


Later that day, SPOKED shares with the biking community that Kristin and Carrie both biked over the Brooklyn Bridge this morning. The story is paired with a photo of their paths.


Dave, a former colleague takes notice. He wonders, “What is SPOKED?” He actually sees that a lot of his friends are riding bicycles and tracking on SPOKED. He decides to join and give it a try.


[Work happens]


The next day, Carrie sees a notification that Dave joined SPOKED. She’s excited, and writes to him the next day, “Hey! You’re biking! Are you still riding from Chelsea? I’m heading home to Carroll Gardens at 7pm. Ride together?”


Carrie and Dave ride home together that evening. Mid-ride, while stopped at a red light, Dave gets a message from Paul. “Hey! You should stop by the Spotted Pig for a beer and burger. They are both deliciously fabulous there.”

They decide to stop and reminisce on the good ‘ole sleep-deprived days of grad school, and toast to having a life again.

Under Construction, v.1

Our project is coming along! We are currently coding up the front-end using HTML, CSS, and Processing at paintyourcity.com/spoked. The rides you see on there are our recent rides drawn in Processing. Carrie is pink, I’m yellow. We’re battling with colors. Yeah! However, these rides are currently pulled from a static files.

Our awesome developer buddy Yang Yang has written some scripts and done other developer magic to pull all our rides from an email account into a database. Above you can peek into our data. Below you can see the first attempt to visualize our data directly from the database:

And finally, we have a splash page up at http://iamspoked.com. The model has such a beautiful bike. But shame on that girl for riding on the sidewalk!

Tracking Instructions MotionX

If you want to contribute your rides to our SPOKED platform, please get MotionX for the iPhone. We chose this because it is the easiest app for sharing your rides with us on SPOKED right now. Below follows instructions for setting up MotionX, and how to track your rides.

SHARING SETTINGS: Menu > Setup > Share

1. Scroll down to Email share.

2. Set Email Share switch to ON.

3. Write your Display name: Firstname Lastname

4. Send to: yes@iamspoked.com

5. To keep track of whether or not you have shared all rides, you could add your own email address too in another field.

6. Set One-Click share to ON. Then you can easily hit the Share button after you biked, and your data will be sent to SPOKED immediately.

TRACK RIDES: Menu > Record track

1. Hit Reset track if you have previously tracked a ride, to make sure you start at 00:00:00.

2. Hit Start track. This typically needs to happen when you’re outside so the phone has GPS signal – when globe is blue & green.

NOW RIDERIDERIDE!

3. Pause track when you’re at your destination.

4. Save track

5. Share track. With the click of one button the ride will be shared with SPOKED and your own email account if you provided that in the setup.

ACCESS YOUR RIDES: Menu > Tracks

Please try to share your rides immediately after you stop tracking. But if you forget, you can share a track from Menu > Tracks, or Menu > Share:

VOICE COACHING: Menu > Setup > Voice Coaching

Depending on how often you want this sexy woman to update you on your pace etc, change settings here. The 3,2,1 countdown is kinda entertaining, so leave it on if you want to feel like a rocket ready to launch every time you jump on your bike!

Tracking Instructions Google My Tracks

You don’t need to pre-set anything for My Tracks. Just be sure to send from the right email address, once you start sending rides. Also, there are a few steps to go through to send the ride data to us. See below.

TO START TRACKING:
Press Menu “Record track”

TO STOP TRACKING:
Press Menu “Stop recording”

TO SHARE:
1. Press the … button
2. (Under This track) Select “Share with friends…”
3. (Under Share with friends) Select “A GPX file”
Google will tell you this will take a while
4. (Under Share track using:) Select Mail
Be sure to send the email from the email address you gave SPOKED when you signed up. If it’s not the same, press “From: ” and select the correct account to send from.
5. Send email to: yes@iamspoked.com
You don’t need to change anything in the subject or body, just press “Send”.
That’s it. Easy Peasy!

Web Dev Stuff

HTML5
Read the HTML5 for Web Designers book by Jeremy Keith.

CSS
Went through the whole W3C CSS tutorial to brush up on the skills. Took lots of notes that are in draft mode.

JAVASCRIPT
Will go through W3C JavaScript tutorial as well.

GRIDS ARE GOOD
Considering responsive/adaptive web design as a framework, but unsure how our geolocation-based visualizations on top of a map will work if we take an approach like this.
http://goldengridsystem.com/
http://cssgrid.net/
http://www.designinfluences.com/fluid960gs/16/
http://mediaqueri.es/

HTML5 CANVAS FOR ANIMATION
Testing pretty simple stuff here: http://paintyourcity.com/viz/

Based on tutorials like these:

https://developer.mozilla.org/en/Canvas_tutorial/Basic_usage
http://thinkvitamin.com/code/how-to-draw-with-html-5-canvas/
http://dev.opera.com/articles/view/html-5-canvas-the-basics/

Not really working at all. Grrr. Will update all my browsers.

Processing Status

FEB 16
I have a basic processing sketch rendering in the browser (Firefox). However, the geo-data is not rendering in the browser yet. The solution? Start with a very simple processing sketch that plots one ride, then start building from there. Also, call Yang, Amit or Jer Thorp.

FEB 15
- learn how canvas works
- sprinkle in codeacademy tuts
- get one ride rendered in processing to show in the browser (data?)

Resources:
Loading processing sketches
Processing.js example, Ask Ken, doing much of what we want on the front-end
Elevation processing code
Basics of Canvas—Processing.js is a framework for canvas, so we shouldn’t have to do additional things in the web-browser defining the canvas; it’s all done in processing.

FEB 14
Simple processing sketch works in Firefox and Safari
Note: sketch does not work in Chrome, but could later with some troubleshooting with the help of ErisDS; for now, we will test primarily in Firefox.

In dropbox >> thesis >> processing >> hello_web >> hello-web.html

One map image is ready to test in processing.
Does not display the image when image is native to the processing file. Need to research. (I think the image should be displayed in HTML)

Next steps:
- get image to display

- get canvas element to display over the entire background
scale canvas element to fit page: Stackoverflow, Automatically scale the HTML5 canvas element to fit the page
related: Stackoverflow, Center both vertically and horizontally

- start experimenting with width and height options to size with browser size (determined in processing or in canvas markup)
Possibly something like this in Processing:
size(DeviceSettings.view_width,DeviceSettings.view_height);

- look into centering the map on the page

Let’s talk about the weather

I personally think that biking in the rain is pretty awesome – I can sing and nobody hears me, I can bond with the few bikers that are actually out there, and I can verify that my rain pants was sooo worth paying a fortune for. However, I still care about knowing what the weather will be like. I’d also love to see some stats on how many times I actually jump on my bike seat even though water falls from the sky. Weather impacts the ride tremendously, whether it’s pouring down or the sun is shining. We might want to add weather information to our service in some way. That’s why this link here might be important:

http://blog.programmableweb.com/2010/02/08/googles-secret-weather-api/

We’re SPOKED!

Two pieces of news from us to you. The amazing Yang Yang (developer at Turntable) has agreed to help us develop a prototype for our thesis. That is the greatest news. On top of this, we now know what our thesis-social-tracking-platform-product-service-movement-thingy should be called. It’s called SPOKED. So now we can call it by its short name rather than the confused long one. The domain is iamspoked.com, because we unfortunately do not have $50,000 to spend in a GoDaddy domain auction :/ Oh well.

The name came about through collaboration with a lot of people. However, we definitely need to thank the creative brain and our studio’s systems administrator Frank Bonomo, as well as our very helpful and brilliant classmate Tina Ye. Yeah!

Values

NATURALLY ACTIVE LIFESTYLE
Having physical activity worked into a busy day without carving out extra time

FRESH AIR
Being outside and experiencing the environment and nature

CURIOSITY
Freedom to act on my curiosity, explore and experience new places

EXPRESSIVENESS
I express my image in the things that I wear, the products I use, and I like to create and document my life

COMMUNITY
Sharing the things that make me happy with my friends and being connected to something bigger than myself

ACHIEVEMENT
Making progress and getting better at the things I do

BIKEABLE CITY
Having a bike-friendly city and the feeling that I am doing my part to make the world a healthier place

QUALITY
Good design and quality products. Care about

OPENNESS
Independence and transparency

Tracking apps and file output

We have been researching different tracking apps to be used in the prototype:

MotionX GPS for iPhone $1.99
Outputs in .gpx and .kmz
Share tracks by email (one button click)
Has live updates to email/twitter/facebook

Cycle log for iPhone $0.99
Outputs in .gpx and .tcx
Share tracks by email

RunKeeper for Android and iPhone $0
Outputs in .gpx and Google Earth (.kml)
Share tracks through website

MobileLogger for iPhone $0
Outputs in .csv
Share tracks by email