PDF de programación - PROTOTIPO PARA LA NORMALIZACIÓN DE APLICACIONES WEB

PROTOTIPO PARA LA

NORMALIZACIÓN DE APLICACIONES

WEB.

Juan Luis Serradilla Amarilla, ATICA <[email protected]>

Versión 1.0

Copyright © 2004 ATICA

18/10/2004

Historial de revisiones

18/10/2004

Documento inicial.

22/10/2004

Primera versión.

08/11/2004

Incluye explicación del prototipo.

17/02/2005

Revisión 1.0

Revisión 1.1

Revisión 1.2

Revisión 1.3

juanlu

juanlu

juanlu

juanlu

Se decide suprimir el logo de ATICA de los encabezados, ya que en la leyenda del pie ya

consta que la aplicación en cuestión ha sido desarrollada por ATICA.

Cambios en el prototipo, reflejando el cambio de la norma.

Cambios en el prototipo incluyendo nueva hoja de estilo mucho más completa.
juanlu

22/06/2005

Revisión 1.4

Incluyo lista de aplicaciones en fase de adaptación a Normaweb, otra con las ya adaptadas y

una más con las que están pendientes de iniciar el proceso.

Revisión 1.5

21/02/2006

juanlu

Incluyo el texto relativo a la "ventana de mantenimiento" de los sistemas que se produce por la

noche, de modo que sea incluido en la página de entrada de cualquier aplicación.
Revisión 1.6

15/05/2006

juanlu

Todas las páginas de los desarrollos web deben intentar seguir los estándares HTML, CSS y

XHMTL del W3C. Aquellas que los cumplan incluirán los sellos respectivos del W3C.
Revisión 1.7

28/06/2006

juanlu

Incorporación de las pautas de accesibilidad (AA) del W3C.

Resumen

Normalizar el estilo y funcionalidades de las aplicaciones web de ATICA

1

normaweb-tec-20041018-01.xml

Tabla de contenidos

Introducción. .............................................................................................................. 2
Estándares HTML, CSS y X-HTML del W3C.
................................................................. 2
Recomendaciones de accesibilidad del W3C. .................................................................... 2
Estilo. ....................................................................................................................... 3
Funcionalidades. ......................................................................................................... 4
Prototipo de aplicación web. .......................................................................................... 5
Esquema del código HTML utilizado en el prototipo. ................................................................. 5
Separación de contenido y la presentación. ............................................................................... 6
Separación de contenido y comportamiento. ............................................................................. 7
Semántica. ......................................................................................................................... 7
Cambios gráficos.
............................................................................................................... 7
Accesibilidad. ..................................................................................................................... 8
...................................................................................................................... 10
Usabilidad.
Pantallas que integran el prototipo. ............................................................................... 11
Control de acceso. ............................................................................................................. 12
Recomendaciones y requisitos de navegación. ........................................................................ 13
Menú principal y mapa web.
............................................................................................... 14
Opción de menú principal. .................................................................................................. 15
Opción de menú de segundo nivel.
....................................................................................... 15
Formulario. ...................................................................................................................... 16
A. Estado de implantación.
......................................................................................... 18
B. Pautas de Accesibilidad (AA) y herramientas. ............................................................. 19
C. Otros enlaces sobre accesibilidad web. ...................................................................... 20

Introducción.

El objeto de este documento es proponer normas, para homogeneizar el aspecto y las funcionalidades de
las aplicaciones Web de ATICA.

ÁTICA procura en todos sus desarrollos adoptar fielmente estándares internacionalmente reconocidos.
Siguiendo esta premisa, todos nuestros desarrollos web intentarán adaptarse a los estándares HTML,
CSS, XHTML y WAI del W3C.

Estándares HTML, CSS y X-HTML del W3C.

Todas las páginas de los desarrollos web deben intentar seguir los estándares HTML, CSS, XHMTL y
WAI del W3C. Para ello los desarrolladores deben validarlas, y en todas aquellas que superen los test de
validación debe aparecer el o los sellos correspondientes del W3C. Estos sellos, en lugar de contar con
un enlace que envíe a la página del validador correspondiente, deben llevar a una página estática en la
sede de ÁTICA especialmente preparada por MNCS [http://www.um.es/atica/normaweb-y-w3c].

El hecho de que la página principal o de entrada a uno de nuestros desarrollos ostente los sellos de vali-
dación y calidad no significa, salvo que así se explicite, que la totalidad de las páginas de dicho desarro-
llo cumpla estos estándares.

Recomendaciones de accesibilidad del W3C.

En el desarrollo de nuevas aplicaciones web, en ATICA, se deben seguir las recomendaciones de accesi-
bilidad
[http://www.discapnet.es/web_accesible/wcag10/full-checklist.html]

W3C

del

2

normaweb-tec-20041018-01.xml

("http://www.discapnet.es/web_accesible/wcag10/full-checklist.html") de prioridad 1 y 2 (AA). Estas re-
comendaciones sólo podrán ser soslayadas, en el caso en que los requisitos de funcionalidad de la apli-
cación impidan su cumplimiento (en cuyo caso se estudiará la viabilidad de una versión accesible).

Los Jefes de Proyecto, para cualquier nueva aplicación web, deben tener en cuenta un requisito más, que
será la accesibilidad (AA), de modo que se facilitará a los desarrolladores todo lo necesario para conse-
guirla; y se deberá de hacer el control de calidad correspondiente.

Este documento incluye un apéndice "Pautas de Accesibilidad (AA) y herramientas", además de un pro-
totipo que sigue las recomendaciones de accesibilidad (AA) del W3C.

Estilo.

En primer lugar y lo más importante, debemos seguir las pautas de accesibilidad web del W3C
(adecuación AA). Además, en cuanto al estilo de las aplicaciones web, debemos tener en cuenta:

• Hojas de estilo. Todos los atributos relativos al aspecto se llevarán a la hoja de estilo, de modo que
no se deje ninguno en el código HTML de la página. Además, se pueden proporcionar varias hojas
de estilo, para cada uno de los dispositivos en los que se prevea que se visualizará la página
(pantalla, impresora, etc). Se deben seguir las recomendaciones del W3C sobre hojas de estilo, y va-
lidarlas.

•

•

Fondo y tono. Serán preferiblemente los de la web de ATICA. Se facilitarán al desarrollador, al me-
nos, tres paletas de colores. Los colores elegidos deben seguir las recomendaciones de contraste del
W3C. Se validará que tal punto se cumple.

Imágenes. Evitar en la medida de lo posible la sustitución de texto por imágenes. A la hora de usar
imágenes con degradados, asegurar la adecuada legibilidad del texto de la imagen. Todas deben lle-
var su texto alternativo, por si el navegador no las puede mostrar.

• Utilizar el atributo title para los “tooltips” en imágenes o enlaces. El atributo alt sin embargo es un

texto sustitutivo por si la imagen no saliera, que tiene que estar presente siempre.

• Logos. Podemos partir de tres versiones de cada logo (pequeña, mediana y grande); y otras 3 en ver-
sión "degradado". En el encabezado de las páginas se incluirán logos en versión degradada y en su
tamaño más pequeño: en general, en el centro el de la UM, a la derecha el de la aplicación y a la iz-
quierda el de ATICA (según se mira a la pantalla). Si procede incluir otros logos, como el de la
CARM o la UPCT, se pondrá en el centro el de mayor rango, por ejemplo, en el caso de que haya
que incluir los tres (CARM, UM y UPCT), se pondrá en el centro el de la CARM y, según se mira a
la pantalla, a la izquierda el de la UM y a la derecha el de la UPCT. También se puede optar por ele-
minar el logo de ATICA del encabezado, en cuyo caso el la UM (y los que lleve alrededor) irán a la
izquierda de la pantalla (degradados).

• Resolución. Todas las aplicaciones serán optimizadas para su visualización en 800x600 (y por tanto

se verán bien también con resoluciones mayores).

•

Fuente y tamaño de letra. Usar hojas de estilo. Recomendamos usar sólo dos estilos: serif y sans se-
rif, por ejemplo, Times New Roman y Arial. El tamaño recomendado en puntos puede ser 10 o supe-
rior, en función de la fuente. Indicar tamaños de fuente relativos (em).

• Encabezado y pie. En el pie poner: "(c) Universidad de Murcia - ATICA". A ser posible, incluirlo en

la hoja de estilo. La leyenda "ATICA" será, a su vez, un enlace a la página principal de ATICA.

•

Identificación de campos. Evitar la maquetación con tablas para los formularios. Deben utilizarse los
elementos fieldset para la agrupación de campos relacionados, y label para relacionar un control con
su etiqueta. El control debe ir dentro de la etiqueta label. Hay disponible una clase para señalizar los

3

normaweb-tec-20041018-01.xml

campos obligatorios (ver prototipo). Hay que diferenciar visualmente los campos de "solo lectura" y
los "obligatorios". Los de sólo lectura aparecerán tal cual, como una etiqueta más. Los "obligatorios"
deben llevar un asterisco rojo a la izquierda de la etiqueta. Se incluirá una leyenda que informe sobre
el signif