These miscellaneous tips involve various areas of the MSN TV platform. Site developers will find answers and workarounds to their not so common questions and problems.
Contents
The TV browser can be used in two different modes. Normal Web pages are always displayed in Web mode. You will know that you are in Web mode because page scrolling is enabled and there is a status bar at the bottom of the screen. If you select Home on the keyboard you will go to the Web Home page.
Web pages can also be displayed in TV mode. TV mode is used to display interactive TV pages. TV mode does not allow any scrolling (the screen dimensions are a fixed size of 560 pixels wide x 420 pixels high), and there is no status bar. TV mode also allows you to display, size, and position the TV broadcast anywhere on the page by declaring the TV tag as an object or image.
Toggling between the two modes is accomplished by using the "view" attribute within any anchor tag. For example, to display a page in Web mode from a link within a TV mode page, use the following:<a href="mypage.html" view="web">Go to my page</a>
You can also toggle between the two modes manually by selecting the "view" button on either the keyboard or remote.
Toggling between modes is useful for two reasons:
Example:
<a href="itvapplication.html" view="tv">Go to ITV app</a>
Example:
<a href="http://www.webtv.net" view="web">Visit our website</a>
Any time you go from TV mode to Web mode, the WebPIP® will appear in the bottom right by default. There is no way to control the size of the WebPIP. You can move the WebPIP to the lower left by selecting (Cmd + M) on the keyboard or the "Enter" button on the remote control. To remove the WebPIP, select "options" on the keyboard or remote to display the panel that allows you to remove the WebPIP.
There are two ways you can return to the interactive TV application from Web mode:
Yes. While the yellow selector box is around a link, hold down the Control and Command keys at the same time (Ctrl + Cmd). The URL of the link will appear in the status bar. This is only possible when viewing a page in Web mode, because there is no status bar in TV mode.
Yes. The URL of the link will appear by default unless you specify the text you want to appear with the "title" attribute of the anchor tag.
Example:
<a href = http://www.webtv.net view=web title="Visit my Web site">
The TV browser supports the use of a tag within a frameset. By default, the HSPACE and VSPACE are set to 1, creating the gray border. Make sure that you declare HSPACE=0 and VSPACE=0 inside the tag of the frameset. You can also include the following script, called a "browser sniffer," which detects TV browsers:
if (navigator.appVersion.indexOf("WebTV") != -1 ) {
document.write("");
} Build the application inside a top-level frameset to maintain state as the user moves through various pages of the application. This way, the URL of the application never changes, just the frames, so you always have access to global variables. It is also advisable to use cookies for maintaining user state because changing channels or going to Web mode will cause you to lose any client-side data.
The yellow selection box follows a logical path across the page from link to link. For example, pressing the right arrow key will move the selection box to the next closest selectable area that is to the right and down.
You can, however, control the behavior of the four directional arrows by adding an attribute to the anchor tag specifying which element on the page the selection box should move to when one of the four direction arrows is pressed. For example, if you want the selection box to move from "my_link" to "my_form" when the user presses the right directional arrow key, you could specify this in the anchor tag for link A with the "nextright" attribute:
<A HREF="#" ID="my_link" NEXTRIGHT="my_form">Click on my link</a>
This applies to the other directional arrow keys: NEXTUP, NEXTDOWN, and NEXTLEFT.
This is useful in an application where the logical movement of the selection box is disrupted because the links are not lined up properly on the page.
Select lists are used inside a form to create a list of items from which the TV audience can choose one or more options. Select lists can be useful controls in an interactive TV program. The Interactive TV News Template is a good example of how to add information, such as news headlines, dynamically to a list. With the <SELECT> tag, several attributes specific to our platform can be used to control the look and behavior of lists:
The height of a text input is determined by the size of the font. You can also make the text input slightly smaller by setting BORDER=0 inside the <INPUT> tag.
Yes. You can specify the cursor color with the attribute CURSOR in the <INPUT> tag. You can render text to be in the style currently in effect for the page with the USESTYLE attribute.
Example:
<FONT COLOR=green><INPUT TYPE=text CURSOR=blue USESTYLE>
Yes. You can remove the yellow selection box with the attribute NOHIGHLIGHT. Because the text entry field, defined by <INPUT TYPE=text>, draws a cursor to indicate where the user can type, it's not necessary to indicate the selected field with a yellow rectangle.
No. Our platform does not currently support innerHTML. However, you can dynamically set the content of input elements. For example, you can set the content of an <INPUT TYPE="text"> or a <TEXTAREA> field by setting the value: document.my_form.my_textarea.value = <New Content>;
A very effective way of dynamically writing content to a page is to write to a form element. Using attributes of <form> elements specific to our platform, you can remove the borders, white background, and selection box so the text input is more or less invisible but the text within it is not. Several attributes to the <TEXTAREA> tag specific to our platform control how text appears on the page:
Some attributes specific to our platform can also control functionality and design. See HTML for more details.
The screen size dimensions are 560 pixels wide by 420 pixels high. Ideally, you should not make your pages any larger than this. If the page is wider, the receiver will resize your page proportionally to fit within the 560-pixel width. If a page is taller than 420 pixels, the remaining content will be chopped off because it is not possible to scroll a page up and down in TV mode.
Even if you position content at the extreme edge of a page over full-screen video, it will not bleed to the edge of the video. The video dimensions are 640 wide x 480 high, while the content safe area is 560 x 420 within that.
By using an attribute to the <A> tag called INSETSELECTION. Instead of putting the yellow selection box along the outer edge of your selected area, INSETSELECTION positions the selection box along the inner edge so it doesn't overlap any images, text, or the TV window that may be adjacent. You can not use INSETSELECTION around the TV object.
Yes. The SELECTED attribute of the tag, used in conjunction with the HREF attribute, indicates that an anchor will be selected with a yellow highlight box. (See HTML for details.) You can also control where the selection box moves to in an application using the focus() method. For example, if you want the selection box to move to a certain link on the page after some JavaScript is executed, you can apply focus to the page element.
Example:
document.all.theLink.focus(); Yes! A very valuable feature of the TV browser is that you can set the transparency level of any <table> element or <image> element so the background bleeds through. This is very useful when you want the broadcast video to show through HTML overlays. Transparency levels can be set anywhere between 0 and 100.
Example:
<body background="tv:">
<table transparency=50 bgcolor=green width=200 height=200>
<td>This table will be set at 50% transparency so you can see the video behind it.<td>
</table>
</body>
</blockquote">
There are two attributes you can use in conjunction with the BGCOLOR attribute within <BODY>, <TABLE>, and <TD> tags to create gradients: GRADCOLOR and GRADANGLE. Set the BGCOLOR to the start color, GRADCOLOR to the end color, and GRADANGLE to a numeric value between 0 and 90 for the angle of the gradient. The Interactive TV Standard Template shows an example of how a gradient can be used.
Our Internet receivers display all text in the Helvetica font because it is easy to read on a television. However, you can vary the look of your text by setting the font effect to one of three possible values: EMBOSS, RELIEF, or SHADOW.
<font size="3" effect="shadow">
You can also render text in a double-weight boldface font by enclosing it with the HTML tags <BLACKFACE></BLACKFACE>.
Yes. Although it is preferable to allow users to adjust text size settings, some interactive TV programs are dependent on a fixed text size. To fix the text size, set the FONTSIZE attribute in the <BODY> tag of your Web page.
JavaScript alerts only work in Web mode. If you use them for debugging, view your application in Web mode during the development process.
One way of writing HTML content to a page is to embed a document in an area of the page and then write HTML to that document via JavaScript.
Another way to write simple text to a page is to write to form elements on the page.
Our platform supports the following event handlers: onload, onmouseover, onmouseout, onclick, onkeypress (for text fields), and onunload (in most situations but not recommended).
Our platform fully supports the javascript: protocol. When the javascript: protocol is encountered, the attached expression is evaluated. If the expression generates a result other than void, undefined, or error, the result will be displayed in the current context. Valid contexts for the javascript: protocol include:
<A HREF="javascript:1+2"> // jumps to a blank page with the number 3
<FRAME SRC="javascript:1+2"> // same thing in a frame
<A HREF="javascript:void(foo())"> // executes foo() but suppresses the result
Our platform does not currently support chat in TV mode. To use an IRC chat in your interactive TV application, you must load the chat page in Web mode.
Our platform supports up to Flash 4.0. If you are using Flash over full-screen video, transparency in the Flash file is not supported. For more information, go to our Macromedia Flash page.
Yes, our platform supports 8-bit transparent .gifs, or "alpha .gifs." An alpha .gif allows you to create a .gif with varying levels of transparency