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

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. A commit URL looks like https://github.com/designftw/hw9-username/commit/b59f14ba05869b3067724aa6d2006667a54c8e7d. You can submit as many times as you want. This is important. Your homework is not submitted and is accruing slack hours until you do this!

To make sure your homework is graded correctly, please follow the following:

• Please make sure each of your exercise 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 (URLs that start with /) or absolute localhost URLs, as these require the grader to run a local server at a specific directory within your repo. If for some reason 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: Iterate and implement a Balsamiq/Figma mockup of your Chat/Messaging App (45%)

In HW8, you user tested your paper prototypes. You should now have enough information about which features from each prototype work best to create a medium fidelity prototype.

For this, we will be using Balsamiq or Figma. If you'd prefer another tool that's fine, but make sure it allows you to create interactive prototypes, not just vector graphics.

This mockup must look like your intended user interface. You should also include some interactivity to allow users to interact with this mockup. Just like a paper prototype, you do not need to include every part of the interface.

Exercise 2: Improve Typography on your website (10%)

Use what we learned this week to improve typography on your personal website from past homeworks. Make at least 3 improvements and point them out in a short writeup (~1 sentence for each improvement).

Exercise 3: Making a personal tracking application (45%)

Personal tracking applications are useful for keeping track of things about oneself, e.g. mood, medications taken, menstruation start and end, migraines, and many more. While certain things such as sleep, or some kinds of exercise can be tracked automatically, the vast majority of things that people need to track about themselves (or their loved ones, e.g. kids, partners) are tracked manually. In this exercise, you will create such a simple manual personal tracking application that stores its data to GitHub.

In the skeleton we have provided an extremely bare bones tracker where each entry just contains a date and a notes field. There is a button to add new entries and a button to save. Data is "saved" and loaded from a <pre> element instead of a server. No CSS has been included at all.

1. First, decide what kind of tracker you want to build. Give it a name, and some style relevant to its purpose.
2. What fields would you need to keep track of for each entry? For example, for a migraine tracker, you would likely need a date & time the migraine ended, an intensity field (e.g. 1-5), and a field for the location of the migraine (left, right, both, etc.). It's ok to simplify the fields you need to track to make the task simpler for you, however your tracker should include more fields than the date and notes of the skeleton. If built-in form fields are not sufficient for your needs, you could use custom elements too (e.g. take a look at Shoelace), but be careful because not all custom elements out there work properly with forms. You can modify the HTML of the skeleton as you see fit, it is there to help you get started.
3. Include CSS to make this tracking application usable. Make sure you test on smaller screens too, a tracker that can only be used on a large screen is of very reduced utility.
4. Use madata.dev to store your data in a data.json file in the tracker folder of your hw9 repo, instead of "storing" it in a <pre> element. Similarly, when the page loads, data should be read from that same data.json file instead of the hardcoded contents of the <pre> element. Keep in mind that since this is a private repo, the user will need to log in first to access the data (though this may just happen passively at startup if the user has logged in previously).
5. You need to provide authentication UI. Madata offers asynchronous methods to make this easy for you. At a minimum, this UI should provide a way to log in, log out, and indicate whether you are logged in and who as.
6. Whenever asynchronous tasks are running, you should provide feedback to the user about what is happening (the details are up to you). Consider what happens when the user tries to interact with your application while a task is running, and make sure this does not result in bugs.

Exercise N: HW9 feedback

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 this form. You can edit it as many times as you like until the survey closes (48 hours after the homework deadline). Since this is part of your participation grade, it does not affect your slack hours, but failing to submit the form on time, could result in a lower participation grade.