Show Our Audience That We Use the Technologies We Advocate See Just How Much We Could Accomplish Through Stylesheets

page 171 As well discuss, creating all of these things through stylesheets required us to push XSLT to its limits. The design of the XML document allows us to manipulate the information for a tutorial in a variety of sophisticated ways, and the structure of our stylesheets makes it easy for us to change the look and feel of our tutorials without having to modify the original XML content. In addition to these goals, we decided to make the XSLT stylesheets and the necessary extensions open source. We did this so our readers could see what we were doing to eat our own dog food, and to see if tight integration with a standards-compliant stylesheet processor would allow us to use existing tools to generate tutorials in a semi-WYSIWYG environment.

9.3 Tutorial Layout

Before we talk about the details of the XML document design and the XSLT source code, well review the actual HTML, zip, and PDF files we need to create. One advantage we had in this project is that we didnt have any existing XML documents to contend with; this advantage gave us complete freedom over the XML document design.

9.3.1 Menu Panel

The menu panel is the first HTML document a user sees. It looks like Figure 9-1 . Figure 9-1. Toot-O-Matic menu panel In this example, the string Building tutorials with the Toot-O-Matic and all section titles are JPEG graphics created with our stylesheets and extensions. If you mouseover a section title, its background color changes, as shown in Figure 9-2 . Figure 9-2. Mouseover effect for section titles In this sample, notice that the text of the menu item appears as a tooltip. This appearance is useful for sight-impaired users, and is consistent with the Web Accessibility Guidelines defined by the W3C. page 172 A variety of navigation controls appear on every panel in a tutorial. The navigation bar contains items such as Main menu, Section menu, and Feedback. Although some items are disabled if youre already on the Main menu, the Main menu item isnt active, for example, they appear on every panel of the tutorial. There are also icons for viewing the tutorial in alternate formats, as Figure 9-3 demonstrates. Figure 9-3. Icons for alternate tutorial forms From left to right, these icons allow users to download a zip file that contains all files necessary to run the tutorial, a letter-sized PDF file, an A4-sized PDF file, and email a note to a friend, recommending this tutorial. All icons appear on every panel in the tutorial, and their associated links are generated by the Toot-O-Matic. Each panel has a masthead and footer, which are defined by corporate standards. They are generated by named templates cleverly named masthead and footer . As corporate standards are updated, we simply change those templates to change the look and feel of the tutorial panel.

9.3.2 Individual Panels

Most HTML files that make up a complete tutorial use this format. Notice that the panel contains the text page 1 of 6 ; we generate this text with XPath expressions. The 1 is generated by the position function, and the 6 is generated by the count function. Each panels navigation bar also contains links to the Main menu panel and the Section menu panel. An individual panel looks like Figure 9-4 . Figure 9-4. An individual tutorial panel