Fall 2012 COMS 326: Web Production

Fall 2012 syllabus (pdf) & student pages

Archival copy of fall week-to-week course notes

(Primarily for students finishing incomplete projects.)

Section -10746- COMS 326-02, met at 1p.m.
Section -10748- COMS 326-01, met at 2p.m.

My instructional pages for this course are listed in the red and white menu on the left, in roughly the order we'll follow. A "Site Review Asmt" is due at mid-term. The "Final Project Asmt" is due during final exam week. Shorter exercises will be started in class, with deadlines announced based on that week's lab progress.

Have questions? Try to figure out coding problems on your own or with the help of classmates, but if you're stuck, just ask. I'll try to answer repeat questions in class and in this COMS 326 FAQ File, or by creating an additional demonstration page and posting it in the list on the left.

Course Overview | Books and Authors' Sites

Final week!

What next? Before I forget, here's a short PBS video I hope will inspire you to take some art department design classes along with whatever Web, print or broadcast production or advertising courses you have planned for the coming year or two.

And here's the Explore website where I found that video and other design links worth following. If you haven't tried the simple trick of embedding YouTube-hosted videos on your pages yet, do it with this one -- as a reminder to come back and watch during semester break, and to get inspired! In fact, every home page or portfolio site could use a "My plans for the future..." page, full of links to things that teach and inspire.

Related: Here's a discussion of fonts and typography, which I wish we'd had more time to explore. Also see these comparison tools, CSS typography tools and techniques.

Next-to-last week!

Welcome back! Breathe.
Monday: Review the plans and site organization for your final project. By now you should be pretty sure of the number of pages, basic layout, graphics, photos, text and other contents, but it is the Web, and sites are always evolving.
More tips on menus with Dreamweaver, and on putting video on your pages (including a video about CSS standards that Web Design or production majors should read). Check the source code of that page to see how some of its tricks work -- or don't -- on some browsers.
See the menu on the left (example) and the FAQ page for other CSS and Dreamweaver tips.
Go back and read the Nov. 12-26 Assignment about planning your site. Still useful: the "Presenting Information Architecture" page at the Web Style Guide.
Get the telltale "Dreamweaver template green" out of your page layouts!
Names for your pages: Class notes on naming things and "Search Engine Optimization" (text file)

Nov 12-26 notes

Nov.16 Check your e-mail for a detailed note about the "final (not an exam) exam" schedule.
Less detail: The 1 p.m. class has its exam week "final" lab session from 8-10 a.m. Thursday the 13th; the 2 p.m. class has its session from 2:45 to 4:45 on Tuesday, Dec. 11. Space permitting, you may attend EITHER or BOTH two-hour sessions to finish off your projects.
As mentioned in the mail, Friday's class plans also include discussing these links:
Final Project preparations: You should have a "final" folder holding a first-draft of your project proposal. Add a short two-or-three-word title to the project so that I can add it to the directory page in place of "tba." (Your actual project can have a longer title; I just need something short for the directory.)
Check your links on that student directory page; if they don't work, figure out whether it's your error or mine. Don't forget to reset your Web permissions using MyRU each time you edit the page.
Read the Nov. 12-26 Assignment and plan to substitute a longer lab session on your own in place of the Friday Nov. 16 class. For planning your site -- and learning about the process of planning even larger sites -- see the "Presenting Information Architecture" page at the Web Style Guide.

Oct 26-November notes

Continue with the Using Dreamweaver CIB assignment using Dreamweaver Classroom in a Book textbook from Adobe. See Dr. Bob's FAQ file for recent problems and solutions.
Monday Oct. 29-Wednesday Oct. 31: Make a page in your coms326 folder for your "What I've learned about Dreamweaver" page. Call it "dw.html"; if you prefer to use a folder with an index.html page, call the folder "dw," and let me know so that I can update the student-list page. Your Dreamweaver page, like the "tools.html" page, should include screen-capture images to illustrate whatever points you want to make about the Dreamweaver interface or the features you liked in the "GreenStart" project. (Example1, Example2)
You can update this 'What I've learned about Dreamweaver" page throughout November, adding new skills as you learn them. But you should be done with most of it this week and move on to your final project.
Wednesday Oct. 31: Make a folder for your final project and put an index.html page in it with a paragraph or two proposing ideas for your final project. Note that an older version of the assignment sheet suggested different folder names depending on the kind of project you planned to do. Just calling it "final" is simpler.
Add a links to your home page menu so that visitors can get to both your "Learning about Dreamweaver" page and your final-project proposal page.
Thursday Nov. 1 -- Monday Nov. 5, update, edit and refine your home page menu , your dw.html page, and your "project/index.html" or "efolio/index.html" page.

Oct 12-22 notes

On into Dreamweaver!
Trouble getting the "GreenStart" page to look the way it does in the book? Send me questions, and watch my FAQ File for questions and answers.
Using Dreamweaver CIB is the full assignment sheet. Short version: Work through the Dreamweaver Classroom in a Book textbook from Adobe to uncover Dreamweaver techniques for creating and manipulating page layouts with CSS using the program's toolbars and control panels.
Do not "publish" the book's materials on your site, but use Dreamweaver to create your own page describing the most useful things you have learned from the book.
Save lesson files for the book's "GreenStart" site on a local drive or Flash drive, not in your "public_html" folder. Illustrate your "What I've learned about Dreamweaver" page with screen captures of the work-in-progress, showing the menus and panels your page discusses. Note: The online textbook's file for Lesson 4 is corrupted, so I've stored a copy of its main ingredient here: Download "easygreen.rtf" to the the folder holding other textbook resources.
See my four Dreamweaver-specific pages (also listed in the left column):
Dreamweaver intro, Dreamweaver at RU, links, Using Dreamweaver CIB, Dreamweaver Spry Tabs
Additional Dreamweaver tips will be added to the FAQ page when issues arise in class.
Oct. 12 (Friday) focused mostly on Lesson 3's review of CSS concepts.
Oct. 15-22 (Monday, Wednesday & ?): Dreamweaver "workspace layout," "Site" and "Files" menus for site and file management -- then on into page layout, and CSS. (Lessons 4, 5 and 6.)

Sixth week's notes (entering October!)

This week's classes are mostly lab sessions for you to complete a draft of your Midterm Site Review Assignment, demonstrating what you have learned about HTML and CSS so far. Revisions will be allowed up until Thanksgiving break, but you will also have a final project to complete by exam week, so Oct. 1-6 should be your main effort on the reviews. Try Robin Williams' list of bad features or good features to evaluate either sites you are reviewing or your own site.
Questions that have come up: My images don't show up!; Keeping menus from disappearing; Copyright and images; Adding circles and arrows to highlight part of an image; making part of a page stand still while the rest scrolls.
A topic we haven't discussed, which a few of you may want to use on your project: Tables
What comes next? Now that you've used text editors on Unix, Windows and (maybe) Macintosh, and have seen that Dreamweaver is basically an expanded text editor, we'll start exploring more of Dreamweaver's "power user" features -- especially for CSS layout -- while using its code-view display to keep an eye on the HTML and CSS it writes for us. See my page of more Dreamweaver links.
Basic Dreamweaver help is available at Adobe: http://helpx.adobe.com/dreamweaver.html
The reference manual that used to be a bound book in the Dreamweaver box is now a Dreamweaver Reference PDF. (13MB download) Printed, it would be 682 pages.
When you're happy with your midterm site-review project, move on to the Dreamweaver project. Think of it as another "tools.html" page, this time called "dw.html" -- but instead of just writing a paragraph or two with screen captures, this one should have some meat in it.
The assignment: Work through as much as you can of Dreamweaver Classroom in a Book (Safari online edition for Radford logins), either in print or online, and create a page with Dreamweaver describing the best or most useful parts of the book. That way you can use what you are learning from the book without actually "publishing" the book's own exercises. Detailed assignment sheet (based on last year's edition of the book).

Fifth week's notes (Sept. 24-28):

Review: Enough CSS terminology to talk about "borders."
Monday: Planning "midterm" projects and considering (optional) group topics. Start making review-site choices and establishing your review criteria. (On both of those last two points, see the design chapter of the Web Style Guide -- on document design, visual design, page width, line length, etc., and the same book's separate universal usability chapter. Visit corresponding sections in either of the other textbooks.)
Use Dreamweaver to continue editing your home page (coms326/index.html) and your coms326/tools.html page, and add a "Reviews" item to your main menu, pointing to the folder where your midterm will go (coms326/reviews). See page on folders and site structure.
Make a "reviews" folder (Monday) with a temporary index.html home page (Wednesday) that discusses your ideas for the midterm and links back to the assignment sheet. Add other links as you choose sites to review.
Explore more site menu options, using a list as a menu, having multiple link styles on a page, and making a "list" appear as a horizontal menu.
Note: Editing and testing menus and copying and pasting between pages is easier with Dreamweaver, since you can open multiple pages in tabs.

Fourth week's notes (Sept. 17-21):

Friday: Starting to think about "midterm" projects. Modified deadline: Full draft due Oct. 6 for midterm grading (should have four pages, useable color scheme & layout, working menus, screen captures and links), but repairs and design improvements after that date will be counted in the final course grade.
STYLE things continue: By now you should have two pages (index.html and tools.html), both with images, lists, links and headlines, and you should be adding an internal style sheet in the head of each page to add margins, padding, colors, positioning (with "float") and other features. See the W3Schools CSS tutorial for more ideas.
Next enhancement: Use CSS to turn simple lists into fancier menus, which involves restyling link anchor tags (using CSS to make a link react to mouse actions) as well restyling the UL list.
But what if you have normal lists elsewhere on the same page? That means restyling the link and list attributes only in the DIV that contains your menu. (For example, you may want a list near the top of the page, or in a left column (floated div) to function as a menu, but a list later in the page to be a normal bulleted list.)

Third week's notes (Sept. 10-14):

This is STYLE week: Explore CSS for centering pages, coloring things, changing fonts, and more. See Centering with CSS (also in the menu at the left). W3Schools has excellent demos.

Here's the simple CSS demo page I made in class on Wednesday.

Learn: A style sheet in the head section of your document can define the look of HTML tags or create new tags called "IDs" and "classes." Those style definitions can modify colors, fonts, backgrounds and the position of the boxes that make up your page. For demonstration of what CSS can do, CSSZenGarden.com is amazing.

A style definition marked with a period (.) is called a "class" -- something you can use many times by combining the class name with paragraph, headline or div tags. If you wanted a political page to have red-state and blue-state boxes, you could create classes called "redbox" and "bluebox" or "GOP" and "dems."

A style definition marked with a "#" is an "id" -- something you plan to use only once on a page -- such as a "wrapper" for the whole page or a major division within the page (header, footer, maincontent etc.); the names are up to you. Keep them short and clear.

An "id" tag has another benefit: You can create a hypertext link to it. My office address is in the bottom div of this page, which has an "id" name of "footer." That means I can use its # symbol and id name in an anchor tag to link to it, if I want to say Visit my office. Clicking it makes the page scroll to the bottom. The code for that link looks like this: <a href="#footer">Visit my office</a>

I also made a class called "alert" that turns text italic, bold and green. You can use a class with any block-style HTML tag (h1, h2, div, p) or with any span of words on a page. can you guess what the HTML tags to mark a span of words are?

Good guess: <span class="alert">This will be bold, italic and green</span>

Second week's notes (Sept. 5):

Special notice: Looking far ahead to your final project ("Make a website for an organization or group or..."), here's an idea. The Thursday Sept. 6 Volunteer and Service Fair might be a great place to find a "client" who needs help building a website. (Just make it clear to them that the site will demonstrate skills you are just learning, and that the project won't be completed until December.)

On Monday almost everyone was able to login on the Unix system to look at your public_html folder (directory) from a command-line or "shell" prompt.
Wednesday's in-class topic will be making a Web page with the Pico text editor on that Unix system, and taking a screen-capture of that work-in-progess.
On Friday we'll make sure you got that far, then open Photoshop to resize, crop and optimize the screen snipping with "save for Web" in Photoshop, and add the captured image to the page.
We'll also combine your Notepad demo page with your Unix/Pico demo page as a combined "tools.html" page, leaving the rest of your "home page" as information about your Web work and Web interests.
While doing that, we'll use w3schools.com to preview and practice more of the "first dozen" HTML tags -- including the link-anchor tag and additions to the "img" tag.
The screen captures of the text editors and a few paragraphs of comments will go on the "tools.html" page and the "about me and this course" information on the home page, which we'll rename "index.html" -- and we'll put in links to go back and forth between the two pages.
If there is time on Friday, you can start to add a little "style" to the pages -- centering page contents, adjusting colors, margins, font-family changes and more.
HOMEWORK: For the next "enhancement" of your home page (and a third opportunity to use Photoshop), decide how to represent yourself graphically. Do you want your picture on the page, or a more symbolic representation -- such as a design, monogram or newspaper-like "nameplate" made in a display-font (a Photoshop document saved as a .gif file)? Make that decision -- and that image -- by Monday as homework. You can always change it later. For instance, this is a nameplate made with the decorative font "Rosewood," which is not one of the reliable Web fonts, so I've made it a simple GIF file:

First week's notes:

That collection of notes is a rather long plain text file, partly to illustrate the difference between an HTML page and plain ".txt" text, including Bob's expanded history of the Internet, the Web, and your progress so far. The Felke-Morris textbook is still a good guide to the history, and its website chapter resources include many useful links.

Course overview

Welcome to my always-evolving website for COMS 326 Web Production, including links to assignment sheets, resource pages, and all of the "public" projects done in class and for homework. Think of this course as a "studio" in which we all learn from each other, help each other solve problems, and grow in our understanding of how the Web works, where it has been, and where it is going.

First, although "online publishing" is what we are about, there are good old-fashioned books assigned.

Because COMS 326 students' Web (and computer) experience and learning styles generally vary, I have ordered a variety of books, and will recommend dozens of tutorial and example sites online as we go along. I encourage you to try different tutorials and write about your experiences with them on your coms326 home page. What, you don't have a "coms326 home page"? You will soon!

Books and authors' pages:

Required -- Terry Felke-Morris: Basics of Web Design, HTML5 and CSS3. This more structurd "textbook" approach helps make sense of ongoing changes in Web coding languages, no matter what computer or software you use. An electronic-rental edition is available (with a free trial period), but I haven't tried it myself. See the table of contents and some of the text's Webdevbasics.net Online Resources, including chapter guides and apps for smartphones. The smartphone apps and online chapter quizzes look like a good way to preview or review key terms and concepts from each chapter.
Personally, I like having a printed "cookbook" open on the desk while I'm mixing things up on the screen. If I always had a bigger screen, like we do in our Mac lab, I might like e-books better. Tip: If you're in a lab with small-screen computers (like Whitt 222), try to sit next to an empty seat so that you can use two computers at once -- one for the e-book, one for your page editing software.
Recommended -- by "The Adobe Creative Team": Adobe Dreamweaver CS 6 Classroom in a Book (if available) or Adobe Dreamweaver CS 5 Classroom in a Book. If you are logged in on a Radford computer, the library gives you access to a full electronic copy for CS5 or CS6, but the print edition is handy to flip through while you work.
Note: RU labs were updating to "CS 6" software in August 2013, and the bookstore and library may or may not have the CS 6 update of this book. Assignments will be adjusted accordingly. Either edition should suffice; just don't go back to the CS 4 version.
Previously recommended -- Elizabeth Castro: HTML, XHTML & CSS
Recommended -- The Web Style Guide by Patrick J. Lynch and Sarah Horton, at webstyleguide.com and also available in a printed edition
Previously recommended -- Robin Williams & John Tollett: The Non-Designer's Web Book (wish there were a new edition); instead, see the library's e-book edition of their Non-Designer's Design Book (login required)

Notice that "CSS" and "CS 5" are two different things that can look alike in some type fonts. "CSS" is an abbreviation for Cascading Style Sheets, one of the coding "languages" of the Web. "CS 5" is short for Adobe Creative Studio (version) Five, a commercial software product.

More about the books...

The Felke-Morris text is strong as a tutorial or reference book. It is structured like a full course on Web Design. Its focus is building pages from scratch without using a site editor like Dreamweaver or a content management system like WordPress. Depending on your final project decisions, you may be doing things all three ways, so her text provides a strong foundation with clear, well-illustrated examples.

The DeBolt/Adobe book about Dreamweaver is a good self-study course, building a sample site with Adobe's Web editing program. We will build enough of the sample site to understand Dreamweaver's basic tools.

Liz Castro's book is a classic that I like as a reference, organized into one-command-at-a-time tutorials. Familiarize yourself with its table of contents, appendices and index, and read the first three chapters to get an idea whether this book is "too advanced" or "too basic" for you.

Lynch & Horton's book is a great reference, well illustrated by the producers of major Web projects at Yale University. Their text is great for thinking about planning and organizing large team projects, or understanding issues like "universal usability" in design, planning site navigation, or learning about visual design, typography, graphics and writing style for the Web.

Williams & Tollett is not required, because the technical aspects of the book are a few years out of date. The basic visual design advice is still excellent, and I recommend it or Robin Williams other "non-designer" books if you want more about visual design. Fight the temptation to abbreviate this design-concept keyword list using first letters: contrast, repetition, alignment, proximity.

Along with the textbooks, we'll use a variety of online tutorials and reference pages, starting with Free tutorials at HTML.net, plus the Basic HTML pages at w3schools.com, and later the same site's CSS tutorial. Other favorites:

Ian Lloyd's HTML-CSS Beginner's Guide, from Sitepoint, another publisher of excellent how-to books.
WebStyleGuide.com, the online edition of Patrick J. Lynch and Sarah Horton's meticulous guide to large-site design, originally developed by builders of stunning (and very smart) science-oriented sites at Yale University.
CSS Tips and Tricks from W3.org, the keepers of Web standards.

But the Web never stops changing, so part of this course will be about discovering new techniques, new tools and new ways to use your skills.

Because students usually know their way around Windows computers, but the class usually meets in a Macintosh lab, I've written some Mac Tips for newcomers and a page about setting up TextEdit on the Mac to edit plain text files. Apple has plenty of information online about Macintosh vs. Windows too. When the class meets in a Windows lab, I'll have tips about that, too.

I've also prepared an introduction to Unix approaches to computing.

We'll start out using simple text editors to learn your first dozen HTML tags "the old-fashioned way," along with reviewing some digital imaging techniques from COMS 226.

The first five or six weeks of learning Web-building tools will be reflected in a "website reviews" midterm project. The project will be a multi-page Web essay reviewing a group of sites focused on particular tools or techniques.

Approaching Hypertext

The Web itself is one of the best-documented topics on the Internet. Try a Google or Bing search for "HTML Tutorial" or "CSS Tutorial" to see what I mean. OK, not much compared to Lady Gaga's 429 million hits, which may have increased since the last time I looked, but still plenty of free help for Web builders.

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.

Depending on the semester, we get to use either big-screen iMacs or smaller-screen Windows PCs in the lab-classroom, but you should get familiar with as many kinds of computers as possible -- and a variety of software -- during the semester.

What is this class about? Making Web pages... and generally avoiding UGLY -- as discussed here a few years ago by Web celeb Ze Frank...

Creatively ugly or not, keep your work away from WebPagesThatSuck.com, a site that uses bad examples to preach clear, functional and attractive Web design. Thanks to Ze Frank and Vincent Flanders for sharing great advice in an entertaining way through their writing and webcasts.

As the course progresses, we'll address design questions that juggle concepts like "ugly," "creative," "usable" and "accessible." Terre Felke-Morris has a very nice "best practices checklist" in Chapter 4 of her book and online.

If the lessons seem too easy or move too fast, check my collection of hundreds of bookmarks at delicious.com. You can start at http://delicious.com/bstepno, or any of the categories shown in the menu at the left. You can 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