sign in sign up
<<
Home , Portable media player

Working with Frames, Animations, Sound, and Unit6-1

British Columbia Institute of Technology School of Business and Media

MDIA 1205: Web Design Technologies 1: Publishing on the and Intranets

Unit 6: Working with iFrames, Animations, Sounds, and Movies; and Administering your Website

A. Objectives

Upon successful completion of this unit you will be able to:

• demonstrate the use of iFrames in Web pages. • describe the basic formats and properties of and video files, • attach audio and video files to your Web pages, • describe the features of animated and insert links to them in HTML documents, • discuss other forms of animation available in Web pages, • list the steps necessary to publish your Web pages, • describe the process of maintaining a website, • list some methods to market your website, and • list the next steps you must take to become a professional designer of Web pages.

WARNING: The HTML5 coding elements used in this unit have not yet been fully developed and browser support for these is somewhat weak. You will find that we have had to use some deprecated attributes and properties for

That tag simply places the source Web page in the upper-left corner of the calling page. To better see the options and control over the   

Here is the browser display.

NOTE: Notice that we have linked here to two internal files that we have especially formatted to display in the two iFrames side-by-side. If you link to external sites, make sure they are formatted for mobile devices, so that the narrow iFrame does not require horizontal scrolling. The non-breaking spaces   are included simply to move the two iframes slightly apart.

The following attributes are possible for

 While the name= attribute has been replaced by id= in HTML5, it is best to use both here for older browsers.

 Next we set up the first image to be displayed.

 Here we establish the width and height of the iFrame viewport. These dimensions (width="600" and height="450" in this instance) must be the same for all slideshow images or distortion/skewing will occur. Also, the thumbnails should have the same dimensions for best display (100x75 px in this case).

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-6

Next, we set up the series of thumbnails that will target the iFrame viewport. We will only show the first in the series; the rest are similar.

example6-2.html (section only)

Blue Hills Thumbnail

The key element here is target="slideshow" which links this image to the name/ID elements in the first extract above.

Lastly, we add an iframe declaration to the CSS to eliminate borders and introduce the overflow property.

example6-2.css (section only)

iframe { border: none; overflow: hidden; }

Overflow: The overflow property specifies what happens if content overflows an element’s box. We are using the value hidden to prevent scrollbars from appearing in some browsers. Unfortunately, these properties do not seem to prevent the scrollbars from appearing in Firefox and Edge (see below). For more information link to https://www.w3schools.com/cssref/pr_pos_overflow.asp.

NOTE: When developing this example, we noticed that scrollbars might appear in the viewport using Firefox and Edge browsers. If this happens to you, making the viewport a few pixels larger than the image it contains should eliminate this problem. Using the example6-2 HTML code the viewport dimensions are width="600" height="450" and by setting this element’s dimensions to width="620" height="470" seems to solve this problem.

Here is the result in the browser before making any adjustments to the viewport dimensions.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-7

CSS: When you examine the file example6-2.css you will notice the following in the first line of the file:

@charset "UTF-8";

This indicates the character set for the CSS file. It is a good idea to always declare the encoding of external style sheets if you have any non-ASCII text in your CSS file. For example, you may have non-ASCII characters in font names, in values of the content property, in selector values, etc.

C. A Medium

The Web is a multimedia medium, so we should attempt to employ multimedia elements that are appropriate to the message of our sites. However, using multimedia elements simply because we can use them (because they are “there”) is not appropriate design. Multimedia design elements such as animations, audio, and video should only be used if they enhance the message of your site. Otherwise they should be avoided as they can significantly detract from the design of your site if they are not used appropriately.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-8

Animations, digital sounds, and digital movies are Web page features that can set your website apart from the competition. Like images, however, overuse of these elements can also detract from rather than enhance your presentation. Sounds and movies in particular can be very large and slow to download. Be careful with these elements and only use them when they can deliver a message that cannot be adequately delivered in any other way.

Creating GIF animations is relatively easy if you have the appropriate software, such as Adobe Photoshop or one of the many /shareware applications available on the Net.

Creating sound files on a home can be a challenge because of the special hardware and software required. Most and the latest PC have the built-in capability to digitize sound but both platforms may require appropriate editing software which we will list later.

NOTE: In previous “editions” of these course notes we have dealt with many audio and video formats that are quickly becoming obsolete. Now that the HTML5

Keep your audio files short so that they download quickly to the user — we suggest 5 minutes maximum and preferably less. We really prefer 30-second audio “clips” that give the user a “taste of the content,” but not the entire file. Remember that the computer users’ attention span is very short and they may not be nearly as excited with your 20 minutes of hard-rock jam as you are. Using one of the audio editors listed below, crop any white space from the beginning of the clip and a fade-out to the end if you are providing only a short sample of a longer composition. Always compress your audio clips using some of the software listed later so that the file size is as small as possible without losing a significant amount of quality. Never expect users to download raw (i.e. uncompressed) audio clips. Remember that you can slice an audio file in half by sending a monophonic rather than a stereophonic file.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-9

Digital movies are even more demanding in terms of both hardware and software. With software such as Movie Maker, that comes with the latest PC operating systems, and iMovie, that comes with the latest Macintosh operating systems, you have first-level software tools. If you have a digital camcorder, you can attach it directly to your computer, download clips to Movie Maker or iMovie and edit them into a very respectable presentation, using software and hardware that used to cost tens of thousands of dollars and now come virtually free — excluding the cost of the camcorder, of course, but even those are ridiculously inexpensive these days. If using a camcorder, always employ a tripod to steady the camera — even a monopod (a one- legged tripod) will help. You do not want to make your viewers “seasick” because of too much camera movement. Professional news videographers can take steady shots with their 7-kg+ (15 pound) hand-held cameras but I don’t think any of us have as much experience as they have — yet.

As with audio, if you are going to add video to your pages keep the clips short — not more than a few minutes. If you can’t send your message in 5 minutes or less of audio or video then perhaps there is a better way of delivering it. Never send a video file at full-screen resolution — first try quarter-size and then half-size to see what works best. The smaller will transfer much better than the larger videos and give a much more professional effect (but remember to keep the camera tight to the subject — no extraneous backgrounds). If the network is busy, the larger videos will stop/start ineffectively and, worse, drop frames from time-to-time. Smaller really is better in this instance. As with audio, video should never be sent to the user “raw” (i.e., uncompressed).

Online networking sites like Facebook and YouTube have improved tremendously in the past few years and can deliver near-professional quality video if you are careful when creating the original. Streaming audio and video is always the best way to deliver these media to your audience.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-10

STREAMING: Streaming is a technology for delivering audio and video content across a network, including the Internet, without waiting for the entire file to download. When a request for content is made, the content is partially downloaded and stored in a buffer. When enough of the file has been downloaded to allow playing without dropouts, the content begins to play. Using a streaming media system enables you to deliver content in real time without having to wait for entire files to download. Content that is streamed cannot normally be saved on your computer and thus cannot be replayed at a later time without re-connecting with the source.

To hear a sample of an audio streamed file without special server-side software, link to https://webapps.bcit.ca/mdia1205/audio/example6-3/example6-3.htm. The file is being streamed from the WebApps server.

AUDIO: The music is “Concerto for Oboe and Strings in D Minor” by Alessandro Marcello, Movement 1 (extract).

Internet radio provides an excellent example of how effective streaming audio can be. To find out about Internet radio, link to https://en.wikipedia.org/wiki/Internet_radio. To experience Internet radio, you might begin with https://www.internet-radio.com.

Podcasts are also a modern Internet feature with respect to the transmission of audio (and often video) content. The major difference is that, while most streaming media happens in real time, most are archived at the source for later download.

PODCASTING: A (from iPod and Broadcast) is like a radio program except users can download a podcast to a portable media player (such as an iPod, iPad, or other

player) and listen to it at their convenience. Podcasts can be created by anyone with the right equipment (computer, Internet connection, and audio recorder) and uploaded to a server on the Internet where they can be found and downloaded by podcatchers (programs that can identify a podcast.) The podcatcher reads an RSS (Really Simple Syndication) feed to identify the podcast and download it to a computer.

Podcasts can have only sound or sound and video. A video podcast is sometimes called a vidcast. A podcast with sound and pictures (but not moving) is called an enhanced podcast.

If you do not wish to create your own media, there are many animations as well as sound and video files available on the Net. Remember, however, that most files you

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-11

find on the Internet are subject to copyright restrictions and may not be used in a public commercial environment without special permission from the author(s). However, the “fair dealing” provision allows for the use of work created by others for academic purposes. In addition, the Desire2Learn interface is a secured environment, so you are not displaying the work of others in a public venue when you use files off the Net.

D. Using Animations

NOTE: GIF is the oldest and simplest image animation format still commonly used on the web. Despite its limited color palette (256 colors per frame), lack of alpha transparency, and relatively large file size, 30 years later it still remains widely used and is the only animated image format supported in virtually all major Web browsers.

The GIF format allows you to embed several image “frames” within one GIF file. These frames are projected one at a time to create short, sometimes repeating (looping), animated sequences. You can find whole libraries of animated GIFs on CD-ROMs and many are available for downloading from the Internet (check copyright carefully). You can also make your own GIF animations with such software as Adobe Photoshop, or the many freeware/shareware animation utilities available on the Net (for freeware and shareware software check at Tucows — https://www.tucows.com/ and search for Image Animators).

You can insert a GIF animation into your Web page in the same way as you would import any other image file.

Like all media elements, you should be careful not to overuse GIF animations. While many of these are “cute,” they must send a message that complements your site to be effective. Overuse of these little animations can detract greatly from the appearance of your site. Used well, they can add an important new dimension to the design. Avoid the cartoon-like GIF animations and concentrate on using those with artistic content — and meaning.

If you link to the Web pages for this unit or point your browser to https://webapps.bcit.ca/mdia1205/utilities/animation.html, you will see examples of 3 GIF animations (one good, one not so good, and one excellent) as well as an animation in the new format APNG. You might wish to view those animations as you read on. We will show you screen captures here, but to get the full effect, you have to view these on the Web.

The first is a classy and tasteful animation that sends a message about how animations work (bear in mind that you are seeing only 1 of 9 frames here):

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-12

The second is “cute” but you would find limited use on the Web for sending a message with this animation. Remember you are seeing only frame 8 of 58 frames here.

As GIF animations got a new lease on life in HTML5, we begin to see what important messages may be delivered using this format. For example, our next GIF animation example illustrates the meaning of “Responsive Web Design” where the dimensions and layout of pages are altered depending upon the resolution of the browser (i.e., desktop browser, tablet, or ).

The screenshot below shows only the first of 114 frames and the first few frames display the resolution for a desktop browser. When this example finishes, it repeats from frame 1. This is known as “looping” and this is not always the best way to use animations.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-13

In addition to more complex GIF animations, recent advances in browser technology has resulted in support for PNG animations, which are often known as APNG (Animated PNG). Our next example shows a APNG animation used to send the message that the Firefox browser now supports this format.

Bear in mind that the software required to create APNG animations is still in its infancy and in 2019 this format was not yet fully supported in Photoshop.

All of the above show examples of what we call “raster” or “bitmap” animations as opposed to “vector” animations, so here are some definitions you will need.

RASTER or BITMAP GRAPHICS: A graphic composed of a grid of small squares known as pixels. Each pixel contains data that describes whether it is black, white, or a level of gray or color. Bitmap images are edited by manipulating groups of pixels, and are resolution-dependent, meaning that when you resize them, they lose definition.

VECTOR GRAPHICS: A graphic made up of mathematically defined curves and line segments called vectors. Vector graphics can be edited by moving and resizing either the entire graphic or the lines and segments that compose the graphic. Vector graphics are resolution-independent, meaning that they can be resized without effecting the clarity of the image.

Some years ago, Flash animations (in the vector format) became very popular on the Internet but, once mobile developers (especially Apple) ceased to support this format, developers stood in line to support new animation formats.

Meanwhile, the APNG format and others such as WebP (introduced by Google), MNG (Multiple-image Network Graphics), and FLIF (Free Lossless Image Format) are attempting to fill this gap, although full browser compliance for these new formats may still be years away.

Stay tuned.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-14

E. Using Sounds

There are some Web pages that will benefit from the addition of sound files. Some obvious examples are a site devoted to selling audio CDs where you might allow a short excerpt of each CD to be heard before buying (remember copyright here; most sound files are owned by someone), a site devoted to the history of music where sound clips are important to understanding, or a site where instructions on the use of software are better delivered in speech than through text. However, like other multimedia elements, you should not use audio on your site unless it enhances its message. If audio files do not provide a value-added feature for your site, they should be avoided.

Before the introduction of the HTML5

You will recognize the names of many of the audio players as their “first life” on the computer involves such activities as playing audio CDs on your system or accessing streaming content (including radio feeds) that are normally delivered via the player’s host. However, providing audio content on your own Web pages has always been a secondary task for this software — and that fact has always been evident in the difficulty your colleagues (and their Web users) have had in the past in making this process work seamlessly.

To make all of this more confusing, the Web-based audio players have, in the past, required the use of browser plugins or ActiveX (for Internet Explorer) controls to allow the browser to “read” the audio content. If the correct player were not installed together with the necessary plugins or ActiveX controls, the desired audio file would not perform well — or not at all in the worst of scenarios.

We have listed below the major media players we are talking about — and they handle both audio and video content. We have included links if you need more information.

• Apple QuickTime: This is probably the first developed and most popular of the media player and handles a good many audio/video formats. This software was original developed in 1991 for the Macintosh computer but Apple no longer supports Quicktime for Windows so use one of the alternatives listed below. This player is still used on the Web by designers who have not yet adopted the HTML5 audio standard. For more information, see https://support.apple.com/quicktime.

• : Anyone using the Windows operating system will know this player well since it is built into that OS. Like QuickTime it handles many audio/video formats. The software was developed in 1991 as a

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-15

complement to the growing popularity of Apple’s QuickTime software. While WMP versions for the Macintosh were produced between 2003–2006 the only reliable method for playing WMP files on the Mac at this time is the VLC Media player, available at https://vlc-media-player.en.softonic.com. There is no editing of WMP files available in VTC but conversion utilities are included.

• RealPlayer: This software was first developed in 1995 and like its cousins above, can handle a good many audio/video formats but it really shines with its proprietary RealAudio (*.ra, *.rm) and RealVideo (*.rv, *.rm) formats. While RealPlayer does have a browser plugin for inserting Real media into Web pages, it has not, in my view, been very successfully. For more information, see https://www.real.com (this link may be slow to load).

• VLC Media Player: This is a free, cross-platform compatible player and is available at https://vlc-media-player.en.softonic.com.

In the HTML5 specification, the use of these players, plugins and ActiveX controls has been completely abandoned (thankfully) with support for the 4 most useful of audio formats now being built directly into the browsers using the HTML5 specification. You may expect the list of supported audio formats to change over time, but the currently most usable of the existing audio formats are already covered by the specification.

The popularity of delivering audio over the Internet has spawned more than half-a- dozen audio file formats over the years, many of which have now almost totally disappeared. Here are some of the “historic” audio file formats which you might meet in your research — we will list in greater detail those formats supported by HTML5.

• AIFF (extension: .aif): Audio Interchange (AIFF) is the most common of the Macintosh audio file formats — not in HTML5.

• SUN-AU (extensions: .au, .snd): This was one of the first audio formats available and was developed by Sun Microsystems in 1992 — not in HTML5.

• QuickTime (extension: .mov): This is Apple’s for QuickTime-based multimedia — not in HTML5.

• RealAudio (extensions: .ra, .ram, .rpm): While useful for other audio/video applications (such as audio and video streaming) the Real formats are currently less useful for Web audio (and video) than other applications — not in HTML5.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-16

• (extensions: .wma and others): Like Real Audio, while useful for other audio/video applications (such as audio and video streaming) the Windows Media formats are currently less useful for Web audio than other applications — not in HTML5.

• MIDI (extension: .mid): MIDI is an acronym that stands for Musical Instrument Digital Interface. MIDI involves hardware and software specifications that allow electronic musical instruments (and also computers and electronic musical instruments) to communicate with each other. Streaming MIDI files on the Net is available in QuickTime, but in few other players — not in HTML5.

NOTE: The number of “not in html5” notations above should tell you something about the potential future for these older audio formats.

1. Audio File Formats in HTML5

NOTE 1: You can audition and compare examples of all of the following formats by going to the HTML content pages in D2L for this unit.

NOTE 2: With the advent of the HTML5

NOTE 3: If you have clients still using dial-up modems, you might consider linking to large audio files (for download) as opposed to embedding them on your Web pages— see section 6-E-3: “Inserting Audio into your web pages”. Like files, sounds files come in a variety of formats, some generic (i.e., free) and some proprietary (i.e., the format is owned by a manufacturer and may be subject to licensing fees). Many audio formats can use compression and these are, therefore, more desirable for use on the Web. Here are a few of the most common audio file formats that you are likely to encounter.

The following audio formats have been included in the HTML5 specification as they are the most useful of all of the audio formats available.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-17

a. WAVE (extension: .)

WAVE is not an acronym but is usually capitalized as if it were. The full technical name is “WAVEform.” This audio format was developed by and IBM in 1998 and soon after it was developed it became the most popular of the PC audio formats before Windows Media Player appeared (see above). While some critics may feel that this is a relatively archaic audio format, others point to its great flexibility in terms of clarity and editing as two of its strengths. In fact, many broadcasters worldwide turned to this format when they moved from analogue to digital recording of audio.

b. MPEG-3 and MPEG-4 (extensions: mp3 and mp4)

MPEG is a very popular standard for delivery of music on the Internet and currently comes in several flavors, including MPEG-3 and MPEG-4, which are the latest versions. These produce very high-quality audio — and high-quality video in the case of MPEG-4, although audio-only is available in this format as well (often with the extension m4a). The data rates of these codecs do not adequately support dialup modem streaming, so MPEG files are generally downloaded for later playback. However, modern high-speed connections make the streaming of high-quality audio a reality for these two specifications, which is why they have been included in the HTML5 specification.

c. Ogg Vorbis (extension: .ogg)

There is a recent open source audio format of which you should be aware. Ogg Vorbis is a lossy , meaning audio quality is lost while compressing (how much is lost depends upon bit rate used — higher bit rates will produce audio sounding exactly as the original). Ogg Vorbis is comprised of two parts, Ogg is the container while Vorbis is the compression format. The default quality of 0.4 (estimated 128 kbps) gives very reasonable encodings and should be a starting point. The reproduction is said to compare favorably with MP3, but the format is not yet widely supported outside HTML5. For more information, see http://www.vorbis.com/.

Recall that we stated earlier that not all of these formats are supported by all browsers, as the following chart reveals.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-18

Browser WAVE MP3 MP4 OGG Firefox Mac

Firefox PC

Chrome Mac

Chrome PC Safari Mac Internet Explorer PC

Microsoft Edge PC

You will notice that we have included the Ogg Vorbis format here. The HTML5 specification indicates that the .ogg format (which is open-source) is intended for use with the

You can test your browser support for the HTML5

So let us (finally) listen to some HTML5 audio files. So you can audition some HTML

When you open Example 6-4 you will see the following in Google Chrome.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-19

AUDIO: The music is “Concerto for Oboe and Strings in D Minor” by Alessandro Marcello, Movement 1 (extract).

NOTE 1: The most realistic performance for these audio files is demonstrated when they are streamed from an external server — and our examples in the HTML Course Content notes, as well as the individual examples files under Resources, are being streamed from the BCIT WebApps server.

Don’t worry about the “specifications” notes at the top of this file just yet — all of that will be made clear below. Here are the file sizes for the same 32-second audio sample reproduced above in various formats on that page arranged from largest to smallest file size.

Format File Size WAVE 751k MPEG-3 683k MPEG-4 555k OGG 219k

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-20

Notice that the WAVE file for this 34-second example is the largest (at 751kb) while the OGG file is the smallest (at 219kb). Remember that file size is only one variable — the other is quality.

As you audition each file, try to see if you can detect any dropouts and re- buffering and also try to detect any artifacting (wavering) in the sound reproduction.

Each browser has its own design for the HTML5 audio console that it presented. For Firefox it looks like this —

In Google Chrome the design is slightly different.

Safari has its own unique design —

but perhaps the most attractive is that console designed for Internet Explorer.

When you open Example 6-4 in Google Chrome, you will first notice that all of the audio consoles are active, because Google Chrome will handle all four of these audio formats. Other browsers have different ways of dealing with non- supported formats. In Firefox the MP4 console will not appear, in Safari you will see a console without a speaker icon at the end of the controller, indicating that this format is not compatible with that browser, and in IE the WAVE and Ogg Vorbis formats will show the message “Invalid Source,” indicating that those two formats are not supported by IE.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-21

So you can test the various HTML5

AUDIO: The music is “Gabriel’s Oboe” by Ennio Morricone from his film score for The Mission (1986).

Once again, don’t worry about the specifications listed at the top of this file — all of that will be made clearer later. If you click on “Audition WAVE File (2.9mb)” the audio console of that file will appear in a pop-up window. The files are being streamed from the WebApps server to give you the most realistic presentation.

So, I see you asking — why do we bother using so many audio formats when so few are supported by all browsers? The HTML5 audio tag has solved that as well, as you will soon see.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-22

If you are going to use audio files at all, you must have some understanding of audio sampling rates and audio resolution.

2. Sample Rates and Resolution

There are two aspects of sound that you must understand before beginning to process and insert sound files into your Web pages — sample rates and resolution (or bit depth).

a. Sample Rates

Sounds are heard as a result of the pulsating of groups of molecules in the air around us. This vibration of these molecules can be converted to a graphic representation of the sound (using a device known as an oscilloscope) resulting in a graphic waveform.

Waveforms can be very simple, like the sound of a whistle:

or very complex, like the sound of a symphony orchestra.

To be heard through a computer or transmitted over the Internet, these sound waves must be converted to digital information — sets of numbers which represent the sound. To accomplish the conversion from analogue data (continuously variable, as we find in a cassette or audio tape) to digital data (numeric, as we find in an audio CD), your computer uses an Analogue to Digital Converter (ADC). To reverse this process so you can hear the sound,

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-23

a Digital to Analogue Converter (DAC) is used. Your CD player uses a DAC to allow you to hear the music that is represented digitally (in numbers) on your audio CDs.

We are sure you are thoroughly confused at this point. Let’s begin with the terms analogue and digital. If you have a with minute and hour hands, you have an analogue device — it is continuously changing. If you have a watch that shows the hours and minutes (and even seconds) in digits you have a digital device. With an analogue watch there are many small fractions of time between second 1 and second 2; with a digital watch there is virtually no time between second 1 and second 2 — at least not that the device can display.

Sampling rates refer to the number of “snapshots” that your computer takes of the analogue waveform. Just remember this — the more digital snapshots that are taken of an analogue waveform, the more like the analogue waveform the digital representation will be. See the illustration below. Low sample rates (A) limit the range of frequencies that can be recorded, which can result in a recording that poorly represents the original sound. Higher sample rates (B) can more faithful reproduce the sound you wish.

So, the higher the sampling rate you use, the greater the fidelity (quality) of the sound will be. Sample rate refers to how representative of the original instrument(s) the digital file is — if you record a piano, and it does not sound like a piano when played back, then your sample rate is too low. However, if you take a large number of digital snapshots of your audio file, the resulting digital file will be much larger than if you took fewer snapshots. What this means is that the greater the sampling rate the greater the fidelity (quality) of the sound, but as the sampling rate increases, so does the file size. Remember that large files transmit very slowly over the Internet. You have to carefully balance the clarity of your sound with its file size.

The unit of measurement used for audio sampling rates is Hz (Hertz — named after the German physicist Heinrich Rudolph Hertz) or, more properly, kHz (kiloHertz — thousands of Hertz). Hertz translates to cycles-per-second, using the older definition, before Hz was introduced.

Here are some popular audio sampling rates (1 kHz = 1 000 snapshots per second):

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-24

NOTE: There are “live” examples of each of the following sample rates in the HTML content pages for this course.

48 kHz This is the sampling rate used for audio CDs — 48 000 snapshots/second. It provides excellent audio quality but many computer sound cards will not sample at this frequency.

44.1 kHz This is close to the sampling rate used for audio CDs and also provides excellent audio quality, but the file size is 4 times that of the 11.025 rate. The download time for this rate will be 4 times the download rate for an 11.025 audio file.

22.05 kHz This sampling rate is less than one half of the audio CD sample rate. It produces quite acceptable audio reproduction, but the file size is twice that of 11.025 kHz, and will take twice as long to download over the Internet. This sample rate may be used for music that does not have a wide frequency range, such as a rock band, but should not be used for music with a wide frequency range, such as orchestral music.

11.025 kHz This sampling rate is less than one quarter of the sampling rate used by audio CDs. This sample rate is highly effective for speech files but is the lowest advisable sample rate for music files and you will notice some loss of high-frequencies for such files.

8 kHz This is probably the lowest sampling rate that will produce an adequate representation of a simple sound (nevertheless, there are 8 000 snapshots of the waveform taken every second). The Sun µ-law audio format normally uses this sampling rate, but the fidelity of the sound is so low that it cannot be used effectively for anything but speech.

You must balance the sample rate, audio fidelity (quality), and download time of your sound files very carefully unless you want to annoy (or lose) your users.

However, the resolution or bit depth of an audio sample also comes into play here.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-25

b. Audio Resolution or Bit Depth

NOTE: There are “live” examples of each of the following bit depths in the HTML content pages for this course.

There is another variable to consider in digital audio — resolution or bit depth. Resolution basically translates to the clarity of the resulting sound. You can look at resolution as the amount of difference between soft and loud passages in your sample. The higher the resolution or bit depth, the more data are being transferred with each snapshot of the sound. There are basically three levels of resolution available on most computers — 8 bits, 16 bits, and 32 bits. If you have a 16-bit sound card on your computer, you may reproduce only sounds encoded at 8 or 16 bits. If you have a 32-bit sound card available, all three levels of resolution are possible — 8 bits, 16 bits, or 32-bits (64-bit resolution is now available on some modern computers).

You should note that 8-bit sound samples tend to contain more “background noise” than 16- or 32-bit sound files. If you find that your sound files are too noisy for the content to be heard adequately, then you should probably be using a higher resolution.

If there is insufficient loud/soft variation in your sample to display the passage correctly, then you should use a higher resolution or bit rate.

As you may imagine, the dynamic range ( difference between the loudest and the softest sound) is lowest at 8-bit resolution and highest at 32-bit resolution. However, each level of sound resolution essentially doubles the size of the file.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-26

To summarize, use 8-bit resolution for sounds with low dynamic — loud to soft — range (e.g., speech). Use the mid-range 16-bit resolution for sounds with medium dynamic range (e.g., a rock band). Use the highest 32-bit resolution for audio files with a wide dynamic range (e.g., a symphony orchestra). However, remember that 32-bit sound files may not be read by some computers, and if they are, they will be reduced to 16 bits if your sound card cannot read 32-bit samples.

So let’s put all of this information about sampling rates and sound resolutions into context:

• Use the lowest possible sample rate and resolution that provides acceptable reproduction in order to reduce download time for the user.

• Use as much audio compression as you can without destroying the realistic quality of the music or voice. By now you are undoubtedly aware that each audio format has its own compression algorithm (with WAVE having the least built-in compression and Ogg Vorbis having the best).

There is a fine balance here, so let your ears be your guide. Try auditioning your audio files using , as you will get a much more realistic idea of their quality.

Now we come to the most exciting part of using audio on the Web — actually creating audio files and inserting them into your Web pages.

3. Inserting Audio into your Web Pages

TIP: When incorporating sound files in your Web pages, carefully consider their appropriate use on your website, and how visitors to your site use these media resources. Always provide a control to either enable or disable the playing of the sound, in the event that visitors don’t want to listen to the audio content.

When the first draft of this unit was written we decided not to emphasize the HTML5

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-27

a. Locating/Creating Audio Files

If you have appropriate hardware and software you may, of course, create your own audio “master” that you can convert to the HTML5 audio formats and then embed them into your Web pages as we will show below.

There are many sites on the Internet where you can download audio files in their raw format that would be suitable for editing and compressing using such software such as Audacity.

WARNING: Never upload raw audio files for Internet delivery. These files must always be compressed to send over the Net.

Here are some places to locate free (or almost free) audio clips. I would search first for files in the WAVE format as these contain the most audio information and will adapt to the other HTML5 audio formats with the least loss of quality.

https://freeplaymusic.com/

https://www.freesound.org/ (mostly sound effects)

https://archive.org/details/audio

https://mp3.com/ (files at this site are already compressed in the MP3 format; click on “Free Music”)

The audio search service at https://www.yahoo.com/entertainment/music/ will also yield useful results with the proper search terms.

One of the best sources for royalty-free audio clips (for sale) is Music2Hues at https://www.music2hues.com. This site includes more than 2500 music tracks in both mp3 and WAVE file formats.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-28

WARNING 1: Except for audio and video clips that are explicitly stated as “free,” all media content on the Internet is owned by someone and you must get permission to use it.

WARNING 2: Most computer media players (like iTunes and Windows Media Player) will allow you to download tracks from a CD. However, most commercially available audio and video media include some form of copy protection and while there are software programs available to “rip” the source clips to remove the copy protection, be aware that this is patently illegal and for obvious reasons, not detailed in this course. If there is no copy protection then short “excerpts” (as we have used in this course) may be permissible for research and educational purposes without violating copyright. However, it is always best to carefully read the media source terms and conditions (they are not all the same) to make sure.

b. Tools you will Need

Once you have located the audio clips that you wish to use you must locate some software to process them. If you are really excited about processing audio for the Web (such as if you are musician selling CDs on the Net) you would want to invest in one of the professional audio editors such as Sound Forge for the PC (https://www.magix.com/) — have a close look at Sound Forge Audio Studio, which is much less expensive than the original and seem to be able to do everything you will need for this course) or Adobe Audition (https://www.adobe.com/ca/products/audition.html — both platforms).

However, if you are only interested in audio in terms of this course or are a hobbyist, there are a number of free or low-cost pieces of software you should consider.

Audacity: This is an open-source (i.e., free) audio editor (see https://sourceforge.net/projects/audacity/). In reading reviews for audio editing software, this application rates better than either of those listed above (perhaps because of the “price”). Audacity will not only record live audio but has many editing tools to help you “fit” your audio track to your needs (and legal requirements). Audacity will handle WAVE, MP3 and Ogg Vorbis formats so this covers 3 of the 4 formats you want to work with. For an Audacity user guide go to HelpManual in the software (the document will open in your default Web browser). The learning curve is a little steep. So allow yourself lots of “exploration” time.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-29

NOTE: It is not surprising the Audacity does not handle an MP4 audio format since MP4 is, essentially, an audio/video format. It is rarely used for audio only, except in the HTML5 specification.

Switch: This tool (see https://www.nch.com.au/switch/index.html) is not free but is quite reasonable for purchase (US$30). There is, however, an unstated free trial period (does not handle MP4 audio).

QuickTime Pro: (see https://support.apple.com/downloads/quicktime) is a well-respected media player/editor. At less than US$30 it is a good investment (handles MP4 audio). NOTE: QuickTime 7 for Windows is no longer supported by Apple — see https://support.apple.com/en-us/HT201175.

From the notes above, you will see that the MP4 audio format is a problem when using free or low-cost tools. If you do a Google search for “convert wav to mp4” you will see that there are a number of conversion possibilities listed.

I tried https://www.convertfiles.com/convert/audio/WAV-to-M4A.html and was happy with the result — but the file extension used was .m4a instead of mp4.

NOTE: You will find that many of these audio converters return a file with the .m4a (MPEG-4 audio) extension — this file extension will work just fine in HTML5 audio.

If you cannot manage an MP4 audio file, simply leave it out. It is not necessary to include all of the 4 formats recommended by the HTML5 audio specification.

You should now have 3 or 4 processed audio files available as you start working with HTML5 audio.

mysound.wav mysound.mp3 mysound.mp4 (?) mysound.ogg

Now let us explore how to get these files on your Web page.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-30

c. Coding your HTML

To play an audio file in HTML5, this is all you need:

The controls attribute is for adding play, pause, and volume controls. You may also insert a warning in text between the tags for browsers that do not support the audio element:

NOTE: Not all browsers will currently display the error message. Some will display a console that is inactive and some will display empty space.

The last enhancement we need to make is to include a MIME type for each audio file so that the browser is sure to read the file correctly.

MIME TYPE: A string designating the type of data in a file transmitted using the MIME protocol (Multi-purpose Internet Mail Extension), such as text/plain, image/, audio/mpeg, or video/mp4. Initially developed for e-mail attachments, MIME has now gone well beyond that and is now used to identify the “type” of many, many files. MIME is now sometimes referred to as Internet Media Type. For a list of MIME types, see https://www.feedforall.com/mime-types.htm.

The appropriate MIME types for HTML5 audio formats are listed in red below.

One of the cool things about the audio element is that it allows multiple source files to be listed. Source (src) elements can link to different audio files and the browser will go down the list until it reaches a supported format. It is suggested that you place the order of the files from smallest in file size (normally OGG) to the largest (normally WAVE) so smaller files are always

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-31

connected to first. This will keep the bandwidth required for your page as small as possible.

Here is a table of the attributes which the HTML5

Attribute Value Description autoplay N/A Specifies that the audio will start playing as soon as it is ready (not recommended).

controls N/A Specifies that controls will be displayed, such as a play button.

loop N/A Specifies that the audio will start playing again (looping) when it reaches the end (not recommended).

preload N/A Specifies that the audio will be loaded at page load, and ready to run. Ignored if autoplay is present.

src url Specifies the URL of the audio to play

Don’t forget that you can test your browser support for the HTML5

To finish this section we present a very practical use of HTML5 audio files. In Example 6-5 we show a single page from an actual online course title “Milestones in Music History” written by this author. The entire course consists of a 395-page print manual and about the 200 HTML files with sound clips.

In this sample we are showing only a single page with text, links, and an HTML5 audio console. The links on the original pages originally led to other HTML pages in the series but here we have used external links to keep the example more compact.

The following screenshot shows the selected page.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-32

F. Using Movies on the Web ()

Are you one of the users of YouTube? If so, you are already familiar with the use of HTML5 to display a wide variety of video content. Digital movies, like audio, come in a wide variety of formats, but, before we discuss these, recall our caution in an earlier section about over-using audio files in your Web pages. The same restriction applies to video files, only more so. Video files should be used to enhance the content of your site — they should be a value-added feature for your page and should not be used simply because they can be used.

Because of their large file size, movies are the most difficult of the media to transmit effectively over the Internet. Digital movies for delivery over the Internet come in a variety of formats.

NOTE: Consult the HTML Course Content pages where each of the following formats are demonstrated. We tried to choose an example with lots of movement and contrast.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-33

1. Video File Formats

In previous versions of these notes we referred to the following video formats which are now obsolete with HTML5. We list these only so that you will have an understanding of these formats in your research.

Apple QuickTime (extension: .mov): QuickTime is the multi-platform industry-standard multimedia architecture used by software tool vendors and content creators to create and deliver synchronized graphics, sound, video, text, and music — not in HTML5.

Microsoft AVI Video (extension: .avi): AVI (Audio Visual Interleave) is commonly called Video for Windows and offers minimal compression. This format was once widely used on the Internet but is rarely used today — not in HTML5.

Real Video (extensions: .rm; .rv): Real Video is a format that is normally used only on the Internet. Real Video uses a special player (the same player as we used for audio files) that can be freely downloaded from the Internet. Real Video allows for “streaming,” meaning that the beginning of the movie begins playing while the remainder is being downloaded — not in HTML5. For more information, visit https://www.real.com.

Windows Media Formats (extensions: .asf and others): There are a number of new formats that are used with the Windows Media Player, including .asf, .asx, .wax, .wma, wmv, .wvx, .wmp, .wmx. Each has its own properties (see https://support.microsoft.com/kb/316992) — not in HTML5.

2. HTML5 Video Formats (extensions: mp4, ogv, webm)

The following are the video formats currently used in the HTML video specification.

MPEG-4 Video (extension: .mp4): MPEG (pronounced M-peg), which stands for Moving Picture Experts Group, is the name of a family of standards used for coding audio-visual information (e.g., movies, video, music) in a digital compressed format. The major advantage of MPEG compared to other video and audio coding formats is that MPEG files are much smaller for the same quality. This is because MPEG uses very sophisticated compression techniques. For more information on MPEG, see: https://en.wikipedia.org/wiki/Moving_Picture_Experts_Group.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-34

WebM (extension .webm): WebM is a royalty-free, open source video compression designed specifically for use with HTML5 video. WebM was designed specifically for serving streaming video on the Web, and has many benefits. Its low footprint means that it plays well on high- end desktops but also on low-powered devices like tablets or phones. High compression rates for video, which means videos can be downloaded faster, or you can improve the quality without a significant size increase. The encoding process is also significantly simpler with fewer profiles and sub-options.

Ogg (extension .ogv): Ogg Theora is a video technology for creating, editing, manipulating, and playing video. Theora is a free video format, meaning that anyone is free to use, study, improve, and distribute it without needing permission. Some parts of Theora are patented, but the owners of those patents have granted a permanent, royalty-free patent license to everyone.

The following table shows support for the current HTML5

Browser MP4 WebM Ogg Firefox Mac

Firefox PC

Chrome Mac

Chrome PC

Safari Mac

Internet Explorer PC

Microsoft Edge PC

If you wish to convert videos to the three formats used by the HTML5

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-35

NOTE 1: Recall the HTML5

NOTE 2: The most realistic performance for these audio files is demonstrated when they are streamed from an external server — and our examples in the HTML Course Content notes, as well as the individual examples files under Resources, are being streamed from the BCIT WebApps server.

As you run the files, have a close look at the progress bar in the console. There you will see the current position of the file as it is playing as well as the amount of the file that has been loaded (“buffered”) after the “play” point and the amount yet to be delivered.

As the “Content buffered” section gets closer to the “Play position” you might experience dropouts (i.e., frames skipped) or the player will pause temporarily as it attempts to buffer sufficient content to carry on without dropouts.

You might also notice a slight delay if you press the “Play” button immediately as the console loads. This “pause” is the player buffering sufficient content to play the video without dropouts. Both the browsers (and HTML5) are quite clever at this.

With slow-speed Internet connections you may find considerable delay and even dropouts if the browser and the video file cannot “keep up.” This problem is more apparent with video files (ours range from 13–20mb, that with audio files (ours range from, 500k to 2 mb).

As we did with the audio examples, we have prepared a test audio file as Example 6-6. Here you can test the three HTML5 video formats on your own system. In the HTML Course Content files, Example 6-6 shows live streaming from the WebApps server. Here is what you will see for the opening page.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-36

When you click on each link the video console is opened in a new browser window, as illustrated below.

Remember you get the most realistic performance for these files if you view them from the HTML Course Content pages, than from your hard drive. Notice that the entire file has been loaded when I take this screen capture off my hard drive.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-37

NOTE: When you test this file it is being presented wide screen (635x264px) and in HD (High Definition) mode. The HTML5 video specification allows the presentation of wide-screen and HD for the first time in the HTML specification.

3. Inserting Video into your Web Page

Creating digital video on your computer requires special hardware and software which many users do not have. We will assume then that if you use video as part of your Web page in this course it will be obtained from some commercial source or off the Internet.

On the other hand, modern digital video camcorders, which digitize the video as you shoot it, will allow you to transfer home video directly to your computer using a USB or Firewire connection. Such applications as iMovie (Mac) and Movie Maker (PC), that are included with the latest operating systems, provide basic editing and compression facilities. If you get really serious about Internet video, you will want to acquire such professional video software applications as Adobe Premiere (https://www.adobe.com/ca/products/premiere.html) or Adobe Premiere Elements (https://www.adobe.com/ca/products/premiere-elements.html).

TIP: The coding syntax for HTML5

To insert an HTML5 video file into your Web page, this is all you need:

The controls attribute is for adding play, pause, and volume controls. Insert text content between the tags for browsers that do not support the video element:

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-38

NOTE: Not all browsers will currently display the error message. Some will display a console that is inactive and some will display nothing.

As with the HTML5

In the example I am using here, OGG is has the smallest file size (so I place it first) and MP4 the largest (so I place it last).

Notice that the code above that the width and height of the video should be declared and, as in HTML5 audio, we include the MIME type attribute, which assists the browsers in determining if they can read the file, should be declared.

The current MIME types for

OGG video/ogg WebM video/webm MP4 video/mp4 (NOTE: do not use mpeg4 here)

Here is a table of the attributes which the HTML5

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-39

Attribute Value Description autoplay N/A Specifies that the video will start playing as soon as it is ready (not recommended).

controls N/A Specifies that controls will be displayed, such as a play button.

height pixels Sets the height of the video player. loop N/A Specifies that the video will start playing again (looping) when it reaches the end (not recommended).

muted N/A Specifies that the audio output of the video should be muted.

preload auto Specifies that the video will be loaded at page metadata load, and ready to run. Ignored if autoplay none is present. Attributes: auto: Preload as much of the video as possible. metadata: Just load the details of the video (e.g., length and the first frame). none: Don’t preload anything. src url Specifies the URL of the video to play. width pixels Sets the width of the video player.

Don’t forget that you can test your browser support for the HTML5

To complete this section we are including Example 6-7 which is a wonderful HD wide-screen display of “The Wild Life in Brazil.” We won’t tell you any more except that this demo was created by the Panasonic HD 1080p digital camcorder (you won’t believe the price). If the Panasonic HD 1080p digital camcorder is no longer available, look for similar products at https://www.panasonic.com.

Enjoy your trip.

4. Embedding Videos from YouTube

When learners get to Unit 6 they invariably think that adding a video to their mini-website will get them better marks — it will not as this feature is not required (however, it might elicit a comment if the video is good and if it is

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-40

appropriate or another comment if the page “weight” is too large). If you have an effective video that would enhance the message of your site or if you are able locate one on YouTube (https://www.youtube.com) or some other online video source then the easiest and best solution is to use that service to deliver your video message. Alternatively, you might load your videos on your own webspace (most of us have free webspace with Rogers, Shaw, or TELUS if we use them for our Internet connection).

WARNING: Please do not attempt to upload large videos to the D2L dropbox (it may refuse to accept them), or to WebApps, or as an e-mail attachment to the personal mail of your instructor. Many of your instructors have had their personal e-mails “locked down” because too many large files were being transmitted, and this prevents other learners who may be in serious and immediate trouble reaching us quickly and easily.

YouTube currently recommends embedding videos in an iFrame on your page.

1. Locate the video you wish to embed. For our demonstration we are using https://www.youtube.com/embed/vVNmVSufv0A. which is a rendition of Ennio Morricone’s “Gabriel’s Oboe” from his film score for the movie “The Mission.”

Notice the data string vVNmVSufv0A above. That is the YouTube ID for the video in question, and it is critical that this string is accurate.

TIP: There are several video on YouTube dealing with this technique. For more information, view https://www.youtube.com/watch?v=ZnuwB35GYMY&spfreloa d=10, https://www.youtube.com/watch?v=3R1ysTlxiVY, and https://www.youtube.com/watch?v=ul6EQ8JUDHA for help here.

2. Click on the Share button and find the Embed button

. Click on that button and some HTML code will be generated.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-41

That is the iframe code which you have seen before and it is perfectly legal in HTML5 except for frameborder="0" and allowfullscreen. I removed these two attributes, the code validated clean, and the display worked fine for me. If you appreciate clean code (as I do) remove these attributes and everything should work fine.

3. The next set of options allows you to select the screen size for the video.

We have chosen 560x315px which is a medium resolution from those suggested.

4. Before copying the code, refer to the options available underneath the code block. We suggest that you deselect all. The [?] link will provide more information.

• The first option allows related videos to be displayed after the current video finishes. You do not want that in a professional website.

• The second option indicates you want the YouTube video to have player controls. You want the client to have this level of control over the video, so we suggest that you select this option.

• The third option lets you control whether or not you’d like the title of the video to appear at the top of the player, and if you want people to be able to share the video from your embed. Normally you would not want this option, but you decide what is best for your content.

• The fourth option gives you the power to allow or restrict YouTube from storing information about your website visitors, unless they click the play button on the video.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-42

5. Your code should be ready now, so copy the entire code block.

6. Paste the code block into your HTML page at the position where you want the video to appear. The video ID, which you may want to use later, is highlighted in red and the directory in which the video is located is highlighted in blue.

NOTE: This code will place the video flush to the left margin of your page. To place it elsewhere treat it is if it were an image and use some of the same tools you would use there. The logical division

...
, to which you may apply styling, works really well here.

Example 6-8 (section)

NOTE: If you use the iframe code the video will form a physical part of your page, will be added to the file size of the page, and will be streamed from your own server (or WebApps if this is an assignment). The “weight” of this page is 1,698k. With this in mind, we recommend that you should limit your videos to only one on any page.

BUFFERING: For large audio files but, especially, for video files, the browser will load as much of the file into memory before it begins to play in order to stream the video with no

dropouts. This is known as “buffering” and at low Internet connections can cause pauses or dropouts. Always be careful of the size of media files.

The remainder of this page has been intentionally left blank.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-43

G. Publishing your Website

Once you have your site ready to go, your next step is to find a service provider that will host your site. If you already use an ISP (Internet Service Provider) to access the Internet for e-mail and are happy with the service they provide, begin there. If you have e-mail access to a service provider like Shaw or TELUS, you probably already have 5–10 mb of Web space available to you — consult these ISPs for details. Most ISPs serve both personal and corporate Web pages, but the prices can vary depending upon which class of service you require.

If you wish to use a “vanity” domain name, such as http://www.visitmysite.com instead of http://www.users.canada.net/~myname/index.html there are services that will provide domain name forwarding. URL forwarding means that when a client clicks on http://www.visitmysite.com they will be automatically forwarded to http://www.users.canada.net/~myname/index.html (for example).

While it is not necessary to employ a large company as your host, there could be certain advantages. Smaller companies can afford less maintenance time and are sometimes plagued with long downtimes. We know of learners who have signed up with ISPs for $5.95 a month and then have not been able to connect with the server administration — or their pages — for months afterwards. As with anything else in the commercial world, you tend to get what you pay for. Also, be very cautious of extremely inexpensive Web hosting companies. Many of these companies do not own their own servers, and rent space from other companies, often in Asia. Solving problems with some of these companies can be extremely time-consuming, if they get solved at all.

If you do not already have an ISP or if your ISP does not provide Web space, another way to find a good host is to ask advice of people who already have pages up and running. They will be able to advise you on the service they are getting and if they believe the cost is worth what they obtain.

Check pricing carefully and make sure you are given a list of the services provided by the host. If your site is small and does not require much maintenance, you could find yourself paying for services that you do not need. The TELUS Yellow Pages (now Super Pages) and the newspapers contain listings of many ISPs offering Web hosting services. Contact several, do some research on their services and reputation, and compare prices. This time will be well spent.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-44

There are two main ways to establish an Internet address for your pages. The less- expensive way is to have an address that is located as a sub-directory of a larger company of the ISP itself. These addresses often look like the following:

http://www.aol.com/users/~jones/index.html

where index.html is the first in your series of files (just like Desire2Learn). ISPs often designate that index.html must be the first file in the series. Using these standardized names means that instead of using http://www.mysite.com /index.html you can shorten this to http://www.mysite.com/ as the index page will automatically mount as the first page in your site.

The more expensive (but often preferred) way is to own a domain name (DNS) of your own. If you are operating a business, using your own domain name is more professional, gives quicker access to your pages, and is easier for your customers to remember. Domain names must be registered with a Domain Name registrar (your ISP will handle this for you) or you may use an official DNS registrar such as https://www.webnames.ca (webnames.ca was formerly associated with UBC, so is highly recommended — they also rent Web space now). My ISP is https://www.uniserve.com, and I have been more than happy with their rates and their service. You may not be able to use your first choice for a domain name since some other company may already own that name. Most ISPs and registrars (like webnames.ca and Unisxerve.com) have a link to the WhoIs domain DNS name database or you may link directly to https://www.networksolutions.com/whois/index.jsp, so you can easily establish if the domain name you wish to use is already registered.

Domain name registration carries a yearly or bi-yearly charge; however, many domain names are not available because large corporations have registered hundreds of them, even though they may only be using one or two of these. This is to prevent other users from adopting a similar name. There has actually been litigation over the use of specific names that others felt was invading their “turf.” Here is what a domain name might look like for the company Widgets, Ltd. — http://www.widgets.com

You can see how much easier that would be to remember than the earlier example.

A distinct advantage of acquiring a domain name is that your e-mail can also be served from the same host. So, if your website is http://www.widgets.com your email address could be [email protected]. Convenient.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-45

You have been able to register the .ca, .biz, .com, .info, .net, and .org domain names for some time and the domains .tv, .info, .guru, .company, .club, .email, and even .name (where your name can become a domain, such as john.doe.name) have recently become available. Just recently added to the list are .rocks, .toys, .vegas, and .university. For more information, link to https://www.networksolutions.com/, which is the main registry for Web names in the U.S. The main registry for Web names in Canada is https://www.cira.ca.

Once you have contracted with a host, you need to provide your pages in electronic format to that host — just as you do with the WebApps server. Major providers will give you a set of instructions on how to do this. The filename for the main page is the most critical of these — it must normally be index.html. Most ISPs will give you an Internet or FTP address for submitting your pages. You will transfer them from your own computer’s hard drive to the host computer using a protocol called FTP (File Transfer Protocol) — now SFTP (Secure File Transfer Protocol). ISPs allow you to have access to your bank of files using a unique Username and Password. You can then download your files back to your computer, make changes, and upload them again at any time without the ISP ever being directly involved.

You have already transferred files via SFTP to the BCIT WebApps server so that your Web pages show in the D2L Presentations area, so there is not need for us to go into the process here.

TIP: Before publishing your pages, make quite sure that you have checked all of your links and anchors to make sure they are fully operational. After your pages have been mounted on the host server, you should check them all again to make certain that the files have transferred properly and that the links on the new host are correct.

H. Maintaining your Website

Having your own website requires a lot of time, thought, and resources in the initial planning and implementation, but creating it is only half the battle. Once you have actually put the site online, the challenge lies in updating and maintaining it. Keeping your site fresh encourages people to return. Poor maintenance is a sure way of getting rid of visitors, perhaps permanently.

Site maintenance generally means making sure that your files and file directory structures are up and running properly at all times. Since HTML documents and their

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-46

related graphics components are linked in specific ways, any changes or additions that you make to existing documents or directories could affect or alter their relationship to each other. The most common result is that links are broken, images are mixed up, or pages do not load properly. User feedback, usually via e-mail, can play a big part in flagging these types of problems so they can be resolved in a timely manner — but don’t expect your users to do the work you should be doing.

Maintenance for a small site can take as little as two to three hours a month. On a large site, maintenance can be a full-time job. When you contract to design a site, be sure to incorporate the costs of maintenance into your budget during the planning phase so it does not take your client by surprise. Starting with a well-designed site is the most effective way to prevent resource-intensive updates and maintenance.

Updating your site entails changing the content. This can be as simple as checking links to other sites to make sure they are current, or as complex as adding new capability to forms. The resources and cost of keeping a website current and operational depend on the size and complexity of the site and how often it needs to be updated.

Remember, adding new content does not necessarily mean scrapping the old. Some kinds of dated material like press releases, software updates, articles, or transcripts of speeches can be useful to users and should be archived. Make sure that archived information is organized in a way that is easy to access. Another simple way of letting users know that you’ve updated your site or specific pages is to add an update date (which often appears in the footer of all pages).

CAUTION: If you do not plan to update your site frequently, we suggest not adding an update date. Nothing is worse than having clients visit your site only to discover that it has not been updated for more than 2 years. That is an outlink flag if we ever saw one.

To come up with an effective maintenance strategy start by deciding how often you need or want to update your site and how extensive those updates will be. For example, a news publisher will likely want to update information on a daily basis, in some cases, even hourly. A retailer will want to update its site whenever there is new or discontinued merchandise or for special sales or promotions.

Next, pay attention to what your users are doing and saying. How many people are visiting your site and what pages are they visiting? If your site is hosted by a commercial Internet service provider, they will be able to supply you with a site log which includes detailed and timely tracking information for every page on the site. A number of shareware and commercial tracking utilities are available to people who run their own servers.

Always provide a way for users to give you feedback — the most common method is via email or a form on the site. Use that information to identify and resolve technical

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-47

problems in a timely manner. Use qualitative comments about the site along with usage tracking data, to guide your decisions about what content to keep, replace, or improve. If you are pressed for time or resources, maintaining a simple database of all your pages, including a brief description of each page’s content, related links and graphics files, can be very helpful.

NOTE: There is much more information on site maintenance in MDIA 4207, including how to develop a daily, weekly, monthly and yearly maintenance schedule.

I. Marketing your Website

Popular websites don’t happen by accident. You may have the best design in the world and loads of valuable information on your site, but if only your close group of friends know its location you will not see much activity. Once your pages are up and running, you should begin a well- thought-out plan to increase usage of the site.

The first thing you should do is to create meta tags for all of your pages. Meta tags record information about the current page. These tags give information to the browser such as the character encoding and language employed; information to the search services, such as author, copyright, and content description and keywords; and information to the server, such as author, copyright, and content description and keywords; and information to the server, such as the page expiration date.

META: Meta means “information about information" and meta tags are hidden informational items in your page that are used by the search engines and directories to automatically index your page and for other purposes. Meta tags never appear in the browser window. The content of meta tags is known as metadata.

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-48

1. Using Meta Tags

Up to this point the -type of the ... section of our HTML documents has been fairly limited.

Example 6-7: Simple Video Link

Notice that we have already included one meta tag to indicate the character set of the document — , indicating that the document is allowed to use many special characters (such as @, ©, and é) without encoding with character entities. This meta tag is required in HTML5 and we suggest that you always place it first in the ... section to distinguish it from all of the other possible meta tags which we will introduce below. This attribute replaces the need for .

Specifying the character set using the http-equiv attribute is still supported by browsers but the attribute values content-type and content-language are both considered obsolete in HTML5.

The two most common values for charset are:

UTF-8 — Character encoding for Unicode ISO-8859-1 — Character encoding for the Latin alphabet (also known as Latin-1)

In theory, any character encoding can be used, but no browser understands all of them. The more widely a character encoding is used, the better the chance that a browser will understand it. To view all available character encodings, go to https://www.w3schools.com/tags/ref_charactersets.asp.

Meta elements are typically used to specify page description, keywords, author of the document, last modified, and other metadata. The metadata can be used by browsers (how to display content or reload page), search engines, and other Web services.

We will deal with only a few of the meta tags here — there are several more available (see the tables in the next section). There are basically three types of meta tags:

BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-49

meta charset="" meta name= "" content="" meta http-equiv="" content=""

We have already met charset, which takes a single value. The

Typically, you will only need to use the name attribute for your page, description, author, and, optionally, keywords.

The http-equiv attribute takes three valid values in HTML5, content- type, default-style, and refresh. These have specific uses that are not commonly used on HTML5 Web pages.

To define keywords for your page:

CAUTION: The

NOTE: Instead of keywords, the search services increasingly use the tag as a major text string in their indexing process. </p><p>Always make sure the <title> tag accurately describes your page. </p><p>Further, the <title> for each page in a website should be unique, in order to reflect the specific content of each page. So, we suggest that the <title> tag for each page can include general information about the site as well as specific information about each page. </p><p>The <title> tag content should describe your page using phrases that searchers might use to find the products, services or information your page offers. The words “welcome” or “home page” are not really of benefit as few potential visitors would use those phrases for searching. You'll learn more about choosing the right phrases for SEO in MDIA 2205. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-50 </p><p>Here is a link to a good article about <title> tags for your pages: https://webapps.bcit.ca/mdia1205/1205PDF/All-About-Titles.pdf. </p><p>To declare a description of your Web page: </p><p>↵ <meta name="description" content="Exploring audio and video on the Net.> </p><p>The <meta description value is very important for search engine optimization. The content of this attribute should be one or two concisely written sentences (about 150 characters) to describe what your page is about. This description is usually what is displayed on the search results pages and searchers will choose to visit your page (or not) based on this description. </p><p>There has always been some duplication function between the <meta name... and <meta http-equiv... attributes but many of these redundancies have been declared “obsolete” in HTML5. We will not go into the theory behind that at this point, that is saved for MDIA 2205 and other advanced courses. Suffice it to say that you will see both types. Here are examples of what the two types look like. </p><p>2. Meta Name= Attributes </p><p>The meta name= attributes are the most commonly used and the most useful of the meta tags. Perhaps the important purpose of the name attributes is for Search Engine Optimization (SEO) — to send information to the search services. You will learn a whole lot more about SEO in MDIA 2205. Only the most common of the name= meta attributes are listed in the table below. </p><p>In the following table, the value in red is the most important. </p><p>The remainder of this page has been intentionally left blank. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-51 </p><p>Meta Name Attributes </p><p>Value Example Description </p><p> author <meta name="author" Defines the author of the content="Dale document. McIntosh"> description <meta Search engines can pick up this name="description" description to show with the content="Describe results of searches. This is a this Web page in a single sentence and brief description of your Web don't make it too page and it should be written long."> with proper grammar and proper punctuation. It should contain keywords from your Web page and it should not contain hype statements or marketing language, like, this is the “only,” “best,” or “greatest.” Avoid “Welcome to” and do not use “!”. Remember that only about 150 characters are visible on the search results pages so your most important text should be placed within this range. Always use description. Description should be page- specific. </p><p>The remainder of this page has been intentionally left blank. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-52 </p><p>Value Example Description </p><p> googlebot <meta Informs the Google search name="googlebot" engine about indexing, archiving content="noarchive" and link-following rules. > Possible values are: noarchive: Prevents Google search engine from archiving the page, nofollow: The page can be indexed, but links should not be followed, noindex: Google robots should follow links, but not index the page, nosnippet: Prevents Google search engine from saving snippets and archiving the document. </p><p>NOTE: In your research you may come across the following: </p><p><meta name="copyright" content="xxxx"> <meta name="revised" content="xxxx"> <meta name="abstract" content="xxxx"> </p><p>In HTML5, these are currently considered as “non- standard” meta tags (not an official part of the specification). They were previously available in XHTML so are likely supported by browsers, however, for your code to validate as HTML5, it would be a good idea to discontinue using these until they become an official part of the specification (if ever). In the meantime, your footer content for copyright and revised date as well as <meta description should be sufficient. </p><p>To summarize, the <title> and <meta description... tags are most used for indexing pages with search services. Therefore, you should make sure that your title tags and descriptions meet the following criteria: </p><p>• they should be concise yet descriptive, </p><p>• they should be page-specific, </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-53 </p><p>• you should omit unnecessary words like “Home” and “Welcome” as few users would be searching for such terms, </p><p>• try to place the most important text at or near the beginning of the tag, </p><p>• try to repeat these phrases a few times more in the page content — the search services will want to see a connection between the title, description, and page content, and </p><p>• remember that the keyword meta tag is not used by search engines. </p><p>For title tags about 65 characters (including spaces) are visible on the search results page so it is good try and use this valuable space. </p><p>The description shows about 150 characters. If the text is longer in either the title or description, it will still get indexed, it just won't be visible to searchers on the search results page. </p><p>The best SEO strategy is to create Web pages with useful, well written content that is updated on a regular basis — the search engines are getting very good recognizing quality content. </p><p>3. Http-equiv attributes </p><p>While the name= meta tags contain information for the search services, the http-equiv meta tags send hidden information to the server or to the browser. Many of the earlier http-equiv meta tags are obsolete in HTML5 and the remainder may be less important right now. Check out https://developer.mozilla.org/en-US/docs/Web/HTML/Element/meta#attr-http- equiv to see what is obsolete in HTML5 and what others are legal. </p><p>NOTE: In your research you may see reference to the following: </p><p><meta http-equiv="content-language" content="en"> </p><p>In HTML5 the content-language value for the http- equiv attribute is obsolete. Instead, you should declare the language of the document in its root element, normally the <html> tag. </p><p><html lang="en"> </p><p>See the next section for possible lang= values. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-54 </p><p>For more information on meta tags, see: </p><p>The HTML <meta> Element: https://developer.mozilla.org/en- US/docs/Web/HTML/Element/meta, (2013) </p><p>Meta Tags Explained: https://www.webmarketingnow.com/tips/meta-tags- uncovered.html (2012), </p><p>4. Lang= Values </p><p>Syntax: <html lang="en"> </p><p>The following list shows possible values for the <html lang="en"> tag. </p><p> bg (Bulgarian) fr-fr (French-France) cs (Czech) hr (Croatian) da (Danish) it (Italian) de (German) ja (Japanese) el (Greek) ko (Korean) en (English) nl (Dutch) en-gb (English-Great Britain) no (Norwegian) en-us (English-United States) pl (Polish) es (Spanish) pt (Portuguese) es-es (Spanish-Spain) ru (Russian) fi (Finnish) sv (Swedish) fr (French) zh (Chinese) fr-ca (French-Québéc) </p><p>5. Additional Marketing Suggestions </p><p>Here are some additional suggestions for marketing your site: </p><p>• Register with the search engines and directory services. Most search engines will let you submit information which they use to index your page. Look at the homepage for each search engine to find information about how to submit data. There are commercial sites which claim to be able to register you with all of the popular search engines and keep your site within the top 20-50 of sites retrieved by users. Be cautious when using these services as, like badly written HTML, the results are unpredictable. </p><p>Be aware that Google, the most useful search engine available, discontinued their URL submission tool in July 2018. Now, the only way to submit your website is by adding your sitemap in Search Console at https://search.google.com/search-console/about. To quote Google, Google Search Console is a free service offered by Google that helps you monitor, </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-55 </p><p> maintain, and troubleshoot your site's presence in Google Search results. You don't have to sign up for Search Console to be included in Google Search results, but Search Console helps you understand and improve how Google sees your site. </p><p>While it can become expensive if you are not careful, the Google’s Ads feature (formerly known as Google AdWords) is recommended (see https://ads.google.com/home/). When you do a Google search, your ads will appear on the Search Engine Results Pages marked with the green “Ads” tag. Google Ads are clickable and link to specific pages on your website. This type of online advertising is called Pay-Per-Click (PPC), which means you are only charged when someone clicks on your ad — with Adwords, you only pay for results. </p><p>A useful introduction to this topic is available in the article “How to Submit Your Website to Search Engines” by Joshua Hardwick at https://ahrefs.com/blog/submit-website-to-search-engines/ (2018). </p><p>• Make postings to appropriate newsgroups which deal with the content of your site. Newsgroups sometimes frown upon direct advertising, so make sure your message contains content of value to the newsgroup readers, and sneak your URL in where appropriate. Otherwise you will be accused of “spamming” (posting useless or inappropriate messages) and as a result you may get “flamed” (inundated with hostile e-mail). </p><p>• Make your site known in the Web world by using the social media, such as Facebook, YouTube, Twitter, and LinkedIn. </p><p>• Develop links with other complementary, but not competitive, sites. Browse the Web for organizations that have the same general goals but do not duplicate your services. E-mail the Webmaster (a name which you can also use now) and ask if you might cross-post your URLs (s/he links to you and you link to him/her). </p><p>• Remember to always include your e-mail link on all pages: </p><p><a href="mailto:username@domain.ca">e-mail me</a> </p><p> where username@domain.ca is the e-mail address. On clients’ sites, this can be a great marketing tool — provided the client’s site is outstanding. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-56 </p><p>IMPORTANT NOTES </p><p>1. Make sure you provide any external links to other sites near the end of your website and use the target="_blank" or target="window_blank" attributes to open outlinks in a new (floating) browser window. The first option will open each outlink in a new window; the second option (a “named” window) will open all outlinks in the same floating window. You never want to give users the opportunity to link out of your site (outlink) before they have read your full message. </p><p>2. Robot spiders crawl the Internet constantly looking for e-mail addresses to add to their spam lists. Link to the following to discover how to prevent this: https://www.smartlabsoftware.com/howto/hide- email-spambots.htm (2019). </p><p>• Send announcements to everyone on your e-mail list mentioning your new site. If you are a member of a mailing list, then you could send an e-mail to all subscribers to the list. </p><p>• Many users do not rely upon the Web to locate new sites. Publicizing your site in the print media can create many new users. </p><p>• Always include your URL on business cards and letterhead. Also make sure you have a “signature” file at the bottom of your e-mail messages that lists your site. </p><p>J. Researching and Using Access Statistics </p><p>One of the more “cutesy” features which used to appear frequently on Web pages is the hit counter. These are small script routines that count the number of accesses the page has received and display this figure on the screen with a text string something like “You are visitor # nnnnn to this page.” Frankly, your users don’t really care how many people have accessed your site. However, you are interested in how many people have accessed your site — and perhaps more interested in knowing something about who has been reading your material and what pages they have been reading. Hit counters can detract from the good design elements that you have likely included by this time and they should probably be avoided for design reasons. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-57 </p><p>Most ISPs maintain an access log of people who have linked to your site. You may have to ask your ISP to provide you with this report. When you get the report, read it carefully to determine the kinds of users who are accessing your site and the pages they are linking to. You will rarely see personal names listed here, but you will see domain names and you can extrapolate other useful information from this list of URLs. An important piece of information involves which pages of your site are being accessed, not matter who is linking to them. This information may give you more ideas about how and where to do further marketing as well as some clues to what elements of your site might need redesigning. </p><p>To view an example of a website usage log link to https://webapps.bcit.ca/mdia1205/utilities/logfile/. These data were captured on August 14, 2013, but they do change daily (and hourly if you have a first-rate ISP). While the statistics displayed here are somewhat difficult to understand on first glance, the more time you spend with this document, the more will be revealed about how viewers are using your site. </p><p>K. Where Do We Go from Here? </p><p>By the time you have finished this course you will have explored many of the fundamental capabilities of HTML5. However HTML can be more powerful than we have been able to show you here. You have undoubtedly examined Web pages that demonstrate functions that we have not shown you how to duplicate in this course. Many of the extended functions of HTML require coding experience and software that we have not been able to explore in this course. You may wish to learn some of the advanced functions either by taking a more advanced course in this series, or by examining some of the print and on-line resources listed in the references. </p><p>A short description of some of the advanced functions of HTML is presented below. </p><p>1. Image Mapping </p><p>We have learned in this course that images may serve as hyperlinks to other files or external links (i.e., when you click on an image, it can take you to another file at your site or to another site entirely). An extension of the image link involves using only parts of an image to link to other files or external sites. This is called image mapping. When you map an image you indicate that when </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-58 </p><p> you click on one section of the image it takes you to a specific file or URL, while clicking on another section of the image takes you to a different file or URL. </p><p>Image mapping can best be illustrated through an example. Imagine that you own a company that specializes in directing clients to RV sites across Canada. On one page of your site you might have a map of Canada showing all of the provinces. By clicking on a specific province (which has been image mapped) you would be linked to another page which lists the RV sites for that province. To extend the example further, the “provinces” page might include a large-scale map of that province with red dots to indicate the location of RV sites. By clicking on each red dot (where the dots have been image mapped) you are taken to an explanatory page for that specific RV site. </p><p>This example has been made active in the HTML content pages for this course, so go there to see an image map in action. </p><p>Image mapping techniques as well as the use of image slices are covered in the course MDIA 3203. </p><p>2. Using Interactive Forms </p><p>The use of interactive HTML forms is becoming an increasingly important part of modern Web pages. Forms can be used for such diverse applications as getting feedback from your users, for administering an on-line test, or selling a product using a credit card. </p><p>The concept of forms is that the user is asked to insert information into text boxes or to select specific items from a list of choices provided in a dropdown menu, and then to submit the form to a specified address by clicking a “Submit” button. Depending upon how you have constructed your form, the resulting data will </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-59 </p><p> either be sent to your e-mail address for manual processing or to some automated script which will process the information. </p><p>Several of the references used in this course will give you further information about coding forms. MDIA 2205 explains in detail how to construct online interactive forms using a simple mailto: script (not very useful right now, as you will learn) as well as using the more powerful CGI (Perl) scripts (far more useful today). The server-side course MDIA 4325 (PHP) in this series show how to seamlessly include interactive forms in your websites without using the now outmoded mailto: scripting. </p><p>3. JavaScript and Other Scripting Languages </p><p>Java is a programming technology developed by Sun Microsystems which allows the embedding of fairly high-level computer routines into standard Web pages. Using Java, the programmer can achieve such effects as animations, scrolling banners, visual effects such as exchanging one image for another when the mouse pointer is rolled over the image, invoking short sound files, and similar routines. Like CGI, creating JavaScripts requires a fairly high level of programming skill, but many Java applets (as the scripts are called) may be downloaded off the Net or obtained on CD-ROMs. </p><p>JavaScript is a simplified subset of Java and was developed by Netscape for use with the Netscape browser (which has now been discontinued). Microsoft’s version of this stripped down Java is called JScript. Microsoft’s Jscript never really did take off in the Internet world, although there are hundreds of thousands of applications on the Net that use JavaScript (including the Desire2Learn interface used for this course). </p><p>MDIA 3207 deals in detail with creating JavaScript routines and the new course MDIA 4307 deals with using jQuery libraries. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-60 </p><p>4. XML </p><p>Prior to HTML5, XHTML 1.0 was adopted by the W3C as a bridge between HTML and XML. Eventually, XHTML will be replaced by a much more compact and extendable (extensible) scripting language called XML (EXtensible Markup Language). </p><p>While the conversion to XML may take a decade or more, that move is already in W3C’s plans. Many browsers can already read XML in a limited way. XML totally separates the data on a page from its formatting. So, you write the data in one page (which looks much like a database) and the formatting instructions are contained in a linked document, which could be written in CSS or XSL — EXtensible Stylesheet Language, sometimes called XSLT (EXtensible Stylesheet Language Transformations, if we are referring to HTML pages being transformed from XML code). </p><p>MDIA 4305 introduces the much more complex XML syntax — as far as the browsers will currently support it. </p><p>5. Server-Side Scripting (CGI, PHP) </p><p>As users gain more bandwidth using cable and high-speed telephone (ADSL) modems, more and more of the processing of Web pages will take place on the server as opposed to being formatted with a desktop client (browser) as a standard Web page. Server-side delivery allows for dynamic Web pages where the material served is designed for each specific user. </p><p>PHP (originally called Personal Home Page, but now known as PHP Hypertext Preprocessor — a recursive acronym) is an open-source (free) scripting environment that performs many of the same functions as ASP, but lives outside the Microsoft environment. It is therefore not as dependent upon employing Microsoft-only technologies, which is the case with ASP. For more information on PHP, link to https://www.php.net/. </p><p>Server-side technologies are covered in MDIA 4325 (PHP) in the Weaving the Web series of courses. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-61 </p><p>6. Writing for Mobile Devices </p><p>Over the past few years, mobile Web usage has considerably increased to the point that Web developers and designers can no longer afford to ignore it. In developed countries, the shift is being fueled by faster mobile broadband connections and cheaper data service. However, a large increase has also been seen in developing nations where people have skipped over buying PCs and gone straight to mobile. </p><p>Unfortunately, the mobile arena introduces a layer of complexity that can be difficult for developers to accommodate. Mobile development is more than cross- browser but must also be cross-platform. The vast number of mobile devices makes thorough testing a practical impossibility, leaving developers nostalgic for the days when they only had to support legacy browsers. </p><p>The small screen size (which varies from device-to-device) and high resolution (which also varies by device) of mobile devices provide special challenges for Web developers. All (or most) of the secrets here are uncovered in our two new course MDIA 4311: Responsive Web Design and MDIA 4340: Mobile Web Design Using jQuery Mobile. </p><p>L. In Conclusion </p><p>We hope you have enjoyed this “cybercourse” as much as we have enjoyed putting it together and delivering it to you. Remember that this short course is only the beginning of what can become an exciting and rewarding part-time, or even full-time, career. This is only the first of a series of courses leading to two certificates in Publishing on the Web — an Associate Certificate and a Certificate. Link to the following URLs: </p><p>Associate Certificate: https://www.bcit.ca/study/programs/6420acert </p><p>Certificate: https://www.bcit.ca/study/programs/6420cert. </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 Working with Frames, Animations, Sound, and Video Unit6-62 </p><p>With the Web explosion continually expanding (especially the current emphasis on mobile devices) there are thousands of small and large organizations looking for a presence on the Web. So if you have gained a lot of knowledge and skill from this course, get out there and advertise your services. You might be surprised at the response you will get. </p><p>And don’t forget — effective Web design, coupled with effective authoring techniques, is the key to success in Weaving the Web. </p><p>You may now officially refer to yourself as a Web Weaver — Junior Class. </p><p>Good Luck. </p><p>Janice Wood Dale McIntosh Your Virtual Professors </p><p>BCIT 04/02/20 MDIA 1205: Web Design Technologies 1 </p> </div> </div> </div> </div> </div> </div> </div> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script> <script src="/js/details118.16.js"></script> <script> var sc_project = 11552861; var sc_invisible = 1; var sc_security = "b956b151"; </script> <script src="https://www.statcounter.com/counter/counter.js" async></script> <noscript><div class="statcounter"><a title="Web Analytics" href="http://statcounter.com/" target="_blank"><img class="statcounter" src="//c.statcounter.com/11552861/0/b956b151/1/" alt="Web Analytics"></a></div></noscript> </body> </html><script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script>