First Day of Class

This page will serve as the home base for our class this semester.

I will update this page for each class meeting. Items that appeared on this page from previous meetings can be found via the "<previous home-page items>" link at the bottom of this page.

The menu on the left will give you access to other materials related to the course.

Roll

Syllabus. On the first day, we'll be looking carefully at the syllabus.

Tour this site

For Thursday

Read over the syllabus to see if you have any questions.

Buy the books.

Obtain a USB drive (a.k.a., jump drive, thumb drive, key-chain drive), and create a structure of folders which looks like this.

You don't need to buy a new drive if you already have one with at least 100 MG of space on it. You can also use a Zip disk, though these are less durable:

Complete the Brainstorming Exercise we'll begin today. Bring in the result as a Word file on your USB drive.

Logging Out

When you leave today, don't forget to log out of your computer workstation. Double-click the "Logout" icon on the desktop.

Introducing the Personal Course Home Page Project

You will create and turn in a draft or "BETA" version of the PCHP Project, and, a week later, a Final Version. See the schedule for dates.

Round Characters

Make a list of "round" characters you can think of from movies, television, books, etc. How do these characters incorporate different, sometimes even contradictory traits?

• Gregory House

Brainstorming

For Thursday, complete the handout "Brainstorming the Personal Home Page Project."

• Open up a Word document,
• Save it as “pchp brainstorm” in your “nonwww” folder in a new folder called “pchp” (nonwww/pchp).  (If you don't have a USB drive or disk, save this in "My Files" on your desktop for now and move it to your drive next time)
• Type the number “1” at the top
• Below it, type a list of at least 12 places, things, activities, goals, experiences, social scenes, tastes, etc. that are part of your experience and how you identify yourself. 

Clustering as an InventionTechnique

Look at explanation of clustering in Step 3 of the PCHP Brainstorming handout.

Try clustering for two minutes on one of the following words or phrases: "home," "friday night," "sharp,"

Roll

For Today You Were to

• Read over the syllabus to see if you have any questions.
• Buy the books.
• Obtain a USB drive (a.k.a., jump drive, thumb drive, key-chain drive), and create a structure of folders which looks like this. You don't need to buy a new drive if you already have one with at least 100 MG of space on it.
• Complete the Brainstorming Exercise we'll begin today. Bring in the result as a Word file on your USB drive, including a first try at writing a preamble for your Personal Course Home Page (PCHP)

Questions?

...on the class? the syllabus? the Personal Course Home Page Project (BETA version due by Wednesday, February 4).

Course Assessment

As a way of measuring the effectiveness of this class, please answer a few multiple choice questions about your experience and confidence (here at the beginning of the semester) with various technical and conceptual areas. Your responses here will not effect your grade in any way.

USB Drive and folders

Any trouble getting your USB drives and creating a set of folders that look like this?

For Tuesday

• Decide on a "concept" for your Personal Course Home Page.
• Write a draft of your "preamble" that expresses this concept, bringing together the two or three themes of your "round-character" presentation.
• Bring your Dreamweaver book
• Print, read, and bring in three online commentaries about the "usability" from these writers: Jakob Nielsen, Shirley Kaiser, and Dirk Knemeyer. These commentaries will introduce some key ideas we will be discussing this semester, and that will appear on the final exam.

Round Characters

Make a list of "round" characters you can think of from movies, television, books, etc. How do these characters incorporate different, sometimes even contradictory traits?

• Gregory House

A round character suggests the essence of a story.

Presenting yourself as a round character on your Personal Course Home Page gives that informational page the dynamic interest of a story—without the plot.

Setting Up a Site in Dreamweaver

See the in-class handout "Setting Up a Site in Dreamweaver"

Liquid Page Design

Today, we'll try out Dreamweaver by making a Web page, posting it to the Web, and then visiting that page with our Web browser.

See the in-class handout, "Liquid Page Design (Dreamweaver)"

If we get far enough into this exercise today in class, I will ask you to complete these two exercises by class time on Tuesday. Send the URL to me in an e-mail with the subject line "5230 liquid"

If we don't get into these exercises sufficiently, we will complete these in class on Monday and use the Webx discussion board to post the URLs (more on this later).

In the "Liquid Page" exercise, I'll ask you to collect some online content from a Web site you like which uses both words and images. I'll use the blog "BoingBoing," which you're welcome to use too if you can't think of something else.

Jello Page Design

Visit the page for Jello Page Design and follow the directions there. You will also receive an in-class handout.

When we are finished, you'll post this exercise's folder (www/5230/exercises/jello) to the Web, visit the page with your browser, and copy the URL into the Webx discussion "jello URLs" (available the second week of classes).

<a curio cabinet>

Roll

To Get Ready for Class Today:

• Open Dreamweaver and import your site information ("www.ste" file from your USB drive).
• Open the file containing your preamble.
• Get out the three commentaries I had you print and read for today.

For Today You Were to

• Decide on a "concept" for your Personal Course Home Page.
• Write a draft of your "preamble" that expresses this concept, bringing together the two or three themes of your "round-character" presentation.
• Bring your Dreamweaver book
• Print, read, and bring in three online commentaries about the "usability" from these writers: Jakob Nielsen, Shirley Kaiser, and Dirk Knemeyer. These commentaries will introduce some key ideas we will be discussing this semester, and that will appear on the final exam.

For Thursday

• Read Chapter 6 of Williams and Tollett's The Non-Designer's Web Book.
• Today, I will give you a copy of the handout Logging into Webx Discussion Board (.doc). Try to follow the directions on your own before Wednesday (I will email you when this system is first available). If you have problems, bring your questions to class on Wednesday.
• Between today and Thursday at class time, paste the complete URL of the Liquid Page Design exercise into a message to the Webx discussion "liquid URLs."

By the End of Class Today

Before the end of class today, paste the text of your preamble at the top of your Liquid Page Design exercise. Format the text so it is differentiated from other text that appears on the page (see your Dreamweaver book's Chapter 4, starting on page 83, for ways of formatting text).

I understand that this text is only a draft of your preamble.

Preambles for the Personal Course Home Pages

Your preamble seeks to capture the not just the concept of your project, but the spirit, tone and rhythm of a character and voice. The design will be a visual realization of that voice.

Your page is both public and personal, a flexible level of informality somewhere between this...

and this...

Look at again the preamble on Christian Sandvig's home page....

Or consider how this first line from a preamble engages our sense of bodily experience:

I'll never forget the taste of fresh-cut pineapple in Thailand scuba diving with my friends.

Usability Debate (Online Readings)

We'll discuss the online commentaries about "usability" from Jakob Nielsen, Shirley Kaiser, and Dirk Knemeyer to understand the the significance of following terms:

• usability
• screen real estate
• Web design vs. content design
• semantics vs. representation (meaning vs. content)
• commoditization
• differentiation
• users

Liquid Page Design (Completed)

Today, we'll get back into Dreamweaver by continuing with our Liquid-Page-Design page, posting it to the Web, and then visiting that page with our Web browser.

See the in-class handout, "Liquid Page Design (Dreamweaver)"

Between today and Thursday at class time, I'll also ask you to paste the complete URL of the page into a message to the Webx discussion "liquid URLs."

In the "Liquid Page" exercise, I'll ask you to collect some online content from a Web site you like which uses both words and images. I'll use the blog "BoingBoing," which you're welcome to use too if you can't think of something else.

Jello Page Design

Visit the page for Jello Page Design and follow the directions there. You will also receive an in-class handout.

When we are finished, you'll post this exercise's folder (www/5230/exercises/jello) to the Web, visit the page with your browser, and copy the URL into the Webx discussion "jello URLs" (available the second week of classes).

<a curio cabinet>

Roll

For Today You Were to

• Read Chapter 6 of Williams and Tollett's The Non-Designer's Web Book.
• Today, I will give you a copy of the handout Logging into Webx Discussion Board (.doc). Try to follow the directions on your own before Wednesday (I will email you when this system is first available). If you have problems, bring your questions to class on Wednesday.
• Between today and Thursday at class time, paste the complete URL of the Liquid Page Design exercise into a message to the Webx discussion "liquid URLs.

• Bring in all materials to work on your Personal Course Home Page (BETA) in class on Tuesday. The BETA version is due to be posted to be Web by noon on next Wednesday, February 4.
• I will let you know at the end of class which exercises you will be responsible for completing by tomorrow at 9:30.

Preambles

• In the preamble, list-like chains of topics don't lend much unity, even when the items are glued together with generic transitions like "When I'm not doing X, I like to..." or "For a break, I like to..." If the topics can't be pulled together in the preamble, they're probably not going to seem unified on the Web page. If you mention something only once, maybe you should drop it altogether.

• Instead of lists or chains of topics, use an "umbrella" idea or scene to bring things together. In your draft, look for a "center of gravity"—some line or moment when the writing found itself and made something happen. Start with that in your next draft.

• The first line is vital. Don't start with ritual throat-clearing and general information. Look at your writing and, in a revision, try starting with the best line: "I am not a redneck!"

• The shorter the better. Condense, distill, combine sentences, suggest rather than explain, let the part imply the whole.

• The more concrete and specific the better. Rather than "I like movies," say "My favorite movie of all time is Major League (or Pulp Fiction, or Shrek...." See how it makes a difference?). If the time you spent in Denmark is important, share some tidbit or micro-memory that helps make that time and place real to us:

  "When I was an exchange student in Denmark, I learned a large part of Danish culture is expressed in something called "hygge." Roughtly translated, "hygge" means a cozy atmosphere including family and friends. We had "hygge time" every day, which meant all the coffee you could consume...."

Chapter 6: Design Principles

• Contrast
• Repetition
• Alignment
• Proximit

Let's try to apply these principles to an actual page.

Jello Page Design

Visit the page for Jello Page Design and follow the directions there. You will also receive an in-class handout.

When we are finished, you'll post this exercise's folder (www/5230/exercises/jello) to the Web, visit the page with your browser, and copy the URL into the Webx discussion "jello URLs" (available the second week of classes).

Beginning and Intermediate Banner Techniques

To begin this exercise, you'll need to visit the page Banner Techniques on my Techniques Site to download two images.

I will give you copies of the handouts Beginning Banner Techniques (.doc) and Intermediate Banner Techniques (.doc).

Alternatively, if you'd like to use images you've already selected for your Personal Course Home Page Project, you will need two images to work with:

1. an image that provides an overall scene or background
2. a different image with an object that you want to include in the scene or against that background

I will let you know when you will be responsible for posting these banners to the Web and sending the URL to the Webx discussion "banner URLs."

Roll

For Today You Were to

• Bring in all materials to work on your Personal Course Home Page (BETA) in class on Tuesday. The BETA version is due to be posted to be Web by noon on Wednesday, February 4.
• Send the URLs of the Jello Page Design exercise in a message to the Webx discussion "jello URLs."

By Wednesday at Noon

To turn in the PCHP Project (BETA) by the deadline:

• Create your PCHP project on your disk in the folder www/5230/personal. Be sure to keep all images in the folder www/5230/personal/assets. Save the page as "index.html" so it will function as the default page.
• Post all the contents of your "personal" folder to the folder www/5230/personal on the server.
• Visit the page with your browser and copy the URL from the location bar
• Go to the Webx discussion "Personal Course Home Page URLs," click "Post Message," paste the URL into the message box, and post it by the deadline.

Beginning and Intermediate Banner Techniques

To begin this exercise, you'll need to visit the page Banner Techniques on my Techniques Site to download two images.

I will give you copies of the handouts Beginning Banner Techniques (.doc) and Intermediate Banner Techniques (.doc).

Alternatively, if you'd like to use images you've already selected for your Personal Course Home Page Project, you will need two images to work with:

1. an image that provides an overall scene or background
2. a different image with an object that you want to include in the scene or against that background

I will let you know when you will be responsible for posting these banners to the Web and sending the URL to the Webx discussion "banner URLs."

Studio Day

Once we have completed the Banner Techniques exercises, you will have the rest of the time to work individually on your project. Please feel free to ask questions of your classmates or me.

Though you are working individually, this is still a class meeting, and you are expected to stay until the end of the class period.

Roll

For Yesterday by Noon You Were To

To turn in the PCHP Project (BETA) by the deadline:

• Create your PCHP project on your disk in the folder www/5230/personal. Be sure to keep all images in the folder www/5230/personal/assets. Save the page as "index.html" so it will function as the default page.
• Post all the contents of your "personal" folder to the folder www/5230/personal on the server.
• Visit the page with your browser and copy the URL from the location bar
• Go to the Webx discussion "Personal Course Home Page URLs," click "Post Message," paste the URL into the message box, and post it by the deadline.

For Tuesday

1. Find an appropriate model to guide your PCHP redesign (see below). Try to create a tracing image to structure your work for finalizing your Personal Course Home Page Project by next Wednesday at noon.

2. Color Tutorial
Complete the Poynter.org color tutorial "Color, Contrast, and Dimension "Make a "screen shot" of at least two examples from this tutorial to discuss on Tuesday. Bring them in on your drive saved in "nonwww" as a .jpg's.

Key Terms to Understand:

• "dimension" achieved with color
• Itten's Seven Contrasts of Color
• hue
• "complementary" colors
• simultaneous contrast
• saturation
• proportion

3. Bring all materiials to work on the final version of the Personal Course Home Page in a Studio Session.

Archiving the BETA

In your "personal" folder (that is, in www/5230/personal), create a new folder called "beta" and then copy the page "index.html" and the assets folder inside of it.

Do not touch or change anything inside of the folder called "beta." This is an archive of your BETA version (the "before" picture for the make-over to come). Make all future changes and improvements to the "index.html" page at the top level of the "personal" folder.

On that page, be sure to make a link to the BETA version among your "Projects" links.

From BETA to Final: Feeback

Today, I'll ask you to

1. visit the discussion Personal Course Home Page URLs and
2. look over my comments on your concept/page, and then
3. read and look at five other projects along with my comments on them.
4. Choose two of them and send a "reply" to the original message with your own suggestions, impressions, comments both as a fellow designer and as a classmate.

Remember respect takes two forms: be respectful of this first attempt by not being snide or dismissive, but also be respectful enough to expect more and better--rather than just passing everything off as "okay," as if that's all any of us are capable of.

Models of Proportion: Contrast, Repetition, Alignment, Proximity

What would your PCHP look like if you had the skills to make it look however you wanted?

Find a model page design somewhere on the Web. Make sure it's a model that's appropriate for the content on your page: that is, the amount, the proportion of images and text, the tone, and the purpose. Here are some sample pages to consider, some more appropriate to the PCHP project than others. The first and last links are to large lists of sample page/site designs.

• Screenalicious
• passiveaggressivenotes.com
• wisergirls.org
• Unforgettable Web Design
• Schematic
• Tearitdown.org (HTML version vs. Flash version)
• Webby Award Nominees and Winners 2008

Tracing Images

I will give you a copy of the handout "Tracing Images in Dreamweaver."

With this exercise, I'll ask you to choose a model page design from the list above.

Roll

For Today You Were to

1. Find an appropriate model to guide your PCHP redesign (see below). Try to create a tracing image to structure your work for finalizing your Personal Course Home Page Project by next Wednesday at noon.

2. Color Tutorial
Complete the Poynter.org color tutorial "Color, Contrast, and Dimension "Make a "screen shot" of at least two examples from this tutorial to discuss on Tuesday. Bring them in on your drive saved in "nonwww" as a .jpg's.

Key Terms to Understand:

• "dimension" achieved with color
• Itten's Seven Contrasts of Color
• hue
• "complementary" colors
• simultaneous contrast
• saturation
• proportion

3. Bring all materials to work on the final version of the Personal Course Home Page in a Studio Session.

Questions?

By Wednesday at Noon

To turn in the PCHP Project (Final) by the deadline:

• Revise your PCHP project on your disk in the folder www/5230/personal. Be sure to keep all images in the folder www/5230/personal/assets. The contents of your personal folder should look like this:
• Include a link on the page to the BETA version, which is down one level in the folder www/5230/personal/beta. Be sure to keep this BETA version just as it was when you turned it in a week ago to serve as the "before" picture.
• Post all the contents of your "personal" folder to the folder www/5230/personal on the server.
• With your browser, follow the link from the Webx discussion "Personal Course Home Page URLs" to make sure the updated page is working. The same URL should work for the updated page as long as you did not move the page or rename it.

For Thursday

• See the exercise "Color: Follow-up Using Screen Shots from Screenalicious" below and complete it for the beginning of class on Thursday.
• Visit the assignment page for the next project, The Glocalization Site Project, and come in (as a mental exercise) with questions or concerns that—in Minnesota parlance—"a guy" might have.

Color (Poynter Tutorial Exercise)

1. In Photoshop, open the two screen shots you took from the Poynter.org color tutorial "Color, Contrast, and Dimension.
2. Resize the screen shots to 680 pixels in width. (Try out the easy resize wizard in Photoshop by choosing Help > Resize Image...)
3. WIth your Web browser, visit the Webx discussion color poynter and and click the "Post Message" button at the bottom.
4. In the first line of the message, summarize in a phrase the principle of color use that the first screen shot illustrates (you may need to revisit the page in the tutorial to remind yourself).
5. Starting in the second line of the message, write a brief paragraph paraphrasing the principle of color use and why it's useful or important. Be sure to employ the critical terns provided by the tutorial: for example "hue" (especially deviations from pure "primary" colors), dimension, "complementary color contrasts," "warm" and "cool" colors, "saturation," "proportion," etc. Be sure your title uses these kinds of terms as well.
6. Attach the 680-pixel-wide version of the screen shot to the message before you send.
7. Post the message.
8. Do the same for the second screen shot that you chose from the tutorial.

We'll discuss your choices and what we can learn about applying these color principles by choosing a "limited palette" of colors for the design of unified and appealing Web pages and sites.

For Thursday: Color (Follow-Up Using Screen Shots from Screenalicious)

Why is it some pages seem to hang together better than others?

One reason is Williams/Tollett's principle of repetition, and one form of repetition is using a limited palette of colors.... See amazon.com, for example.

1. With your Web browser, visit the Screenalicious site for lots of examples of page design. Notice that when you click on the thumbnail image of a page, you get a larger .jpg image of the page.
2. Choose one page which exemplifies a principle of color use that you or someone else posted to the Webx discussion "color poynter"—or that ignores that principle to the page's detriment.
3. Right-click on the large .jpg image of that page (what you see after you click on the initial thumbnail) and download it to your USB drive into your "nonwww" folder.
4. Open that .jpg in Photoshop.
5. Open a new document in Photoshop, 50 pixels tall and 150 pixels wide.
6. Create a swatch of that page's colors—that is:
7. divide the new document into 2-5 sections with the marquee tool (proportionate to the use of colors on your page); use the Paint Bucket to color these divisions by "picking" the colors from the image of the page.
8. Save this "swatch" for the Web (File > Save for the Web) to your "nonwww" folder as a .gif called "swatch.gif"
9. With your Web browser, find a message to the Webx discussion "color poynter" that discusses the principle of color use that you chose in Step 2 above.
10. Choose to post a "Reply" to that message from the links on the right in the message's header.
11. On the first line of that reply message, type in the name of the page.
12. Starting on the second line of that reply message, discuss the page's use (or misuse) of that principle of color in a paragraph. Be sure to use critical terms from the tutorial, which might include:
    • "hue" (especially what the color picker shows you about any deviations from pure "primary" colors)
    • dimension
    • use of "complementary color contrasts" (or the degree that the contrasts are "bent" or not used at all)
    • use of "warm" and "cool" colors (in contrast or not)
    • "saturation"
    • "proportion"
13. Attach both the Screenalicious screen shot and your "swatch.gif" to that message.

Studio Day (Final Version)

Though you are working individually, please plan on staying and being productive until the end of our class period.

Roll

For Today You Were to

• Complete the exercise "Color: Follow-up Using Screen Shots from Screenalicious" below and complete it for the beginning of class on Thursday.
• Visit the assignment page for the next project, The Glocalization Site Project, and come in (as a mental exercise) with questions or concerns that—in Minnesota parlance—"a guy" might have.

Questions

• ...on the Personal Course Home Page?
• ...on posting the project to the Web?
• ...on the "Color: Follow-up..." exercise due for today?
• (we'll field questions about the Glocalization Project a little bit later)

For Tuesday

• Complete the Glocalizaiton Brainstorming and bring the final results on your USB drive.

Troubleshooting (and Cheating)

Open your Personal Course Home Page in Dreamweaver, in Firefox, and in Internet Explorer. Compare the stability and design of the HTML page's layout. In the two browsers, change the width of the windows to see what happens to the design.

Get together with one of your classmates, and troubleshoot one another's work in Dreamweaver. Fix what you can and make a list of problems you can't figure out how to fix on your page.

Color (Follow-Up Using Screen Shots from Screenalicious)

Why is it some pages seem to hang together better than others?

One reason is Williams/Tollett's principle of repetition, and one form of repetition is using a limited palette of colors....

1. With your Web browser, visit the Screenalicious site for lots of examples of page design. Notice that when you click on the thumbnail image of a page, you get a larger .jpg image of the page.
2. Choose one page which exemplifies a principle of color use that you or someone else posted to the Webx discussion "color poynter"—or that ignores that principle to the page's detriment.
3. Right-click on the large .jpg image of that page (what you see after you click on the initial thumbnail) and download it to your USB drive into your "nonwww" folder.
4. Open that .jpg in Photoshop.
5. Open a new document in Photoshop, 50 pixels tall and 150 pixels wide.
6. Create a swatch of that page's colors—that is:
7. divide the new document into 2-5 sections with the marquee tool (proportionate to the use of colors on your page); use the Paint Bucket to color these divisions by "picking" the colors from the image of the page.
8. Save this "swatch" for the Web (File > Save for the Web) to your "nonwww" folder as a .gif called "swatch.gif"
9. With your Web browser, find a message to the Webx discussion "color poynter" that discusses the principle of color use that you chose in Step 2 above.
10. Choose to post a "Reply" to that message from the links on the right in the message's header.
11. On the first line of that reply message, type in the name of the page.
12. Starting on the second line of that reply message, discuss the page's use (or misuse) of that principle of color in a paragraph. Be sure to use critical terms from the tutorial, which might include:
    • "hue" (especially what the color picker shows you about any deviations from pure "primary" colors)
    • dimension
    • use of "complementary color contrasts" (or the degree that the contrasts are "bent" or not used at all)
    • use of "warm" and "cool" colors (in contrast or not)
    • "saturation"
    • "proportion"
13. Attach both the Screenalicious screen shot and your "swatch.gif" to that message.

If "a Guy" had a Question.

Let's discuss the Glocalization Project.

Glocalization Project Brainstorming

I will give you a handout to complete for this activity. Bring the Word file you'll create to class each day on your USB drive.

Roll

For Today You Were to

1. Complete the exercise "Color: Follow-up Using Screen Shots from Screenalicious."

2. Complete the Glocalizaiton Brainstorming and bring the final results on your USB drive.

Questions?

For Thursday

• Complete the exercises from today, post them to the Web, and send the URLs to the respective Webx discussions.
• In a closely written paragraph, explain the "glocal" value that your intended topic/angle gives to a non-local audience. How would define the "'scape" that your audience shares with your topic, since sharing a common landscape is not the point? Plan on revising this paragraph a number of times before you turn it in on Thursday.

John Updike's "Thirteen Ways..."
We'll look briefly at excerpts from Updike's essay on the Masters as an example of specifying angles on a topic.

Send Me Topic/Angle
Please send me your best topic/angle from your Glocalization Project Brainstorming. Don't worry—I understand that this is not necessarily the subject of your project, just a tentative idea.

Marking Up Text
We will learn a little bit about what's happening behind the scenes with HTML code.

I will give you an in-class handout.

Send the URL of the final project, posted to the Web, in a message to the Webx discussion "code URLs."

Tiling Backgrounds
We'll learn to create our own tiling backgrounds in this exercise. See the "Tiling Backgrounds" page from the Techniques Site where you will download an image to use.

I will also give you a copy of the handout.

Send the URL of the final project, posted to the Web, in a message to the Webx discussion "tiling background URLs."

Roll

For Today You Were to

• Complete the exercises from Tuesday, post them to the Web, and send the URLs to the respective Webx discussions.
• In a closely written paragraph, explain the "glocal" value that your intended topic/angle gives to a non-local audience. How would define the "'scape" that your audience shares with your topic, since sharing a common landscape is not the point? Plan on revising this paragraph a number of times before you turn it in on Thursday.

Send Me Your Paragraph

Please send me the paragraph I asked you to write today about the "glocal" value of your intended topic for the Glocalization Project using the form below.

If, before the end of the day today, you change your mind about this paragraph, you may rewrite it and send it again.

Questions?

Send Me Topic/Angle
If you haven't done so yet, please send me your best topic/angle from your Glocalization Project Brainstorming. Don't worry—I understand that this is not necessarily the subject of your project, just a tentative idea.

PCHP Extra Technique
One of the requirements in your Personal Course Home Page was to use a technique not covered in class. If you used such a technique and didn't include that information on the page itself, please send me the following information:

For Tuesday

• Finalize your idea for the Glocalization Project (with a clear idea of the topic/angle and audience). Write and bring in a one-sentence explanation of it.
• Read Chapters 7 and 8 in Williams and Tollett's The Non-Designer's Web Book.
• Bring your Williams and Tollett book

Using the Local Texture to Explain the Abstractly Global

See this journalistic, television-based example of making the local global: Paul Solman's report from Lansing, MI on the American auto industry.

Inventing a Glocal Angle on a Local Topic (Brainstorming)

1. Copy the following list of topics/angles into a blank page in Word.
2. Above the list, insert a 3-column/1-row table
3. At the top of the left-hand column, type the heading "Truly Glocal"
4. At the top of the middle column, type "Local Only"
5. At the top of the right-hand column, type "Not Local"
6. Now, imagine you are someone living in Phoenix, Arizona (or wherever) who will never leave Phoenix except via the Web, visiting a Web site created around each of these topics/angles.
7. Into the "Truely Glocal" column, copy and paste the site topics/angles that you might find compelling, interesting, and relevant to you in the "Truly Glocal" column (assuming that you shared an extra-local interest or passion with the site).
8. Into the "Local Only" column, copy and paste the site topics/angles that would exclude you because they seem tailored to "local only" or visitor interests.
9. Into the "Not Local" column, copy and paste the site topics/angles that might interest you in a general way but not necessarily enable you to experience or learn about a distant locale from Phoenix (Duluth, Beaners, Ely, etc.).
10. Reconsider your choices, especially in the "Only" and "Not" columns. If you shared a certain interest, taste, passion, enthusiasm with the creator of the site, could you imagine moving any topics/angles to the "Truly Glocal" column.
    • (In parentheses, type in what that special interest, taste, passions, enthusiasm would need to be for that item to stay in the "Truly Glocal" column.)
    • What if you changed the wording of the item to re-focus the angle, or took just one of several possible angles. (Indicate such changed wording in items on your list with bold.)
11. Move those items that you added parenthetical insights or bolded revisions

The List

The Colors of Duluth

The Glensheen Mansion. I want to focus on its interior design rather than its architecture, history, or the family.

Fall in Duluth

Body Modification as a cultural phenomenon and it's impact on college culture

The sauna as a cultural symbol of Finnish Americans,
Perhaps I will focus on the social aspect of the sauna, or maybe,the family focus would be better?

High school forensics, more specifically speech. I might go even more specific than that and only cover extemporaneous speaking as I have the greatest amount of knowledge about that. The general purpose of the website would be more interactive and be designed to help high school level extempers connect with one another as well as graduated/former extempers to help improve their speaking abilities as well as prepare for tournaments. It would be founded on the idea of creating a more social environment that mimics facebook or myspace (although it'd obviously have certain practical differences).

Bob Dylan / Duluth

My natal city in the light of communism (the government at the moment) and to give contra arguments that it is not a communistic city but more of an anarchic one

Golf: I wanted to focus more highlighting the more casual side of golf. When people hear golf, a majority of them think it is either an extremely difficult activity to partake in or that it is just plain boring. I want to go at the angle that you don't have to be great at the game of golf to have a positive experience.

Seeing Duluth through the eyes of the Romantic Poets

View of housing problems in Duluth as it relates to college students. Specifically: who, what, why, how of the decisions made for restricting rental properties. Angle will be that since Duluth is losing jobs, population, and revenue since the 'Iron Range' jobs are closing down, it makes no sense for the city to make these decisions.

Duluth's hidden gems: "How a local would spend a day"

cliffs of Duluth. There are some nice cliffs and views so I wanted to take some approach which involved these

Date in Stillwater, MN. Choosing specific places to
eat and visit and describing them etc.

Apostle Islands Navigation and Weather Interpretation 

For this exercise, create a folder called "instant" in your folder "www/5230/exercises." Copy into "instant" the "index.html" page and the "assets" folder from your "personal" folder (your Personal Course Home Page).

Open that version of the PCHP that you copied over to "instant" (not your real one!) and create a sample set of links in a prominent place on the page: Family, School, Music, Friends, Future.

Graphic Headings / Color Headers with Dropshadows on Transparent Backgrounds / Image into Type

This set of exercises will help you improve visual hierarchy and your use of contrast and repetition on your pages.

For this exercise, you'll need to visit the techniques page and follow directions there. I will give you a copy of the handout.

Use the "index.html" page in your "instant" folder (see above). When we've finsihed, visit the page with your browser and copy-and-paste the URL into a message to the Webx discussion "headings."

Note that, once you create the graphic heading file, you can

• change the "background" image by replacing/hiding the image layer and hitting control+g again
• you can retype the text to make multiple headings from the same file.

Every time you "Save for the Web," you take a snapshot of how this file looks at that moment. Each resulting image file can be inserted in different locations on your pages.

Templates (If There's Time to Begin)
See the in-class handout. Post the results to the Web and send the URL to the Webx discussion "templates."

Roll

For Today You Were to

• Finalize your idea for the Glocalization Project (with a clear idea of the topic/angle and audience). Write and bring in a one-sentence explanation of it.
• Read Chapters 7 and 8 in Williams and Tollett's The Non-Designer's Web Book.
• Bring your Williams and Tollett book

Questions?

• about the Glocalization Project?
• about the tiling backgrounds exercise?
• about the Instant Site exercise?

For Thursday

• Complete the group of exercises "Graphic Headings" and "Templates" (see below)
• Read Williams and Tollett, Chapter 10 "Graphic Definitions..."
• Work on your Glocalization Site, especially collecting all images and information needed.

Send Me Your One Sentence Explanation of the Glocalization Project Idea.
Please send me your one-sentence exanation of your Glocalization Project.

Chapters 7 and 8: Interface/Navigation and Bad/Good Design

We'll look at the handout Site Menus (Seven English Departments) to talk about the writing of navigational menus.

First, imagine the work of English department sites. Here are some real-life examples:

• UC Santa Barbara
• Ball State University
• St. Olaf

Key Terms:

• Introspective Terms
• Granularity
• Internal and External links
• Mystery Meat Navigation
• Airport Navigation
• Descriptions of Forms vs. Meanings
• Audience-Focused Navigation

We'll also discuss the "good" designs starting on pages 160 to test our understanding of the principles of Contrast, Repetition, Alignment, Proximity.

Graphic Headings / Color Headers with Dropshadows on Transparent Backgrounds / Image into Type

This set of exercises will help you improve visual hierarchy and your use of contrast and repetition on your pages.

For this exercise, you'll need to visit the techniques page and follow directions there. I will give you a copy of the handout.

Use the "index.html" page in your "instant" folder (see above). When we've finsihed, visit the page with your browser and copy-and-paste the URL into a message to the Webx discussion "headings."

Note that, once you create the graphic heading file, you can

• change the "background" image by replacing/hiding the image layer and hitting control+g again
• you can retype the text to make multiple headings from the same file.

Every time you "Save for the Web," you take a snapshot of how this file looks at that moment. Each resulting image file can be inserted in different locations on your pages.

Templates
See the in-class handout. Post the results to the Web and send the URL to the Webx discussion "templates."

Roll

For Today You Were to

• Complete the group of exercises "Graphic Headings" (see below)
• Read Williams and Tollett, Chapter 10 "Graphic Definitions..."
• Work on your Glocalization Site, especially collecting all images and information needed.

Questions

• ...on the Glocalization Project?
• ...on graphic headings?
• ...on writing menus for sites (e.g. English department site samples discussed last time)?

For Tuesday

• Complete the Templates exercise (see below).
• Work on your Glocalization Site, especially collecting all images and information needed. This project will be due by noon on Monday, March 9 (a week from next Monday).

Online Value

Value is personal. For the Glocalization site, success means keeping in mind just what is personally valuable about your topic for your intended audience—even though your audience has never and will never be personally present in your locale.

A visit to the Carthage, Illinois, jail.

Chapter 8 (The Devil's Advocate Revisits)
Let's play devil's advocate with Williams' "good design" examples starting on page 160. Are there ways they remind you of some of the preceding "bad design" examples? Ways they might be even better?

Chapter 10: Graphic Definitions
Open up a photograph in Photoshop to see some of the principles discussed here in action.

Templates
See the in-class handout. Post the results to the Web and send the URL to the Webx discussion "templates."

Roll

For Today You Were to

• Complete the Templates exercise (see below).
• Work on your Glocalization Site, especially collecting all images and information needed. This project will be due by noon on Monday, March 9 (a week from next Monday).

Questions?

• about the Glocalization Project?
• about the Templates exercise?

For Thursday

• Work on your Glocalization Project.
• Come in with one question or problem about the Glocalization Project to present to the class.
• Bring in all materials to work on your project in a Studio Day. The project will be due by noon on Monday, March 9 (URL posted to the Webx discussion "glocal URLs").

Selecting With Masks

For this exercise, you'll need to visit the Techniques Site page "Selecting with Masks" and download two images.

I will give you a copy of the in-class handout.

Save the resulting Photoshop document into your "nonwww" folder.

Then choose "Save for the Web" and save a .jpg version of the image into a new folder "www/5230/exercises/imagemap/assets".

This exercise will share the same Webx discussion with "Image Maps" below.

Image Maps

We will insert the image above into an HTML page in this exercise.

I will give you a copy of the handout "Image Maps."

Save the resulting HTML page into your folder "www/5230/exercises/imagemap."

Send the URL of this HTML page (containing the image produced in "Selecting with Masks") in a message to the Webx discussion "image maps/selecting with masks."

Answer

Please answer my email concerning the "5230 glocal sentence" you sent last week.

Roll

For Today You Were to

• Work on your Glocalization Project.
• Come in with one question or problem about the Glocalization Project to present to the class.
• Bring in all materials to work on your project in a Studio Day.

Questions?

• about the Glocalization Project?
• about the exercises "Selecting with Masks" or "Image Maps"?

Glocalization Due by Monday, March 9 at noon

The Glocalization Project is due. To turn in the project:

1. post the entire project to the Web (at "www/5230/glocal"),
2. visit the site with your Web browser,
3. copy the URL of the home page,
4. paste the URL in message to the Webx discussion "glocal URLs."

For Tuesday, March 10

In the Trend book, read

• William Gibson's "Johnny Mnemonic" (page 57) and
• Donna Haraway's "A manifesto for Cyborg's" (page 28).

Questions to consider:

• Gibson (a fiction writer) and Haraway (a biologist and philosoher) are both writing about cyborgs. But how do they mean "cyborg" differently?
• What does the notion of a cyborg have to do with Web design and digital culture?

Bring in your Trend book

Help Me Remember...
...to give you your Personal Course Home Page checklists and responses before you leave today.

Studio Day

To begin our Studio Day, please write your question or problem in a brief message to the Webx discussion "glocal questons on studio day"

Then, discuss the question or problem a neighbor. See if you can answer or solve it before beginning work on your own project.

Though we will be working individually today, this is still a class meeting and you should remain in class being productive until 10:45.

For Today You Were to

In the Trend book, read

• William Gibson's "Johnny Mnemonic" (page 57) and
• Donna Haraway's "A manifesto for Cyborg's" (page 28).

Questions to consider:

• Gibson (a fiction writer) and Haraway (a biologist and philosoher) are both writing about cyborgs. But how do they mean "cyborg" differently?
• What does the notion of a cyborg have to do with Web design and digital culture?

Bring in your Trend book

Questions?

For Thursday

Read Michael Heim's "The Erotic Ontology of Cyberspace" pages 70-86 in Trend.

The Unintended Consequences of Web Design
Let's look together at the assigment for a few mintues.

The Final Exam
See the guidelines page concerning the final exam. Key ideas are indexed in the "Ideas, Skills" column of the schedule.

Locating Ourselves on the Map (Haraway)
See the map.

Resisting Theory
See The Believing and Doubting Game (Peter Elbow)

Donna Haraway's "A Manifesto for Cyborgs" (as Describing an Unintended Consequence)
See pages 28-37 in the Trend book

1. What does Haraway mean by saying "We are cyborgs" (28)?

2. How does Haraway suggest we react to being cyborgs?

See the discussion.

Key Terms

• dystopia
• cyborg
• cyborg politics

Example
Stelarc (performance artist) - The Body is Obsolete, and Robodock

For Today You Were to

In the Trend book, read

• William Gibson's "Johnny Mnemonic" (page 57) and
• Donna Haraway's "A manifesto for Cyborg's" (page 28).
• Read Michael Heim's "The Erotic Ontology of Cyberspace" (pages 70-86).

Questions to consider:

• Gibson (a fiction writer) and Haraway (a biologist and philosoher) are both writing about cyborgs. But how do they mean "cyborg" differently?
• What does the notion of a cyborg have to do with Web design and digital culture?

Bring in your Trend book

Questions?

For Tuesday, March 24, and Beyond
Read Sherry Turkel's "Who Am We?" starting on page 236 of Trend, and review Heim.

In case you're using Spring Break to prepare for the rest of the semester, you can find all the reading assignments listed under "Homework" on the schedule.

The remaining, major requirements of the course are the Essay, the Client Project, and the Exam.

The Unintended Consequences of Web Design
Let's look together at the assigment for a few mintues.

The Final Exam
See the guidelines page concerning the final exam. Key ideas are indexed in the "Ideas, Skills" column of the schedule.

Locating Ourselves on the Map (Haraway)
See the map.

Resisting Theory
See The Believing and Doubting Game (Peter Elbow)

William Gibson

Donna Haraway's "A Manifesto for Cyborgs" (as Describing an Unintended Consequence)
See pages 28-37 in the Trend book

1. What does Haraway mean by saying "We are cyborgs" (28)?

2. How does Haraway suggest we react to being cyborgs?

See the discussion.

Key Terms

• dystopia
• cultural work
• displacement (anxiety and critique)
• cyborg
• cyborg politics

Example
Stelarc (performance artist) - The Body is Obsolete, and Robodock

For Today You Were to

Read Sherry Turkel's "Who Am We?" starting on page 236 of Trend, and review Heim.

In case you're using Spring Break to prepare for the rest of the semester, you can find all the reading assignments listed under "Homework" on the schedule.

The remaining, major requirements of the course are the Essay, the Client Project, and the Exam.

No Class Thursday

Questions?

For Tuesday, March 31
In the Trend book, read Timothy Allen Jackson (347-) and Brenda Laurel (109-)

Gibson, Harraway and The Unintended Consequences of Web Design
Let's look together at the assigment for a few mintues.

See the map.

Key Terms from the Gibson/Harraway

• dystopia
• cultural work
• displacement (anxiety and critique)
• cyborg
• cyborg politics

Example
Stelarc (performance artist) - The Body is Obsolete, and Robodock

Michael Heim (Philosopher)
Page 70

Opening Question: What does Heim mean when he announces that he's writing to discover the "erotic ontology" of digital exerience?

Key Terms

• Platonism (compass analogy)
• Eros (erotic),
• ontology
• monads (monadology)
• philsosophical significance of the body

Sherry Turkle (Clinical psychologist and sociologist)
Page 236

Opening question: What does Turkle mean by postmodern "identity"? What does she not mean?

Key Terms

• identity
• windows
• play
• community
• liminality (liminal moment)

For Today You Were to

In the Trend book, read Timothy Allen Jackson (347-) and Brenda Laurel (109-)

Questions?

For Thursday
In Trend, read Pierre Levy 253-, and Manuel Castells 154,

Send Me an Idea for Your Essay
By the end of the day today, email me a brief summary of your idea for the Essay project. Include the Web site you're thinking of examining, what "unintended consequence" you'll be describing, and any of the theorists we've read so far that you might use to discuss this consequence.

Sherry Turkle (Clinical psychologist and sociologist)
Page 236

Opening question: What does Turkle mean by postmodern "identity"? What does she not mean?

Key Terms

• identity
• windows
• play
• community
• liminality (liminal moment)
  

Brenda Laurel's "Computers as Theater" (109)

Key Terms:

• representation (vs. information)
• performance

Timothy Allen Jackson's "Towards a New Media Aesthetic" (347)

• aesthetics
• analog time vs. digital time
• picnolepsia (positive and negative)

For Today You Were to
In Trend, read Pierre Levy 253-, and Manuel Castells 154,

Questions?

For Tuesday
1. Print out, read, and bring to class the following sections from Lawrence Lessig's book Free Culture (available online)

• Introduction,
• Introduction to section on "Piracy"
• Chapter One

2. Complete the "Sample Passage" exercise (see the in-class handout).

1. Send Me an Idea for Your Essay
By the end of the day today, email me a brief summary of your idea for the Essay project. Include the Web site you're thinking of examining, what "unintended consequence" you'll be describing, and any of the theorists we've read so far that you might use to discuss this consequence.

2. Pierre Levy (253)

Key Terms:

• Anthropological Space
• Earth (space), Territorial Space, Commodity Space, Knowledge Space
• subjectivity vs. indentity
• Collective Intelligence

3. Manuel Castells (154)

Key Terms

• informational economy

4. Sample Passage of an "Unintended Consequences" Essay

For Today You Were to
1. Print out, read, and bring to class the following sections from Lawrence Lessig's book Free Culture (available online)

• Introduction,
• Introduction to section on "Piracy"
• Chapter One

2. Complete the "Sample Passage" exercise (see the in-class handout).

Questions?

For Thursday
Read an additional essay from the Trend book which we have not read already. From this essay, choose a critical term (a "keyword") that the essay either defines or uses and which you think might provide a means of describing an "unintended consequence of Web design." Write down and bring in:

• that term,
• a quotation from the essay that suggests who the critical term is used in the essay's argument (though you are not required to summarize that argument)
• the page number where the quotation appears, and
• the definition of that term from the essay (with page number), or an appropriate definition that you've written or found from a reliable source that you identify.

Be prepared for me to ask you to share this term and definition in class. See my example quotation and defining the term "culture" at the Webx discussion "keywords," which I will ask you to post to on Thursday in class.

Essay Due Tuesday 4/14
in one week at the beginning of class

1. Manuel Castells (154)

Key Terms

• information economy

2. Sample Passage of an "Unintended Consequences" Essay

3. Lawrence Lessig

Key Terms

1. public domain,
2. free culture vs. permission culture,
3. property vs. piracy,
4. intellectual property,
5. "if value, then right" theory

Resources

• Free Culture (ideas site)
• "Facebook Owns Us All" (Daily Beast/New York Magazine)

For Today You Were to
Read an additional essay from the Trend book which we have not read already. From this essay, choose a critical term (a "keyword") that the essay either defines or uses and which you think might provide a means of describing an "unintended consequence of Web design." Write down and bring in:

• that term,
• a quotation from the essay that suggests who the critical term is used in the essay's argument (though you are not required to summarize that argument)
• the page number where the quotation appears, and
• the definition of that term from the essay (with page number), or an appropriate definition that you've written or found from a reliable source that you identify.

Be prepared for me to ask you to share this term and definition in class. See my example quotation and defining the term "culture" at the Webx discussion "keywords," which I will ask you to post to on Thursday in class.

Questions?

An Index of Keywords
You can find a listing of all the keyterms highlighted in each day's discussions in the "Terms/Ideas" column of the schedule.

For Tuesday
Be prepared to turn in your Analytical Essay at the beginning of class.

Reading Digital Culture, Reading Web Design
A few comments on what it means "to read" a Web page/site, with the Walt Whitman Archive as an example.

Additional Essays from Trend: Defining a Key, Critical Term
First we'll revise our definition by being sure it includes a "class" and "differentiating terms" in the right order. see the page "Writing Transformative Definitions."

Keywords

1. Copy and paste your key term, quotation, definition (with any commentary) and other related material into the Webx discussion "keywords." Please follow the format I suggested above and followed in my example.

2. I will ask you to pair up with a neighbor, compare your two terms/essays, and decide on one to propose as an additional reading for the class. Come up with some reasons for your choice (having to do with its value as a source for writing the essay).

3. Then, as a class, we will consider the proposed readings/terms to vote on as potentially the most valuable to use in the "unintended consequences" essay.

For Today You Were to
Be prepared to turn in your Analytical Essay at the beginning of class.

Questions?

For Thursday
1. Read the handout "3 Out of 4 Visitors..." Be prepared to discuss several key lines, points, or examples from the article which will be useful to remember for the Client Project—that is, for creating an effective Web site for a club, business, group, movement, individual initiative, etc.

2. Complete the self-paced tutorial "Designing with CSS - Part 1: Understanding CSS Design Concepts (for DW 8)" (all five pages) by Adrian Senior. Save your work in a folder on your USB drive "www/5230/exercises/senior/CssFiles" and bring it on Thursday. If you find problems/solutions, questons/answers, errors/workarounds with this tutorial, please post a message to the Webx discussion "senior css tutorial."

If you are working in a lab with Dreamweaver CS3, use the CS3 version of the tutorial.

Introducing the Client Project
A BETA version of this project will be due by noon on Wednesday, April 29 for a full-class workshop beginning on Thursday, April 30. The final version will be due by May 11 at 4 p.m. (the Final Exam).

Cascading Style Sheets 1

See the in-class handout.

Post your exercise to your "exercises" folder and send the URL to the Webx discussion "css1"

For Today You Were to
1. Read the handout "3 Out of 4 Visitors..." Be prepared to discuss several key lines, points, or examples from the article which will be useful to remember for the Client Project—that is, for creating an effective Web site for a club, business, group, movement, individual initiative, etc.

2. Complete the self-paced tutorial "Designing with CSS - Part 1: Understanding CSS Design Concepts (for DW 8)" (all five pages) by Adrian Senior. Save your work in a folder on your USB drive "www/5230/exercises/senior/CssFiles" and bring it on Thursday. If you find problems/solutions, questons/answers, errors/workarounds with this tutorial, please post a message to the Webx discussion "senior css tutorial."

If you are working in a lab with Dreamweaver CS3, use the CS3 version of the tutorial.

Questions?

For Tuesday
1. Complete the tutorials "Designing with CSS - Part 2" and "Designing with CSS - Part 3." Save your work on your USB drive and bring to class Tuesday.

2. Write and bring in on disk a paragraph describing your choice for a Client Project. How will the Web site benefit the Client? How your site will work with your Client's other "channels" of operation: that is, face-to-face, physical locations, current print advertising, posters, etc.

Museum Web Sites (NYT Article)
To begin our discussion, please post a message to the Webx discussion "museum web sites" with the following information:

1. a line, example, idea, principle, or technique from the article which you thought would be useful in creating an effective Client Project.
2. a page number for that passage (including the nearest tenth): for example, 2.3 would mean a third of the way down the second page.
3. an explanation of why you thought this principle/technique/example valuable
4. an additional example of that principle/idea from a different Web site of your own choosing
5. If possible, the URL of that other example.

Client Checklist
I will give you a copy of the checklist for this project.

Trouble-Shooting Designing with CSS - Part 1 (Senior)
We'll add content to the external.html pages we created in Part One of this exercise to see the .css page at work.

Firefox's Web Developer Add-On
We'll install this add-on into Firefox and look at the styles on any page we visit: including the UMD home page.

1. Choose Tools > Add-ons
2. Click the "Get Add-ons Tab
3. In the search box, type "web developer"
4. Click the "Add to Firefox" button

For Today You Were to
1. Complete the tutorials "Designing with CSS - Part 2" and "Designing with CSS - Part 3." Save your work on your USB drive and bring to class Tuesday.

2. Write and bring in on disk a paragraph describing your choice for a Client Project. How will the Web site benefit the Client? How your site will work with your Client's other "channels" of operation: that is, face-to-face, physical locations, current print advertising, posters, etc.

Please send me your paragraph at the beginning of class:

Questions?

For Thursday
1. Complete Senior's "Designing with CSS" Part 4 and Part 5 (for DW8) (For CS3 see these versions of Part 4 and Part 5)

2. Discuss materials needed with your client. Collect and write content.

Trouble-Shooting "Designing with CSS - Part 2 and 3" (Senior)

Some CSS inspiration

• Zen Garden
• Bluerobot.com

We will return to css on Thursday by putting all these skills together in the design of our own page....

Forms
See the in-class handout.

Post your exercise to your "exercises" folder and send the URL to the Webx discussion "forms URLs" (from the Discussion link on this page's menu).

Child Windows
See the sample pages and the handout.

Post your exercise in www/5230/exercises/child and send the URL to the Webx discussion "child windows."

For Today You Were to
1. Complete Senior's "Designing with CSS" Part 4 and Part 5 (for DW8) (For CS3 see these versions of Part 4 and Part 5)

2. Discuss materials needed with your client. Collect and write content.

Questions?

New Due Date for the Client Project BETA
Since we will need only one day to workshop the Client Projects, I have been able to move the dute date to Monday, May 4th at noon.

For Tuesday
Come in prepared to work on your Client Project in class.

Trouble-Shooting "Designing with CSS - Part 4 and 5" (Senior)
Post your final result for the whole tutorial to your exercises folder (specific folder name up to you) and send the URL to the Webx discussion "senior css URLs"

Some CSS inspiration

• Zen Garden
• Bluerobot.com

CSS 2: Layout
Today we'll transform a page from table-based layout to CSS layout. Download the following pages into a folder www/5230/exercises/css2.

• index.html
• model.html

Check to make sure that the downloads include the accompanying .css files. If not, they are first.css and twoColElsLtHdr.css.

For index.html, you will need to view and download the background image separately (Firefox misses background images sometimes when it downloads).

When you've completed this exercise, post the css2 folder to your exercises folder on the Web and send the URL of the index.html page to the Webx discussion "css 2 layout."

I will give you a copy of the inclass handout.

Child Windows
See the sample pages and the handout.

Post your exercise in www/5230/exercises/child and send the URL to the Webx discussion "child windows."

For Today You Were to
Come in prepared to work on your Client Project in class.

Questions?

New Due Date for the Client Project BETA
Since we will need only one day to workshop the Client Projects, I have been able to move the dute date to Monday, May 4th at noon.

For Thursday
Come in prepared to work on your Client Project in class.

The BETA version of the Client Project is due by Monday, May 4 at noon, with the URL sent in a message to the Webx dicussion "Client URLs."

Discuss Criteria

See handout of criteria I gave you previously.

Resources

• Tabasco's Avery Island page (visual hierarchy) and Tabasco's main page vs. (action-oriented design, pathos vs. Frog's Leap Winery).
• Smileycat's comparative analysis of US presidentail candidate Web sites (ethos, action-oriented design)
• Headroom's "Traveling with Headphones" (richness)
• Grandma's Restaurant's History (backstory: ethos)
• Campbell Mithun (Navigation)
• Examples of businesses using Facebook from Dave Chaffey's Blog (community). See other free services for building online communities on the assignment page.

Child Windows
See the sample pages and the handout.

Post your exercise in www/5230/exercises/child and send the URL to the Webx discussion "child windows."

For Today You Were to
Come in prepared to work on your Client Project in class.

The BETA version of the Client Project is due by Monday, May 4 at noon, with the URL sent in a message to the Webx dicussion "Client URLs."

Client BETA due by noon Monday, May 4
By noon on Monday, May 4, upload your Client Project to the Web, check in in a browser, and then copy the URL of the main page into a message to the Webx discussion, "Client URLs."

For Tuesday
We will begin an in-class workshop of the Client Projects, taking them one at a time to discuss. I will expect each of you to have constructive and insightful things to say.

Preparing for Workshop: Before class, please do the following:

1. Review the workshopping page and the handout of Client Project criteria for ideas about what you might discuss in your comments.
2. Visit all the projects linked from the Webx discussion "Client URLs."
3. Type written comments and suggestions for each project in a word-processing document saved on your disk.
4. Also, Printout the comments to bring to class for your use during the workshop.
5. Before the class meeting, copy and paste all the written comments you've made for everyone today into the form "Workshop Comments for Today" and click "Send."

Be sure to label each set of comments with the project number and name of the project's author.

By the midnight on workshop day,

Use the e-mail function in Webx to send each author your comments on his or her project.

Questions?

Studio Day

Though we are working individually today, this is still a class meeting and so you should plan to stay and work productively until 10:45.

For Today You Were to
Prepare for the in-class workshop of the Client Projects. We'll be taking them one at a time to discuss. I will expect each of you to have constructive and insightful things to say.

Preparing for Workshop: Before class, please do the following:

1. Review the workshopping page and the handout of Client Project criteria for ideas about what you might discuss in your comments.
2. Visit all the projects linked from the Webx discussion "Client URLs."
3. Type written comments and suggestions for each project in a word-processing document saved on your disk.
4. Also, Printout the comments to bring to class for your use during the workshop.
5. Before the class meeting, copy and paste all the written comments you've made for everyone today into the form "Workshop Comments for Today" and click "Send."

Be sure to label each set of comments with the project number and name of the project's author.

By the midnight on workshop day,

Use the e-mail function in Webx to send each author your comments on his or her project.

For Thursday
Bring in your Trend and Williams/Tollett books, as well as the printouts of the articles about "usability" from Jakob Nielsen, Shirley Kaiser, and Dirk Knemeyer.

Questions?

Coming Up
We will have our Final Exam on Tuesday, May 11 at 4 p.m. in this room. By that time, you should have completed all changes to your Client Project (at the same URL). I will ask you to send me an email detailing the changes you've made, as well as bringing to the final exam a one-to-two-page commentary, explaining who your client is, and how working with your client resulted in the decisions you've made in the detail and construction of your project.

Workshop
See the links from the Webx discussion "Client URLs."

Resources

• Blue Robot's Left Menu model
• Tutorial: How to Make a Make in Illustrator
• Tutorial: Aerial City Perspective in Photoshop