Communication 326: Web Production Class Fall 2009

(This page is now a Web cobweb: Go to the current version of the course)

The Fall 2009 class...

Student pages & faces:
COMS 326-01
and 326-02

Miss our music video? (Moved to make this page load faster for late-semester rush.)

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

Latest assignment & classwork updates:

Final Project Assignment

... and exam-week e-mail about common problems, further study, etc.

Final lab "exam periods" open to both sections: 8-10 a.m Monday Dec. 14; 5:30-7:30 p.m. Tuesday. Deadline for all: 7:30 p.m. Tuesday Dec. 15. Attendance optional: You may e-mail Bob your final project Web address and evaluation page (step 5) address (or just e-mail the project address and include the evaluation as its online"about" page, if you don't mind making its contents public).

Down to the wire: Here's a copy of the last-minute e-mail and frequent-mistakes memo.
See a demo and notes about Freehostia, one of the services mentioned on the hosting page. If you are unable to post copies of your site on any host but the radford.edu server, explain why in your self-evaluation memo to me, and/or create short "demo" pages on other hosts, linking them to your project page.

Dec. 1-10

The final three classes of the semester will be for sharing and discussion of your projects, and demonstrations of any of the technologies mentioned on this page for those who are interested.
By popular demand: Several of you are trying to round off the corners of rectangles, buttons or menu tabs. If you use Google to search for "css rounded corners" you will find dozens of sites that take a variety of approaches to that general idea.
- The three links in the previous paragraph are from one of the most thorough explorations of rounded corners, Allessandro Fulciniti's Nifty Corners Cube; it uses a javascript file, a CSS file and javascript "calls" specific to your pages.
- Early methods used Photoshop or Fireworks to make a rounded rectangle, cut off its corners, and place them in the corner cells of a table or a group of divs, with background colors matched to the corner graphics.
- Here is another technique without images, but it does not work in some versions of Internet Explorer.
- Last, but not least, here is a "CSS Rounded Box Generator" page that will spare you the work in Photoshop. You set the colors for your rounded-rectangle and for the page background; it generates CSS, HTML and image files for you.
Another by-popular-demand technique: A couple of you are working with very large background graphics, when you might be able to get a similar effect with small background graphics on top of a background color. Here's W3schools on positioning background objects.
There's some Javascript as well as CSS at work in this solution to the multiple columns with full-length color backgrounds problem some of us have run into.
If you followed the Thanksgiving Break assignment, you should have some questions about Web hosting services, and you may want to discuss what else you need to know (or download) to put Web pages online somewhere other than Radford.edu.
- To FTP or not to FTP: Have you only used the "H-drive" and MyRU to put your pages online? If so, don't stop there. As a "Web production" person, you should know how to use File Transfer Protocol tools.
  1. Use FTP through the Dreamweaver site definition method of posting pages.
  2. Use an FTP client, such as FileZilla. (FileZilla is free for Windows or Macintosh, and has online documentation.) There are many other popular FTP clients, including Fetch (Mac), SmartFTP (Windows) and more -- even one named FTP Client. One may have come pre-installed on your computer.
  - With most Web hosting accounts you have to use FTP. If you are having trouble getting "ruacad" or "rucs" to accept an FTP connection from home, let me know and/or call the Help desk. Otherwise, you can at least see Dreamweaver used with non-RU hosts in these how-to videos from Adobe, a Godaddy user, and another university, NKU video.
Return to your project ideas for Tuesday-Thursday discussion.
Make or identify your your final project folder so I can link to it.
Create a WordPress or Drupal site and explore CMS methods, themes and templates.
Web vocabulary & more Web vocabulary
Issues we haven't discussed much:

"Usability" as part of writing and rewriting for the Web.
SEO means Search Engine Optimization: So people can find your pages. See Google's Webmaster/SiteOwner help
Accessibility: How to make sure you aren't blocking some potential users.
Validation: The World Wide Web organization will test your pages for you.

Tools & techniques

My earlier page of Dreamweaver links and tips.
My earler page of visual and video tips (color menus, flowers, fireworks, YouTube, etc.)
HTML & CSS fine-tuning: tables, alignment & positioning, floated things, navigation bars.
Active graphics: Use Dreamweaver to create navigation imagemaps (Adobe tutorial) for navigation; here's a clearly illustrated short imagemap tutorial.
Rollover button effects, see the Dreamweaver or Photoshop docs from Adobe, or this crossover video tutorial on imagemaps and rollovers.
Interactive sites: Techniques the use include forms, Javascript, AJAX, and Dreamweaver's Spry & Behaviors (full chapter)
Flash: Try Mindy McAdams' new 10-minute intro tutorials and Adobe's Flash Getting Started guide.
Wave -- a new kind of social networking tool that can be embedded in pages.

Do you think you'll want more Dreamweaver training or a quick course in Flash between semesters? At $25 a month, Lynda.com Tutorials look like a bargain.

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: Work through this Step-by-step CSS tutorial, which 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)

Images for site reviews: Screen-capturing for any computer

Back to the start of the semester

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. Later, we'll use other online tutorials and the library's e-book resources on design (Williams), usability (Krug) and Dreamweaver (DeBolt).

Return to the orignal home page for the class, including the embedded music video and that memorable Ze Frank video defining "ugly."