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.

designftw.mit.edu/go/lab

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


					http://designftw.mit.edu/path/to/resource

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)

Host-relative
Path-relative
Page-relative

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!

Relative URL: Absolute base: Result:

Some URLs to try:

../..
/index.html
img/alice.jpg
https://google.com
.. with https://google.com as the base

Notes

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.

Notes

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.

Notes

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.

Notes

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

The id attribute defines an identifier which must be unique to the whole document.
The id attribute is case sensitive.
In HTML we can link to an element on the current page using the syntax #id

<a href="#site_title">Title</a> refers to an element with id="site_title"

Anchor Links

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

https://en.wikipedia.org/wiki/HTML#Elements

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 labels should be used anytime you are using a form element such as an input element.
Form labels are required for accessibility.
Screen readers will read out the label when the user focuses on the input.
Clicking on the form label shifts focus to the associated input element. For checkboxes and radios the label increases the target area.

Form Label Code (Wrapped)


					<label>Name<input type="text"></input></label>


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

You can wrap your form element with a label element.
Useful if you want to place the label text after the form element.

Form Label Code (For)


					<label for="username">Name</label>
					

					<input type="text" id="username"></input>

You can use the for attribute on a label element to reference a form element by it's id.
Useful if you want to place the label somewhere else on the page but still want to be accessible.

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.

Mavo

Getting Started

Add mavo css and js to your head. (In the following examples these are excluded for brevity)


							<head>
								<link rel="stylesheet" href="https://get.mavo.io/mavo.css"/>
								<script src="https://get.mavo.io/mavo.js"></script>
							</head>

Define a container for your mavo app with the mv-app attribute.


							<main mv-app="yourAppName">
								...
							</main>

Properties and Expressions

The property attribute tells Mavo which elements are saved and can be used in expressions.
Expressions are delineated by square brackets.
[5 + 5] evaluates to 10.
[5 + age] evaluates to 5 + the value of the age property.

First Mavo app

<main mv-app="properties" storage="local" mv-autosave>
					<section>
					<h2>Childcare Calculator</h2>
					<fieldset>
						<legend>Inputs</legend>
						<ul>
						<li>
						<label>Days per Week:
							<input type="number" property="daysPerWeek"
								min="0" step="1" max="7" value="3"/>
						</label>
						</li>
						<li>
						<label>Hours per Day:
							<input type="number" property="hoursPerDay"
								min="0" step="1" max="24" value="3"/>
						</label>
						</li>
						<li>
						<label>Cost per Hour:
							<input type="number" property="costPerHour"
								min="0" step=".01" value="15"/>
						</label>
						</li>
						</ul>
					</fieldset>
					<fieldset>
						<legend>Results</legend>
						<ul>
						<li>
						Cost per week:
						<strong>$<span property="costPerWeek">
							[costPerHour * hoursPerDay * daysPerWeek]
						</span></strong>
						</li>
						<li>
						Hours per Week:
						<strong>[hoursPerDay * daysPerWeek]</strong>
						</li>
						<li>
						Cost per Month:
						<strong>[round(costPerWeek * 4.33)]</strong>
						</li>
						</ul>
					</fieldset>
					</section>
					</main>

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)]

Collections

The mv-multiple attribute indicates to Mavo that an element is repeatable.

We can assign a property to a collection. A collection can also have nested properties.

							
								<article property="todo" mv-multiple>
									<input type="text" property="description"/>
									<input type="date" property="due"/>
									<input type="number" property="workTime"/>
								</article>

Multiple todos which each have an individual description, due, and workTime

<main mv-app="todos" mv-autosave mv-mode="edit">
					<section>
					 
					<details property="todo" mv-multiple>
						
						<summary>
							<label>
								<input property="done" type="checkbox" />
								Status
							</label> |
							<label>
								Description
								<input type="text" property="description"/>
							</label>
						</summary>
						
						<ul>
							<li>
								<label>
									Due
									<input type="date" property="due"/>
								</label>
							</li>
							<li>
								<label>
									<input type="number" property="workTime"/>
									minutes
								</label>
							</li>
						</ul>
					</details>
					</section>
					<section>
						<h2>Stats</h2>
						<dl>
							<dt>Nested Collection Properties are lists:</dt>
							<dd>[done]</dd>
							<dt>Number of todos:</dt>
							<dd>[count(todo)]</dd>
							<dt>Total Work Time:</dt>
							<dd>[sum(workTime)]</dd>
							<dt>Average Work Time Completed:</dt>
							<dd>[average(workTime where done)]</dd>
							<dt>Total Work Time Not Completed:</dt>
							<dd>[sum(workTime where !done)]</dd>
							<dt>Minimum Duration:</dt>
							<dd>[minimumDuration]</dd>
						</dl>

<meta property="minimumDuration" content="[min(workTime)]">
					</section>
					</main>

Debugging

Running Code Locally

Browse to directory containing html code
Check your python version with python -V
Based on your python version start a local server with

Python2

python -m SimpleHTTPServer 8000

Python3

python -m http.server 8000
Navigate to localhost:8000 in your browser

Why Not Just Open a file in Chrome?

Browsers want to protect your local files.
Browsers do not let extensions read your local files by default.
Some things will not behave the same on a file url, such as absolute URLs.

Mavo Inspector

Chrome Extension that lets you debug Mavo Apps
Does not access your files so you must use a local server.

Installation Link

Getting Started with the Inspector

On a page with Mavo, open the elements tab in chrome dev tools.

Right click on the page and click Inspect
or... ⌘+⌥+c on mac or Ctrl+⌥+c on windows.

The inspector is located in the side panel of the elements tab.

Basic Mavo Inspector

You can use the inspector panel to inspect Mavo Elements
The quick eval input can be used to evaluate Mavo expressions and functions.