Chapter 7 Multimedia

2,316 views

Published on

Published in: Technology, Art & Photos
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,316
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
38
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Chapter 7 Multimedia

  1. 1. Chapter 7 Experiencing Multimedia
  2. 2. Learning Objectives <ul><li>Explain the role of plug-ins and helper applications in supporting multimedia on the Web. </li></ul><ul><li>Demonstrate how to download and install plug-ins. </li></ul><ul><li>Explain how images are supported by HTML. </li></ul><ul><li>Examine and evaluate the different image formats suitable for Web use. </li></ul>
  3. 3. Learning Objectives <ul><li>Summarize how Internet audio and streaming audio and video works. </li></ul><ul><li>Explain peer-to-peer file sharing networks. </li></ul><ul><li>Differentiate between the various methods used to create animated content on the Web. </li></ul><ul><li>Demonstrate how to use the Windows Media Player. </li></ul>
  4. 4. Chapter Focus <ul><li>Browsers and Multimedia </li></ul><ul><li>Images </li></ul><ul><li>Audio </li></ul><ul><li>Animated Content </li></ul><ul><li>Windows Media Player </li></ul>
  5. 5. Browsers and Multimedia <ul><li>The use of more than one type of media </li></ul><ul><ul><li>Text </li></ul></ul><ul><ul><li>Graphics </li></ul></ul><ul><ul><li>Animated graphics </li></ul></ul><ul><ul><li>Video </li></ul></ul><ul><ul><li>Audio </li></ul></ul><ul><ul><li>Hypertext </li></ul></ul><ul><li>Browser extensions </li></ul><ul><ul><li>Extend the function of a browser </li></ul></ul><ul><ul><li>Helper Applications </li></ul></ul><ul><ul><li>Plug-ins and ActiveX Controls </li></ul></ul>
  6. 6. Browsers and Multimedia <ul><li>Helper Applications </li></ul><ul><ul><li>Stand-alone programs that a browser can call on to display different media content once the browser downloads the content </li></ul></ul><ul><ul><li>When a browser encounters a file it looks at the file extension to determine its MIME (Multipurpose Internet Mail Extension) </li></ul></ul>
  7. 7. Browsers and Multimedia <ul><li>Helper Applications </li></ul><ul><ul><li>Browsers use MIME type to determine how to display or handle a file </li></ul></ul><ul><ul><li>For example, if the browser is asked to display a file with a .pdf extension it looks for a copy of Adobe Acrobat Reader application and opens the program to display the file </li></ul></ul>
  8. 8. Browsers and Multimedia <ul><li>Plug-ins and ActiveX Controls </li></ul><ul><ul><li>Two most common plug-in types are Netscape-style plug-ins and ActiveX Controls </li></ul></ul><ul><ul><li>ActiveX Controls help expand Internet Explorer capabilities but can let spyware, adware, and other programs install themselves without knowledge of user </li></ul></ul><ul><ul><li>Disabling ActiveX controls is one solution to potential danger </li></ul></ul>
  9. 9. Browsers and Multimedia <ul><li>Plug-ins and ActiveX Controls </li></ul><ul><ul><li>Small programs that extend the capability of browsers in dealing with different types of media </li></ul></ul><ul><ul><li>Not stand-alone </li></ul></ul><ul><ul><li>Do not require content to be downloaded </li></ul></ul><ul><ul><li>Plug-ins reside in a browser’s plug-ins folder inside browser application folder </li></ul></ul>plug-ins folder plug-ins
  10. 10. Browsers and Multimedia Review <ul><li>What is the difference between a helper application and a plug-in? </li></ul><ul><li>What are MIME types, and what role do they play in browser functionality? </li></ul><ul><li>Why do some computer users disable ActiveX controls? </li></ul>
  11. 11. Images <ul><li>Images in Web pages are not saved as part of the Web page document, but exist as separate files </li></ul><ul><li>The file size of an HTML page plus all of its images added together should be less than 100 KB whenever possible </li></ul><ul><li>An image repeated on a Web page is only loaded once </li></ul>
  12. 12. Images How images are displayed
  13. 13. Images <ul><li>Image Formats </li></ul><ul><ul><li>Bitmap or raster files </li></ul></ul><ul><ul><ul><li>Resolution dependent </li></ul></ul></ul><ul><ul><ul><li>Image quality will be adversely affected if an image is enlarged or reduced </li></ul></ul></ul><ul><ul><ul><li>Uncompressed bitmap file formats produce file sizes too large for Web use </li></ul></ul></ul>
  14. 14. Images <ul><li>Image Formats </li></ul><ul><ul><li>GIF images </li></ul></ul><ul><ul><ul><li>Most commonly used on the Web </li></ul></ul></ul><ul><ul><ul><li>Result of lossless technology that shrinks an image’s file size without sacrificing any of the original data </li></ul></ul></ul><ul><ul><ul><li>Supports only 256 colors </li></ul></ul></ul><ul><ul><ul><li>Often used for drawings or illustrations </li></ul></ul></ul>
  15. 15. <ul><ul><ul><li>Interlacing allows the Web browser to display an image gradually as the image downloads </li></ul></ul></ul><ul><ul><ul><li>Transparency allows Web page background color to show through a selected portion of an image </li></ul></ul></ul><ul><ul><ul><li>Animated GIFs create an illusion of motion by instructing a browser to load two or more images in succession </li></ul></ul></ul>Images Interlaced GIF Image Loading
  16. 16. Images <ul><li>Image Formats </li></ul><ul><ul><li>JPEG images </li></ul></ul><ul><ul><ul><li>Use a lossy image compression technology that supports more than 16 million colors </li></ul></ul></ul><ul><ul><ul><li>Best Web image for photographs </li></ul></ul></ul><ul><ul><ul><li>Lossy technologies discard some data during compression process </li></ul></ul></ul><ul><ul><ul><li>Saving an image as a JPEG file causes some of the original data to be lost </li></ul></ul></ul>
  17. 17. Images <ul><li>Image Formats </li></ul><ul><ul><li>PNG Images </li></ul></ul><ul><ul><ul><li>Supported by browser versions 4.x and above </li></ul></ul></ul><ul><ul><ul><li>Should not be used on Web pages likely to be viewed by people using older browsers </li></ul></ul></ul>
  18. 18. Images <ul><li>Using Web Images </li></ul><ul><ul><li>Without permission may violate copyright law </li></ul></ul><ul><ul><li>If a Web page does not contain a copyright statement, it may still not be free for download and use </li></ul></ul>
  19. 19. Images <ul><li>Copying Web Images </li></ul><ul><ul><li>Right-click image to access Save menu </li></ul></ul><ul><ul><li>Option may not be available if a Web page contains scripting to disable the right-click function </li></ul></ul>
  20. 20. Images <ul><li>Copying Web Images </li></ul><ul><ul><ul><li>User can use screen capture software to capture images, and can crop to save a portion of the screen </li></ul></ul></ul>cropped area
  21. 21. Images <ul><li>Finding images </li></ul><ul><ul><li>Several search engines allow users to click hyperlink or button that enables image-only searching </li></ul></ul><ul><ul><li>Many US government agency Web sites contain images that can be used freely </li></ul></ul><ul><ul><li>A number of Web sites offer copyright-free, royalty-free, or public domain images and clipart that can be used on Web pages </li></ul></ul>
  22. 22. Images Review <ul><li>What are the three principal image formats used in Web pages? </li></ul><ul><li>Which of the three image formats uses lossy compression? </li></ul><ul><li>Which image format supports interlacing, transparency, and animation? </li></ul><ul><li>How can an image be saved from a Web page? </li></ul>
  23. 23. Audio <ul><li>Early audio files </li></ul><ul><ul><li>Huge file sizes to offer high-fidelity sound </li></ul></ul><ul><ul><ul><li>3-minute song recorded using uncompressed WAV audio file format could result in a 30 MB file </li></ul></ul></ul><ul><li>Developments in audio technology </li></ul><ul><ul><li>Compressed audio formats </li></ul></ul><ul><ul><li>Streaming audio </li></ul></ul>
  24. 24. Audio <ul><li>Compressed audio formats </li></ul><ul><ul><li>Offers satisfactory sound quality, small file sizes </li></ul></ul><ul><ul><li>Codecs </li></ul></ul><ul><ul><ul><li>Technology used to compress and decompress audio files </li></ul></ul></ul><ul><ul><ul><li>Lossy codecs remove irrelevant or redundant data </li></ul></ul></ul><ul><ul><ul><li>Average person will not notice difference between uncompressed and compressed audio </li></ul></ul></ul>
  25. 25. <ul><li>Compressed audio format </li></ul><ul><ul><li>Lossless formats becoming more popular with increasing availability of broadband Internet </li></ul></ul><ul><ul><li>Sampling rate and bit rate </li></ul></ul><ul><ul><ul><li>Determines the quality and size of digital audio encoding </li></ul></ul></ul><ul><ul><ul><li>Variable bit rate encoding (VBR) features continuously changing bit rate depending on complexity of the content encoded </li></ul></ul></ul>Audio
  26. 26. Audio <ul><li>MP3 Audio File Format </li></ul><ul><ul><li>Most popular audio file format in use on the Internet today </li></ul></ul><ul><ul><li>Developed to comply with standards created by the Moving Picture Experts Group (MPEG) </li></ul></ul><ul><ul><li>Can be used to produce CD-quality audio using only a fraction of the space </li></ul></ul>
  27. 27. Audio Nullsoft Winamp Media Player Interface
  28. 28. Audio <ul><li>File Sharing </li></ul><ul><ul><li>Client computers connect to servers in what is known as a client/server system or model </li></ul></ul>
  29. 29. Audio <ul><li>File Sharing </li></ul><ul><ul><ul><li>Number of companies allow users to legally purchase and download songs over the Internet </li></ul></ul></ul><ul><ul><ul><ul><li>One of the most successful examples of an online music store is Apple iTunes </li></ul></ul></ul></ul>
  30. 30. Audio <ul><li>Streaming audio </li></ul><ul><ul><li>Eliminated the need for downloading by delivering audio content on a continuous just-in-time basis </li></ul></ul><ul><ul><li>Works by transmitting portions of audio data (and more recently video) data that can be played as soon as it is received </li></ul></ul><ul><ul><ul><li>Avoids the necessity of downloading an entire file before it can be played </li></ul></ul></ul><ul><ul><li>Buffering </li></ul></ul><ul><ul><ul><li>Avoids broadcast interruptions due to bandwidth fluctuations </li></ul></ul></ul>
  31. 31. Audio <ul><li>Streaming audio </li></ul><ul><ul><ul><li>Thousands of radio stations offer streaming broadcasts from around the world </li></ul></ul></ul><ul><ul><ul><li>Number of sources offer webcasts available via the Internet only </li></ul></ul></ul>
  32. 32. Audio <ul><li>Live streaming </li></ul><ul><ul><li>Makes broadcast available only during a certain time period </li></ul></ul><ul><li>On-demand streaming </li></ul><ul><ul><li>Makes a broadcast available on user request </li></ul></ul>On-Demand Program Listing
  33. 33. Audio <ul><li>Embedded Audio </li></ul><ul><ul><li>Audio files can also be embedded in Web pages to create background music </li></ul></ul><ul><ul><li>Musical Instrument Digital Interface (MIDI) audio file format </li></ul></ul><ul><ul><ul><li>Often used for embedding background music on Web pages </li></ul></ul></ul><ul><ul><ul><li>MIDI files are usually very small because a file contains musical instructions rather than an actual sound recording </li></ul></ul></ul>
  34. 34. Audio Review <ul><li>What is a codec? </li></ul><ul><li>What is a sampling rate? </li></ul><ul><li>What is streaming audio? </li></ul>
  35. 35. Animated Content <ul><li>Animated content is the process used to create the impression of animation or motion on a Web page and is the same process used to produce the motion effect seen in film or video </li></ul><ul><li>The most frequently used frame speed is 12 frames per second (fps) for Web animation </li></ul><ul><li>Different technologies used </li></ul><ul><ul><li>JavaScript, Java Applets, animated GIF images, Flash and Shockwave movies, and different video formats </li></ul></ul>
  36. 36. Animated Content Bouncing ball animation effect
  37. 37. Animated Content <ul><li>JavaScript </li></ul><ul><ul><li>A scripted programming language that resides within an HTML document </li></ul></ul><ul><ul><li>Enables a browser to change page content dynamically in response to viewer input </li></ul></ul><ul><ul><li>JavaScript combined with HTML and CSS-P (Cascading Style Sheets-Positioning) </li></ul></ul><ul><ul><ul><li>Creates dynamic HTML (DHTML) </li></ul></ul></ul>
  38. 38. Animated Content Rollover JavaScript
  39. 39. Animated Content <ul><li>Java applets </li></ul><ul><ul><li>Small applications (programs) created using the Java programming language </li></ul></ul><ul><ul><li>Provides interactivity in a Web page </li></ul></ul><ul><ul><ul><li>Calculators </li></ul></ul></ul><ul><ul><ul><li>Games </li></ul></ul></ul><ul><ul><ul><li>Other interactive tools for Web sites </li></ul></ul></ul>
  40. 40. Animated Content Copy and paste this code into an HTML document.
  41. 41. Animated Content <ul><li>Animated GIF Files </li></ul><ul><ul><li>A software program known as GIF animator is used to stitch together a series of GIF images </li></ul></ul>
  42. 42. Animated Content <ul><li>Adobe Flash ® and Shockwave ® players </li></ul><ul><ul><li>Two very popular vector-based animation applications used to create Web page animation </li></ul></ul><ul><ul><li>Scalable </li></ul></ul><ul><ul><ul><li>They can be enlarged or reduced without suffering a loss of image quality </li></ul></ul></ul><ul><ul><li>Plays inside a browser window and can be streamed so that the animation begins playing before the entire file downloads </li></ul></ul>
  43. 43. Animated Content <ul><li>Video </li></ul><ul><ul><li>Digital video is the digital equivalent of the motion picture film used to record real-life motion pictures </li></ul></ul><ul><ul><li>A broadband connection is recommended for the best results in viewing streaming video broadcasts </li></ul></ul>
  44. 44. Animated Content Review <ul><li>What is the best kind of Internet connection for viewing streaming video? </li></ul><ul><li>What can cause interruptions to a streaming video broadcast? </li></ul>
  45. 45. <ul><li>Comes installed with Windows Vista </li></ul><ul><li>A multifunctional media player </li></ul><ul><ul><ul><li>Play music located on CDs, computer drives, or other media </li></ul></ul></ul><ul><ul><ul><li>Play Internet radio programs </li></ul></ul></ul><ul><ul><ul><li>View DVDs and VCDs </li></ul></ul></ul><ul><ul><ul><li>Play Internet video </li></ul></ul></ul><ul><ul><ul><li>Rip songs from CDs, store them on your computer, and burn them to CD-R </li></ul></ul></ul><ul><ul><ul><li>Create playlists and organize media content </li></ul></ul></ul><ul><ul><ul><li>Synchronize content to portable devices </li></ul></ul></ul>Windows Media Player
  46. 46. Windows Media Player Windows Media Player Visualization and Song Information
  47. 47. <ul><li>To display menu bar (which is hidden by default) click the Library tab, click Layout Options menu, then click Show Classic Menus </li></ul><ul><li>Media files can be opened in the media player by clicking File on the menu bar and then clicking Open or Open URL </li></ul><ul><ul><li>Library tab can be used to create song playlists and organize content </li></ul></ul><ul><ul><li>Rip tab enables user to copy tracks from audio CD </li></ul></ul><ul><ul><li>Burn or copy to CD-R by clicking Burn tab </li></ul></ul>Windows Media Player
  48. 48. <ul><ul><li>Sync tab enables user to synchronize content to portable media player </li></ul></ul><ul><ul><li>Button to right of the Sync button changes to display the selected music store, the Windows Media Guide, or a list of online stores </li></ul></ul>Windows Media Player
  49. 49. <ul><ul><li>Click one to visit the store and purchase music </li></ul></ul>Windows Media Player
  50. 50. <ul><ul><li>Displaying the Media Guide and clicking Internet Radio link displays a list of radio stations sorted by genre </li></ul></ul>Windows Media Player Stop Previous Play Next Mute Volume
  51. 51. <ul><ul><li>Can also select other media types such as cartoons, high definition movies and games </li></ul></ul>Windows Media Player
  52. 52. Windows Media Player Review <ul><li>What can the Windows Media Player be used for? </li></ul><ul><li>How can an online store be changed? </li></ul><ul><li>How can a radio station be saved to the My Stations group? </li></ul>

×