Simple Direction, wayfinding app

David Gibson, wayfinding expert and author of The Wayfinding Handbook: Information Design for Public Spaces, spoke to our user experience class a few weeks ago. After his presentation on how he and his team design wayfinding experiences, we had an interesting discussion around GPS navigations systems. A classmate told a story of how his friend, new to NY, a year later still didn’t know where anything in the city was. He used Google Navigation to get anywhere. His face stuck on his phone, he spent all his journeys, long or short, watching his blue location arrow advance and made sure it followed the glowing digital path laid out for him.

The awesome thing about GPS navigation systems is that you’ll never get lost. There are even algorithms for travelling the shortest route, the cheapest route, or the route with less traffic. But the thing that sucks about GPS Navigation is also that you’ll never get lost. Following bullet pointed, step-by-step directions takes away from the opportunity to discover things on your own. Continue reading

AJAX calls and external APIs

This week I added code to pull data from NYC’s Department of Parks and Recreation. They publish their Events Calendar via NYC Open Data. To get the XML data into a format I could work with in NodeJS, I used the xml2js library which converts XML to a JavaScript object which I then convert to JSON.

For now, my /nycdata route does the data crunching and adds the events from ‘today’ to my database.

I also added a modal window with the event’s data that’s loaded via an AJAX call to the database. To do this, I created another API route to return just one event by it’s ID.

You can checkout the live version in progress here: betherenyc.herokuapp.com
And follow the code on GitHub: github.com/michelleboisson/betherenyc

To do:
– either have /nycdata called once via a cron job at the beginning of the day
– check to see if today’s data has already been added to avoid duplicates.
– add a visual indicator that shows that data is being loaded via AJAX

Emo Ant: an Dynamic Comic Strip

Archana Kumar and I creating an online dynamic comic strip for our comics class final and HTML5 class midterm.

In this story, Cameron is a rebellious teenage ant. We meet him at the breakfast table with his family while his hundreds of siblings are diligently doing there part. Cameron, on the other hand, flies into the scene on a makeshift parachute he built himself, and scoffs at the processed foods and artificial ingredients. His emo hairstyle and dress makes him stand out even more and are the topic of conversation between Cameron and his parents.

We are planning present this comic with an interactive interface online. As the user scrolls down, the story advances with animated transitions giving the user full control of the flow and speed. We’ll be using parallax effects, css3 transformations, and javascript queueing for the speech bubbles.

See the progress here: http://itp.nyu.edu/~apk284/html5/week6/

CSS3

Building on my mockup for betherenyc. Here is the latest. I played with gradients, rounded corners, custom fonts, and opacity.

Here’s the latest.

And here’s another I’m toying with.

Basic HTML

This week’s assignment was to practice HTML4 and CSS2. So I started building the layout for the homepage of betherenyc. Here is what is might start to look like. I wanted to practice working with fluid layouts so everything scales as you resize the window. Later I will be adding media-queries to create a responsive layout. When this is done, the goal is for betherenyc to look great on whatever size display (desktop, mobile, tablet, whatever).

Here’s the progress.

bethereNYC will be revived!

betherenyc (be there nyc) is a project I’ve been working on (on and off) for a few years. Read its history here. My plan for the semester is to revive it and launch by end of May. Taking the skills, knowledge, and time afforded by my classes this semester, I think it’s going to be a kick-ass project.

betherenyc is a location-based mobile website that shows free and cheap events happening around you now. I will be using my HTML5, Dynamic Web Development, and User Experience Design classes to finally complete this project.

I will be using various data sources for pulling the events information as well as using user-submitted data. For example, one set of data will be from NYC’s Open Data, the Calendar of Special Events.

 

Proudly powered by WordPress
Theme: Esquire by Matthew Buchanan.