Interactive Multimedia. Multimedia and the World Wide Web

Similar documents
1/27/2013. Outline. Adding images to your site. Images and Objects INTRODUCTION TO WEB DEVELOPMENT AND HTML

1.6 Graphics Packages

STAR OFFICE BASE. Lesson 8

Working with Images and Multimedia

M4.2-R4: INTRODUCTION TO MULTIMEDIA

Page Content. Inserting Text To add text to your document, you can type the text directly or use Cut or Copy and Paste or Paste Special.

Computers Are Your Future Prentice-Hall, Inc.

The Environment Key windows often used in Director MX 2004 : Stage, Cast, Score, Properties Inspector, Control panel and message window.

Inserting multimedia objects in Dreamweaver

HTML5: MULTIMEDIA. Multimedia. Multimedia Formats. Common Video Formats

Standard File Formats

MULTIMEDIA AND CODING

Multimedia on the Web

Multimedia Production and Web Authoring

PowerPoint Level 2. An advanced class in presentation software. Phone: SCIENCE SKILL SOLUTIONS TECH CENTER

3.01C Multimedia Elements and Guidelines Explore multimedia systems, elements and presentations.

SMK SEKSYEN 5,WANGSAMAJU KUALA LUMPUR FORM

New Media Production week 3

Getting Started. Most likely, if you ve purchased a copy of Adobe Flash CS3 Professional, Introducing Adobe Flash CS3 Professional 3

M4-R4: INTRODUCTION TO MULTIMEDIA (JAN 2019) DURATION: 03 Hrs

Advanced High Graphics

How to set up a local root folder and site structure

255, 255, 0 0, 255, 255 XHTML:

Unit 6. Multimedia Element: Animation. Introduction to Multimedia Semester 1

Different File Types and their Use

INFS 2150 / 7150 Intro to Web Development / HTML Programming

Compression and File Formats

GRAPHIC FILE FORMATS / SOFTWARE SELECTION / SOFTWARE COMPATIBILITY

CHAPTER 2 Information processing (Units 3 and 4)

Flipping Book Publisher for Image also provides different output methods for you to publish your

Industrial Technology

Welcome. Web Authoring: HTML - Advanced Topics & Photo Optimisation (Level 3) Richard Hey & Barny Baggs

Flip Book Maker for Image Scan files into Page-flipping ebooks directly. User Documentation. About Flip Book Maker for Image. Detail features include:

Audio,Video & Lighting

Multimedia Applications I ARKANSAS CAREER AND TECHNICAL EDUCATION, BUSINESS/MARKETING TECHNOLOGY, MULTIMEDIA APPLICATIONS I & II

Internet. Class-In charge: S.Sasirekha

Lesson 5: Multimedia on the Web

The diverse software in the Adobe Creative Suite enables you to create

Chapter 5 Images. Presented by Thomas Powell. Slides adopted from HTML & XHTML: The Complete Reference, 4th Edition 2003 Thomas A.

Skill Area 325: Deliver the Multimedia content through various media. Multimedia and Web Design (MWD)

Image Types Vector vs. Raster

Lesson 5: Multimedia on the Web

Webbed Documents 1- Malcolm Graham and Andrew Surray. Abstract. The Problem and What We ve Already Tried

DIGITAL DESIGN. advertising specs

1.1 Technical Evaluation Guidelines and Checklist:

Dazzle the Web with Dynamic Dreamweaver, Part II

Part III: Survey of Internet technologies

CTIS 155 Information Technologies I. Chapter 5 Application Software: Tools for Productivity

Lecture 19 Media Formats

Blackboard staff how to guide Accessible Course Design

WEB GRAPHICS ADOBE PHOTOSHOP CS3. Learning Outcomes:

Dreamweaver Basics. Planning your website Organize site structure Plan site design & navigation Gather your assets

lesson 24 Creating & Distributing New Media Content

The Media Department File and Transfer Quick Guide 2015/16. Created by Robert Perry

3 Data Storage 3.1. Foundations of Computer Science Cengage Learning

Web graphics. Introduction

1. Introduction to Multimedia

intergraded format for quickly viewing, "Burn to CD" to output your digital books directly on CD ROM.

Mobile MOUSe WEB SITE DESIGN ONLINE COURSE OUTLINE

Final Study Guide Arts & Communications

Chapter 2 The Internet and World Wide Web

LORD PCAA LIONS Mat.Hr.Sec School, Reserve Line, Sivakasi

Prentice Hall. Learning Media Design with Adobe CS4 (Skintik) Alabama - Course of Study - Interactive Multimedia Design

vinodsrivastava.com FLASH

UNDERSTANDING MUSIC & VIDEO FORMATS

Introduction to the Internet and World Wide Web p. 1 The Evolution of the Internet p. 2 The Internet, Intranets, and Extranets p. 3 The Evolution of

SOFTWARE SKILLS BUILDERS

An internet or interconnected network is formed when two or more networks are connected.

INTRODUCTION TO MULTIMEDIA. Chapter 3 Multimedia Authoring

The diverse software in Adobe Creative Suite 2 enables you to create

m ac romed ia D r e a mw e av e r Curriculum Guide

Chapter 5 Multimedia Software

Autodesk Moldflow Adviser AMA Reports

color bit depth dithered

HTML 5 and CSS 3, Illustrated Complete. Unit K: Incorporating Video and Audio

Universal Ad Package (UAP)

Common Technology Words and Definitions

Frequently Asked Questions about Text and Graphics

PUBLISHING FLASH. Lesson Overview

Industrial Technology

Professional Powerpoint Presentation II

HTML/XML. XHTML Authoring

Screencast.com. Getting the Most from Your Screencast.com Account. July TechSmith Corporation. All rights reserved.

Tutorial: Overview. CHAPTER 2 Tutorial

More HTML. Images and links. Tables and lists. <h1>running in the family</h1> <h2>tonight 9pm BBC One</h2>

Introduction to Computer Graphics (CS602) Lecture No 03 Graphics Systems

Content Evaluation Template

Elementary Computing CSC 100. M. Cheng, Computer Science

Computing Key Skills

DjVu Technology Primer

Creative presentations with Microsoft PowerPoint

Edexcel CiDA Course Overview

This type of content can be added to any content area (such as Subject Materials) or a Learning Module.

Specialized Application Software The McGraw-Hill Companies, Inc. All rights reserved.

Building EZ Picture Books for the Kindle. Copyright 2013 by Rob Smith All Right Reserved

Independence Community College Independence, Kansas

And program Office to FlipBook Pro is powerful enough to convert your DOCs to such kind of ebooks with ease.

SYLLABUS. Departmental Syllabus. Advanced Web Page Design. Departmental Syllabus. Departmental Syllabus. Departmental Syllabus. Departmental Syllabus

Multiple-Choice Questions

11_Mitchell_indexFinal.qxd 8/25/06 10:18 AM Page 195 Index

Transcription:

Interactive Multimedia Multimedia and the World Wide Web

Multimedia and WWW What is Multimedia? why is it important? Who needs to know about Multimedia? Interactive Multimedia hypermedia, hypertext media types in multimedia system world wide web (www) text for the web image for the web sound for the web animation for the web

Multimedia and Shockwave Page Design Consideration choosing platform Multimedia and the bandwidth Colours & screen size in MM

What is Multimedia? Multimedia is the use of a computer to present and combine text, graphics, animation, audio, and video with links and tools that let the user navigate, create, interact, and communicate. Why it is important? 1. Multimedia is highly affective. 2. Multimedia will help in spread the information age.

Who needs to know about Multimedia? Anyone who plans to learn, teach, work, play, buy or sell in the information society needs to know about Multimedia!!! Interactive Multimedia when the end user (the viewer of a multimedia projects) need to control what elements are delivered it became Interactive Multimedia. Hypermedia or Hypertext Deff: when we provide a structure of linked elements through which the user can navigate, interactive multimedia became hypermedia.

Hypermedia provide a way of representing and managing information in flexible and non-linear way that is appropriate for many MM applications. The most well-known hypermedia programs are hypercard for Mac and Toolbook for windows. Media types in Multimedia system 1. Text ; Multimedia might be without text, but most multimedia use text because use it is such an effective way to communicate ideas and provide instructions to the users. There are three kinds of text: a. printed text b. scanned text c. hypertext: the text that has been linked. D. electronic text: refer to the text, which is available in machine ( readable form).

2. Graphics: the native format for Microsoft windows environment is Bitmap with.bmp as extension. Bitmap files currently support color images at 1, 4, 8 and 24 bits. The popularity of windows has made the bitmap format very popular as standard for multimedia applications. Other formats :.gif.jpg and.pic 3. Digital video file format : AVI ( audio video interleave ) is the standard developed by Microsoft. The extension is (.avi ) it is highly depending on the type of hardware used to playback the images. For example : a 486 machine can handle images with 320x240 pixel, while a Pentium Chip with accelerator graphics card can provide full screen 640x480 pixels. Other formats:.mov and.mpg.

4. Animation Basic rules of animation. 1- squash and stretch: made distortion to the shape. Ex; rubber ball. 2. Slow in- slow out : used to remove the sudden jerky motion. 3- stage the action properly: isolate the events, so one event at a time occupies the viewer attention.

4. Animation Types of animation: 1. Page flipping: (from book flipping, the frames can be deleted, rearranged and copied). 2. Cell animation: create one background, then arrange pieces of cells over it. 3. Object animation: moving unchanging object over a series of frames.

5. Audio Wave is the standard developed by Microsoft and IBM with.wav as extension. It is used extensively for audio files transmitted over the Internet. Other formats:.mid,.ra, and.au

The world wide web is a collection of web pages that are relevant to the site or organization. Each of web pages is made up of text, graphics and some animation. A web page is written in its own language known as HTML or Hypertext Markup Language. A hypertext document lets the user jump to another area in the same site or even to another site by clicking on a hyperlink. Media considerations when used on the Web! 1. Text for the Web: viewers of your web site may not view the same preferred font that you used to design your web page because user preferences in the browser may alter the way text in your document looks and flows.

2. Image for the Web Browsers typically recognize two image formats ( GIF and JPEG ). GIF images are limited to 8-bits color ( 256 colors). JPEG images contain 24-bits of color depth ( million of colors ). JPEG is powerful but Lossy compression method. Furthermore,JPEG produces files as much as 10 times compressed as GIF. When to use GIF and JPEG? A. use GIF files for Logos, icon, line art and simple images. B. use JPEG files for photos and complex images.

Considerations of using images in the web!!!! 1. Physical size of inline images: most standard computer display at 640x480 on (13-15 ) inch monitors. Netscape default to width of 500 pixels, so it must take in consider and keep the image smaller than this width. 2. Scanning images : most monitors are only capable of displaying at 720 dpi, so don t scan at 300, 1200, 2400, etc.

As this will increase the file size with no noticeable improvement in image quality and slow the loading time down. 3. file sizes for the image: the fewer colors in the image the smaller the file size. Note: the entire page (image and text ) should no take longer than 30 seconds to load- therefore aim at limiting a page to 30 KB size.

3. Sound for the Web As the Web has developed, sound has became more important, and plug-in currently allow embedding sound into documents. Microsoft Explorer offer the <BGSOUND> tag. To play on.au,.wav, and.midi in the background. Streaming audio: is very important for the Web, where a sound files can start playing as soon as data begin coming in streaming audio is provided by the LiveAudio plug-in, like (Stream work) and (Real Audio).

4. Animation for the Web It is possible to make simple animation by putting multible images or frames into a single file, and displaying them with programmable delay between them, that came through using some software like Microsoft Gif animator. Then we can use <IMG> tag to play that animation with Netscape navigator. Ex: <IMG SRC= image1.gif > Macromedia introduced shockwave to allow the animation and interactivity of its tool, Director to be embedded into pages viewed by Netscape Navigator.

Multimedia and Shockwave Macromedia developed Shockwave as a plug-in into Web browsers. Unlike Java, which require programming skills, shockwave is simply a piece of software that is used with your Web browser (like Netscape) to view Director movies, which should be embedded in your web site on the Net. Theses Web sites are called Shocked sites and Director movies embedded range from animation bullets and text in a Web page to interactive games. Afterburner: animation that are created with Director can have a large file size. In order to view these animation in a Web page effortlessly, these files have to be compressed

Multimedia and Shockwave Shockwave works with a compression utility called Afterburner, it offers 40-70 percent ratio of lossless compression. This means that the animation created can go from it is native format of about 50 KB down to about 4 KB. And with the current Internet bandwidth of 28.8 kbps, these animation can be played back within the Web pages easily.

Page Design Considerations when designing Web Pages consideration should be given to people with disabilities, especially for the people who are visually impaired and rely on the text readers to vocalize the information. On line information on creating Web pages for people with disabilities may be found at the following sites: -http://trace.wise.edu/world -http://www.direcsa.org.au when creating graphics for the background and when using certain color combinations it is useful to check out how your pages are likely to appear on other platforms such as Mac and PC.

Multimedia and the bandwidth Definition: bandwidth is how much data, expressed in bits per second (bps) you can send from one computer to another in a given amount of time. Greater bandwidth download the media. more speed to upload and Lower bandwidth download the different media. less speed to upload and

Multimedia and the bandwidth at low bandwidth a page of text with (3,000 bytes) can take less than a second to send, but an uncompressed color image about (300,000 bytes) can take a few minutes, and colour image with (900,000 bytes) size can take many minutes to send. To work with the constraints of this challenging bottleneck, multimedia developers on the Internet have put a few options, like : 1. Compress data as highly as possible before transmitting. 2. Don t use color depth than absolutely needed.

Choosing the platform Not all Web browsers support the latest HTML tags, it is therefore good to check your work on various workstations, Mac s and PC s at: --different screen resolution levels. --different memory capacities. And try to use different Web Browsers.

Colours & screen size in Multimedia Colours display or colours monitors measured along the diagonal. The most typical sizes of monitors ranges from 12 inch to 19 inch, larger monitors are very expensive and normally are purchased for classrooms where many people need to be able to see the display. Dependent of the number of inches is the number of pixels your computer can display on the monitor. The minimum number for multimedia is (640x480) pixels. Other common pixels grids are 800x600, 1024x768, and 1360x1024; these high resolution monitors can also display the more common 640x480 graphics.

Colours: Colours & screen size in Multimedia older computers with VGA (video graphic array ) can only display 16 colours on 640x480 pixels grid. For multimedia we need SVGA (super VGA), which can display 256 colours chosen from palette of more than 16 million colours. Colours principles: 1- use colour to increase the informational contents. 2. Consider the requirements of the task. 3. Consider the real world representation.