Introduction to Computer Information Systems/Multimedia

Web-Based Multimedia

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, It refers to the literal combination of multiple types of media. 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, however, is a term used to describe the multimedia (sound, video, or animation, text and images) found within web pages. Similar to others, web-based multimedia pages display information requested by the user through hyperlinks. Multimedia web sites are interactive, often containing elements with which the visitor directly works. Examples of this would be playing or pausing a video clip or game, and controlling a 3D object. At one point, web-based multimedia was strictly limited as both computers and internet services were too slow to support it. Over time, the significant increase in computer and broadband connection speeds have Web-based multimedia possible, and the success of Web-based multimedia is growing rapidly. The vast majority of sites today feature some form of multimedia. For example, it is often used for advertising, as regular website content (TV shows and photos posted by TV networks or podcasts), informative videos of available products offered by companies, or as "user-generated content", such as videos uploaded to YouTube or pictures uploaded to Flickr.

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.

Text instructions assisted by picture instructions

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 reality app used at a museum

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.

Multimedia Elements

The Five Multimedia Elements

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. The 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 an 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. adobe flash 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

A serif font, on top, and a sans-serif font, on the bottom.

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-serif 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 , 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 Camera

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

Chameleon GIF

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.

Audio

Mp3

There are many different types of audio files, and the each have their of distinct advantages. The most ubiquitous audio file is the MP3. MP3’s have become the standard audio files on most devices and on most websites. The advantage of MP3 file over different formats is their small size. MP3 files can be compressed, as they do not contain the inaudible sections of an audio track. While this results in good quality audio, while taking up a small amount of space, in certain situation, audio quality can suffer. The compression of MP3 file can distort vocal sounds, and can result in a ‘tinny’ sound. Because, some computers, primarily Windows-based PC’s use WAV files to store audio files. These files are uncompressed, so they take up a large amount of space, but they are of better quality than most MP3 files. As most desktop PC’s have room to spare, better audio quality is substitutes for more space used. Another file type common on windows computers is WMA. This format is optimized for use by Windows Media Player. Is primary advantage is that is copyright protected, but it can only be used on Windows Media Player. Another common audio file is DCT. This type of file is encrypted, and used for medical applications where patient confidentiality is needed.

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 Design and Development

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. Oftentimes, 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. Google.com

Navigational Design Considerations

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 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 Display

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.

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

HTML

File:HTML Tags.png

HTML Tags

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.

HTML5 source code

The newest version of HTML is HTML5, which is being created to replace both HTML and XHTML. HTML5 is designed to be simpler and many things have changed or added to the coding for HTML5. The DOCTYPE and character encoding declarations have both changed to be simpler to code. Along with new declarations have come new elements for semantics, controls, graphics, and multimedia because more and more websites are becoming more complex with more information being packed into a website. Some of the new semantic elements include <header> and <footer>, which make it easier for a web designer to indicate where a new page will begin and end. New controls for HTML5 markup language include the date, time, and a calendar to help users be more aware. The biggest addition for HTML5 is the <audio> and <video> multimedia elements, because a multitude of users love to be able to listen or watch something that is useful on the website. This is especially true for e-commerce websites because potential buyers would like to be able to see a product in use, which can be shown through a video. All in all, HTML5 is a newer markup language that simplifies the coding for web designers and also makes their websites more appealing to look at.

A Brief History Of CSS

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. 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. CSS3 is the most popular variation of CSS right now, but number 4 is already growing in notoriety.

XML and XHTML

A part of a Webpage written in XHTML.

Similar, yet very different than HTML, another type of markup language is called Extensible Markup Language, a universal format for structured documents and data on the Web. The biggest difference between the two markup languages is the fact that HTML describes presentation, whereas XML describes content. Simply, HTML describes the actual content such as text and graphic images, but only in terms of how it is to be displayed and interacted with. On the other hand, XML describes the content in terms of what data is being described. To do so, XML tags are then assigned to pieces of data. Once the data is tagged, it can be used with any XML document. XML is called “extensible” because the data contained in XML documents can be extracted and used whenever needed.

Another version of HTML that is based on XML is known as the Extensible Hypertext Markup Language, or XHTML. It combines the flexibility of HTML with the extensibility of XML. This language is used to create Web pages while also supporting XML, unlike HTML. This way, XML controls the actual content displayed, while XHTML controls the appearance and format of the Web page. However, one major difference between XHTML tags and HTML tags is the fact that there are stricter rules about how the markup tags are written. For example, unlike HTML, while using XHTML, all tags must be written in lowercase letter, every tag must have an end tag, and quotation marks are required for values.

AJAX

Ajax-vergleich-en

Many modern websites use a technology called AJAX, for fast and effective interaction with the visitor. AJAX has become a very popular method to retrieve data from the server in the background and the Dynamic Update page. AJAX stands for "Asynchronous JavaScript And XML". Developing code to JavaScript for AJAX implementation from scratch is very time consuming and tedious process. However, many libraries JavaScript, including jQuery, have excellent high-level AJAX implementation as a set of methods and functions that make it easier and faster to build web sites. AJAX is a development technique for Web applications in which JavaScript code in the visitor's browser communicates with the web server asynchronously, i.e. in the background. When you click links or forms contained on Convectional Web page a request is being sent to a new URL on the web server. The server sends a completely new page of HTML, which a browser displays, replacing the original page. When using technology AJAX, JavaScript code makes a request to the URL on the server. The code may also send the data along with the request. JavaScript code then processes the response from the server, and acts accordingly. For example, the calculation can be made with the returned data is added or updated widget on the page, a message to the visitor to update the database on the server. Since AJAX request runs in the background, the code JavaScript (and a visitor) can continue to work with the page during query processing. The process is hidden from the visitor, who does not need to leave the page they are currently viewing time. This makes the page with AJAX is very pleasant to use.

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

Creating the Multimedia Elements

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 Site

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. For example, Ajax technology 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.

Adobe Dreamweaver

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. For example, when menu options are selected, the appropriate JavaScript or other code used to add animation or interactivity is generated. Along with this, web site authoring programs almost always have the capability to include a variety of multimedia elements, like Shockwave and Flash animations, animated GIFs, video clips, and audio clips. Two of the most popular web site authoring programs are Adobe Dreamweaver and Microsoft Expression web. There are a few general features of web authoring applications a designer should know. This includes WYSIWYG, which stands for What You See Is What You Get, users can click and drag various website elements to a design canvas without having to code these widgets manually. Advantages of authoring software also include the ability to set up and use templates to ensure consistency between webpages and multi-media can be inserted into webpages. However, a disadvantage for using a web site authoring software is that it's not intuitive and easy to pick and use, some training or technical knowledge is needed. Web sites developed with these tools may not be coded efficiently, which leads to increased load times for users. Also, one needs a basic understanding of HTML. Furthermore, web site authoring software can be an expensive purchase.

Weebly is a popular website builder

Website Builders are web-based tools that make it easy to create websites for small businesses or for personal purposes. One of the big advantages of using a website builder is that it no longer requires a very extensive knowledge of HTML. So it require minimal technical knowledge to create a website. Another advantage is that it is made to be user friendly. So making a website has been made to be an easier and less daunting task. Another big advantage, especially for businesses, is that they offer mobile web design. Now that smartphones have become the norm. Most websites have a mobile version to them. So some website builders give responsive design to websites wherein they change when viewed on a mobile device as opposed to a computer. There are also plenty of website builders. Some may be free others may not. But mostly those that require payment also end up being the ones with the most features. A disadvantage of website builders though is that they can be expensive and while they give you a domain and an address, once you want to move your website to another host, some may not be able to thanks to a custom code they use. Most website builders will include "What You see is what you get" builders that let you create it by dragging and dropping website elements into the content area. However, sometimes it is hard to differentiate between quality website builders since some products are not up to their task (costing more money or time than anticipated) but still it is a great and easy way to set up one's “virtual storefront”.

Other Content Development Tools

ActiveX

ActiveX is a component of the software in Microsoft’s Windows operating system. Many of Windows’ applications such as Internet Explorer, Microsoft Office, and Windows Media Player use ActiveX in order to embed their functions into other applications. Microsoft Internet Explorer replacement browser, Microsoft Edge, will not support ActiveX, marking the end of the technology.

Testing, Publishing, and Maintaining the Site

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.

Bandwidth Considerations

In the age of the Internet, nearly everyone is online one way or another; however, not everyone has unlimited access. There are still people who only have mobile phones that are capable of accessing the World Wide Web, but with data limits. When creating a website it is important to consider this. When a website is created, it has individual elements that have varying sizes. For example, recently the search engine "Google" has redesigned their logo and, in turn, reduced the size of the image from 6,380 bytes (6Kb) to 305 bytes. This allows people with data limits to access the website more, because every time the page is loaded, it uses less data.

Demand for Multimedia web Site Development

web Design and Development

In this day and age everything is online, everyday individuals go online and they use the Internet for different purposes. There is a lot of money in the industry to make web sites. The demand for these sites is that they are intriguing, useful, and navigable to users. Companies hire web designers and web developers to create multimedia elements and create sites for the online presence of the company. As a web designer, you need to have knowledge in Photoshop, Illustrator, HTML, CSS, and JavaScript. A good web developer needs to know all the things that a web designer needs to know plus advanced programming skills. Graphic design has truly emerged as a demanding field of the economy with new technological developments in multimedia and software. As mentioned above, HTML5 and CSS3 are new coding techniques that are available for developers. Students interested in these fields should continue to study HTML and CSS.

Review

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 or XRML); Markup Languages 2. Web-based Multimedia 3. Audio; Video 4. GIF; PNG; JPEG 5. Flowchart; Storyboard