Exercises & Project for Multimedia 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: HTML & CSS – Create Website Evaluation (10% of Course Grade)

Write a detailed evaluation of a website of your choice.
Choose a site that could serve as a model and/or contain relevant information for your Term Project.
Use the evaluation template used in class and address all questions listed below.
Incorporate your own insights and provide specific examples that you understand the issues addressed by each question (if possible incorporate captured screenshots and hyperlinks to the specific parts of the website in your evaluation).
Provide brief and concise answers.
Publish your evaluation as a set of web pages.
Create a summary page that contains a brief summary of your evaluation and a hyperlink to the site's home page you are evaluating.
Please see and consult step-by-step video demo of Exercise 1.
The navigation structure needs to consist of: Summary | Audience | Task | Navigation | Functionality.
Here is an example of an site evaluation, which does not use CSS and uses a very simple layout, but it shows you how display the questions and your concise answers. Further, the question & answer pairs need to be surrounded by a rounded border and appropriately styled.
The primary navigation structure of your Exercise 1 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. Make sure that the text lines have the appropriate length (hint: max-width).
The CSS code controlling the appearance of the pages needs to be stored in an external style sheet.
You need to include (cropped and scaled) screenshots that are annotated to support what you are describing where appropriate.
Upload | FTP your pages to your Rutgers account and Test your pages in the Browser and make sure permissions are set appropriately.
Submit the URL of the summary page in the dropbox assigned to the exercise.

Evaluation Questions
Evaluation - Audience
Who is the site for? Who are the intended users?
What do users want to accomplish?
What are the needed skills? Good fit with skills of intended users?
What tasks are users trying to accomplish?
Evaluation - Task
Support tasks users need to accomplish?
Support both experienced and inexperienced users?
User expectations meet?
Evaluation - Navigation
What site is this? (Site ID)
What page am I on? (Page name)
What are the major sections of this site? (Sections - tabs)
What are my options at this level? (Local navigation)
Where I am? ("You are here" indicators or breadcrumbs)
Can you easily find your way? back home? other sections?
How can I search?
Evaluation - Functionality
Instantly understand what the site is about?
Understand what you can do there?
"Look & feel" entice you to stay and explore?
Main functions easily accessible? Easy to use?
Links clear where they will take you?
Instant visual hierarchy? Or visually too busy?
Text easy to read?
Graphics easy to understand?
Large site has a site map, index or search function?
Help available and useful?
Download times reasonable?

Exercise 2: Project Outline – Create Outline of Your Project Site (10% of Course Grade)

Create a draft of your site "Why be a Librarian in the 21st Century?" in outline form, using what you learned in Exercise 1.
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 of your web page needs to contain your primary navigation structure with a clear "you are here" indicator.
Use lists and CSS to create the primary navigation as discussed in this lecture in Week 3 and shown how to do in this video, using NotePad++ in the demo and you can use DW (step-by-step files are located in Week 3).
Each web page has a clear layout and visual hierarchy (and reflecting what you have learned so far: margins, typography etc.).
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).
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, 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
Ex2 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.
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 3: Visual Storytelling – Create Visual Collage / Photo Essay (10% of Course Grade)

Create visual collage and/or photo essay 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?
Visual Collage
Please create visual collage layout that has a differentiated visual structure and tells 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.
The visual collage / slideshow pages you create can be "stand alone" for now: they do not yet need to be connected to your main site; and they do NOT require a navigation structure.
Requirements:
1) One of your pages needs to contain a visual collage with at least five images.
2) One of your pages can contain a slideshow with at least five images.
This is means that at least one of your pages needs to contain a visual collage.
Please create a "summary" page with hyperlinks to the two pages.
On the summary page explain briefly what each page is meant to communicate.
Upload | FTP your work to your Rutgers account and
Submit the URL of the summary page for the layouts in the dropbox assigned to the exercise.

Exercise 4: Navigation Design – Create Interactive Navigation Structure (10% 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 Week 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 Week 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 5: Multimedia Design – Create Flash Animation / Digital Video (10% of Course Grade)

Create two Flash animations or one digital video 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?
Flash Animation
Create animations that use animated text and images and tell your story in detail
Embed each Flash animation in a separate web page.
Create a "summary" page with hyperlinks to the two animations.
On the summary page explain briefly what the animation are meant to communicate.
Digital 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.
Upload | FTP your work to your Rutgers account and
Submit the URL of the summary page for the animations or page with embedded video in the dropbox assigned to the exercise.

Term Project: Web Multimedia Design – Create Multimedia Website using HTML, CSS and Flash / 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, video effectively.
Demonstrate your understanding of lecture materials and class discussions.
The site needs to include at least 12 - 15 separate pages that are designed for easy scanning.
Evaluation Criteria
Mechanics (50%) - technical competency in web and multimedia design: navigation, layout, animations, video, 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 6 - Exercise 2 - Create a draft of your site in outline form.
Week 15 - Complete Term Project (online | campus).
Late projects will not be accepted.