Creating Web Documents

Information and Syllabus

Creating Web Documents MAT/NME 2730.46

Required Text
Description
Syllabus
Project #1
Project #2
Project #3
Evaluation
Web Resources

Instructor: Robert Spahr
Contact: robert.spahr@purchase.edu & rob@robertspahr.com AIM: rospahr
Office: VA1026B
Office Hours: Mondays 4:30-6:00pm & by appt.

Course Syllabus Location: http://www.robertspahr.com/cwd/
New Media Blog: http://newmedia.purchase.edu/

Required Text:

Castro, Elizabeth. HTML, XHTML, and CSS, Sixth Edition (Visual Quickstart Guide). Peachpit Press

Further Reading:

Chapman, Nigel & Jenny. Web Design, A Complete Introduction. Wiley

On Reserve:

Wardrip-Fruin, Noah & Montfort, Nick. The New Media Reader. Cambridge, MA: MIT Press

Packer, Randall & Jordan, Ken. Multimedia From Wagner to Virtual Reality. New Yok, NY, W. W. Norton & Company

Manovich, Lev. The Language of New Media. Cambridge, MA: MIT Press

Description:

The Web is revolutionizing the way the world communicates. In this course, we will investigate how the Internet works, and the tools and techniques used for creating web documents. Topics include: HTML & XHTML authoring, Cascading Style Sheets, scripting languages, data retrieval, and incorporating sound, video, and images into web pages. We will also explore issues of web design and usability, as well as the legal and ethical responsibilities of being a consumer and producer of web content. There will be regular reading assignments, written responses and group discussions relevant to the class.

Syllabus:

Jan 26
Introductions, The Internet, Basic Markup, HTML
Lecture Notes - basic HTML

Feb 02
XHTML Basics, Tables & CSS Basics
Reading: Jeff Tyson: How Internet Infrastructure Works
Thought Questions
Project #1 Due
Completed Project #1
Lecture Notes - XHTML Basics
Lecture Notes - Lists, Tables
Lecture Notes - CSS Basics

Feb 09
Graphic Issues, Multimedia & Inline Images
Reading: Vannevar Bush: As We May Think, July 1945
Thought Questions
Lecture Notes - Graphic Issues

Feb 16
Advanced Layout Using CSS
CSS Layout (positioning float left)
CSS Layout (absolute positioning 2 column)
CSS Layout (absolute positioning 2 column float)
CSS Bulleted List Navigation

Reading:
Luigi Russolo: The Art of Noises, July 1, 1913. (Listen to Intonarumori)
F.T. Marinetti, et al: The Futurist Cinema, November 15, 1916.
Thought Questions
Proposal for Project #2 Due
Lecture Notes

Suggested further reading:
Futurism (art)
Intonarumori

Feb 23
Validators, Browser Testing, & Open Source/Free Software
Reading:
Richard Stallman: The GNU Manifesto, March 1985
Lawrence Lessig: The Internet Under Siege, November 1, 2001
Thought Questions
Lecture Notes - validation, open source

To be viewed and discussed in class:
ESR cathedral and the bazaar 1:35
Go Open - Richard Stallman Part 1 Full Interview 10:00
Go Open - Richard Stallman Part 2 Full Interview 9:56
Net Neutrality Open Source Documentary 10:26

Mar 02
Class cancelled due to winter weather

Mar 09
Midterm Exam
Sample Midterm Exam

Mar 16
Spring Recess - No Class

Mar 23
Project #2 Due
Student Presentations of Project #2

Mar 30
Usability, Search Engines & Multimedia
Reading:
Jakob Nielsen: How Users Read on the Web, October 1997.
Christopher Locke: Cluetrain Manifesto: Chapter 1, 1999, revised 2001
(No thought questions this week)
Lecture Notes - usability, multimedia

Apr 06
Javascript
Javascript Examples
CSS rollover image example
Lecture Notes

Apr 13
---------------------------------
CLASS IS CANCELLED^*
---------------------------------
Hyper-Narrative Project Due Next Class:
Hyper-Narrative Details
Assigned lines & page numbers
^*See your email for more information

Apr 20
Frames, Forms, CGI, Client vs. Server
Sample Form
Reading: Paul Graham: Taste For Makers, February 2002
(No thought questions this week)
Lecture Notes - Forms
Lecture Notes - Frames

Apr 27
Current Trends, Social Media, Web 2.0
Reading: Tim O'Reilly: What Is Web 2.0, September 2005.
Thought Questions
Lecture Notes
RSS 2.0 Specification
Sample RSS Feed (right-click and save as, then open in a text editor)

Prufrock Redux: a hypernarrative

May 04
Project #3 Due

May 11
Final Exam
Sample Final Exam

Project 1: Compare and Contrast

View Template #1

Select two web sites, one that you think is successful, and a second one that you think is unsuccessful. Using the supplied template, create a fully resolved link to an image from each of the two sites, fill in the site name and link that name to the fully resolved URL of the site. In the comments area, compare and contrast the two sites explaining the strengths and weaknesses of each. Address all of the following issues: Consider the audience of each site, navigation, information clarity, the visual dynamics that structure the page and the site, as well as color choices. Why is one site more successful than the other? If you were enlisted to redesign these sites, what suggestions would you offer to improve them?

Name your template using the following convention:
lastname_project1.html (ex: spahr_project1.html)

Attach your html file to an email and send it to me by the beginning of next class.

Project 2: Building a Web Site

You will build a website with a minimum of 5 pages. The layout of the site should be created using tables, formating should utilize CSS. Carefully consider the design and navigation with future site growth in mind. The final site will be burned to a CD-rom. Include all source materials, notes, sketches and documentation on the CD in a folder labeled "source."

Issues to consider:
Who is the audience? What color palette? Warm colors? Cool colors? What is the visual structure of the page? What is the visual structure of the site? Organic motifs? Geometric motifs? How will the viewer navigate the web site? One homepage to enter the site? Multiple entries? How will the site expand over time?

Choose the type of site you will build from the following:

Photo Album Site
Possibilities include chronological organization, Organized by holiday, Color palette of sepia or black & white.

Travel/Vacation Site
Possibilities include chronological organization, organized by location, favorite hotels and sights.

Book/CD/Music Collection Site
Possibilities include photos of cd/book covers, wish list linking to online stores, reviews of your favorites.

Artist Portfolio Site
Possibilities include visual artist, musician, writer, chronology, subject matter, media.

Instructional Hobby Site
Possibilities include hobby site with how to's, reviews of materials and suppliers, step by step photos.

Company Brochure Site
Possibilities include about us, products/catalogs, contact us

Project 3: Expanding a Web Site

Building upon the web site you created in the second project, you will now change the overall look and feel by changing the CSS. You will also add at least 5 new pages to the site. You must include either a sound file, a multimedia file, or an animated gif as well as at least one example of javascript and one form.

Some issues to now consider:
Will the structure of your navigation need to be changed?
How does adding new pages affect the navigation?
How does changing the look and feel alter the overall user experience?
Are you able to reuse or alter your templates when you add new pages?

The final site will be uploaded to an online web server, as well as burned to a CD-rom. Include all source materials, notes, sketches and documentation on the CD in a folder labeled "source."

Evaluation:

Your final grade will be determined by the following:

15% Participation
5% Project #1
25% Project #2
25% Project #3
15% Midterm Exam
15% Final Exam

Attendence to all classes is expected. You are allowed up to TWO unexcused absences. Each absence beyond this threshold will result in a letter grade deduction from your final grade.

All assignments and projects are due at the beginning of class. All reading responses should be submitted at the beginning of class, typed, and no longer than one page in length.

Late reading responses will not be accepted. Late projects will result in a letter grade deduction.