The Art Institute of Atlanta
IMD 315 Designing Interactive Interfaces
Section A Winter 2009
Course Outline
Table of Contents
COURSE DESCRIPTION ....................................................................................................................... 3
Credits ................................................................................................................................................. 3
Prerequisites ........................................................................................................................................ 3
OBJECTIVES .......................................................................................................................................... 3
COURSE INFORMATION ........................................................................................................................ 3
Textbooks ............................................................................................................................................ 3
Supplemental Materials........................................................................................................................ 3
Technology .......................................................................................................................................... 3
Course Online ...................................................................................................................................... 3
Room/time ........................................................................................................................................... 4
Instructor.............................................................................................................................................. 4
COURSE GRADING ............................................................................................................................... 4
Assignments ....................................................................................................................................... 4
Quizzes & Exams................................................................................................................................. 4
Grading Scale ..................................................................................................................................... 4
SUBMITTING ASSIGNMENTS ................................................................................................................ 4
Web Server ......................................................................................................................................... 5
Late Assignments ............................................................................................................................... 5
Exams and Quizzes ............................................................................................................................ 5
Grading Policy ................................................................................................................................... 5
AiA ATTENDANCE POLICY .................................................................................................................... 5
Course Attendance Policy .................................................................................................................... 5
Attendance Appeals Process ............................................................................................................... 5
ACADEMIC HONESTY ........................................................................................................................... 5
DISCLAIMER ......................................................................................................................................... 6
SCHEDULE.............................................................................................................................................. 7
STUDY QUESTIONS ............................................................................................................................... 9
Week 1. Study Questions .................................................................................................................... 9
Week 2. Study Questions .................................................................................................................... 9
Week 3. Study Questions .................................................................................................................... 9
Week 4. Study Questions .................................................................................................................... 9
Week 6. Study Questions .................................................................................................................... 9
Week 8. Study Questions .................................................................................................................. 10
ASSIGNMENTS ..................................................................................................................................... 10
Assignment 1. Course Jump Page ..................................................................................................... 10
Marking Criteria ............................................................................................................................ 10
Assignment 2. Image Gallery ............................................................................................................. 10
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
1
Marking Criteria ........................................................................................................................... 10
Assignment 3. Dynamic Design.......................................................................................................... 10
Marking Criteria ............................................................................................................................ 10
Homework (50pt. Each) ..................................................................................................................... 10
Please note: The contents of this course outline may be revised by the instructor during the quarter.
Changes may be made to facilitate the
students’ achievement of the competencies
for the course. The Art Institute of Atlanta
IMD 315 Designing Interactive Interfaces
Section A
Course Outline, Winter 2009
COURSE DESCRIPTION
Students refine their interactive design skills with emphasis on programming the functionality of web
interfaces. Concepts covered include: introductory programming skills, best practices for programming
with existing web standards, and utilizing existing code libraries for developing engaging user interfaces.
Credits
4 Credits, 6 Hours
Prerequisites
IMD 200 Information Architecture
IMD 210 Fundamentals of Scripting Languages
OBJECTIVES
Upon completion of this course, you should be able to:
o
o
o
o
o
o
o
o
Explain the concepts behind the Document Object Model (DOM) .
Draw and define the DOM tree for a typical web page.
Describe the importance of the "id" attribute of XHTML tags/nodes.
Define several distinguishing differences between the IE DOM and the W3C DOM.
List and define the core JavaScript Objects: Window, Document, Anchor, Links, Form, Image,
History, Location, Math, String, and Date.
Define and apply the fundamental components of programming: Variables, Arrays, Functions,
Parameters, Properties, Methods, Namespaces, Repeat Loops, Conditional Statements,
Expressions, and Operators.
Write and use scripts to manipulate the core JavaScript objects.
Apply JavaScript to detect: browsers, DOMs, plug-ins, and cookies.
COURSE INFORMATION
Textbooks
Jeremy, Keith. (2005). DOM Scripting: Web design with JavaScript and the Document Object Model
friends of ED. ISBN: 0-596-00576-8
Supplemental Materials
CD-R disks for file storage. A hosted web account with FTP access, and at least 10Mb of available
space.
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
2
Technology
Dreamweaver, Firefox, and Internet Explorer.
Course Online
http://www.myeclassonline.com
Room/time
Class:
Lab:
Day/Time
Room
Tuesday
8pm – 9:55pm
Wednesday
6pm – 9:50pm
328
208
Instructor
Name:
Naeem Smith
Phone:
678-362-3877
Email:
Naeem_smith@yahoo.com
Office hours:
Tuesday 7 – 8pm
COURSE GRADING
The final grade will be based on the following scheduled activities:
Assignments
Activity
Title
Points
%
Assignment 1
Jump page - website with working links to all coursework
200
20
Assignment 2
Assignment 3
Image gallery
Dynamic design
200
200
20
20
Four (4) quizzes
200
20
Mid-term exam
200
20
%
=< 60
Grade
F
Quizzes & Exams
Grading Scale
%
96-100
91-95
Grade
A
A-
%
88-90
84-87
81-83
Grade
B+
B
B-
%
78-80
74-77
71-73
Grade
C+
C
C-
%
66-70
61-65
Grade
D+
D
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
3
SUBMITTING ASSIGNMENTS
Every student will create a personal on-line “jump” page for this class. The URL for this page should be
emailed to the instructor by the end of the second week.
All assignments need to be uploaded to a web server by the stipulated time/date and linked from your
personal “jump” page. Each student’s jump page should have the following information on it:
o
o
o
o
o
o
Your Name
Course number, name and section
Instructor’s name
Assignment title
Student’s contact email link
Link to each assignment.
Late Assignments
If an assignment cannot be accessed online on the due date, it will not be graded (resulting in a 0 for the
assignment). If an assignment is not received on time, it cannot be resubmitted.
Exams and Quizzes
The midterm and the final exams must be taken at the scheduled time/date. Failure to appear for these
exams will result in a score of ‘0’ for the corresponding test. Similarly, if you are absent or late on the day
of a quiz, you will not be able to take the quiz and will receive a “0” for the corresponding quiz.
Grading Policy
Please note that per the department policy, in order to take the portfolio class and graduate, all students
in the Interactive Media Design program need to have a grade of C or higher in all core courses (courses
beginning with IMD).
AiA ATTENDANCE POLICY
It is the goal of this policy to improve the academic performance of students in the classroom by stressing
the importance of course attendance and reinforcing the work-ready expectations of employers for
employee attendance.
Students should be prepared to start the quarter the first day of classes and to drop/add courses early in
the first week of the quarter to minimize absences.
The following attendance requirements are in addition to and amend those currently published in the AIA
Student Handbook and Daily Planner.
Course Attendance Policy
o
o
o
Students are required to attend all class meetings, to arrive on time, and to stay for the full duration
of the class.
Students arriving 20 minutes after the start of each class will be marked absent. Students who leave
class before the class is over and without the approval of the instructor will be marked absent.
Students who accumulate more than three absences may be dropped from the course and a grade
of “FS,” Fail/Suspension, will be recorded for the course. Students who are suspended receive no
refund for the course.
There are no excused absences. Students may verify their attendance with the instructor of the course.
In the event a student is suspended from a course and believes an error in recording attendance has
been made, he or she should first contact the instructor.
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
4
Attendance Appeals Process
Students may appeal a course suspension. Such appeals must be made in writing to the Registrar.
Appeals will only be considered when the absences were beyond the control of the student and all
absences are fully documented.
ACADEMIC HONESTY
As a member of the academic community, students are expected to recognize and uphold standards of
intellectual and academic integrity. Under all circumstances, students are expected to be honest in their
dealings with faculty, administrative staff, and fellow students. In speaking with any member of the
college community, students must give an accurate representation of the facts at hand. Students are
required to refrain from any and all forms of dishonorable or unethical conduct related to academic work.
In class assignments, students must submit work that fairly and accurately reflects their level of
accomplishment. Any work that is not the product of the student’s own efforts is considered dishonest.
Engaging in academic dishonesty can have serious consequences for the students.
Academic dishonesty includes, but is not limited to, the following:
o
o
o
o
o
Cheating
Plagiarism
Submission of the same work in two or more classes without prior approval of the faculty members
of the classes involved.
Submission of any work (full or partial) not actually produced by the student.
Submission of any work without clear acknowledgment (reference/credit) of the original author or
creator of work.
Students proven to have been dishonest in submitting or presenting their work in this class will receive
the F (fail) grade for the class. Record of this incident will also be kept in the student’s file. If such an
incidence occurs and you would like to file a written appeal, you may do so with the academic director of
the department.
DISCLAIMER
All work designed and developed in this class should carry the following statement (typically displayed at
the bottom of the page):
This interactive media project was created for educational purposes at The Art Institute of Atlanta
and is in no way intended for commercial gain or as a source of public
information.SCHEDULE
Date
Reading
Completed Before
Class
Tues.
(wk 1)
Class
Wed.
(wk 1)
Lab
Tues.
(wk 2)
Class
DOM Scripting
Ch. 1: A Brief
History of
JavaScript
Ch. 2 : JavaScript
Syntax
Ch. 3: The
Document Object
Assignments Due
Topic/Activity
Introduction
The JavaScript language
Uses of JavaScript
The Document Object Model
(W3C)
Alerts and forms as testing tools
Accessing objects with
JavaScript
The different DOMs ( 0 - 2)
DOM Scripting
Ch. 4: A JavaScript
JavaScript core objects
Conditional statements
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
5
Date
Reading
Completed Before
Class
Assignments Due
Image Gallery
Ch. 5: Best
Practices
Topic/Activity
Loop statements
Comment statements
JavaScript operators
Event handlers
Quiz 1 (Ch. 4-5)
Wed.
(wk 2)
Lab
Tues.
(wk 3)
Class
Wed.
(wk 3)
Lab
Tues.
(wk 4)
Class
Wed.
(wk 4)
Lab
Jump page
DOM Scripting
Ch. 6:Image
Gallery Revisited
Ch. 7: Creating
Markup on the Fly
Create a JavaScript Image
Gallery
Dynamically generating web
pages using repeat loops.
createElement()
Non-inline event handlers
DOM core & HTML DOM
Quiz 2 (Ch. 6 & 7)
Assignment 1: Image
Gallery design comps
Image Gallery Revisited
CSS-DOM
Looping through DOM nodes
DOM Scripting
Ch 8: Enhancing
Content
Ch 9: CSS-DOM
Hiding and displaying content for
better information design.
Hide’n’seek script.
Midterm Review
Quiz 3 (Ch. 8 & 9)
Tues.
(wk 5)
Class
Wed.
(wk 5)
Lab
Tues.
(wk 6)
Class
Wed.
(wk 6)
Lab
Tues.
(wk 7)
Class
Wed.
(wk 7)
Lab
Tues.
(wk 8)
Class
Midterm Exam
Assignment 1: Image
Gallery
DOM Scripting
Ch. 10: Animated
Slideshow
Class Presentations and
Critiques:
click-through
Assign and discuss final project.
Practical animation
Using timers and intervals
Using existing code libraries.
Prototype.js, et al.
DOM Scripting
Ch. 11: Putting it
All Together
Site structure and page structure
CSS strategies
JavaScript organization
Form validation
Work on Assignment
DOM Scripting
Ch 12: The Future
of DOM Scripting
What is AJAX?
The XMLHTTP object
What is HiJAX?
Quiz 4 (Ch. 11 & 12)
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
6
Date
Reading
Completed Before
Class
Assignments Due
Topic/Activity
Wed.
(wk 8)
Lab
Work on final project.
Tues.
(wk 9)
Class
Critique current state of final
projects
Wed.
(wk 9)
Lab
work on implementing critique
suggestions
Tues.
(wk 10)
Class
Wed.
(wk 10)
Lab
Assignment 3:
Final site
Final Projects Due
Portfolio Show
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
7
STUDY QUESTIONS
Week 1. Study Questions
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
What is the Document Object Model (DOM)?
What is another name for JavaScript?
What is the difference between an interpreted and a compiled programming language?
Define the term “variable” as it relates to JavaScript.
What are statement operators and how are they used?
What is concatenation?
Write out an XHTML comment? A JavaScript comment?
List and define the data types available in JavaScript?
Define the purpose of a conditional statement.
Define the purpose of a repeat loop.
What is the difference between a local and global variable?
Give an example of when you might need to use a repeat loop.
What is a function?
What is a parameter or “argument” and how is it related to a function?
What are JavaScript operators and how are they used?
Week 2. Study Questions
16.
17.
18.
19.
20.
21.
22.
23.
Why do we use the getAttribute() and setAttribute() methods?
What are event handlers?
Give an example of an event handler.
Define childNodes, firstChild, and lastChild properties.
What property do we use to access the text within an XHTML element?
What is meant by graceful degradation of a JavaScript?
What is one good way to make sure that our JavaScripts are unobtrusive to the page?
How can we write scripts that are backwardly compatible?
Week 3. Study Questions
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
What is one way that the author’s image gallery degrades gracefully?
Why is it such a bad idea to use the javascript:: protocol in anchor tags?
What is the resulting data type returned by the getElementsByTagName() method?
How does the author remove the inline event handlers and still manage to make the links
work?
Why does the author create an addLoadEvent() function?
Why does the author dislike the use of the onkeypress event handler?
What are some differences between the DOM Core and the HTML DOM?
The author disapproves of the document.write() method; why?
What are three ways to dynamically add content to a web page?
What is one argument against the use of the innerHTML property?
Week 4. Study Questions
34.
35.
36.
37.
38.
39.
40.
Explain the concept of progressive enhancement.
What property allows JS to change an element’s presentation?
Why is placing information in tag attributes a good idea?
How can you create an array with all <abbr> tags in the current document?
Create a flowchart of the abbreviation display widget.
What is the purpose of the accesskey attribute?
What is an accessibility statement?
Week 6. Study Questions
41.
42.
43.
44.
Define the functionality of the setTimeout() function.
Define the functionality of the setInterval() function.
How do you stop a setInterval()?
Define recursion.
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
8
45. Define Math.ceil(), Math.round(), and Math.floor()
Week 8. Study Questions
46.
47.
48.
49.
50.
51.
Define the steps in putting together the JayScript and the Domsters website.
Why does the author separate the CSS into several external files?
What are some strategies and techniques used in form validation?
What is Ajax?
Define the term asynchronous.
What is the difference between AJAX and the authors term HiJAX?
ASSIGNMENTS
Assignment 1. Course Jump Page
Create a course web page for linking to all course assignments. Required links include:
o
Course Information
o
Lab exercises
o
Assignments
Marking Criteria
Total Points: /50
o
Usability and clarity of purpose (30)
o
Quality of visual design (20)
Assignment 2. Image Gallery
Create an image gallery with no less than 30 images. Use the techniques demonstrated in chapters 4
and 6 of the textbook DOM Scripting. Please try to create a cohesive experience utilizing appropriately
thematic images, layout and design.
Marking Criteria
52. Total Points: /200
o
Usability and clarity of action (50)
o
Quality of visual design & presentation (75)
o
Quality code with comments and formatting (75)
Assignment 3. Dynamic Design
Submit a proposal for a website with no less than 6 pages. Your website must include the following
requirements:
o
o
o
o
o
o
o
o
o
Hide and Show effect
Image Gallery
Form Validation
Table enhancement
External Library
Custom feature
Well commented code
Passes XHTML 1.0 Transitional, CSS, and Section 508 – WAI 1 & 2 validation
Works as intended in Firefox, IE, Safari, and Opera.
Marking Criteria
Total Points: /200
o
Functionality (100)
o
Well-formatted and commented code (50)
o
Implementation of all requirements (50)
IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta
9