Final project proposal: Interactive ITP Yearbook

For the final project I would like to keep working on the project idea that we created together with Nick and Natalia: http://bit.ly/23CcHkt

I would like to turn it into Interactive ITP Yearbook — something we discussed with Nick but there was no time to do it. It would be a mini website, operating on its own and storing information of the students from several years.

To make it happen I would be using websockets and express framework. It would look something like this:

First visitors would enter the yearbook’s homepage, where they could choose if they want to view existing yearbooks or submit their own photo (if a student, resident or faculty member):

From the dropdown menu they would be able to choose which year they want to view:

Or submit their own picture by choosing which year they want to contribute to. Before submitting their photo, users would be asked to:

1. To choose from the dropdown menu which year they are contributing to
2. Fill in their basic info
3. Enter superpower, which would later be displayed on a page

After the “record” is clicked, the 2-3sec video is being recorded and DIV containing gif and text information about the person is placed to the grid.

At the same time the “superpower” person entered in the form would be placed on the right side of the page contributing to the interactive story, specific to that ITP class.

On the same page there would be a button that would let take a screenshot of the page and download it (or tweet it: TBC).

Steps again:

1. User fills in the form that will later be assigned to the gif
2. After clicking “record”, webcam takes a 3sec video and displays it on a page together with the text
3. “Superpower” text is displayed separately in a new DIV
4. Each user would have:
   • unique ID
   • DIV: gif, text

Questions still to discuss and decide:

1. Is it better to archive videos (with no chance to replace) and let it change over time?
2. Ideas to make it more fun and more interactive?
3. Anyone wants to join?

Project development:

1. Make the gif, text and superpower happen and be placed on the page
2. Build separate express handlebars for the page
3. CSS

Why I am doing this?

This time of the year everyone is getting emotional and I believe it would be another great way to get people together and build something that would be nice to remember after ITP.

References

My school pictures were something like the examples below (terrible and boring), I’ll try to build something more fun and more interactive.