Th 29

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 Web Book Third Edition (Berkeley: Peachpit Press 2006).

.

It is available at Amherst Books.

3) Look at online portfolios from ENGL 391C, Spring '07 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).

Thur 5

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

Tue 10

prep:

1) Read part 2 in Williams

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.

Thur 12

prep:

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

2)Read Chapter 6 in Williams--Basic Design Principles. 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.

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.

Tue 17

prep:

Read chapter 7, 8, 9 in course text.

Bring in soft copy of resume to class so we can create an html document using some of Williams' concepts.

Thur 19

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.

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

Tue 24

prep:

1) Begin "Using Tables for Page Layout" tutorial--this should be completed by Thursday before class.

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

class: We will through tutorial together, and discuss types of menus and placement of menus.

Thur 26

class:
Go over Table assignment and talk about file architecture.

Begin css tutorial--to be completed by following Thursday, March 5.

March

Tue 3

prep: Completion of excercises 1-3 in CSS tutorial.

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 consolidate previous work, disucss file types and why to use certain ones and troubleshoot problems.

Thur 5

prep: Completion of Css Tutorial

class: review working terms from tutorial

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

Tue 10

prep: Work on Photoshop Tutorial,

read Williams Chapters 10 and 11.

class: Talk about layers, images and file types in Photoshop.

 

 

Thur 12

prep: reading (TBA)

NOTE: At this point, you should have completed an 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.

Also, you should be beginning your site for an imaginary corporation or nonprofit.

class: We will talk aboutPowerPoint and presentation styles, determine presentation order.

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 12. 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.

Sign up for presentations.

 

spring break

Tue 24

class: presentations, cont'd.

Thur 26

class: presentations, cont'd.

Tue 31: Class presentations continued

April  

Th 2

prep: none.

class:

T 7

prep: Send link to evolving website to be placed on 391 homepage

class: Lab day

Th 10

prep: none.

class: Intro to Flash--drawing tools, different frames, shape and motion tweening

T 14

prep: Complete Flash tutorials over weekend on multiple shape tweening and text aninmation. Send swf files to me before class.

class:Flash tutorial on working with bitmaps

Th 16

prep:

Check out examples of Flash animations at the EchoEcho.Com Flash Tutorial. 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: Lab day

T 21

prep: no class


class:

Lab work

Th 23

prep: Turn in rhetorical analysis of two websites.

class: Create a multilayered animation in Flash using alpha transparency and a smattering of action script.

T 28

prep: work on mock site over weekend



class: Lab work

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.

May

T 5

class: presentations.

Th 7

class: presentations, cont'd.

T 12

class: presentations, cont'd.;

course evaluations.

discuss options for website hosting.

Exam week: Th May 14-Th May 21.

I will begin final grading of online portfolios on May 20.

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.