Chapter Objectives Explain Web page multimedia issues Describe types of Web page animation Discuss adding and editing Web page audio and video elements Identify ways to effectively use ID: 770558
Download Presentation The PPT/PDF document "Chapter Objectives Explain" is the property of its rightful owner. Permission is granted to download and print the materials on this web site for personal, non-commercial use only, and to display it on your personal computer provided you do not modify the materials and that you retain all copyright notices contained in the materials. By downloading content from our website, you accept the terms of this agreement.
Chapter Objectives Explain Web page multimedia issuesDescribe types of Web page animationDiscuss adding and editing Web page audio and video elementsIdentify ways to effectively use interactive elements Chapter 6: Multimedia and Interactivity Elements 2
Multimedia Issues Combination of text, graphics, animation, audio, and videoMost Web Authoring packages include tools for incorporating multimediaUse multimedia sparingly, and for distinct purposesChapter 6: Multimedia and Interactivity Elements 3 More on Web
Multimedia Issues Guidelines to followIdentify high-bandwidth areasGive users a choice of contentList any necessary plug-insProvide explanations of what users should expectOffer low-bandwidth alternativesBreak files into short segments to create smaller files Chapter 6: Multimedia and Interactivity Elements 4
Animation Animation can be used toCatch a visitor’s attentionDemonstrate a simple processIllustrate change over timeAnimated GIFsSequence of frames that simulate movementShould be used to support your Web site’s messageToo many animated GIFs can detract from a page Chapter 6: Multimedia and Interactivity Elements 5 More on Web
Animated GIFs freeware and shareware to create animated GIFs can be downloaded from WebMicroangelo GIFtedGIF Construction Set ProfessionalProcess to create Animated GIFsidentify sequential order of GIF imagesSpecify time between each frameSpecify if background transparent and if animation should loop or repeat
Animation Chapter 6: Multimedia and Interactivity Elements7Sequence of frames Animated GIF button preview: first frame Animated GIF button preview: second frame
Animated GIFs To generate Animated GIFs optimized for Weblimit physical size of imagescreate images with solid colors using Web-safe palettedecrease bit depthdefault 8-bit/256 colors, try 6-bit/64 colors or 4-bit/16 colors limit the number of frames in animation
Your Turn! (page 161) Exploring Animated GIFs Using the search tool of your choice and the keywords animated GIFs or similar keywords, locate resource sites for animated GIFs. Identify the URLs of three resource sites that offer royalty-free or low - cost animated GIFs . Identify one royalty- free animated GIF that would be suitable for C2C auction Web site . With permission from your instructor, download the animated GIF and save the file to your computer's hard drive . Write a report for your instructor discussing your research . Name the source of the animated GIF you choose to describe it. Explain how including the animated GIF on a Web page at a C2C auction site supports the site's message and meets target audience expectations for a C2C auction site . Note: You can find a GIF that is suitable for your web site instead of the C2C auction Web site listed in this Your Turn exercise.
Adobe Flash CS3 and Microsoft SilverlightAdobe Flash CS3 is a tool for creating sophisticated Flash moviesSimulates motion via fast-paced presentation of changing static imagesMicrosoft Silverlight is a relatively new browser plug-in technology designed to play the multimedia content found in rich interactive applicationsChapter 6: Multimedia and Interactivity Elements 10
Adobe Flash CS3 and Microsoft SilverlightChapter 6: Multimedia and Interactivity Elements11 Microsoft Silverlightis a plug-in developed for rich interactive applications More on Web frames Photos in Flash movie
Flash Animation Macromedia Flash is a tool for creating sophisticated animationSimulates motion via fast-paced presentation of changing static imagesFrame-by-frame animation – image changed manuallyKey-frameAnimation with tweening – only beginning and ending frame need be createdFlash automatically creates necessary frames within the changing image more expedient, less intensive method than frame-by-frame animation
Flash animation Guidelines for to incorporate Flash for Webnecessary expertise and resources to maintain Flash componentsUse Flash only if it contributes to purpose of Web site in a way other components cannotIndicate on site plug-in neededprovide link to plug-in download site
Avatars Avatars are alternative personas or virtual identities for MMOGs or 3D virtual worldsAvatars can be foundIn e-mail marketing campaignsBusiness or personal blogsE-commerce Web sitesVirtual modelsChapter 6: Multimedia and Interactivity Elements 14
Avatars Chapter 6: Multimedia and Interactivity Elements15Used by some B2C retailersas virtual models that enable visitors to try on clothingin virtual dressing rooms
Gadgets Small code objects that provide dynamic Web contentClocksWeatherReportsBreaking news headlinesChapter 6: Multimedia and Interactivity Elements16
Gadgets Chapter 6: Multimedia and Interactivity Elements17Can copy the HTML codefor a specific gadget and paste it on yourWeb page
Audio and Visual Elements Downloadable media must be downloaded in its entirety before it can be heard or seenStreaming media begins to play as soon as data begins to streamChapter 6: Multimedia and Interactivity Elements18
Audio and Visual Elements Chapter 6: Multimedia and Interactivity Elements19Avoid copyright infringementwhen incorporating music at your Web site
Audio Elements Audio files can add sound effects, entertain visitors with background music, deliver a personal message, or sell a product or service with testimonialsOnly include background music when it supports your site’s message and the mood you want to achieveYou can record your own audio files Audio must be in digital format to be used Chapter 6: Multimedia and Interactivity Elements 20 More on Web
Audio Elements Streaming audio begins playing as the audio is delivered by the serverRealAudioRealPlayerWindows MediaWindows Media PlayerQuickTimeQuickTime PlayerChapter 6: Multimedia and Interactivity Elements 21 More on Web
Streaming Audio Chapter 6: Multimedia and Interactivity Elements22RealPlayer and WindowsMedia Player are both used for playing streaming audio
Editing Audio Extremely large file size impacts transfer timeCreate a balance between transfer time and sound qualityLimit file size via duration and channelsLimit file size via hardware and softwareOptimize downloadable audio and video files to prevent long download times, which may deter visitors from your Web site
Editing Audio Guidelines: Limit file size via duration and channelsshorter audio clips equal smaller filesinclude only necessary contentMono (one-channel)Stereo (two-channel)stereo audio file will double the size of a mono filefor Web usage choose mono
Editing Audio Guidelines: Limit file size via hardware and softwareduring conversion of analog to digital, samples of audio wave obtainedSampling rate, measured in kilohertz (kHz) amount of samples obtained per second (8 kHz for voice and 22kHz for music)bit depth – another measure of quality 8-bit audio file recommended for Web Codecs – special computer programs that can greatly reduce audio file size codecs (compressors/decompressors) utilize lossy compression to remove redundant less-significant data after each compression quality of file will diminish
Video on the Web Video is becoming a more common content elementYou can download royalty-free videos, purchase videos, or create your own video files using a digital camcorder and video editing softwareAdobe Premiere Pro CS3 Pinnacle Studio Ultimate version 12Windows Movie Maker Chapter 6: Multimedia and Interactivity Elements 26 More on Web
Video on the Web File size is a much greater issue than with audioLack of bandwidth can cause transmission delaysIf possible, consider low-bandwidth alternatives to videoAnimationAudio More on Web
Video on the Web Chapter 6: Multimedia and Interactivity Elements28Windows Movie Makervideo editing software
Editing Video Files The common frame sizes are 160 x 120 or 240 x 180 pixels; the frame rate for Web video ranges from 10 to 15 frames per second (fps)The greater the number of bits or bit depth , the bigger the file size You can define the general quality level of your video, which automatically adjusts the compression Chapter 6: Multimedia and Interactivity Elements 29 More on Web
Optimizing Downloadable Video Reducing the file size of video is imperative to improve download timesStandard frame size for Web video is 160 x 120 pixelsUse frame rate of 10 to 15 frames per seconddecrease video segment from 16-bit to 8-bitFind a balance between the size of the file and the quality of the video that will yield satisfactory results for both criteria
Streaming Video Should be used for media over one minute in lengthRealNetworks RealVideorequires specifically configured Helix Universal serverRequires RealProducer softwareCan be used to deliver live videosQuickTimeH.264 videohot keys – facilitate quick, easy video editing Microsoft Windows Media – capture video with frame-accurate control Broadband Internet services make streaming video very practical
Interactive Elements Requires user participation with one or more elements on a Web pageUse interactive elements on your Web site to keep the user interested and involved with your contentVarious ways to incorporate interactivityChapter 6: Multimedia and Interactivity Elements 32
Web-based Form Guidelines Structured Web documents on which information can be enteredCommon form elements include text boxes, check boxes, option buttons, drop-down list boxes, and a Send or Submit buttonForms are frequently used to obtain comments and feedback or to order products or services Chapter 6: Multimedia and Interactivity Elements 33
Online Forms Structured Web documents in which information can be enteredrequire essential information before submittingbrowsers may display forms differentlyuse table to alignmake text boxes large enough to hold datarestrict responses to contain only number when appropriate use check boxes to allow more than one response provide space for additional commentsuse color to highlight and segment information include reset button to clear all information quickly build in capability of confirming information send confirmation notice
Online Forms information segmented andhighlighted by colored bars click to confirm information before submitting form consistent eye-pleasing alignment of the table elements
Additional Interactive Page Elements Macromedia FlashUsed to create animated buttons, navigation, menus, and gamesrollover button – changes its appearance in reaction to certain mouse movementsMacromedia ShockwaveOriginally developed to create multimedia games and movies for CDs and kiosksUsed to produce high-quality Web experiencesDirector – powerful, expensive multimedia authoring tool used to create Shockwave files, utilizes programming language Lingo .
Additional Interactive Page Elements placing the mouse onrollover button produces agreen square that surroundsand highlights button
JavaScript, Applets, and Servlets JavaScript, applets, and servlets are all used to create interactive content elementsApplets are small programs that are designed to execute in a browser and are sent to a browser as a separate file together with the related Web pageA servlet is similar to an applet; however, a servlet executes from the server instead of executing within the visitor’s browser Chapter 6: Multimedia and Interactivity Elements 38 More on Web
JavaScript, Applets, and Servlets Java appletsShort programs that make Web pages more dynamic and interactiveSent as a separate file, along side the HTML documentApplets don’t always work well with all browsersApplets must be enabled in browserWritten using JDK or Visual J++
JavaScript, Applets, and Servlets JavaScriptInserted directly into the HTML codeFrequent usesVerify form informationCreate rollover buttonsAdvertising bannersPop-up windows
Blogs Popular way to promote Web site interactivitySites such as Blogger, WordPress, and Typepad provide tools you can use to quickly create a blog hosted on your own server or on the tool provider’s server Chapter 6: Multimedia and Interactivity Elements 41 More on Web
Blogs Chapter 6: Multimedia and Interactivity Elements42
Your Turn! (page 173) Exploring Business Blogs Visit the Web Design Chapter 6 Online Companion Web page (scsite.com/web3e/ch6/ ) and click links in the Your Turn section to review three business blogs: Microsoft SMB Community Blog The Trump Blog KILLERSITES.COM Write a report for your instructor that describes the topics discussed on the blogs. In what way do the blogs and blog comment postings promote interactivity between the blog publishers and the visitors who read and post comments to the blog? Based on your review, what recommendations would you make to a client interested in hosting a blog at his or her B2C Web site .
Live Chat Live chat allows visitors to ask questions about products or services in real timeVisitors’ chat messages are answered by in-house chat agentsChapter 6: Multimedia and Interactivity Elements44 More on Web
Live Chat Chapter 6: Multimedia and Interactivity Elements45Live chatwindow
Chapter Summary Explain Web page multimedia issuesDescribe types of Web page animationDiscuss adding and editing Web page audio and video elementsIdentify ways to effectively use interactive elements Chapter 6: Multimedia and Interactivity Elements 46
Case Study # 6 Case Study Page 180Do steps 1-6 creating a multiple page Word document.See assignment web page for details.