Presentation is loading. Please wait.

Presentation is loading. Please wait.

COM 205 Multimedia Applications

Published byYochana Mahajan Modified over 5 years ago

Similar presentations

Presentation on theme: "COM 205 Multimedia Applications"— Presentation transcript:

1 COM 205 Multimedia Applications
St. Joseph’s College Fall 2004 2/23/2019

2 Designing For the World Wide Web
Chapter 14 Designing For the World Wide Web 2/23/2019

3 Overview Introducing multimedia on the Web.
Designing text for the Web. Creating images for the Web. Adding sounds to Web pages. Creating animation for the Web.

4 Introducing Multimedia on the Web
Launched in 1989, the World Wide Web was not originally designed for integrating multimedia. It was designed as a method of delivering simple text documents formatted in HTML.

5 Working on the Web The Workspace
The usable area of the screen is always smaller than the monitor’s display area. The most widely preferred monitor resolution is 800x600.

6 Working on the Web You can control the horizontal size of a Web page by using the WIDTH attribute in the TD tag in a table. Place the entire contents of your page inside that one constrained cell: <TABLE><TR><TD WIDTH=”500”> … Put your content here </TD></TR></TABLE>

7 Working on the Web The workspace Nibbling Trim image sizes
Reduce bit depth of pictures and sounds Shrink playback windows Choose file formats for best compression

8 Working on the Web The workspace Nibbling HTML and multimedia
<IMG> for inline images <INSERT> for multimedia objects <EMBED> for compound document embedding

9 Basics of Hypertext Markup Language (HTML):
HTML is a markup language. It uses tags to perform functions such as formatting text and embedding media. HTML tags are enclosed by angular brackets. The tags can be written either in upper case or in lower case. They can be bounding or stand-alone tags.

10 Basic HTML (continued)
HTML provides tags for inserting media into HTML documents. These are: The <IMG> tag for inserting inline images. The <EMBED> and <OBJECT> tags for embedding compound documents. The <APPLET> tags for code.

11 Designing Text for the Web
User preference in the browser may alter the way text in a document looks and flows. Ideally, documents must be designed using Times New Roman as a proportional font and Courier as the mono-spaced font.

12 Designing Text for the Web
Controlling fonts Cascading style sheets (CSS) Newspaper columns

13 Designing Text for the Web
OpenType and TrueType are standard methods for displaying typefaces on the Web. Cascading style sheet (CSS) available in dynamic HTML (DHTML) makes font management flexible. It sets text styles across Web pages.

14 Text for the Web Cascading style sheets (CSS) offer greater control over text appearance. a) Styles can be defined and then assigned to blocks of text. b) Styles can be defined in two ways. (1) In the <HEAD> of the HTML document (2) HTML documents can also link to external style sheets

15 Designing Text for the Web
The <FONT> tag: To specify a font, use the FACE attribute of the <FONT> tag. To specify the font color, use the COLOR attribute. To set the size of the text, use the SIZE attribute.

16 Text for the Web Controlling fonts <FONT>
<FONT COLOR=“#FFFFFF”> <FONT SIZE=“+2”>

17 Designing Text for the Web
The <TABLE> tag is used for organizing text into columns. The ALIGN attribute of the <IMG> tag enables text to flow around an image. The HSPACE and VSPACE attributes of the <IMG> tag add space between an image and the surrounding text. The <BR> tag causes text to begin on a new line.

18 Text for the Web Making columns of text
1. Newspaper columns can be produced using invisible tables. 2. Make sure that the text is readable and fits on screen on target platforms.

19 Text for the Web Controlling fonts Cascading style sheets (CSS)
Newspaper columns Flowing text around images <IMG SRC=”gbsky.gif” ALIGN=”left” >

20 Creating Images for the Web
Browsers recognize GIF, PNG, and JPEG image formats Graphical Interchange File (GIF) images are limited to 8 bits of color depth (256 colors). It is a commercial image format. PNG is an open format supported by most image creation programs. Joint Photographic Experts Group (JPEG) uses lossy compression to produce files of size smaller than GIF.

21 Images for the Web GIF 8-bit color depth Animation Transparency
Unisys owns a patent on GIF’s compression scheme GIF files are used for line art and images that contain large areas of the same color. GIF compresses drawings and cartoons that have only a few colors in them much better than JPEG.

22 Images for the Web GIF PNG Similar to GIF No licensing requirements
Browser support is sporadic

23 Images for the Web GIF PNG JPEG 24-bit color depth
Good for photo-realistic images JPEG compression is lossy JPEG can be used for photo-realistic images. JPEG can compress images at a ratio of even 75:1, but they compress very slowly.

24 Images for the Web Using Photoshop
It is the most preferred tool for graphic artists. The native Photoshop format is PSD. PSD files are in RGB mode that is they use maximum color depths. These files are larger in size and contain layers.

25 Images for the Web Using Photoshop

26 Images for the Web Using Photoshop

27 Photoshop When creating images bound for the Web, use a resolution of 72 pixels per inch. Save the original image in a 24-bit loss-less image format. After image manipulation in the RGB mode, save the source image as a PSD file. Changing the mode from RGB Color to Indexed Color changes the color depths of the image.

28 Photoshop To save an image as a JPEG file, flatten and merge all layers into a single bitmap. To save an image as a GIF file, set the mode of the image to Indexed Color. To make an image transparent, allow it to float on the document background. GIF89a formats allow transparency, while JPEGs do not.

29 Images for the Web Backgrounds <BODY BGCOLOR=”#FF9933”>
<BODY BACKGROUND=“images/fabric.gif”>

30 Backgrounds 1. Browsers allow you to place background images or color behind page content. 2. Background coloring a) The background can be colored by adding an attribute to the <BODY> tag, as in <BODY BGCOLOR=”#FF9933”> b) Choose colors carefully. (1)Provide adequate contrast and remember that a number of users are color blind.

31 Background Images Background images
a) Background images are automatically tiled. b) Be extremely careful when choosing background images. (1) Make sure the background doesn’t create readability problems.

32 Images for the Web Backgrounds Sidebars

33 Images for the Web Clickable buttons
<A HREF=”documentToGoTo.html”> <IMG SRC=“imageDisplayed.gif” BORDER=“0”> </A> A graphic image can be made ‘clickable’ to link to another document.

34 Image Maps Image maps are pictures with defined hot spots that link to other documents when a user clicks on them. Web sites display image files using Common Gateway Interface (CGI) programs. In client-side image maps, mouse coordinates and their associated document URLs are included in the client’s HTML document.

35 Images for the Web Image maps
<IMG SRC=“compass.gif” BORDER=“0” USEMAP=“#compass”> <MAP NAME=“compass”> <AREA SHAPE=CIRCLE COORDS=“60,60,10” HREF=“help.htm”> <AREA SHAPE=POLYGON COORDS=“60,60,0,0,120,0” HREF=“back.htm”> <AREA SHAPE=POLYGON COORDS=“60,60,0,120,120,120” HREF=“fwd.htm”> <AREA SHAPE=POLYGON COORDS=“60,60,0,0,0,120” HREF=“navmap.htm”> </MAP>

36 Adding Sound to Web Pages
Plug-ins allows embedding of sounds into HTML documents. Internet Explorer offers the <BGSOUND> tag to play an AU, WAV, or MIDI sound track in a document background. Netscape and Internet Explorer offer the QuickTime plug-in for playing AIFF, MIDI, WAV, and AU formats. Streaming audio is more useful for the Web, where a sound file can start playing as soon as data begins to download.

37 Sound for the Web Background sounds
Internet Explorer allows background sounds with the <BGSOUND> tag. Formats allowed include a) AU b) WAV c) MIDI

38 Sound for the Web Background sounds Internet Explorer
<BGSOUND SRC=“heymon.mid”>

39 Sound for the Web Background sounds Internet Explorer
Plug-ins and sound 1. Browser plug-ins can be used to play sound. 2. Audio capable plug-ins include a) Apple QuickTime b) Windows Media Player 3. Audio can be embedded in a page using the <EMBED> tag.

40 Sound for the Web Background sounds Internet Explorer
Plug-ins and sound <EMBED SRC=“heymon.mid” WIDTH=“200” HEIGHT=“55” AUTOSTART=“false”></EMBED>

41 Sound for the Web Background sounds Internet Explorer
Plug-ins and sound Apple QuickTime Windows Media Player

42 Animation for the Web The <BLINK> and the <MARQUEE> tags provide very limited dynamism to HTML. The GIF89a format specification creates simple animations. It integrates multiple images, or frames, into a single GIF89a file and displays them with programmable delays between them. The <IMG> tag is used to embed a GIF89a multiframe image. Limit animated GIFs to small images.

43 Animation for the Web GIF89a – animated GIFs Plug-ins and players
Macromedia Shockwave

44 Animation for the Web GIF89a Plug-ins and players
Macromedia Shockwave, Director, Flash Apple QuickTime

Download ppt "COM 205 Multimedia Applications"

Similar presentations

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.

Computers: Tools for an Information Age Writing Your Own Web Page: Using HTML and Web Authoring Tools.
CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.

CREATED BY : VIRAL M.KORADIYA. Anchor elements are defined by the element. The element accepts several attributes, but either the Name or HREF attribute.
Iframes & Images Using HTML.

Iframes & Images Using HTML.
Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.

Adobe Photoshop CS Design Professional FOR THE WEB CREATING IMAGES.
Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.

Chapter 17 Creating Images for the Web. Chapter Lessons Learn about Web features Optimize images for Web use Create a button for a Web page Create slices.
1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.

1 IMAGES: A Picture Is Worth a Thousands Words, Image Formats Image Sizes Graphic Tips Image Tag Attributes Centering Images.
Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.

Chapter 4 Adding Images. Inserting and Aligning Images Using CSS When you choose graphics to add to a web page, it’s important to use graphic files in.
Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.

Glencoe Digital Communication Tools Create a Web Page with HTML Chapter Contents Lesson 4.1Lesson 4.1 Get Started with HTML (85) Lesson 4.2Lesson 4.2 Format.
© 2005 ComputerPREP, Inc. All rights reserved. HTML 4.0 and Web Page Design Module I.

© 2005 ComputerPREP, Inc. All rights reserved. HTML 4.0 and Web Page Design Module I.
HYPERTEXT MARKUP LANGUAGE (HTML)

HYPERTEXT MARKUP LANGUAGE (HTML)
Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.

Chapter 3 Adding Images in HTML. Agenda Understanding Web Page Images Prepare Your Images for the Web Insert an Image Specify an Image Size Add Alternative.
University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework.

University of Sunderland CDM105 Session 1. University of Sunderland CDM105 Session 1 Assessment This module is assessed by 2 pieces of practical Coursework.
Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.

Chapter 14-Designing for the World Wide Web. Overview Introducing multimedia on the Web. Designing text for the Web. Creating images for the Web. Adding.
Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.

Chapter 4 Dreamweaver: Part II The Web Warrior Guide to Web Design Technologies.
Building a Web Site Back to Table of Contents. Building a Web Site Fundamentals of Web Design Creating an Attractive Site 2 Building a Web Site Section.

Building a Web Site Back to Table of Contents. Building a Web Site Fundamentals of Web Design Creating an Attractive Site 2 Building a Web Site Section.
_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.

_______________________________________________________________________________________________________________ E-Commerce: Fundamentals and Applications1.
File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.

File Formats COM 366 Web Design & Layout. Native file format –Format native to software program –.psd > PhotoShop default Preserves layers –Use “Save.
Unit 8.2 / Lesson 1 / presentation1a Web Elements.

Unit 8.2 / Lesson 1 / presentation1a Web Elements.
Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.

Chapter 4 Adding Images. Chapter 4 Lessons Introduction 1.Insert and align images 2.Enhance an image and use alternate text 3.Insert a background image.
Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

Colors, Images, & Image Maps. Working with Color Colors are defined in terms of RGB Triplet –Red, Green, Blue –0 to 255 in intensity –(00, 00, 00) is.

Similar presentations

Ads by Google