What is interactive design?
You will need to have a Mercury account for this class. Questions about Mercury are usually answered at the IU Knowledge Base (www.kb.indiana.edu), such as:
Secure
Shell in MacOS & Windows
SSH clients available at IU (Mac users stick with Terminal; Windows users download PuTTY(SSH) from IUware)
January 10-11 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
Read: Castro 3-4, 6-10; Krug intro, 1-2
Classes do not meet in observance of Dr. Martin Luther King Jr. Day
[Lab assignment 1/10] Due (TUESDAY, 10 PM): Simple Resume (saved as 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!
January 17-18 Week 2 Lab
Quiz 1
Usability: this makes me think; I don't have to think
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>
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
LAB: Text formatting with XHTML & CSS
LAB: Navigation and Links:
Targeting Named Links: using the <a> tag
What is the difference between a relative path and a full path?
Due (MONDAY 10 PM): Journal 1/10 (Theme: the band U2; save as journal1.html)
Quiz 2
Read: Castro 16; Krug: 3
Krug's "clearly clickable" and realism in UI design
Old example that is NOT "clearly clickable"
Designing on a grid
Think usability: what to do and not to do
Page Layout: Tables
Tables as tables were originally intended: PC Summit presenters
Table attributes: sample HTML
Page Layout: Using templates & external style sheets
CSS
Box Model (try the style at the end to outline boxes in red)
"3D" box model demonstration
BrainJar on the box model & CSS positions
Firebug is a great tool for CSS development
[Lab assignment 2/10] Due (TUESDAY, 10 PM): Using CSS, format the text (aka copy) for your client web site. All of the text is listed at the bottom of the details for this assignment. Create a single XHTML document, add a minimum of 5 CSS styles in the <head>, and apply these to the text for your client site. Save this file as client1.html.
January 24-25 Week 3 Lab
SFTP with Mercury
Working with templates and external style sheets
Due (MONDAY 10 PM): Journal 2/10 (Theme: non-violent protest; save as journal2.html)
Read: Castro 10 & 21; Krug 4
Quiz 3
Graphic design:
The
reality of designing with text in the 21st century (courtesy
of The Onion)
Web friendly type examples
Communicating with type
Legible columns at The Guardian
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)
Proprietary solution: Typekit.com
Other options by comparison in the @font-face face off
Nice Web Type
Excellent typography examples at www.onextrapixel.com
Color books by Leatrice Eiseman
[Lab assignment 3/10] Due (TUESDAY, 10 PM): Complete a rough version of your client web site with all five pages and associated style sheets. The text (aka copy) for your client web site is listed at the bottom of the details for this assignment. Copy/paste ALL of the text into the html pages of the template you intend to use for your client web site. For example, the text for Home goes in the template's index.html. Use the CSS styles within that template to format all of the text. You may change the styles at this point but you do not have to. We DO NOT expect this to be a final design, but we DO expect all text to be implemented across the five pages required for your client site project.
January 31-February 1Week 4 Lab
Client site critique: as a class you will discuss and critique the lab assignment tunred in on Tuesday night. This exercise will be a part of your overall project grade.
Due (MONDAY 10 PM): Journal 3/10 (Theme: blizzard preparedness; save as journal3.html)
Due (TUESDAY 10 PM): Client web site
Read: Castro 5-6; Krug 5
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 and Lynda.com tutorials 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!
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
iPhone 4 bandwidth: June 2010 at TechRepublic
A few interesting graphics web sites
linkdup.com, wozdesign.com, TheBestDesigns, Bloomington Combine
February 7-8 Week 5 Lab
XHTML & Photoshop
Web-friendly color palettes
Color
scheme generator
Due (MONDAY 10 PM): Journal 4/10 (Theme: NCAA basketball records; save as journal4.html)
Quiz 4
Read: Castro 10, 19, 20, 21; Krug 6
XHTML Image maps: donbarnett.com
Slicing images (a neat—and related—trick)
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
Online Javascript resources
JavaScript Reserved Words: don't use these
for names of objects or variables!
Javascript Definitive Guide by David Flanagan (intermediate to
advanced material)
[Lab assignment 4/10] Due (TUESDAY, 10 PM)
Create three personal avatars for the social networking & media sites of your choice. Use this chart to learn the proper dimensions for each of the services you use. Don't use any of these? Then pick any three or do some research to learn the image dimensions for the services you do use. Create a new page (avatars.html) and design it so that all three images appear beside a label with the name of the service where it could be used and the pixel dimensions (For example LinkedIn: 80x80 pixels).
February 14-15 Week 6 Lab
Image maps
Photoshop and Image Maps: Hawaiian Islands map
More rollovers; this time in an image map
Even more rollovers; slicing up large graphics. For more on these techniques, see Lessons 9 & 10 in this Lynda.com tutorial by Jan Kabili (You must be logged in through IU's CAS to access these tutorials)
Rollovers with functions
Due (MONDAY 10 PM): Journal 5/10 (Theme: "Swan Lake" ballet by Tchaikovsky; save as journal5.html)
Read: Krug 7
Quiz 5
Software for digital animation & Interactivity
Adobe Flash
Adobe
Flash documentation & other resources
Science of animation
Animation & perception: Beta & Phi
Short-range apparent motion
Traditional Examples
Optical toys & experiments
Preston Blair phonemes (basic)
Preston Blair phonemes (extended)
Principles of Animation (video)
Principles of Animation (text)
[Lab assignment 5/10] Due (TUESDAY, 10 PM)
Create a new page (rollmap.html) with an image map that uses a minimum of three rollovers. For this assignment it is essential to create a meaningful link between the content of your image, the rollover variations, and the destination of your links.
February 21-22 Week 7 Lab
Drawing in Flash
Timeline animation
Due (MONDAY 10 PM): Journal 6/10 (Theme: the Dominican Republic; save as journal6.html)
Due (TUESDAY 2 PM): Rough draft of your joke (browser version)
Quiz 6
Read: Krug 8
Design Metaphors
PBS Kids
MojoTown
dzinenmotion
von Flashenstein (site now retired but fondly remembered...)
Multimedia interfaces & interactive applications for the web
and beyond
Jellyvision:
iCi Design; Crank Mix Demo
Adobe Flex & Flex.org
Adobe Air
Flash
Catalyst (ActionScript-free Flash)
RIA (rich Internet application) gallery
Flash development for iOS(1), iOS(2), Android, Blackberry or mobile platforms in general
Open Screen Project (official site) & Open Screen Project summary
Adobe Shockwave player: Director 11.5 (a related but different technology)
Games
flOw by Jenova Chen
pulsus by Anthony Mattox
Line Rider
Zuma's Revenge!
Games by Orisinal
BlOwfish
Flash & ActionScript: mediating data and environments
Bjorn Ottesen
Visualizing Tweets
SoundCloud player for Panic of Looking
[Lab assignment 6/10] Due (TUESDAY, 10 PM)
Create the required elements for your Flash joke interface. You should have a minimum of 3 planes (foreground, middle ground
and background), created in Flash. Save as flash_1.html and flash_1.swf. Both should be FTP'd to Mercury and there should be a link to flash_1.html from your index.html page.
February 28-29 Week 8 Lab
CSS for mobile devices:
switching user agents in Safari
class demo (use this as a foundation for your mobile joke versions)
Some details on this code
Flash ActionScript & basic interaction
Due (MONDAY 10 PM): Journal 7/10 (Theme: pre-1990 personal computers; save as journal7.html)
Due (TUESDAY 2 PM): Rough draft of your joke (mobile version)
Quiz 7
Read: Krug 9
Digital Audio
Apple Soundtrack Pro
Analog & digital audio: past, present & recording theory
[Lab assignment 7/10] Due (TUESDAY, 10 PM): Create a simple 3-button interface in Flash (this can—but does not have to be—related to your joke project). Save as flash_2.html & flash_2.swf. Both should be FTP'd to Mercury and there should be a link to flash_2.html from your index.html page.
March 6-7 Week 9 Lab
Audio editing and file compression
Compressing MP3 files with iTunes (more detail)
Same instructions direct from Apple (less detail)
ActionScript for basic audio
March 12-16 Spring Break
No classes. Enjoy your break!
Due (MONDAY 10 PM): Journal 8/10 (Theme: Egypt; save as journal8.html)
Due (WEDNESDAY 10 PM): FINAL VERSIONS of desktop and mobile jokes.
Quiz 8
Read: Castro 18
Ajax (Asynchronous JavaScript and XML)
Basic (if not slightly boring... intro from Lynda.com)
More interesting intro with Leo Laporte & Jeff Kee
Videos at Yahoo YUI Theater
JQuery image gallery & lightbox solutions
MediaBox Advanced (MooTools)
MooTools Demos
Ajax Frameworks (full list + extras)
JQuery
MooTools
Prototype
Javascript Part II:
Use the Date object to return today's date
Pop-up window with functions
Geoff McGregor's explanation of how Math.round() and Math.floor() work.
Random banner graphic
Random audio file player
Another random audio file player: Bamboo Soul (read more about the
Bamboo Soul technique in the December 2002 issue of Electronic Musician magazine)
Javascript for creating a slideshow [example 1] [example 2]
[Lab assignment 8/10] Due (TUESDAY, 12 noon): Rough draft of your joke (Flash version) with one custom sound effect attached to a button. It is acceptable to start your custom effects using sounds from the Soundtrack Pro and/or Garage Band libraries. You may also create your own sounds (record or synthesize) from scratch.
March 20-21 Week 10 Lab
Flash joke critique (this exercise will be a part of your project grade).
Due (MONDAY 10 PM): Journal 9/10 (Theme: WWF wrestling; save as journal9.html)
Due (TUESDAY 10 PM): Final version of your Flash joke
Quiz 9
Site planning & building:
Your T284 site (preparing this final project)
Information architecture
*@#!! browsers!!
SEO (Search Engine Optimization)
King Google: stats 1 & stats 2
How Google makes the web searchable
writing <meta /> tags
Add a site to Google: link 1 || link 2
How to block your site: meta and/or robots.txt
March 27-28 Week 11 Lab
T284 site planning
Google best practices for SEO (PDF)
Elizabeth Castro chapter 15 on CSS lists
Due (MONDAY 10 PM): Journal 10/10 (Theme: World War I; save as journal10.html)
Usability testing: Steve Krug's Usability Evaluation
[Lab assignment 9/10] Due (TUESDAY, 10 PM): Create a page named research.html and add the following information to it:
• The URLs of three sites you admire and a paragraph that explains why the site is significant to you, how you might borrow ideas for your final project, and so on.
• <meta name="description" /> tag for your T284 home page (index.html). Write the description in the body of research.html; you can move this to an actual meta tag when you create your final index.html.
• Site Map hierarchy with descriptive page titles styled as a CSS list. For your description meta tag, follow Google's guidelines on PDF pages 4-5. Use XHTML list tags to structure your hierarchy.
April 3-4 Week 12 Lab
Usability testing workshop
Krug's Trunk Test
Details on the Usability test report.
Quiz 10
Guest speakers on mobile development (iPhone, iPad, Android)
Mobile Game & App Development
GameSalad (iOS)
GameSalad Arcade (lots of project demos)
Corona SDK (iOS & Android)
Corona educational licensing
Adobe AIR (Adobe Integrated Runtime)
[Lab assignment 10/10] Due (TUESDAY, 10 PM): Re-read chapters 6 & 7 in the Krug book. Develop three site ID concepts (as images), three taglines (as text) and three welcome blurbs (as text). Include all of these in a single document (homepage-concepts.html); post to your T284 site and link from your index.html.
April 10-11 Week 13 Lab
Development lab: T284 site work day
April 17-18 Week 14 Lab
Development lab: T284 site work day
DUE: T284 web site home page sketch, info architecture, homepage template draft in XHTML & CSS. (These are all part of your overall project grade)
Open period to work on your usability report, T284 site, leftover lab asignments, etc.
We will meet in Wylie 125; not Radio-TV as usual
Campus map with Wylie Hall
April 24-25 Week 15 Lab
Development lab: T284 site work day + critique exercise
DUE: complete T284 site homepage and rough drafts of ALL content pages. (This is part of your overall project grade)
April 27: FINAL DUE DATE FOR WEEKLY LAB ASSIGNMENTS (Friday @ 10 pm)
Usability report due by
5 PM on Monday, April 30
Deliver your report via Oncourse/Assignments2
May 1 Finals Week
Final T284 web site due by 5 PM on Tuesday,
May 1
Once this is posted online it is turned in. Remember to write a 500-word "postmortem" statement that describes the tutorial you completed and how the new techniques that you learned were integrated into your final site. See Grading for full details on this assignment.