Schedule

DATE TOPICS
Week 1:
Lecture

What is interactive design?

Questions for the Knowledge Base www.kb.indiana.edu:

Secure Shell in MacOS & Windows
JoAnna Lio's favorite Secure Shell for Windows (for advanced users only): Putty
Click the Putty.exe link and save the file to your desktop.

Week 1
Labwork

Read: Castro chapters 1-2

HTML: What an HTML Document Is
HTML: Linking
Useful Unix
Unix file permissions (use Absolute form: chmod 644, etc.)

By the end of class today, you should have a T284 subdirectory in your WWW directory. You should have a page in the T284 directory entitled index.html which has your name on it. This page is where you will put links to all of the assignments that you turn in for the class.

Week 2:
Lecture

Read: Castro chapters 1-2; 7-8; Krug intro, 1-2

Quiz 1

Basics of XHTML
DOCTYPE declarations, use this one:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
            

Note the last line, it includes the opening <html> tag.

See W3.org for an XHTML Validator
Notes at W3.org about XHTML 1.0

Cascading Style Sheets (CSS Part I)
CSS Zen Garden
Elizabeth Castro's list of web-safe colors

CascadingStyle Sheets Resources
WebMonkey CSS Tutorial
Everything you ever wanted to know about Style
Cascading Style Sheets, level 2
See W3.org for a CSS Validator
Cascading Style Sheets and browser size issues

[Assignment 1/10] Due (THURSDAY, 10 PM): Simple Resume (resume.html) should be posted and linked from your T284 index.html page. Resume minimum contents: education, work experience, skills, goals. No contact information other than e-mail address!! No graphics at all!

Week 2
Labwork

Text formatting with XHTML & CSS

Navigation and Links:
Targeting Named Links: using the <a> tag
What is the difference between a relative path and a full path?

Week 3
Lecture

Due (TUESDAY 10 PM): Journal 1/10 (Theme: science fiction; save as journal1.html)

Quiz 2

Read: Castro chapters 4 & 6; Krug: 3

Designing on a grid
Think usability: what to do and not to do

Page Layout: Tables

Page Layout: Frames

XHTML for Frames
DOCTYPE declarations change; use this one for frameset docs:

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html
   PUBLIC "-//W3C//DTD XHTML 1.0 Frameset//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
            

Note the last line, it includes the opening <html> tag.

Frames of Another Flavor: Inline Frames
iframes article @ WebMonkey

[Assignment 2/10] Due (THURSDAY, 10 PM): resume.html from last week with new content: a chronology of life events (5-10 important/interesting things that happened to you). This new resume must be formatted with a minimum of 5 CSS styles.

Week 3
Labwork

Create tables & frames in XHTML

Week 4
Lecture

Due (TUESDAY 10 PM): Journal 2/10 (Theme: world music; save as journal2.html)

Due (WEDNESDAY 2:30 PM): Unit 1 project tutorial proposal

Quiz 3

Read: Castro 3 & 8; Krug 4

Graphics: Basic Photoshop

Try the GIMP (GNU Image manipulation Program). Like Photoshop but FREE!

Secure FTP in MacOS
Secure FTP in Windows

[Assignment 3/10] Due (THURSDAY, 10 PM): Anew version of your CSS resume (save as resume_2.html). This one should be formatted in a table. Use the tabular structure to separate sections, headings, etcetera.

Week 4
Labwork

XHTML & Photoshop

Week 5
Lecture

Due (TUESDAY 10 PM): Journal 3/10 (Theme: pets; save as journal3.html)

Due (WEDNESDAY 2:30 PM): XHTML/CSS Unit 1 project tutorial (1/6)

Read: Castro 3; Krug 5

Graphics part II:
IU Knowledge Base: important notes on bandwidth

A few interesting graphics web sites
linkdup.com, wozdesign.com, freeze-frame.org, derrsign.com, donbarnett.com, kakosa.com.

[Assignment 4/10] Due (THURSDAY, 10 PM)
Add a self-portrait to resume_2.html. The image should be saved as portrait.jpg; save it in a folder called images.

Week 5
Labwork

Image optimization & image maps

Week 6
Lecture

Due (TUESDAY 10 PM): Journal 4/10 (Theme: travel in the USA; save as journal4.html)

Due (WEDNESDAY 2:30 PM): Web Graphics unit project tutorial proposal

Quiz 4

Read: Castro 9-10; Krug 6

Graphic design

Steve Krug's Trunk Test

[Assignment 5/10] Due (THURSDAY, 10 PM): an image map (i-map.html). Create a graphic, save it in your images folder, and use it to link to five favorite web sites. Think about how the design of the graphic can work both as a means of navigation and as a conceptual link between the five sites.

Week 6
Labwork

Graphic techniques with text & text entities

Week 7
Lecture

Due (TUESDAY 10 PM): Journal 5/10 (Theme: gardening save as journal5.html)

Due (WEDNESDAY 2:30 PM): Web Graphics Unit project tutorial (2/6)

Read: Krug 7; Flash MX 2004 Savvy

Web animation & Interactivity
Macromedia Flash
Jellyvision: iCi Design
Macromedia Shockwave: Director MX 2004 (a related but different technology)

Design Metaphors
MojoTown
Phil Brown (no, not Uncle Owen)

Week 7
Labwork

Drawing in Flash
Frame by frame animation on a timeline

Week 8
Lecture

Due (TUESDAY 10 PM): Journal 6/10 (Theme: public transportation; save as journal6.html)

Quiz 5

Read: Krug 8; Flash MX 2004 Savvy

Multimedia interfaces & interactive applications for the web and beyond

[Assignment 6/10] Due (THURSDAY, 10 PM)
A non-animated scene, with 3 planes, drawn in Flash. Save as flash_1.html and flash_1.swf.

Week 8
Labwork

Flash tweening animation

Week 9
Lecture

Due (TUESDAY 10 PM): Journal 7/10 (Theme: weddings; save as journal7.html)

Due (WEDNESDAY 2:30 PM): Web Animation unit project tutorial proposal

Quiz 6

Read: Krug 9

Usability testing: Steve Krug's Usability Evaluation

Usability Test Report
You must conduct 5 usability tests using a City of Bloomington web application. Follow the testing process we discussed in class as well as the test described in Chapter 10 of Steve Krug's usability book. Your report should include the following elements:

  • notes from all five of your usability tests that outline problems and possible solutions discovered during each test (these can be neatly handwritten or typed; everything else must be typed and fastened together)
  • a bullet-point, "executive summary" of the usability test results (see Krug p. 173 for details)
  • 2 full pages (minimum) detailing the conclusions you can draw from your usability tests: what went right? what went wrong? how would you do it differently a second time?
  • The report is due by 5 PM December 12; there is no proposal required for this project.

[Assignment 7/10] Due (THURSDAY, 10 PM): A 30-second Flash animation based on your name. Save as flash_2.html & flash_2.swf.

Week 9
Labwork
Usability testing workshop
Week 10
Lecture

Due (TUESDAY 10 PM): Journal 8/10 (Theme: fashion; save as journal8.html)

Due (WEDNESDAY 2:30 PM): Web Animation Unit project tutorial (3/6)

Quiz 7

Read: Castro 3

Digital Audio
Apple Soundtrack Pro
analog & digital recording theory

Embedded media

Week 10
Labwork

Audio editing and file compression

Week 11
Lecture

Due (TUESDAY 10 PM): Journal 9/10 (Theme: political campaigns; save as journal9.html)

Quiz 8

Site building:
Information architecture
*@#!! browsers!!
Your T284 site (preparing this final project)

[Assignment 8/10] Due (THURSDAY, 10 PM): Edit errors and glitches from the file v-o.aif and save as an MP3. Post the final file to your site as audio_1.mp3

Week 11
Labwork

Digital audio signal processing & mixing

Week 12
Nov. 14
Lecture

Due (TUESDAY 10 PM): Journal 10/10 (Theme: holiday travel; save as journal10.html)

Due (TUESDAY 5 PM): Audio unit project tutorial proposal

Quiz 9

Read: Castro 3

Javascript Part I:
Introduction, Functions, Rollovers, Pop-up windows

Online Javascript resources
JavaScript Reserved Words: don't use these for names of objects or variables!
WebMonkey Javascript Library
Javascript Definitive Guide by David Flanagan (very advanced stuff)

[Assignment 9/10] Due (THURSDAY, 10 PM): Edit three of these five sound effects, apply a DSP effect, save the file, and compress it as an MP3. Post these to sfx.html and include a short description of how the DSP effect changed the sound.

Week 12
Labwork

Basic web programming with Javascript

Week 13
Lecture

Due (TUESDAY 5 PM): Audio Unit project tutorial (4/6)

Week 13
Labwork

JavaScript Help Session

Week 14
Lecture

Quiz 10

Javascript Part II

[Assignment 10/10] Due (THURSDAY, 10 PM): new page on your T284 site (rollovers.html) that uses four javascript rollovers. The rollover images should be saved in an images/ folder in the format: 9_imageName.gif.

Week 14
Labwork
Javascript continued
Week 15
Lecture

Due (WEDNESDAY 2:30 PM): Web Programming Unit project tutorial proposal

Bonus Quiz

Help Session

Week 15
Labwork

T284 site working critique

Week 16
Final Deliverables

Web Programming unit project tutorial (5/6) due by 5 PM, Monday
Usability report ( unit project 6/6) due by 5 PM, Monday
Final T284 web site Report for your final project due by 5 PM