Lab 1

Design Critique

In class we talked about principles of usability. Today we'll be developing our ability to critique and identify usability issues in the real world.

Broken HTML

In class we looked at error handling in HTML, CSS, and JS. Catching errors in HTML can be difficult since HTML attempts to correct mistakes. Today we'll cover some common sources of error.

Absolute URLs

Website running from /root/website


URL points to /root/website/path/to/resource

  • Absolute URLs should be avoided unless you are pointing to a resource from another site. Why? They are not DRY. Any change (moving files around, switching domains etc) requires going back to every absolute URL and changing it.

Relative URLs

URLs with some parts omitted because they are the same as another URL (usually the current location)

  • Relative URLs should be used for any resources on your own site, since relative URLs do not include the domain name.
  • When to use a relative URL from the current path vs. a relative URL from the root? A path-relative URL helps you create a self-contained page, whose folder can be moved and everything still works. A root-relative URL allows you to write markup with links that work from every page on a multipage-website, which is useful for templates. It is also useful for resources that are closer to the root and a URL that goes many levels up (../../../) would be hard to maintain. Basically, think of what would allow you the maximum flexibility to move files around without having to modify URLs.
  • Do not use protocol-relative URLs (which start with //)

Let’s play with relative URLs!


Some URLs to try:

  • ../..
  • /index.html
  • img/alice.jpg
  • .. with as the base
Relative URL from document root Spoiler You can use /labs/1/img/rocket_arc.jpg. If a URL begins with a / then it is assumed to start at the document root of your website.
Relative URL from current path Spoiler You can use img/rocket_arc.jpg. If a URL does not begin with a / then it is assumed to begin at the current path.
What is the expected output? There are two paragraphs in the HTML but only one paragraph is rendered on the second screen.
Solution If we look closely at the opening-tag of the second we may notice that it is incorrectly formatted. <p So she was considering should be replaced with <p> So she was considering.
What is the expected output? There is a paragraph, followed by an image, and another paragraph in the HTML. But there is only a single paragraph rendered.
Solution There is a missing quote. The alt attribute in the img tag does not have a closing quote.
What is the expected output? We want the terms to be emphasized and the definitions to be unstyled text.
Solution The closing em tag on Synonym: does not have a back slash.

Semantic HTML

ID Attribute

Anchor Links

We can anchor a link to an element on another page by suffixing the link with #id

The browser will scroll the element associated with the anchor into view. In this case the element has the attribute id="Elements"

These types of links are used on Wikipedia in the table of contents to scroll to sections of the document.

Form Labels

Form Label Code (Wrapped)

<label>Name<input type="text"></input></label> <label><input type="checkbox"></input> Accept Terms.</label>

Form Label Code (For)

<label for="username">Name</label>
<input type="text" id="username"></input>

Each of the inputs used here is semantically incorrect in some way. In the first input we want time of day, the type should be time not date.

In the second input we have a couple of issues. We probably do not want to sell anything for a negative price so the min value should be 0. The main issue for this input though is the step. If we try to increase the price we get fractions of a cent. In most cases we probably want to round to the nearest cent. So step should be changed to .01. We may also want to remove the max value.

In the third input we probably do not want a range slider although the min and max values are reasonable for 6 digit zipcodes.


Getting Started

Properties and Expressions

First Mavo app

List Expressions

[list(1, 2, 3)] [list(1, 2, 3) + 1] = [list(2, 3, 4)] [list(1, 2, 3) = list(3, 2, 1)] = [false, true, false]

Where Expressions

[list(1, 2, 3) where list(true, false, 1)] prints out [list(1, (empty), 3)] [list(1, 2, 3) where list(true, false, true) = false] = [(empty), 2, (empty)]



Running Code Locally

  1. Browse to directory containing html code
  2. Check your python version with python -V
  3. Based on your python version start a local server with
    python -m SimpleHTTPServer 8000
    python -m http.server 8000
  4. Navigate to localhost:8000 in your browser

Why Not Just Open a file in Chrome?

Mavo Inspector

Installation Link

Getting Started with the Inspector

Mavo Inspector Location

Basic Mavo Inspector

Mavo Inspector Location