Overview

Multimedia
Whether you know it or not, you have seen multimedia and you should be semi familiar with it. Multimedia is exactly what is sounds like, multi (many) media (pictures, video, etc.). If you go to humble bundle.com you will see an excellent assortment of multimedia. You have a countdown, which is your animation, you have images of the games you can get. When you click on an image you will get an expansion showing you a description and an embedded YouTube video. Now that you understand the basics you can see all of the different uses of multimedia in your favorite websites. While this sounds great and having multimedia will make any site better, remember too much of anything is not good.

Web Based Multimedia Applications come in a wide variety and can be found all over the Internet. A website that contains more than one type of media is considered to be multimedia. Sites that contain sound, video, animation, and/or images alongside text fall into this category. Typically, these sites use multiple applications such as these to convey certain information to the viewer of the web page. Manufacturers might use photos and PDF based user’s manuals to transfer key points of interest about their products to the viewers. In other cases, multimedia can be used as a teaching tool where visitors learn through instructional videos or a news site might use podcasts and television footage to update their readers through their websites. Images and sound are also employed by many musicians when visiting their sites alongside the text-based dates of their tour. Entertainment also plays a large factor in web based multimedia applications. With the rise of Internet video streaming, people can now watch their favorite t.v. shows when they have the free time to do so, and from anywhere there is an Internet connection. Websites like Netflix and Hulu use sound, video, and often thumbnail photo icons alongside their descriptive text of the shows available. Some things to keep in mind concerning these multimedia applications are Internet connection speed and bandwidth. Most of these video streaming websites; whether news, sports, or t.v. shows, etc. require a minimum broadband connection speed of 500Kbs for standard definition viewing. The minimum speed requirement increases as the definition increases and vice versa. Bandwidth plays an important role as well since some service providers put a cap on the amount of information that can be processed. Most “smart” phone service providers set a cap of 1Gb or 2Gb a month and charge additional fees if this ceiling is ignored. Considering that a standard definition, one hour t.v. show can be close to 200Mb, it is wise to pay attention to the bandwidth being consumed as this can rapidly add up.

There are many advantages that web-based multimedia can offer. One of the biggest benefits of web-based multimedia is that it can address many different types of learning styles. For example, when being taught how to make a paper airplane, someone may prefer written instructions, while someone else may prefer picture instructions. Multimedia can offer picture instructions with captions in order to meet both people’s learning styles. Another advantage of web-based multimedia is that it can make information more enjoyable and interesting to a user. Text-only information can get very boring, but multimedia could be implemented in order to spice up a web-page. For example, when learning where countries lay on a map, a simple picture might not portray the information in an enjoyable fashion. With multimedia, an interactive map could be created and used instead of a picture. An interactive map may be a more enjoyable way for a user to learn the material due to the fact that they must engage with the multimedia. Along with web-based multimedia’s advantages come disadvantages. One disadvantage of web-based multimedia is that it can be very costly and time consuming. Websites that use multimedia generally take more time and skill to develop than a text-based website. Businesses often hire someone to create and arrange multimedia on their webpages.

Augmented Virtual Reality
Augmented Virtual Reality is the augmenting or adding-on of certain computer-generated elements to the real world usually through a display. Augmented Virtual Reality can be applied to many different types of technologies and industries and is currently growing within e-commerce. Some companies, such as IKEA are using the technology of Augmented Virtual Reality to give consumers a better view of how furniture will look in their home. Other uses include the application of Augmented Reality within the automobile industry. Certain manufacturers are utilizing the technology within windshields. This is known as Head-Up-Display and is used to allow drivers to see their MPH, fuel gage, and many other information that you would need while driving, without forcing them to take their eyes off the road. Another use of Augmented Virtual Reality is with Google Glass. Google Glass allows users to have all the features of a phone within a display on their glasses and with the use of voice commands. Also, some developments are being made to incorporate Augmented Virtual Reality within the medical field. Although Augmented Virtual Reality is a recent development, it is being used more and more within many devices and will possibly be a social normality within a few years.

THE FIVE MULTIMEDIA ELEMENTS
Text, image, audio, video, and animation are the five multimedia elements. The first multimedia element is text. Text is the most common multimedia element. Text expresses the information the developer is trying to get across to their viewers. Even though pictures grab the viewers’ attention, text is a good idea to include, as well, just in case the picture does not load. The second multimedia element is image. An image catches the viewers’ attention much more quickly than just plain, old text. Almost every multimedia application contains images. The most common images are JPEGS and PNGs. Also, Photoshop and Paint.NET create high tech visual effects which are common with images. The third multimedia element is audio. Most of the time, audio files are deployed using plug-in media players. A few audio formats include RealAudio, MIDI, Wave, WMA, and MP3. The developer will compress the format to shorten the time. Before the file is downloaded, one can stream the audio. The fourth multimedia element is video. The web is the most common place where videos are seen concerning multimedia elements. A few digital video formats are Flash, MPEG, AVI, WMV, and QuickTime. Streaming digital videos can increase the speed of the playback. Developers use videos to hold on to the viewers’ attention. The fifth multimedia website is animation. Animation draws in the younger crowd. AdobeFlash is the most common tool for creating these animations. Animations are the most creative and fun multimedia element!

Serif vs. Sans-Serif Fonts & Font Choice
All fonts, or typefaces, are either serif or sans-serif. “Serif” is Latin for “with feet,” while “sans-serif” is Latin for “without feet”, and that is the difference: serif fonts have small lines, or serifs, at the bottom of the letters, as if the letters have feet. Sans-serif fonts lack these “feet.” Times New Roman is the most common and easily recognizable serif font, while the most common and recognizable sans-serf fonts are Arial, Helvetica, and Comic Sans MS. There is some disagreement about whether serif fonts are easier to read than sans-serif ones, or vice versa, but in general, serif fonts are preferred for large bodies of text, especially on physical, printed materials, while sans-serif fonts are preferred for smaller things, such as headlines, and electronic messages. Even past the question of whether to use a serif vs a sans-serif font, one should be careful about which specific font one is using. Different typefaces carry different connotations. A potentially more formal font, such as Times New Roman, would not be suited to something more informal like an invitation to a young child’s birthday party; likewise, an informal font like Comic Sans would be very inappropriate for formal messages. When choosing a font, consider the purpose of the message and the audience.

Video
Video provides a powerful impact in a multimedia program. It starts with continuous event and breaks it up to frames, whereas an animation starts with frames. Video formats are made up of container and codec(s). The container describes the structure of the file like where the various pieces are stored, how they are interleaved, and which codecs are used by which pieces. A codec is a way of compressing the file to decrease file size, while maintaining quality. Some of the most common video file formats are Audio-Video Interleave (.avi), Flash Video Format (.flv), Moving Picture Experts Group 2 (.mp2), Moving Picture Experts Group 4 (.mp4), QuickTime (.mov), and Windows Media Video (.wmv). In multimedia applications, the digital video is gaining popularity because the video clips can be edited easily, it can be stored like any other files in the computer and the quality of the video can still be maintained, and the video can be transferred within a computer network which allows non-linear editing in any part of the video. Just like in audio, in streaming video the traveling information is a stream of data from a server. In 2006, people watched more than a million streaming videos a day on YouTube.

JPEG, GIF and PNG Formatting
GIF and PNG are two different formats which images are available in. GIF simply means Graphics Interchange Format and is typically used for animations and sometimes single images as well. The images are compressed or made smaller; they are using what is called loss-less data compression. This compression makes it so that the image does not lose quality even if it is compressed due to its ability to have uniformed color with well-defined edges. A GIF is not the best quality format for images because of its limit of colors, which is one of the reasons that PNG was created. PNG are Portable Network Graphics. Their ability to compress is higher quality and allows for alpha transparency, which is basically creating the image with a background so that it looks transparent either partially or fully. They can store more color depth but also take up more space than GIFs in some cases. In cases where this does not apply it is because their ability to have better compression in 8-bit data ends up being smaller than GIFs. PNGs are unlike GIFs because they do not support animations, and are a single-image based format. These formats are used in many Web pages today and are both arguably as important.

Example of a .jpg image

The Joint Photographic Experts Group committee created the file format that is otherwise known as JPEG. JPEG is a technique and file format used to compress color images, digital photos, and other digital graphics. Many users who store photographs on their computer will recognize the JPEG file extension recognized as “.jpeg”, or “jpg”. The file size of a selected image can be optimized for different uses, otherwise known as editing a photo to the desired sizes. The file format does so by using a type of compression of the image known as “lossy compression”. The definition of lossy compression is defined as the ability for the image to decrease in file size, taking away a slight decrease in image quality. JPEG files are widely used by consumers as a way to save photos on their computer to view at their desire. However, a user may have interest in sharing these images through e-mail, or a website. As considering using a JPEG file on a website or through email, a user must consider the file size in comparison to the amount of quality of the image. For instance, if a user is interested in posting a photograph on a website of theirs, they must consider file size and formatting. Also, with e-mail, a user must consider the quality of the image they will be sending. The higher the quality of the image being sent, the larger the file size must be. If a user is sending this file over their cellular phone, it may require the use of more data to send a larger file size.

MULTIMEDIA WEB DESIGN

Basic Design Principles
The main thing about designing a website is that the whole point is to create a site that is interesting and will bring customers or people to look at it. Not only that, but you have to keep it interesting; people don’t want to see the same things on a website at all times. It needs to be updated and changed as time passes. Another important thing to remember is that many people aren’t that tech savvy. It is important to keep the website somewhat simplistic. Confusing websites draw people away. It is important to make sure your webpages load quickly, which can be done by choosing multimedia elements carefully and to modify them as necessary, like optimizing photos to make them run as efficient as possible. Nowadays another important thing to consider when creating a website is whether or not people are going to be able to view it from other devices such as their phones, their tablets, or whatever else. It may be beneficial to also create a mobile version of the site. Its important to look at what browser people can use for this website. Some sites have certain features that can only be accessed by certain browsers, it is important to make sure to use features that work well on all common browsers. It would also be beneficial to use features that don’t require plug-ins. When people visit a site they are not going to want to have to install something just to go on the site or to access something on the site. It is also important to look at the size of the page content. You want to be sure that your information can be seen on all computer screens.

Web site design can be extremely time consuming and costly. Successful businesses and agencies typically have both the time and the money to have intricate web sites designed. However, for a company just starting out, those things may not be available yet. Fortunately, there are many sites today that offer free website design. Some great sites that offer this are Wix.com, Weebly.com, Yola.com and Moonfruit.com. This could be a great way for a brand new company or organization to be able to get their name out on the web and begin getting some recognition. These free sites make it easy for one who may not know much about web design, as they typically offer easy to use templates and offer step by step instruction along the way to guide one through the design process. Although the web design site is free, users will first have to purchase a domain name. These are available at companies such as GoDaddy, Register.com, Domaine.com and Dyn.com. After purchasing a domain name, it is time for the user to begin filling his site with content. The user has a great deal of freedom in customizing his site to contain the elements desired. Many of the sites mentioned earlier also provide tutorials to help get the site up and running. After the design of the website is complete, the creator can now publish it and get ready for some recognition. It is important for the creator to update the website often and to market the site as much as possible. For any organization or company that may be just getting off its feet, deciding to use a free site to do its web design might be a good option, and with so many sites offering this service, it seems silly not to.

Using Flow Charts, Page Layouts, and Storyboards
When talking about website design, a flowchart is used to show how different web pages relate to each other. A flowchart is basically a map of the website. There can be links between the lines of the flowchart to take you where you want to go. When designing a website, you can make it as simple or as complicated as you want. Often times, the flowchart is designed in the early stages of the website because it provides a good building ground for the website. Page layout is used in the designing of a website. Typically people create two page layouts; one for the home page and one for all the other pages. This is when you design where you want the different logos, like the home page button, and its when you decide how visually exciting you want your website. While it’s important to make it visually interesting, it is also important to keep it simple so that it does not get too confusing. Storyboards are also something commonly used in website design. Storyboards are a series of pictures that depict what is going to happen on each screen. They are typically used when creating something animated.

How To Start A Storyboard
There are a few steps to take to make a great storyboard for a web site design. It is important to bring your ideas even if you think they are not that good. Next you need to draw them out on paper; One paper is faster and you can always toss it away if it doesn’t look the way you want. Additionally it is good to use paper because on paper anyone can add to the design and you do not have to have a lot of experience making web sites. After drawing it out next is to find a focus from those drawings to make sure that each part of the website is completed. Following, take notes to see if there is anything that needs to be added. After that take the drawings that are completed and put them in a mind map to see the website more visually. Then critique the storyboard and make adjustments to the design. It is also important that other people look at it as well so you can various opinions on the storyboard. When the storyboard is all finished make sure that the navigation, site structure, and content are done well. For navigation it is important to have everything at least a click away, at the maximum it should be 3.For site structure check if it is too complex and that there are visuals, glossary, table of contents, and or an index. The content should be understandable, creative, and flow together.

Navigational Design Considerations
While creating a Web site, it is important not to overlook small details. The structure of the site is the most significant part for easy navigation. Headlines and main menus need to be organized in a way that is understandable for users. Many experts and Internet users agree that it should only take up to three mouse clicks to return back to the main page and to search more easily. Different forms that are used in Web sites include search boxes, drop-down menus, site maps, text-based hyperlinks, navigation bars, and menu tabs. Images can also be another hyperlink to transfer to another page on the site. It is crucial that the Web site has the same links in the same location as the previous page. Things would get confusing if the user had to look over each navigation button every time they entered a new area on the site. Long Web pages should be separated into shorter, more concise pages to avoid loading and scrolling. On many Websites today users will see “Back to Top” to navigate back to the top of the page, mostly on long Web pages. Most importantly, a link to the Home Page should be listed on every Web page according to the Web site.

Access Considerations
Device Compatibility and Assistive Technology should be taken into consideration while creating a multimedia Web site. As our society grows with more ways to reach the Internet than just the computer, Web site creators need to be aware of the fact that the public is using their Web sites on Smartphones, Tablets, iPads, and much more. The layout may be different on these smaller devices than would a desktop computer. Sites are now creating multiple ways to work with any form of technology. With stricter disability laws being put into place, we have started to think about different ways to inform the physically disabled via the Internet on Web sites. Braille display  and screen readers are just some of the newly advanced technology that can be used. Alternative text can be used, which is a text description for a web page image. These text descriptions of images are valuable for vision impaired users of the web site.

Refreshable Braille Displays are an electronic device, connected to a computer via a serial or USB cable, which uses small metal or plastic pins that move up and down to display braille characters so a blind person can read what is displayed visually on the computer. The “refreshable” quality means that the braille display is constantly changing as the user scrolls the mouse around the web page or document. The user can move the mouse around by through either the command keys or cursor routing keys located on the device, or through Windows and screen reader commands. Typically screen reading software, or just a screen reader, is used in conjunction with a digital braille display to give the ultimate experience for people with vision loss. A screen reader translates information on a web site into electronic text, which is sent to a speech synthesizer (so output is heard audibly) or to the refreshable braille display. The only thing that the screen reader cannot read is graphics; this is why it is important to include descriptions of pictures and “hover-over” captions when designing a web page to be sensitive to those with vision disabilities. While some may only need the speech synthesizer, most prefer to have the refreshable braille display because it provides direct access to information and thus increases efficiency in completing tasks; allows the user to check spelling, grammar, and formatting of their own input and is quiet, so it can be used anywhere without it be being disturbing to others. Refreshable Braille Displays come in 40, 70, and 80 character displays and can range from $3,500 to $15,000 depending on the character display.

Earn a Certificate of Completion for completing this course. Pass a 50-question test on this course with a score of 70 or higher and receive a certificate of completion. Visit our Computer Information Systems Certificate of Completion page for more information.

The text for this course is available from WikiBooks under the Creative Commons Attribution-ShareAlike License.