World Wide Web Development

PSU School of Extended Studies
Multimedia Professional Program

Instructor: Virginia Bruce

MM 624 – January-March 1999

Course Syllabus

I. Synopsis

II Objectives and Outcomes

III. Course Format

IV Location and Time

The course will take place in the Visual Design Lab at 251 Neuberger using Power Macintoshes. Class begins at 6:30 pm and ends at 9:30 pm with a 15-minute break.

V. Calendar

Class One, Thursday, January 7, 6:30 pm

• Introductions: who is in the class and what are their goals
• Review class contents and assignments
• Readings — what they are for and what to read
• WebDev Website — how to use, importance of
• Email — using it to keep in touch with instructor
• Recommended texts
• Lecture: Internet 101
  • what it is, how it came about, how it works
  • Browsers and servers — how a web page gets on your screen
  • Some things websites can do — provide information, entertainment, games, transactions, downloads, uploads, chat, customer support

---break---

• Beginning internet terminology and acronyms
• Lecture/demonstration: Introduction To HTML
• Hands-on activity: create a simple page using a text editor
• Introduction to website planning process
• Assignment: explain website project, pass out assignment sheet, announce mini-mac-class

Readings: Internet 101, Browser Configuration,** process paper, glossary, **IBD excerpts, **"Beginners’ Guide to HTML" in MM Dictionary,

Websites: see http://www.teleport.com/~pswebdev/links.html

Class Two, Thursday, January 14, 6:30 pm

• Mini Mac Class — for those who are not comfortable with the Mac interface — 5:30 pm, MAC
• Discussion: What Is Good Interface Design — we will look at a series of websites in light of what was learned from the process article
• Lecture/discussion: Planning a web project

• Lecture/discussion: Browser and platform considerations

---break---

• Intro to Text Editors and Wysiwyg editors
• Hands-on — Dreamweaver — reproduce example pages
• Site: Fill out Site Info sheet on chosen topic.
• Lecture/Discussion: Site organization (architecture) using cards. pass out cards

Readings: **Design Principles, "Color," "Font Talk," "Author Author,"

Websites: see http://www.teleport.com/~pswebdev/links.html

Class Three, Thursday, January 21, 6:30 pm

• Graphics on the Web — gif, jpeg, palettes
• intro to Photoshop
• Photoshop exercises

---break---

• Scanning and processing with PS
• Lecture, Hands-on: Layout options — tables, frames, layers
• Sites: discuss site architecture cards with students
• Sites: process graphics for sites and/or acquire from web. Pass out asset collection list, explain.

Readings: , **Backgrounds, **Tables, "Frames" "Look Out GIF &JPEG,"

Websites: see http://www.teleport.com/~pswebdev/links.html

**To Gif or Not to GIF,"

Class Four, Thursday, January 28, 6:30 pm

• Discuss asset lists
• Lecture/discussion: Interface Design/Navigation — how to create an easy-to-navigate site
• Exercise: organize and write nav buttons for example site (list)
• Site planning: review site plans; finalize site plan for your site, make flowchart

--break--

• Hands-on -- make buttons using PhotoShop
• Lecture/discussion: Writing for the web — special considerations
• Lecture/discussion: File structure and naming conventions
• Lecture: File transfer (ftp)
• Sites: begin to upload files to server

Readings: Chapter 10, designing web graphics -- "Navigation-Based Graphics

Websites: seehttp://www.teleport.com/~pswebdev/links.html

Class Five, Thursday, February 7, 6:30 pm

• Assign Research presentation–"Using the web to find the info you need." Students will choose from a list of topics and find instructions on how to accomplish task, present results in week seven in web page form — 3-5-minute pres.
• Lecture/discussion/sites: Extending the web. Students will take notes on handout and bring in to next class with explanations filled in, as a take-home quiz.

• Lecture/discussion: BBedit — getting under the hood of HTML
• Exercise: using HTML editor to enhance DW files

---break---

• Hands-on: Extending the Web
• create a form and a template to connect it to a script
• Sites: plan a form for your site, create in DW (make template later)
• Passout "Extended Web" takehome exam

Readings:, **"Putting Java in its Place," Java and Javascript, "Embed," "Mastering Style Sheets," DHTML, "Effective HTML Forms," "Baking Your Own Cookies," "Planning for Push"

Websites: seehttp://www.teleport.com/~pswebdev/links.html

Class Six, Thursday, February 14, 6:30 pm

• Discuss "Extended Web" take-home

• Embed quicktime movie

• Use javascript — create rollovers in DW

• Create an animated gif from prepared files

  ---break---

• Group project — break into assigned groups and create a site plan for hypothetical sites — group process — brainstorm, determine tasks, assign tasks, fill out site info sheet.

• Sites: write and create navigation schemes

Readings: "The Real Home Shopping Network," "Internet Storefront Technology"

Websites: see http://www.teamweb.com/wwwdesign/

Class Seven, Thursday, February 21, 6:30 pm

• Present Research project from Class Five

• Lecture: Flash

  ---break---

• Exercise: build a flash animation

• Sites: review site with instructor

Readings: none —work on sites

Websites: see http://www.teleport.com/~pswebdev/links.html

Class Eight, Thursday, February 28, 6:30 pm

• Lecture/discussion: Search engines and site marketing
• Searching exercises — look at meta tags
• Meta tags — create and look at some
• Lecture/discussion: Usenet, email lists

---break---

• Lecture/discussion: Intranets, extranets
• Lecture/discussion: Security
• Sites — work on sites. Fill out Marketing Plan.

Readings: "Count Your Blessings," Intranets "Superior Interiors," firewalls, security

Websites: see http://www.teleport.com/~pswebdev/links.html

Class Nine, Thursday, March 4, 6:30 pm

• Lecture/discussion: the business of website design
• Work on sites

---break---

• Work on sites — review with instructor

Class Ten
Thursday, March 11, 6:30 pm

• present group projects/critique

---break---

• present group projects/critique
• The future of the web
• Plans for future learning

VI. Coursework

Readings (photocopied material) are provided to the student as a binder at the beginning of class. Some of the material is required reading (marked with **), some is optional, this will be discussed at the first class. Required reading should be done prior to the class for which it is assigned (except first session).

Assignment: Website project

Students will choose a topic for a website they will work on throughout the term. They may choose either a real business, a subject in which they have a strong interest, or a topic from a list posted on the website. Once they have chosen a topic to work on, they will identify a problem or problems in the situation description, and architect a website that will solve the problem. They will plan the site, design an interface, gather assets (text, graphics), and create sample pages from the site to demonstrate their understanding of web design and production principles. Pages do not have to have working features, but should indicate advanced interactivity where appropriate. Emphasis should be on interface design and planning.

Students will also work in class on exercises designed to introduce various tools and principles, e.g. using prepared files to create a GIF animation.

Students will be assigned a short research project on a topic to be chosen from a list on Class Five. They will use the web and their searching skills to discover instructions for accomplishing a web development task. They will make a web page with links for the purpose of presenting their research results.

"Extra Credit" Project: Work as a team to create a "Meta-site" to present and organize the other student sites. This will be incorporated into the permanent class site.

VII. Student evaluation

This course will be graded Pass/No Pass, based on attendance and participation.

You must attend seven of the ten sessions to successfully pass.

VIII. Computer labs

For participants enrolled in this course during the Winter 1999 term, the PSU computing labs will be available for students to work on related projects. The Mac lab in Cramer Hall 322 consists of twenty Macintosh G3 computers, each with 24MB RAM, hard Drives, and 17² high-resolution color monitors. Each computer is connected to the campus network, and offers Internet access including Netscape navigator and other applications. Software packages include the Microsoft Office suite and Adobe Photoshop. The IBM compatible side of CH322 is also available, with Pentium-based computers. A variety of web development software is available on these stations (not necessarily Dreamweaver).

Neuberger 429 has Pentium II cpu’s loaded with advanced software. Call 724-8289 for lab schedule.

The Media Arts Center (MAC) lab (Neuberger 251) will be available on a limited basis. Call 725-8247 for schedule.

Prior to the second class, at 5:30 pm in Neuberger 251, the instructor will offer a free Macintosh primer class for those unfamiliar with the Mac interface.

PLEASE! Absolutely no food or drink in the labs.

IX. Instructor biography and contact information

Virginia Bruce
Team Web
629-5799
Email: vrb@teamweb.com

Virginia has been designing websites since mid-1994 (before Netscape was released). She has her own company, Team Web, and has designed both large and small sites for all types of businesses and organizations. Her experience prior to the web included technical writing, graphic design and desktop publishing, marketing, and publishing. She was the founder of Portland Family Calendar.

The syllabus, assignments, articles and websites for student research will be posted as links on: http://www.teleport.com/~pswebdev/

Students should visit this site at least once a week during the course as it will be updated regularly.

X. Recommended Texts

Suggested: You may click on the book covers to order these books directly from Amazon.. You will need a credit card to pay for them, they will be delivered in a few days.

These Dreamweaver 2 books aren't yet available, they should be shipping in a short while. But there's not much point in getting a 1.2 book, they don't offer upgrades on paperbacks!

Dreamweaver 2.0 Bible

by Joseph W. Lowery
Amazon Price: $39.99

Not Yet Available: You may order this title. We will ship it to you when it is released by the publisher.

Highly recommended by one reviewer...

Dreamweaver 2.0 for Windows and Macintosh

by J. Tarin Towers
List Price: $19.99 Amazon Price: $15.99 You Save: $4.00 (20%)

Not Yet Available: You may order this title. We will ship it to you when it is released by the publisher.

Poor reviews from two reviewers, good from one.

Instant HTML,
Programmers Reference, HTML 4.0 Edition
Alex Homer, Chris Ullman and Steve Wright,
Wrox Press, © 1997, updated 1998.

This book sits next to my computer for reference -- all the HTML you're likely to need in a well-organized easy-to-use format

The Dictionary of Multimedia,
by Brad Hansen (especially pp. 271-337)
1887902147Franklin, Beedle & Assoc. ©1997

Includes "A Beginners Guide to HTML" by Marc Andreesen, founder of Netscape

Interactivity by Design,
by Amy Satran and Ray Kristof,
Hayden Books ©1997

How to create interactive applications that people enjoy using

designing web graphics .2,
by Lynda Weinman,
New Riders ©1997

Tips, techniques, tables and more. How to use color and how to process graphics for the web, practical, technical and esthetic.

Recommended readings: magazines -- Web Developer, Web Techniques

Websites: recommended websites will be linked from the course site