Páginas WEB Accesibles - Universidad Complutense de Madrid

Páginas WEB Accesibles - Universidad Complutense de Madrid

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 Computación
Universidad Complutense de Madrid
17 de diciembre de 2008
Luis Fernando Llana Dı́az
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
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
Páginas WEB Accesibles
HTML+CSS vs Flash
Flash
http://antares.sip.ucm.es/~luis/accesibilidadWEB08-09/ejemplos/markup/menu.css.html
Tamaño: 30207 bytes
No se transforma de forma sencilla.
Formato propietario.
W3C
http://antares.sip.ucm.es/~luis/accesibilidadWEB08-09/ejemplos/markup/menu.css.html
Tamaño: 2554 bytes.
Se transforma de forma sencilla.
Formato público.
Luis Fernando Llana Dı́az
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
<! DOCTYPE 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
Páginas WEB Accesibles
1
Gramáticas formales II
Trasnsición
<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Transitional // EN " >
1
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.
Marcos
<! DOCTYPE HTML PUBLIC " -// W3C // DTD HTML 4.01 Frameset // EN " >
Luis Fernando Llana Dı́az
Páginas WEB Accesibles
1
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.
blockquote, q.
Luis Fernando Llana Dı́az
Páginas WEB Accesibles
Uso correcto de marcado II
< BLOCKQUOTE cite = " http :// www . mycom . com / tolkien / twotowers . html " >
<P > They went in single file , running like hounds on a strong scent ,
and an eager light was in their eyes . Nearly due west the broad
swath of the marching Orcs tramped its ugly slot ; the sweet grass
of Rohan had been bruised and blackened as they passed . </P >
</ BLOCKQUOTE >
ol, ul, dl listas
h1,..h6 Uso adcuado de encabezamientos
table no usar tablas para maquetación.
Luis Fernando Llana Dı́az
Páginas WEB Accesibles
1
2
3
4
5
6