Proposal number : ? Proposal title: Standardizing the HTML produced by GeoNetwork

Date	2008/07/21
Contact(s)	simonp
Last edited	Timestamp
Status	draft, being discussed, in progress
Assigned to release	Release number, to be determined
Resources	Simon Pigot, Grant Mckenzie and ?

Overview

"You should see our html producing xslts!" - a GeoNetwork developer at the Bolsena meeting :-)

GeoNetwork currently produces HTML that conforms to a variety of standards eg 4.01 and earlier, xhtml and a number of personal interpretations of these :-). A single html standard needs to be adopted, a document type inserted in our html and, most importantly, a testing framework needs to be adopted which will allow developers to validate the html they produce to ensure that it conforms with the html standard we adopt.

Why is this important? If you don't give guidance to a browser on what type of html to expect and provide correct html then strange problems can occur which are both difficult and time consuming to find and fix. An example is the height="100%" attribute on some html tables. Internet exploder will (occasionally) fail to render tables with this attribute, whilst Firefox ignores it.

Bolsena meeting agreed top adopt HTML 4.01 strict but did not find a testing framework for developers to use (manual methods were suggested which are too time consuming). ...

Proposal Type

• Type: changes in GUI, configuration and testing
• App: GeoNetwork and !Intermap
• Module: XSLT presentation layer, configuration layer

Links

• Documents:
• Email discussions:
• Other wiki discussions: None as yet.

Voting History

• Not submitted for voting yet.

---

Motivations

See overview above. Motivation of this proposal is to find a validation framework that developers can easily use to ensure compliance.

Proposal

Implement [JTidyServletFilter ​http://jtidy.sourceforge.net/multiproject/jtidyservlet/filter.html] and [JTidyServlet ​http://jtidy.sourceforge.net/multiproject/jtidyservlet/] to provide a simple mechanism for developers to validate the html their functions produce.

The proposal will add the following:

1. The following lines to main.xsl (and later to edit.xsl and modal.xsl):

<xsl:output method="html" omit-xml-declaration="yes" doctype-public="-//W3C//DTD HTML 4.01//EN" doctype-system="http://www.w3.org/TR/html4/strict.dtd" indent="yes"/>

and in the footer (next to the unicode and browse happy images), displayed (not surprisingly) at the foot of the page:

<xsl:comment>jtidy:validationImage</xsl:comment>

This comment is used by the JTidy filter to add a link to the JTidy servlet to show the validation report.

2. The following configuration lines to (web/geonetwork/WEB-INF/web.xml and web/intermap/WEB-INF/web.xml) support the filter as follows:

  <filter>
    <filter-name>JTidyFilter</filter-name>
    <filter-class>org.w3c.tidy.servlet.filter.JTidyFilter</filter-class>
    <init-param>
      <param-name>commentsSubst</param-name>
      <param-value>true</param-value>
    </init-param>
  </filter>

  <servlet>
    <servlet-name>JTidyServlet</servlet-name>
    <servlet-class>org.w3c.tidy.servlet.TidyServlet</servlet-class>
  </servlet>

  <servlet-mapping>
    <servlet-name>JTidyServlet</servlet-name>
    <url-pattern>/JTidy</url-pattern>
  </servlet-mapping>

and the following jars to web/geonetwork/WEB-INF/lib and web/intermap/WEB-INF/lib:

jtidy-r8-SNAPSHOT.jar
jtidyservlet-r8-SNAPSHOT.jar

The filter and servlet need only be active during development. The lines in the web.xml files should be disabled/removed and the jars removed when building the installer.

3. To add a service to the filter the following steps need to be taken add a mapping to apply the filter to the service you are testing (in the appropriate web.xml file):

  <filter-mapping>
    <filter-name>JTidyFilter</filter-name>
    <url-pattern>*.home</url-pattern>
  </filter-mapping>

This example mapping will apply the filter to the geonetwork service ending in .home (eg. /geonetwork/srv/en/main.home which is the geonetwork main page if this filter mapping was added to web/geonetwork/WEB-INF/web.xml).

When you run the service that renders this page, an icon will appear at this place which can be clicked on to get the report output showing the problems with this page. An example for the main page in geonetwork is as follows:

Clicking on the html icon with the exclamation mark (in your rendered page) will bring up a report on the validity of the html produced by your xslt which might look something like this:

JTidy Messages for request:1 processed in 1475 milliseconds
Validation Errors 0
Validation Warnings 26
Line 291, 	column 31 	WARNING: 	<td> attribute "width" has invalid value "224px"
Line 292, 	column 34 	WARNING: 	<table> attribute "width" has invalid value "224px"
Line 297, 	column 46 	WARNING: 	<table> attribute "width" has invalid value "211px"
Line 299, 	column 100 	WARNING: 	<img> attribute "height" has invalid value "246px"
Line 299, 	column 100 	WARNING: 	<img> attribute "width" has invalid value "9px"
Line 299, 	column 100 	WARNING: 	<img> lacks "alt" attribute
Line 313, 	column 52 	WARNING: 	<td> attribute "width" has invalid value "202px"
Line 317, 	column 61 	WARNING: 	<td> attribute "width" has invalid value "122px"
Line 326, 	column 154 	WARNING: 	<img> attribute "height" has invalid value "100px"
Line 326, 	column 154 	WARNING: 	<img> attribute "width" has invalid value "200px"
Line 326, 	column 154 	WARNING: 	<img> lacks "alt" attribute
Line 331, 	column 156 	WARNING: 	<img> lacks "alt" attribute
Line 631, 	column 55 	WARNING: 	<table> attribute "width" has invalid value "211px"
Line 633, 	column 61 	WARNING: 	<td> attribute "width" has invalid value "30%"
Line 633, 	column 61 	WARNING: 	<td> attribute "height" has invalid value "29px"
Line 634, 	column 61 	WARNING: 	<td> attribute "width" has invalid value "36px"
Line 634, 	column 111 	WARNING: 	<img> attribute "width" has invalid value "36px"
Line 634, 	column 111 	WARNING: 	<img> lacks "alt" attribute
Line 635, 	column 61 	WARNING: 	<td> attribute "width" has invalid value "13px"
Line 635, 	column 111 	WARNING: 	<img> attribute "width" has invalid value "13px"
Line 635, 	column 111 	WARNING: 	<img> lacks "alt" attribute
Line 637, 	column 61 	WARNING: 	<td> attribute "width" has invalid value "12px"
Line 637, 	column 111 	WARNING: 	<img> attribute "width" has invalid value "12px"
Line 637, 	column 111 	WARNING: 	<img> lacks "alt" attribute
Line 645, 	column 288 	WARNING: 	<img> lacks "alt" attribute
Line 686, 	column 31 	WARNING: 	<td> attribute "width" has invalid value "100%"

Below is the source used for this validation:

   1 <!DOCTYPE html
   2   PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
   3 <html>
   4    <head>
   5       <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   6       <title>BlueNet MEST Version 1.1 (10/06/08)</title>

......................
(and so on)

It's up to you to then fix the problems with your html.

Backwards Compatibility Issues

None known.

Risks

None known?

Participants

Simon Pigot - developed validation report process described above. Grant Mckenzie - has volunteered to do some work on making the existing pages conformant.