Chapter 4, Sight and sounds of the Internet


Published on

  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Chapter 4, Sight and sounds of the Internet

  1. 1. Sights and Sounds of the Internet Chapter 4
  2. 2. You Will Learn… <ul><li>How to enhance a web site with multimedia </li></ul><ul><li>How MIME facilitates the use of non-text files </li></ul><ul><li>How to download and use helper applications and plug-ins </li></ul><ul><li>How to add sound files to a web site </li></ul>continued…
  3. 3. You Will Learn… <ul><li>About different graphics file types and how to use them on web sites </li></ul><ul><li>How streaming multimedia technology works, and how to add movies, videos, and streaming sound to web pages </li></ul><ul><li>How video conferencing works on the Internet </li></ul>
  4. 4. Enhancing Web Sites with Multimedia <ul><li>Non-streaming data </li></ul><ul><ul><li>Multimedia data that is first downloaded from a web set and then played </li></ul></ul><ul><li>Streaming data </li></ul><ul><ul><li>Plays as it is being downloaded </li></ul></ul><ul><ul><li>Examples: videoconferencing and listening to the radio from a web site </li></ul></ul>
  5. 5. Streaming Data
  6. 6. MIME (Multipurpose Internet Mail Extensions) <ul><li>A protocol used to transport non-text files attached to e-mail messages and web pages across the Internet </li></ul><ul><li>Identifies a file as belonging to a category and a subcategory such as Image/gif </li></ul>
  7. 7. Early Attempts to Work with Non-text Files <ul><li>When the web and e-mail first were developed, no provision was made to send any data that was not pure ASCII text (binary files) </li></ul><ul><li>Early solutions </li></ul><ul><ul><li>Uuencode and uudecode </li></ul></ul><ul><ul><li>BinHex </li></ul></ul><ul><li>Current MIME method of transmitting non-ASCII files over the Internet </li></ul><ul><ul><li>RFC 1521 </li></ul></ul>
  8. 8. How MIME Works <ul><li>Declare MIME type in header information </li></ul><ul><li>Encode the file </li></ul><ul><li>Send the files over the Internet </li></ul><ul><li>Client receives the data </li></ul><ul><li>Interpret the MIME file </li></ul>
  9. 10. Viewing the Source Data
  10. 11. MIME File Types <ul><li>Text </li></ul><ul><li>Multipart </li></ul><ul><li>Application </li></ul><ul><li>Message </li></ul><ul><li>Image </li></ul><ul><li>Audio </li></ul><ul><li>Video </li></ul><ul><li>Model </li></ul>
  11. 13. Helper Applications and Plug-ins <ul><li>Helper application (external viewer) </li></ul><ul><ul><li>Used by e-mail applications to display files </li></ul></ul><ul><ul><li>Opens the file in a separate window and does not involve the e-mail software </li></ul></ul><ul><ul><li>Can work independently of a browser </li></ul></ul><ul><li>Plug-in (browser extension) </li></ul><ul><ul><li>Enhances the browser, enabling the browser to perform the task </li></ul></ul><ul><ul><li>Requires the browser in order to work </li></ul></ul>
  12. 14. Helper Applications and Plug-ins
  13. 15. Helper Applications and Plug-ins
  14. 16. Helper Applications and Plug-ins
  15. 17. Helper Applications and Plug-ins
  16. 18. Downloading and Installing Plug-ins
  17. 19. Downloading and Installing Plug-ins
  18. 20. Non-streaming Sound Files <ul><li>Browsers generally don’t know how to play sound files without the help of a plug-in or browser extension </li></ul><ul><ul><li>Internet Explorer uses Windows Media Player </li></ul></ul><ul><ul><li>Netscape Navigator uses RealPlayer and Beatnik Player </li></ul></ul>
  19. 21. Storing Sound in Files <ul><li>MIDI (musical instrument digital interface) </li></ul><ul><li>WAV (wave) </li></ul><ul><li>WMA (Windows Media Audio </li></ul><ul><li>AU (UNIX Audio) </li></ul><ul><li>AIFF </li></ul><ul><li>MPEG (Moving Pictures Experts Group) </li></ul>
  20. 22. Storing Sound in Files <ul><li>MPEG technology uses lossy compression (compresses data by dropping unnecessary or redundant data) </li></ul><ul><li>Sounds are converted to digital data using a microphone and a sound card </li></ul><ul><li>A sound card receives analog flow of sound from the microphone and digitizes it (converts it to bits: 1s and 0s) </li></ul>
  21. 23. A Sound Card
  22. 24. Storing Sound in Files <ul><li>Sampling </li></ul><ul><ul><li>Process of approximating an infinite flow of sound </li></ul></ul><ul><li>CODEC (compressor/decompressor) </li></ul><ul><ul><li>Compressing and later decompressing sound, animation, and video files </li></ul></ul><ul><ul><li>Also stands for coder/decoder when referring to digital-to-analog conversion </li></ul></ul>
  23. 25. Recording Sound
  24. 26. Adding Sound to a Web Site <ul><li>Use any of these tags: </li></ul><ul><ul><li><BGSOUND> </li></ul></ul><ul><ul><li><EMBED> </li></ul></ul><ul><ul><li><OBJECT> </li></ul></ul><ul><ul><li><HREF> </li></ul></ul>
  25. 27. The <BGSOUND> Tag
  26. 28. The <EMBED> Tag
  27. 29. Sound Used by Different Browsers <ul><li>Use <OBJECT> tag to embed sound in a web page to be interpreted by both Netscape and Internet Explorer </li></ul><ul><li>Example: <OBJECT DATA = “chimes.wav”> </OBJECT> </li></ul>
  28. 30. Sound Files as Hyperlinks <ul><li>Refer to the sound file name when using <A HREF> tag </li></ul>
  29. 31. Sound Files as Hyperlinks
  30. 32. Sound Files as Hyperlinks
  31. 33. Graphics on Web Pages <ul><li>Image map </li></ul><ul><ul><li>A graphic on a web page that contains multiple hyperlinks </li></ul></ul><ul><ul><li>Also called clickable map </li></ul></ul>
  32. 34. Graphics on Web Pages
  33. 35. Graphic File Types <ul><li>Bit-mapped image (raster image) </li></ul><ul><ul><li>Composed of many small colored or gray dots that look like an image when viewed as a whole </li></ul></ul><ul><ul><li>Easy to import; easy to display </li></ul></ul><ul><ul><li>Doesn’t enlarge as well as a vector image </li></ul></ul><ul><li>Vector image (object image) </li></ul><ul><ul><li>Created by mathematical equations that communicate how to draw lines and shapes to create the image to the software </li></ul></ul>
  34. 36. Bitmapped Image
  35. 37. Bitmapped Image
  36. 38. Graphic File Types <ul><li>GIF (Graphical Interchange Format) </li></ul><ul><li>JPEG (Joint Photographic Experts Group) </li></ul><ul><li>PNG (Portable Network Graphics) </li></ul><ul><li>BMP (bit-mapped) </li></ul><ul><li>TIFF (Tagged Image File Format) </li></ul><ul><li>PDF (Portable Document Format) </li></ul><ul><li>RTF (Rich Text Format) </li></ul><ul><li>PostScript and EPS (Encapsulated PostScript) </li></ul>
  37. 39. GIF Files <ul><li>Most popular graphics files on the web </li></ul><ul><li>Bit-mapped files; easily read </li></ul><ul><li>Support animation, transparent background, and interlacing </li></ul><ul><li>Use 256 colors and dithering </li></ul>
  38. 40. Transparent Background
  39. 41. JPEG Files <ul><li>Most often used to store photographs </li></ul><ul><li>More compressed than GIF files; use lossy compression method </li></ul><ul><li>Do not support transparent backgrounds or animation, but support interlacing (progressive JPEG) </li></ul>
  40. 42. PNG Files <ul><li>Use lossless compression, interlacing, and transparent background color </li></ul><ul><li>Do not support animation </li></ul>
  41. 43. BMP Files <ul><li>Store images as many dots of varying color </li></ul><ul><li>Do not support high resolution, animation, interlacing, or compression </li></ul><ul><li>Not used much on the Web </li></ul><ul><ul><li>Not compressed </li></ul></ul><ul><ul><li>Not supported by most browsers </li></ul></ul><ul><li>Popular on PCs </li></ul><ul><ul><li>Easy to create </li></ul></ul><ul><ul><li>Most computers have software to support them </li></ul></ul>
  42. 44. TIFF Files <ul><li>Bit-mapped images that can use either lossless or lossy compression and offer strong support for color </li></ul><ul><li>Popular for desktop publishing applications </li></ul><ul><li>Often used for photographs, graphics, and screen captures </li></ul><ul><li>Not commonly used on web sites </li></ul><ul><ul><li>Can be large </li></ul></ul><ul><ul><li>Not supported by most browsers without a plug-in </li></ul></ul>
  43. 45. PDF Files <ul><li>Proprietary file format by Adobe Systems </li></ul><ul><li>Provide images of the formatted document that allow anyone to view and print, but not edit the file </li></ul>
  44. 46. RTF Files <ul><li>Convert a word processing document to ASCII code so that another word processor can read and edit the file </li></ul><ul><li>Lose original formatting but retain ability to be edited </li></ul>
  45. 47. PostScript and EPS Files <ul><li>PostScript </li></ul><ul><ul><li>A page description language developed by Adobe Systems </li></ul></ul><ul><ul><li>Used to communicate printing directions to a PostScript printer </li></ul></ul><ul><li>EPS </li></ul><ul><ul><li>A file format developed by Adobe </li></ul></ul><ul><ul><li>Includes directions for printing a document to a PostScript printer </li></ul></ul><ul><ul><li>Includes a print preview of the document </li></ul></ul>
  46. 48. Web Page Backgrounds <ul><li>Use the BACKGROUND attribute of the <BODY> tag </li></ul><ul><li>Example: <body background=“TEXTURE.GIF”> </li></ul><ul><li>Can be GIF or JPEG files </li></ul>
  47. 49. Animated Graphics <ul><li>Add the LOOP attribute to the <IMG SRC> tag </li></ul><ul><li>Example: <IMG SRC=“animated.gif” LOOP=INFINITE> </li></ul>
  48. 50. Animated Graphics
  49. 51. Animated Graphics <ul><li>Creating images </li></ul><ul><ul><li>Modify a graphic so that you have images for each frame of the animation </li></ul></ul><ul><li>Creating animation </li></ul><ul><ul><li>Join the images together to create an animation sequence </li></ul></ul>
  50. 52. Creating Images
  51. 53. Creating Images
  52. 54. Creating Images
  53. 55. Creating Animation
  54. 56. Optimizing Page Download Time <ul><li>Keep total size of all files to be downloaded for a single page to 50K </li></ul><ul><li>Break large PDF files into several shorter files </li></ul><ul><li>Use 8-bit graphics instead of 24-bit </li></ul><ul><li>Use compressed audio or graphics files </li></ul><ul><li>Use GIF files for graphics and JPEG files for photographs </li></ul>continued…
  55. 57. Optimizing Page Download Time <ul><li>Use solid background colors </li></ul><ul><li>Use fewer colors </li></ul><ul><li>Set dimensions of image as small as practical </li></ul><ul><li>Use graphics-crunching utilities </li></ul><ul><li>Do not save an image in one format and then another </li></ul>
  56. 58. Streaming Multimedia <ul><li>Can originate from a stored file or from live data arriving at the server </li></ul><ul><li>Uses the client/server architecture </li></ul><ul><li>Is often buffered by the client plug-in </li></ul>
  57. 59. Streaming Multimedia Architecture <ul><li>A media client and a media server handle the actual streaming data request and transmission </li></ul>
  58. 60. Streaming Multimedia Architecture
  59. 61. Protocols <ul><li>Streaming data uses the HTTP or RTSP (Real Time Streaming Protocol) protocol to format data </li></ul><ul><li>These protocols use either UDP (User Datagram Protocol) or RTP (Real Time Transport Protocol) to transmit data </li></ul>
  60. 62. Metafiles <ul><li>Files that contain information about other files (eg, location and filename of the audio or video data) </li></ul><ul><li>List the protocol first, the server name next, and the filename last </li></ul><ul><li>Example: pnm:// </li></ul>
  61. 63. How Metafiles Transmit Streaming Data <ul><li>Web page requests metafile, which is downloaded to the client </li></ul><ul><li>HTML informs browser of the type of plug-in required </li></ul><ul><li>Plug-in is loaded and creates a link to the data on the server as identified by the metafile </li></ul>
  62. 65. Streaming Multimedia Plug-ins <ul><li>QuickTime </li></ul><ul><li>RealPlayer by Real Networks </li></ul><ul><li>Microsoft Windows Media Player </li></ul><ul><li>Flash and Shockwave by Macromedia </li></ul>
  63. 66. Streaming Multimedia Plug-ins
  64. 67. QuickTime <ul><li>Provides framework for synchronizing video, sound, and text in a web-based presentation </li></ul><ul><li>Supports several video compression techniques </li></ul><ul><li>Supports non-streaming data, stored streaming data, and live streaming data </li></ul><ul><li>Supports many standard video, audio, and graphics formats (WAV, MIDI, Flash, and AVI) </li></ul><ul><li>3D version: QuickTime Virtual Reality (QTVR) </li></ul>
  65. 68. RealPlayer <ul><li>Uses its own proprietary audio, video, graphics, and text files </li></ul><ul><li>Supports several multimedia video and audio file types </li></ul>
  66. 69. Windows Media Player <ul><li>Free plug-in that comes with Windows </li></ul><ul><li>Supports several popular file types </li></ul>
  67. 70. Flash and Shockwave <ul><li>Flash </li></ul><ul><ul><li>Uses vector graphics to produce animated graphics with sound </li></ul></ul><ul><li>Shockwave </li></ul><ul><ul><li>Used mostly in audio and video production </li></ul></ul>
  68. 71. Flash
  69. 72. Movies and Videos on the Web <ul><li>Advantage: easy access instead of high quality </li></ul><ul><li>Video file types </li></ul><ul><ul><li>AVI (Audio Video Interleaved) </li></ul></ul><ul><ul><li>MPEG </li></ul></ul><ul><ul><li>QuickTime </li></ul></ul><ul><ul><li>ASF (Advanced Streaming Format) </li></ul></ul><ul><ul><li>Windows Media File with Audio and/or Video (WMV) </li></ul></ul>
  70. 73. HTML Tags Used to Add Movies and Videos to Web Pages <ul><li><EMBED> </li></ul><ul><li><OBJECT> </li></ul><ul><li><APPLET> </li></ul>
  71. 74. Creating Video for a Web Site <ul><li>Create video using a camcorder </li></ul><ul><li>Download video to the PC </li></ul><ul><li>Edit the video </li></ul><ul><li>Compress video data </li></ul><ul><li>Place video file on web site and build web pages to view it using browser plug-ins </li></ul><ul><li>View the video by the browser </li></ul>
  72. 76. Types of Video Camcorders <ul><li>Analog </li></ul><ul><li>Digital </li></ul>
  73. 77. Live Web Broadcasts
  74. 78. Video Conferencing over the Internet <ul><li>Live data is filmed by: </li></ul><ul><ul><li>Digital camcorder and continuously downloaded to a computer using a port on the computer, or </li></ul></ul><ul><ul><li>Analog camcorder that downloads data to a video capture card that can support inputting live data </li></ul></ul><ul><li>Data is input into software and converted to a format that can be made available to the live web broadcast </li></ul><ul><li>A browser receives a live broadcast using a plug-in </li></ul>
  75. 79. Sample Screen from a Video Conference
  76. 80. Sample Screen from a Video Conference
  77. 81. Sample Screen from a Video Conference
  78. 82. NetMeeting <ul><li>Allows you to have your own video conference calls if you have a microphone, PC camera, and speakers installed on a Windows 9x, Windows NT, or Windows 2000 system </li></ul><ul><li>Client software that uses a directory server </li></ul>
  79. 83. Using NetMeeting
  80. 84. Installing NetMeeting
  81. 85. Installing NetMeeting
  82. 86. Installing NetMeeting
  83. 87. Starting NetMeeting
  84. 88. A NetMeeting Session
  85. 89. Chapter Summary <ul><li>How to add audio, video, and enhanced graphics to web sites </li></ul><ul><li>How audio and video files are created, compressed, transported, and interpreted </li></ul><ul><li>Software available to work with multimedia files </li></ul><ul><li>Technology needed to support a client that accesses multimedia web sites </li></ul>