Intercast Broadcast Ontario Project
  GRAPHICS


Introduction
Getting Started
 Using Text
Using Colours
Graphics
Sample Pages
Using Layers
Javascript
Projects
References

The TV viewer's constantly being stimulated with audio, text , moving and still images while watching the TV screen.
Your challenge as an interactive TV designer is to capture the viewer's attention while balance the imagery from the TV station with that of the interactive TV content.
One of the key decisions you made at the very first is the percentage of the screen that is to be devoted to the TV image and what the rest of the TV screen will be left to show interactive text and images. Your task is to create images that will be seen by the interactive control of the viewer.

The images can be in three formats. Microsoft TV supports the following formats:

  .gif
  .jpg
  .png

It is highly recommended that all images should be in the .jpg format. Using jpg format means that the image size, and hence the compression can be controlled by the designer.
Since the 'jpg format uses a 16 million colour palette, the issue of "Web Safe" colours" is no longer a problem.
Of course, the the manner in which the colours are finally seen on the TV screen is still a factor. However that is not in the control of the interactive TV designer, since the contrast, brightness, hue and saturation will vary form household to household..

Here are some factors to consider:

  • Image widths should not exceed 544 pixels. Remember the useful image size can only be 544 pixels wide x 372 pixels high.
  • Image colours should be made NTSC-safe. See the section on colours.
  • Images should be small to begin with, and compressed as much as possible. Loading time for graphics is a critical factor , especially since the files are loaded form the server on a 56.6kB modem line.
  • Keep the total file size viewed at any one time below 30kB. Under most network traffic conditions, this would mean about 3 to 5 seconds download time !
  • Use jpg files and set the compression to between 3 and 5.
  • There is no need to code the "alt" and "lowsrc" attributes since they are not supported by WebTV.
  • Don't use single pixel lines in the graphics, since they will vibrate when viewed on the TV screen. Use two or preferably 3 pixel lines.
  • Use a font size of 16 points or more for embeded text in an image. Avoid serif fonts because the fine serifs lines will also vibrate when viewed on the TV screen.
  • Images should be preloaded using a Javascript pre-loader code.
.

Images as Backgrounds

Images can be used as backgrounds as in the case of the Web page. However to prevent the image from tiling, it is inserted into the page a on a layer.

Hot links can be added by placing the hypertext or hot-link graphic on a layer over the background image.
Any navigation text or "hot" areas integrated in the background image now must be coded using Imagemaps.
The code for insertion into the WebTV document uses an in-line Cascading Style Sheet code for a layer.

<body bgcolor="black">
<div style="position:absolute; width:544px; height:300px; left: 10px; top: 10px; background-image:url(image/back.jpg)">
</div>

View this background page in the Microsoft TV Viewer.

Transparency Attribute
 Image and (text) transparency attribute is supported by WebTV. Transparency may be set from 0 (fully opaque - the default) to 100 (fully transparent).
For further information, go to Sample pages.

Imagemaps
 Client side image maps are recommended, if image maps must be used at all.
Go to Imagemaps coding for more on Imagemaps.

Form Buttons
The use of Forms in the Interactive TV page will not be covered in this Manual. However, let us look at the use of Form Buttons as an alternative to a graphic or text navigation button.
Forms buttons are easy to code and of course load almost instantly.
Look at an example of using the form buttons.

You can control the button font colour and size by applying a Cascading Style Sheet descriptor to it. The button sizes itself automatically to accommodate the font size and text. Button width and height can be set in the Style Sheet or as an attribute in the form button code. This can only be viewed in the Microsoft TV Simulator.

When the page is opened in the Set Top Browser, the yellow rectangle hot link indicator defaults to the uppermost hot link. The default setting can be chaged by using the "SELECTED" attribute.This can only be viewed in the Microsoft TV Simulator.

For example the second button's code is:
<input type="button" name="Button" value="ClickMe2" class="button1" onClick=window.location="http://rcc.ryerson.ca" selected>

Here is an example of applying Style Sheets to code the forms buttons.

Note some button attribute changes are visible in Internet Explorer Browser, some others can be viewed in WebTV Simulator while others in Microsoft TV Simulator. A very frustrating thing indeed.. However, the final arbitrer is of course the SET TOP Box Brower!!.


REFERENCES
1. The WEBTV site has a good overview of coding for the Sony WEBTV set top box.
2. "Adding Images to Microsoft TV Content" Chapter 11, "Building Interactive Entertainment and E-Commerce content for Microsoft TV, by Peter Krebs, Charlie Kindschi, Julie Hammerquist. Published by Microsoft Press, 2000. ISBN 0-7356-0628-5
3. "Creating Forms for Microsoft TV Content", Chapter 17.
4. .Search Altavista, Google or 37.com for "webtv authoring".
5. Some specific topics:
    General Authoring: http://developer.webtv.net/authoring/