Intercast Broadcast Ontario Project
  Sample Pages


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

Extensions for Interactive Television

Because interactive television involves displaying Web content and television simultaneously, we need to help the receiver determine how to display the information. Web pages are created using HTML, which is a collection of tags that describe how to handle the information between the tags. We have created two new components (also called extensions) that are used in the HTML of Web pages that will display TV. One tells the receiver if it should display information as TV or as Web content. The other defines the package of files that make up the interactive TV program and tells the receiver where to find it.

The "View" Attribute In HTML
The"View" attribute in HTML is a component of HTML that modifies a tag.
An anchor tag, or other selectable item, may contain a view="web" attribute. This lets the receiver know that the resource referenced by the link should be displayed as a Web page

. Example: <a href="http://webtv.net/" view="web">

If you follow this link from a TV program by selecting the interactive TV link icon, the display will change from TV mode to Web mode, which is the only way to display Web pages on a WebTV Internet receiver.

If you want the page to be viewed in TV mode the attibute would be coded

Example: <a href="http://webtv.net/" view="tv">
Note: If the "view" attribute is not included, the view remains unchanged. The view attribute is used only on pages that are already displaying TV.

Overlays on Full TV Screen
A simple way to view an interactive page is to show the TV image on the background and then overlay transparent buttons or images on this TV image. This is only useful for limited for small degree of information.
The buttons or images should have their transparencies set so that they are still visible without hiding the background TV image. These assets can be located using tables, Cascading Style Sheets or layers.

Placing text directly over a TV signal risks making the text difficult or impossible to read.
Moreover, you can't necessarily know what will be on the TV screen when the user views your page.
A workaround is to place the text on a transparent white background.

Sample CodeHTML
 1. Setting the TV image as a background
The syntax is very simple:

<body background="tv://">

This means the viewer can change the TV channel and not be locked to view the channel.

2. Transparency Property
Microsoft TV (and WebTV) supports the transparency property for the Table element and Graphics. You can set the range from fully opaque, transparency="0" to fully transparent, transparency="100".

The table background colour , text cell background in a table and a graphic can have its transparency controlled by
the following syntax:

<table border="0">
<tr>
<td transparency="80">This is some text</td> <td bgcolor="FF00CC" transparency="60">This is more text (transparency=60)</td>
</tr>
<tr>
<td><image src="images/idbg_logo.jpg" width="100" height="26" transparency="60"></td> <td><font face="Arial, Helvetica, sans-serif" color="#FFFFFF">Cell without transparency attribute</font>/td>
</tr>
</table>

The whole table background can be set globally by adjusting the trasparency in the <table> tag:

View this sample page using the above code in the Microsoft TV Simulator.. Right click on the "hot link" page and save the file. View the file in the Microsoft TV Simulator.

View "Transparency With Text Overlay in Tables" in Microsoft TV Simulator to show you the effect of varying the transparency attribute in tables.

View "Background Overlay :Transparency with Graphics on Layers" in Microsoft TV simulator to show you the effects of varying the transparency attribute of graphics.

You can code the graphics or text to appear at the edges of the TV screen. However, Microsoft TV always places these assets 44 pixels inside the TV area.


Picture-in-Picture (PIP)

In "Web Mode", the web page displayed, can be scrolled up or down by the "Scroll" buttons.
The TV image can be viewed in a Picture-in-Picture" mode by selecting the "PIP" mode button from the controller.
By default, the picture size is set by the Set Top Box and the TV image is located in the lower one third section of the screen.
The location can be moved to either the left or the right side of the screen by the " Enter Button" on the Hand Controller.


Layering TV Over Web Content

This is the mode that should be looked into in in great detail.
The viewrer will be presented with web pages that are similar to those of the World Wide Web while still being able to the view the TV image.

The attribute of the hot links to thses pages must be "web="tv".
Since the pages are viewed in "TV mode", they are not scrollable!! The dynamic interactive aspect have to be carried out by downloading all the images, text associated with this interactivity. These assets are placed on layers, which can be made hidden or visible by VBI code insertion or by event handlers activated with hot links.

This topic is well covered by Krebs. See Layering TV over Web Content, Chapter 7"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.
The book and the accompanying CD give may examples of layouts and an example of an e-commerce site.

A simple page layout with two layers and a hot link is shown in layer_over.html

REFERENCES
1. The WEBTV site has a good overview of coding for the Sony WEBTV set top box.

2."Layering Web Content over Full-Screen TV", Chapter 6, and Layering TV over Web Content, Chapter 7. from "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. Search Altavista, Google or Techcrawler for "webtv authoring".
4. Some specific topics:

General Authoring: http://developer.webtv.net/authoring/