PDF de programación - Páginas WEB Accesibles - Guideline 3. Use markup and style sheets and do so properly

Páginas WEB Accesibles

Guideline 3. Use markup and style sheets and do so properly

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Programación

Universidad Complutense de Madrid

2 de diciembre de 2005

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Respetar los estándares

Facilita la creación de software específico. Si se usan
correctamennte las etiquetas h1,...,h6 se podría hacer un
índice de contenidos de forma automática.

Separación entre

contenido lo que quiero comunicar,
estructura cómo se estructura dicho contenido,
presentación como se presenta en un dispositivo.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Checkpoints

3.1 When an appropriate markup language exists, use markup

rather than images to convey information. [Prioridad 2]

3.2 Create documents that validate to published formal

grammars. [Prioridad 2]

3.3 Use style sheets to control layout and presentation. [Prioridad

2]

3.4 Use relative rather than absolute units in markup language

attribute values and style sheet property values. [Prioridad 2]

3.5 Use header elements to convey document structure and use

them according to specification. [Prioridad 2]

3.6 Mark up lists and list items properly. [Prioridad 2]
3.7 Mark up quotations. Do not use quotation markup for

formatting effects such as indentation. [Prioridad 2]

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

HTML+CSS vs Flash

Flash

http://antares.sip.ucm.es/~luis/accesibilidadWEB05-06/ejemplos/markup/menu.swf.html

Tamaño: 30207 bytes
No se transforma de forma sencilla.
Formato propietario.

W3C

http://antares.sip.ucm.es/~luis/accesibilidadWEB05-06/ejemplos/markup/menu.css.html

Tamaño: 2554 bytes.
Se transforma de forma sencilla.
Formato público.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Gramáticas formales I

Authors should use the Strict DTD when possible, but may use the
Transitional DTD when support for presentation attribute and
elements is required.

Estricto

<! D O C T Y P E HTML PUBLIC " -// W3C // DTD HTML 4.01// EN " >

This is HTML 4.01 Strict DTD, which excludes the
presentation attributes and elements that W3C
expects to phase out as support for style sheets
matures.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Gramáticas formales II

Trasnsición

Marcos

<! D O C T Y P E HTML PUBLIC " -// W3C // DTD HTML 4.01 T r a n s i t i o n a l // EN " >

This is the HTML 4.01 Transitional DTD, which
includes presentation attributes and elements that
W3C expects to phase out as support for style sheets
matures.

<! D O C T Y P E HTML PUBLIC " -// W3C // DTD HTML 4.01 F r a m e s e t // EN " >

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Uso correcto de marcado I

El marcado sive para denotar estructura

em énfasis. Indicates emphasis.

strong mayor énfasis

cite cita o referencia

dfn definición

code fragmento de programa

samp salida de un programa

kbd algo que se debe teclear

var una variable de un programa
abbr abreviatura, con title la 1a vez.
acronym abreviatura, con title la 1a vez.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles

Uso correcto de marcado II

blockquote, q.

< B L O C K Q U O T E cite = " http :// www . mycom . com / t o l k i e n / t w o t o w e r s . html " >
<P > They went in single file , r u n n i n g like hounds on a strong scent ,
and an eager light was in their eyes . Nearly due west the broad
swath of the m a r c h i n g Orcs t r a m p e d its ugly slot ; the sweet gr ass
of Rohan had been b r u i s e d and b l a c k e n e d as they passed . </ P >
</ B L O C K Q U O T E >

ol, ul, dl listas

h1,..h6 Uso adcuado de encabezamientos

table no usar tablas para maquetación.

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y ProgramaciónUniversidad Complutense de Madrid

Páginas WEB Accesibles