= 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 to 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''': [http://jtidy.sourceforge.net/multiproject/jtidyservlet/filter.html JTidyServletFilter] and [http://jtidy.sourceforge.net/multiproject/jtidyservlet/ JTidyServlet] documentation
 * '''Email discussions''':
 * '''Other wiki discussions''': [wiki:UnitTests Unit Testing Proposal]

=== 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 [http://jtidy.sourceforge.net/multiproject/jtidyservlet/filter.html JTidyServletFilter] and [http://jtidy.sourceforge.net/multiproject/jtidyservlet/ 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) a tag that the filter will use to show an icon that will provide access to the report:

{{{
<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 next to the unicode and browse happy images which (if there are warnings or errors in your html) 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:

[[Image(htmlerrors.png,align=center)]]

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.

=== Extensions for Unit Testing Proposal ===

The error reports are stored in memory by the JTidyServlet. This repository could be adapted to dump out reports of pages for use by the Unit Testing framework.  

=== Backwards Compatibility Issues ===

It is not yet known what effect the introduction of a document type (4.01 strict) will have on the way in which our current html is interpreted by the browsers. Firefox doesn't seem to mind from a cursory examination so far but the effect on Exploder is unknown.

== Risks ==

None known?

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