My Sidebar Developer's Guide
Last updated: August 8, 2002
Click to add this table of contents to My Sidebar.
Comments or suggestions about this document? Please post them to the netscape.public.dev.mysidebar newsgroup
This guide is intended for content developers who wish to create tabs for the sidebar, a component of Netscape 6/7. The guide contains technical descriptions of the tab concept, design and development processes, as well as sample code.
The sections in this document include:
- Quick Start
- Introduction to the Sidebar
- Other Sidebar Tab Examples
- Creating a Simple Sidebar Tab
- Adding a Tab to the Sidebar
- Developing More Advanced My Sidebar Tabs
- International Issues
- My Sidebar Tab Resources
My Sidebar tabs provide a place within the Netscape 6/7 browser for users to keep connected to what is most important to them. The content and features of a tab are completely up to you, the developer -- but the best tabs make the most of what the Netscape 6/7 and the sidebar feature have to offer. Tabs can and should have content that is compelling, dynamic, and customizable. Tabs are a great place for favorite information, such as stock quotes, local weather, news headlines, sports headlines, local events, or horoscopes. Users can choose from a wide variety of tabs in the the My Sidebar Directory.
My Sidebar gives your content constant presence and stickiness within the user's client software. That means that users always have access to your service or content even when they are on another web site or using email. Links in your tab can lead back to your web site, driving increased traffic.
Introduction to the Sidebar
This section describes sidebar tabs and explains how tabs differ from ordinary web sites.
What is a Sidebar Tab?
Tabs are like regular web pages in that they are built on HTML and other web standards. My Sidebar tabs can deliver up-to-date, dynamic information. Users can easily add and customize sidebar tabs.
These are some of the features that tabs offer:
- Content can be automatically updated without user intervention
- Users can choose and arrange the tabs that appear to get just the information they want
- Tabs can be context sensitive, time sensitive, and person sensitive.
Any web site content can be delivered as a tab, enabling you to leverage your existing web content; however, dynamic information that incorporates web standards takes best advantage of the technology offered in Netscape 6/7 and other Mozilla-based browsers.
Information that is well suited to a tab is that which is of continuous interest to the user. The content can be dynamic in the sense that the details may change often, but the information should always be relevant and up to date. For example, a stock ticker or news wire service present constantly changing particulars, but the user desires the presence of that information to be continuous. Given the limited size of tabs, their content should NOT contain advertising, as users will avoid tabs that "push" ads at them.
These are some examples of information well suited to a sidebar tab:
- tidbits and highlights that link off to a full story elsewhere, such as news headlines
- dynamic information, such as a stock ticker
- small desktop applications, such as a calendar application
The three tabs shown below, the Note-It and Calculator tabs from livesidebar.com and the MapQuest tab from Netscape, give you some idea about how practical and easy-to-use My Sidebar tabs can be. The Note-it tab lets you write and save notes in the browser and supports drag and drop for links and other text, and the Calculator tab lets you do simple calculations while you browse the web, as you might when you are shopping online.
Other Sidebar Tab Examples
The Netscape My Sidebar Directory has hundreds of My Sidebar tabs you can add. Providers range from companies like Mapquest and FedEx to auto racing hobbyists and entomologists. My Sidebar developers have also created a number of application-like tabs, such as the Note-it and Calculator tabs shown above.
Creating a Sidebar Tab
Here is an overview of the process for designing and distributing a sidebar tab; detailed steps appear later in this section:
- Using simple HTML, create a web page that fits into the sidebar area. The default sidebar width is 144 pixels with a scroll bar and 162 pixels without a scroll bar. A tab can include anything Navigator 6 or any other Mozilla-based browser can display, including HTML with CSS, JPEG, PNG, and XUL. You can use any supported MIME type.
- If you want the content to refresh at a particular interval, include the appropriate META information in the document. Including the META refresh information in the HTML document causes the browser to automatically refresh or reload the page after the specified time. The refreshing occurs as long as the tab remains open in the sidebar.
- Include a target='_content' attribute in any links in your tab so that the main content displays in the main browser window and not in the sidebar tab:
- Save the document.
- Include the "Add tab to Netscape 6/7 button," on your web site. This button allows users to add your tab instantly. See the section Adding a Tab to the Sidebar for more information.
- Download and install Netscape 6/7.
- Using Netscape 6/7, visit your web site and click the Add button. The tab should appear in the sidebar.
Here is how you can implement refreshing in your code:
<META HTTP-EQUIV="Refresh" CONTENT="1200; URL=http://whatever_the_url_is">
In addition, you can include a Refresh button in a tab to give the user freedom to reload the page whenever they choose. You can also include an Edit button for tabs that are customizable.
<A HREF="whatever_the_url_is" TARGET="_content">>
If a tab works as a form, use this attribute:
<BASE HREF="whatever_the_url_is" TARGET="_content">
Here is a simple example of a My Sidebar tab:
<html> <head> <title>My Sidebar Developer"s Doc Tab</title> </head> <body bgcolor="#ffffee"> <font face="Arial,Helvetica,sans-serif" size="1"> <h2>My Sidebar Developer"s Guide</h2> The sections in this document include: <ul TYPE="circle"> <li><a target="_content" href="../sidebardev.html#intro">Introduction to the Sidebar</a> <li><a target="_content" href="../sidebardev.html#example">Example My Sidebar Tab</a></li> <li><a target="_content" href="../sidebardev.html#developing">Developing My Sidebar Tabs</a></li> <li><a target="_content" href="../sidebardev.html#creating">Creating a Simple My Sidebar Tab</a></li> <li><a target="_content" href="../sidebardev.html#adding">Adding a Tab to the Sidebar</a></li> </ul> </font> </body> </html>
Also see the Tab Wizard in the Resources section below, which allows you to create My Sidebar tabs from on-line tools and tab templates.
Adding a Tab to the Sidebar
Netscape 6/7 comes configured with a sidebar that includes a number of default tabs. Users can customize their sidebar by adding and deleting tabs. These are the means by which users can add tabs:
- click the Add to Netscape 6/7 button on a web site
- choose a tab from the list in the Customize My Sidebar dialog
- choose a tab from the list in the My Sidebar directory
- click the Today's Tips tab
|title||The title that appears at the top of the tab.|
|content||The URL to load in the content area of the tab.|
|customize||The URL to customize the tab. This is optional.|
The web page from which you initiate the tab addition process should display a button or link that invokes the addPanel API call. You should place this button on your site's home page, for example, or on a preview page for your tab, or even in an email message. Here's a sample button that adds the table of contents for this document to the sidebar:
When the addPanel call is made, the sidebar uses the values of the tab object as the default tab property values and presents a confirmation dialog box to the user. A site can have additional capability to personalize or customize a tab through the customize parameter, but such work must be completed prior to the invocation of the addPanel method.
To learn about the benefits of promoting your tab to your audience, click here.
Using the Customize My Sidebar Dialog
Users can add and customize tabs through the Customize My Sidebar dialog:
You can get your tab added to the list of tabs offered to users by either establishing a relationship with Netscape or by joining the My Sidebar Network and listing your tab in the My Sidebar Directory. For information on working with Netscape to promote your tab, contact firstname.lastname@example.org. For instructions on joining the My Sidebar Network, see http://home.netscape.com/sidebar/join.html.
Developing More Advanced My Sidebar Tabs
This section describes the process of developing My Sidebar tabs. It discusses the elements and language from which tabs are built and the special considerations they require. This section also presents a suggested tab design process and techniques to optimize tab performance and effectiveness.
Design RecommendationsThough the sidebar can display any file format that Netscape 6/7 can display, many of these files do not display well in a window that is smaller than 150 pixels by 150 pixels. When designing your sidebar tab make sure your document is presentable in a small space and resizes well. The tab content area is 162 pixels wide, 144 pixels wide when a scroll bar is included. You can utilize the space within the tab area by decreasing font sizes. The tab title is approximately 20 variable width western characters or 10 double-byte characters.
CSS is a stylesheet language that suggests formatting for elements in a document. To learn more about CSS, see these resources:
- CSS1 Specification at http://www.w3.org/TR/REC-CSS1
- CSS2 Specification at http://www.w3.org/TR/REC-CSS2/
- W3C CSS Page at http://www.w3c.org/Style/CSS/
- Streaming audio presentations on Introduction to CSS1 and Introduction to CSSP at http://media.netscape.com/
- Netscape Open Directory CSS category at http://dmoz.org/Computers/Programming/Internet/CSS/
- CSS Developer Newsgroup: netscape.public.dev.css
- Usenet CSS newsgroup: comp.infosystems.www.authoring.stylesheets
- XUL Programmer's Reference Guide at http://www.mozilla.org/xpfe/xulref
- XUL Tutorial at http://www.xulplanet.com/tutorials/xultu/
- Writing Skinnable XUL and CSS at http://www.mozilla.org/xpfe/skins.html
- DOM1 Specification at http://www.w3.org/TR/REC-DOM-Level-1/
- DOM2 Working Draft at http://www.w3.org/TR/WD-DOM-Level-2/
- W3C DOM Page at http://www.w3.org/DOM/
- DOM Developer Newsgroup: netscape.public.dev.dom
My Sidebar Access Limitations
The My Sidebar tabs described in this document can be installed using the simple steps in Adding a Tab to the Sidebar. However, more advanced My Sidebar tabs like the History, Search, and Bookmarks tabs that come pre-installed in the browser need special access to information and functionality stored in the browser itself. In order to overcome certain access restrictions placed on web content, the tabs are installed as new packages in the browser rather than as regular sidebar content. You can create advanced My Sidebar tabs like Search using XUL, XPConnect and other technologies, but you must then use Netscape's cross-platform installation technology (XPInstall) to install them properly.
For more information about XPInstall and installing new packages in Netscape 6/7, see the XPInstall API Reference.
All RDF or XML documents created for international tabs must be encoded in UTF-8. In general, if an XML/RDF document does not contain character set information in the XML declaration section, the XML parser assumes it is in UTF-8. Make sure the provided channel titles, descriptions, and all text that is visible to the end users are encoded in UTF-8.
When creating an international tab, use HTML and include the character set information in the META information as follows:
<meta http-equiv="Content-type" content="text/html; charset=iso-8859-1">
This HTML document does not need to be in UTF-8.
To internationalize your tab name, Netscape uses XML Entities and DTDs. An entity in XML can be used as a container for non-XML data. A DTD (Document Type Definition) can be part of the RDF file itself.
The following is a sample DTD that may be included near the beginning of your panels.rdf document:
<!DOCTYPE RDF [ <!ENTITY sidebar.panel.whats-related "What's Related"> ] >
This entity declares a container named sidebar.panel.whats-related and its content includes the string "What's Related". After declaring the entity, use the new entity in place of the string when you declare the tab's displayed title.
<RDF:li resource="urn:sidebar:panel:whats-related" />
When the panel is internationalized, only the entities need to be translated.
The Add Tab button is available in French, German, and Japanese.
En savoir davantage
Popular Tabs and Tab Resources
- GameTab lets you play arcade-style games in the sidebar
- Redi Sidebar Tabs, quick references for programmers
- Developer Tabs (Japan)
- Mozilla Sidebar Tabs
- Netscape Devedge
- Tab Wizard, a tool for creating My Sidebar tabs
- Netscape My Sidebar Directory