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