COURSE DESCRIPTION
This is a studio course introducing students to web production, design and art. We will begin by covering the use and function of Hyper Text Markeup Language (HTML). With a firm grasp of HTML and CSS, we will move on to web production using software: Adobe Flash and Dreamweaver. There will be lectures and demos concerning aspects of the creation of web sites, the various hardware and software technologies used for web production, web design and net.art. Class work will include:

  1. Weekly assignments and lessons from the readings and course text, 5pts (quizes)
  2. One creative web site, entirely hand coded using HTML (it may not be pretty), 10pts.
  3. One HTML/Photoshop/Illustrator site that will require CSS, 20pts.
  4. One collaborative Flash animation or video that will incorporate basic interactivity, 30pts.
  5. For graduating seniors a personal portfolio site that includes work in digital and non-digital media; for everyone else a project site that portrays a social issue, a historical or personal interest or serves a community, 30pts.
  6. A portal page for all the projects completed through the semester, upto 5 extra points.
  7. One brief 10 minute presentation on an artist using the web as a creative medium. Artists may be selected from: Mew Media Art, 5pts.

COURSE TEXTS
Learning Web Design: A Beginner's Guide to (X)HTML, StyleSheets, and Web Graphics
by Jennifer Niederst Robbins and Aaron Gustafson, O'Reilly 2007

CSS Pocket Reference, Third Edition
by Eric Meyer, O'Reilly 2007

Materials
Sketch Book/Note Book, a binder for occassional handouts, an external drive to backup your work (personal favorite are by Lacie) and blank CDs. You are responsible to backing up your work in multiple locations. Lost files is not an excuse for unfinished assignments.

Recommended Texts
Sams Teach Yourself Adobe Flash CS3 Professional in 24 Hours (Sams Teach Yourself) by Phillip Kerman
Learning Web Design by Bill Kennedy, Chuck Musciano
Cascading Style Sheets: The Definitive Guide by Eric A. Meyer, O'Reilly publishing
Essential ActionScript 3.0 by Colin Moock, O'Reilly publishing
Internet Art by Rachel Greene, Thames and Hudson

Attendance Policy
This class will present a lot of material in a short period of time. This material will be complicated, technical, and detail-oriented. Prompt attendance for all class periods is essential. If you are late consistently you will not get an A in this course. This course also requires at least 6 hours a week of outside lab time. You should consider this an absolute minimum. These kinds of projects require a lot of time and energy. They will be impossible to complete unless you work consistently throughout the semester. Always take the limitation of lab hours and technical problems into consideration when planning your projects and remember to save everything and then save a back up as well.

Grading Policy
All work must be submitted for critique on the due date. You must show work during class to receive a grade. Assignments will be collected at semester's end on a CD. You are responsible for archiving and backing up your work.
FINAL GRADES for this class will be based upon the following:

  1. Overall quality of assignments and projects both in idea and execution (60%)
  2. Participation in class discussions and critiques (15%)
  3. Effort and attendance (25%)

Requirement
Create a www directory and generate a default index.html file in your TCNJ web directory... Use Telnet or Terminal to log into beast and follow the directions on the following school page: Personal Web Site FAQs
Use your TCNJ web space to submit your assignments on the due date, but also save all your work locally. During finals week, I will review your class portfolio on CD and online.

Week 1: August 26
Introductory Presentation
HTML Basics


ASSIGNMENT 1: Reinterpreting "The Machine Stops" due September 16th

Week 2: September 9
Font and Text Formatting, Links, Graphic Elements, Tables and Frames
Saving for the Web using Adobe Photoshop and Illustrator --
Vectors versus Rastor (Bit Map)
HTML Basics
XHTML Presentation

Week 3: September 16
Individual reviews of First Project
What are Frames and why not to use them
CSS Intro
Using CSS

Review links:
What Frames Are: DO NOT USE
Hand coding an image map

EXTRA Downlaod Class Notes and Review:
Presentation
Text from Presentation

Assignment 2: Using CSS, Photoshop and Illustrator create two web pages presenting the same content employing CSS. The first site should be very simple: use CSS to place content into containers that organize the page in an easy to read manner, format the text for legibility, create a simple graph to replace the data table. First version is due next week
The second and final version should be a graphic design masterpiece emplying CSS to the fullest degree you can. This project is based on css Zen Garden, please refer to the site for further understanding of the assignment and inspiration. HTML Project 2

For a nice example of visual communication check out the volumeone site, it's eyecandy, but seductively done.

Week 4: September 23
The work of Jonathan Harris
Please do tutorials 1 and 2 from Listutorial
Working with forms, form presentation and Studio Time to work on CSS Project due October 7th.

Example of an HTML form using various input controls
Working with forms handout
a clean example of web design: http://www.kcts.org/

Week 5: September 30
Studio time to wrap up CSS Sites
More on forms: Article on Usability; Article on Design
*** Form Addition to CSS Project: The form may be modeled as a quiz or a questioneer. Add a link to the form on the project 2 page, this could be a top link in the external links div. The form that you create should question the user on the content presented on the main page - Manufacturing to Service Economy... And you will need to add CSS for the form so that you're form matches the appearance of the main page. All from files to facilitate the quiz or questioneer are zipped in the linked folder - example form, css and php processing file.

Week 6: October 7
Class Review and Critique of CSS Project
Description of Next Project Using Flash
Intro to Flash
Multimedia on the Web using Flash

Using Audio with Flash
Basic ActionScripting 2.0 (jumping ahead)

MID SEMESTER BREAK - October 13-14

Week 7: October 21
Individual reviews of Flash Animation / Video Projects
Dealing with sound in Flash view lecture
Basic Actions in Depth: ActionScripting Basics Handout
Introduction to Flash ActionScripting:
Working in Basic Interacitivity view lecture

Week 8: October 28
Basic navigation in Flash, loading external .swf movies, studio day.
Develop your animations further by adding sound and interactivity. Expand the animation by adding interactive elements, this may take the form of a game or an interactive narrative in which the user decides what direction the story will take... Project 3 Description


Week 9: November 4
Class Review and Critique of Animation Projects
Lecture: Flash Game Deconstruction

Assignment 5
Download the proposal sheet for the fourth project. This project should be a web site that investigates a social issue, a historical or personal interest or serves a community that you have contact with. This project may take the form of a traditional web site or a creative art project that utilizes the web as a medium. View Example Sites:

Week 10: November 11
One on one reviews of final assigment flow charts and proposals.
More on CSS: tutorials and exercises: a list apart > drop down menus
PHP Intro (for use of include() function)
JQuery Javascript Library
jQuery Plugin: Lightbox by Pinho
50 jQuery Examples

Due next week First draft of final sites, design should be addressed, including general layout, color palette, logo, navigational buttons, any audio, you may not use any stock buttons or photography, all work must be original.

Stephen Hayden creates an informative page using a narrated animation and useful links on the realities of copyright in the digital age: Day in the Live of Ms.MP3

Jessica Ivins takes on feminist questions in a creative manner. In the first she employs parody as at first the site looks like a girl zine, but as one moves through the site it becomes apparent that she is creatively deconstructing female stereotyping and popular objectifying constructions.
Body Watch
Retrotype is uinique in its subject matter as it looks at the representation of women in video games.

Buddy Lasavio, Cosby Game, looks at the differences between TV idealization and reality.

Penguin Game, simple shooting type game.

John Rivielo uses animation to create a seductive portfolio

And these are some of the design sites that I pointed out to help generate ideas:
Web Standards
A List Apart

Week 11: November 18
Please review css tableless page examples.

Reminder: DESIGN NOTES

Assignment 6: If you haven't already done so, using HTML, create a portal page to all the work you have done over the semester. This is due with the final project

Week 12: November 25
Using the Web as an artistic medium - Online Narratives and Documents
Constructing your final sites using the tools made available.

On-line Experiments
A graphic chat room: Habbo Hotel
Web Design: Huge Inc. client case studies
Community Oriented net.art by Jessica Irish and LA highschool studentsTropical America

Week 13: December 2
Constructing your final sites, all work is due for critique next week. Be sure to burn me a CD with all your projects.
Setting up your website, post-TCNJ

Tips on establishing a wage and contract:
This information varies depending on client, location, type of job, your breadth of knowledge...
Web Advertising Industry Pay Rates:
Starting Hourly Rate: $30-$60
Priority is to build up a portfolio of work and to network, you must be willing to work for less when getting started.

Project Rate: Calculate approximate hours to be spent

Contract: Establish a Scheduling Document for a given project that outlines a process and details the final project.

    • Initial meetings to establish the priorities of the product, the content, and desired design.
      Create a minimum of two alternatives to present and reach agreement. Be prepared to fully explain and justify the designs.
      Keep client constantly updated in the midst of production.
      Once a project is launched establish an hourly rate for any changes.

    • Week 14 Final Critique
    TBA