Click to return to the Content     
Design Guidelines for Act...     Guidelines for Active Cha...     Active Channel Technology...    
Web Workshop  |  Content & Component Delivery

Developing an Active Channel Site


Follow these steps to transform any existing Web site into an Active Channel™ site:

  1. Design the channel.
  2. Create the logo images.
  3. Create the CDF file.
  4. Post the CDF file.
  5. Offer the new channel to users.

Design the Channel

When creating a CDF file, the first step is to determine the hierarchy, or structure of the channel. The channel can be designed to represent the structure of an existing Web site, or it can be a subset of a Web site's content with a completely different hierarchy. The structure of the channel is created in the CDF file using CHANNEL elements that represent major segments of the site, and ITEM elements that represent the subchannel hierarchy. To prevent users from being overwhelmed with information and images, as well as to provide a uniform "look and feel" among channels, keep the following guidelines in mind:

For additional suggestions on designing channels, see Design Guidelines for Active Channel Sites.

Create the Logo Images

There are several places in the user interface where images associated with an Active Channel site are displayed:

When creating a channel, Web publishers should provide appropriate images for each of these categories. Internet Explorer 4.0 and later will provide default images wherever necessary. The top-level CHANNEL element should include three LOGO child elements, one for each type of STYLE attribute, as follows:

<CHANNEL HREF="http://sample.microsoft.com/mainchannel.htm">
  <LOGO HREF="http://sample.microsoft.com/widelogo.gif" STYLE="IMAGE-WIDE"/>
      <!-- For Channels/Favorites Explorer Bar -->
  <LOGO HREF="http://sample.microsoft.com/logo.gif" STYLE="IMAGE"/>
      <!-- For desktop Channel Bar -->
  <LOGO HREF="http://sample.microsoft.com/icon.gif" STYLE="ICON"/>
      <!-- For category folder -->
    .
    .
    .
</CHANNEL>

The STYLE="ICON" attribute is included in case the user places an Active Channel site in a category folder. When this occurs, the channel will appear in the list of available channels in the category when that channel folder is selected. All other CHANNEL and ITEM elements in the CDF file should include only one LOGO child element with the STYLE="ICON" attribute. When creating your image files, you'll want to make the background color transparent, if possible. It's also recommended that your image be fairly simple so that it's easy to recognize at the 16H x 16W size. Additional information about logo image specifications is available in the Guidelines for Active Channel Images.

Create the CDF file

When the channel structure has been designed and the logos have been created, the CDF file can be written. The CDF file must include at least one CHANNEL element and should include the SCHEDULE and LOGO elements. The ITEM element can be used to include Web pages as part of the channel's content. As the content contained in the channel is added, removed, or modified over time, Web publishers should update the CDF file to reflect the changes. To learn how to author a basic CDF file, see Creating CDF Files.

The CHANNEL element is used to define the top-level channel itself, along with any subitems nested within that channel. Thus, the occurrence of the beginning and ending CHANNEL elements defines the hierarchy of the channel.

Post the CDF file

After creating the CDF file, it should be posted on the Web site it describes. Typically, the file would be placed in a public folder on the Web site's HTTP server.

Offer the New Channel to Users

Finally, Web publishers need to provide a method for users to install their channel (or Active Desktop™ item). Users will be able to add channels from three primary sources:

Although a simple HREF attribute in an A element pointing to a CDF file will initiate the channel subscription process, your page should include the Add Active Channel or Add to Active Desktop logo button for consistency and maximum usability. These buttons should have scripts associated with them that, when clicked, perform the proper behavior in any browser. When using the scripts in the following example, clicking the button with "Microsoft Internet Explorer 4.0 and later" displays the Add Channel dialog box. If users without Internet Explorer 4.0 or later click the button, they will be directed to download the new version.

Note To use the Microsoft Add Active Channel button logo image or the Add to Active Desktop button logo image, you must sign up and accept the terms of the Active Channel Logo Agreement at http://msdn.microsoft.com/community/osig/ie/ielogo.asp.

Follow these steps to add the logos and scripts to your HTML page.

Step 1. Place these logo image buttons on your Web server.

Add Active Channel

Use this image to allow users to install your Active Channel.

Add to Active Desktop

Use this image to allow users to add your item to their Active Desktop.

Web publishers are encouraged to use these official Internet Explorer button logo images to provide users with a more visible, consistent, and easily recognizable method for adding Active Channel sites and Active Desktop items.

Step 2. Using Notepad or your favorite HTML editor, open the HTML page that will contain these logos.

Step 3. Copy and paste the following script between the beginning and ending HEAD tags in the HTML page you are editing:

<script language="JavaScript">
  function isMsie4orGreater() { 
  var ua = window.navigator.userAgent;   var msie = ua.indexOf ( "MSIE " );
  if  (msie > 0) {
    return ( parseInt( ua.substring( msie+5,ua.indexOf( ".", msie))) > =4 ) 
      && (ua.indexOf("MSIE 4.0b") <0); }
  else {return false;}}
</script>

Step 4. For each individual Add logo included on the HTML page, copy and paste the following lines of HTML:

<a name="uniqueName" 
href="http://www.microsoft.com/ie/ie40/download/?/ie/ie40/download/redirect.htm"> 
<img src="urlOfLogoImage" border=0 width=136 height=20></a>
<script language="JavaScript">
  if ( isMsie4orGreater()) { 
    uniqueName.href ="urlToCDF"; }
</script>

Edit the above script by making the following changes:

Tip Web publishers might also want to use Dynamic HTML to conditionally display or hide content based on whether the user has a subscription to their Active Channel site.

CDF Sample and Explanation

The following sample CDF file shows the syntax used in the CDF, with detailed explanations in the next section.

<?XML version="1.0"?>
<CHANNEL HREF="http://sample.microsoft.com/Channel/homepage.htm"
  BASE="http://sample.microsoft.com/Channel/">
  <TITLE>Sample "Color" Channel</TITLE>
  <ABSTRACT>The sample color channel contains 
    a red, green, and blue page for viewing.</ABSTRACT>
  <LOGO HREF="logo_big.gif" STYLE="IMAGE-WIDE"/>
  <LOGO HREF="logo_med.gif" STYLE="IMAGE"/>
  <SCHEDULE STARTDATE="1997-09-23">
    <INTERVALTIME DAY="1" />
    <EARLIESTTIME HOUR="2" />
    <LATESTTIME HOUR="6" />
  </SCHEDULE>
  <ITEM HREF="page1.htm">
    <LOGO HREF="red.gif" STYLE="ICON"/>
    <TITLE>The Red Page</TITLE>
    <ABSTRACT>This is the abstract description for the red page.</ABSTRACT>
  </ITEM>
  <ITEM HREF="page2.htm">
    <LOGO HREF="green.gif" STYLE="ICON"/>
    <TITLE>The Green Page</TITLE>
    <ABSTRACT>This is the abstract description for the green page.</ABSTRACT>
  </ITEM>
  <ITEM HREF="page3.htm">
    <LOGO HREF="blue.gif" STYLE="ICON"/>
    <TITLE>The Blue Page</TITLE>
    <ABSTRACT>This is the abstract description for the blue page.</ABSTRACT>
  </ITEM>
  <ITEM HREF="scrnsave.htm">
    <USAGE VALUE="ScreenSaver"></USAGE>
  </ITEM>
</CHANNEL>

The following section lists portions of the CDF example file and then describes the function of the elements and their associated attributes. Where possible, the effect on the user is also indicated.

<CHANNEL HREF="http://sample.microsoft.com/Channel/homepage.htm"
  BASE="http://sample.microsoft.com/Channel/">

In this case, the CHANNEL element defines the top-level channel of the hierarchy. Every element that follows until the matching </CHANNEL> element is subordinate to this channel. The HREF attribute defines the Web page to be displayed in the browser when the channel is selected either in the desktop channel bar or in the Explorer Bar. The BASE attribute defines the URL of the location where the channel's resources exist. This allows Web publishers to specify other URLs in the CDF file using relative paths.

<TITLE>Sample "Color" Channel</TITLE>
  <ABSTRACT>The sample color channel contains
    a red, green, and blue page for viewing.</ABSTRACT>

The TITLE element defines the text that is associated with this channel in the browser's Channel/Favorites pane. The ABSTRACT element defines a text string that is displayed in a ToolTip when the cursor is placed over the channel.

<LOGO HREF="logo_big.gif" STYLE="IMAGE-WIDE"/>
<LOGO HREF="logo_med.gif" STYLE="IMAGE"/>

The LOGO element marked with the "IMAGE-WIDE" style attribute is displayed in the Explorer Bar, while the "IMAGE" style is shown in the desktop channel bar. Clicking this image results in opening the URL specified in the top-level CHANNEL element, or the channel hierarchy is shown, if applicable.

<SCHEDULE STARTDATE="1997-09-23" STOPDATE="1999-11-23">
  <INTERVALTIME DAY="1" />
  <EARLIESTTIME HOUR="2" />
  <LATESTTIME HOUR="6" />
</SCHEDULE>

The SCHEDULE element indicates how often, and during what time range, the channel should be updated. This is designed to help Web sites manage their server traffic. The preceding example is set to update the channel every day between 2 A.M. and 6 A.M. This schedule information is set to expire on November 23, 1999.

<ITEM HREF="page1.htm">
  <LOGO HREF="red.gif" STYLE="ICON"/>
  <TITLE>The Red Page</TITLE>
  <ABSTRACT>This is the abstract description for the red page.</ABSTRACT>
</ITEM>

The ITEM element defines a Web page as a subitem in the sample CDF channel. This item will be displayed in the channel's hierarchy exposed in the Explorer Bar, along with the "ICON" image specified in the LOGO element.

<ITEM HREF="scrnsave.htm">
  <USAGE VALUE="ScreenSaver"></USAGE>
</ITEM>

This occurrence of the ITEM element (along with USAGE) defines the URL of an HTML page to be displayed in the Channel Screen Saver page. The ITEM and USAGE elements can also be used to define an HTML page as an Active Desktop item. These items can contain any valid HTML elements, such as images, ActiveX™ Controls, Java applets, and so on, and can be placed directly on the desktop with Internet Explorer 4.0 and later.

</CHANNEL>

This end tag indicates that the definition of the sample CDF channel is complete.



Back to topBack to top

Did you find this topic useful? Suggestions for other topics? Write us!

© 1999 Microsoft Corporation. All rights reserved. Terms of use.