The Art Institute of Atlanta imd 315 Designing Interactive Interfaces Section a winter 2009

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

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	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:

• 
  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	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

Week 1. Study Questions

1. 
   What is the Document Object Model (DOM)?
   
2. 
   What is another name for JavaScript?
   
3. 
   What is the difference between an interpreted and a compiled programming language?
   
4. 
   Define the term “variable” as it relates to JavaScript.
   
5. 
   What are statement operators and how are they used?
   
6. 
   What is concatenation?
   
7. 
   Write out an XHTML comment? A JavaScript comment?
   
8. 
   List and define the data types available in JavaScript?
   
9. 
   Define the purpose of a conditional statement.
   
10. 
    Define the purpose of a repeat loop.
    
11. 
    What is the difference between a local and global variable?
    
12. 
    Give an example of when you might need to use a repeat loop.
    
13. 
    What is a function?
    
14. 
    What is a parameter or “argument” and how is it related to a function?
    
15. 
    What are JavaScript operators and how are they used?
    

Week 2. Study Questions

16. 
    Why do we use the getAttribute() and setAttribute() methods?
    
17. 
    What are event handlers?
    
18. 
    Give an example of an event handler.
    
19. 
    Define childNodes, firstChild, and lastChild properties.
    
20. 
    What property do we use to access the text within an XHTML element?
    
21. 
    What is meant by graceful degradation of a JavaScript?
    
22. 
    What is one good way to make sure that our JavaScripts are unobtrusive to the page?
    
23. 
    How can we write scripts that are backwardly compatible?
    

Week 3. Study Questions

24. 
    What is one way that the author’s image gallery degrades gracefully?
    
25. 
    Why is it such a bad idea to use the javascript:: protocol in anchor tags?
    
26. 
    What is the resulting data type returned by the getElementsByTagName() method?
    
27. 
    How does the author remove the inline event handlers and still manage to make the links work?
    
28. 
    Why does the author create an addLoadEvent() function?
    
29. 
    Why does the author dislike the use of the onkeypress event handler?
    
30. 
    What are some differences between the DOM Core and the HTML DOM?
    
31. 
    The author disapproves of the document.write() method; why?
    
32. 
    What are three ways to dynamically add content to a web page?
    
33. 
    What is one argument against the use of the innerHTML property?
    

Week 4. Study Questions

34. 
    Explain the concept of progressive enhancement.
    
35. 
    What property allows JS to change an element’s presentation?
    
36. 
    Why is placing information in tag attributes a good idea?
    
37. 
    How can you create an array with all tags in the current document?
    
38. 
    Create a flowchart of the abbreviation display widget.
    
39. 
    What is the purpose of the accesskey attribute?
    
40. 
    What is an accessibility statement?
    
    
    

Week 6. Study Questions

41. 
    Define the functionality of the setTimeout() function.
    
42. 
    Define the functionality of the setInterval() function.
    
43. 
    How do you stop a setInterval()?
    
44. 
    Define recursion.
    
45. 
    Define Math.ceil(), Math.round(), and Math.floor()
    

Week 8. Study Questions

46. 
    Define the steps in putting together the JayScript and the Domsters website.
    
47. 
    Why does the author separate the CSS into several external files?
    
48. 
    What are some strategies and techniques used in form validation?
    
49. 
    What is Ajax?
    
50. 
    Define the term asynchronous.
    
51. 
    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:

• 
  Course Information
  

• 
  Lab exercises
  
• 
  Assignments
  

Marking Criteria

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

1. 
   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:

• 
  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

• 
  Functionality (100)
  

• 
  Well-formatted and commented code (50)
  
• 
  Implementation of all requirements (50)
  

IMD 315 Designing Interactive Interfaces Section A Winter Quarter 2009 - Course Outline - The Art Institute of Atlanta

Directory: 2013 -> docs
2013 -> The Ministry of Education and Science of Ukraine
2013 -> #1 a lifesafer of virginia inc
2013 -> Name(s): your name here team or Group #(if applicable): Professor’s name
2013 -> Alcott Local School Council (lcs) Meeting Minutes
2013 -> Table Of Contents introduction 2
2013 -> Supplemental demographic information
2013 -> 【Education&Working Experience】