Exercises & Project for Digial Media Production

Exercise 1 | Due Week 4 | Revision Due Week 7
Exercise 2 | Due Week 6 | Revision Due Week 9
Exercise 3 | Due Week 8 | Revision Due Week 11
Exercise 4 | Due Week 10 | Revision Due Week 13
Exercise 5 | Due Week 12 | Revision Due Week 14

Project | Due Week 15

Student Work: Class Exercises | Class Projects | Highlighted Projects

Exercise 1: Web Design – Present Story Outline for Multimedia Project (10% of Course Grade)

Conduct research and gather key facts for the multi-part digital media story to be told in your term project.
Develop and publish a set of XHTML web pages that present the story outline, digital media elements, key facts and sources to be used.
Create a simple navigation structure using relative hyperlinks and has a clear "you are here" indicator (as shown in Ex1 video demos).
The navigation needs to have the following structure: Overview | Story Core | Images | Animations | Videos.
Overview page: present a concise story outline. Provide links to sources to be used to develop your multi-part multimedia story and also include to a link to a multimedia story you would like to emulate.
Story Core page: briefly describe the emotional core and your personal connection to the story topic.
Images page: briefly decribe what types of images you plan to use to help tell the story. Find and insert a relevant image so that the text flows around it (as shown in Ex1 demos).
Animations page: briefly decribe what types of animations you plan to create to help tell the story. Provide link to an animation and briefly state what specifically you plan to emulate.
Videos page: briefly decribe what types of videos you plan to create to help tell the story. Find and embed a relevant YouTube video.
Use a table to structure each page so that it has:
3 columns: 50 | 800 | 100 pixels wide
4 rows: 50 | 50 | 600 | 50 pixels high
Each page has one h1 tag, at least one h2 tag and uses a sans-serif font (e.g. Arial) and at least one important word is bolded and/or italicized in each paragraph of text.
Upload | FTP your pages to your Rutgers account and Test your pages in the Browser and make sure permissions are set appropriately.
Validate all pages using XHTML validator: http://validator.w3.org/
Submit the URL of the overview page in the dropbox assigned to the exercise.

Exercise 2: Photography – Create Photo Essay using JavaScript (10% of Course Grade)

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.
Ask yourself: What are the key ideas of my Term Project? and how could I capture them in the form of images?
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 video demos show how to customize these slideshows.
Create a website that contains these three pages: Overview | Slideshow | Analysis.
Navigation Structure: use list and CSS to create the primary navigation with a clear "you are here" indicator, as shown in the provided slideshow demo page and the Week 3 video demo.
Overview page: briefly describe which key aspect of the project topic the images help to capture and communicate.
Slideshow page: contains the slideshow.
Analysis page: insert a thumbnail of each slideshow image and very briefly describe next to the image how you composed it and which image composition principle(s) you applied.
Upload | FTP web pages, images and needed JavaScript and CSS files to your Rutgers account and
Submit the URL in the dropbox assigned to the exercise.

Exercise 3: Web Design – Develop Website with Storyboard for Video (10% of Course Grade)

Develop Storyboard for a video you will create in Exercise 4 and that is related to an important aspect of your project.
Create a visually attractive web site that contains these two pages: Overview | Storyboard.
The page layouts are created using nested divs, as shown in the Ex3 Demo, and the CSS code controlling the appearance of the pages needs to be stored in an external style sheet.
Navigation Structure: use list and CSS to create the primary navigation with a clear "you are here" indicator, as shown in the Week 3 video demo.
Overview page: describe what the planned video is meant to communicate and what its key elements will be. The page needs to contain these elements:
Sidebar, floating to the right, that contains three links to related content, data and/or background material.
Storyboard page: contains at least five storyboard elements or frames.
Storyboard element: is a div that contains the storyboard image and this textual information: type of shot and very concise description of topic covered in specific scence.
CSS Tasks
Develop External Style Sheet that controls overall appearance of pages:
Contains “Clean Slate” code.
CSS rules for DIVs : header, navigation, content, footer etc.
Specify float and clear properties as needed for specific divs.
Specify borders, margins and padding as needed.
Specify CSS rules for these tags: p, h1, h2, a.
Make sure to use sans-serif font.
Use Internal Styles to specify unique visual display features for a specific page, such as:
Overview page:
Define CSS rule for sidebar so that it floats to the right, has a border and the appropriate margins and paddings (remember you can set top, bottom, left and right margins and/or paddings).
Create a CSS rule for h2 that is specific for h2 appearing inside the sidebar.
Create complex CSS rule so that the first letter of the first paragraph is much larger than the other letters and has a different color (see Week 5 CSS Lecture).
Storyboard page:
Define CSS rule that will be applied to storyboard element divs so that margin = 10px, black border and padding = 10px.
Layout Tasks
Overall page width is 900px (incl. 50px left margin) and for the overview page the page height needs to be 700px.
Create an overall hierarchical structure for logical sections of the page: header, navigation, content, footer.
Header
Navigation (with subtle background color)
Content
Footer: does not float next to anything (or put differently, nothing floats on either side of the footer)
Design Tasks
Low saturated colors for larger visual areas
Apply the Basic Web Design Principles discussed in Week 5.
Upload | FTP your work to your Rutgers account and
Submit the URL of the home page in the dropbox assigned to the exercise.

Exercise 4: Video – Create & Edit Video (10% of Course Grade)

Capture footage using good camerawork techniques.
You can capture video footage, such as interviews, and/or use photos that you explore using the Pan & Zoom tool in Premiere Elements.
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.
Link to your Exercise 3 that contains the initial storyboard for the video.
Submit the URL in the dropbox assigned to the exercise.

Exercise 5: Animation Design – Create Flash Animations (10% of Course Grade)

Create Flash animation that visualizes a concept or topic related to your Term Project.
Ask yourself: What are the key ideas of my Term Project? and how could I visualize them?
Create a multi-part animation that can use animated text and images and tells your story in detail.
Embed Flash animation in a web page (video demo).
On the web page below the animation explain briefly what animation is meant to communicate.
Upload | FTP your work to your Rutgers account and
Submit the URL of the web page in the dropbox assigned to the exercise.

Term Project: Digital Media Design – Create Digital Media Website using XHTML, CSS, JavaScript, Video and Flash (30% of Course Grade)

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

Produce a multi-part digital story that uses concise text, photo essays, videos and animations.
Create website using XHTML, CSS, JavaScript.
Demonstrate your technology and media savvy - use text, images, videos and animations effectively.
Demonstrate your understanding of lecture materials and class discussions.
Content
Home page: introduces the topic of your project and provides an overview of what will be covered.
Content pages: can contain text, images, interactive slideshows, videos and animations.
There need to be at least 6 content pages.
There need to be at least four pages that contain digital media content:
One page (or more) with an interactive slideshow that uses JavaScript.
Make sure to include the needed JavaScript files and links to external files.
One page (or more) with an embedded video you created.
One page (or more) with an embedded Flash animation you created.
Make sure to include Scripts folder and use embed code as shown in demo.
You can present related content for a primary theme using the Flash Templates discussed in Week 12.
About page: provides information about you and your reasons for creating the project.
Navigation
Primary Navigation
Identify the 3-4 primary navigation categories in addition to Home and About. You decide what the main themes are for your project and what are effective and concise word choices.
Create an interactive navigation structure with a clear "you are here" indicator using a list and CSS (as created for Ex3 and see video demo).
You can create and use (animated) Flash buttons in the navigation structure (see these video demos).
Secondary Navigation
If a primary theme has secondary pages, then you need to create a secondary navigation, which can be placed below the primary navigation or in a sidebar on the left of the page.
Design Tasks
Apply the Web Design Principles discussed in Week 3 and Week 5.
Develop Page Layout Design for your pages so that your project has a consistent look & feel:
You can build on the page layout developed for Ex3 (see Ex3 demos) and further develop & customize it and/or you can build on the page layout templates provided and discussed in Week 5.
You can emulate page layouts and websites created by others that you find suitable for your project.
CSS Tasks
Develop External Style Sheet that controls overall appearance of pages (as done for Ex3):
Contains “Clean Slate” code.
CSS rules for DIVs : header, navigation, content, footer etc.
Specify float and clear properties as needed for specific divs.
Specify borders, margins and padding as needed.
Specify CSS rules for these tags: p, h1, h2, a.
Make sure to use sans-serif font.
Use Internal Styles to specify unique visual display features for a specific page.
Evaluation Criteria
Mechanics (50%) - technical competency in web and multimedia design: navigation, layout, videos, animations, access performance.
Meaning (30%) - concise presentation of content and effective use of multimedia.
Creativity (20%) (Keep in mind these three criteria are interrelated).
Related Examples: MLIS Multimedia Production Showcase
Timetable
Week 4 - Exercise 1 - Present Story Outline for multi-part multimedia project.
Week 15 - Complete Term Project.
Late projects will not be accepted.