Print Email Download

Multimedia web development

Chapter 01: Multimedia web development


Chapter1

Design and Develop Multimedia Website

LEARNING OUTCOME

By the end of this lesson you will be able to:


1.0 Introduction:

Multimedia is basically several types of media integrated together. Media can be text, graphics, animation, data, audio, video, etc. A simple example of multimedia is a web page on the theme of Mozart that has text concerning the composer along with an audio file of some of his music and can even include a video of his music being played in a hall.

Besides multiple types of media being integrated with one another, multimedia can also stand for interactive types of media such as video games CD ROMs that teach a foreign language, or an information Kiosk at a subway terminal. Supplementary terms that are sometimes used for multimedia include hypermedia and rich media.

The term Multimedia is alleged to date back to 1965 and was used to describe a show by the Exploding Plastic Inevitable. The show incorporated a performance that integrated music, cinema, special lighting and human performance. Nowadays, the word multimedia is used quite often, from DVD's to CD ROMs to even a magazine that includes text and pictures.

1.1 Multimedia on Web:

It began with games and now became dynamic Web pages, interactive courses, and catalogs with sound and video. It is Multimedia; one of the fastest growing and most exciting areas in the field of information technology. Multimedia is integration of multiple types of media such as text, sound, graphics or animation, video and interactivity. The term 'multimedia' is associated with sound and video in particular. Multimedia is used to cover everything from the simplest computer based presentation to the most complex CD-ROM based reference title.

When the Web was introduced, it was all text. Soon graphics were added and opened up new possibilities. Multimedia was introduced using tools such as Java and Shockwave, which helps to display animations, play sound, and interact with them. You can experience full multimedia over the Internet or Intranets.

Multimedia gives the sizzling effect to a website, merging the fun element with serious business. The scope for creativity is boundless in multimedia development services. This has brought a major breakthrough in the field of technology and web design in the advertisement world. The use of animation and multimedia services add extra value to the market creditability. It enhances the business opportunities.

1.1.1 Text:

Text is used for presenting information and conveying ideas on screen. Text should be presented in an acceptable manner supplementing with other media elements. The font and amount of text should be comprehensible to the user. For example, you are presenting information on tourist site; information should be clearly categorized under separate headings such as place, services provided, prices, contact details etc.

Note the following points:

1.1.2 Sound:

Sound is an extremely efficient way to deliver information. It attracts the user's attention to visually-presented information. It is used to provide extra information that cannot be displayed visually to supplement a visual signal.

Note the following points:

Sound can be stored in many different formats.

The MIDI Format

The MIDI (Musical Instrument Digital Interface) is a format for transfer music information between electronic music devices like synthesizers and PC sound cards.

The MIDI format was developed in 1982 by the music industry. The MIDI format is extremely stretchy and can be used for everything from very simple to real professional music making.

MIDI files do not enclose sampled sound, but a set of digital musical instructions (musical notes) that can be interpreted by your PC's sound card.

The weakness of MIDI is that it cannot record sounds (only notes). Or, to put it some other way: It cannot store songs, only tunes.

The positive aspect of the MIDI format is that since it contains only instructions (notes), MIDI files can be extremely small. The example over is only 23K in size but it plays for almost 5 minutes.

The MIDI format is supported by numerous different software systems over a large range of platforms. MIDI files are supported by all the nearly all popular Internet browsers.

Sounds stored in the MIDI format comprise the extension .mid or .midi.

The RealAudio Format

The RealAudio format was developed for the Internet by Real Media. In addition the format supports video also.

The format accepts streaming of audio (Internet radio, on-line music) with low bandwidths. Because of the low bandwidth precedence, quality is often condensed.

RealAudio sounds stored in the format extension .rm or .ram.

The AU Format

The AIFF Format

The SND Format

The WAVE Format

The MP3 Format (MPEG)

What Format To Use?

The WAVE format is one of the major popular sound formats on the Internet, and it is supported by all popular browsers. If you desire to recorded sound (music or speech) to be available to all your visitors, you should use the WAVE format.

The MP3 format is the novel and imminent format for recorded music. If your website is concerning recorded music, the MP3 format is the choice of the future.

Playing Sounds on a Web Site

Sounds can be played "inline" or by a "helper", depending on the HTML element you use.

Inline Sound

When sound is included in a web page, or as part of a web page, it is called inline sound.

If you plan to use inline sounds in your web applications, be attentive that many people find inline sound annoying. In addition note that some users might have turned off the inline sound option in their browser.

Best recommendation is to include inline sound only in web pages where the user expects to hear the sound.

Using a Helper (Plug-In)

A helper application is a program that could be launched by the browser to "help" playing sound. Helper applications are also know as Plug-Ins.

Helper applications could be launched using the <embed> or the <object> tag.

One immense advantage of using a helper application is that you can let some (or all) of the player settings be controlled by the user.

Many of the helper applications permit manually (or programmed) control over the volume settings and play functions like rewind, pause, stop and play.

Using The <embed> Tag


The purpose of the <embed> tag is to embed multimedia elements in web page.

The subsequent code fragment displays a MIDI file embedded in a web page.

Example

    <embed src="beatles.mid" />

Using The <object> Tag

The purpose of the <object> tag is to embed multimedia elements in web page.

The subsequent code fragment displays a WAVE file embedded in a web page.

Example

<object classid="clsid:22D6F312-B0F6-11D0-94AB-0080C74C7E95">
<paramname="FileName"value="liar.wav"/>
</object>

Using A Hyperlink

If a web page uses a hyperlink to a media file, many web browsers uses a "helper application" to play the file.

The following code fragment displays a link to a MIDI file. If a user clicks on the link, the browser will start a helper application, like Windows Media Player to play the MIDI file:

Example

    <a href="beatles.mid">Play the Beatles</a>

1.1.3 Graphics or Animation:

Graphics or Animation is a powerful medium for illustrating concepts, investigating an environment, or interface transition. Use animation only when and wherever it is required. Provide adequate time to fabricate the animation sequences.

Note the following points:

1.1.4 Video:

Present information with short and precise video sequences accompanied with pleasant melody to uphold the attention of the user.

Note the following points:

The use of multimedia features with well merged content keeps the user occupied, motivated, inspired and influenced. Product presentations, online tutorials, corporate presentations, online games, etc. can be productively presented with the help of multimedia technology. Multimedia presentations serve up as an eye toffee for the onlooker. Multimedia applications are only limited by our imagination. While working for a client you will be inevitably cultivating them incessantly as to what is possible. In most of the cases, the client's imagination for the first 90% of the project is null and too much for the last 10%.

Although multimedia design and evaluation includes a lot more than the World Wide Web, it is noteworthy to consider the size and significance of the web. With the growing technology and innovations and its potential to expand and reach the global audience, the web is one of the driving forces behind the growth of multimedia. For this cause it has to be considered as a special case within multimedia design.

Video can be stored in numerous different formats.

The AVI Format

The AVI (Audio Video Interleave) format was developed by Microsoft.

The AVI format is supported by almost all computers running Windows, and by all the most popular web browsers. It is an extremely general format on the Internet, but not always possible to play on non-Windows computers.

Videos AVI format stored in the .avi extension.

The Windows Media Format

Microsoft developed the Windows Media format.

Windows Media is a very familiar format on the Internet, but Windows Media movies cannot be played on non-Windows computer without any other (free) component installed. Few later Windows Media movies cannot play at all on non-Windows computers because no player is accessible.

Windows Media format Videos stored in the .wmv extension.

The MPEG Format

The MPEG (Moving Pictures Expert Group) format is the one of the well known format on the Internet. It is cross-platform, which is supported by all the well popular web browsers.

MPEG format Videos stored in the .mpg or .mpeg extension.

The QuickTime Format

The QuickTime format is developed by Apple.

QuickTime is a widespread format on the Internet, but QuickTime movies cannot be played on a Windows computer without an extra (free) component installed.

QuickTime format Videos stored in the .mov extension.

The RealVideo Format

The RealVideo format was developed for the Internet by Real Media.

The format allows the users to streaming of video (Internet TV, on-line video) with low bandwidths. Since of the low bandwidth priority, quality is very often reduced.

RealVideo format Videos stored in the .rm or .ram extension.

The Shockwave (Flash) Format


The Shockwave format was developed by Macromedia.

The Shockwave format requires an additional component to play. This component comes preinstalled with the latest versions of Netscape and Internet Explorer.

Shockwave format videos stored in the .swf extension.

Playing Videos on a Web Site

Videos can be played "inline" or by a "helper", depending on the HTML element you use.

Inline Videos

When a video is included in a web page it is called inline video.

If you plan to employ inline videos in your web applications, be aware that many people find inline videos annoying. Besides note that some users might have turned off the inline video option in their browser.

Best suggestion is to include inline videos only in web pages where the user expects to see a video.

Using a Helper (Plug-In)

A helper application is a program that can be launched by the browser to "help" playing a video. Helper applications are also known as Plug-Ins.

Helper applications could be launched using the <embed> or the <object> tag.

One huge advantage of using a helper application is that you can let some (or all) of the player settings be controlled by the user.

Many helper applications allow manual (or programmed) control over the volume settings and play functions like rewind, pause, stop and play.

Using The <embed> Tag

The purpose of the <embed> tag is to embed multimedia elements in web page.

The subsequent code fragment displays an AVI file embedded in a web page:

Example

    <embed src="video.avi" />

Note: The <embed> tag is deprecated. The World Wide Web Consortium (W3C) suggest using the <object> tag instead.

Using The <object> Tag

The purpose of the <object> tag is to embed multimedia elements in web page.

The subsequent code fragment displays an AVI file embedded in a web page:

Example

    <object data="video.avi" type="video/avi" />

Using A Hyperlink

If a web page includes a hyperlink to a media file, most browsers will use a "helper application" to play the file.

The subsequent code fragment displays a link to an AVI file. If a user clicks on the link, the browser will launch a helper application, like Windows Media Player to play the AVI file:

Example

    <a href="video.avi">Play a video file

SELF CHECK 1.1

  1. Define the importance of multimedia on web world?

  2. Explain the various sound formats used in multimedia?

  3. Give few examples of multimedia WebPages?

1.2 Planning Multimedia Websites:

Advance planning is crucial to the eventual success of a multimedia project. A systematic approach is to be documented. You need to understand different methodologies and assorted cultures of companies. The slant and style is not something that you merely follow but it is something that you select, monitor and drive and tailor as per the requirement. The approach might vary from organization to another and depends on the complexity of the project. The generally followed phases are:

1.2.1 Concept Development:

The starting point for any project is an initial idea or concept. Estimate a rough visualization on storyboard and also cost evaluation, timelines and source of revenue to be generated. Document a legible and concise project proposal that comprise scope of project, approach, and the targeted audience. Once the client and developer have agreed in principle to go ahead with the project, a detailed content outline, schedule and budget can then be drawn up.

The client may not have a clear idea of the software used, preferences, requirements, and the goals and objectives that has to be achieved by the developer. There leads to confusion between developer, customer and user to be managed throughout, and there is much current research on how best to do this.

1.2.2 Requirements Specification:

The next phase is to create a more detailed requirement specification. The requirement specification should cover the minimum hardware and software configurations needed to run the application to meet the requirements of the intended audience and the aims of the application. This can even include content outline along with general navigational and screen layout guidelines. As the project develops the requirement specification it may have to be refined to meet the goals and objectives. In the requirements it should also be specified that when the application would be developed completely and also the total cost.

With this the client and developer comes to an agreement on the scope, deadline and deliverables of the final product. These requirements are gathered through consultation with the client and, typical end-users where ever required. This further can be used as a basis of the test specification to ensure that all the specified requirements have been met.

At this phase communication between the customer and the application producer is considered very crucial. The quality of communication is affected not only by personal communication skills, but also by the customer's knowledge on achievable end, and the producer's comprehension on the subject matter. This 'knowledge gap' can be the single most significant barrier to unambiguous communications.

1.2.3 Design:

The design document gives a picture of the organization of the content and the navigation maps. Here comes the story boarding that envisages the respective screens and sequences, which will be presented to the client to receive the feedback. This shows an estimation of total time to be spent on individual components, deliverables and cost.

1.2.4 Prototype:

At first a small portion of the product is completed in detail to test the design and production process. An outline of the application is also to be developed to test the structure and navigation. This allows the client and the end user to evaluate the product and provide their feedback to revise the product.

1.2.5 Production:

This is the most intensive phase in the development cycle. This phase includes the description of screens, menus, titles and captions, images, animations, audio and video. The proto type is refined to meet the client requirements and satisfaction.

Here the individual components are to be sourced, digitized, and processed. Integration of the elements and synchronization of images, animated objects, formatted text, audio, and video, interactivity, software installation, and programming takes place at this stage. Copyright clearance has to be obtained at this stage.

Some websites like E-commerce, education, training and audio visual entertainment products, and the production is an ongoing issue as there will be constant flow of new products and modification of the old products.

1.2.6 Testing and evaluation:

The program is tested on different platforms to review its functionality. If required, involve the end users in testing the product. The product is set for the final delivery once the developer and the client are satisfied with the product.

Smithson & Hirschheim proposed a three layer model to evaluate the quality of a system. That is Efficiency, Effectiveness and "Understanding". The first two are familiar, although effectiveness can be the source of endless debate, but "understanding" is a more problematic issue dealing with political issues and personal constructs.

1.2.7 Delivery and Support:

With CD and DVD, a "Golden Master" is prepared and sent to the disc duplicator for replication. The associated instructions should be "road-tested" to ensure that the users do not have any problems.

Check the server security and back-up provisions to deliver the product online. In case of any flaws correct the software with in predefined time-lines. This should not include any extra cost. In project plan, along with cost mention the number of days required for developing in case of any err noticed. The project would become unprofitable if the flaws are many, and that even might lead to breach of contract. Post-delivery support may be simple or complex; it's a way of making money or a liability.


SELF CHECK 1.2

  1. xplain the step by step planning of multimedia webpage development?

  2. Briefly explain about the testing and evaluation part?

1.3 SUMMARY

KEY TERMS

    MIDI - Musical Instrument Digital Interface

    MPEG - Moving Pictures Expert Group

    AVI - Audio Video Interleave

    SND - Sound

Reference:

Badrul Huda Khan (1997): Web-based instruction - pages 463

Keith Darlington (2005): Effective website development: tools and techniques - pages 476

Timothy Paul Garrand (2006): Writing for multimedia and the Web: a practical guide to content development for interactive media - pages 478

William W. Lee, Diana L. Owens (2004): Multimedia-based instructional design - pages 445

ACTIVITY

A. True/False Questions

1. Multimedia is widely used by media peoples and game developers. (TRUE/FALSE)

2. Multimedia is normally integrated with multiple forms together. (TRUE/FALSE)

3. The term Multimedia is alleged to date back to 1965 and was used to describe a media show. (TRUE/FALSE)

4. Multimedia comprise of text, lines, codes, programs and mathematical calculations. (TRUE/FALSE)

5. World Wide Web and internet technology was introduced with multimedia technology. (TRUE/FALSE)

6. Text is used for presenting information and conveying ideas on screen. (TRUE/FALSE)

7. To achieve optimal reading speed the length of text lines should be around 48 characters. (TRUE/FALSE)

8. The MIDI format was developed in 1982 by the music industry. (TRUE/FALSE)-

9. Internet radio and on-line music uses the Real Audio Format for audio and video. (TRUE/FALSE)

10. Windows Media is a very common format on the Internet, and also supported by all OS vendors. (TRUE/FALSE)


B. Multiple Choice

1. ___________ should occupy only one-third space of presentation.

   A) The Word

   B) Text

   C) Animation

   D) Borders

2. The MIDI is also known as ____________

   A) Musical Instruction Digital Interface

   B) Musical Instrument Dialogue Interface

   C) Musical Instrument Digital Interchange

   D) Musical Instrument Digital Interface

3. _____________ could be launched by the browser to "help" playing sound.

   A) Helper applications

   B) Real Player or Media Player

   C) Plug-Ins

   

4. AVI is also known as ___________

   A) Audio Virtual Interleave

   B) Audio Video Intercom

   C) Auto Video Interleave

   D) None of the above

5. _____________ could be launched using the <embed> or the <object> tag.

   A) Patches

   B) Updates

   C) Plug-Ins

   D) All of the above

6. Which tag is used to embed multimedia element in a web page?

   A) <embed>

   B) <embed>

   C) <embed> <show>

   D) <embed> <display>

7. Shockwave format videos stored in the _____________ extension.

   A) .swa

   B) .sws

   C) .swg

   D) .swf

8. AIFF is also known as ________ and was developed by _______.

   A) Audio Interchange File Format, Apple - ans

   B) Audio Interacted File Format, Microsoft

   C) Audio Interchange File Formation, Macromedia

   D) Audio Interchange File Format, Cisco

9. Which format is not supported by the all web browsers?

   A) SND

   B) AIFF

   C) MIDI

   D) AVI

10. The SND (Sound) was developed by __________

   A) Aroma

   B) IBM

   C) Microsoft

   D) None of the above


Chapter 1: Answers (True/False Questions)

1.   F           2.    T

3.   F           4.    F

5.   F           6.    T

7.   F           8.    T

9.   T         10.    F

Answer (Multiple Choice Questions)

1.    B           2.     D

3.    D           4.     A

5.    C           6.    A

7.    D          8.     A

9.    B         10.    D

Print Email Download

Share This Essay

Did you find this essay useful? Share this essay with your friends and you could win £20 worth of Amazon vouchers. One winner chosen at random each month.

Request Removal

If you are the original writer of this essay and no longer wish to have the essay published on the UK Essays website then please click on the link below to request removal:

Request the removal of this essay.


More from UK Essays

Paid Writing Services

Free Content

About UK Essays

Order Now

Instant Price