Exercises & Project for Multimedia Production

Exercise 1 | Due Week 3 on 6/14 | Revision Due Week 4 on 6/25
Exercise 2 | Due Week 5 on 6/28 | Revision Due Week 6 on 7/9
Exercise 3 | Due Week 7 on 7/10 | Revision Due Week 8 on 7/17

Project | Due Week 8 on 7/19

Student Work: Class Exercises | Class Projects | Highlighted Projects

Exercise 1: Project Outline – Create Outline of Your Project Site (15% of Course Grade)

Exercise 1 (Summer Semester) Overview (6:05)
Create a draft of your site "Why be a Librarian in the 21st Century?" in outline form.
Your site draft needs to cover your vision of the "value" and "skills" of a "Librarian in the 21st Century" as well as provide an outline of your relevant interests and passions.
Break down your site into categories. Create organization and associated file hierarchy. Make sure to have a category about you.
Each web page has a clear layout and visual hierarchy (and reflecting what you have learned so far: margins, typography etc.). Make sure that the text lines have the appropriate length (hint: max-width).
The pages will have responsive layout so that certain page elements are not visible on a mobile device (see Responsive Layout features and videos below)
Each page has a brief sentence describing its goal and an outline of ideas to be covered or linked to. Wherever possible create the local hyperlinks to other pages that expand an idea mentioned.
Create a page with at least three links to web sites relevant in terms of content and/or whose layout you want to emulate.
Create a page that contains a table, where at least three cells contain an image.
Create a page that contains an image floated to the left and has text flowing around it (see this 550 video to remind yourself how to do it).
Primary Navigation features:
Each of your web page needs to contain your primary navigation structure with a clear "you are here" indicator.
The primary navigation structure needs to be controlled by CSS classes so that it is interactive and has a clear "you are here" indicator. Further, the navigation needs an animation effect on hover using CSS transitions.
Your navigation structure and pages need to have the functionality and visual features as shown in the video demos, but you are encouraged to add other visual features using CSS.
Demos using DW CC (2014) and Predefined CSS Layout to download.
- Ex1 (Regular Semester) Overview (2:20)
- Step 1 (5:08) Modify Local / Remote Site in CC / CC (2014).
- Step 2 (5:10) Download Predefined CSS Layout to use, Review Code and how to make it flexible and center page.
- Step 3 (6:40) Customize DW; Title Page, Page Properties, Create External CSS file.
- Step 4a (9:58) Customize CSS, Create CSS Classes & Navigation Structure.
- Step 4b (9:38) Create CSS code for Navigation LVFHA; Create Simple Animated Effect using CSS Transitions;
- Step 4c (6:00) Create Navigation Hyperlink; Create Files for All Categories and "You are Here" Indicator.
- Step 5 (11:33) How to Structure Question & Answer, Create CSS rules, Add Text.
- Step 6 (4:29) Capture, Edit Screenshot in Fireworks; Insert Image in Dreamweaver CS5.
- Step 6 & 7 (4:50) Insert Image, Upload Files to Remote Site and Set Permissions (744 or 755).
Responsive Layout features:
You need to create that contains a table with images, yet this table can only be visible if the max-width of the pages is greater than 600px; otherwise the images are shown in the table need be displayed in a sequential order.
The animated navigation, as created for Ex1 (Regular Semester), can only be visible if the max-width of a page is greater than 600px; otherwise the navigation needs to use a list approach.
Demos using DW CC (2014)
Ex2 (Regular Semester) Overview - Responsive Layout (3:12)
Step 1 & 2 (4:54) Create DIV structure for Large and Small Screens; Add Table with Images and Series of Images.
Step 3 (3:12) Specify CSS properties for Large Screen.
Step 4 (2:45) Create Media Query for Small Screen.
Step 5 (2:18) Create DIV structure for Navigation for Large and Small Screens; Examine Media Query.
Step 6 & 7 (6:12) Create Navigation using Lists for Small Screen; Copy & Customize CSS Rules for Navigation using Lists.
Use lists and CSS to create the primary navigation as discussed in this lecture in Lec 3 and shown how to do in this video, using NotePad++ in the demo and you can use DW. Step-by-Step files for Lec3 include overview and core pages that have navigation structure that uses list & CSS.
CSS that is used on all pages needs to be stored in an external CSS file.
Upload | FTP your draft site to your Rutgers account and
Submit the URL of the home page for the layouts in the dropbox assigned to the exercise.

Exercise 2: Navigation Design – Create Interactive Navigation Structure (15% of Course Grade)

Create a navigation structure for the primary categories of your project that is interactive and visually rich:
You can use "rollover images", as shown in Lec 7 demos, where the images contain a graphical element in addition to the text.
You can use what is covered in the LyndaCampus course "Site Navigation with CSS in Dreamweaver" (included in the Lec 7 demos) to create a visually rich navigation structure that uses lists, CSS and background images.
The navigation structure needs to be have a clear "you are here" indicator.
Create a consistent "look & feel" for your pages in terms of the postion of the primary navigation as well as the choice of type face and size as well as the choice of imagery included in the primary navigation.
Test your navigation structure to make sure the correct primary category has a "you are here" indicator.
Submit the URL of the home page in the dropbox assigned to the exercise.

Exercise 3: Visual Storytelling – Create Visual Collage / Photo Essay and Flash Animation / Digital Video (20% of Course Grade)

Create Visual Collage OR Photo Essay:
Visual Collage
Create one visual collage that visualize concepts related to your Term Project and the question "Why be a Librarian in the 21st Century?"
Ask yourself: What are the key ideas of my Term Project? and how could I visualize them?
Please create layout that has a differentiated visual structure and tell your story in a visual way and using no or little supporting text.
Photo Essay / Slideshow
Capture series of at least of five, ideally ten+ photos that apply image composition principles and are related to an important aspect of your project topic.
Use JavaScript to create an interactive slideshow with concise titles and captions.
Use and customize one of thefollowing JavaScript Slideshows: Galleria, Galleriffic or Supersized.
The lecture and video demos explain and show how to customize these slideshows.
You are responsible for finding or creating the digital images.
Getty Images: provides free access to its images for non-commerical use (and you could copy image to your hard disk and then incorporate it into your collage or photo essay / slideshow).
The layout page you create can be "stand alone" for now: they do not yet need to be connected to your main site; and it does NOT require a navigation structure. If you want to integrate itinto your main site, you are free to do so.
Create Animation OR Digital Video:
Flash Animation
Create one animation, using Animate (= Flash) that visualizes concepts related to your Term Project and the question "Why be a Librarian in the 21st Century?".
Ask yourself: What are the key ideas of my Term Project? and how could I visualize them?
Create animations that uses animated text and images and tells your story in detail and embeds Flash animation in a separate web page.
Digtal Video
Capture video footage, such as interviews, and/or use photos that you explore using the Pan & Zoom tool in Premiere Elements or Premiere Pro.
Create well-structured video in post-productions by applying video editing principles effectively that needs to:
Contain (a portion) of at least one video source footage that you have captured.
Be at least 2 min long.
Have an opening title and ending credits.
Consist of at least five clips, which includes titles and credits.
Contain narration and/or an appropriate music soundtrack for some portion of the video.
Contain at least one transition that is appropriate for the cut and content of the video.
Contain a fade-in at the beginning and fade-out at the end of the video.
Upload video to YouTube as well as upload to dropbox.com these files:
All source footage, images, narration and/or music used in the video.
Premiere Elements file.
Dropbox Instructions
Create a free account with 2GB of storage at dropbox.com.
Download Windows or Mac application to your computer.
The Public folder in dropbox lets you easily share single files in your Dropbox.
Any file you put in this folder gets its own Internet link that you can share with anyone.
Step 1: Drop a file into the Public folder.
Step 2: Right-click this file, then choose Dropbox > Copy Public Link.
This copies an Internet link to your file that you can paste anywhere: emails, instant messages, blogs, etc.
Create webpage that contains:
Embedded video.
Short description of what the video aims to communicate.
Links to files that are used to create the video and stored in your public folder in your dropbox.com account.
Please create a "summary" page with hyperlinks to the visual collage / photo essay and animation / video page, respectively.
On the summary page explain briefly what each layout is meant to communicate.
Upload | FTP your work to your Rutgers account and
Submit the URL of the summary page for the collage and animation in the dropbox assigned to the exercise.

Term Project: Multimedia Design – Create Multimedia Website using HTML, CSS and Flash and/or Video (50% of Course Grade)

The term project brings together what has been covered in this course and what you have practiced in the exercises:

Create a website that communicates your vision of "Why be a Librarian in the 21st Century?"
Build a cool site you can use as your calling card in your job search.
Demonstrate your technology and media savvy - use text, images, animations, videos effectively.
Demonstrate your understanding of lecture materials and class discussions.
The site needs to include at least 10 - 12 separate pages that are designed for easy scanning.
Evaluation Criteria
Mechanics (50%) - technical competency in web and multimedia design: navigation, layout, animations, videos, access performance.
Meaning (30%) - concise presentation of content and effective use of multimedia.
Creativity (20%) (Keep in mind these three criteria are interrelated).
Timetable
Week 3 - Exercise 1 - Create a draft of your site in outline form.
Week 8 - Complete Term Project (online | campus).
Late projects will not be accepted.