George Young, Microsoft Corporation
October 21, 1997
Abstract
Introduction
What's in it for users?
What's in it for developers?
The User Perspective
The Developer Perspective
A Sample Channel
Active Channel contents
Branded graphics
The CDF file
Posting the Channel for Users
For More Information
This article is the first in a series on developing channels using the Microsoft® Active Channel™ technology. After reading this article, you will understand the basics of this new technology, become familiar with its benefits, and be able to create your own channel. Subsequent articles will cover more advanced features of Active Channel technology.
With the release of Microsoft® Internet Explorer 4.0, Microsoft introduces Active Channel technology and the Channel Definition Format (CDF). At its core, CDF gives Web-site authors and developers a means of organizing and delivering information to users in a way that benefits both user and provider.
By employing CDF, authors can build Active Channel sites that provide a set of timely, structurally related, branded Web pages to a targeted, interested audience. Users can select the Web content that they want to receive knowing it will be updated regularly. Users can "subscribe" (free of charge) to the Active Channel content of their choice by clicking a link provided on the author's Web site.
For users, Active Channel technology provides a rich and intuitive Web browsing experience in a familiar environment.
Active Channel technology allows developers to extend their Web offerings while making use of existing developer skills.
Internet Explorer ships with a few default channels, but users will most likely subscribe on their own as they find channels that meet their needs, either via the Active Channel Guide at http://www.iechannelguide.com/ or via a Web site with which they are already familiar. (Web authors and developers should have their channels listed in the Active Channel Guide . Instructions are available in the Site Builder Network membership area at http://www.microsoft.com/sbnmember/. Nonmembers can enter the membership area as guests after a brief registration process).
Channels created with Active Channel technology are viewed in a default "Channels" mode which displays the Channel Bar (see Figure 3) in the Explorer Pane to the left. There are a number of ways in which users can view channels in Internet Explorer.
Click the Channels button on the Internet Explorer toolbar (Figure 1). This will open the Channel Bar (see below) in the Explorer Pane, preserving Internet Explorer's current mode (fullscreen or normal).
Figure 1. The Channels button on the Internet Explorer toolbar
If Active Desktop is enabled, click the View Channels button on the QuickStart toolbar next to the Windows Start menu (Figure 2). This will launch Internet Explorer in Channels mode with the Channel Bar visible.
Figure 2. The View Channels button on the QuickStart toolbar
If Active Desktop is enabled, click an Active Channel logo on the Active Desktop Channel Bar (figure 3). This will launch Internet Explorer in Channels mode with the Channel Bar visible, and load the selected Channel.
Figure 3. The Active Desktop Channel Bar
Select the Active Channel by name from Favorites on the Channels menu (Figure 4). Users can access this menu from either the Internet Explorer menu or the Windows Start menu. This will load the Channel while preserving Internet Explorer's current mode.
Figure 4. The Channels menu
Once in Channels mode, users can view any channel to which they have subscribed by clicking on the channel's logo in the Explorer Pane Channel Bar (Figure 5).
Figure 5. The Explorer Pane Channel Bar
Users can also view the entire set of subscribed channels in an Explorer window. If Active Desktop is enabled, this view also displays a brief description, or abstract, of each channel (figure 6). Double-clicking a channel here opens it for viewing in Internet Explorer.
Figure 6. The Channels folder in Web View
Active Channel technology has three basic components:
In this sample, we’ll build a simple channel that delivers information on Dynamic HTML.
Our main page will be the Internet Explorer 4.0 home page, with two subpages consisting of content from the Site Builder Network site. Note that instead of using existing pages, we could have created pages explicitly for the channel.
The channel needs three graphics; a 194 x 32-pixel "wide" image in .gif format, an 80 x 32-pixel image in .gif format, and a 16 x 16-pixel icon in .gif or .ico format (figure 7). If you are running Microsoft Office 97, you have all the tools you need to create these images. To make the .gif file image, we used Windows Paint, which has been enhanced in Microsoft Office 97 to create .gif and .jpeg file graphics.
Internet Explorer 4.0 uses the color in the top-left pixel as the background for the image when the user increases the width of the Channel Bar beyond the default of 194 or 80 pixels.
We created the icon using the Icon Editor, which is available with the Windows 95 Resource Kit.
Figure 7. Branded graphics
The CDF file defines the structure of the channel. Here's the entire code from the CDF for our sample channel. Take a few minutes to review it, and then we'll cover it in detail below.
<?XML Version="1.0"?>
<CHANNEL HREF="http://www.microsoft.com/ie/ie40/features/ie-dhtml.htm">
<ABSTRACT>This is a sample channel, used in the CDF 101 article, which has some Dynamic HTML information</ABSTRACT>
<TITLE>CDF 101 Dynamic HTML Sample Channel</TITLE>
<LOGO HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml.ico" STYLE="icon" />
<LOGO HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml.gif" STYLE="image" />
<LOGO HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml-w.gif" STYLE="image-wide" />
<ITEM HREF="http://www.microsoft.com/workshop/author/dhtml/">
<ABSTRACT>Site Builder articles about Dynamic HTML</ABSTRACT>
<TITLE>Dynamic HTML Articles</TITLE>
</ITEM>
<ITEM HREF="http://www.microsoft.com/workshop/prog/ie4/">
<ABSTRACT>Site Builder articles about authoring for Internet Explorer 4.0</ABSTRACT>
<TITLE>Internet Explorer 4.0 Technologies</TITLE>
</ITEM>
</CHANNEL>
Note that the syntax is very similar to HTML. One caveat: CDF is very picky about syntax. Take extra care to have all the quotes and slashes in the right place. Let's take a look at the individual tags we need for the channel.
The CDF file begins with a line that identifies the Extensible Markup Language (XML) version. (CDF is based on XML, which is a Web-specific subset of the Standard Generalized Markup Language (SGML). For a quick overview, see "XML White Paper" or, for a detailed specification, see the XML pages in the Microsoft Standards Web site at http://www.microsoft.com/standards/.)
<?XML version="1.0"?>
The main page of the channel is identified by the CHANNEL tag, and the information about the channel's subpages is contained within the <CHANNEL></CHANNEL> block. In the opening CHANNEL tag, we identify the URL of the channel's main page with the HREF attribute:
<CHANNEL HREF="http://www.microsoft.com/ie/ie40/features/ie-dhtml.htm">
Before describing the subpages of the channel, we need to describe its title and logos, as follows.
The TITLE is a short description of the channel that is displayed in the list of channels accessed from the Favorites menu. The ABSTRACT appears as a ToolTip when the user passes the mouse over the channel logo in the Channel Bar.
<ABSTRACT>This is a sample channel, used in the CDF 101 article, which has some Dynamic HTML information</ABSTRACT>
<TITLE>CDF 101 Dynamic HTML Sample Channel</TITLE>
The LOGO tag identifies our two logo images and one icon. As mentioned above, the logo images are .gif format images, 194 x 32 pixels and 80 x 32 pixels, respectively. The icon is a 16 x 16-pixel icon (.gif or .ico format). Note the unusual XML closing syntax for the LOGO tag—you need to add a forward slash before the closing bracket.
Because the Channel Bar has a black background color, it is recommended that you use this as your primary background color for both images. Internet Explorer 4.0 will use this color as the background if the user resizes the Channel Bar beyond its default size.
<LOGO HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml.ico" STYLE="icon" />
<LOGO HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml.gif" STYLE="image" />
<LOGO HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml-w.gif" STYLE="image-wide" />
That's all you need to define a basic, single-page channel. Now, let's define two subpages for the channel. Each subpage has, at its most basic level, three tags: ITEM, TITLE, and ABSTRACT.
ITEM defines a subpage and delimits its necessary information. The HREF attribute specifies the URL of the subpage. TITLE gives a short definition of the page that appears in the Channel Bar listing, and ABSTRACT provides a longer description that appears as a ToolTip when the user moves the mouse over the title in the Channel Pane:
<ITEM HREF="http://www.microsoft.com/workshop/author/dhtml/">
<ABSTRACT>Site Builder articles about Dynamic HTML</ABSTRACT>
<TITLE>Dynamic HTML Articles</TITLE>
</ITEM>
<ITEM HREF="http://www.microsoft.com/workshop/prog/ie4/">
<ABSTRACT>Site Builder articles about authoring for Internet Explorer 4.0</ABSTRACT>
<TITLE>Internet Explorer 4.0 Technologies</TITLE>
</ITEM>
Finally, the channel definition is closed with the </CHANNEL> tag. Save the file with a CDF extension; that's all there is to it. Now, we'll cover the basics of setting up the channel for installation on users' machines.
Now that we've created the CDF file, all that remains is to place the file on an HTTP server so that users can subscribe.
To do so, users click on a link to the CDF file. This link can be a text HREF, or it can be an image. So we need to place a link to the CDF file on a Web page, indicating that the user needs to click here to subscribe. Microsoft recommends that developers use a standard .gif file (available from SiteBuilder).
<A HREF="http://www.microsoft.com/workshop/prog/ie4/channels/dhtml.cdf>
<IMG BORDER=0 SRC="www.microsoft.com/workshop/prog/ie4/channels/addChan.gif" >
Click here to subscribe to our sample Dynamic HTML Channel.
</A>