Communication 326: Web Production

Spring 2012 syllabus (pdf) & student pages

Section 02 M-W 5-6:15 p.m.; Section 01 T-Th 5-6:15 p.m.; Porterfield 173

My pages for this course are listed in the red and white menu on the left, in roughly the order we'll follow. (Some of the "inside pages" may not have the full menu.) The "Site Review Asmt" is due at mid-term and the "Final Project Asmt" is due during final exam week. Other exercises will be due on a week-to-week basis.

Have questions? Ask, and I'll try to answer them in this COMS 326 FAQ File if they aren't already answered in the menu of pages on the left.

Weekly notes will be posted below, with updated deadlines, etc. Any new assignments or explanatory pages also will be added to the menu on the left.

April 17 - May 1

Final projects lab in all class sessions from here to the end, plus a Wednesday April 18 guest speaker on Content Management Systems (e.g. Day CQ5) and Web careers. Thursday students are welcome on Wednesday; Dr. Bob will provide a recap on Thursday. The last week will also include informal presentations of your projects.
What about Web design? This class has been all about codes and tools and production, but not much about visual design. For a fresh page connecting visual design, product design and Web design, see this: Start Ups: This Is How Design Works. This summer maybe I'll find time to inspect all the interesting CSS and HTML tricks going on behind the scenes of that page. Also, if you want more summer visual-design reading, try the design pages of the Web Style Guide.
Have questions about using WordPress.com for your final project's adjunct site? See my hosting page for many links and the WordPress tips on my own blog, but don't miss the official http://learn.wordpress.com site.
Have questions? I'm using my COMS 326 FAQ File so much that I added an index.
Final "exam" sessions are Monday and Tuesday, April 30 and May 1, from 5:30 to 7:30. You may attend either or both days to wrap up your final project and coursework checklist. Seating priority goes to students actually enrolled in the Monday or Tuesday section of the course, but there's usually room, since a few students finish early and head for the beach. On the other hand, if you are ill or have another reason for not being done by 7:30 p.m. May 1, tell Dr. Bob as far in advance as possible.
Wish you had a full review of many of this course's topics in one class period? Try these five videos from Adam Dachis and Adam Pash at Lifehacker.com, and their text notes as a 27-page PDF file. All five are especially recommended if you've missed any classes. Total video time is about 75 minutes, 10 to 20 per clip. Active viewing (and learning) should take longer.
Looking for more advanced CSS tricks? Try these three advanced CSS3 techniques from SixRevisions.com, including doing animation with CSS and using "media queries" to make mobile-friendly versions of your pages.
Beyond this course: Curious about HTML5? The HTML5 specs are still in development and you can watch the process here, at w3.org or try an online book, Dive Into HTML5 to supplement your Felke-Morris textbook, which has enough in it to keep you coding all summer and into the fall!

April 10-14

Welcome back from Communication Week, Passover and Easter!
Discuss your Dreamweaver demo pages
One more Dreamweaver demo: A Spry widget to "tab" pages
Discuss your Final Projects
In-class one-page assignment: Multimedia & Visuals
Coursework checklist

March 29-April 9

Check your links on the class-list page to make sure that your home page, reviews project, tools page and Dreamweaver "stuff I learned from the book" page-in-progress are all showing up. The Dreamweaver page should be named "dw.html" and stored in your coms326 folder. Also make sure you have a paragraph on your home page (or a link to a separate page) saying what you are planning for a final project.
By popular demand, the week of April 2-6 -- Communication Week at Radford -- will have NO regular COMS326 class meetings. This Web design class is part of the School of Communication, so I want to encourage you to attend all the Comm Week events you can. I'm making that "encouragement" an assignment, but one you can meet easily by adding a short note, link or image to your home page.
Meanwhile, apply the usual amount of weekly class time to work on your final project planning... and add to your Classroom in a Book discussion.
You can work from home or any lab at any time. Note that I've also canceled my 11 a.m. and 2 p.m. Tuesday-Thursday news writing class, which makes our usual PF173 lab available during those hours
Suggestion: Join Twitter and follow @bobstep, @caroletarrant and other relevant accounts. Watch for and use the #rucw hashtag to mark "tweets" about the week's events.

Registration week bonus

Looking for courses to add to your skills in Web production and design? Check out the Information Technology page for Web development, and related courses in Art (graphic design, typography, production), English (technical writing and editing) and Marketing (Internet marketing, social media marketing) as well as COMS courses in advertising and media production. To get some idea what skills employers are looking for, browse through some of these ads.

Mar. 19-22

This week: Start thinking about final projects.
Review the "Define a site in Dreamweaver" part of chapter 4 of Dreamweaver Classroom in a Book, demo the "tag selector display" and the Property Inspector CSS view.
By Friday: Post a first draft of your Dreamweaver CIB report. Call it "dw.html" in your "coms326" folder.
Next week: Use Dreamweaver to clean up menus and links, and post a final-project proposal paragraph on your home page.

Mar. 11-17

Welcome back from Spring Break! Happy Daylight Savings Time! Happy Sunshine Week and Happy St. Patrick's Day! For the "Wearin' of the Green," we'll be getting deeper into Dreamweaver and creating a webpage book report. (Also see the Week Seven notes below.)
Also, here's an early alert about a special event at the end of the month for journalism and online journalism fans. Check with Tartan and Whim editors to see if anyone is planning a trip to Elon University for the SPJ Regional Conference March 30. Web guru-poet Paul Jones and at least on Pulitzer Prize winner will be there.
Reminder about FAQ file: Some of your midterm review projects could use circles or arrows to indicate what part of a screen-capture image you are commenting on. Photoshop CS-5 makes it fairly easy to do.

Week Seven and Spring Break:

Reminder about backing up your work -- use a flash drive, USB drive or lab Mac folder with "Compress" to avoid confusion.
Reminder about FAQ file: Up there at the top of the page, before "Weekly notes..." It's where I type answers to questions that I get from one person, but suspect they might be useful to others. Sometimes, but not always, I also work them into the next class or an instruction page.
Troubleshooting: See the menu on the left for the item "Fixing broken links." It also applies to "missing" images on your pages.
On into Spring Break: Visit the Dreameaver Intro here or in the left margin menu. The top part of that page should be just a refresher for anyone who has survived COMS 226; your real interest should start farther down on the page, at the heading "Next Steps with Dreamweaver," including these two links:
- A 20-page article on using Dreamweaver's built-in layouts by Stephanie (Sullivan) Rewis (Read it!)
- Dreamweaver CS-Five Classroom in a Book (Available with RU-login as an e-book. Start with chapters 2 & 3, HTML/CSS. Also see the "Extras" tab of the library version for downloadable files that come on a CD with the hard-copy version of the book.)
During the break read the Rewis article and start to familiarize yourself with the book. Visual learners also may want to try the video tutorials linked to my Using Dreamweaver at Radford page.
When you get back -- along withdeclaring your midterm project "done," you will be building part of the website described in "Classroom in a Book, both in and out of class to learn the "Dreamweaver way" of doing things. If we get a spring-break blizzard and you are trapped at the library, it wouldn't hurt to get an early start!

Week Six:

Review of anchor-tag style coding; two simple examples as downloadable text files.
Explore exporting your midterm-project styles to an External style sheet, so that you can modify the look of ALL pages at once.
Review screen capturing for your projects: Use images that illustrate points in your review. Use images as links -- from index page to review pages, from review pages to the sites you are reviewing.
Site structure for your projects: Put everything in a folder named "reviews."
Think about visual design, with help from smart folks at Yale. (Web Style Guide)

Fourth & Fifth weeks: (Catching up, moving on)

Choose midterm project ideas. On the first day of the fifth week (Feb. 13 or 14), add one paragraph to your home page describing your preliminary idea for a midterm project. Make a folder named "reviews" in your coms326 folder and add it to your home page link-menu. (Just link to the folder name for now.)
By Feb. 17 (yes, Friday!) look at sites you might include in your review project and expand your preliminary idea to a one-page description of your midterm topic.
- Name it "proposal.html" or "index.html" and put it in your "reviews" folder. On that page, say what category of sites you will review ("Multimedia News," "Baseball Teams," "Social Networks" etc.), link to possible sites, and describe features and tentative criteria you will use to compare and evaluate them.
- Criteria are up to you, but you must define them. Possibilities: Quantity and quality of site contents, clarity of navigation, usability issues, graphic design, multimedia, interactivity, etc.
- As the project develops, you can add to or modify the criteria list and make it the home page (index.html) for the reviews folder, if you didn't call it that from the beginning. Each review will be a separate page in that folder. (Example: "yankees.html," "redsox.html," "pirates.html" etc.)
Deadlines: Full first draft, Feb. 25; complete site March 2.
Chapter 4 of the textbook will help you think about the visual design for your site, but first you need a topic!
Meanwhile, separate your home page "my life on the Web" information from your Pico and TextEdit examples to make two pages: tools.html and index.html. Use same style or vary it.
That was last week's "step 5," but very few got that far. That's why "catching up" is this week's theme. Assuming you all have done the CSS page centering exercise, we'll walk through menu-making at the beginning of the week. But you need more than one page to have a menu! Next we'll tackle floating (positioning) images with CSS to pretty up your home page.
Catching up: Lost? Been absent? Here's how to catch up:
- If you missed the basic idea of CSS or the page centering exercise, review that page of mine. I've added a reference to textbook pages that explain the same issues. (The text jumps around a bit. Or I do. :-)
- If you didn't get that far or missed classes, make sure you know the basic order of HTML tags, and the ones we've used so far. See my Elephants of HTML page. Try the structure practice widget and the "Review Games" from textbook chapter 1 and chapter 2.
- Re-read those printed chapters. Things we've already done in class are on pages 14-31, 36-39, 44-45, and chapter 3, 54-59. You may like this other source's lessons 1, 2 and 3 for a review of the same basic terminology.
- Once you are caught-up with the basic tags and what they do, see my three "CSS" items in the red menu on the left (centering, floats, menus).
If you got through all 5 steps last week, experiment with more CSS. Using any block-style elements (body, divs, paragraphs, headings, lists), try switchiing background and foreground colors, or different amounts of padding and margins. Try different font families. Learn even more about styles in the textbook's chapter 5, at the w3schools CSS section, and in chapter 7 (styling boxes and text).
Note: We're using "embedded" CSS in the "head" section of a document. Later, you can export your styles to a separate ".css" external style sheet file and link your "index.html" and "tools.html" pages to it. (Textbook pages 110-111; also 116-117, if you want to try the textbook author's demo site.)
If you've put your screen images and a personal image on your pages, positioned them with my "floats" lesson, and are impatient to do more with background or foreground images, see chapter 6.

Third week: Continue!

Make sure you have those first dozen HTML tags down. (W3schools and other tutorials may help.)
Add another text editor or two (TextEdit on the Mac, Notepad on the PC) to your "tools" examples, including screen images.
Put some kind of personal image on your front page -- any photo or logo that seems appropriate, even something as silly as the one on my demo coms326 home page.
Add a DIV tag and some "style" to center the contents of your page.
Split your page into two or three pages, with a menu connecting them.

Second week: Getting your first pages online

See the links in the left column to preview or review the things we are doing in class: Using Macintoshes, Using Unix, Using MyRU Files Tab, learning your first dozen HTML tags and capturing screen images -- all of which I jokingly call the Elephants of HTML. The end result by next week will be both your coms326 home page and a "tools" page showing off your new skills.

First week: 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 book's 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. 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.
Check out the table of contents and some of the text's Webdevbasics.net Online Resources, including chapter guides and apps for smartphones. Use the smartphone apps and online chapter quizzes to preview or review key terms and concepts from each chapter.
Recommended -- By "The Adobe Creative Team": Adobe Dreamweaver CS 5 Classroom in a Book. The library has a full-text online edition, but the print edition is handy to flip through while you work.
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.

Here's more about the books...

The Felke-Morris text is strong as a reference book, and 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. 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.

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

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.

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

As the course progresses, we'll also 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