Recomanació W3C de la directriu.
Per tal de fer accessible el contingut visual i auditiu a aquells usuaris amb alguna discapacitat
visual o auditiva o als terminals amb alguna restricció gràfica o sonora que siguen incapassos de visualitzar
imatges, vídeos o sons és necessari donar una alternativa equivalent a aquest contingut en forma de text.
Dels diferents elements de que disposa DocBook per incloure al document imatges, vídeos o sons, el que
respecta aquesta directriu és l'element <mediaobject>
, que està dissenyat per incloure una
col·lecció d'elements que defineixen representacions en diferents formats del mateix contingut, incloent
l'element <textobject>
que és el que donaria la representació alternativa en forma de text.
S'ha d'evitar l'ús d'altres elements com per exemple <graphic>
que encara que també
serveix per incloure una imatge, no disposa de cap atribut o element dins d'ell que complisca amb la
directriu 1 donant una alternativa en forma de text a la imatge, a més aquest element desapareix en la
versió 5 de DocBook.
Aixi doncs s'ha d'utilitzar <mediaobject>
o <mediaobjectco>
per
a incloure al document qualsevol element multimèdia, omplint l'element <textobject>
de manera adecuada.
En l'exemple següent podem veure la utilització d'aquest element:
Exemple 6.2. Codi DocBook accessible per a la inclusió d'una imatge
<?xml version="1.0"?> <!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.5/docbookx.dtd"> <article id="exemple" lang="ca"> <figure><title>Exemple del Element MediaObject</title> <mediaobject> <imageobject> <imagedata fileref="imatges/emc2.png"/> </imageobject> <textobject> <phrase>Aquest text es una representacio alternativa en forma de text de la imatge anterior: e = mc2</phrase> </textobject> </mediaobject> </figure> </article>
Que donaria com a resultat de la transformació el següent codi HTML:
<div class="mediaobject"> <img src="imatges/emc2.png" alt="Aquest text es una representacio alternativa en forma de text de la imatge anterior: e = mc2"> </div>
Com es pot comprovar l'element <img>
conté l'atribut alt
amb l'alternativa
en forma de text per a la imatge.
Segons la directriu 1, s'ha d'evitar utilitzar imatges per a reemplaçar text, per tant, les úniques imatges
que deu d'haver al codi HTML generat han de ser les que s'especifiquen al document DocBook. Les fulles d'estil poden
generar la inclusió d'imatges, com per exemple per a les capçaleres de navegació, on crea imatges que representen
fletxes per als enllaços anterior, següent etc... Mitjançant l'ús de paràmetres es pot evitar la inclusió
d'imatges per part de les fulles d'estil. De totes maneres, les imatges generades tenen correctament
l'atribut alt
amb la representació alternativa de la imatge, però l'objectiu és que
el codi siga com més accessible millor, deixant tot el referent al disseny i maquetació de la web per
a les fulles d'estil CSS.
Els paràmetres afectats i els valors per tal que no generen imatges son:
admon.graphics
: valor 0. Deshabilita la inclusió
de imatges per als elements <tip>
, <warning>
, <caution>
i <important>
.
callout.graphics
: valor 0. Deshabilita la inclusió
de gràfics als elements <callout>
i relacionats (les referències numèriques per als
peus de pàgina, exemples etc...).
navig.graphics
: valor 0. Per a que no cree imatges
a les capçaleres de navegació que genera al utilitzar la fulla d'estil chunk.xsl
.
Per a una descripció dels elements de DocBook veure la documentació oficial a http://www.docbook.org/tdg/en/html/part2.html [NWal] i [NWal5]
Recomanació W3C de la directriu.
No hi ha manera d'especificar el color en DocBook, ja que aquest aspecte és referent a l'aspecte. No afecta doncs al codi en DocBook. El codi HTML és molt simple i no es genera cap referència al color, és a la fulla d'estil CSS on s'ha de tindre en compte aquest factor.
Recomanació W3C de la directriu.
No l'afecta.
Les fulles d'estil que transformen a HTML etiqueten tots els elements de DocBook amb etiquetes HTML
de tipo <div>
amb l'atribut class
amb el nom de l'etiqueta en DocBook.
D'aquesta manera el codi resultant compta amb l'etiquetatge suficient per a poder controlar quasi
tots els aspectes de la presentació amb la fulls d'estil CSS.
Hi ha alguns paràmetres que ajuden a millorar la manera en que s'etiqueta el codi HTML:
html.stylesheet
: valor estil.css. Nom de
la fulla d'estil CSS que s'aplica a l'arxiu HTML generat.
html.stylesheet.type
: valor text/css. Tipus de
la fulla d'estil que associa a l'arxiu HTML generat, en aquest cas CSS.
para|emphasis|entry|phrase.propagate.style
: valor 1.
Passa el valor de l'atribut role
dels elements DocBook com a atribut class
en
l'element <div>
de HTML, de manera que podem donar diferent aspecte als mateixos
elements de DocBook segons el valor de l'atribut role
.
css.decoration
: valor 0. Deshabilita l'us de la
etiqueta <style>
en el codi HTMl, ja que volem tindre tot el referent a disseny i
maquetació separat en l'arxiu CSS.
make.valid.html
: valor 1. Procura generar un
codi HTML vàlid. Per exemple etiqueta amb <div>
els elements <para>
de DocBook (a més de transformar-los a l'element <p>
de HTML).
html.cleanup
: valor 1. De manera similar a
l'anterior paràmetre, intenta que el codi generat siga vàlid, i millora l'etiquetatge. La diferència
és que aquest necessita que el processador XSLT suporte les extensions EXSLT (Saxon i Xalan les
suporten).
generate.id.attributes
: valor 1. Si l'element
DocBook té l'atribut id
, aquest atribut serà l'atribut id
de l'etiqueta
<div>
corresponent en HTML.
show.revisionflag
: valor 1. Etiqueta amb
<div> o <span>
les elements DocBook amb atributs d'aquest tipus, permetent
a la fulla d'estil CSS poder-los donar estil.
chunker.output.doctype-public
: valor
-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd
.
Associar el DTD per al fitxer HTML generat, en la declaració DOCTYPE
, el valor
de l'identificador PUBLIC
.
La plantilla encarregada de crear l'etiqueta <body>
al codi HTML pot incloure
atributs com el tipus de lletra, el color de fons i altres segons les paràmetres definits per a tal
efecte. Per tal d'evitar-ho, ja que serà la fulla d'estil CSS l'encarregada de definir aquests trets
del disseny, només hem d'incloure aquesta plantilla a la capa de personalització i fer que estiga buida,
de manera que només generarà l'etiqueta <body>
sense cap atribut:
<xsl:template name="body.attributes"> </xsl:template>
Recomanació W3C de la directriu.
En la capçalera de definició DOCTYPE
del document DocBook es pot definir el llenguatge
utilitzat per defecte, amb el codi del IETF RFC 1766. Aquest serà el llenguatge per defecte
si no s'especifica cap altre al llarg del document. Es pot especificar un llenguatge
diferent al de per defecte mitjançant l'atribut lang
, present a tots els elements.
En la transformació, els elements de DocBook són etiquetats en HTML amb l'element
<div>
, que accepta l'atribut lang
en cas de que estiga present en l'element a
transformar complint d'aquesta manera amb la directriu 4
punt de verificació 4.1.
Ningun.
Ninguna.
Recomanació W3C de la directriu.
Aquesta directriu mereix una atenció especial, ja que el concepte d'accessibilitat pot ser molt subjectiu de vegades, no es pot comprovar de manera automàtica per algun software i depèn de l'autor, del que considere què és accessible i què no.
Les taules deuen d'utilitzar-se solament per a la representació de la informació tabular, és a dir, taules de dades. Son taules on la informació representada té significat pel context on es troba, la fila i la columna aporten informació a l'element en qüestió, poguent identificar la informació en comú que tenen tots els elements d'una determinada fila o columna. No obstant hi ha ocasions en que la informació, encara que no siga tabular, es presenta d'una manera més clara si va en taules, llavors diguem que s'utilitzen taules per a maquetació de la informació. Aquest ús de taules per a maquetació és delicat, ja que els usuaris que utilitzen lectors de pantalla poden malinterpretar la informació degut a que els lectors de pantalla llegeixen línia per línia. Els creadors de contingut han de restringir doncs l'ús de taules a la informació tabular i només usar-les per a maquetar si és estrictament necessari i la taula creada és fàcilment comprensible quan es linealitza. El procés de linealitzar una taula consisteix en posar en paràgrafs el contingut de les cel·les de manera seqüencial.
DocBook té l'element <table>
i <informaltable>
per tal de crear taules, amb una sintaxi i semàntica equivalents a les de l'HTML,
per tant disposa de tots els elements necessaris per a crear taules que es transformen
correctament, generant un codi accessible. Consultar aquesta directriu en l'apèndix
per informació més detallada sobre la creació de taules accessibles.
Hi ha molts elements de DocBook que generen taules al ser transformats. Taules que són accessibles si l'element DocBook té l'estructura correcta:
<revhistory>
: història de les diferents revisions de un document.
Conté informació sobre les revisions que s'han fet d'un document: el codi,
la data de realització, l'autor i una descripció de la revisió.
Podem veure un exemple a continuació:
Exemple 6.3. Ús de l'element <revhistory>
i la seva transformació.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.4/docbookx.dtd"> <article id="exemple3" lang="ca"> <title>Exemple de l'us de l'element RevHistory</title> <revhistory> <revision> <revnumber>0.91</revnumber> <date>11 Dec 1996</date> <authorinitials>Adolf B.</authorinitials> <revremark>Correcció d'errors</revremark> </revision> <revision> <revnumber>0.90</revnumber> <date>30 Nov 1996</date> <authorinitials>Adolf B.</authorinitials> <revremark>Revisió final</revremark> </revision> </revhistory> </article>
En la transformació a HTML, es crea una cel·la capçalera <TH>
amb el títol Historial de Revisions complint amb el punt de
verificació 5.1. Els lectors de pantalla llegeixen les taules línia a línia,
quedant la informació de manera clara: la primera línia contindria el
número de revisió, la data i les inicials de l'autor i la segon línia
contindria una descripció de la revisió realitzada.
<table border="0" width="100%" summary="Revision history"> <tr> <th align="left" valign="top" colspan="3"> <b>Historial de Revisions</b> </th> </tr> <tr> <td align="left">Revision 0.91</td> <td align="left">11 Dec 1996</td> <td align="left">Adolf B.</td> </tr> <tr> <td align="left" colspan="3">Correcció d'errors</td> </tr> <tr> <td align="left">Revision 0.90</td> <td align="left">30 Nov 1996</td> <td align="left">Adolf B.</td> </tr> <tr> <td align="left" colspan="3">Revisió final</td> </tr> </table>
<productionset>
si s'utilitza el mòdul per a definir gramàtiques amb el format
EBNF
. La taula generada és clarament una taula de dades, amb cinc columnes:
el nombre de la producció, el no terminal que produeix, el símbol emprat per a produir
(es modificable mitjançant el paràmetre ebnf.assignment
de les fulles d'estil XSL),
la producció que realitza i alguna anotació important de la producció.
Per tant hem d'assegurar-nos que la taula generada és accessible.
En l'exemple següent podem veure l'ús d'aquest element per a escriure una gramàtica
senzilla en notació EBNF.
Exemple 6.4. Ús de l'element <productionset>
amb notació EBNF i la seva transformació.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.4/docbookx.dtd"> <article id="exemple4" lang="ca"> <title>Exemple de l'element ProductionSet aplicat a produccions EBNF</title> <simplesect><title>Gramàtica EBNF</title> <productionset><title>Expresions Aritmètiques</title> <production id="ebnf.expression"> <lhs>Expresió</lhs> <rhs><nonterminal def="#ebnf.arith">ExpresióArit</nonterminal> | <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> </rhs> </production> <production id="ebnf.arith"> <lhs>ArithExpression</lhs> <rhs><nonterminal def="#ebnf.expression">Expresió</nonterminal> '+' <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> | <nonterminal def="#ebnf.expression">Expresió</nonterminal> '-' <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> </rhs> </production> <production id="ebnf.mult"> <lhs>MultExpression</lhs> <rhs><nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> '*' <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> | <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> '/' <nonterminal def="#ebnf.mult">ExpresióMult</nonterminal> | <nonterminal def="#ebnf.number">Nombre</nonterminal> </rhs> <constraint linkend="div0"/> </production> <production id="ebnf.number"> <lhs>Nombre</lhs> <rhs>[0-9]+</rhs> </production> </productionset> <constraintdef id="div0"> <title>Divisió per Zero</title> <para>Divisió per zero és un error.</para> </constraintdef> </simplesect> </article>
A continuació les taules resultants de la seva transformació, que com podem comprovar no compleixen amb el punt de comprovació 5.1: utilitzar capçaleres per a les columnes de la taula, ja que si que ho fa en la primera taula, però no en la segon. Caldrà doncs modificar aquesta plantilla.
<table width="100%" cellpadding="5" class="productionset" summary="EBNF for Expresions Aritmètiques"> <tr> <th align="left" valign="top" class="productionset"> Expresions Aritmètiques</th> </tr> <tr> <td> <table border="0" width="99%" cellpadding="0" class="productionset" summary="EBNF productions"> <tr> <td align="left" valign="top" width="3%"> [1]</td> <td align="right" valign="top" width="10%"> <a name="ebnf.expression"></a>Expresió</td> <td valign="top" width="5%" align="center"> ::=</td> <td valign="top" width="52%"> <a href="#ebnf.arith">ExpresióArit</a> | <a href="#ebnf.mult">ExpresióMult</a></td> <td align="left" valign="top" width="30%"> </td> </tr> .... </table> </td> </tr> </table>
<simplelist>
: element per a representar una llista simple,
segons el valor dels atributs type
i columns
,
es transformara d'una manera o altra. L'atribut type
pot tenir els següents valors: inline, vert i horiz.
Amb el valor inline no hi ha problema, però
els altres dos generen taules per a ordenar els elements de la llista en tantes
columnes com indica l'atribut columns
de manera vertical o horitzontal.
Les taules generades no tenen cel·les de capçalera <th>
, per tant no
compleixen amb el punt 5.1. Com que tots els membres de la llista són del mateix tipus
(de no ser així seria convenient utilitzar una taula en compte de una llista simple)
l'únic objectiu de presentar els elements de manera horitzontal o vertical és la maquetació,
per tant és convenient evitar aquesta presentació. De qualsevol manera, si es vol
presentar la informació de la llista de manera tabulada la millor opció des de el punt
de vista de l'accessibilitat és emprar un element <table>
posant com a capçalera <th>
el títol de la llista.
<segmentedlist>
: llista de grups d'elements. Es pot representar
tant com a taula com a llista depenent del valor del paràmetre segmentedlist.as.table
.
Si es vol representar com a taula, és necessari utilitzar els elements
<segtitle> <seglistitem> i <seg>
de manera adecuada tal com es pot veure
al següent exemple.
Exemple 6.5. Utilització de l'element <segmentedlist>
i la seva transformació.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.5/docbookx.dtd"> <article id="exemple6" lang="ca"> <para> <segmentedlist> <title>Fruiters i fruita que produeixen</title> <segtitle>Arbre</segtitle> <segtitle>Fruit</segtitle> <seglistitem> <seg>Taronger</seg><seg>Taronja</seg> </seglistitem> <seglistitem> <seg>Alvocat</seg><seg>Alvocat</seg> </seglistitem> <seglistitem> <seg>Palmera</seg><seg>Dàtil</seg> </seglistitem> </segmentedlist> </para> </article>
Podem veure com la taula generada és accessible, separant les files de capçalera de les del cos amb les
etiquetes <thead>
i <tbody>
i marcant les cel·les de
capçalera amb <th>
:
<div class="segmentedlist"> <div class="title"><strong> <span class="title"> Fruiters i fruita que produeixen </span></strong></div> <table border="0"> <thead> <tr class="segtitle"> <th>Arbre</th> <th>Fruit</th> </tr> </thead> <tbody> <tr class="seglistitem"> <td class="seg">Taronger</td> <td class="seg">Taronja</td> </tr> <tr class="seglistitem"> <td class="seg">Alvocat</td> <td class="seg">Alvocat</td> </tr> <tr class="seglistitem"> <td class="seg">Palmera</td> <td class="seg">Dàtil</td> </tr> </tbody> </table> </div>
<qandaset>
: per a agrupar preguntes i respostes.
Amb l'element <quandadiv>
engloba un grup d'elements
<question>
i <answer>
. Genera una taula simple,
cada pregunta o resposta correspon a una fila de la taula amb dos columnes,
la primera per a la numeració o identificació de la pregunta o resposta i la segona
per al text corresponent, per tant al serialitzar la taula queda totalment comprensible.
Aquest és un cas en que la informació de les taules no és tabular,
però la seva representació maquetada amb una taula clarifica la comprensió de la informació representada.
Una possible millora en l'accessibilitat de la taula generada, seria modificar
la plantilla per a incloure les capçaleres <th>
, que correspondrien
al títol de cada grup de preguntes, pel que cada element <quandadiv>
hauria de tindre un element <title
, que seria el candidat per a capçalera de taula.
En l'exemple a continuació es pot comprovar l'ús d'aquest element i la taula que genera:
Exemple 6.6. Ús de l'element <qandaset>
i la seva transformació
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.4/docbookx.dtd"> <article id="exemple7" lang="ca"> <title>Exemple de l'ús de l'element quandaset</title> <qandaset defaultlabel='number'> <qandadiv> <title>Parelles de Pregunta-Resposta</title> <qandaentry> <question> <para>Pregunta A?</para> </question> <answer> <para>Resposta A.</para> </answer> </qandaentry> <qandaentry> <question> <para>Pregunta sense resposta B?</para> </question> </qandaentry> <qandaentry> <question> <para>Pregunta C?</para> </question> <answer> <para>Resposta valida C1.</para> </answer> <answer> <para>Resposta valida C2.</para> </answer> </qandaentry> </qandadiv> </article>
Taula que genera al ser transformat:
<table border="0" summary="Q and A Set"> <tbody> <tr class="qandadiv"> <td align="left" valign="top" colspan="2"> <h3 class="title"><a name="d0e5"></a>1. Parelles de Pregunta-Resposta </h3> </td> </tr> <tr class="toc"> <td align="left" valign="top" colspan="2"> <dl> <dt>1.1. <a href="#d0e8">Pregunta A?</a></dt> <dt>1.2. <a href="#d0e15">Pregunta sense resposta B?</a></dt> <dt>1.3. <a href="#d0e19">Pregunta C?</a></dt> </dl> </td> </tr> <tr class="question"> <td align="left" valign="top"> <a name="d0e8"></a><a name="d0e9"></a><b>1.1.</b></td> <td align="left" valign="top"> <p>Pregunta A?</p></td> </tr> <tr class="answer"> <td align="left" valign="top"></td> <td align="left" valign="top"> <p>Resposta A.</p></td> </tr> <tr class="question"> <td align="left" valign="top"> <a name="d0e15"></a><a name="d0e16"></a><b>1.2.</b></td> <td align="left" valign="top"> <p>Pregunta sense resposta B?</p> </td> </tr> <tr class="question"> <td align="left" valign="top"> <a name="d0e19"></a><a name="d0e20"></a><b>1.3.</b></td> <td align="left" valign="top"> <p>Pregunta C?</p></td> </tr> <tr class="answer"> <td align="left" valign="top"></td> <td align="left" valign="top"> <p>Resposta valida C1.</p></td> </tr> <tr class="answer"> <td align="left" valign="top"></td> <td align="left" valign="top"> <p>Resposta valida C2.</p></td> </tr> </tbody> </table>
<funcsynopsis
: per a definir prototips de funcions.
És un altre cas de taula de maquetació on la informació queda més clara,
ja que cada fila de la taula correspòn a un paràmetre de la funció i les
cel·les restants queden buides amb l'única funció de tabular la cel·la següent.
Com es pot veure en l'exemple següent, aquesta taula resultant és completament
comprensible quan es serialitza, ja que cada cel·la només té una línia de text
i es respecta l'ordre natural de serialització (esquerra-dreta i dalt-baix).
Exemple 6.7. Ús de l'element <funcsynopsis>
i la seva transformació.
<?xml version="1.0" encoding="iso-8859-1"?> <!DOCTYPE article SYSTEM "file:///C:/docbook-dtd/xml/4.5/docbookx.dtd"> <article id="exemple8" lang="ca"> <title>Exemple d'ús de l'element FUNCSYNOPSIS.</title> <para>Funció qsort amb estil ansi</para> <funcsynopsis> <funcprototype> <funcdef>void <function>qsort</function></funcdef> <paramdef>void *<parameter>dataptr</parameter>[]</paramdef> <paramdef>int <parameter>left</parameter></paramdef> <paramdef>int <parameter>right</parameter></paramdef> <paramdef>int <parameter>(* comp)</parameter> <funcparams>void *, void *</funcparams></paramdef> </funcprototype> </funcsynopsis> </article>
La transformació genera la següent taula:
<table border="0" summary="Function synopsis"> <tr> <td><code class="funcdef">void <b class="fsfunc">qsort</b>(</code></td> <td> </td> <td><var class="pdparam">dataptr</var>,</td> </tr> <tr> <td> </td> <td> </td> <td><var class="pdparam">dataptr</var>, </td> </tr> <tr> <td> </td> <td> </td> <td><var class="pdparam">left</var>, </td> </tr> <tr> <td> </td> <td> </td> <td><var class="pdparam">right</var>, </td> </tr> <tr> <td> </td> <td> </td> <td><var class="pdparam">(* comp)</var> <code>(</code>void *, void *<code>))</code>; </td> </tr> </table>
Hi ha molts elements de DocBook que al ser transformats depenen d'algun paràmetre per a generar taules o no. Aquestes taules són de maquetació, que s'han d'evitar, però la majoria generen taules simples que es poden linealitzar sense cap problema. Com que l'objectiu és generar un codi HTML el més accessible que es puga, s'evitarà generar taules d'aquest tipus.
Els paràmetres afectats son:
admon.graphics
: valor 0. Aquest paràmetre
ja s'ha utilitzat per a la directriu 1. En cas d'estar activat utilitza taules per a maquetar
la posició de la imatge que genera.
make.graphics.viewport
: valor 0. Utilitza
les taules HTML per a definir la zona visible d'una imatge, cosa que no permet l'element
<img>
de HTML, però que es pot aconseguir amb CSS, mitjançant els
atributs width
, height
per a definir la mida d'una caixa
contenidora d'un determinat element i l'atribut overflow
que indica que
fer amb la part de l'element que queda fora de la caixa què el conté.
variablelist.as.table
: valor 0. Evita
l'ús de taules HTML per a representar aquest element.
segmentedlist.as.table
: valor 0. Similar
a l'anterior.
funcsynopsis.tabular.threshold
: valor 0.
Evita l'ús de taules per a tabular l'aspecte d'aquest element.
suppres.navigation
: valor 0. Si utilitzem
les fulles d'estil que generen varis arxius HTML, crea unes capçaleres de navegació molt útils
per a recórrer el document. Aquestes capçaleres estàn maquetades amb taules. Si li donem valor
distint de zero a aquest paràmetre deshabilita la creació d'aquestes capçaleres i per tant
les taules, augmentant l'accessibilitat, però al mateix temps no disposem dels enllaços
per a navegar dins del document que faciliten en gran manera l'accessibilitat. Per tant
donarem valor 0 i es modificarà la plantilla per tal que no genere taules i siga més
accessible encara que la taula generada és fàcilment linealitzable.
Encara que algunes de les taules que les fulles d'estil generen es poden considerar accessibles, és millor evitar-les i donar un aspecte similar amb les fulles d'estil CSS. A continuació les plantilles que es modifiquen:
<xsl:template match="header.navigation">
: la plantilla que genera la
capçalera de navegació maquetada amb taules.
Exemple 6.8. Modificació de la plantilla que genera la capçalera de navegació.
<xsl:template name="header.navigation"> <xsl:param name="prev" select="/foo"/> <xsl:param name="next" select="/foo"/> <xsl:param name="nav.context"/> <xsl:variable name="home" select="/*[1]"/> <xsl:variable name="up" select="parent::*"/> <xsl:variable name="row1" select="$navig.showtitles != 0"/> <xsl:variable name="row2" select="count($prev) > 0 or (count($up) > 0 and generate-id($up) != generate-id($home) and $navig.showtitles != 0) or count($next) > 0"/> <xsl:if test="$suppress.navigation = '0' and $suppress.header.navigation = '0'"> <div class="navheader"> <xsl:if test="$row1 or $row2"> <xsl:if test="$row1"> <div class="navheader_title"> <xsl:apply-templates select="." mode="object.title.markup"/> </div> </xsl:if> <xsl:if test="$row2"> <xsl:choose> <xsl:when test="count($up) > 0 and generate-id($up) != generate-id($home) and $navig.showtitles != 0"> <div class="navheader_titleup"> <xsl:apply-templates select="$up" mode="object.title.markup"/> </div> </xsl:when> </xsl:choose> <div class="navheader_links"> <xsl:if test="count($prev)>0"> <span class="navheader_prev"> <a accesskey="p"> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="$prev"/> </xsl:call-template> </xsl:attribute> <xsl:call-template name="navig.content"> <xsl:with-param name="direction" select="'prev'"/> </xsl:call-template> </a> </span> </xsl:if> <xsl:if test="count($prev)>0"> <xsl:if test="count($next)>0"> <span class="sep"> <xsl:text> | </xsl:text> </span> </xsl:if> </xsl:if> <xsl:if test="count($next)>0"> <span class="navheader_next"> <a accesskey="n"> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="$next"/> </xsl:call-template> </xsl:attribute> <xsl:call-template name="navig.content"> <xsl:with-param name="direction" select="'next'"/> </xsl:call-template> </a> </span> </xsl:if> </div> </xsl:if> </xsl:if> <xsl:if test="$header.rule != 0"> <hr/> </xsl:if> </div> </xsl:if> </xsl:template>
Amb aquesta modificació els enllaços de navegació de la capçalera es presenten un per cada línia, però
degudament etiquetats amb <div>
i <span>
:
<div class="navheader"> <div class="navheader_title"> Titol de la secció.</div> <div class="navheader_titleup"> Titol de la secció superior.</div> <div class="navheader_links"> <span class="navheader_prev"> <a accesskey="p" href="anterior.html">Anterior</a> </span> <span class="sep"> | </span> <span class="navheader_next"> <a accesskey="n" href="seguent.html">Següent</a> </span> </div> </div>
D'aquesta manera es pot obtenir un aspecte equivalent a la maquetació amb taules utilitzant el següent codi en la fulla d'estil CSS associada al HTML:
div.navheader { width:100%; background-color: #ddd; border-bottom: 1px solid #333333; overflow:hidden; font-size: 0.9em; padding: 0.5em;} div.navheader span.sep { display:none;} div.navheader_links { padding: 0% 2%;} div.navheader_links span.navheader_next { width: 20%; float: right; text-align: right;} div.navheader_links span.navheader_prev { width: 20%; float:left; text-align:left;} div.navheader_title, div.navheader_titleup{ width: 100%; text-align:center;}
<xsl:template match="footer.navigation">
: de manera similar a l'anterior
s'elimina la maquetació amb taules i s'etiqueta de manera adient per a la maquetació en la
fulla d'estil CSS:
Exemple 6.9. Modificació de la plantilla que genera el peu de navegació
<xsl:template name="footer.navigation"> <xsl:param name="prev" select="/foo"/> <xsl:param name="next" select="/foo"/> <xsl:param name="nav.context"/> <xsl:variable name="home" select="/*[1]"/> <xsl:variable name="up" select="parent::*"/> <xsl:if test="$suppress.navigation = '0' and $suppress.footer.navigation = '0'"> <div class="navfooter"> <xsl:if test="$footer.rule != 0"> <hr/> </xsl:if> <!-- Navegar a l'inici o a la Taula de Continguts --> <xsl:choose> <xsl:when test="$home != . or $nav.context = 'toc'"> <div class="navfooter_ht"> <span class="navfooter_home"> <a accesskey="h"> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="$home"/> </xsl:call-template> </xsl:attribute> <xsl:call-template name="navig.content"> <xsl:with-param name="direction" select="'home'"/> </xsl:call-template> </a> </span> <xsl:if test="$chunk.tocs.and.lots != 0 and $nav.context != 'toc'"> <xsl:text> | </xsl:text> <span class="navfooter_toc"> <a accesskey="t"> <xsl:attribute name="href"> <xsl:apply-templates select="/*[1]" mode="recursive-chunk-filename"> <xsl:with-param name="recursive" select="true()"/> </xsl:apply-templates> <xsl:text>-toc</xsl:text> <xsl:value-of select="$html.ext"/> </xsl:attribute> <xsl:call-template name="gentext"> <xsl:with-param name="key" select="'nav-toc'"/> </xsl:call-template> </a> </span> </xsl:if> </div> </xsl:when> </xsl:choose> <!-- Navegar un nivell amunt, si existeix --> <xsl:choose> <xsl:when test="count($up)>0 and generate-id($up) != generate-id($home)"> <div class="navfooter_up"> <a accesskey="u"> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="$up"/> </xsl:call-template> </xsl:attribute> <xsl:call-template name="navig.content"> <xsl:with-param name="direction" select="'up'"/> </xsl:call-template> </a> </div> </xsl:when> </xsl:choose> <!-- Navegar al nivell anterior, si existeix --> <xsl:if test="count($prev)>0"> <div class="navfooter_prev"> <a accesskey="p"> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="$prev"/> </xsl:call-template> </xsl:attribute> <xsl:call-template name="navig.content"> <xsl:with-param name="direction" select="'prev'"/> </xsl:call-template> <xsl:if test="$navig.showtitles != 0"> <xsl:text>: </xsl:text> <xsl:apply-templates select="$prev" mode="object.title.markup"/> </xsl:if> </a> </div> </xsl:if> <!-- Navegar al nivell següent, si existeix --> <xsl:if test="count($next)>0"> <div class="navfooter_next"> <a accesskey="n"> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="$next"/> </xsl:call-template> </xsl:attribute> <xsl:call-template name="navig.content"> <xsl:with-param name="direction" select="'next'"/> </xsl:call-template> <xsl:if test="$navig.showtitles != 0"> <xsl:text>: </xsl:text> <xsl:apply-templates select="$next" mode="object.title.markup"/> </xsl:if> </a> </div> </xsl:if> </div> </xsl:if> </xsl:template>
<xsl:template match="blockquote">
: si conté un element <attribution>
genera una taula per a la seva maquetació. Amb aquesta modificació generarà dos paràgrafs, un amb la
citació i l'altre amb l'autor.
Exemple 6.10. Modificació de la plantilla que transforma l'element <blockquote>
<xsl:template match="blockquote"> <div class="{local-name(.)}"> <xsl:if test="@lang or @xml:lang"> <xsl:call-template name="language.attribute"/> </xsl:if> <xsl:call-template name="anchor"/> <xsl:choose> <xsl:when test="attribution"> <p class="blockquote"> <xsl:apply-templates select="child::*[local-name(.)!='attribution']"/> <xsl:text>--</xsl:text> <xsl:apply-templates select="attribution"/> </p> </xsl:when> <xsl:otherwise> <blockquote class="{local-name(.)}"> <xsl:apply-templates/> </blockquote> </xsl:otherwise> </xsl:choose> </div> </xsl:template>
<xsl:template match="productionset">
i <xsl:template match="production"
per tal de millorar l'accessibilitat de la taula generada s'afegiran cel·les de capçalera <th>
amb el títol de cada columna.
Exemple 6.11. Modificació de la plantilla que transforma l'element <productionset>
<xsl:template match="productionset"> <span> <xsl:attribute name="class"> <xsl:value-of select="name(.)"/> </xsl:attribute> <xsl:if test="title"> <h3 class="title"> <xsl:apply-templates select="title"/> </h3> </xsl:if> <table> <xsl:if test="$ebnf.table.bgcolor != ''"> <xsl:attribute name="bgcolor"> <xsl:value-of select="$ebnf.table.bgcolor"/> </xsl:attribute> </xsl:if> <xsl:attribute name="class"> <xsl:value-of select="name(.)"/> </xsl:attribute> <xsl:attribute name="summary"> <xsl:text>EBNF</xsl:text> <xsl:if test="title"> <xsl:text>: </xsl:text> <xsl:value-of select="title"/> </xsl:if> </xsl:attribute> <tr align="left"> <th id="cap1" width="3%"> Nº</th> <th id="cap2" width="10%"> No Terminal</th> <th id="cap3" width="10%"> Produeix</th> <th id="cap4" width="52%"> Producció</th> <th id="cap5" width="25%"> Nota</th> </tr> <xsl:apply-templates select="production|productionrecap"/> </table> </span> </xsl:template> <xsl:template match="production"> <xsl:param name="recap" select="false()"/> <tr> <td headers="1" align="left" valign="top" width="3%"> <xsl:text>[</xsl:text> <xsl:number count="production" level="any"/> <xsl:text>]</xsl:text> </td> <td headers="cap2" align="right" valign="top" width="10%"> <xsl:choose> <xsl:when test="$recap"> <a> <xsl:attribute name="href"> <xsl:call-template name="href.target"> <xsl:with-param name="object" select="."/> </xsl:call-template> </xsl:attribute> <xsl:apply-templates select="lhs"/> </a> </xsl:when> <xsl:otherwise> <xsl:call-template name="anchor"/> <xsl:apply-templates select="lhs"/> </xsl:otherwise> </xsl:choose> </td> <td headers="cap3" valign="top" width="10%" align="center"> <xsl:copy-of select="$ebnf.assignment"/> </td> <td headers="cap4" valign="top" width="52%"> <xsl:apply-templates select="rhs"/> <xsl:copy-of select="$ebnf.statement.terminator"/> </td> <td headers="cap5" align="left" valign="top" width="25%"> <xsl:choose> <xsl:when test="rhs/lineannotation|constraint"> <xsl:apply-templates select="rhs/lineannotation" mode="rhslo"/> <xsl:apply-templates select="constraint"/> </xsl:when> <xsl:otherwise> <xsl:text> </xsl:text> </xsl:otherwise> </xsl:choose> </td> </tr> </xsl:template>
Com que DocBook està pensat per a crear documents amb informació estàtica, el codi HTML que generen és molt simple i no utilitza tecnologies modernes que poden donar problemes d'accessibilitat, per tant, la majoria de les següents directrius no l'afecten o l'afecten molt poc.
Els documents HTML creats són perfectament llegibles sense associar cap fulla d'estil CSS, i
ja que el codi generat no conté JavaScript ni demés tecnologies de scripts, ni continguts dinàmics
ni frames
, compleix amb aquesta directriu.
DocBook està pensat per a continguts estàtics i per tant no generarà cap element que puga tindre aquestes característiques.
Aquesta directriu no afecta el codi generat a partir d'un document DocBook.
Les fulles d'estil generen un codi HTML que compleix tots els punt d'aquesta directriu.
No afecta al codi HTML generat per les fulles d'estil.
Tant el codi generat com la fulla d'estil que es pot associar són tecnologies W3C.
No afecta al codi HTML generat per les fulles d'estil.
L'autor del contingut en format DocBook ha de crear el text dels enllaços de forma clara, evitant enllaços del tipus "clica ací"
Encara que DocBook té elements suficients per a crear sumaris i demés elements de navegació, les fulles d'estil disposen de paràmetres per a controlar la generació de sumaris per a diferents parts del document:
toc.section.depth
: fins
quina profunditat en la jerarquia de seccions es crearà una taula de continguts.
generate.section.toc.level
: fins quina profunditat en la jerarquia de
seccions del document, aquestes seccions generen una entrada en la taula de continguts.
toc.max.depth
: màxima profunditat en la jerarquia d'elements DocBook que
apareixeran en la taula de continguts, independentment que siguin seccions o altres documents.
generate.toc
: aci es defineixen quins elements de DocBook generaran una entrada
en la taula de contingut i en el llistat de taules, figures i exemples.
Si s'utilitza la fulla d'estil chunk.xsl
per a generar varis arxius
HTML, es crea una capçalera i peu de navegació amb enllaços clars per anar al següent, anterior,
a l'inici o un nivell amunt, i en l'idioma en que està fet el document. Els següents paràmetres
controlen aquestes capçaleres:
suppress.header.navigation
: posar a 0 per a habilitar la creació de la
capçalera de navegació.
suppress.footer.navigation
: igual per al peu de navegació. El paràmetre
suppress.navigation
controla les dos capçaleres alhora.
L'autor del contingut és qui ha de respectar aquesta directriu.