Home / Web Building Tutorials / Creating an Active Desktop (HTML 4)



Save big on iPage's shared and Wordpress hosting with our March coupons!
iPage March coupons
Save big on iPage's shared and Wordpress hosting with our March coupons!
iPage March coupons
Facebook Fan Page



The HTML page you use for your desktop item must be small. I don't mean bytewise, but physical size. My desktop item measures 210 pixels wide and 100 pixels tall. Users don't want desktop items that take up the whole screen. They just want it to sit in the corner. From what I've read, you should make your desktop item take up no more than one-sixth the area of the screen, equivalent to about 200x200 pixels. Your desktop item only has to have a couple lines. Mine is for my HTML4 e-letter. It is updated every week (it's a weekly e-letter). My desktop item has a link to the online issue and gives a 2-3 line outline of the current issue. When you make the Web page, be sure to include technologies such as DHTML, CSS and HTML4. You know the user will be using IE4, so take advantage of what that browser has to offer.

Red_CurlyC035.gif (995 bytes) CREATE THE CDF FILE

Once you have the HTML page, you need to create a Channel Definition Format (CDF) file that takes care of the whole download and update thing. CDF files are written in XML (the brother of HTML). Here is an example CDF file:

<?XML version="1.0"?>

<IntervalTime DAY="7" />
<EarliestTime HOUR="12"/>
<LatestTime HOUR="18"/>

<Item HREF="http://www.flamingolingo.com">

<Title>FlamingoLingo Desktop Item</Title> <!-- Required -->

<Usage VALUE="DesktopComponent">    <!-- Required -->
<OpenAs VALUE="HTML"/>        <!-- "HTML" (default) or "Image" -->
<Width VALUE="200" />        <!-- Width in pixels -->
<Height VALUE="80" />        <!-- Height in pixels -->
<CanResize VALUE="No"/>        <!-- Yes (default) or No -->

</Item>    <!-- Other Item tags may go here. IE4 won't display them
anywhere, but -->
<!-- will use them for site crawling and place them in the user's
cache. -->

<Item HREF="http://www.flaminglingo.com/somepage.html


You would save that in text format with the suffix .cdf. After the opening XML and channel tags, we have the schedule tag. The IntervalTime is how often you want the desktop item to be updated. Set this to as often as you update the HTML page you created earlier. EarliestTime and LatestTime are the earliest and latest times you want the desktop item to be updated. If your desktop item is popular, you are going to want the two times to be fairly separated. If everyone were to update their desktop item at the same times, phone lines would get clogged and the download would be very slow.

The Item tag is the HTML page that will serve as desktop item. Next you have the title of the desktop item. This is needed so that when a user goes to manage his desktop items (right-click desktop, Active Desktop, Customize my Desktop...), there will be a title for the desktop item you created. The usage tag is where you set up the size and other things for your desktop item. The first item is required. It is the page that shows up on the desktop. You can
optionally have other Item tags. These HTML pages (or any other document) will now be shown, but rather placed in the user's cache. You need to do this if the first HTML page makes reference to another page or document. Most of you will not need to use this.

Red_CurlyC035.gif (995 bytes) POST THE CDF FILE

FTP the CDF file and the HTML pages that you created to your Web server to that Web surfers may download the desktop item to their computers.


Now you want to offer the desktop item to your users. You need to create a link to the CDF file. Do this just as you would make an regular link, except trade the CDF file for the HTML page in regular links. You can also get that cool "Add to Active Desktop" button. This button is available from the Microsoft site
(http://www.microsoft.com/sitebuilder). This is probably the way you want to go because the button is special. Only if the user is using IE4+ will he be able to download the desktop item. If the user is using another browser, he is redirected to a page that says you need IE4 to download the desktop item.

This tutorial is written and contributed by Matthew Clemente, professional web designer and owner of FlamingoLingo.com Visit FlamingoLingo for tutorials and tips on HTML 4, CSS, DHTML, and more. There is also a weekly newsletter you can subscribe to to get all this info delivered to your email!

End of Tutorial

CopyRight 1997, 1998 JavaScript Kit. NO PART may be reproduced without author's permission.