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



Download 83.39 Kb.
Date05.08.2017
Size83.39 Kb.
#26981


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

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


  1. Why do we use the getAttribute() and setAttribute() methods?

  2. What are event handlers?

  3. Give an example of an event handler.

  4. Define childNodes, firstChild, and lastChild properties.

  5. What property do we use to access the text within an XHTML element?

  6. What is meant by graceful degradation of a JavaScript?

  7. What is one good way to make sure that our JavaScripts are unobtrusive to the page?

  8. How can we write scripts that are backwardly compatible?

Week 3. Study Questions


  1. What is one way that the author’s image gallery degrades gracefully?

  2. Why is it such a bad idea to use the javascript:: protocol in anchor tags?

  3. What is the resulting data type returned by the getElementsByTagName() method?

  4. How does the author remove the inline event handlers and still manage to make the links work?

  5. Why does the author create an addLoadEvent() function?

  6. Why does the author dislike the use of the onkeypress event handler?

  7. What are some differences between the DOM Core and the HTML DOM?

  8. The author disapproves of the document.write() method; why?

  9. What are three ways to dynamically add content to a web page?

  10. What is one argument against the use of the innerHTML property?

Week 4. Study Questions


  1. Explain the concept of progressive enhancement.

  2. What property allows JS to change an element’s presentation?

  3. Why is placing information in tag attributes a good idea?

  4. How can you create an array with all tags in the current document?

  5. Create a flowchart of the abbreviation display widget.

  6. What is the purpose of the accesskey attribute?

  7. What is an accessibility statement?


Week 6. Study Questions


  1. Define the functionality of the setTimeout() function.

  2. Define the functionality of the setInterval() function.

  3. How do you stop a setInterval()?

  4. Define recursion.

  5. Define Math.ceil(), Math.round(), and Math.floor()



Week 8. Study Questions


  1. Define the steps in putting together the JayScript and the Domsters website.

  2. Why does the author separate the CSS into several external files?

  3. What are some strategies and techniques used in form validation?

  4. What is Ajax?

  5. Define the term asynchronous.

  6. 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




Download 83.39 Kb.

Share with your friends:




The database is protected by copyright ©ininet.org 2024
send message

    Main page