Spring 2011



Topics Homework
W 1/19
Introduce class
Introduce first project, the Autobiographical Index Page Experiment
F 1/12 Files, Folders, Missing CDs, and Getting Started with Dreamweaver

Help Session on Test Drive 38-63

Organizing Folders

"Remember Earth Clearly" (handout)
Read the beginning of McFarland's Chapter 1

"Dreamweaver CS3 Guided Tour," pages 19-38. Mark passages and details you don't understand and would like to discuss.
M 1/24
AIPE: Concept and Practice
McFarland Help Session

Setting up a "www" site (including "remote info") (McFarland pg 609)

Exporting your "www" Site Info onto your USB ("www.ste" file)

Posting your work to the web and sending the URL to a forum
Complete McFarland's Chapter 1: Dreamweaver Test Drive tutorial, pages 38-63.

Read "Remember Earth Clearly"
W 1/26 Cascading Style Sheets
Importing site information

McFarland Help Session

Posting the Chapter04 folder to the Web

Review criteria for AIPE Project

Read Chapters 2, 3 and 4 of McFarland, and complete the tutorial in Chapter 4 "Introducing Cascading Style Sheets"
F 1/28 Links, Themes
Help Session McFarland C6

Discuss themes on home pages
Read McFarland's Chapter 5 and complete the Links Tutorial at the end

M 1/31
Images, Themes
Help Session McFarland C6 "Images"
Read McFarland's Chapter 6, "Images," and complete the tutorial.

  Topics Homework
W 2/2 Photoshop

: Beginning Banner Techniques (Photoshop)
Read McFarland's Chapter 7 "Tables" and Chapter 8 "Advanced CSS" and complete the "Tables Tutorial" starting on page 270

F 2/4 Photoshop, Constitutive Themes

Help Session McFarland C9

Exercise: Intermediate Banner Techniques (Photoshop)

Read McFarland, Chapter 9 "Page Layout." and comlete the tutorial "CSS Page Design"
M 2/7
CSS Layout Pages (DW)

Banners on your own CSS Layout Pages

HMTL Mark-Up Exercise, HTML/CSS Backstory

Bring in two or three pieces of content representing two or three themes to use on your AIPE Project: images, news items, an image showing your color scheme, a font, a list, a survey, etc.
W 2/9 Design Schemes
Character Design Scheme Group Work

Come in with a Design Scheme for the AIPE Project.

F 2/11

Design Schemes, Visual Hierarchy, Screen Real Estate
Discuss Character Design Scheme Group Work

Using code view (non-functioning .css or images).

Visual hierarchy and screen real estate

Complete the Character Design Scheme Group Work, and be ready to discuss.
M 2/14

Visual Hierarchy and Screen Real Estate

1. Dream and Nightmare Pages
In the forum, "Dream and Nightmare Pages," provide clickable links to two home pages from the Web and write a paragraph analyzing how each either exemplifies or ignores the principles of Visual Hierarchy and Screen Real Estate. Note that a page may be a dream of one principle, and a nightmare of the other. Most pages are somewhere in between, but be sure to label each as either "dream" or "nightmare."

A place to start looking for nightmare pages is the venerable web-design site, "Web Sites that Suck."

2. In the forum, "Model Personal Pages," create a clickable URL to a page from the web that you might use as a visual model for your AIPE page. The page should model the layout style and design you're interested in achieving. In a short paragraph, describe what you like about the page and want to emulate.

W 2/16 The Consequence of Page Layout

Cultural Codes (people, places)

Discuss Prospectus and Design Scheme Topics

Exercise: Tracing Images

More on Visual Hierarchy and Screen Real Estate

Installing Fonts and the What the Font! site

In a reply to your own message in the forum "Model Personal Pages," write a paragraph explaining some design choices you are making that will give your AIPE page effective visual hierarchy and screen real estate.
F 2/18 Studio Session for AIPE

Come in with all materials needed to work in class on your AIPE Project
M 2/21
AIPE due by noon
Save your project in the folder "www/4230/aipe", upload it to the web, and send the URL to the forum "AIPE URLs" under the heading "Projects"

Reading Guide for Mazrich (Part 1)
Come in with all materials related to your AIPE Project.

Write and bring in your commentary to turn in

W 2/23 Virtuality and Physicality
: Accidental Billionaires, 3-84

format of a sample midterm exam

Meet in BohH 104 for the next few weeks.

Read Accidental Billionaires, 3-84

Reading Guide 1
due by the beginning of class.


F 2/25

Mezrich: Accidental Billionaires, 85-159

Digital "culture"

How mythic scenes provide metaphors for identifying and remembering key issues in digital culture

Read Accidental Billionaires, 85-159

Reading Guide 2
due by the beginning of class
M 2/28
Open Forum: Mezrich: Accidental Billionaires, 160-252

More mythic scenes to add to our list?

How these scenes might work in the next assignment: the Critical Cloud Project.

Read Accidental Billionaires, 160-252

Post an open-ended question about the book to the forum "Accidental Billioinaires," which asks us to explore the treatment of some theme or issue related to digital culture in Mezrich's work.

Your question should point to a particular passage, with a page number, as a starting point for answering it. The question might concern a theme or issue we've discussed previously, or be a new one.

Your question should ask us to find additional passages in the book--with page numbers--that support a fuller understanding of the answer. Come in with at least two such passages noted down.

  Topics Homework
W 3/2 Discussion: Miscellaneousness vs. Geography


Read David Weinberger's Everything is Miscellaneous, Prologue, Chapter 1, Chapter 3

Complete and printout the Reading Guide, and bring it to class.

Read over the Critical Cloud Project assignment.


M 3/7
The Long Tail

Talk about the Critical Cloud Project assignment.

Receive handouts about Critical Focus and The Believing and Doubting Games.

Download, printout and read Chris Anderson's Long Tail. Intro and Chapter 2, both available from the "Readings" section of Moodle.

Complete and printout the Reading Guide

W 3/9 Andrew Keen

Critical Focus, The Believing and Doubting Games
Andrew Keen's Cult of the Amateur: Introduction and Chapter 1 available from the Moodle site under "Readings"

Complete the reading guide questions and print them out to turn in.

F 3/11

Pierre Levy: Anthropoligical Space, Knowledge Space, Subjectivity

Download, printout, and read Pierre Levy, available from the "Readings" section of Moodle.

Complete the reading guide, and print it out to turn in.

M 3/14
M 3/21
Discuss Heim, Web 3.0 handout

Receive a copy of the Web 3.0 handout
in class
Download, printout, and read Michael Heim's "Erotic Onology of Cyberspace," available from the Moodle site under "Readings"
W 3/23 Donna Haraway, Web 3.0 Download, printout, and read Donna Haraway, available from the Moodle site under "Readings"
F 3/25 "The Future of the Internet" (BBC).
Meet in KPlz 395

Today, we will use the Moodle forum "The Future of the Internet Index " to make connections:
1. among the ideas discussed in the BBC program, and
2. with ideas introduced in previous readings.

We will complete a clustering activity to identify key ideas, then them make connections and oppositions among them.

Then I will ask you to "self-reply" to your own message summarizing one important idea from the program, and explaining how that idea relates (in some way) to three or four other ideas, either from the program itself or from some of our previous readings.

Then I will ask you to reply to someone's else's self-reply, relating your important idea to theirs, and suggesting the sigificance of that connection/opposition/narrative
Listen to the "The Future of the Internet" and complete the online listening index.

M 3/28
Review for exam (Meet in KPlz 395)

We will
1. write sample questions,
2. talk about them in groups
3. revise them
4. I will have you copy and paste three questions into an email to me, and make the argumenht that they should be on the exam based on substance, unambiguousness, reasonableness, accountability.

See the Sample Exam Format
Bring in all readings

Meet in KPlz 395

W 3/30

Midterm Exam

Meet in BohH 104. Bring a blue or black pen that you trust.
F 4/1 Clients, Critical Clouds, and Color
Introduce the Critical Cloud Project, and the Client Project

Send your HLCCSSP senteces to the forum, 'HLCCSSP"

Color: Attaching Words to Examples

Meet in KPlz 395

Complete the Poynter.org color tutorial "Color, Contrast, and Dimension

"Make a "screen shot" of at least three examples from this tutorial which are valuable for what they suggest about effectively using color for Web pages. In Photoshop, size these screen shots to be 500 pixels wide, save them in a folder called "assets" inside of "exercises," and post the "assets" to the web in the location "4230/exercises/assets."

2. Follow the directions for inserting visible images in a Moodle forum to make these screen shots appear in a reply to the forum "Color Screen Shots." Note down ideas and quotes from the text of the tutorial so you can be prepared to talk about your choices. (We will use these ideas and quotes later.)

In the tutorial, you will learn Seven Contrasts of Color, the names of which start with the following seven letters: H. L. C. C. S. S. P. Write a nonsense sentence to serve as a mnemonic device for remembering the names of these seven contrasts.

  Topics Homework
M 4/4
Color Contrasts and Palettes

Model Color Scheme Page exercise. I will give you a copy of the handout.
In a reply to at least two of the messages in "Color Screen Shots." write a paragraph analyzing the use of color in an example offered from the Poynter tutorial and how it might be used strategically in the design of a web page.

Be sure to use and explain the terminology from the Poynter tutorial for color contrasts, and put these in bold.

Remember to specify which of the three images in the original message you're talking about. If you want to comment on two images in the same original message, send these paragraphs as two separate replies.

If you can find another example online of an image or page that exemplifies the principle you're talking about (or is a nightmare example of ignoring that principle), include the URL as a clickable link and explain the relevance in your paragraph.
W 4/6

Templates, Image Maps, Critical Focus

Troubleshoot C19

Word-Cloud Principles
(compare Sample project, and "Web 2.0" from Wikipedia)
1. design and meaning
2. unity vs. contrast
3. color scheme
4. screen real estate

Clickable Word-clouds in Photoshop and Dreamweaver (image maps)

2. Read McFarland's Chapter 19, "Templates," and complete the tutorial.

Remember that, before you start, you will need to copy the folder "Chapter19" from "MM_DWCS3" to your "exercises" folder inside of "4230."
Be sure to

Be sure not to skip the step on page 701 for setting up a specific site for this exercise, with the local root folder being "Chapter19" in your "exercises" folder (that is, "www/4230/exercises/Chapter19" on your USB drive).

Once you have completed the tutorial, use your "www" site in Dreamweaver to upload the "Chapter19" folder to the web, visit "hydroponics.html" with your browser, and copy the URL as a clickable link into a reply to the forum, "McFarland C19"
F 4/8

Critical Focus, Banner Principles

Critical Focus: see the handout "4 Niche Markets"

Banner principles: see samples

Return of exams at the end of class
Come in with a hand-written "word cloud" for your Critical Cloud assignment.

For each word or phrase, have at least two key quotations transcriped into a digital file from the original source of the idea.
M 4/11
Emblematic Graphics

Literal, Figurative, and Compressed Thinking: Revisit banner principles and samples

"Emblematic Graphics" on secondary pages.

Two-stage completion of the assignment (Friday and Monday)

Text "scrubbing"

Checklist for the Critical Cloud Project.

Work on your Critical Cloud assignment and bring in what you have.
W 4/13 Studio Session Bring in all materials for a Studio Session
F 4/14 Critical Cloud: Checking Out
Checklist for the Critical Cloud Project

Critical Cloud Site Due by the end of the day. Send a clickable URL for the home page to the forum, "Critical Cloud URLs"

Review Checklist

Bring in all materials relevant to the Critical Cloud
M 4/18
Client Project as Capstone Project

What are some ways that the Client Project draws on principles and techniques of our earlier projects? Let's say we're creating a web site for a new Meteorology Club on campus.

You will get in small groups and come up with a list: two principles/techniques from each of the following:
Personas and Scenarios
Getting the most out of personas
A Step by step guide to scenario mapping

By Beginning of class:
1. Commentary on the Critical Cloud due
2. Printout of the text of the Critical Cloud due at the beginning of the class; text also finalized on the site online.

W 4/20 Usability Principles, Personas and

What constitutes BETAs (Client Project)

Nielsen and Tahir discussion: The Big Picture

Bad Boys Bail Bonds
Directions for taking a "screen shot"
Directions for inserting visible images in a Moodle forum

I will ask you to work in groups to develop two personas for users of the web site for a new club on campus (the nature of the club is up to your group). Your personas should look like the one, "Peter: The busy parent," from the tutorial Getting the most out of personas,including a ficticious name and picture.

Develop the persona profile in a new discussion in the forum "Personas," either in a single message, or in a series of messages. Title the discussion with the initials of everyone in your group (for example, "GH, TM, BB, RZ"). At the top of the discussion, be sure to describe the club the web site would serve.

The discussion should include at the bottom the complete names of everyone in your group who participated.
1. Read "Preface:" (1), "Homepage Guidelines" (7-35). In this chapter, the authors identify 113 numbered guidelines for making pages more usable.

2. Write down the item numbers of 20
of the guidelines that you think are valuable, surprising, wrong, or most characteristic of Nielsen's and Tahir's approach.

3. On a large sheet of paper, create a cluster or cloud of these twenty items, each identified by Nielsen and Tahir's item number and a two- or three-word tag. As you write items in the cluster, see if you can indicate your emerging sense of patterns and connections by where you position each term.

4. Draw connecting lines
among the items in your cluster to show relationships and groupings. The more significant, useful, or surprising the connection, the darker and heavier the connecting line.

5. Draw circles
(or darker circles) around terms/items that seem most important, central, or "weighted"

6. Add your own words to the cluster to name these connections and the authors' larger principles. You can use your own terminology.

On the bottom of the page (or the back if you need room), make a list of three or four principles that you discovered through your clustering that epitomize Nielsen's and Tahir's approach and philosophy.

Bring all your work to class ready to discuss Nielsen's and Tahir's principles and how we can apply them to a Client Project.

Read the complete pages introduced today:
Getting the most out of personas

Step by step guide to scenario mapping

F 4/22

Scenarios &
Nielsen and Tahir Guidelines continued

Post the three or four "larger principles" from your 20-item cluster in a reply to the forum "Nielsen and Tahir's Big Picture" including relevant guideline numbers from Homepage Usability.

Scenario Mapping (your persona in action): What realizatons about design and writing result from imagining...
1. a detailed persona trying to accomplish...
2. a certain action in...
3. a particular context?

Via Moodle, your group should complete your persona profile begun in class last time.

Bring your Nielsen and Tahir book along with your 20-item cluster.
M 4/25
Usability Touchstones

Usability and Airport Desgin
In Nielsen and Tahir's Homepage Usability, read Homepage Design Statistics" (37-53) and "Introduction to the Home Pages" (55), and commentarites on the homepages through BBC Online (87)

Find three examples from the new readings that express any of the larger principles you posted in the forum "Nielsen and Tahir's Big Picture." Examples might include a detail of a particular web page shown, an observation the authors make on such a page/detail in a commentary, etc.

W 4/27 Exercise: Forms

Create the form on an existing page among your exercises.

Upload the updated page to the web, and send a clickable URL to the forum, "Forms."

Work on your Client Project BETA
F 4/29 Guest: Dan Jandl, Web Marketing Specialist, Odyssey Resorts and Development

Come in with three questions for Dan Jandl that might be relevant to issues raised by the Client Project.

From Dan:
I started building websites in high school and continued to do so through college as a way to make some extra money. I graduated from UMD as a marketing major, minoring in psychology and have lived in Duluth ever since. My current position is with Odyssey Resorts and Development and my title is Web Marketing Specialist. In a nutshell, I oversee almost all of the presence our companies have online including websites, social, email marketing and advertising. I work with the rest of our marketing department to plan campaigns and then execute the online portion of them.

Sites I've Worked On
- temporary site while our new one is being constructed
www.trapperslandinglodge.com - our resort Trapper's Landing Lodge
www.eastbaysuites.com - our resort East Bay Suites www.hoppedupcaribou.com - website for our beer festival this summer

Some of our other sites
- our resort Grand Superior Lodge
www.larsmontcottages.com - our resort Larsmont Cottages
www.caribouhighlands.com - our resort Caribou Highlands Lodge
www.facebook.com/odysseyresorts - our resort's parent Facebook Page

  Topics Homework
M 5/2

Studio Session

Bring all materials to work on your Client Project BETA.
T 5/3 Client Project BETA due.
Send the clickable URL to the forum, "Client URLs"
W 5/4

Archiving the BETA
(copying all files and folders into "www/4230/client/beta")

First Half: Green and Red hosts
Second Half: Blue and Orange hosts

Within 24 hours of the workshop, post written comments as a reply to each of the projects for which you were to prepare feeback (see right).

For the Visiting Day Workshop:

  • Green Team should prepare feedback for members of the Blue Team
  • Red Team should prepare feedback for members of the Orange Team
  • Blue Team should prepare feedback for members of the Red Team
  • Orange Team should prepare feedback for members of the Green Team

Bring your Nielsen and Tahir book

F 5/6


Course Evaluations

First Half, Blue and Orange hosts
Second Half, Green and Red hosts

Last Class Meeting

Within 24 hours of the workshop, post written comments as a reply to each of the projects for which you were to prepare feeback (see right).

For the Visiting Day Workshop:

  • Green Team should prepare feedback for members of the Orange Team
  • Red Team should prepare feedback for members of the Blue Team
  • Blue Team should prepare feedback for members of the Green Team
  • Orange Team should prepare feedback for members of the Red Team

Bring your Nielsen and Tahir book

FINALS WEEK By Thursday 5/12 at 10 a.m.
The final version of the Client Project is due. Post a URL to the forum "Client URLs."

The 500-word commentary should be submitted to my mailbox in H420 by the same time. No electronic copies accepted. Please turn in the commentary early if you need to.

< Previous