Exercise 1A: Animation & Dataviz Hall of Fame and Shame (30%)
Scour the web for UI hall of fame and shame examples one last time!
This time you are looking to find:
- Animation:
- One example of animation that enhances usability, one for each of the motion principles we discussed in lecture.
- One example of gratuitous animation that hinders usability and becomes annoying (possibly after a few times)
- One example of abruptness, where an animation would have enhanced usability.
- Data visualization
- Contribute one visualization to the class hall of fame on one to the hall of shame.
For each (as appropriate) use a short paragraph to describe what the animation or visualization is doing well and what it is doing poorly.
Where possible, suggest changes that would improve it.
**Deliverable:** HTML writeup.
Important: You only need to do ONE of 1A, 1B not both!
Exercise 1B: Design your own CSS feature! (30%)
Now that you've used web technologies for quite some time, are there any features you wish CSS had?
Write a proposal aimed at the CSS Working Group for your feature.
Your feature could be a property, new value(s) for an existing property, new selectors, new @-rules etc.
Make sure to discuss:
- **Most important:** Motivation. Clearly explain the use cases your feature solves, with examples.
Think about generality, typically features that are too specific to a few niche use cases are rejected.
- How your feature solves the use cases you mentioned.
- Proposed syntax. It's ok if this is not fully fleshed out, but a few ideas help ground the proposal.
- If a property: think of initial value, interpolation, whether it inherits, any shorthands/longhands
- Edge cases: what happens when you have unexpected inputs? E.g. for a layout mode, a window too narrow, or too wide, or too much content, or too little.
- Which CSS module would it be a part of?
While not graphical, languages are also a UI, so try to think about the usability principles you have learned while designing your feature.
Make sure to avoid proposing features that could create cycles, as these are not implementable.
E.g. suppose you wanted to propose a new pseudo-class ":max-width()" which only applies when the element’s width is smaller than the argument.
However, this can trivially produce cycles:
```css
.comment:max-width(500px) {
width: 600px;
}
```
Same goes for algorithms that require multiple passes to settle. While these are not a hard no like cycles, they are strongly avoided.
**Deliverable:** HTML writeup of your proposal.
Important: You only need to do ONE of 1A, 1B not both!
Exercise 2: Adding animation on your website (15%)
Use what we learned about animation & feedback 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), [HW6](hw6/#exercise-4-make-your-homepage-more-universal-30) and [HW10](hw10/#exercise-2-improving-color-typography-on-your-website-15).
Make at least 5 improvements and point them out in a short writeup (~1 sentence for each improvement).
Exercise 3: Prototyping a recipe reader app (20%) - For those who chose Ex 3 in HW10
Using the insights you collected from [Hw10, Exercise 3](../hw10/#exercise-3-evaluation-of-recipe-uis-30),
design a better interface for using recipes to cook.
If you've had more ideas after submitting HW10, that's not a problem, the goal is to be creative, not to be bound by your submission!
You can use any protototyping technique of your choice for this (HTML & CSS, Balsamiq/Figma etc), but must turn in an HTML/CSS prototype.
Here are some examples of improvements, in increasing order of interestingness:
- Checkboxes for ingredients & steps followed
- Modifying number of portions and have ingredients adjust
- UI with what equipment you will need to cook the recipe
- Nutritional info with suitability of food for various diets (e.g. keto, low-carb, low-fat, low-calorie, paleo etc)
- Sub-recipes (e.g. for a cheesecake: base, cream, topping), with option to show ingredients per sub-recipe for cooking, or in aggregate for shopping
- Hovering over ingredients in the description to see the amount without going back to the ingredients
- UI for altering the recipe with your modifications
- Displaying other people's modifications to the recipe in aggregate (e.g. "90% of people add more garlic"), based on the recipe comments.
These are examples to give you an idea of scope. Please try to be creative and go beyond these!
Exercise 3A: Prototyping an alternative app (20%) - For those who chose Ex 3A in HW10
Using the insights you collected from [Hw10, Exercise 3A](../hw10/#exercise-3a-alternate-for-those-who-dislike-food-30),
design a better interface for the task you explored last week.
If you've had more ideas after submitting HW10, that's not a problem, the goal is to be creative, not to be bound by your submission!
You can use any protototyping technique of your choice for this (HTML & CSS, Balsamiq/Figma etc), but you must turn in an HTML/CSS prototype.
Exercise 4: Implementation on Local Data (10%)
Add Javascript to your HTML/CSS mockup from Exercise 3/3A to make it functional.
For this exercise, you can "hard code" data for your application into the code itself, as JSON.
Exercise 5: API connection (22%)
Once you have a functional UI for your hardcoded data, extend it to load and store data dynamically using a suitable API you idenfitied last week.
**if you are implementing a recipe app:** there are various recipe APIs, we've collected and analyzed a sample in [this spreadsheet](https://docs.google.com/spreadsheets/d/19J06ioZOqy9mFL6ZdpaKqvNWrbpoNGY8ZTUt6v-Wdbk/edit?usp=sharing).
You can use a different one if you'd rather, but in that case please add it to the spreadsheet so that your classmates can find it more easily (you don't need to fill in all the info, but please try to fill in as many columns as you can).
**If you are not implementing a recipe app:** Please add the API you chose to use in the second tab of the spreadsheet, unless it's already there.
1. Enter a recipe URL from the website to view that recipe in your reader
2. Share URLs to recipes viewed in your app with other people or bookmark them
The deliverable for exercises 3/3A, 4, 5 should be in the same folder.
You do not need to separate it into HTML/CSS, static JS, and JS fetching from an API.
We split it that way in the assignment to be more transparent with regards to grading, but your deliverable is one functional web application for all three exercises.
Exercise 6: HW10 Feedback (3%)
Since this is a new class, we need your constructive feedback about every aspect of it: lectures, homeworks, recitations etc.
Please go to this [google form](https://docs.google.com/forms/d/e/1FAIpQLScuIE3EdMg1MQaEetnnEELa8gS-4q9IocM49UFWRMJfAV9DmQ/viewform) and answer its questions.
Submitting your homework
Similar to the previous assignments, we are going to use Github
Classroom again.
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.