This course will introduce the student to concepts and designs utilized in the development of education, sales, and marketing presentations. Students will create an integrated, interactive multimedia presentation using the basic concepts and principles of multimedia and graphic design.

Instructor: John Keston

Meeting Times and Location Section (M/W):
M/W 8am – 11am (with appropriate breaks), Room 229, LaSalle building

Syllabus:
Please visit e-Companion to download the current syllabus

Required Reading:
Required readings are assigned on the weekly class posts.

Recommended Reading:
Program or be Programmed by Douglas Rushkoff

Week 1 | Week 2 | Week 3 | Week 4 | Week 5 | Week 6
Week 7 | Week 8 | Week 9 | Week 10 | Week 11

Session 1: Authoring tools are software platforms that allow non-developers to create applications for specific computer operating systems, CD-ROMs, web sites, or mobile platforms. Typically these tools provide an integrated development environment or IDE. These system typically include a scripting language, or make a programming language more accessible for developers or designers. Examples include the following:

Dreamweaver (HTML,CSS,Javascript, et al)
Director (Lingo)
Eclipse (Java,C++, et al)
Flash (ActionScript)
Processing.org (Processing/Java)

New authoring tools are emerging all the time. Many of these are cloud based systems. The first authoring tool that we will examine is Prezi. Prezi is designed for creating interactive presentations that have a particularly engaging style of animation features built into the system.

Reading:
Investigate the tutorials and documentation at prezi.com/learn

Session 2: Today we will discuss the requirements for the Cloud Based Presentation (Prezi) project. Following the discussion I will be demonstrating some of the features and functionality within the Prezi authoring system.

Pick a topic that interests you and create a visual presentation with text and images using a cloud based authoring system (Prezi). Each slide should transition using the supported animation features from one slide to the next. Try tweens, scaling, and rotation. The presentation requires text and visual media on each slide, plus a minimum of one embedded video file (Competencies 1a, 1b). The project must be completed by Session 2, Week 2 for in class critiques. Final revisions are due at the beginning of class on Session 1, Week 3.

1. Use a cloud based authoring tool (Prezi) to build an electronic presentation
2. Create a minimum of 10 slides to inform your audience
3. Use animations to transition between slides
4. Include textual and visual media on each slide
5. Include at least one embedded video in the presentation
6. Experiment and be creative! Due on session 2, week 2 for critiques
7. Final revisions due on session 3, week 1

Session 1: Today I will be looking at your Prezi projects so far. We will also start to take a look at using HTML5, CSS, and Javascript frameworks to author presentations. This is an example that I recently produced that is optimized for viewing on tablets and uses a system called Flexslider.

Post-prepared Piano Interface

Session 2: Let’s begin today’s class by presenting your Cloud Based Presentation (Prezi) projects. After the presentations we will discuss the requirements for the JS/HTML5 Slideshow project.

JS/HTML5 Slideshow project requirements: create an electronically deliverable presentation using HTML, CSS, and a Javascript framework such as Flexslider. Slides must contain a combination of media (no all image slideshows) including text, images, video and/or audio content. Your design should respond to various delivery mechanisms including computers, tablets, and mobile phones. Navigation should be in place to move from slide to slide, or to a specific slide within the presentation.

1. Use HTML, CSS, and Javascript to author your presentation
2. Include a minimum of 10 slides
3. Slide content must reflect various media types (text, images, video, audio)
4. Design must responsive (built into Flexslider)
5. Include linear and non-linear navigation
6. Customize the animation behaviors to suit your content
7. Due before class for critiques on session 1, week 5

Session 1: As we learn to create presentations it is important to see examples of presentations created by expert speakers, artists, and designers. One excellent resource for this are the visiting artist lecture archive at MCAD. Today we’ll start by browsing the archive. Please take the time to watch one or more of the videos in full.

Secondly I will demonstrate techniques for the JS/HTML5 Slideshow project. We will go through the process of downloading, installing, and activating a Javascript slideshow framework. Specifically the framework will we utilize is called Flexslider.

Session 2: Let’s continue working with Flexslider. Today we will investigate customizing the behavior of the framework with the controls that are built into the system. These controls include callback functions that make it possible to extend the functionality of the framework without hacking the source code. This means that new functionality can be applied and maintained even if the Flexslider code base is updated.

PHP/jQuery Interactive Poll requirements: create an interactive poll using PHP and jQuery that allows visitors to see the results and participate by choosing their own answer for the poll question.

1. Use PHP to collect the answers and store the results in a database or flatfile
2. Use jQuery to display the results graphically as horizontal of vertical bars
3. Investigate techniques to prevent repeat voting (ip checking, cookies, registration)
4. Consider mechanisms to create multiple polls with a variety of questions
5. DUE: Milestone critiques – session 1 week 7
6. DUE: Final poll web application – session 2 week 7

Session 1: Today we are meeting at the MCAD campus (2501 Stevens Avenue South Minneapolis, MN 55404) in Auditorium 150 to see the 2nd MFA thesis presentations. The presentations are open to the public, 10 minutes each, and start at 9am going until 11:45am. You are welcome to come at 9:00am to see all eight presenters, otherwise be there no later than 10:45am. Take good notes for in class discussion at our next meeting.

Session 2: After a brief discussion regarding the MCAD 2nd MFA Thesis Presentations, let’s begin demos for the PHP/jQuery Interactive Poll project. We will build this tool using PHP, Javascript, HTML5, and CSS. The first demo will involve writing user input from an HTML form into a server file using PHP. Once we have some data coming in we will read the information and build graphical representations of the data. More to come…

Session 1: Today the HTML5/CSS/jQuery slideshow presentation critiques are scheduled. Please be prepared to show and discuss your project. Following the critiques we will continue with demonstrations for the Interactive Poll projects. Last week we looked at animating a bar graph to visualize the results of poll data. This week we will learn how to capture the data using HTML forms and PHP. Next we will process the information and apply the results to the animated bar graph.

Session 2: Today the final versions of your HTML5/CSS/jQuery slideshow presentation are due. A short period of the class will be available to show significant revisions to the project. Afterward, we will begin coding the server side code (PHP) required to build the Interactive Poll project. Please think carefully about the questions and answers you are planning on including in poll.

Session 1: Today’s demo center around expanding the capabilities of the interactive poll. We will investigate using cookies to discourage repeat voting. We will also look at IP address tracking and timestamps as additional information stored with each vote. Finally, we will formulate a more efficient method of storing the votes in a flatfile.

Session 2: Today is the last demo associated with the interactive poll project. We will look at creating vertical versus horizontal bars, and other methods of visualizing the data. Let’s also consider building a system to dynamically create new polls. After the demos we will discuss upcoming projects.

Session 1: Today are the critiques / presentations of your interactive poll projects. Final versions are due on session 2.

Session 2: Today we will start looking at impress.js. Although this framework does not include extensive documentation, it is fairly easy to implement and learn. Here are some link to get you started:

Official Impress.js Demo
Get to Know the Impress.js Presentation Tool
Create Stunning Visualizations with Impress.js

Link to in class demo archive:
ImpressJSDemo.zip

Impress.js Slideshow project requirements: create an electronically deliverable presentation using HTML, CSS, and the Impress.js Javascript framework. Slides must contain a combination of media (no all image slideshows) including text, images and HTML5 media elements (video and/or audio content). Navigation should be in place to move from slide to slide, or to a specific slide within the presentation. Use CSS3 transitions to animate between slides using x,y,z axis, scaling, and opacity.

1. Use HTML5, CSS, and Impress.js to author your presentation
2. Include a minimum of 10 slides
3. Slide content must reflect various media types (text, images, video, audio)
4. Design must responsive (built into Impress.js)
5. Include linear and non-linear navigation
6. Customize the animation behaviors to suit your content
7. Due before class for critiques on session 2, week 9

Session 1: More demos of impress.js:

Session 2:Here are some CSS3 animation resources:

Animate.css is a is a bunch of cool, fun, and cross-browser animations for you to use in your projects. Great for emphasis, home pages, sliders, and general just-add-water-awesomeness.

Animate.css uses custom HTML attributes as described here.

Session 1: Today we will start demonstrations in Flash CS6 / ActionScript 3.0 for the Flash timeline project.

Use Flash CS6 and ActionScript 3.0 to create an interactive timeline that contains a minimum of 10 steps. Also embed media including images and sound. Apply timeline animations using classic tweens, motion tweens, shape tweens, motion guides, and masks. Provide navigation for the user to go to any step from any step within the timeline.

1. Use Flash CS6 and ActionScript 3.0 to author your timeline
2. Include a minimum of 10 steps
3. Step content must reflect various media types (text, images, video, audio)
4. Use ActionScript to code non-linear navigation.
5. Create custom tweens to suit your content.
6. Due before class for critiques on session 1, week 11.

Session 2: Let’s present the Impress.js projects for critique today. After the critiques we will take another look at creating timeline navigation / animation sequences usin Flash CS5 and ActionScript 3.0.

Session 1:

Session 2:

Session 1:

Session 2: