Introduction to Multimedia Unit 2 – T he Multimedia Development Process 2015-16 Semester 1.

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

Unit Unit 22 – –

TThe Multimedia he Multimedia Development ProcessDevelopment Process

2015-16 2015-16 Semester 1Semester 1

Unit 2: The Multimedia Development ProcessUnit 2: The Multimedia Development Process

Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

2

Unit OutlineUnit Outline

• In this unit, we will learn– Stages of a Multimedia Project

• Planning and Costing– Target Audience

– Flowcharts

– Storyboards

– Organizational Structures

– Site Maps

– Link Maps

– Navigational Structure

• Design and Production

• Testing – Alpha Testing

– Beta Testing

• Delivery


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

3

IntroductionIntroduction

• Multimedia development is a project-based process.

• Well-developed plan for multimedia product will save– time– money– multiple modifications

• The rule of thumb for development is 80% planning and 20% production.

80% planning + 20% production


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

4

Stages of a Multimedia ProjectStages of a Multimedia Project

Stage 1Planning and Costing

Stage 1Planning and Costing

Stage 2Design and Production

Stage 2Design and Production

Stage 3Testing

Stage 3Testing

Stage 4Delivery

Stage 4Delivery Four stages of a

multimedia project


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• Planning and costing– Determine the messages and objectives of the project– Identify how each message and objective may work

within the authoring system– Before begin developing, plan what writing skills,

graphic art, music, video, and other multimedia expertise will be required

– Develop a creative graphic look and feel, as well as a structure and navigation system that will let the user visit the messages and content

– Estimate the time needed to do all elements– Prepare a budget

5

Stages of a Multimedia Stages of a Multimedia Project: OverviewProject: Overview


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

• Designing and producing– Perform each of the planned tasks to create a finished

product– There may be many feedback cycles with a client until

the client is happy

• Testing– Always test the programs / applications to ensure they

meet the objectives of the project, they work properly on the intended delivery platforms, and they meet the needs of the client or end user

• Delivering– Package and deliver the project to the end user

6

Stages of a Multimedia Stages of a Multimedia Project: OverviewProject: Overview


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

7

Planning and CostingPlanning and Costing

• To determine objectives / purposes of a project, we may ask:– How will users be using this product?– What will users gain from this product?– What types of features will be most useful to the

users?– Why will users visit this web site (if the product is a

web site)?– Which browser / platform will users use to access this

web site (if the product is a web site)?


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

8


• Target audience– The designers should always focus on the user and

tailor product to meet the user’s needs and wants.– The designer needs to get a clear picture about how

the target audience will use the product. This can be accomplished through in-person interviews, online surveys, and various focus groups.

– Users like to feel in control; give users opportunity to choose or create their own experience.

– Categorization on audience might be useful. Examples: age, gender, income range, language, nationality, disability, computer literacy


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Target audience

9

Case Study

Product: A web site of an Italian café Objective: Introduces tiramisu recipes

Target audience may be categorized as follows:• People from Italy• People from elsewhere in the world• Experienced tiramisu cooks• Inexperienced tiramisu cooks

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

10


• A plan that outlines the required multimedia expertise is prepared.

• A graphic template, the organizational structure and the navigational system are developed.

• A time estimate, a manpower estimate and a budget are prepared.

• Time, money, and people are the three elements that can vary in project estimates.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Critical Path Method (CPM) is used to calculate the total duration of a project based upon each identified task.

• Critical tasks are also identified using CPM.• Critical tasks, if lengthened, will result in a

delay in project completion.• CPM scheduling functions are usually included

in project management software.

11


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Program Evaluation Review Technique (PERT) charts are used to show task relationships. Prerequisites for each task can be observed easily.

• A Gantt chart is used to illustrate the project schedule by depicting all the tasks along a timeline.

• Example of project management software: Microsoft Project

12


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


Task Duration (Weeks)

A 3

B 4

C 1

D 2

E 2

F 3

13

CPM

PERT

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

14


Gantt Chart

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Flowcharts– provide a graphical

representation of how the information within the application is organized and flows

– are used to illustrate interactivity

– can be modified as the application evolves

15


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Storyboards– are diagrams showing the layouts of all screens– describe the content and sequence of each screen– specify how multimedia elements are positioned on

each screen

16


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

17


• Organizational structure is the way in which information is organized.

• Four main types of organizational structure:– Hierarchical organizational structure– Nonlinear organizational structure– Linear organizational structure– Database-driven organizational structure


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

18


• Hierarchical organizational structure– Top-down approach– Sets and subsets of information form a hierarchy.– Information is chunked down from most important or

general to least important.– Can be “broad and shallow” or

“deep and narrow”


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

19


• A deep and narrow hierarchical organizational structure provides deep knowledge on a few topics.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• A broad and shallow hierarchical organizational structure provides a little information on many topics.

20


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

21


• Nonlinear organizational structure:– No prescribed or sequential path– Information

is linked fromone discretepiece of informationto another.

Most information on the Web is read nonsequentially, so most web sites use a nonlinear organizational structure.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

22


• Linear organizational structure:– Traditional method of navigation with a set sequence– Organizes information sequentially– Examples: training sites, online slide shows

The linear organizational structure is an uncommon method for organizing information on the Web because most web sites have no set path or sequence that must be followed.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

23


• Database-driven organizational structure– Increasingly popular– Large volume of short bits of information– Sites that use internal search engines use databases.– Examples: library, research, and e-commerce sites

Data

Containers

Any web site that includes an internal search engine uses a database-driven organizational structure.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Discrete and short bits of information are appropriate for online viewing because very few users will spend time reading long passages of text onscreen.

• Inclusions of site maps and link maps are helpful to users.

24


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Site Maps– provide an overview of the organizational structure of

a multimedia application / web site– can be used at the planning stage to help the designer

see the big picture– are often included in the final products so users can

view the overall structure– may be graphical in nature, or in a text-based menu

format– Many web-authoring programs will generate site

maps.

25

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


A site map provides an overview of the web site’s structure.

26

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Link Maps– illustrate the interconnectivity of web pages within the

web site as well as the links to external sites and all of the multimedia elements included within the web site

27

A link map provides an overview of the web site’s links.

SSelf-elf-SS

tudy

tudy

SSlid

elid

e


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Navigational Structure– The navigational structure is the means through which

the users will know where they are, where they have been, and where they want to go.

– It’s imperative to offer simple, consistent navigation available from every page.

– Frames divide the screen / page into multiple regions. Normally, one region of the screen / page remains constant.

– Navigational bars are found on many multimedia applications / web sites.

28


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


• Navigational Structure– Hub and spokes is a cumbersome navigation method,

which relies too heavily on the browser’s back button, as the users must return to the home page to go to the other pages of web site.

– With a search feature, users navigate directly to their content of interest. The user can enter specific search terms.

– The directed navigational structure is efficient because the site becomes tailored to the user. The user is asked to provide information when entering the site, and then information is available to the user based on their initial input.

29


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


This frame-based web site uses the left frame to establish a consistent navigational structure that remains constant from screen to screen.

30


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


There are many different types of navigation bars, including text only, buttons, and tabs.

31

The hub and spokes navigational structure should be avoided because it forces the user to rely too heavily on the browser’s Back button.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia


Directed navigation makes choices for the user based on the user’s input.

32


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

33

Design and ProductionDesign and Production

• The structure and user interface(1)

are designed, implemented and continuously refined.

• Multimedia elements (text, graphics, animation, sound, video) are created.

• Content is added.• Scripts are added.• The product is revised, based on the continuous

feedback received from the client.

(1) Issues about user interface will be discussed in Unit 3.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

TestingTesting

• It is important to test and review a project to ensure that:– the product is bug-free, accurate, and operationally

and visually on target.– the client's requirements have been met.– the reputation of the developer/company is not

damaged by a premature or erroneous release.

34


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

35

TestingTesting

• Alpha testing– An alpha release is the first working draft of a project

and is only for internal circulation.– Alpha testing is usually done “in-house” by team

members.– Alpha releases are expected to have problems or to

be incomplete.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

36

TestingTesting

• Beta testing– Beta testing is done with a wider array of testers.– Beta testers should be representative of real users

and who were not involved with the actual production.– Beta level bugs are typically less virulent than alpha

bugs.– Managing beta test feedback is critical.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

TestingTesting

• Terms that are used to indicate the version status of the project:– Bronze: close to being finished– Release candidate: approach a gold master– Gold master: nothing is left to change or correct; ready

for mass production

37


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

38

DeliveryDelivery

• The final project is packaged and delivered to the end user.

• Delivering the project on an optical disc (e.g.: CD-ROM, DVD-ROM, BD-ROM) is the most popular method among multimedia developers.

• Multimedia can also be delivered on the Web by hosting the pages on a web server.


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

DeliveryDelivery

• Issues about delivery on the Web:– Every web site on the Web has a numeric address

called an IP (Internet Protocol) address.IP address example: 134.39.42.57

Extra: IPv6 address example: 2001:cdba:0000:0000:0000:0000:3257:9652

– The domain name system allows people to use easy-to-remember names instead of long sequences of numbers to get to specific web sites.

Domain name example: hkuspace.hku.hk– A domain name is a powerful marketing tool. We

should select one that is easy to use and easy to remember.

39


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

DeliveryDelivery

• Issues about delivery on the Web:– Once designed and named, the web site must be

uploaded to a web server.– We can buy a web server and host our site in-house,

or outsource to a web hosting company.– There are some free web hosting sites available, but

many have limitations.

40


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

DeliveryDelivery

• Some considerations for web hosting:– Storage space for web site– Connection bandwidth– Scripts and software to use to add features to the site– Technical support– Site administration– Security keeps data secure from hackers– Search engine registration service

41


Intr

odu

ctio

n t

o

Intr

odu

ctio

n t

o M

ult

imed

iaM

ult

imed

ia

ReferenceReference

• Part of this slide set is prepared or/and extracted from the following book:– Multimedia For The Web Revealed, Calleen Coorough & Jim

Shuman, Thomson Learning, 2006, ISBN:1-4188-3953-1

• This set of slides is for teaching purpose only.• Self-study slide(s) is / are within the scope of the

final examination.

42

Introduction to Multimedia Unit 2 – T he Multimedia Development Process 2015-16 Semester 1.

Documents