6.S063 Design for the Web: Languages and User Interfaces

← Assignment 9

Assignment 10

Due

Submitting your homework

We are going to use Github Classroom for this assignment. You need to have an account on GitHub and be logged in. Authorize Github Classroom here and accept the assignment, then follow the instructions there. Please follow the structure and naming of the starter repo, though you can add any additional files if you need them.

To submit the assignment, please visit Canvas and submit the URL to your final commit that you want us to grade. You can submit as many times as you want. Your homework is not submitted and is accruing slack hours until you do this!

Please make sure each of your exercise-N directories are self contained, i.e. that you don't reference any files outside of the directory (e.g. from your repo root or other exercises). While having a common assets directory for all your exercises might be a good idea in general, we extract each exercise directory separately (as it may be graded by different people), and that will result in your pages not working correctly. Do not use root-relative URLs that expect a local server to run at a specific directory within your repo, and if you cannot avoid it, please document it in a README otherwise links may be broken for whomever is grading your homework.

If you submit after the deadline, it will count towards your slack hours.

Exercise 1: Use APIs to make a mashup (40%)

For this exercise you will build a simple application that combines data from multiple web APIs. The assignment is flexible; we describe one mash-up that you can use to fulfill the assignment but you can also devise your own. To fulfill the assignment your application must access at least two distinct, nontrivial APIs (ie, APIs that accept interesting parameters). The focus here is on API access, but your application will be graded using the usual rubrics for usability, HTML, CSS, and JS. The default application is a combined-video-search application. The user enters a query, and the application retrieves matching results from both Youtube and Dailymotion, combining them into a single consistent list (you may if you wish indicate the source of each video, but the individual items from the two sources should not look wildly different). Don't worry about pagination (a relatively complex part of the API); just display the "top" results returned by the initial query. If you wish, you can develop a different mashup. The only requirement is that it presents, in a naturally blended way, user-selected (e.g. by a query) data retrieved from two distinct sites/apis. Sample applications include: - An application the lets the user specify an artist, and retrieves (i) tracks by that artist from iTunes (ii) upcoming events from Songkick - An application the lets the user search for upcoming music events in Boston using Ticketmaster and Songkick - An application the lets the user specify a movie, and retrieves information about the movie (title, overview, and release date) from TMDB and its video trailers from Dailymotion If you want to invent your own application, you must first post a simple description (like above) to Piazza for an instructor to approve. Remember to keep it simple (the focus is just some practice using APIs) . Below is a list of APIs that we think are reasonably easy to use. Some require an API key and some do not. We recommend using at least one API with a key as this will be a useful skill for you to acquire. You can propose other APIs as well as other applications. - **No API key:** Dailymotion, Reddit, Google Books, iTunes, Stack Overflow, Nasa image search API - **API key:** YouTube, NY Times, Unsplash, Ticketmaster, Songkick, The Movie Database (TMDB)
Place your app in the `mashup` directory of the starter repo.

Exercise 2: Beginning to add Prototype Functionality using JS for Chat/Messaging App (40%)

In [HW 9 Exercise 2](../hw9/#exercise-2-htmlcss-js-for-chatmessaging-app-74) you implemented basic functionality in your HTML/CSS prototypes for the Chat/Messaging App. This week you will begin adding your prototypes' extra functionalities to your implementation. You will continue this work the following week, and you have some leeway on how to divide the work between the two weeks. However, we will be grading this week's work separately and expect it to be suitably scoped. This week, you should at a minimum implement one complete feature. "Feature" can be understood broadly, but examples we have seen in prototypes include: - Customized messages, e.g. message color, formatting, etc - Customized user names that people can assign to other people - Threads - Polls - Media (images, video, or audio) Your implemented feature should be testable by the graders even if the features are not that useful alone; a bunch of half-implemented features will not suffice. On the other hand, if you already implemented one of your features as part of hw9, you can use that for your submission this week and relax! Or get a headstart on assignment 11. If you are unsure whether your plan for first-week work is sufficient, speak to the TAs or LAs. The chat server and client library we developed should be flexible enough to meet most use cases. If you think that it is impossible to implement the functionality from your design phase, or if your design involves one giant feature that will require two full weeks to complete, reach out to the course staff. Your submission should retain the ability to send, receive, and delete messages as well as display a collection of messages which you implemented in the previous assignment. We will be grading you on usability, design, and the quality of your code implementation. The [documentation](https://designftw.github.io/chat-lib) will be very helpful for understanding the client. Especially the [home page](https://designftw.github.io/chat-lib) and [client page](https://designftw.github.io/chat-lib/Client.html).
Per the course's [collaboration policy](/collaboration.html) that "your code must be your own", you are not allowed to use Javascript libraries or frameworks. However, we will consider allowing certain specific-purpose libraries if they enable interesting UI prospects that would otherwise require a large amount of vanilla JS code and effort.
**Deliverable:** Your customized prototype of the chat/messaging app in the `chat-client` directory of the starter repo. Include a short description of what functionality is added from your prototypes either at the top of the HTML file, or near relevant parts.

Exercise 3: Improving color & typography on your website (17%)

Use what we learned about color & typography to improve those aspects of your personal website that you've worked on in [HW1](../hw1/#ex2), [HW5](../hw5/#exercise-1-adding-css-to-your-hw1-homepage-33), and [HW6](hw6/#exercise-4-make-your-homepage-more-universal-30). Make at least 5 improvements and point them out in a short writeup (~1 sentence for each improvement).

Exercise 4: HW feedback (3%)

Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, labs etc. Please fill in your feedback about HW9 in `hw-feedback/index.html`.