Introduction to Multimedia

• Course Title: Introduction to Multimedia (MMP 100-1304, 6295)
• Credits: 3
• Class hours: 2
• Lab hours: 2
• Day: Saturday
• Time: 1:00 PM – 4:55 PM
• Place: The Miles and Shirley Fiterman Hall, Rm 1006
• Dates: 27 August 2018 – 21 December 2018
• Instructor: Roy Vanegas

This course introduces students to the fundamentals of multimedia production, emphasizing the content (HTML) and presentation (CSS) components of a static web site. Using Git, students also learn how to revision control the development of a web site.

Using a hands-on approach, students learn the essentials of program design and authoring software in an integrated computer environment, and they’ll learn how to combine graphics, audio, video, and text to create programs.

None.

Upon successful completion of this course, students will be able to...

• hand code HTML markup for a web page that includes text, hyperlinks and images;
• create a multimedia website and upload it to a server;
• revision control the code of a web site using Git and GitHub;
• create CSS animations;
• use Photoshop to create, edit and manage images for multimedia applications;
• identify standards for using media that meet copyright law;
• incorporate media into a project that enhances the overall project;
• work with Photoshop for images;
• work with P5.js for programming;
• and, work with Audacity for audio.

Whether you use Windows or Mac, all the necessary software for this course is listed below. It’s all free and downloadable from their respective links.

GitHub (Mac and Linux)

All in-class examples, assignments, and help will be executed via GitHub. Download the client for your computer here.

Examples Repository

All of the code examples I share with you will be pushed to our class’ examples GitHub repo.

Browsers (Mac and Windows)^※

Download all the browsers available at Browse Happy. Some of the students in my more in-depth classes might also want Chrome Canary, Safari Technology Preview, Firefox Developer Edition, and Firefox Nightly. I use Chrome and Firefox in class.

File Transfer Protocol (Mac, Windows, and Linux)

To transfer files between our local machines and a server, we’ll use FileZilla.

Text Editor (Mac and Windows)

The code you write will require a text editor. Although there are many on the market, such as Brackets (open source), Sublime Text (nagware), and Visual Studio Code (open source), Atom (open source) is the only editor supported in class. (I can, however, help if you use Sublime Text.) It’s available for Mac and Windows from atom.io.

Fonts (Mac, Windows, and Linux)

In addition to the stock issue, monospace/fixed-width fonts included with your OS, here are a few more fonts to explore in your text editors:

• IBM Plex
• Ubuntu Mono
• Fira Mono^※
• Anonymous Pro^※
• Inconsolata^※

Audio Editor

Free and open source, Audacity is a multi-track audio editor that is cross-platform. Download it here, and then read about how to get and install the LAME codec.

Grading Formula

Your grade for this course will be computed entirely on the following formula:

1. Projects (75%)
2. Attendance (25%, or 100% if unexcused absences exceed 4)

Manage your time well; I do not accept late work.

There will be five projects, one due about every three weeks.

Important Note

Please, please do not try to negotiate a grade with me — before or after — any work due. By asking me to favor you (“I can’t have this class hurt my GPA,” “My student status depends on my doing well in this class,” or, “I need a B or better for my student loans”), you’re asking me to put you above your classmates. It’s a form of extortion, and I will remember your having asked me to treat you better than your peers.

The A Range

A (“Work of exceptional quality”)

Students who earn an “A” produce work that is impressive, goes beyond what is required of the course, and exemplifies a superb work ethic. Their work is exceptional.

A- (“Work of high quality”)

In the “A-” range, a student has performed very closely to the level of his or her “A”-level counterpart, but perhaps has missed too many classes, showed up to class late too often, or submitted an assignment/homework that was not “A”-level.

The B Range

B+ (“Very good work”)

Students earning grades of “B+” produce very good work. “B+” students’ work is logically organized, responds to assignments in thoughtful and distinctive ways, and offers a sound user experience. Minor coding and layout errors may be present, but these are under control and do not impede user experience or content.

B (“Good work; satisfies course requirements”)

Overall, “B” range students produce work with good results. He or she possesses a strong understanding of the course’s content and shows a high level of competence in the skill set taught in the course.

B- (“Below-average work”)

Students in the “B-” range are producing work that is above adequate but below average. Their work shows flashes of very good work, but, overall, is not compelling for a grade of a “B.”

The C Range

C+ (“Less than adequate work”)

Students earning a “C+” produce less than average assignments and demonstrate some success in engaging with the assigned material. Typical of a “C+” assignment, however, is a disjointed sense of content hierarchy and user experience in connection with the page. Generally these assignments contain general coding errors which create unwanted or negative rendering.

C (“Well below average work”)

In the “C” range, a student has show more than minimal progress to pass, but not quite on the level of a “C+” student.

C- (“Poor work; lowest possible passing grade”)

A student who earns a grade of “C-” has performed the bare minimum to pass the course. He or she has performed very near to that of a student who would typically fail, but has some basic understanding of important concepts related to the course. He or she has also shown some attempt at trying to grasp the material of the course. In essence, the student has produced work that shows evidence of minimal effort expended.

F (“Failure”)

Failing grades are earned by students who do not submit required work, produce incomplete work, do not take examinations (without prior notification and approval), or miss too much class. Grades of “F” are also earned by students who show no comprehension of the topics discussed in class and no forthcomingness to attempt to comprehend. Students who fail show no interest in learning, make no effort to remedy problem areas, are continually distracted in class by other students and/or mobile electronic devices, and interrupt class.

1. HTML/CSS project
2. JavaScript/p5.js project
3. Audio project
4. Video project
5. Animation project

• Where: The Miles and Shirley Fiterman Hall, Rm 1006
• Day: Saturday
• Dates: 27 August 2018 – 21 December 2018
• Time: 1:00 PM – 4:55 PM

Major Dates

• Saturday, 24 November 2018: No class
• Saturday, 15 December 2018: Final project presentations

In addition to the schedule below, the master CUNY calendar is available here.

Week	Topics	Project/Homework
1	Syllabus breakdown GitHub tutorial	Install all required software
2	An introduction to the web stack Intro to HTML?	None
3	Intro to CSS	None
4	Complete lectures on HTML and CSS FTP with Filezilla	Web project
5	Intro to JavaScript	None
6	More JavaScript Intro to P5.js	None
7	More P5.js	Programming project
8	Intro to Photoshop	None
9	More Photoshop	None
10	More digital imaging with Photoshop	Digital imaging project
11	Intro to Audacity	None
12	More Audacity	None
13	More on audio with DAWs, such as Cubase	Audio project
14	Intro to animation	None
15	More on animation	Animation project

• Consuming food in class. There is no eating inside our classroom, either during class or while on break. The smell of food is very distracting, even offensive to some, and can linger in a room. Eat before or after class. Drinks in covered containers, however, are allowed.
• Grading. I do not give grades — students earn them. The grade you earn is based strictly on a formula clearly listed in your online syllabus, under the Grading Standards section. Memorize the simple formula at the beginning of the semester so you always know where you stand, grade wise.
• Extra credit. There may be chances for extra credit. This will be made clear in the syllabus for your class, or via a message to the Google Group, once the semester has started.
• Seating arrangement. You will be seated in clusters, based on whether you use a computer in class or not, or which operating system you use. Students who do not — or rarely — use a computer in class will be grouped together, because they tend to prefer not to be distracted by surrounding computer users when taking written notes. Windows users will be grouped with other Windows users, and Mac users will be grouped with other Mac users. This makes it easy for users to help each other, and for me to help Windows and Mac users as a group. You are welcome to sit anywhere within your cluster.

You are reminded of the college’s academic integrity policy. Ensure all the work you submit is your own.

We will go over the following document in detail on the first day of class.

• Advice for Succeeding in Class (in Markdown)
• Advice for Succeeding in Class (in pdf)

The (New) General MMP100 Syllabus

• https://mmp100blog.wordpress.com/syllabus/

Tutoring

• Free tutoring provided by BMCC.

Atom

• The Atom Flight Manual.
• Learning Atom at Lynda.com.
• Atom Web Design Tutorials.

Sublime Text

• A tool that explains and helps users to create a Sublime Text preferences file.
• The official Sublime Text documentation.
• The unofficial Sublime Text documentation.

HTML

• The Sitepoint HTML Reference is a reference mainly for HTML4.01, but is very helpful, nonetheless.
• HTML5 Doctor is a tutorials/blog about HTML5.
• Web Fundamentals is a set of tutorials and tools from Google.
• The HTML5 Boilerplate provides users with a generic template for web projects, and is configurable online.

CSS

• Eric Meyer’s base/reset CSS is a reliable way of cancelling out browser styles.
• Chris Coyier’s CSS-Tricks provides CSS-based tutorials and — of course — tricks.
• Sitepoint’s CSS Reference provides useful explanations of CSS concepts.
• Can I Use a CSS, HTML, JavaScript, or other web-based syntax in new code?
• A CSS3 gradient generator that helps with the unwieldy CSS3 gradient syntax.
• A specificity calculator that is useful in reinforcing the concepts of specificity.

Git

• The official Git home page.
• The GitHub home page.
• The Atlassian Git tutorials.
• Consider applying for a GitHub Education account.

Audacity

• The Audacity Manual.
• Tutorials from The Audacity Manual.
• Learning Audacity at Lynda.com.

Click the following link to read about BMCC’s commitment to students with disabilities: http://www.bmcc.cuny.edu/accessibility/index.jsp.

My email address is roy dot vanegas at gmail dot com. However, I only communicate with students over email in emergency situations (death, divorce, personal tragedy, pet emergency, etc). For matters related to the class, you’re advised to see me before class, during the break, or after class.

I do not have office hours. You will have to make an appointment to see me in person, should you need help. If meeting in person is not possible, I can meet over Skype.