Overview
In this course, students learn how to animate objects on a responsive screen using HTML5, CSS3, & JS. Core motion-interactive principles such as transition, animate, transform (2d, 3d), scale, rotate, move, skew, velocity, acceleration, friction, easing, springing, gravity, mass, momentum, and collision detection will be introduced.
Instructors
| Name | Calendar | |
|---|---|---|
| Jervis Thompson | st966rc2@drexel.edu | |
| Troy Finamore | twf23@drexel.edu |
Helpful Links
Requirements
- WBDV240
- INFO152, CS143, or CS171
- HTML & CSS - design and build websites by Jon Duckett
- Mobile First by Luke Wroblewski
- Responsive Web Design by Ethan Marcotte
- Animation in HTML, CSS, and Javascript by Kirupa Chinnathambi
- A Pocket Guide to CSS Animations by Val Head
- NOTE: Most if not all of these books are available online at http://www.library.drexel.edu/ Search for book title.
- Self hosted web domain
- Removable and/or Online Storage
Learning Objectives
By the end of the course students will be able to animate objects on a responsive screen using basic motion-interactive principles (transition, animate, transform, scale, rotate, move, skew, velocity, acceleration, friction, easing, springing, gravity, mass, momentum, and collision detection) with code using object-oriented programming techniques.
Course Format
- Homework Review
- Software Tutorial
- Homework Overview
- In-class lab time
Communication
Any and all course email to instructor(s) must be sent from student drexel email account with "wbdv242" somewhere in the meaningful subject area. (i.e. subject = "wbdv242-001 Help with float"). Students must keep a copy of all email correspondence for their records.
Appointments
- Review instructor Google Calendar.
- Send instructor an email with the info of an open time slot that's good for you.
- NOTE: Instructors require AT LEAST 48 hours notice to schedule an appointment
- Instructor will email you back with a confirmation and update his/her calendar.
Midterm Project
Full Size Design Comps
Due Midnight before Week 5
Description: Fully polished static web design graphics (*.png, 72dpi, RGB mode) that look like final screen grabs (320w x 480h+), (768w x 1024h+), (1280w x 1024h+). Each comp will have detailed explanations of what will be hover-able, click-able, what will animate and how (i.e. interactive animations, looping animations).
Final Project
Static HTML portfolio website
Due Midnight before Week 11
Description: Choose your favorite performing artist or band (living or dead, any genre) and develop an HTML5 responsive interactive animated promotional piece for a real or fictional concert that promotes the uniqueness of said artist. This promotional piece must be functional on Smart Phones, Tablets, and Desktop Browsers. This web page will be engaging and pleasing to the eye as determined by the class professor. At least one looping animation is required. At least one interactive animation is required. At least one interactive sound is required. One button that goes to event location is required. One button that goes to the artist web site is required.
Grading criteria:
- Code Quality
-
There are best practices listed under all of the lecture notes sections. Be sure to follow the rules and apply our techniques from class.
- Validate your code, (validator.w3.org) there should be zero errors.
- Follow the best practices listed on the lecture notes page regarding file names, characters and coding styles.
- Your code should be legible and easy to navigate.
- Your code should meaningful coder comments wherever possible.
- Functionality
-
Everything needs to work. All links, images, rollovers, audio, animations etc. If it's on your web page, it should be working properly.
- Design
-
This web page will be engaging and pleasing to the eye as determined by the class professor.
Enhancements are great. Changing something because you didn't get around to implementing it or couldn't figure it out are not valid excuses. If it was in your midterm it should be in your final.
Grading Policy
Grading is based upon attendance, class participation, homework assignments (5 x 8 pts each = 40), midterm (20), and final project (40).
Homework Projects, based upon skill sets covered in each lesson, will be due by midnight the night before the following class. Each homework assignment is graded based on technique, creativity and being submitted on time.
The dates your assignments are due are indicated clearly in this course outline. Assignments are due on those dates unless you have submitted a written request for an extension at least one class before the assignment is due. Late assignments receive a 50% reduction in points, no exceptions.
Homework and Project grades based upon three criteria, Specifications, Content, and Creativity, broken down as follows:
Specifications:
- Files/e-mails are named appropriately
- Assignments requiring email submission should be sent to your instructor according to the instructions listed per assignment. Submissions not following the correct format will not be accepted. No exceptions.
- Assignments meet project size/color requirements
- Assignments are completed on time
Content:
- Homework contains all requested elements
- Quality/Legibility of thumbnails/comps
Creativity:
- Level of detail in thinking
- Variety of ideas explored
- Focus on consistent strategy
Attendance Policy
Attendance is mandatory. Students are expected to attend all classes and strictly adhere to the project due dates. Lack of participation in class discussions will count against your grade.
Students are allowed ONE unexcused absence. If a student has more than one absence, his or her grade for the course will be reduced one letter grade. If a student has three or more absences, he or she will receive an F grade.
Arriving late to class will result in the loss of one point for each lateness.
Grading Percents
| Points | Grade |
|---|---|
| 100% or above | A+ |
| 95% to 99% | A |
| 90% to 94% | A- |
| 88% to 89% | B+ |
| 83% to 87% | B |
| 80% to 82% | B- |
| 78% to 79% | C+ |
| 73% to 77% | C |
| 70% to 72% | C- |
| 68% to 69% | D+ |
| 65% to 67% | D |
| 64% or below | F |
Student Responsibility
- Attend all classes
- Care about your work
- Make progress in the medium
- Help, cooperate and collaborate with your classmates
- Take risks
- Make mistakes
- Ask for Help
Academic Honesty Policy
Drexel University is committed to a learning environment that embraces academic honesty. Faculty, students, and administrators share responsibility for maintaining this environment of academic honesty and integrity, accepting individual responsibility for all actions, personal and academic. Each member of our community is expected to read, understand, and uphold the values identified and described in our "Academic Polices, Procedures and Regulations" as written in the official student handbook. Instances of academic dishonesty, such as cheating and plagiarism, will be dealt with appropriately.
American's With Disabilities
In compliance with Section 504 of the Rehabilitation Act of 1973, the Americans with Disabilities Act of 1990, and applicable federal and state laws, Drexel University ensures people with disabilities will have an equal opportunity to participate in its programs and activities. Members and guests of the Drexel community who have a disability need to register with the Office of Disability Services (ODS), if requesting auxiliary aids, accommodations, and services to participate in Drexel University’s programs. All requests for reasonable and appropriate auxiliary aids, academic adjustments, and services will be considered on a case-by-case basis and in a timely fashion.
Office of Disability Services3201 Arch Street, Suite 210
Philadelphia, PA 19104
Phone: 215.895.1401
TTY: 215.895.2299 (Reserved for those who are deaf or hard of hearing)
Fax: 215.895.1402
E-mail: disability@drexel.edu
Acknowledging Conditions and Obligations in Syllabus
The student acknowledges receipt of this syllabus and the information herein contained by continuing to attend classes and turn in assignments.