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

See:

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?

Deliver partial product
- In other words, admit failure to deliver all the deliverables
Browser ...?
Fire team members to save money
- Good luck with that
Hire team members to speed up development
- Probably not: see 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.

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.

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.