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.


  • 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, 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:

    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:

    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