Rebuilding...

Multimedia Design: Spring 2010 Syllabus

BMCC MMP 200

Borough of Manhattan Community College
The City University of New York
Multimedia Programming & Design

Course Number: MMP 200
Course Title: Multimedia Design
Instructor: Matthew Belanger
Semester: Spring 2010
Lecture Hours per Week: 2
Lab Hours per Week: 2
Credits: 3

A. Description

Building on the principles learned in Introduction to Multimedia, students will learn to manipulate graphics and text in more sophisticated ways for use in print layout as well as multimedia. An emphasis will be placed on design concepts for the creation of web pages.

B. Prerequisites

Prerequisite: MMP 100
Co-requisite: MAT 051
Basic Skills: ENG 088, ESL 062, ACR 094, MAT 010/011

C. Student Learning Objectives

By the end of the course students will be expected to:
• Demonstrate an ability to work with web standards.
• Analyze and implement the elements that make up an effective interface design.
• Design a complete website that implements XHTML and CSS web standards.
• Create a Flash-based project that incorporates multimedia elements.

D. Readings

Required Texts
Title: The Essential Guide to CSS and HTML Web Design
Author: Craig Grannell
Publisher: friends of ED
ISBN: 9781590599075

Recommended Texts
Title: Flash CS3 Professional for Windows and Macintosh (Visual QuickStart Guide)
Author: Katherine Ulrich
Publisher: Peachpit Press (Prentice Hall)
ISBN: 9780321502919

Additional readings may be assigned by the instructor.

E. Evaluation and Requirements of Students

Grading
• Class and Homework: 40%
• Midterm Project: 20%
• Final Project: 30%
• In Class Performance and Attendance: 10%

Assignments must be handed in on time. Points will be deducted on work handed in late. Assignments may not be accepted for grading if they are late.

Use of Technology
• Software Adobe Creative Suite 3 including Flash Professional, DreamWeaver, Photoshop, Illustrator, Sound Forge.
• Hardware Portable media for storing projects, such as a flash drive or CD ROMs will be necessary. Students will also load their projects onto the MMP server.

F. Attendance Policy

The College’s attendance policy states “At BMCC, the maximum number of absences is limited to one more hour than the number of hours a class meets in one week. In the case of excessive absence the instructor has the option to lower the grade or assign an ‘F’ or ‘WU’ grade.”

G. Disability Accommodation Policy

Students with disabilities who require reasonable accommodations or academic adjustments for this course must contact the Office of Services for Students with Disabilities (Room: N769; Telephone: 212-220-8180). BMCC is committed to providing equal access to all programs and curricula to all students.

H. BMCC Policy Statement on Plagiarism

Plagiarism is the presentation of someone else’s ideas, words, or artistic, scientific, or technical work as one’s own creation. Using the idea or work of another is permissible only when the original author is identified. Paraphrasing and summarizing, as well as direct quotations, require citations to the original source. Plagiarism may be intentional or unintentional. Lack of dishonest intent does not necessarily absolve a student of responsibility for plagiarism.

Students who are unsure how and when to provide documentation are advised to consult with their instructors. The library has guides designed to help students to appropriately identify a cited work. The full policy can be found here.

I. Outline of Topics

1. Process of Design
• Design Brief (Statement of Goals)
• Analysis of Design Goals
• Research
• Specification
• Conceptualization
• Development
• Testing
• Implementation
• Evaluation

2. Designing for Objects and Systems
• Design Patterns
• Elements of Visual Design
• Typography
• Design for Time-Based Medium
• Designing with Sound

3. Information Architecture (Content Organization)
• Classification Schemes and Metaphors
• Complex Structures

4. Interaction Design (Usability and Prototyping)
• Interactive Tools
• Interactive Structures

5. Content and Presentation
HTML, XML, and XHTML
CSS

6. Creating Dynamic Content
• Client Side
• Server Side

7. Web Platforms
• Desktop and Mobile
• Mac and Windows
• Browsers

8. Content Management
• Subversion
• Content Management Systems

J. Office Hours

Contact me to schedule an appointment. I am generally available before or after class.

K. Weekly Breakdown

Week 16 | Class 29 | May 20

1. Final Projects Due

Week 15 | Class 28 | May 13

1. Work On Final Projects

Week 15 | Class 27 | May 11

1. Work On Final Projects

Week 14 | Class 26| May 6

1. Work On Final Projects

Week 14 | Class 25 | May 4

1. Work On Final Projects

Week 13 | Class 24 | April 29

1. TBD

› Week 13 | Class 23 | April 27

1. TBD

› Week 12 | Class 22 | April 22

1. HTML
HTML 5
  • <header>, <nav>, <section>, <article>, <aside>, and <footer> tags
  • <video> and <audio> tags
  • <canvas> tag
    • Processing.js
  • Client Side Storage

2. Assignment H: Read Chapter 8 of Textbook

› Week 12 | Class 21 | April 20

1. ActionScript
• Classes, Encapsulation and Inheritance
Object Oriented Programming with ActionScript
Classes
  • ActionScript Keywords, package, import, class
Class Interfaces
  • Class Namespaces, public, private
Creating a Class
  • Document Class
  • Symbol Class
  • Constructors
Inheritance
  • ActionScript Keyword, extends
Project Organization

› Week 11 | Class 20 | April 15

1. ActionScript
• Programatic Animation
  • Adjusting MovieClip Properties Over Time
  • ActionScript Tween Class
  • ActionScript TransitionManager and Easing Classes
The Graphics Class

› Week 11 | Class 19 | April 13

1. Programming Concepts
• Syntax, Logic, Math and Pseudo Code
• Sequential, Procedural and Object Oriented Programming Practices

2. ActionScript
Functions & Parameters (Arguments), trace();
• Commenting Your Code, //, /*
• Output Panel
Conditionals, if, else, else if, switch
Operators, . (Dot), + (Addition), – (Minus), *(Multiplication), / (Division), < (Less Than), <= (Less Than or Equal To), > (Greater Than), >= (Greater Than or Equal To), = (Assignment), ++ (Increment), — (Decrement) , (Equality), != (Inequality), = (Strict Equality), !== (Strict Inequality), && (Short-Circuit And), || (Logical Or)
Repeat Loops, for, for..in, for each..in, while, do..while
Functions
• Execution Order and Evaluating Expressions
• Variable and Function Scope
Arrays, Constructor, push(), pop() and length
DisplayObject
Sprite and MovieClip
DisplayObject Properties, x and y, scaleX and scaleY, width and height, rotation, alpha and visible
Events and Event Handling
Event.ENTER_FRAME
MouseEvent
• DisplayObject Methods, startDrag() and stopDrag()

› Week 10 | Class 18 | April 8

1. Flash
• Using Premade Audio & Video Players
• Embedding Youtube video, etc.

2. HTML
• New tag, <iframe>

3. ActionScript
Variables
Data Types, Number, String, Boolean, etc.
Syntax
• Testing Your Movie
• File Types, swfs vs. flas

› Week 10 | Class 17 | April 6

1. FTP
File Transfer Protocol
FTP Clients
   • Windows & Mac
     • Adobe Dreamweaver
     • Internet Explorer & Windows Explorer
     • FileZilla
   • Windows
     • CuteFTP
     • SmartFTP
   • Mac
     • Fetch
     • Fugu
     • Transmit
MMP FTP Accounts

2. Work on Midterm
• Finish Midterm
• Upload Midterm to your FTP Account
Email me the link

› Week 9 | Class 16 | March 25

1. Work on Midterm
• Due April 6

› Week 9 | Class 15 | March 23

1. The Flash Platform
Platform
ActionScript 1.0, 2.0 and 3.0
Adobe Flash Player
Adobe Flash CS3 / CS4
Adobe Flex Builder
Adobe AIR
Flash Media Server

2. Adobe Flash CS3 Interface
• Stage, Timeline and Properties Panels
• Design, Align, Color and Transform Panels
• Creating & Saving A New Document & Basic Document Settings
• Symbols, Buttons and Movie Clips
• Library Panel
• Symbol Names vs. Instance Names
• Actions Panel
• Help Panel

3. Flash
• Timeline Animations
  • Motion Tween (Classic Tween in CS4)

4. Work on Midterm
• Due April 6

› Week 8 | Class 14 | March 18

1. E-Commerce
PayPal
   • Website Payments Standard
   • Website Payment Pro
Merchant Accounts

1. Page Layout
• Working with Multiple (Nested) <div>‘s
• Understanding the CSS float Property

3. Assignment G: Read Chapter 7 of Textbook

› Week 8 | Class 13 | March 16

3. Assignment G: Due March 16
• Work on your Wireframes in Class
• Use Gliffy
• When you save your Wireframe you’ll be asked to create an account
• Be sure your Wireframe has been made public
• Send me the link to your Wireframe

› Week 7 | Class 12 | March 11

1. CSS
• Styling Tables

2. Pre-Planning a Website
• Concepts
• Wireframes
• Design Mockups

3. Assignment G: Due March 16
• Create a Wireframe for Your Midterm

› Week 7 | Class 11 | March 9

1. Hyperlinks & Navigation
• Review Last Week’s Topics
CSS Horizontal Dropdown Menu

2. HTML
• Creating Tables
• New tags, <table>, <tr>, <td>, <th>, <thead>, <tbody>, <tfoot>

› Week 6 | Class 10 | March 4

1. Hyperlinks & Navigation
• Review Last Week’s Topics
• Continue In Class Example
• Links with JavaScript

2. Assignment G: Read Chapter 6 of Textbook

› Week 6 | Class 9 | March 2

1. Hyperlinks & Navigation
• Review Last Week’s Topics
• Continue In Class Example

2. Assignment F: Due March 4
• Start thinking about the midterm. Write a paragraph proposal of what you’d like to produce. Your proposal should include an explanation of what you’d like to do. Strive to make use of several of the techniques we’ve learned in class and from the readings. We’ll discuss your proposals in Thursday’s class.

› Week 5 | Class 8 | February 25

1. Finish and Turn In Assignment D
• Turn in on Flash Drive

2. Hyperlinks & Navigation
Hyperlinks
• Link Paths
  • Absolute Path vs. Relative Paths
  • Internal Page Links
• Inline Links
• Site Navigation, Primary / Global Navigation
• Sub-Navigation
• Search

3. HTML, XML and XHTML
• <a> title and target Attributes

4. CSS
• Link States
  • Pseudo Classes, link, visited, hover, focus, active

› Week 5 | Class 7 | February 23

1. Continue Working on Assignment D

2. Assignment E: Read Chapter 5 of Textbook

› Week 4 | Class 6 | February 16

1. Javascript
• Review Last Week’s Topics

2. Assignment D: Due February 23
• Make a Fan Page (Could be for a Video Game, TV Show, Celebrity, Politician or Personal Hero)
• Create an XHTML document with the XHTML 1.0 Transitional Doctype
• Use <div> tag(s) to contain group(s) of elements
• Use <p> tag(s) to contain block(s) of text
• Use at least 2 Heading tags, <h1> – <h6>
• Create at least 1 ordered or unordered list using the <ul>, <ol>, and / or <li> tags
• Link to other sites / pages using the <a> tag
• Include at least 2 images by using the <img> tag
• Optionally use Javascript to randomize your images or create a slideshow
• Use internal or external CSS to style your document by using the <script> or <link> tags
• Validate your HTML here.

› Week 3 | Class 5 | February 11

1. Color
• Review Last Week’s Topics

2. Images
• Review Last Week’s Topics

3. Javascript
Javascript and it’s Syntax
Variables, Statements, Functions
Objects, Properties and Methods
DOM, DOM Scripting, getElementById
• Image Randomizer and Slideshow

4. In Class Demonstration
Download

› Week 3 | Class 4 | February 9

1. Typography
• Review Last Week’s Topics

2. Color
Color Theory
Color Wheel
• Color Systems, Additive vs. Subtractive
• Color Schemes, Monochromatic, Analogous, Complementary, Split-Complementary and Triadic
• Color Tools, 4096 Color Wheel and Color Scheme Chooser
Web Safe Colors
RGB Color vs. Hexidecimal Color

3. Images
• Role and Prevalence of Images on the Web
• Image File Formats, JPEG, GIF, PNG
Photoshop Save for Web and Devices
• Image Dos and Don’ts, Using Images for Text, Busy Images, Lack of Contrast
• Balancing Image Quality and File Size
• Copyright and Licensing Issues

4. HTML, XML and XHTML
• Review Last Week’s Topics
• New Tag, <img>
• Sizing Images in HTML, height and width Attributes

5. CSS
• Review Last Week’s Topics
• Styling Images with CSS
Styling Backgrounds, background-color, background-image, background-repeat, background-position

6. Assignment C: Read Chapter 4 of Textbook

7. In Class Demonstration
Download

› Week 2 | Class 3 | February 4

1. Typography
Serif, Sans Serif and Monospace
• Letter Spacing, Tracking vs. Kerning
• Line Spacing, Leading
Lorem Ipsum / Greek Copy

2. HTML, XML and XHTML
• Review Last Week’s Topics
HTML Entities
• Quotations, <blockquote>, <q> and &quot;
• New Tags, <span>

3. CSS
• Review Last Week’s Topics
CSS Type Spacing Properties, letter-spacing, word-spacing, line-height
• Ordered and Unordered Lists, list-style
• Drop Caps
• Pull and Block Quotes

4. Assignment B: Read Chapter 3 of Textbook

5. In Class Demonstration
Download

› Week 2 | Class 2 | February 2

1. HTML, XML and XHTML
• Review Last Week’s Topics
• Basic Tags, <html>, <head>, <title>, <meta>, <link>, <script>, <style> and <body>
• Additional Tags, <p>, <strong>, <em>, <h1> – <h6>, <br>, <div> and <a>

2. CSS
• Review Last Week’s Topics
The Box Model, margin, border, padding, content
• Working with Type
° Web Safe Fonts
° CSS Font Properties, font, font-family, font-size, font-style, font-variant, font-weight

3. Introduction to W3C and Web Standards
W3C
Doctypes
Validation
Accessibility

4. Introduction to Dynamic Content
• Client-Side: Java, JavaScript and Flash
• Server-Side: PHP, JSP, ASP / .NET, ColdFusion and Ruby on Rails
• Databases

5. Introduction to Platform Considerations
• Desktop vs. Mobile, Mac vs. Windows, Browsers

› Week 1 | Class 1 | January 28

1. Introductions

2. Class Structure and Overview

3. History of the Internet

Internet History
ARPANET
Telnet and CompuServe
TCP/IP
NIC and DNS
HTTP
Email and WWW
Vannevar Bush and As We May Think
Douglas Engelbart and Hypertext
Mosaic Web Browser
Netscape Navigator, Mozilla Project and Firefox
Internet Explorer
WebKit, Safari and Google Chrome
Browser Wars

4. Introduction to Web Design
• Idea Development and Concepting
• Information Architecture, Site Maps and Wireframes
• Interaction Design, Prototyping and Usability Testing
• Design
• Develop
• Validation, Testing and Debugging
• Launch

5. Introduction to HTML, XML and XHTML
HTML
XML
XHTML
Semantic HTML
• Tags, Attributes and Elements
HTML attributes: id vs. class

6. Introduction to CSS
CSS and it’s Syntax
Class, ID, Group, and Contextual Selectors
• Internal vs. External CSS

7. Assignment Aa: Email me at prof@fatbits.net. Please include the course number (MMP200) and your full name in the subject. Feel free to include links to your work in the body.

8. Assignment Ab: Read Chapters 1 and 2 of Textbook

L. Resources

W3Schools HTML Tutorial
W3 HTML Validator
W3Schools CSS Tutorial
W3 CSS Validator
• Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

BMCC Main Page