Th 31

prep:

1) If you do not have an OIT account, get one and activate it. Please know your user ID and password before you come to class.

2) Purchase course text:

Robin Williams The Non-Designer's Design Book Second Edition (Berkeley: Peachpit Press 2004).

.

It is available at Amherst Books.

3) Look at online portfolios from ENGL 391C, Spring '06 on the class main page, and begin to consider design possibilities for your own.

4) It has been the experience of your peers that a hard copy of instructions is not merely useful, but absolutely critical as a ready reference for use during class. For this reason, please print out the Library of Congress' Categorical Glossary of HTML Tags and the ENGL 391C HTML Tutorial. Bring both printouts to all classes.

5) Read ENGL 391C HTML Tutorial Lesson 1: Making a page in HTML, ENGL 391C HTML Tutorial Lesson 2: Paragraphs, Breaks and Horizontal Rules and ENGL 391C HTML Tutorial Lesson 3: Boldface and Italics.

NOTE: If you prefer an alternate series of lessons, you might try: HTML: An Interactive Tutorial for Beginners. If you would like a non-commercial (i.e. no pop-ups) tutorial, look at: Library of Congress' Hypertext Markup Language Parts 1, 3 and 4.

class:

Introduction to uploading and managing files; basic HTML; we will build and upload a (provisional) home page. We will work with paragraphs, breaks and horizontal rules.

prep:

Download an SFTP from the UMass OIT SFTP Page. onto your home computer. From here on you should be able to manipulate files in your public_html folder from home.

If you do not already have a directory, you will have to create one. See instructions on the OIT page Personal Web Sites.

In a Macintosh environment, go to: Applications > Directory > Terminal.

Type: “ssh username@webadmin.oit.umass.edu” (return)
Type: “mkdir public_html” (return)
Type: “chmod 711 ~” (return)
Type: “chmod 755 public_html” (return)

You should now have a public folder in your directory.

Read Lesson 4: Tables and Cells, Lesson 5: Links within pages (anchor links), Lesson 6: Links to other pages (absolute links) and Lesson 7: Links to pages within your website (relative links).

class:

We will work with tables and cells. We will learn to split and merge cells. We will also work with three kinds of links.

NOTE: At this point in the calendar, you should have a provisional home page that includes all the features we have practiced. You should be able to manipulate files from home. Finally, you should be able to see your index.html page in a browser at this url:

"http://people.umass.edu/username" where username is your NetID (or OIT Account user name).

Each OIT Account (faculty, staff or student) is allocated 100 MB of file space on the OIT Web hosting server (webadmin.oit.umass.edu).

Th 7

prep:

Work through CSS Beginner Tutorial.

class:

We will learn to create Cascading Style Sheets.

CSS resources:

CSS accessibility and standards links
CSS Zen Garden: the Beauty in CSS Design

T 12

prep:

1) Look at the resume designs in Williams ( pp. 66-67) and skim through the second half of the book (beginning on p. 121) on designing type.

2) Update your resume and either bring it to class (in MS Word) on a floppy disk or flash drive; or email it to yourself as an attachment. In other words, take measures to insure you can access it during class.

class:

First, we will put our resume into tables, make several links within it, and link the whole resume to our (still provisional) home pages. Second, we will redesign the layout with regards to Williams' principles. Finally, we will experiment with color in cell backgrounds and learn why we need to be cautious about layers.

Th 14

prep:

1) Review requirements and sample site map for online portfolio.

2) Read Williams, Chs. 1-3.

3) Begin to consider an overall design that is professional, consistent across pages, and meets the design criteria of

proximity, alignment, repetition and contrast

put forth by Williams. If you are in the PWTC program, consider as well the criteria advocated by Kostelnick, Roberts and Tufte.

4) Bring to class the name and "mission statement" of an imaginary corporation or nonprofit organization for which you intend to build a website.

For additional good design criteria, see Web Page Design for Designers and/or the Yale C/AIM Style Guide. Still other design principles (and a lot of reading) may be found at Graphics and Web Design Based on Edward Tufte's Principles. For ideas, especially of Flash-intensive sites, look at Esao Andrews' site, Rowean Design and The Art History Program at Bard College.

ColorMatch 5K will help you select a matching six-color palette for your website. Define a single color that you like, and matching colors will be calculated. (It works best when viewed in Internet Explorer.) Be aware that some colors may appear differently on different browsers. If you want to be sure the color you want is the color you get, refer to HTML Color Chart: Browser-Safe Colors.

class:

We will discuss website designs and ideas.

NOTE: At this point you should have gained the skills necessary to construct a basic web site. From this point in the calendar onward, we will spend an increasing amount of class time building your online portfolio.

T 19

no class (Monday schedule)

Th 21

prep:

Load Macromedia Dreamweaver MX on your home computer. Look at "Help > Tutorials" on the Dreamweaver main menu.

class:

A proper introduction to Dreamweaver; creating new pages; page properties, the ever-changing properties palette. Saving and inserting images.

T 26

prep:

1) Read Williams, Chs. 4-6.

2) Continue experimenting with "page properties" and especially with tables.

class: We will discuss types of menus and placement of menus. We will add a menu to your home page.

Th 28

prep:

Collect appropriate work from previous courses (for PWTC students this means your grant proposal, your MS Word and FrameMaker manuals, and one or two research papers from a humanities course), and take measures to ensure you can access it during class.

class:

We will review CSS.

We will become acquainted with the "save as HTML" feature of MS Word 6.0. Most of the class period will be devoted to allowing you to save appropriate written work from other classes in HTML files, and to place them in your portfolio.

In the next few weeks you will want to add to your portfolio. You are not required to have any of this work in a particular format, so long as you have it online. But if you would like to convert any of these documents to PDF files, do as follows. Open the file in MS Word. Choose "File" > "Print." A "Print" menu will appear. On the "Print" menu, click on "Save as PDF."

NOTE: At this point in the calendar, your portfolio should contain an intro page, a resume and one sample of written work.

March

T 4

prep: Read Williams Ch 7.

class: We will consolidate previous work and troubleshoot problems.

Th 6

prep: none.

class:

We will review PowerPoint and presentation styles, determine presentation order, and practice presentations.

On the day of your presentation you will submit to me a two-page progress report of your work. The report should include two site maps -- one that represents your portfolio as it is, and one that represents your portfolio as you expect it to be on May 22. The site maps may be hand-drawn.

There is not a lot of humor associated with PowerPoint, so we take it when we can get it. Here's a link to a PowerPoint version of The Gettysburg Address. (Actually, it's a fine example of how PowerPoint can ruin an otherwise good presentation.) Because PowerPoint is famously maligned as a medium, it is noteworthy that musician and artist David Byrne has constructed a number of projects that employ the software artistically. See DavidByrne.com - Envisioning Emotional Epistemological Information.

NOTE: At this point, you should have completed intro page, resume, and three samples of work. In the case of students in the PWTC program, these should include your grant proposal from ENGL 379, and brief sections from your MS Word guide and FrameMaker manual.

T 11

class: presentations.

NOTE: At this point you should be beginning your site for an imaginary corporation or nonprofit.

Th 15

class: presentations, cont'd.

spring break

T 25

class: presentations, cont'd.

Th 27

class: presentations, cont'd.

April  

T 1

prep:

Load Adobe Photoshop.

class:

I will give an overview of Adobe Photoshop with special attention to the tools palette, to canvas backgrounds, the image dropdown menu and feathering.

Th 3

prep: none.

class:

We replace our names on our homepages (written in HTML) with a banner made in Photoshop. We will use the text tool and learn to use dropshadows. We will also learn to use layers.

T 8

prep: none.

class: We will practice photo retouching. We will use the "stamp" tool to doctor an image (remove the mouth from Keanu Reeve's face just like in that movie), and we will learn to use the "variations" selection and "blur" selection to make page backgrounds from images like Da Vinci's Vitruvian Man. Finally, you will download several images for use on your site, and retouch them ways that befit your overall design concept. using (copyright-free!) images from Collection Finder: American Memory from the Library of Congress and/or from the NYPL Digital Gallery, The Traveling Culture Exhibit and/or from HubbleSite - Gallery.

A classic site making extensive use of (early) Photoshop manipulation is All Your Base Are Belong to Us. Here is the first of a series of more recent productions, employing a speaker who uses Photoshop to reconstruct his life in ways both amusing and instructive.

Th 10

prep: none.

class:

1) Refresher in CSS using CSS Beginner Tutorial and CSS sample page.

2) The proper use of filters. A large set of images made from scratch that is a nice demonstration of the possibilities of filters is Extrasolar Visions.

T 15

prep: none

class: We will replace the links in the menu on your homepage (made in HTML) with rollovers.

Th 17

prep:

Prepare an idea of a Flash animation you would like to use. The EchoEcho.Com Flash Tutorial includes an archive of movies you may wish to use as models. Dramatic examples of "Flash Intros" appear as Warner Brother's website for the film "The Perfect Storm," and Sony Pictures' site for The Da Vinci Code. Others are at Rowean Design and The Art History Program at Bard College. Flash offers many possibilities to imagine the arrangement of texts in interesting and dynamic ways, as this design by the course instructor and Animator vs. Animation, which cleverly employs all Flash's possibilities within a narrative.

class:

I will demonstrate Flash.

T 22

prep:

you will experiment with Flash transitions and transformations, with inserting a Flash animation into a Dreamweaver page and uploading a Flash animation to your public_html folder.

class:

you will begin building a Flash animation into your portfolio.

Th 24

prep: you will continue building your Flash animation.

class: you will continue building your Flash animation.

T 29

prep:

you will complete your Flash animation.

class:

Because many of you are at this point seeking employment, we will devote some classtime to discussing interviews. We will troubleshoot problems; we will determine the order of presentations; we will practice presentations.

As before, on the day of your presentation you will submit to me a two-page progress report of your work. The report should include two site maps -- one that represents your portfolio as it is, and one that represents your portfolio as you expect it to be on May 20.

NOTE: at this point your portfolio should be roughly 80% complete. It should include an intro page (now refined by a Flash animation), a resume, and three writing samples, with the only major work remaining in the site for the imaginary corporation or nonprofit.

T 6

class: presentations.

Th 8

class: presentations, cont'd.

T 13

class: presentations, cont'd.; course evaluations.

Exam week: Th May 15-Th May 22.

I will begin final grading of online portfolios on May 20. Please submit a two-page final progress report in my mailbox in Bartlett before 4 PM on that day.

A final word. In the interest of your short and long-term career goals, you may wish to maintain a professional online portfolio indefinitely. Alas, OIT is likely to delete your folder within six months of your graduation. If you do wish to retain an online presence, consider contracting a private site hosting service like Hostway.