Communication 326: Web Production 2013
with Bob Stepno | Spring 2013 syllabus (pdf)
student sites, spring 2013 | FAQs | books and authors' sites
Archives: fall 2012 semester class notes | spring 2013 class notes
Note: Dr. Stepno is not teaching this course in the 2013-2014 school year. See his stepno.com home page for general information.
Former students: The Overview section has been moved to the bottom of the page.
- After the course is over, you can still be one of the second thousand people to follow me at Twitter.com/bobstep, where I post internship and job tips between references to old-time radio, journalism and ukulele-playing. Or you can 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 our basic HTML and CSS and move on from there using college courses
or books and Web tutorials. (We barely scratched the recommended text books.) Try Google
searches for key terms like HTML5,
CSS3, Javascript, PHP and WordPress -- combined with the word "tutorial"
or the name of a new CSS feature you haven't tried. That's
how I
recently (spring 2013)
discovered this
CSS-3
transitions page by Steve Sanderson
in England (slightly Microsoft-centric, but fascinating)...
and the makers
of a CSS editor.
Remember you can always visit the WWW
Organization itself. Just keep learning!
- Your own pages: Although the class is over, I encourage you to update your pages, delete any that don't meet your own (or future employers') high standards for finished work, and move your best creations to a personal domain as part of a career-oriented portfolio. You can also take screen shots of your finished pages and put them in your portfolio instead, especially if the site was a prototype with non-functioning features.
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.
Advice: Keep your work away from WebPagesThatSuck.com, a site that uses bad examples to preach clear, functional and attractive Web design. Thanks to Vincent Flanders for sharing great advice in an entertaining way.
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