XP 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets Tutorial 8.

Slides:



Advertisements
Similar presentations
 2004 Prentice Hall, Inc. All rights reserved. Chapter 28 – Multimedia: Audio, Video, Speech Synthesis and Recognition Outline 28.1 Introduction 28.2.
Advertisements

Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets.
CNIT 132 – Week 9 Multimedia. Working with Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each.
1 Multimedia on the Web: Issues of Bandwidth Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second.
Section 9.1 Identify multimedia design guidelines Identify sources of multimedia files Explain the ethical use of multimedia files Describe multimedia.
HTML 5 and CSS 3, Illustrated Complete Unit K: Incorporating Video and Audio.
UNIT K: INCORPORATING VIDEO AND AUDIO 1 Encoding: the process of transforming moving image and/or sound into a digital file. Each encoding method known.
 Multimedia is everything you can hear or see: texts, books, pictures, music, sounds, CDs, videos, DVDs, Records, Films, and more.  Multimedia comes.
3.02C Multimedia Fair Uses Guidelines and Elements
XP Creating Web Pages with HTML, 3e Prepared by: C. Hueckstaedt, Tutorial 10 1 New Perspectives on Creating Web Pages with HTML Tutorial 10: Creating a.
Web site Design: Using Multimedia Multimedia file formats on the web Basic Multimedia application on the web –A simple page with sound and music –A simple.
Video on the Web. Should you add video to your web page? Three main questions 1. How will it enhance the purpose of my page? –Entertain –Explain a process.
COS 125 DAY 27. Agenda Assignment # 8 Due April 27 Assignment #9 Posted in Webct  Last one!!!!  Due May 4, 8AM Exam #5 is April 30  Castro Chap13,
COS 125 DAY 25. Agenda Assignment 7 is corrected  5 A’s, 2 B’s, 1 C and 1 F Assignment 8 (last one) is posted  Due May 2 Left to do  3 rd and final.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
Chapter 14 Recording and Editing Sound. Getting Started FAQs: − How does audio capability enhance my PC? − How does your PC record, store, and play digital.
XP Tutorial 5New Perspectives on HTML, XHTML, and DHTML, Comprehensive 1 Designing a Web Site with Frames Using Frames to Display Multiple Web Pages Tutorial.
Section 9.1 Section 9.2 YOU WILL LEARN TO…
Audio and Video on the Web Sec 5-12 Part or all of this lesson was adapted from the University of Washington’s “Web Design & Development I” Course materials.
Session: 11. © Aptech Ltd. 2HTML5 Audio and Video / Session 11  Describe the need for multimedia in HTML5  List the supported media types in HTML5 
Chapter 11 Adding Media and Interactivity. Flash is a software program that allows you to create low-bandwidth, high-quality animations and interactive.
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.
Copyright © 2012 Certification Partners, LLC -- All Rights Reserved Lesson 5: Multimedia on the Web.
Tutorial 7 Working with Multimedia. XP Introducing Multimedia Bandwidth is a measure of the amount of data that can be sent through a communication pipeline.
CSCI-235 Micro-Computers in Science Hardware Part II.
CSCI N241: Fundamentals of Web Design Copyright ©2004  Department of Computer & Information Science Adding Sound.
1 Web Developer Foundations: Using XHTML Chapter 10 Helper Applications and Plug-in Concepts.
1 Lecture 12: Multimedia Not in Web 101 Text  Important Multimedia Issues  Audio  Movies and Video  Multimedia and HTML Documents.
Audio and Video CGS Some Common Audio Formats Format Use Extension MIDI instrumental music.mid MPEG songs.mp3 RealAudio live broadcasts.ra Wave.
Tutorial 7 Working with Multimedia. XP Objectives Explore various multimedia applications on the Web Learn about sound file formats and properties Embed.
XP Tutorial 8New Perspectives on HTML and XHTML, Comprehensive 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets Tutorial.
Tutorial 8 Designing a Web Site with Frames. XP Objectives Explore the uses of frames in a Web site Create a frameset consisting of rows and columns of.
Sound or Audio, whichever you prefer –MIDI Files.midi or.mid (Musical Instrument Digital Interface) use for instrumental music. –This format is supported.
Sound on the Web. Using Sound on a Web Site Conveying information  pronounce a word or describe a product Set a mood  music to match the web page scene.
XP Tutorial 8New Perspectives on Creating Web Pages with HTML, XHTML, and XML 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and.
Tutorial 7 Working with Multimedia
Tutorial 7 Designing a Multimedia Web Site
Creating Web Documents alt attribute Good and bad uses of ‘multimedia’ Sound files Homework: Discuss with me AND post announcement of Project II. Forms.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Tutorial 7 Working with Multimedia. New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition 2 Objectives Explore various multimedia applications.
Chapter 15 Recording and Editing Sound. 2Practical PC 5 th Edition Chapter 15 Getting Started In this Chapter, you will learn: − How sound capability.
Tutorial 8 Designing a Web Site with Frames. 2New Perspectives on HTML, XHTML, and XML, Comprehensive, 3rd Edition Objectives Explore the uses of frames.
Multimedia Web Pages. Multimedia displays Browser can load web pages that contains multimedia elements 1. Helper applications: stand-alone programs that.
HTML 5 Tutorial Chapter 3 Video. Video HTML 5.0 provides a standard for showing video. Using the element we can easily embed video within our web page.
Multimedia: Audio and Video Kyle Hawver. BGSOUND element Should be placed in the HEAD section of the HTML document Has 4 key properties: – SRC – URL of.
Web Pages with Features. Features on Web Pages Interactive Pages –Shows current date, get server’s IP, interactive quizzes Processing Forms –Serach a.
Embedding Multimedia in Web Pages  Multimedia is a popular buzzword for sound, motion video, and interactive animation.  Some problems or obstacles.
Sound and the Web. Transferring sound Download Progressive Download Stream.
CSCI-100 Introduction to Computing Hardware Part II.
1 CSC317/318 INTERNET PROGRAMING / DYNAMIC WEB APPLICATION DEVELOPMENT Siti Nurbaya Ismail Faculty of Computer Science & Mathematics, Universiti Teknologi.
2 If aliens came to this solar system and observed humans over the last several years, what would they think is the most significant benefits of the.
XP Review 1 New Perspectives on JavaScript, Comprehensive1 Introducing HTML and XHTML Creating Web Pages with HTML.
Lesson 5 MULTIMEDIA. Multimedia on the Web has expanded rapidly as broadband connections have allowed users to connect at faster speeds. Almost all Web.
XP New Perspectives on Macromedia Dreamweaver MX 2004 Tutorial 5 1 Adding Shared Site Elements.
Chapter 8 Adding Multimedia Content to Web Pages HTML5 & CSS 7 th Edition.
CHAPTER 8 Multimedia 1. Using Multimedia ❖ Multimedia: the combination of text, sound, and video to express an idea or convey a message. ❖ Podcasts: a.
XP Practical PC, 3e Chapter 14 1 Recording and Editing Sound.
Section 9.1 Section 9.2 Identify multimedia design guidelines
Tutorial 10 - Creating A Multimedia Web Page Enhanced Page
Using Multimedia on the Web
Video on the Web.
Embedding Media into Web Pages
Tutorial 7 Working with Multimedia
New Perspectives on Creating Web Pages with HTML
Integrating Multimedia: Sound, Video and More
HTML5 Media.
Outline Introduction Audio and Video
Tutorial 8 Designing a Web Site with Frames
Working with Multimedia
Presentation transcript:

XP 1 Using Multimedia on the Web Enhancing a Web Site with Sound, Video, and Applets Tutorial 8

XP 2 Working with Multimedia  Bandwidth is a measure of the amount of data that can be sent through a communication pipeline each second  Consider bandwidth when working with multimedia on a Web site

XP 3 Working with Multimedia  Multimedia can be added to a Web page two different ways:  External media is a sound of video file that’s accessed through a link  Useful for a low bandwidth  Inline media is placed within a Web page as an embedded object

XP 4 Working with Multimedia Inline media External media

XP 5 Working with Audio  Every sound wave is composed of two components:  Amplitude- the height of the wave. Amplitude relates to the sound’s volume (the higher the amplitude, the louder the sound).  Frequency- the speed at which the sound wave moves. Frequency relates to sound pitch (high frequencies have high pitches).

XP 6 Working with Audio

XP 7 Sampling Rate, Sample Resolution, and Channels  Sound waves are analog functions (represent a continuously varying signal)  To store the information, however, it must be converted to pieces of information.  Digital recording measures the sound’s amplitude at discrete moments in time  Each measurement is called a sample  Samples per second taken is called the sampling rate

XP 8 Sampling Rate Low sampling rate Medium sampling rate High sampling rate

XP 9 Sampling Rate, Sample Resolution, and Channels  Sampling resolution indicates the precision in measuring the sound within each sample  8-bit  16-bit  32-bit

XP 10 Sample Resolution Low sample resolution High sample resolution

XP 11 Sample Rates and Resolution Sampling rate and sample resolution as related to sound quality: Sampling Rate and Sample ResolutionSound Quality 8 KHz, 8-bit, monoTelephone 22 KHz, 16-bit, stereoRadio 44 KHz, 16-bit, stereoCD 48 KHz, 16-bit, stereoDigital Audio Tape (DAT)

XP 12 Sound File Formats  There are different sound file formats used for different operating systems  Different file formats provide varying levels of sound quality and sound compression

XP 13 Sound File Formats  WAV - very common - built into OS  MP3 - most common - compressed, open  Nonstreaming media - completely downloaded before user can hear  Streaming media - start listening immediately  MIDI - standard for most sound cards

XP 14 Sound File Formats  MP3 is a version of the MPEG format, which compresses audio files with minor impact on sound quality  One controversy around the MP3 format involves copyrighted material that has been copied as MP3 without the permission of the artist or producers

XP 15 Sound File Formats  Nonstreaming media must be completely downloaded by users before being played  May produce lengthy delays

XP 16 Sound File Formats  Streaming media are processed in a steady and continuous stream as they are downloaded by the browser  Both sound and video

XP 17 Sound File Formats  MIDI (Musical Instrument Digital Interface) converts an analog signal to a series of functions describing the pitch, length, and volume of each note  MIDI format is limited to instrumental music and cannot be used for general sounds, such as speech

XP 18 Linking to an Audio Clip Inserting links to the sound clips Link to external file - helper applications - help browsers to interpret and present files

XP 19 Embedding an Audio Clip  An embedded object is any media clip, file, program, or other object that can be run or viewed from within a Web page  Browsers need the appropriate plug-ins to run embedded objects - user must have plug-in  Creating an embedded object - 2 elements - embed & object

XP 20 Embedding an Audio Clip (Internet Explorer and Netscape) To embed a sound or video clip, use the embed element: <embed src=“url” width=“value” height=“value” autostart=“type” /> Where url is the location of the object, the width and height attributes specify the width and the height of the object in pixels, and type is either true (to start the clip automatically when the page loads) or false (to start the clip manually).

XP 21 Playing Background Sounds  Internet Explorer (with Version 3.0) introduced an element to play background sounds: <bgsound src=“url” balance=“value” loop=“value” volume=“value” /> Where url is the URL of the sound file, the balance attribute defines how the sound should be balanced between left and right speakers, loop defines how many times the sound clip is played, and the volume attribute indicates the background sound volume.

XP 22 Working with Video  Video files add a visual element to a Web page as well as provide information  Video files are composed of a series of single images called frames  The number of frames shown in a period of time is the frame rate

XP 23 Frame Rates and Codecs  Reducing the frame rate reduces the size of your file  This is one way to control file size of video files  Using a Codec (compression/decompression) is another way to control the file size  Reduce the size of the video frame or by reducing the number of colors

XP 24 Video File Formats

XP 25 Linking to a Video Clip  Follow the same procedure to link a video clip as you would to link a sound clip  Include information about the size of each video file so that users can determine whether they want to retrieve the clip

XP 26 Embedding a Video Clip  Use the same embed element to embed a video file as you did to embed a sound clip  You must specify a source for an embedded video clip with the src attribute and a size for the clip using the height and width attributes

XP 27 Using a Dynamic Source  To turn inline images into dynamic video clips, use the following syntax: <img src=“url” dynsrc=“url” start=“type” loop=“value” control=“control” /> Where the dynsrc attribute specifies the URL of a dynamic (video) version of the inline image. The start attribute tells the browser when to start the clip, the loop attribute specifies the number of times the video will play, and the control attribute specifies whether IE should display player controls below the inline image to start and stop the video clip.

XP 28 Supporting Non-Embedded Elements  If you want to support older browsers, you can add the noembed element  The noembed element works like the noframe element for frames, providing a way to support older browsers that do not recognize embedded objects

XP 29 Using Non-Embedded Content To provide alternate content for browsers that don’t support embedded objects, use the code <noembed> alternate content </noembed> where alternate content is the content displayed by browsers that don’t support embedded objects

XP 30 Introducing Java  Oak was developed by Sun Microsystems as an operating system intended to be used by common appliances and devices  Oak was renamed Java in 1995  HotJava runs programs written in the Java language  HotJava is a Java interpreter (it understands and runs Java languages)

XP 31 Applets and Java Interpreters

XP 32Applets  Applets are displayed as embedded objects on a Web page in an applet window  Use a Java Developer’s Kit (JDK) to write your own Java applet  Compiling changes the file into an executable file that can run by itself without the JDK  The executable file is called a class file

XP 33 Working with Applets Attributes of the applet element

XP 34 Inserting a Java Applet  To insert a Java applet, use the code …</applet> Where file is the name of the Java class file, text is the name of an applet parameter, and value is the parameter’s value.

XP 35 Creating a Marquee with Internet Explorer  An alternative to using an applet to create a box with scrolling text is to create a marquee element content content Where attributes is one or more of the marquee elements, and content is the page content that appears in the marquee box.

XP 36 Working with the Object Element  The object element is the generic element for any object whose content is stored in a file separate from the current Web page  Inline images  Sound clips  Video clips  Program applets  Other HTML documents

XP 37 Working with the Object Element Specific and generic elements

XP 38 Working with the Object Element  MIME (Multipurpose Internet Mail Extension) names are used to indicate the type of data using the type attribute in an object element.

XP 39ActiveX  ActiveX attaches desktop applications to Web pages  ActiveX objects are referred to as ActiveX controls - similar to Java applets

XP 40 Tips for Using Multimedia  When linking to multimedia, provide a variety of media formats to ensure that all users have access to formats they can use  Include the file size in links to large multimedia files to notify users with low bandwidth connections

XP 41 Tips for Using Multimedia  Do not embed multimedia clips in your Web pages unless you are sure that users will be accessing the pages through a high-speed connection  Do not insert media clips unless you provide a method for users to turn off the clips; if a clip plays automatically, allow it to play only once  Use the embed and applet elements in preference to the object element because of the broader browser support

XP 42 Assign #20 - Case 1, pg print code and finished product, black and white is acceptable. Assign #21 - Case 2, pg print code and finished product, black and white is acceptable.