September 1 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.
September 2 Week 1 Lab
Read: Castro 1
Useful
Unix
Unix
file permissions (use Absolute form: chmod 644, etc.)
More
useful Unix commands by Aaron Kahn
Nano is a free (GNU license) text editor for Unix computing systems; this is what to use when creating HTML pages on Mercury. After logging in to your Mercury account and navigating to www/T284, type nano to launch the program. You can find help at these links:
GNU Nano homepage has application documentation but it's very cryptic...
Good Nano documentation
Nano entry at Wikipedia
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.
Basic file structure in Mercury
September 8 Week 2 Lecture
Read: Castro 3-4, 6-10; Krug intro, 1-2
Quiz 1
Basics of XHTML
DOCTYPE declarations, use this one:
<!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.
Jeffrey Zeldman on doctypes.
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
Color scheme generator
Cascading Style Sheets Resources
Excellent overview at EchoEcho.com
WebMonkey
on CSS
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 (TUESDAY, 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!
September 9 Week 2 Lab
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?
September 15 Week 3 Lecture
Due (MONDAY 10 PM): Journal 1/10 (Theme: 24-hour news networks; save as journal1.html)
Quiz 2
Read: Castro 16; Krug: 3
Designing on a grid
Think usability: what to do and not to do
Page Layout: Tables
Table attributes: sample HTML
Browser window dimensions: Windows
Browser window dimensions: Macintosh
Browser window dimensions: mobile
devices; game consoles
Flexible page layout: Von Flashenstein, ::wireframe studios::, Citizens' Toolkit
Page Layout: Frames
Sample frameset
Nest framesets to load multiple frames simultaneously
the remedi project frames to hold Flash content
Google
image search (results are shown in frames)
XHTML for Frames
DOCTYPE declarations change; use this one for frameset docs:
<!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 (TUESDAY, 10 PM): Use resume.html from last week and save it as resume-css.html. Use this file to make another resume with new content: a chronology of life events (5-10 important/interesting things that happened to you). This new resume must be formatted in XHTML with a minimum of 5 CSS styles.
September 16 Week 3 Lab
Create tables & frames in XHTML
September 22 Week 4 Lecture
Due (MONDAY 10 PM): Journal 2/10 (Theme: Car Free Day (holiday observance); save as journal2.html)
Due (TUESDAY 2:30 PM): Unit 1 project tutorial proposal
Quiz 3
Read: Castro 5; Krug 4
Mosaics: traditional and contemporary
What is a pixel and what does it have to do with a digital image?
Graphics: Basic Photoshop
Need help with Photoshop? Steps Classes are free to IU
students
Working with background images and color: the good, the bad, and the ugly.
Try the GIMP (GNU Image manipulation Program). Like Photoshop, but FREE!
[Assignment 3/10] Due (TUESDAY, 10 PM): Use resume-css.html from last week and save it as resume-tables.html. Use this file to make a new version of your CSS resume. This one should be formatted in a table. Use the tabular structure to separate sections, headings, etcetera.
September 23 Week 4 Lab
XHTML & Photoshop
Web-friendly color palettes
Color
scheme generator (see this link again, because it's so helpful in getting
started)
September 29 Week 5 Lecture
Due (MONDAY 10 PM): Journal 3/10 (Theme: investment banking; save as journal3.html)
Due (TUESDAY 2:30 PM): XHTML/CSS Unit 1 project tutorial (1/6)
Read: Castro 5-6; Krug 5
Graphics part II:
Optimization examples GIF &
JPG
Images with text: ASCII art about Carnivore
software
Images with no anti-aliasing: pixel art by Justin
Salsburey
IU Knowledge Base: important notes on
bandwidth
A few interesting graphics web sites
linkdup.com, wozdesign.com, derrsign.com, donbarnett.com.
[Assignment 4/10] Due (TUESDAY, 10 PM)
Add a self-portrait to resume-tables.html. The image should be saved as portrait.jpg; save it in a folder called images.
September 30 Week 5 Lab
Image optimization & image maps
Photoshop and Image Maps: Hawaiian
Islands map
October 6 Week 6 Lecture
Due (MONDAY 10 PM): Journal 4/10 (Theme: Michael Jordan (basketball star); save as journal4.html)
Due (TUESDAY 2:30 PM): Web Graphics unit project tutorial proposal
Quiz 4
Read: Castro 10, 21; Krug 6
Graphic design:
Web friendly type examples
Communicating with type
Webmonkey Typography Tutorial: Lesson
1 Lesson
2
Typography and the 2008 presidential election
ALT
Attribute guidelines (important in "text as graphic" applications)
Typetester site use this to compare/contrast text styles
Thinking with
Type by Ellen Lupton
<font> tag (old, but important to understand)
Web Style Guide (2nd edition): the BIG picture
Color books by Leatrice Eiseman
Design discussion at www.unmatchedstyle.com
brilliant typography at de-construct
[Assignment 5/10] Due (TUESDAY, 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.
October 7 Week 6 Lab
Steve Krug's Trunk Test
Text in digital design
Typography & CSS
Text in Photoshop
Character encoding and entities
Elizabeth Castro's HTML
& XHTML entities
Encoding problems... note the lack of all characters
W3C: preparing multi-lingual documents
Use this encoding:
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
October 13 Week 7 Lecture
Due (MONDAY 10 PM): Journal 5/10 (Theme: Lenny Bruce (comedian); save as journal5.html)
Due (TUESDAY 2:30 PM): Web Graphics Unit project tutorial (2/6)
Read: Krug 7; Flash MX 2004 Savvy Chapter 4 (download the PDF)
Web animation & Interactivity
Adobe Flash
Adobe
Flash documentation & other resources
Animation & perception: Beta & Phi
Short-range apparent motion
Optical toys & experiments
Examples
HBO Voyeur archive
October 14 Week 7 Lab
Drawing in Flash
Frame by frame animation on a timeline
What the heck is AC_RunActiveContent.js
Embed Flash content with SWFObject
October 20 Week 8 Lecture
Due (MONDAY 10 PM): Journal 6/10 (Theme: aquariums; save as journal6.html)
Quiz 5
Read: Krug 8; Flash MX 2004 Savvy Chapter 7 & Chapter 10 (download PDF files)
Multimedia interfaces & interactive applications for the web
and beyond
Jellyvision:
iCi Design
Adobe Flex
Flex.org
Adobe Air
Buzzword by
Virtual Ubiquity (aka
Adobe) sign-in
Adobe Shockwave player: Director 11 (a related but different technology)
Design Metaphors
MojoTown
Phil Brown (no,
not Uncle Owen)
von Flashenstein (site now retired but fondly remembered...)
[Assignment 6/10] Due (TUESDAY, 10 PM)
A non-animated scene, with 3 planes (foreground, middle ground
and background), drawn in Flash. Save as flash_1.html and flash_1.swf.
October 21 Week 8 Lab
Flash symbols & tweened animations
October 27 Week 9 Lecture
Due (MONDAY 10 PM): Journal 7/10 (Theme: "Don't ask, don't tell" military policy; save as journal7.html)
Due (TUESDAY 2:30 PM): Web Animation unit project tutorial proposal
Quiz 6
Read: Krug 9
Usability testing: Steve Krug's Usability Evaluation
[Assignment 7/10] Due (TUESDAY, 10 PM): A 30-second Flash animation based on your name. Save as flash_2.html & flash_2.swf.
October 28 Week 9 Lab
Usability testing workshop
Details on the Usability test report, aka Unit Project 6.
November 3 Week 10 Lecture
Due (MONDAY 10 PM): Journal 8/10 (Theme: Batman; save as journal8.html)
Due (TUESDAY 2:30 PM): Web Animation Unit project tutorial (3/6)
Quiz 7
Read: Castro 18
Digital Audio
Apple Soundtrack Pro
Analog & digital audio: past, present & recording theory
Electroplankton by Toshio Iwai
Embedded media
Use QuickTime to embed video and audio on a page.
QuickTime parameters for <embed> and <object>
November 4 Week 10 Lab
Audio editing and file compression
Compressing MP3 files with iTunes
November 10 Week 11 Lecture
Due (MONDAY 10 PM): Journal 9/10 (Theme: "Sesame Street" the TV program; save as journal9.html)
Quiz 8
Site building:
Information architecture
*@#!! browsers!!
Your T284 site (preparing this final project)
[Assignment 8/10] Due (TUESDAY, 10 PM): This assignment has two
parts. Part one involves removing the noise from a sound file,
trimming the sound's length, saving the new file, and compressing
it as an MP3.
Part two asks that you create a unique, new sound
effect using a stock sound effect in the Soundtrack Pro library.
Use what you know about editing and DSP to create a sound effect
with EITHER a comic, cartoony quality OR a tech-ie, "Matrix" sound.
Both sound effects (the stock sound and your creation) should be
compressed as MP3 files.
You will post an XHTML document
that has links to three MP3 files: the noise-free file, the source
sound from the Soundtrack Pro library, and the original sound effect.
Use this XHTML doc as a guideline to post your materials.
The noisy
sound for part one is available here. (Right-click [Cmd+click on Mac] and choose Save As...)
November 11 Week 11 Lab
Music production: composing with Apple Loops
November 17 Week 12 Lecture
Due (MONDAY 10 PM): Journal 10/10 (Theme: Watergate political scandal; save as journal10.html)
Quiz 9
Read: Castro 19-20
Javascript Part I:
Introduction, Functions, Rollovers, Pop-up windows
Simple rollover
Rollovers two ways
Personalize
your page for a visitor
Multiple rollovers
Image map 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 (TUESDAY, 10 PM): Compose a 30-second song
using
Soundtrack Pro and Apple Loops. This should be something that could
work as
a theme song for your week 9 Flash animation. Save the track, compress
it as
an MP3 (theme.mp3), post it to your Mercury account, and link to
the file.
November 18 Week 12 Lab
Basic web programming with Javascript
November 24 Week 13 Lecture
Due (TUESDAY 4:00): 60-second Audio Postcard (4/6)
Quiz 10
Work period (TV250) to finish your 60-second postcard
November 25 Week 13 Lab
NO LAB SESSIONS: Thanksgiving break
December 1 Week 14 Lecture
Due (TUESDAY 2:30 PM): JavaScript unit project tutorial proposal (5/6)
3D: character modeling & animation, games & level design, CAVE
[Assignment 10/10] Due (TUESDAY, 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.
December 2 Week 14 Lab
Development lab: T284 site work day
December 8 Week 15 Lecture
Open lab to work on JavaScript tutorial, usability report, T284 site (location TBD)
Bonus Quiz
December 9 Week 15 Lab
Development lab: T284 site work day + critique exercise
(you may also work on your JavaScript tutorial)
T284 site critiques
11 December: FINAL DUE DATE FOR WEEKLY ASSIGNMENTS (10 pm)
December 15 Finals Week
Web Programming unit project tutorial (5/6) due
by 5 PM, Tuesday, December 15
Usability report (unit project 6/6) due by
5 PM, Tuesday, December 15
Written portions of
the JavaScript tutorial and the complete usability report should
be delivered to my office (TV 344).
December 16 Finals Week
Final T284 web site due by 5 PM, Wednesday, December 16