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"

See also:

• Credential
• Password

Followups

Books

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

See Recommended reading (MGDP2050).

Hyperlinks

See:

• a (HTML element)
• Hyperlink
• link (HTML element)

Scaling up

Scale is a measure of proportion.

Scale is a critical factor in many areas of technology, art, and life.

A classic problem in software development:

• We have software development in progress
• We wish to finish sooner

What can we do to finish sooner?

• TO DO: discuss in class

See also The Mythical Man-Month.

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.

User interface

...

Usability

...

User Experience (UX)

...

Accessibility

...

Prototypes, mockups, etc.

...

Exercises

In class

Study groups

Organize yourself into groups of three or four.

Discuss your project idea(s) and wireframe sketches.

Think about 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?

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

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.