Network Media II

Exercises

Exercise 1: Introduction

Build a web structure for displaying your work for the class. Create a directory for yourself in the “web/projects” folder for the class. Name your main menu page index.html or index.php so that it will be linked properly from the front page of the class website. In developing the structure, remember that there are a number of Exercises, and final project which will have multiple parts.

Sign up for twitter. And follow DMA161B.

Exercise 2: Presence + Memory

Create a dynamic web site that changes based on the number of times a user visits the site. Use PHP's sessions to keep track the number of times a user has returned. Think of interesting or playful ways to take advantage of this basic interaction. Think of how the site would differ if it changed in response to all visits rather than just those of a single user.

Create a dynamic web site that asks a user for input and uses that input to display a result based on the responses. You can use any technique you want to interpret what the user input. The forms should be extensive enough to get an interesting amount of variation in the results.

Use images and CSS for the forms and the result to make the site visually interesting.

Exercise 03: Database

Exercise 03 focuses on creating databases to expand on the concept of memory. The assignment will focus on the design and development of a relational database to store items which are flexible enough to be used as blog posts, news articles, works in a portfolio, etc.

1. Create an administrative PHP page which allows you to input data into the database based on this template. Each item must have at least 4 columns.

2. Your database must consist of at least 2 tables. The first table will hold your items (posts, articles, works), and the second will hold user comments on each item. The comments table should store the name, date, and comment and should be related to the first table using a foreign key.

3. Create and execute a layout for your site. The focus for the design should be on displaying the items in an easy to navigate interface, and allowing for users to add comments to a particular item. Use XHTML, CSS, and JavaScript to create the design. Think about ways to use typography to show hierarchy and relationships between items on the page.

Final

The final few assignments are all part of the larger final project. The final project is a group project, in which teams of 4-6 people will concept, architect, design, develop, and deploy a fully functional website optimized for use on a mobile device.

The first step in the process is coming up with a concept for your site. Your concept should be one that uses the "shared" and "mass" features available on the web when using database driven dynamic websites. Consider how memory the the "wisdom of crowds" can be harnessed to make a interesting site. Also keep in mind that the site should be made to work well in a mobile context. How to ideas like embededness, temporary and shifting attention, location, and screen size play themselves out in your idea. Consider the article we read about twitter when thinking about these aspects of your proposal.

Other than these general considerations, YOU HAVE TOTAL FREEDOM. Use this as a place to build something you've always wanted, something you think the world needs, anything. It can be critical, funny, profitable, an application, game, whatever you want. Use this freedom wisely!

We will have an informal day of recruiting where people who feel strongly about their idea will try to get other students to join their team. For this meeting you need only bring a few sketches, or a clear understanding of how your idea works with these considerations.

Next, we form teams, and move on to developing the User eXperience and Information Architecture. For this part of the final, each team will be required to submit a detailed design document containing:

  1. The big idea, what you want to do.
  2. the purpose of the site (why)
  3. the audience (who) for the site
  4. user stories which give concrete examples of each of your users using the site. These don’t need to be too long, but they should give a good feel for how the user is served by your idea.
  5. Use your content from 2, 3, and 4 to talk about why your big idea is a good one.
  6. A sitemap.
  7. A grey box wireframe for each page on the site.

We will review these in class in meetings between me and each team.

The third step is figuring out a visual language and design for the site. This includes the overall look and feel, user interface elements, and branding for your site. At this point your site will likely have a name, but if not you must have a name for the project by the end of part 3. Remember that your design needs to work on a small screen as well. You have the option of trying to create one design that works in both a desktop and mobile browser, or having a different design for each. Which ever way you choose, you must discuss how the design will work on a small screen and show relevant examples.

Again, we will review these in class in meetings between me and each team.

The final step is to construct the fully working site. This will happen in two phases—prototype and release. The prototype will be a nearly "feature complete" version of the site which may not include 100% of the final design and functionality, but is enough to show to members outside of the team to get feedback. Note that the prototyping phase can begin while the design is still being worked out.

We will have an informal "desk crit" of each team's prototype and get feedback from your peers to help polish the site for the final push.

In the end we will crit and discuss everyone's site on the last day of class (thursday of week 10).

Teams are not required to choose a leader, but are free to do so. The internal organization of the teams is the responsibility of each team member. You can divide tasks up however you like, each person can work on something else, or everyone can work together all the time. But i do expect everyone to be working hard and not take advantage of the group nature of the project. We are working in groups because it is a large undertaking to complete a fully functional website, not as a way for people to shirk responsibility, not that i think any of you would.

You will be partially responsible for keeping me informed of issues in the team, and i will ask each of you to grade your team members for me to take into consideration when giving the final grades.