Web Design Small Cover

Buy the PDF of
Web Design:
A Complete Introduction

See the book at amazon.co.uk or amazon.com

Related Site

Web Security Topics

Related Books

Secure Communication Cover

Securing A Server Cover

Answers to Exercises, Chapter 6

Test Questions

  1. Web browsers use either plug-ins or ActiveX controls to display embedded time-based media. The disadvantages of embedding media are that there is no single browser extension standard, but instead there are two, which leads to incompatibilities of markup. Displaying embedded media requires the relevant plug-in or control to be installed in the browser, which has led to browsers implementing mechanisms for installing them automatically on demand. Some users may not have installed the plug-in/control and may refuse to do so, so the media will not be seen. ActiveX controls have, in the past, posed a security risk on Windows systems when installed automatically. Embedding media in the page also presents design challenges, as the established model of page content is not easily adapted from its origin in static print media to accommodate dynamic time-based elements.

    Using helper programs to display time-based media shares the disadvantage of plug-ins of requiring a suitable program to be installed on the user's computer. More seriously, it detaches the time-based media from its context on the page, and disrupts navigation. Some users may also be confused at finding other programs starting up, apparently spontaneously, when certain Web pages are loaded into their browsers.

  2. For a plug-in, the minimum required attributes are data, which points to the source of the video etc., and type, which specifies its Internet Media Type. For an ActiveX control, the required attribute is classid, which has a Globally Unique Identifier for the appropriate control as its value. In both cases, it is highly advisable to also include height and width attributes, otherwise many browsers will not allocate space on the page to display the embedded object.
  3. The main difference between the markup for plug-ins and ActiveX controls is evident in the preceding answer: in the case of a plug-in, the compulsory attributes specify the location of the embedded object's data (e.g. a SWF file), whereas in the case of ActiveX, it identifies the ActiveX control – the program that displays the data within the browser. (The location of the movie is specified using a param element in the content of the object.) This is due to a difference in philosophy between the two technologies: ActiveX sees the control being incorporated in the page as an active element that reads and displays the movie file, whereas plug-ins are seen as extensions to the browser, with the movie itself being considered an element of the page. Both views make sense, but they lead to different markup.
  4. Animated GIFs share the characteristics of single-image GIFs: they are bitmapped images that employ lossless LZW compression with 8-bit indexed colour. Additionally, they provide a means of including more than one set of image data in a single file, and allow for the specification of parameters, including a delay time, repeat count and disposal method, which control the way several images stored in the file should be displayed in sequence as an animation.
  5. Each frame of a Flash movie can only be displayed after the data for it has arrived on the user's machine. Since movies are streamed, smooth playback depends on the data arriving sufficiently fast for each frame to be complete by the time it is needed. If this does not happen, there will be short pauses while the computer waits for the data for the next frame, resulting in an unintended freeze-frame effect. If there is a synchronized soundtrack, the sound may break up during these waits. To avoid this happening, it is necessary to ensure that the maximum data rate of the movie does not exceed the speed of the connection. (In general, this cannot be known, so you need to make some assumptions about the speed of the connections used by visitors to your site.) It is acceptable to include a lot of data in the first frame of the movie (judicious use of certain Flash features allows you to place data that will be reused in later frames at the beginning of the movie), since a wait before the movie starts is acceptable in a way that jerky playback is not. As well as these considerations about data rate, you must also take accessibility and aesthetic factors into account when embedding a movie into a page. Does it fit with the appearance of the page? Does it contribute to the way in which the page fulfills its purpose or is it mere decoration or a positive distraction? Will users who cannot see the movie be denied access to any information or function that the page provides? Will you be able to provide a transcript or some other alternative to the movie if necessary?
  6. The basic technique of inter-frame compression consists of only storing certain frames, known as key frames, in their entirety. For any other frame, all that is recorded is the difference between it and the preceding frame. This can immediately reduce the amount of data considerably, provided there is little movement between consecutive frames. Cuts and other transitions will lead to big difference frames, so it is usual to make the corresponding frames into key frames. More sophisticated inter-frame compression uses the technique of motion compensation. Instead of storing the simple difference between frames, the displacement of identical blocks of pixels is recorded. These identical blocks will usually correspond to uniformly illuminated parts of coherent objects in the scene. A further refinement is to use key frames that follow each frame as well as those that precede it as the basis for the frame differences and motion compensation. This takes account of objects that are hidden in a frame but become revealed later. Further refinements present in MPEG-4 make use of arbitrary keyframes in computing motion compensation, and optimize displacements that correspond to common idioms such as zooming or panning. All methods of inter-frame compression work most effectively on simple scenes where this is relatively little movement, but result in artifaction where there is much rapid movement, either of objects in the scene or of the camera. The basic frame-differencing technique can be used on its own; the other techniques depend on it to work.
  7. The first step is to capture your video footage, usually over a Firewire connection from a DV camera, and store it on disk in one of the video formats, such as QuickTime. How you proceed next depends on what software you have available. Some video editing programs can export animated GIFs, so if you have one of these, all you need to do is import the video, edit it if necessary, and export the animated GIF. Flash also has this capability, provided you embed the video and don't convert it to Flash Video form. If such a program is not available, it will be necessary to use a suitable utility to extract each frame of the video into a separate image file. These individual images can then be combined into a single animated GIF, using ImageReady or one of many utilities available for the purpose. In most cases, it will be necessary to scale the frames down from the video standard they will have been imported at to something more manageable on a Web page. In all cases, you will have to de-interlace the video, but most programs that can be used for this task will be able to do this for you.

    Because of the way animated GIFs are played back, and the limited compression that can be achieved using LZW, this technique is only suitable for very short video clips. Because GIFs use indexed colour, picture quality will be compromised, so it is not suitable for anything that requires good definition. Conversely, it would be good if you wanted to create a posterized effect on a short movie clip. Animated GIFs cannot have a soundtrack, so this technique is useless if sound is required.

  8. HTTP is not suitable for streaming video primarily because it uses TCP to transmit the packets of data. TCP is a reliable protocol, which means that it includes mechanisms for ensuring that data has arrived safely at its destination. However, these mechanisms interrupt the steady flow of data and can result in delays, which would interrupt playback of streamed video. Furthermore, HTTP's messages are designed for transferring Web pages and do not have the features necessary for controlling a data stream. Instead, video should be streamed using RTP, which uses UDP to transfer data. This may cause some packets to be lost, but this will be less disruptive than the delays that may occur with TCP. A video stream can be controlled using RTSP, which was specifically designed for the purpose.
  9. The most common QuickTime parameters are as follows. (For descriptions of some additional parameters, see Table 6.1.)
    1. autoplay: determines whether the movie will play on its own or must be started explicitly.
    2. controller: determines whether playback controls are displayed or not.
    3. loop: determines how many times the movie should be played.
  10. The most common Windows Media parameters are as follows. (For descriptions of some additional parameters, see Table 6.2.)
    1. autostart: determines whether the movie will play on its own or must be started explicitly.
    2. showcontrols: determines whether playback controls are displayed or not when the movie is played by a plug-in.
    3. uimode: determines which playback controls are displayed when the movie is played by a plug-in.
    4. playcount: determines how many times the movie should be played.

Discussion Topics: Hints and Tips

  1. We touched on some of the considerations in the answer to Test Question 5. You must think about technical and aesthetic issues, and also about usability and accessibility (for more on this, see Chapter 9). Have a good look round the Web and note where, how and why animation is being used.
  2. There is no right answer to this question. Many people would say 'never', others would claim that there are occasions when it is useful to draw users' attention to a particular feature. You may have an immediate response to this question one way or the other, based on experience with such features on sites you have visited, but you should try to think through your reasons and think how different groups of users might react. Look at Chapter 9 for information on important issues relevant to this question.
  3. The answer to this question is time-dependent. Once, QuickTime was clearly technically superior, but Windows Media later caught up. Now Flash Video is being used widely. Is the ubiquity of the player the only relevant consideration?
  4. As well as considering the types of information that can be presented, and the types of interactivity available in video relative to those of hypertext. Think about the skills required to create video, the costs and possible business models, and about usability and searching. Could this Web site be presented as video only?
  5. As with the second discussion topic, you may have a personal opinion, but try to think like a Web designer and consider the characteristics and needs of the wider Web community. Can you think of sites that actually require sound?

Practical Tasks: Hints and Tips

  1. Keep the clip short. If you don't have editing facilities, keep it very short. Before shooting the video, think about what the page is like, and try to create some video that will fit. Think about colour and the overall impression that you want your page to convey.
  2. Note that this is an experiment, not a suggestion for a design feature. We do not advocate the use of flashing elements, but want you to see for yourself. If you have ever experienced any symptoms from flashing lights etc. yourself, do not do this experiment.
  3. Whatever you think about advertising, it is likely that as a professional Web designer you will have to work on pages that include advertisements, and many ads use animation. Note that often you will have little or no control over the placement or content of advertisements, so you will have to concentrate on designing the rest of the page in such a way that it can accommodate the ads. The Interactive Advertising Bureau defines standard formats for Web page ads.
  4. This is not as easy as it may sound. Many people's first thought is to put the movie in the middle of an otherwise blank page, but if you try it, you'll find this is not very successful. The mass of negative space leaves the movie floating and not anchored to anything on the page. Something is needed to connect the movie to other elements on the page, while at the same time allowing it to be seen on its own. You need to think about how to place the title and details so that they are clearly connected to the clip but don't interfere with your viewing of it.
  5. Try to approach this experiment with an open mind, and see whether the generalizations we make in the book are actually true.