1 / 27

Chapter 14- Designing for the World Wide Web

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 sounds to Web pages. Creating animation for the Web. Introducing Multimedia on the Web.

turi
Download Presentation

Chapter 14- Designing for the World Wide Web

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

  1. Chapter 14-Designing for the World Wide Web

  2. 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.

  3. 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.

  4. Introducing Multimedia on the Web Workspace: • The most widely preferred monitor resolution is 800x600. • The usable area of the screen is always smaller than the monitor’s display area.

  5. Introducing Multimedia on the Web Nibbling: • Nibbling is an important design principle. • While nibbling, the user has to seek a balance between quality and available bandwidth.

  6. Introducing Multimedia on the Web 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.

  7. Introducing Multimedia on the Web 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.

  8. 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.

  9. 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.

  10. 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.

  11. 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.

  12. Creating Images for the Web • All browsers recognize three image formats, GIF, PNG, and JPEG. • Graphical Interchange File (GIF) images are limited to 8 bits of color depth (256 colors). It is a commercial image format.

  13. Creating Images for the Web • 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.

  14. Creating Images for the Web • GIF versus JPEG. • Adobe Photoshop. • Backgrounds.

  15. GIF Versus JPEG • 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. • JPEG can be used for photo-realistic images. • JPEG can compress images at a ratio of even 75:1, but they compress very slowly.

  16. Adobe 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.

  17. Adobe 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.

  18. Adobe 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.

  19. Backgrounds • The <BODY> tag. • Clickable buttons. • Image maps.

  20. The <BODY> Tag • The BGCOLOR attribute sets the background color for a document. • The TEXT attribute controls the color of the normal text. • The LINK attribute controls the color of an unvisited link. • The VLINK attribute controls the color of a visited link. • The ALINK attribute controls the color of an active link.

  21. Clickable Buttons • A graphic image can be made ‘clickable’ to link to another document. This is done by including the image tag inside the bounding tags of an HTML anchor that points to that document’s URL. • The BORDER attribute of the <IMG> tag should be set to zero.

  22. 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.

  23. Adding Sounds 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.

  24. Creating 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.

  25. Creating Animation for the Web • The <IMG> tag is used to embed a GIF89a multiframe image. • Limit animated GIFs to small images. • Macromedia Shockwave, Director, Flash, and QuickTime are a few plug-ins used for animation.

  26. Creating Animation for the Web Plug-ins and players: • Full animation capability became available to Web developers with the introduction of Macromedia's Shockwave. • Macromedia Flash uses Shockwave to create a .swf (Shockwave Flash) version of the native .fla file. This enables images to be displayed on the Web. • While embedding plug-in or player-supported animation files into a Web page, cross-platform issues should be taken into consideration.

  27. Summary • HTML provides tags for performing varied functions. • The three primary image formats used on the Web are GIF, PNG, and JPEG. • Images, sounds, and animation can be embedded in an HTML file.

More Related