Assignment 1
Due
Exercise 1: Noticing the design of everyday things (25%)
Tip: Out of ideas on what to write about? You may find our recommended textbook The Design of Everyday Things useful for inspiration.
Deliverable: A directory with an HTML page for your writeup and any assets in folders like videos and images.
Just like every HTML page, your writeup should use semantically appropriate HTML elements and proper hierarchy.
Internal links and linked resources should use relative URLs.
In your writeup, please indicate if you’re ok with us making your solution available to the class.
Exercise 2: Learning to write good HTML (25%)
You are not allowed to use any CSS or JS for Exercise 2 and 3, except the few properties displayed in lecture
(e.g. color, font-size, font-weight), if you must.
You will add CSS in the next assignment, but the focus of this one is to learn to write good HTML.
Tip: To make the contact form functional without a server backend, you could use a mailto: URL for the form action.
Form fields named subject and body will be included in the email. Or the free version of formspree, or any similar service.
Deliverable: A directory with all your HTML files. All internal links should be relative.
Exercise 3: First steps at interactivity (50%)
You are not allowed to use any CSS or JS for Exercise 2 and 3, except the few properties displayed in lecture
(e.g. color, font-size, font-weight), if you must.
You will add CSS in the next assignment, but the focus of this one is to learn to write good HTML.
Often couples live together but do not wish to have joint finances. However, it is sometimes convenient for partners to pay for joint expenses with their personal accounts, or pay for personal expenses from a joint account/credit card or the other partner's account. For example, a joint credit card might have a better points program, or one partner might be short on money a given month. However, this means they need to keep track of this and try to bring the balance closer to zero over time. Make a web app to help couples with split finances manage their expenses, using HTML and Mavo.
Settings should at least include the names of the two partners.
Each expense should have:
- A date
- A title/description
- An amount
- Who paid (which may be "joint")
- Who the expense was for (which may be "joint")
In terms of output, at a minimum, it should display who owes whom and what amount.
Beyond basic functionality, your implementation should also address the following enhancements:
- Ways to facilitate efficient expense entry
- Other information that it would be useful to display or highlight
- At least one type of expense filtering that might be useful.
You can filter entries either via Mavo’s
mv-ifor the HTMLhiddenattribute with a Mavo expression.
The exact way you address these enhancements is left up to you. Which dimensions of usability (Learnability, Efficiency, Safety) are improved by each of these? If ypur enhancements do not address all three dimensions of usability, what enhancements can you make to improve all three? You need to both implement these enhancements, and briefly describe what they are in your writeup (one sentence for each is enough!).
A web app like this is one way for couple to keep track of their expenses. A spreadsheet would be a different way. Implement a spreadsheet for the same purpose on Google Sheets. How does the usability of the two compare?
How to calculate who owes whom?
You are welcome to implement the logic however you see fit. One way to do it is the following: You can keep track of a total balance of how much A owes to B. Assuming an amount of X, the following is added to the balance in each scenario:
| For A | For B | For Joint | |
|---|---|---|---|
| A paid | 0 | -X | -X/2 |
| B paid | X | 0 | X/2 |
| Joint paid | X/2 | -X/2 | 0 |
Then, to find who owes whom and what amount, we just sum these incremental balances. If the sum is negative, B owes to A, and when 0 nothing is owed. The amount owed is the absolute value of the balance.
We are going to be using Mavo so that you can start experimenting with HCI and interactivity before you learn Javascript. However, The objective of this exercise is the UI you create, not learning Mavo. We will be very liberal with providing technical help with Mavo, but we want to leave room for creativity in terms of the UI you create.
Deliverable: An HTML page with your app and an HTML page with your responses, including a link to your Google Docs spreadsheet. Make sure to share the Google sheet publicly so we can look at it!
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.
Make sure to update README.md with your Kerberos username, especially if it's different than your GitHub username.
If you push after the deadline, it will count towards your slack hours.