Communication 326: Web Production

student sites | FAQs | books and authors' sites | weekly notes

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

Office hours: M-T-W-Th 3:30-4:30 (see home page)

Note: The Overview section has been moved to the bottom of the page.

You may have to hit "reload" on the lab browser to update this page!

Once the semester begins, weekly notes will be posted here with updated deadlines, etc., stacking up in reverse-chronological order like a blog.

Exam Week

There is no "exam": The lab will be available during both periods below for your final uploading, testing, proofreading, bug-squashing, and filling out the checklist. Each "shaded" area on the checklist form is for you to put the final address of one of your pages. Test your links before you complete the form. The center column is a list of examples of things the pages usually demonstrate. If you finish your project outside of class and/or are flooded out of the exam-week sessions, make your own version of the checklist with working links to those pages (about 15 of them, counting the internal pages of the midterm and final, plus your other exercises) and e-mail it to me, or deliver it to my office.

MW class exam-week meeting 5-7 p.m. Mon. May 6
TT class exam-week meeting 5-7 p.m. Tues. May 7
All project checklists should be complete by 5 p.m. Wednesday, May 8.
Where to go from here:
- After the course is over, you can still be one of the second thousand people to follow me at Twitter.com/bobstep, follow my Web Production related bookmarks at Delicious.com/bstepno/326, or read the blogs and such linked to stepno.com
- Keep your antenna tuned to news about new media tools with sites like smashingmagazine, transom.org and poynter.org
- For instance, Transom, which is primarily about radio broadcasting. just introduced me to a new tool called Meograph, for online multimedia stories.
- Review basic CSS from Steven D. Anderson at JMU (slightly dated, but clear & free) and go further with Steve Sanderson in England (slightly Microsoft-centric, but fascinating)... or the makers of a CSS editor, or the WWW Organization itself, or whatever you stumble on next! Just keep learning!

Week 14 (April 29): Hosting services!

READ the Hosting and CMS information page before class and explore the how-to instructions on the site or service you plan to use!

Week 13 (April 22): Down toward the wire

See all of the links from last week.
Announce your final project topic.
Check the class list page for it.
Add a multimedia/widget page, IF your final project won't include one. See demos on my Visuals and Video pages.
One more source of widgets:
- "Google Drive" can be used as a "Web production" tool to create forms and embed them in your pages. It is much simpler than using Dreamweaver or raw HTML to create forms.
- Example created for a local newspaper: Tartan Interest page
- The form is housed at Google, but the "embed" widget uses an "iframe" to position it within a page that you create on your own site. When people fill out your form, the results are saved in a spreadsheet-style document in your Google Drive account, which you could export to Microsoft Excel or a database program.
- How-to create and embed a form using Google Drive:
  - Create (or log into) a gmail account. If you're new to gmail or Google Drive, read the introductory documents, terms of service, etc.
  - Click on "drive" in the tools menu.
  - Click "create" (Help page: Create a Google form)
  - Choose "Form"
  - Follow the instructions, fill-in the blanks, and read the "Help" pages...
  - When you are done, clicking the "Embed" button will generate an "iframe" code, which you can style further with CSS to add centering, width and height, overflow scrolling, borders, etc. (Technical details about iframes from w3).
  - Google provides this "A tour of Google Forms" video at YouTube:

Week 12 (April 15): Final project momentum

Test and correct links from the class list page to your Dreamweaver demonstration page
Discuss the final project assignment, start proposing ideas and topics.
See the "hosting" part of the assignment and discuss your options: A full hosted site or a supplementary site using templates or a Content Management Systems.
Go over the final checklist, noting the embedded video and external-hosting final project options, and the importance of the final "about this project" page and "exit memo."
More on multimedia: See the links under Week 11. The HTML iframe and embed elements are easy to use with video from hosted archives like YouTube, but (as someone asked in class) what about audio?
- HTML5 offers new options for embedding audio players on Web pages. See W3Schools HTML Audio page and the Mozilla audio page for demonstrations and notes about a variety of approaches, and their potential difficulties. Even browser developers like Apple (Safari) have HTML5 multimedia instruction pages, while a number of companies provide enhanced players using Flash or Javascript. Some players handle jukebox-like playlists, provide "fallback" ot Flash for older browsers, and may even try to prevent unauthorized downloading.
- The Yahoo Web Player uses just a line of javascript: Here's a how to and a subtle demo: Superman via Yahoo player (notice that the pop-up player also includes a PBS Graphic Design video embedded later on this page).
- The Google audio player, using Flash to create a control bar, has been a popular option for several years. However, I'm not sure whether the Google player will continue, given its relationship to the soon-to-be-discontinuted Google Reader service. For now, it works (Note the audio is from an Internet Archive 1940s radio collection.)
- A more recent service, Soundcloud, offers a new sound-widget solution, more like YouTube's video library. You can even record directly from your computer's microphone into Soundcloud's Web interface, then embed a widget that comes complete with social-networking links to share your creation far and wide. Some clips, like this one, are hardly worth sharing.
If you were absent for one or both classes last week, see the links under Week 11 and come see me during office hours (3:30-4:30 or by appointment) if you have questions.

Week 11 (April 8): Class is back in session!

THIS WEEK POST your "dw.html" page saying what you have learned about Dreamweaver from Dreamweaver Classroom in a Book. Alternative: Post a page describing what you have learned from another Dreamweaver or HTML page-design tutorial. (Either call the page "dw.html" in your coms326 folder, regardless of content, or tell me the new name and location for the page.) Test the link to your dw.html page at the student pages list.
COMPARE notes in class and make some changes; make the Dreamweaver layout your own -- for instance, add styles for rounded corners, borders, absolutely positioned divisions, horizontal menus and more.
ALSO THIS WEEK: Start planning your final project. Explore other page features, including visuals, image effects, or embedded video or multimedia.
More Web Tools to explore: WYSIWYG free alternatives to Dreamweaver... some of them descendents of Netscape: Kompozer, SeaMonkey, BlueGriffon, Nvu and Thimble, plus Amaya from W3C. None are as polished as Adobe's products, but all make a good attempt to provide Web editing with HTML and CSS. (Once upon a time -- back in the mid-1990s, Netscape was the top Web browser, and it spun off a Web editor called Netscape Composer. Netscape's tools eventually became the Mozilla library of coding resources.)

Week 10 (April 1): No jokes here...

No formal class because of Communication Week and student meetings... use the lab or other campus labs on your own for three or four hours to complete at least chapter 4 and 5 of Dreamweaver Classroom in a Book and create a page summarizing what you've learned. Browse the rest of the book to see what additional Dreamweaver features you might want to use on your final project.
Need help? I'll be easy to find but hard to see: Here's my appointment schedule for the week. If you see a blank spot, drop in!

Week Nine (Mar.25): Continuing last week's links, plus...

Here's something entirely new, as an inspiration for Web developers to take a Javascript class, and as an excuse to review the concept "markup language" by showing you "OPML"! This is a brand-new "app," just released this week, written in HTML5 and Javascript: littleoutliner.com
(Using a feature of HTML5, the Javascripts that make the app work will store your outline in hidden browser files on whichever computer you are using. For now, documents are not saved "in the cloud" or on a server somewhere. You can cut and paste to other programs, or export the ".opml" format outline file.)
Next Week is Communication Week: Special Events, Dreamweaver Projects, No Class
Visual elements and multimedia sharing: Using video via YouTube, Vimeo etc., with notes on non-video widgets for text, including RSS feeds.
Final project brainstorming.

Week Eight: Back from Break

Present and discuss the midterm projects and design factors: structure, layout, headlines, navigation, color and other visual design principles. How can you make layout, headlines or navigation clearer for this project and your final? What Web Design Best Practices did you observe in your review project?
Dreamweaver tools and techniques. Begin sample site from DW CiB: Define site, Layout selections, Design view, CSS tools. (Dreamweaver-avoiders may propose alternative books and projects.)
Speaking of Dreamweaver: Creative Cloud $20 deal deadline extended. FAQ page.

Week Seven: How did it get to be March already?

For spring break: Decide whether you want to do the Dreamweaver Classroom in a Book assignment (recommended) or a similar "what I learned from..." project based on a different book or online tutorial. (If you plan to do a project other than the Dreamweaver Classroom in a Book, let me know by email.) Either way, it will be due a week after you return, so get started on the reading over the break. When it's done, you'll move on to the final project!
CSS debugging tip: I have read somewhere that technically there should be no space between a "property" and its "value" in your style sheet. That is, to use "h1 {color:red;}" not "h1 {color: red;}"
However, Dreamweaver and most browsers ignore this "error" and I have not been able to track down the original reference. The W3C spec clearly shows the space being used: (CSS declarations), while W3 Schools does not (CSS syntax reminder).
This week 1: Before spring break, have a full first-draft of the review site -- home page and three review pages, with permissions set so that we can all see the site. The site can be refined during or after the break for final grading.
This week 2: Define your coms326 folder or your reviews folder as a "site" using Dreamweaver's Site menu. That will help you make sure pages, images and style sheets are properly linked within your folder. (If you keep images in a separate folder, see the Site:ManageSites menu's "advanced settings" tab to set a "Default images folder.")
This week 3: Update your midterm site-review project to take advantage of the real power of CSS -- using one external style sheet to control all of your pages. Learn the difference between inline, embedded and external style sheets here: Style Sheet Locations

Week Six: Feb. 25-28

Continue with midterm projects
Recent questions
- How do I add a text to an image? Either use a div to include space for a caption under the image or add a mouse-over text to the image tag. To do that add title="Whatever text you want" as part of the image tag.
- How do I style a variety of menus?
- How can I find free images to use without violating someone's copyright?
- Can I make an image translucent?

Week Five: Feb 18-23

Mindy McAdams points out that HTML and CSS can be a gateway drug -- a way to get journalists interested in "coding" as well as understanding the basics of how the Web works. (Thanks to @GlenLFlanagan for that latest Mindy link.) She has been using the new CodeAcademy intro to HTML, and you're welcome to give it a try if my exercises, books and W3Schools aren't to your liking.
Main topic this week: Pick a topic you're passionate about, and start reviewing websites that do it. For example, pick three companies you'd like to work for, three products you can't live without, three people you admire... and write about how well they do or don't tell theier story on the Web. That's the short version of the midterm assignment long description.
In fact, if you want to really focus on the basics of Web building -- or Web education -- you could make your midterm a comparison of some features of CodeAcademy, W3Schools and another online begin-HTML tutorial. Four educations in one!
End-of-week topics:
- Use Dreamweaver as a code editor. (Set preferences, review names of menus and panels.
- Write a first-draft midterm proposal page with menu links back to your home page and tools page.

Week Four: Feb.11-16

Complete first drafts of your linked Home Page and Tools Page, including some use of images, menus and centering with CSS, and all the HTML elements you've learned so far. (By the end of the week, rename your folder's main page "index.html" as part of adding a simple menu to the two pages: index.html and tools.html.)
Peek at each other's pages to see what's going on.
Review using the MyRU accounts tab to transfer files and set permissions, with FileZilla as an sFTP alternative and Unix CHMOD command as alternative for setting permissions.
Review terminology of HTML and CSS at W3Schools and W3.org (the WWW consortium) and in the first few chapters of whichever book you bought -- or Ch.2 & 3 of Dreamweaver Classroom in a Book via the library website. Be sure you understand terms like element, attribute, selector, property and value -- they will help you understand CSS style declarations.
Try some more HTML-CSS combinations. Click the "Try it yourself" buttons on that W3Schools page to experiment without having to create your own page.
Next: Start planning midterm site review project. What kind of sites do you admire or want to learn from?

Week Three: Feb.4-9

Getting your tools.html page started with Unix and the Pico text editor.
File transfer with MyRU or FileZilla (or Unix SFTP).
Adding a menu to link two pages together.
See Demo Home Page and Demo Tools Page.
Adding CSS to make it look nicer.
Class notes from first two days of Unix (plain text file)

Week Two: Jan.28-Feb.1

Week One was short, but we're off to a start... and by the end of this week the home page for your course work should demonstrate most of the following features...

Your first dozen (or so) HTML elements
One or more images compressed for the Web with Photoshop (a picture of yourself or a graphic logo for your home page; screen captures for your tools.html page)
A bulleted or numbered list of links to websites you use
A bulleted or numbered list of links to topics you want to learn about. (For a start, see some of the links farther down on this page, including the textbooks, tutorials and other Web sites.)
A link to the first draft of a "tools.html" page -- on which you can begin showing examples of Web production tools you have used. Start with two or three HTML editors. (Examples: TextEdit on the Macintosh, Pico on the Unix server, and either Notepad on Windows or another editor of your choice.) Depending on your level of computer comfort, you might also illustrate and discuss the Unix terminal's command-line utilities or the MyRU interface for setting folder permissions.
Soon, in a preview of the midterm "Site Reviews" project, we'll take a look at a major regional website undergoing a redesign. Sign up to Beta Test Roanoke.com 2013! (See the early discussion.)

Books and authors' pages:

Although "online publishing" is what we are about, there are good old-fashioned books available. COMS 326 students' Web (and computer) experience generally vary, so I have ordered a variety of books, and will recommend tutorial and example sites online as we go along.

Try different books or tutorials and share your experiences with them in class and on your coms326 home pages. An assignment between the midterm and final is usually a Dreamweaver book project, but substitutions will be considered.
Many Web design books are also available as e-books, which work better when you have a bigger screen, like we do in our Mac lab, and can have the book and your project open at the same time. 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.
Terry Felke-Morris: Basics of Web Design, HTML5 and CSS3. This "text-and-projects" approach helps make sense of ongoing changes in Web coding languages, no matter what computer or software you use. It focuses on building pages from scratch without using a site editor like Dreamweaver or a content management system like WordPress. See the table of contents and some of the text's Webdevbasics.net Online Resources, including chapter guides and apps for smartphones as a way to preview or review key terms and concepts. An electronic-rental edition is available, but I haven't tried it myself.
(ITEC Web Development students may prefer writing about Felke-Morris's projects instead of doing the "Dreamweaver Classroom in a Book" exercise.)
Adobe Dreamweaver CS 6 Classroom in a Book (earlier edition Adobe Dreamweaver CS 5 CiB) is a self-study book about one of the most popular Web page-editing programs. As mentioned above, between the midterm and final projects most students will follow some of its tutorials and write an online report about the experience.
FREE book note: If you are logged in on a Radford computer, the library gives you access to a full electronic copy of Dreamweaver CS6 CiB, but I think the print edition is easier to flip through while you work. See the FAQ file for answers to some fall 2012 problems with the new edition.

"CSS" is an abbreviation for Cascading Style Sheets, one of the coding languages of the Web. "CS 5" is short for Adobe's "Creative Suite (version) Five," a commercial software product.

RU labs were updated to "Adobe CS 6" software in August 2013, and the bookstore and library may have both editions of this book. Use the new one unless you have already purchased an older version. Assignments can be adjusted accordingly.
Patrick J. Lynch and Sarah Horton: The Web Style Guide available online at webstyleguide.com and also in a printed edition. It is a well-illustrated reference by the producers of major Web projects at Yale University. In addition to "how to" coding sections, it has chapters on planning and organizing large team projects, understanding issues like "universal usability" in design, designing site navigation, or learning about visual design, typography, graphics and writing style. If you already have considerable experience with HTML or Dreamweaver, ask about substituting a project based on this book for the "Dreamweaver CIB" report.
About visual design: I used to assign Robin Williams' & John Tollett's The Non-Designer's Web Book, but it hasn't been updated in a few years. Lacking a new edition of this book, see the library's e-book version of the same authors' more general Non-Designer's Design Book (login required). The authors' visual design advice is still excellent, and any of Robin Williams' "non-designer" books will get you thinking about the basic concepts of contrast, repetition, alignment and proximity. (So will the Web search at the other end of that link.)
New: The Wiley company has an impressive 500+ page Introduction to Adobe Dreamweaver CS6 by Jeremy Osborn, designed for students interested in taking a an "Adobe Certified Associate" exam. I received a copy after the bookstore order was in, but if anyone would like to try it in place of the smaller "Classroom in a Book" volume, feel free to give it a try.

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.

I've also prepared an introduction to Unix approaches to computing, which we'll explore early in the semester.

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.

Visual Design

This is not a visual design class, but here's a PBS video that 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.

The approach to design in this class will be basically "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.

Overview:

This class is an introduction to producing Web pages. The main topics are the HTML and CSS markup languages, along with programs for editing text, pages and images. We'll visit some people and sites rich in Internet history, some that set the standards that make it all work, and many that offer free tutorials so that you can keep learning... forever! By the end of the semester we will have explored Web multimedia, hosting services, and Content Management Systems as well as standard editing tools, including Dreamweaver. This website has links to assignment sheets, resource pages and all of the "public" projects done in class and for homework.

Please think of this course as a "studio" in which we 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 might be going.

Students' backgrounds will vary, but all should add to their existing skills. The professor's pages for this course -- more than 30 of them -- are listed in the white-on-red menu on the left of this home page in roughly the order we'll follow. Start reading them immediately, look ahead as much as you want, and report any errors or out-of-date information!

Main assignments:

As you can see in the red menu on the left, a "Site Review Asmt" is due at mid-term, and the "Final Project Asmt" is due during final exam week. Shorter exercises will begin in class and finish as homework. Deadlines will be based on each week's lab progress. Your course home page should be updated throughout the semester, and all students' pages will be listed here for class discussion and sharing.

Several textbooks are available, but wait until a discussion at the first class to decide which one or two to buy. The notes below should help with your purchasing decisions. One assignment is keyed to a particular book, but substitutions can be made.

Advice: Be curious. Explore. Make mistakes. Break things, then fix them. As you learn to run various programs and write Web markup languages, try to figure out coding errors on your own or with the help of classmates. When you're stuck, ask the professor. I'll go over the biggest problems in class, in my COMS 326 FAQ File, or by creating additional demonstration pages for the list on the left.

Pace of the Class

If the lessons seem too easy or move too fast, talk to me about it. If you are shy about talking, but not overwhelmed by Web links, 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