Week Three (MGDP2050)

Lecture notes and exercises for Week Three of Web Design and Development II (MGDP2050).

In the news

2015's worst password was 123456

You may not be surprised to learn that the Worst Passwords of 2015 include:

"123456"
"password"

Followups

Miscellaneous followup topics from previous weeks.

Books

No textbook is required for this class. You are free to use any supplemental materials.

See Recommended reading (MGDP2050).

Hyperlinks

Examples:

Absolute URL:

<a href="http://google.com">Link (absolute)</a>

Relative to document:

<a href="../some-folder/some-file.html">Link (relative to document)</a>

Relative to root:

<a href="/some-folder/some-file.html">Link (relative to root)</a>

See:

Parallax scrolling

Parallax scrolling is a technique in computer graphics and web design, where background images move slower than foreground images, creating an illusion of depth in a 2D scene.

Language, writing, memory

Last week, I talked about how language changes as people change.

I said -- inaccurately -- that Plato said that the invention of writing would result in the loss of memory skills.

An idea somewhat like this does appear in Plato's Phaedrus (dialog).

But the idea is somewhat different, and the idea is attributed to Egyptians:

Socrates tells a brief legend, critically commenting on the gift of writing from the Egyptian god Theuth to King Thamus, who was to disperse Theuth's gifts to the people of Egypt.
After Theuth remarks on his discovery of writing as a remedy for the memory, Thamus responds that its true effects are likely to be the opposite; it is a remedy for reminding, not remembering, he says, with the appearance but not the reality of wisdom.
Future generations will hear much without being properly taught, and will appear wise but not be so, making them difficult to get along with.

Responsive website examples

Project management

Project management is:

The discipline of carefully projecting or planning, organizing, motivating and controlling resources
In order to:
- Achieve specific goals
- Meet specific success criteria

Fast, Good, Cheap

Discuss the phrase "Fast, cheap, or good -- pick one" (and variants).

Software development process

In software engineering, a software development process is a method for dividing software development into distinct phases (or stages).

User

A user is a person who uses a computer or network service.

User interface design

User interface design (UID) or user interface engineering is the design of user interfaces for machines and software.

The goal of user interface design is to make the user's interaction as simple and efficient as possible, in terms of accomplishing user goals (user-centered design).

Good user interface design facilitates finishing the task at hand without drawing unnecessary attention to itself.

Graphical user interface (GUI)

A graphical user interface (GUI, pronounced "jee-you-eye") or sometimes /ˈɡuːi/ ("gooey") is a type of interface that allows users to interact with electronic devices.

Usability

Usability is the ease of use and learnability of a human-made object.

Web usability

Web usability is the ease of use of a website.

Broad goals of web usability include:

Presentation of information and choices in a clear and concise way
Lack of ambiguity
Placement of items in appropriate areas
- Important items where they will be seen quickly
- Supporting items where they can be found easily
Should be readable on a wide range of devices
- See Responsive web design

User Experience (UX)

User experience (UX) involves a person's behaviors, attitudes, and emotions about using a particular product, system or service.

User research

User research focuses on understanding user behaviors, needs, and motivations through observation techniques, task analysis, and other feedback methodologies.

Accessibility

Accessibility refers to the design of products, devices, services, or environments for people with disabilities.

Web accessibility

Web accessibility refers to the inclusive practice of removing barriers that prevent interaction with, or access to websites, by people with disabilities.

Web accessibility is important:

For humanitarian, ethical, moral reasons
Because many government agencies, and other institutions including many schools, require web accessibility compliance from vendors

Proof of concept

A proof of concept is a simple demonstration which proves (or suggests) that a concept will work.

Prototypes

A prototype is an early sample, model, or release of a product built to test a concept or process or to act as a thing to be replicated or learned from.

Mockups

In manufacturing and design, a mockup, or mock-up, is a scale or full-size model of a design or device.

Mockups are used for teaching, demonstration, design evaluation, promotion, and other purposes.

A mockup is a prototype if it provides at least part of the functionality of a system and enables testing of a design.

Mock-ups are used by designers mainly to acquire feedback from users.

MAMP

See:

Exercises: in class

Study groups

Organize yourself into groups of three or four.

Discuss your project idea(s) and website wireframe sketches.

Think about web usability, UX, and other group-related activities.

Ask yourself:

How can I use the power of a study group to improve my project?

How I can be helpful to other students as part of a study group?

Before you leave:

Write down the names of your group members
Turn in list of names to instructor

Exercises: for next week

Project

Decide what you want to do for your project, if you have not already done so.

Study group followup

Think about your conversation with your study group.

Improve wireframes

Improve your wireframes.

You should have three wireframes, for three device sizes:

Phone
Tablet
Desktop

Optional extra credit, make wireframes for four device sizes:

Phone
Tablet
Laptop / Desktop
Desktop (wide)

Wireframe images

For each wireframe, make an image for the web.

JPG or PNG, your choice

These are images you might show to a client, early in the web design process.

Should look better than a back-of envelope scribble

Does not need to be final, professional-grade presentation

Create folder (wireframe)

In your Local root folder, create a new folder named wireframe.

Create web page

In your wireframe folder, create a file named index.html.

Make this an HTML 5 web page, similar to your home page.

Set the page title and other standard information accordingly.

Display your wireframe images on the page.

Add text in the web page as appropriate -- state the device display size for each image, and anything else you care to say about the wireframes.

Update your Home page

On your Home page, make a link to your new Wireframe page.

Reading: for next week

Familiarize yourself with this material: