Communication 326: Web Production

Syllabus (pdf or html) & calendar

The class...

Student pages & faces:
COMS 326-01
and 326-02
(See bigger video?)

An intro to Web design ideas & tools, including HTML, CSS, Dreamweaver & more.

Latest assignment & classwork updates:

Nov. 17-19

Check out each other's project ideas and offer helpful comments
Hosting services
Content management systems, including WordPress and Drupal for free

Nov. 10-12

On Tuesday: More about colors, images and video for your Web pages.

Using Dreamweaver for site management. (As of Nov. 12, your "ruacad.radford.edu" logins should work with sftp and ssh.)

By Thursday: Write a proposal-page for your final project.

The proposal should identify the "client," purpose, audience, etc. The project can be a site for a business, organization, or promotional campaign -- or a personal portfolio to interest future employers. Describe the contents you will need: Information to gather, pictures to take, graphics to design, audio or video to capture or embed. State the main goals of the site, especially the "user's needs" it will satisfy.

Nov. 3-5

Thursday: What is this odd image good for? The answer is in the first article on this Link Farm page, along with lots more to read about Dreamweaver layouts, "faux" columns, writing for the Web as "usable" design, and more.
Defining a site for your audience: Decide what kind of site to develop as your final project, whom it will be for, and what it will look like.
While you're thinking about topics, also start reading about design issues. We don't have an e-book edition of The Non-Designer's Web Book, but we do have other books in Robin Williams' "Non-Designer" series; the Non-Designer's Design Book is written from a "print" point of view, but does talk about applying her four basic design principles to the Web. (They have a memorable acronym, which she doesn't spell out. They are proximity, alignment, repetition and contrast.)
More on the subject of design: I recommend another e-book, Don't Make Me Think, by Steve Krug. I've put the hard-copy version on reserve at the library, along with two Jakob Nielsen books about "usability" and design.
Using color, contrast and dimension in news (or Web) design, a free eight-part tutorial from the Poynter institute, and a color-scheme "generator" that not only shows color swatches, it lets you preview the colors on a sample page.

Oct. 27-29

Defining a site with Dreamweaver ("defining" as in "letting Dreamweaver know where the files are located")
From the library Web site, browse the e-book Adobe Dreamweaver CS4 Classroom in a Book. To review what we are doing in class this week, see the "Defining a Dreamweaver Site" tutorial in chapter 1. (Use a copy of your Reviews site instead of the CD that comes with print editions of the book.)
From last week and Tuesday: Review how the "Properties" panel in DW allows you to control both HTML and CSS, through chapter 2.
If things are going too slow for you, see the library's other e-book titles, especially Adobe Dreamweaver CS4 How-Tos: 100 Essential Techniques, which is about the version of the software in our lab. The books for version CS3 aren't much different, and even older titles may offer some inspiration. (The library has hard-copy versions of even older Dreamweaver books, but watch for major differences -- especially concerning CSS.)
Escape Dreamweaver's templates: See designing with Dreamweaver and "apDIV" tags -- CSS absolute placement of DIVisions of your page-- instead of using templates or tables. CSS with drag-and-drop! Amazing!

Weekend additions:

Here are a couple of multimedia-related articles I ran into this weekend:

Ken Kobre writing about MediaStorm
Poynter.org writing about newspaper video projects

Oct. 20-22

Thursday -- Getting started with Dreamweaver.
In-class: The Properties Inspector Panel for HTML and CSS. At home, explore these:

AdobeTV: Learn Dreamweaver (Newer than the tutorials below?)
Dreamweaver Getting Started (jump to Part 1)
Adobe Design Center Video Tutorials
Read about the student discount offer
If you're ready to start using it, install the 30-day free trial version for your home computer.
Also read about and download for Windows or Mac, a free -- if not bug-free -- alternative to Dreamweaver: KompoZer. See its features.

Tuesday -- By popular demand: What are your legal rights and responsibilities concerning "intellectual property" and related issues? When can you use an image you found online? How much of someone's writing can you quote? The EFF Bloggers Legal Guide is a good summary, applicable to personal Web sites of all kinds. Also see this Creative Commons search and info site. For a very special approach to sharing images, see Philip Greenspun's copyright notice and photos (and don't be a weasel).

Oct. 13-15 and through the weekend: Update your review sites. Then, to get started with Dreamweaver, read this SND Update and watch Adobe videos one, two (about planning) and three (about CSS layouts). They take five or six minutes each.

Once I'm done looking at your sites, I'll update the semester calendar.

Oct. 9: Although today is the official deadline for the review projects, I won't start looking at them for grading purposes until Sunday afternoon, so that you can squeeze in some last tweaks.

Sept.28 in-class: If the Sept. 24 exercise was too much code at once, work through this Step-by-step CSS tutorial, which also includes the magic trick of turning a "list" into a "menu" for navigation purposes. If that's all clear, see the "further readings" at the end of the article... or resume taking screen snapshots to go with your reviews (see below), or improving the layout of your home page and review pages.

Sept. 24 in-class and homework (orange page formatted with CSS, lists and fonts)

By popular request:
Screen-capturing for any computer

Textbook authors' book pages:

Elizabeth Castro: HTML, XHTML & CSS
Robin Williams & John Tollett: The Non-Designer's Web Book

Along with the textbooks, we'll use a growing list of online tutorials and reference pages in class, starting with the Basic HTML pages at w3schools.com, then the same site's CSS tutorial, to separate layout from content.

For local Web building information, here's a Radford Web tools screencast, and some Unix tips.

The first five or six weeks of learning Web-building tools will be reflected in a "multimedia website reviews" midterm project. That is, the project will be a multi-page Web essay reviewing the use of multimedia storytelling techniques on Web sites. (The projects themselves do not have to include original multimedia creations.) See the assignment sheet and file structure description.

The semester schedule included in the original syllabus (html version) is a beginning, butwe now have an expanded calendar with reading assignments, visiting speakers, weekly tasks, class notes, and specific tutorial links.

Introduction to the course

The Web itself is perhaps the best-documented topic on the Internet, unless you count Michael Jackson and Britney Spears. (Actually, searching for "HTML tutorial" on Google just got 346,000 hits, to Britney's 75 million, or Michael's 185 million. Oh well.)

As part of this course, we'll be using Google and a variety of directories, blogs, wikis and social networking sites to keep up with the latest Web tools and online services. Speaking of tools, we get to use a lab full of brand new big-screen iMacs and some of the latest -- and oldest -- software tools.

What else is this class about? Making Web pages... and avoiding UGLY.

... or maybe redefining it. (Thanks to Ze Frank and Vincent Flanders for sharing great advice in an entertaining way.)

While we're on the subject, is this page ugly because of that block of white space on the left? Or are the color choices too garish? We'll talk about issues like that, and about the way some Web tools have "trade-offs" that result in glitches like the white space, or features that add flexibility never seen before the Web. Are my Unix info pages better? Do you like being able to make the text window as wide or narrow as you want?

As the course progresses, we'll address questions like that, which fall under the headings "usability" and "accessibility."

If the lessons seem too easy or move too fast, you may find resources more suited to your learning style and pace in the professor's collection of hundreds of bookmarks at delicious.com.

Here's a note about using them... You can start at http://delicious.com/bstepno, or any of the categories shown in the menu at the left.

Fortunately, the designers of delicious.com make it easy to tag and retrieve bookmarks with keywords, such as this course number:
http://delicious.com/bstepno/326.
Notice that the first keyword, "326," is separated from my name with a slash. Any other keywords ("tutorials" and "html") can be added with plus signs, like this:
http://delicious.com/bstepno/326+html+tutorials

That's a beginning. See you in school.