# Presentation: 199634

## XSLT and XHTML Demos for XML.Gov

- _[Ken Sall Consulting](http://kensall.com/)_

- Ken Sall, Principal

- September 18, 2002

## Goals

**To illustrate how using XHTML and XSLT on XML.Gov can facilitate different views of data (or documents).**
**To briefly compare/contrast several approaches to XSLT use:**
- server-side and client-side
- browser-specific and cross-browser.
**Part of XML.Gov vision: to use XML on site.**
**"The Medium is the Message"**

- Demo Home Page: http://kensall.com/gov

## Non-Goals

**Flash and Wow factor.**
**Demonstrate a wide variety of XSLT capabilities.**
**Code review.**
**Instead, we'll focus on inputs/outputs and sorting/displaying capabilities, relatively simple ways to increase value of XML.Gov as more and more documents are posted and data is captured.**

## HTML to Valid XHTML 1.0

**Convert HTML to XHTML using HTML Tidy.**
**Use W3C HTML Validation Service to identify errors (e.g., tag overlap, missing quotes, deprecated elements and attributes not in XHTML 1.0, etc.).**
**Fix errors. May take some time but once fixed, maintenance is easy.**
**Brand with W3C "Valid XHTML 1.0" logo.**
**Simply click logo after editing to re-validate.**

- _[Valid XHTML Demo](http://kensall.com/gov/xhtml/XML_gov-x.html)_

## Sorting Government XML Efforts

**Begin with **_**[HTML version](http://xml.gov/efforts.asp)**__**.**_
**Convert to structured XHTML (e.g., using HTML Tidy).**
**Use XSLT to extract inner table and sort.**
- By organization
- By name of effort
- Added Benefit:** Clean up inconsistencies in pathnames (absolute vs. relative) which can be detected and adjusted using XSLT.**

- _[Efforts Sort Demo](http://kensall.com/gov/efforts/)_

## Government XML Efforts: XHTML

## Sorting Government XML Efforts

- XHTML "mined" to extract tabular data. Links generated from XML using XSLT.

## XML WG Participants Sort

**Defined DTD describing Working Group participant. *****Strictly strawman.***
**Only ****Name**** and ****Organization**** are required. Other optional elements include: ****Title****, ****URL****, ****ExtraURL****, ****SpecialInterests****, and ****ContactInfo****. **
**Sort by ****Name**** and ****Organization****.**
**Server-side and client-side transformations.**

- WG Participants Sort Demo

## DTD for XML WG Participants 

- <!ELEMENT Participants (Participant+)>
- <!ATTLIST Participants
- 	meetingDate CDATA #IMPLIED meetingName CDATA #IMPLIED
- 	meetingLocation CDATA #IMPLIED >
- <!ELEMENT **Participant** (**Name**, Title?, **Organization**, URL?, ExtraURL?, SpecialInterests?, ContactInfo?)>
- <!ATTLIST Participant	workingGroupMember (yes | no) "yes" >
- <!ELEMENT Name (First, Initial?, Last)>
- <!ELEMENT Title (#PCDATA)>   <!-- participant's title, if known -->
- <!ELEMENT First (#PCDATA)> <!ELEMENT Initial (#PCDATA)>
- <!ELEMENT Last (#PCDATA)>
- <!ELEMENT Organization (#PCDATA)>
- <!ATTLIST Organization detail CDATA #IMPLIED
- 	type (gov | com | edu | mil | other) "gov"	>
- <!ELEMENT URL (#PCDATA)>  <!-- URL of organization -->
- <!ELEMENT ExtraURL (#PCDATA)>
- <!ELEMENT SpecialInterests (Interest+)>    **<!-- ETC -->**

## XML WG Participants Sort

- Different sorts may extract different numbers of columns, as well as different ordering.

## Server-side vs. Client-side

- Server-side:** XSLT transformations executed on the Web server, either in realtime or at pre-defined time. Browser is sent (X)HTML.**
- Pro: Works in all browsers since XSLT is server-side.
- Con: If done in realtime, heavy server load for popular sites.
- Client-side:** Browser is sent *****XML***** which references an XSLT stylesheet. The XSLT transformation is executed by the browser in realtime.**
- Pro: Lightens server load.
- Potential Pro: Multiple sorts (in-place DOM manipulation) without additional server requests.
- Con: Built-in XSLT processor required. Only works in IE 5.5+ and NS 6+. DOM manipulation requires latest browsers.

**UPDATED**

## Client-Side Sorting: xml.house.gov

*Very impressive in IE 6.*
- Looks nice in Moz 1.0 and NS 7 but sort doesn't work due to Microsoft-specific hooks.
- Doesn't work at all in NS 6.2.3.
- Doesn’t work in Moz 1.1? [TBD]

## Client-Side: Browser Detection

**Accessibility**: If browser detection is added, different pages can be served as needed. IE users can experience the in-place sort; NS users can view an alternative.

## Client-Side Sorting: IE Only

## Client-Side Sorting: JavaScript

- By Manos Batsis

## Client-Side: Cross-Browser XML API

**API that models Microsoft's ****XMLDocument**** and ****XSLDocument**** so that in-place sorting will work with Netscape 6 & 7 and Mozilla 1.x, as well as in IE.**
**DOMDocument**** implementation; emulates IE extensions (i.e., "****xml"**** property, ****transformNode()****, ****transformNodeToObject()****, etc.) in NS/Moz. **
**Implemented entirely in JavaScript; requires detailed knowledge of IE and NS browser internals.**
**Developers simply use the JavaScript API.**
**Under development (****XMLHTTP****); snapshot demo.**

- By Manos Batsis

**UPDATED**

## Cross-Browser XML API

**ADDED**

- By Manos Batsis

## Multi-Page Sorting of Brainstorming Ideas

**Start with Owen Ambur's HTML table as input.**
**Convert to XHTML.**
**Create a simple XML vocabulary (with DTD) to better describe the tabular data.**
**Convert the XHTML to custom XML using XSLT.**
**Use one XSLT stylesheet per sort criterion to sort XML data in several ways, displaying the results as HTML. [Next step: re-use]**

- Brainstorming Sort Demo

## Brainstorming: Original HTML

## Brainstorming: XML Data Rep.

## Brainstorming: In XML Spy

## Sorting of Brainstorming Ideas

## Sorting of Brainstorming Ideas

- Client: 4.23 sec.
- Server: 1.43 sec.

## Recommendations for XML.Gov

**Convert key pages to XHTML to facilitate future transformations (data extraction). Brand with W3C Valid XHTML 1.0 logo. Re-validate after editing.**
**Consider using HTML editors that support XHTML, Tidy, and validation (e.g., Macromedia HomeSite, XML Spy, etc.).**
**If data is specialized and/or reusable, write a DTD or XML Schema to describe data, mainly to clarify what information is required, optional, constrained to a certain data type, etc.**

## Recommendations for XML.Gov [cont.]

**Handle browser differences **
- Detect browser vendor/version (JavaScript)
- Provide alternatives (client-side, server-side, alternate pages)
- Accessibility always matters.
**Use XSLT for server-side and eventually client-side processing.**

## eee

- Ken Sall Consulting

**301-725-2859**
**www.KenSall.com**

**One World... One Web... Many Solutions.**