En curso lleva a: Índice estamos en: Pauta 5

En curso...

Imagen

Comunicación

Diseño

Accesibilidad

Nuevas Tecnologías

 

Aplicando las Pautas

5.- Organización de las páginas. Use encabezados, listas y estructura consistente. Use CSS para la maquetación si es posible.

 

La pauta indica que deben utilizarse los elementos estructurales apropiados para organizar el contenido de las páginas y, estilos en cascada para la maquetación.

Es decir, utilizar los elementos estructurales para aquello para lo que han sido definidos y no para conseguir efectos de presentación, como por ejemplo aumentar el tamaño de fuente de una palabra o frase, indentar un texto, etc.; para conseguir efectos de presentación deben utilizarse los estilos en cascada.

La estructuración de los contenidos es importante porque facilita la lectura y comprensión del documento, además, algunos robots de búsqueda saltan de encabezado en encabezado al hacer la recopilación de información en una página. Utilizar los estilos en cascada para los efectos de maquetación es importante porque con ellos quedan claramente distinguidos los elementos estructurales de los elementos de presentación, de tal manera que las variaciones en estos últimos no afectan a los primeros, es decir, el usuario siempre podrá elegir la presentación que desea de los contenidos, el color de los enlaces, el color y tamaño de los textos, etc.; con lo que por ejemplo, un usuario con ceguera al color o con visión reducida, ya sea ésta debida a una deficiencia o al monitor o pantalla con la que está trabajando (monitor monocromo o con una gama limitada de colores), no perderá ninguna parte de la información.

En la siguiente tabla se presentan todos los elementos de HTML para facilitar la comprensión y el conocimiento de cuales son estructurales y cuales de presentación. Esta relación aparece en el punto 13 de las "HTML Techniques for Web Content Accessibility Guidelines 1.0" que traduzco a continuación:

Elementos

Versión lineal de la tabla de elementos HTML

Este índice presenta una lista de todos los elementos en HTML 4.01 La primera columna de la tabla enlaza con la definición del elemento en la especificación HTML 4.01 ([HTML4]). Los elementos desaprobados en HTML 4.01 van seguidos de un asterísco (*). Los elementos obsoletos en HTML 4.01 o que no existen en una especificación de HTML (2.0, 3.2, 4.01) del W3C no aparecen en esta tabla.

La segunda columna indica otras especificaciones del W3C para HTML que incluyen cada elemento. La tercera columna indica la función del elemento.

La última columna lista la sección en este documento en la que se menciona el elemento. Cuando aparece "N/A" significa que el elemento en cuestión no se menciona en este documento.

Índice de elementos
Nombre de elemento Definido también en Función Técnicas
A 2.0, 3.2 Estructura N/A
ABBR   Estructura N/A
ACRONYM   Estructura N/A
ADDRESS 2.0, 3.2 Metadato N/A
APPLET* 3.2 Reemplazo N/A
AREA 3.2 Estructura N/A
B 2.0, 3.2 Presentación N/A
BASE 2.0, 3.2 Procesamiento N/A
BASEFONT* 3.2 Presentación N/A
BDO   Procesamiento N/A
BIG 3.2 Presentación N/A
BLOCKQUOTE 2.0, 3.2 Estructura N/A
BODY 2.0, 3.2 Estructura N/A
BR 2.0, 3.2 Presentación N/A
BUTTON   Estructura N/A
CAPTION 3.2 Estructura N/A
CENTER* 3.2 Presentación N/A
CITE 2.0, 3.2 Estructura N/A
CODE 2.0, 3.2 Estructura N/A
COL   Estructura N/A
COLGROUP   Estructura N/A
DD 2.0, 3.2 Estructura N/A
DEL   Metadato N/A
DFN 3.2 Estructura N/A
DIR* 2.0, 3.2 Estructura N/A
DIV 3.2 Estructura N/A
DL 2.0, 3.2 Estructura N/A
DT 2.0, 3.2 Estructura N/A
EM 2.0, 3.2 Estructura N/A
FIELDSET   Estructura N/A
FONT* 3.2 Presentación N/A
FORM 2.0, 3.2 Estructura N/A
FRAME   Reemplazo N/A
FRAMESET   Presentación N/A
H1 2.0, 3.2 Estructura N/A
HEAD 2.0, 3.2 Estructura N/A
HR 2.0, 3.2 Presentación N/A
HTML 2.0, 3.2 Estructura N/A
I 2.0, 3.2 Presentación N/A
IFRAME   Reemplazo N/A
IMG 2.0, 3.2 Reemplazo N/A
INPUT 2.0, 3.2 Estructura N/A
INS   Metadato N/A
ISINDEX* 2.0, 3.2 Estructura N/A
KBD 2.0, 3.2 Estructura N/A
LABEL   Estructura N/A
LEGEND   Estructura N/A
LI 2.0, 3.2 Estructura N/A
LINK 2.0, 3.2 Metadato N/A
MAP 3.2 Estructura N/A
MENU* 2.0, 3.2 Estructura N/A
META 2.0, 3.2 Metadato N/A
NOFRAMES   Alternativa N/A
NOSCRIPT   Alternativa N/A
OBJECT   Reemplazo N/A
OL 2.0, 3.2 Estructura N/A
OPTGROUP   Estructura N/A
OPTION 2.0, 3.2 Estructura N/A
P 2.0, 3.2 Estructura N/A
PARAM 3.2 Procesamiento N/A
PRE 2.0, 3.2 Presentación N/A
Q   Estructura N/A
S*   Presentación N/A
SAMP 2.0, 3.2 Estructura N/A
SCRIPT 3.2 (DTD) Procesamiento N/A
SELECT 2.0, 3.2 Estructura N/A
SMALL 3.2 Presentación N/A
SPAN   Estructura N/A
STRIKE* 3.2 Presentación N/A
STRONG 2.0, 3.2 Estructura N/A
STYLE 3.2 (DTD) Procesamiento N/A
SUB 3.2 Presentación N/A
SUP 3.2 Presentación N/A
TABLE 3.2 Estructura N/A
TBODY   Estructura N/A
TD 3.2 Estructura N/A
TEXTAREA 2.0, 3.2 Estructura N/A
TFOOT   Estructura N/A
TH 3.2 Estructura N/A
THEAD   Estructura N/A
TITLE 2.0, 3.2 Metadato N/A
TR 3.2 Estructura N/A
TT 2.0, 3.2 Presentación N/A
U* 3.2 Presentación N/A
UL 2.0, 3.2 Estructura N/A
VAR 2.0, 3.2 Estructura N/A

Como se ha visto hay 51 elementos estructurales y 16 elementos de presentación, por tanto sería demasiado prolijo indicar aquí el procedimiento para utilizarlos y poner ejemplos de buenas y malas prácticas para cada uno de los elementos, de tal manera que aquí se indican sólo algunos a modo de pista para la comprensión de la pauta.

 

Procedimiento para estructurar la información y crear estilos en cascada

Desde Frontpage: Para marcar los encabezados, las listas numeradas y con viñetas, se puede utilizar la barra de formato que es igual a la que los usuarios están acostumbrados a usar en Word. Los nombres de estilo para los encabezados son "Encabezado 1", Encabezado 2", etc., indicando el nivel de encabezado correspondiente.

Front Page 2000 aplica automáticamente estilos cuando se usan las propiedades más comunes de formato, por ejemplo cuando se aplica la negrita a un texto éste queda marcado con el elemento <b>

Cuando se crean o modifican estilos, automáticamente se incrusta una hoja de estilos en la página. Para crear estilos propios o modificar los selectores básicos, en el menú "formato" seleccionar la opción "estilo" (alt+o y alt+e). Se abre un cuadro de diálogo en el que seleccionando "nuevo" (mayúscula+alt+n) o "modificar" (mayúscula+alt+o) se abre otro cuadro de diálogo para poner el nombre del nuevo selector y seleccionando "formato" (alt+o) se pueden elegir las opciones "fuente", "párrafo", etc. para modificarlas. Una vez creados los estilos éstos aparecerán en la barra "formato" junto con los estilos por defecto y podrán aplicarse a los elementos que se seleccionen.

Los "temas" predefinidos pueden aplicarse mediante estilos en cascada si se selecciona el cuadro de selección "aplicar mediante css" al elegir el tema que quiere aplicarse. Entonces se crea una hoja de estilos externa que el programa guarda automáticamente en el directorio el directorio principal del sitio en que se está trabajando.

También puede vincularse una hoja de estilos con la página o con todo el sitio que se está creando mediante la opción "vínculos de hoja de estilos" del menú "Formato" (alt+o y alt+h). Aparece entonces un cuadro de diálogo en el que se puede elegir vincular la hoja de estilos con todas las páginas o con las páginas seleccionadas en la "Lista de carpetas" y seleccionar la localización de la hoja de estilos, que puede ser externa, es decir, puede encontrarse en Internet.

En HotMetal: En desarrollo.

En HomeSite:Para marcar un elemento como encabezado de un determinado nivel, en la "Quick Bar", en la pestaña "Fonts" aparecen los botones para crear los distintos niveles de encabezado (H1, H2, H3, etc.), en la pestaña "Lists", los botones para crear listas numeradas (Ol y li), listas con viñetas (Ul y li) y listas de definiciones (DT y DD) así como botones que ayudan en la creación de las anteriores (Botón que lanza un cuadro de diálogo para crear listas. y Botón que crea las etiquetas para listas de definiciones.)

Para definir un estilo para un determinado elemento, por ejemplo para un determinado encabezado al que se quiere cambiar el color, se selecciona la etiqueta y o bien con el botón derecho del ratón se hace clic sobre ella y se selecciona "Edit tag" o bien con "control + F4" aparece el "Tag Editor" que tiene un pestaña llamada "Style sheets" que tiene un campo llamado "Style" en el que se puede incluir directamente el estilo que se quiere aplicar o se puede usar el botón que aparece junto a éste (Botón para definir estilos en HomeSite.).

Para crear una hoja de estilos incrustada en la página, en el menú "Tools" (Alt+t) la opción "Tag chooser..." (Ctrl+e) saca un cuadro de diálogo en el que podemos elegir la etiqueta "STYLE", una vez creadas las etiquetas de apertura y cierre para los estilos, debe insertarse el cursor en cualquiera de sus parte y haciendo clic con el botón derecho del ratón aparece en el menú "Edit style block..." lo que abre el "Tag Editor" para crear los estilos que se deseen.

Para crear una hoja de estilos enlazada con la página y que podrá enlazarse con todas las páginas del sitio, simplemente hay que abrir el "Style Sheets Editor" que se encuentra en la barra "Tools", crear los estilos guardarlos en una carpeta. En HomeSite 3, una vez creados los estilos, que podrán modificarse todo lo que se quiera más adelante, hay que seleccionar el botón del editor de estilos, "Link this..." (Botón para enlazar un fichero de estilos con determinadas páginas.), que enlaza un fichero de estilos con una página o con todas las páginas en una carpeta o con todas las páginas que se tengan abiertas en ese momento en HomeSite. En HomeSite 4.5, hay que poner el punto de inserción en la cabecera del documento (HEAD) y en el menú "Tools" seleccionar "LINK" que abre un cuadró de diálogo en el que se puede seleccionar el fichero de estilos en cascada, luego seleccionar la pestaña "HTML4" y en ella indicar el "TYPE" (tipo) como "text/css".

En Dreamwever: Para estructurar el contenido, en el menú "Text" (alt+t) se encuentran todas las opciones, "Paragraph Format" (alt+f) para dar formato de párrafo o de nivel de encabezado, "List" para el tipo de lista, etc.; pero también puede usarse el "Inspector de propiedades" en el que aparecen los botones de formato, similares a los que pueden encontrarse en cualquier programa editor de textos.

Para aplicar estilos en cascada a un elemento habrá que seguir los siguientes pasos:

  1. seleccionar en el menú "Text", "CSS Styles" y luego la opción "New Style" (Alt+t+c+w),
  2. aparece entonces el cuadro de diálogo "new style" en el que hay que indicar el nombre que se le quiere dar al selector, en el campo titulado "Selector"
  3. y seleccionar el tipo de estilo que se quiere crear en el campo de selección "Type": "Make custom style (class)" para los estilos propios, "Redefine HTML Tag" para modificar un estilo predefinido ó "Use CSS selector" para redefinir el formato de una combinación de terminada de "tags" (por ejemplo, las de los enlaces visitados, sin visitar, etc.) o para todas las etiquetas que contienen un determinado atributo marcado con un "id".
  4. Entonces, en el campo de selección "Define In:" hay que seleccionar: "This document only" y presionar el botón "OK"
  5. Se abre entonces el cuadro de diálogo "Style definition for" en el que se pueden seleccionar las características que deberá tener el estilo en cuestión.
  6. Los estilos así creados aparecen en una hoja de estilos incrustada en la página. Estos estilos pueden aplicarse a un elemento o selección gracias a que todos ellos aparecen en la opción "CSS Styles" del menú "Text" (Alt+t+c).

Para crear una hoja de estilos externa, deben seguirse los pasos 1 a 3, anteriormente citados, y en el campo de selección "Define In" seleccionar la opción "(New Style Sheet File)" y luego el botón "OK". Aparece entonces un cuadro de diálogo en el que hay que poner un nombre a la nueva hoja de estilos y determinar dónde se quiere que se localice.

Todas estas operaciones pueden hacerse también utilizando la ventana de hojas estilo, que puede abrirse desde el menú "Window" o desde el botón "Show CSS Style" (boton para sacar el cuadro de creación de estilos en Dreamweaver.) de la barra de lanzamiento.

En Amaya: El menú "Types" ofrece todas las opciones para estructurar la página dando formato, creando encabezados y listas. También la barra de herramientas presenta botones para usar las opciones principales.

 

Buenas prácticas

Los estilos en cascada facilitan la accesibilidad porque, como puede leerse en la especificación de CSS:

Accesibilidad. Varias características de CSS harán la Web más accesible para los usuarios con discapacidades:

(Versión original en inglés: http://www.w3.org/TR/REC-CSS2/intro.html, versión en castellano: http://www.sidar.org/traduc/css/intro.html)

Ahora, hay que tener en cuenta que no todos los navegadores ni todas las versiones de un navegador son capaces de decodificar los estilos en cascada (Iexplorer desde la versión 3 y Netscape desde la versión 4) y que también presentan diferencias en la interpretación que hacen de ellos. El ejemplo que sigue, se verá de forma un poco diferente según con qué navegador se vea la página. Por tanto, hay que revisar siempre la página con diversos navegadores, para estar seguros de que las diferencias no suponen que la transmisión de los contenidos se vea mermada en cualquier sentido.

Ejemplo:

Logotipo del Sidar.
sidar.org
Presentación
Recomendamos
Actividades
Lo más actual
Enlace falso

Título de la página (H1)

Párrafo (<P>) que podría decir, por ejemplo: Cuentan de un sabio que un día, tan pobre y mísero estaba que sólo se sustentaba con las hierbas que cogía.

Encabezado o título de segundo nivel (<H2>)

Otro párrafo, del que sigue una lista no numerada (UL):

Con los estilos en cascada se ha conseguido que los enlaces que conforman el menú aparezcan como botones, que los títulos aparezcan en color, que las viñetas de las listas sean un gráfico y que los enlaces tengan determinados colores según se hayan visitado o no y cuando el puntero del ratón pasa sobre ellos.

Los estilos usados en este ejemplo son:

.fondmenu {
background-color : #99CCFF;
}

.botones {
background-color : Navy;
font-family : Arial, Helvetica, sans-serif;
font-weight : bold;
font-variant : small-caps;
letter-spacing : 2px;
color : white;
border-top-color : Blue;
border-left-color : Blue;
border-right-color : black;
border-bottom-color : black;
border-width : thin;
border-style : outset;
}

/* selector adicional de .contenido
para resolver un problema en Netscape 4*/
.botones A:link, .contenido .botones A:link {
text-decoration : none;
color : white;
}

.botones A:visited {
text-decoration : none;
color : #f8df01;
}

.botones A:hover {
color : Green;
background-color : Yellow;
}

H1 {
font-family : "Souvenir Lt BT", Souvenir, "Times New Roman", Garamond;
color : #8080c0;
text-align : center;
}

H2 {
font-family : "Souvenir Lt BT", Souvenir, "Times New Roman", Garamond;
color : #f8df01;
text-align : left;
}

UL.graf {
list-style-image : azyl.gif;
}

Fin del ejemplo

Prácticas anticuadas

Una práctica que se solía seguir para conseguir una determinada indentación de un texto o lo colocación exacta de un gráfico, consistía en utilizar una imagen transparente para separar el texto. Vease el ejemplo de prácticas anticuadas de la explicación del uso del texto alternativo. La forma correcta de hacerlo es utilizar los estilos en cascada.

Malas prácticas

Siempre que se fuerce la presentación de un contenido de una determinada manera supondrá una mala práctica. En cambio si se utilizan estilos en cascada, como se ha dicho, se permitirá que el usuario elija la presentación que desee.

Ejemplo:

Título de la página

Un título de nivel 2

Atención, el elemento morado es el importante:

Elemento de lista 1
Elemento de lista 2
Elemento de lista 3

¡Importante, lea esto!

Párrafo de texto, Párrafo de texto, Párrafo de texto, Párrafo de texto, Párrafo de texto, Párrafo de texto, Párrafo de texto, Párrafo de texto,

Texto indentado, texto indentado, texto indentado, texto indentado.

Fin del ejemplo

En este ejemplo se recogen una serie de malas prácticas muy comunes:

Para verificar el trabajo

Quizás la herramienta más útil para verificar la correcta utilización de los elementos estructurales de la página es A-Prompt, aunque también lo es Wave 2.0 que nos marca en la propia página todos los elementos estructurales. Sin olvidar al TAW. Y para la verificación del uso apropiado de los estilos en cascada, naturalmente, el servicio de verificación de CSS del W3C.

Anterior Flecha que apunta hacia la izquierda. Índice Flecha que apunta a la derecha. Siguiente

Para hacer sus aportaciones, comentarios o sugerencias, envíe un mensaje a la autora: Emmanuelle Gutiérrez y Restrepo


Creada: 15 de diciembre de 2000