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
Late Assignments 5
Exams and Quizzes 5
Grading Policy 5
AiA ATTENDANCE POLICY 5
Course Attendance Policy 5
Attendance Appeals Process 5
ACADEMIC HONESTY 6
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
Marking Criteria 10
Assignment 3. Dynamic Design 10
Marking Criteria 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:
-
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.
Technology
Dreamweaver, Firefox, and Internet Explorer.
Course Online
http://www.myeclassonline.com
Room/time
|
Day/Time
|
Room
|
Class:
|
Tuesday
8pm – 9:55pm
|
328
|
Lab:
|
Wednesday
6pm – 9:50pm
|
208
|
Instructor
Name:
|
Naeem Smith
|
Phone:
|
678-362-3877
|
Email:
|
Naeem_smith@yahoo.com
|
Office hours:
|
Tuesday 7 – 8pm
|
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
|
Image gallery
|
200
|
20
|
Assignment 3
|
Dynamic design
|
200
|
20
|
Quizzes & Exams
Four (4) quizzes
|
|
200
|
20
|
Mid-term exam
|
|
200
|
20
|
Grading Scale
%
|
Grade
|
|
%
|
Grade
|
|
%
|
Grade
|
|
%
|
Grade
|
|
%
|
Grade
|
96-100
|
A
|
|
88-90
|
B+
|
|
78-80
|
C+
|
|
66-70
|
D+
|
|
=< 60
|
F
|
91-95
|
A-
|
|
84-87
|
B
|
|
74-77
|
C
|
|
61-65
|
D
|
|
|
|
|
|
|
81-83
|
B-
|
|
71-73
|
C-
|
|
|
|
|
|
|
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:
-
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
-
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.
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:
-
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
|
Assignments Due
|
Topic/Activity
|
Tues.
(wk 1)
|
Class
|
DOM Scripting
Ch. 1: A Brief History of JavaScript
Ch. 2 : JavaScript Syntax
Ch. 3: The Document Object
|
|
Introduction
The JavaScript language
Uses of JavaScript
The Document Object Model (W3C)
|
Wed.
(wk 1)
|
Lab
|
|
|
Alerts and forms as testing tools
Accessing objects with JavaScript
The different DOMs ( 0 - 2)
|
Tues.
(wk 2)
|
Class
|
DOM Scripting
Ch. 4: A JavaScript Image Gallery
Ch. 5: Best Practices
|
|
JavaScript core objects
Conditional statements
Loop statements
Comment statements
JavaScript operators
Event handlers
Quiz 1 (Ch. 4-5)
|
Wed.
(wk 2)
|
Lab
|
|
Jump page
|
Create a JavaScript Image Gallery
|
Tues.
(wk 3)
|
Class
|
DOM Scripting
Ch. 6:Image Gallery Revisited
Ch. 7: Creating Markup on the Fly
|
|
Dynamically generating web pages using repeat loops. createElement()
Non-inline event handlers
DOM core & HTML DOM
Quiz 2 (Ch. 6 & 7)
|
Wed.
(wk 3)
|
Lab
|
|
Assignment 1: Image Gallery design comps
|
Image Gallery Revisited
|
Tues.
(wk 4)
|
Class
|
|
|
CSS-DOM
Looping through DOM nodes
|
Wed.
(wk 4)
|
Lab
|
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
|
|
|
Midterm Exam
|
Wed.
(wk 5)
|
Lab
|
|
Assignment 1: Image Gallery
|
Class Presentations and Critiques:
click-through
Assign and discuss final project.
|
Tues.
(wk 6)
|
Class
|
DOM Scripting
Ch. 10: Animated Slideshow
|
|
Practical animation
Using timers and intervals
|
Wed.
(wk 6)
|
Lab
|
|
|
Using existing code libraries.
Prototype.js, et al.
|
Tues.
(wk 7)
|
Class
|
DOM Scripting
Ch. 11: Putting it All Together
|
|
Site structure and page structure
CSS strategies
JavaScript organization
Form validation
|
Wed.
(wk 7)
|
Lab
|
|
|
Work on Assignment
|
Tues.
(wk 8)
|
Class
|
DOM Scripting
Ch 12: The Future of DOM Scripting
|
|
What is AJAX?
The XMLHTTP object
What is HiJAX?
Quiz 4 (Ch. 11 & 12)
|
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
|
|
Assignment 3:
Final site
|
Final Projects Due
|
Wed.
(wk 10)
|
Lab
|
|
|
Portfolio Show
|
STUDY QUESTIONS
-
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
-
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
-
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
-
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 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
-
Define the functionality of the setTimeout() function.
-
Define the functionality of the setInterval() function.
-
How do you stop a setInterval()?
-
Define recursion.
-
Define Math.ceil(), Math.round(), and Math.floor()
Week 8. Study Questions
-
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:
-
Lab exercises
-
Assignments
Total Points: /50
-
Usability and clarity of purpose (30)
-
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
-
Total Points: /200
-
Usability and clarity of action (50)
-
Quality of visual design & presentation (75)
-
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:
-
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
-
Well-formatted and commented code (50)
-
Implementation of all requirements (50)