Last modified on 9 June 2014, at 11:36

Introduction to Computer Information Systems/Multimedia

Web-Based MultimediaEdit

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[1] 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[2] 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.

Multimedia website with images, video, and text

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. [3]

Multimedia ElementsEdit

The Five Multimedia ElementsEdit

Animation

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! [4]

Multimedia Web DesignEdit

Basic Design PrinciplesEdit

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. [5] You want to be sure that your information can be seen on all computer screens.

Using Flow Charts, Page Layouts, and StoryboardsEdit

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. [6] 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. [7] 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. [8]


Navigational Design ConsiderationsEdit

Braille Display

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. [9]

Access ConsiderationsEdit

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 [10] and screen readers [11] are just some of the newly advanced technology that can be used. Alternative text [12] can be used, which is a text description for a Web page image. It is displayed when the image is pointed to a can be read by assertive technology.

Creating a Web Site using HTML, XML, XHTML, CSSsEdit

HTML

HTML or Hypertext Markup Language is mostly used to create webpages. HTML is a code made up of small pieces called tags. Tags are small pieces of the HTML code that give commands to the computer on how to format whatever it is linked to. tags begin with a less than symbol (<), then the command is written, then closed with a greater than symbol (>). That is the beginning tag. Next the text it applies to is inserted. Then, the tag is ended with a less than symbol (<), followed by a common slash (/), then the same command code as it began with, then a greater than symbol (>). So, your basic code will look something like this: </(insert code)> Applied Text Here </(insert code)> .

There are so many different things you can do with HTML. You can highlight text (even in different colors), you can make text different colors, you can (Hover Mouse Here), as well as bold face or italicize text. These are just some of the basic modifications that can be created by using HTML formatting.There are even ways to insert images as well hyperlinks. Here I have inserted A Link to Our Wikibook Homepage and even the pictures you see to the right. The possibilities are almost endless when using HTML.

The biggest problem with HTML is that most people do not want to take the time to sit down and learn all of the little codes and specifications. It is very useful when trying to organize webpages once it is mastered. HTML allows users the ability to manage where images, videos, animations, and text formatting are all located. It is a very powerful and useful design tool and something that seems to be somewhat overlooked and taken for granted.

A Brief History Of CSSEdit

The way CSS and HTML work together is very much like a Mr. Potato Head toy. The content of the web page using HTML is the potato itself, whereas the stylish customization using CSS is the collection of items that personalize your potato.

To make your website truly stand out, it needs a sense of style greater than what HTML and its ilk can provide. This is where CSSs come into play. CSSs stand for Cascading Style Sheets, and they offer a way to not only specifically style a Web page but even the entire Web site to which it belongs. Before CSSs there had been individuals who created style sheets for their own purposes but thought it unnecessary to publish their developed syntax, believing that each browser should decide how best to display pages to its users. When Web page writers issued complaints that they couldn't customize more deeply, they were generally ignored, forced to deal with browsers that offered consistently fewer options for the sake of streamlining. To address this, a Norwegian by the name of Hakon Wium Lie offered a first draft of Cascading HTML Style Sheets in 1994. He couldn't have imagined how popular his development would become.[14] CSSs offer plenty of room for style without being needlessly complicated like some of its rival setups, such as DSSSL. The easiest way to describe what makes CCS stand out as a language is how it works to separate the content of a page from its display.[15] CSS3 is the most popular variation of CSS right now, but number 4 is already growing in notoriety.

XML vs XHTMLEdit

[16]

Multimedia Web Development (Scripting, Development Tools, Authoring Software, and Testing)Edit

Creating the Multimedia ElementsEdit

Media

Multimedia presentation uses graphics, sound clip, video clips, and text to deliver a message to the audience. All you need is a multimedia authoring program and a computer in order to create a presentation. The reason in using multimedia will be able to not only get the message you want to convey to the audience out but it provides a creative way in making it for the viewer. These following are types of situations that would see yourself wanting to use multimedia presentations in order to provide a creative presentation. One is for projects in order to show your teacher or a classmate in a more formal setting, another would be a class exhibit for the library or computer lab, for a more personal use you could utilize it as a diary, and the last two ways would be in a slideshow format and or utilize it for a yearbook. The three C’s in making a good multimedia presentation would be keeping it Clean, being Consistent and bring Character to the presentations. Next you will need to design the presentations in which make it able to be presentable and attract the attention of the audience. To continue, you’ll have to plan your presentation. Make an outline and make sure you understand the major topics of the presentation. Next the presenter will have to choose their media; multimedia elements support the main points of the presentation. Certain data will benefit the presentation as well, like, charts, graphs, maps, images and videos. Afterwards, review revise and rearrange so you know that the information is accurate and ready to be presented.

Creating the Web SiteEdit

Python is a programming language used in Web design

Web site developers use a number of tools to create Web sites. These can be divided into three large groups: markup languages, scripting languages, and Web site authoring software. Markup languages are the foundation; they are coding systems that create the overall structure/appearance of the Web page by the use of tags. Tags are commands that allow the Web page designer to arrange text and multimedia. HTML, or Hypertext Markup Language, is the dominant markup language used today. The current version is HTML5, and it is intended to replace both HTML and XHTML, another markup language.

Scripting languages allow the developer to create instructions, or scripts, that run in the code of the Web page. One example of a very popular scripting language used today is Javascript. Scripting languages are found everywhere.[17] For example, the scripting language Ajax is found in the widely-used services Google Maps and Gmail. When used in combination with markup languages, scripting languages can enable developers to implement a wide-range of features and content into their Web pages.

Web site authoring software is used to make more complex Web pages where developers can take advantage of commands that automatically generate tags and Cascading Style Sheets, which are used in the look and formatting of what was written by the markup language. This enables the developer to work in a more productive manner because animations, effects, backgrounds, etc. can be applied all at one time. Also, many of these programs feature development tools that test for browser compatibility of the Web page as well as broken links, which ensures the quality of the Web page.

Testing, Publishing, and Maintaining the SiteEdit

Publishing a Website

It is extremely important, before your webpage goes out, to make sure that it is up and running and functioning at one hundred percent capability. This means that there cannot be any bugs, glitches, or error pages displayed when a user is utilizing your web page. Though this may seem easy enough, there are many different steps that one should go through to make sure their page is up to speed. Every link, icon, animation, picture, and etc., needs to be tested. Many websites like to utilize the software that is out there that will manually do these needed checks for you, however it is still important to keep an eye out personally for anything that could be raising red flags. At this point, after vigorous testing, the site should be set and ready to be published. All though the page has been successfully published, the work does not stop there. Many people like to think that they are set for the future, but these pages require constant maintenance. The publisher needs to be constantly checking to make sure everything is still running smoothly, things are still up to date, and links and animation are still functioning. With out this much needed maintenance, a site becomes difficult and outdated, and users will go out of their way to make sure that they do not use it. [18] [19]

ReferencesEdit

ReviewEdit

In the world we live in today, we are constantly bombarded by multimedia through billboards, signs, logos, texts, ads, emails, and our day to day web browsing. Below is a list of vocab from the chapter and the words general definitions. Below the list is a set of fill in the blank questions. Use the vocab list to help you fill the blanks. Some words may not be used. Then check your answers at the bottom of the page.

1) Multimedia: Integration of a variety of media.

2) Web-based Multimedia: (aka rich media) refers to multimedia of any kind located on a Web page.

3) Virtual Reality (VR): used in E-commerce to show what a product or service will look like or do in the real world.

4) Text: used to supply basic content and is important in most Web sites.

5) Images/Graphics: digital representations of photographs, drawings, charts, and other visual objects.

6) GIF: (Graphics Interchange Format) used most commonly with non-photographic images and is the standard format for Web page images.

7) PNG: (Portable Network Graphics) the responding format created in 1996 because of issues with the GIF format.

8) JPEG: (Joint Photographic Experts Group) the standard format for photographs based on the Web.

9) Thumbnail Image: smaller images (similar to icons) that are linked to the full size images of larger files.

10) Java Applet: a small program in a Web page designed to perform a specific task from calculations to animations.

11) Animated GIF: a group of GIF images stored together in one animated file.

12) Flash or Silverlight: Animation developing tools.

13) Audio: All types of sound (music, voice, and effects, etc).

14) Video: a continuous stream of visual information that is broken into frames when the video is recorded.

15) Web Site Design: refers to the process of planning what your Web site will look like and how it will work.

16) Flowchart: describes how things relate to one another.

17) Page Layout: illustrate the layout and navigational structure of a Web site.

18) Storyboard: an ordered series of sketches depicting each page or screen in an animation sequence.

19) Alternative Text: captions of images to allow those who are unable to view the images the clarification of what they are missing.

20) Web Site Development: Creating a Web site after it has been designed.

21) Markup Language: a coding system used to define the structure, layout, and general appearance of the content of a Web page.

22) HTML (Hypertext Markup Language): The original Markup Language designed for creating Web pages.

23) XML (Extensible Markup Language): a set of rules for exchanging data over the Web.

24) XHTML (Extensible Hypertext Markup Language): a version of HTML that is based on XML.

25) Cascading Style Sheets (CSSs): specifies the styles used with a Web page or an entire Web site.

26) Wireless Markup Language (WML): language based on XML that is used to create Web pages to be displayed on WAP-enabled wireless devices (such as older mobile phones and those used in some developing countries).

27) JavaScript: developed to enable Web authors to implement interactive Web sites.

28) AJAX: A set of Web standards designed to better handle Web page interactivity by downloading only new data from the Web server, instead of redownloading the entire Web page.

29) Web Site Authoring Software: a type of application program used to create Web pages and entire Web sites.


Quick Quiz:

1. HTML, XML, and _______ are all forms of _______.

2. Multimedia (sound, video, animations, text, and images) located on Web Pages is known as __________ or rich media.

3. Many sites such as https://www.youtube.com integrate _______ and _______ into their site to provide entertainment to viewers and/or listeners.

4. The three main types of images include ¬¬¬¬¬¬______, _______, and ______.

5. Placing pages in a ¬¬¬_____ show how they are related, while using a _____ shows the order of specific animation sequences.


Answers: 1. XHTML (Also Acceptable: CSS or WML); Markup Languages 2. Web-based Multimedia 3. Audio; Video 4. GIF; PNG; JPEG 5. Flowchart; Storyboard