1. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. XSLT and XHTML Demos for XML.Gov Ken Sall Consulting Ken Sall, Principal September 18, 2002

2. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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 PageDemo Home Page: http://kensall.com/gov

3. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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.

4. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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.).W3C HTML Validation Service  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

5. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Sorting Government XML Efforts  Begin with HTML version.HTML version  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

6. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Government XML Efforts: XHTML

7. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Sorting Government XML Efforts XHTML "mined" to extract tabular data. Links generated from XML using XSLT.

8. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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

9. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. DTD for XML WG Participants <!ATTLIST Participants meetingDate CDATA #IMPLIED meetingName CDATA #IMPLIED meetingLocation CDATA #IMPLIED > <!ATTLIST Organization detail CDATA #IMPLIED type (gov | com | edu | mil | other) "gov">

10. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. XML WG Participants Sort Different sorts may extract different numbers of columns, as well as different ordering.

11. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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

12. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Client-Side Sorting: xml.house.gov 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] 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]

13. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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.

14. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Client-Side Sorting: IE OnlyIE Only

15. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Client-Side Sorting: JavaScriptJavaScript By Manos BatsisManos Batsis By Manos BatsisManos Batsis

16. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 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.snapshot demo By Manos BatsisManos Batsis By Manos BatsisManos Batsis UPDATED

17. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Cross-Browser XML API ADDED By Manos BatsisManos Batsis By Manos BatsisManos Batsis

18. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Multi-Page Sorting of Brainstorming Ideas  Start with Owen Ambur's HTML table as input.HTML table  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

19. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Brainstorming: Original HTML

20. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Brainstorming: XML Data Rep.

21. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Brainstorming: In XML Spy

22. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Sorting of Brainstorming Ideas

23. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Sorting of Brainstorming Ideas Client: 4.23 sec. Server: 1.43 sec. Client: 4.23 sec. Server: 1.43 sec.

24. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Recommendations for XML.Gov 1. Convert key pages to XHTML to facilitate future transformations (data extraction). Brand with W3C Valid XHTML 1.0 logo. Re- validate after editing. 2. Consider using HTML editors that support XHTML, Tidy, and validation (e.g., Macromedia HomeSite, XML Spy, etc.). 3. 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.

25. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. Recommendations for XML.Gov [cont.] 4.Handle browser differences a)Detect browser vendor/version (JavaScript) b)Provide alternatives (client-side, server-side, alternate pages) c)Accessibility always matters. 5. Use XSLT for server-side and eventually client-side processing.

26. Copyright © 2002. Kenneth B. Sall. All Rights Reserved. 301-725-2859 www.KenSall.com eee One World… One Web… Many Solutions.