PDF de programación - Páginas WEB Accesibles - Una breve introducción al HTML y a las páginas de estilo CSS

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Páginas WEB Accesibles

Una breve introducción al HTML y a las páginas de estilo CSS

Luis Fernando Llana Díaz

Departamento de Sistemas Informáticos y Programación

25 de octubre de 2005

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Visualización de una página I

1 Analizar el HTML y crear un árbol que repesenta el docuento

(document tree).

html

head

body

link

title

meta

div

h1

p

h2

ol

span

li

li

li

li

2 Identificar el medio en el que va a representar la página:

braille, embossed, handheld, print, projection, screen, speech,
tty, tv.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Visualización de una página II

3 Descargar las hojas de esilo asociadas al documento y al

medio.

4 Anotar en cada nodo del árbol con cada propiedad disponible

según las hojas de estilo, si el medio es screen se aplica el
visual formatting model.

5 Generar una estructura de formato, es parecido al árbol
anterior pero puede aparecer y desaparecer información:

Si un elemento tinen el valor none en la propiedad display,
no aprece.
El las listas aparece puede aparecer una imagen bola.

No se modifica el document tree.

6 Transefirir la estructura de formato al medio concreto

(impimir los resultados, mostrarlos en la ventana de un
navegador gráfico, pronunciar el texto, etc.).

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Principios del diseño CSS I

1 Forward and backward compatibility.

2 Complementary to structured documents. Documentos

uniformes. Es fácil cambiar la apariencia de un documento sin
alterar el HTML.

3 Vendor, platform, and device independence.

4 Maintainability. Si el jefe dice que los comentarios deben ir en

rojo, basta cambiar una línea

. c o m e n t a r i o {

color :# FF0000 ;

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Principios del diseño CSS I

1 Network performance.

2 Flexibility. Se pueden especificar información de estilo en el

navegador (user agent), del usuario, las que aparecen el
documento.

3 Richness. La calidad depende de la creatividad del autor.

4 Alternative language bindings. Se puede cambiar el estilo

usando JavaScript.

5 Accessibility.

Se puede controlar la apariencia del texto, no son necesarios
los “botones gráficos”.
Hace innecesario el uso de trucos para la maquetación: marcos
(http://www.la-moncloa.es), imágenes invisibles, o tablas
(http://www.mde.es/Home).

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Principios del diseño CSS II

El modificador !important permite al usuario definir sus
necesidades.
El valor inherit mejora la generalidad de la cascada y
permite una mejor y más consitente ajuste.
Se soporta medios como braille, embossed y tty.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

body {

margin :0;
p a d d i n g :0;
font - family : sans - serif ;

}

body , div # derecha , div # izquierda , h1 , h2 , h3 , h4 , h5 , h6 {

background - color :#99 FF33

}

div . l a t e r a l {

padding - top :2 em ;

}

div . l a t e r a l p {

margin - left :1 em ;
text - indent :0

}

div . l a t e r a l a , div . l a t e r a l p , div . l a t e r a l div . iconos {

font - size : xx - small ;

}

div . l a t e r a l ul li a {

margin - top :0.5 em ;
p a d d i n g :0.5 em ;
d i s p l a y : block ;
background - color : yellow ;
border : 2 pt outset # FFCC00 ;

}

div . l a t e r a l ul li a : hover {

background - color : red ;
border : 2 pt outset # CC0000 ;

}

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

< head >

< meta http - equiv = " Content - Type " c o n t e n t = " text / html ; c h a r s e t = iso -8859 -15 " >
< link rel = " s t y l e s h e e t " type = " text / css " href = " e s t i l o 2 . css " media = " screen " >
< title > Prueba 3 </ title >

</ head >

< style type = " text / css " media = " screen " >

/* cosas que e n t i e n d e IE6 */
@ i m p o r t url ( " estilo . css " );

/* cosas que e n t i e n d e n los n a v e g a d o r e s buenos , pero no IE6 ,

oculta el m e n s a j e sin CSS */

@ i m p o r t url ( " c o m p l e t o . css " ) screen ;

</ style >

<p style = " text - align : center " > Texto c e n t r a d o </ p >

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

all

braille

embossed Para impresoras braille.

handheld Pantalla pequeña, poco ancho de banda.

print Para ser impreso, con páginas.

projection

screen Pantallas de ordenador a color.

speech

tty Terminales con tipo de letra de ancho ficho y

capacidades limitadas.

tv Televisión, baja resolución con color.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

continuous/paged

visual/audio/speech/tactile

grid/bitmap

interactive/static

braille

embossed
handheld

print

projection

screen
speech

tty
tv

continuous

paged
both
paged
paged

continuous
continuous
continuous

both

tactile
tactile

visual, audio, speech

visual
visual

visual, audio

speech
visual

visual, audio

grid
grid
both

bitmap
bitmap
bitmap

N/A
grid

bitmap

both
static
both
static

interactive

both
both
both
both

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Los agentes de usuario (navegadores) deben asignar las
propiedades de la siguiente forma:

1 Si la cascada calcula un valor le asigna ese.

2 Si la propiedad es inherit, le asigna el valor del nodo padre.

3 En caso contrario le asigna el valor inicial.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

La cascada

Las hojas de estilo pueden tener 3 orígenes: autor, usuario, agente
de usuario.

Preferencia

Las reglas tiene un peso, si dos reglas se contradicen la de mayor
peso tiene preferencia

Las reglas del autor tienen más peso que las del usuario

Las del usuario más que la del agente de usuario.

La preferencia se puede invertir con la directiva !important.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

El orden de la cascada

1 Encontrar todas la reglas que se pueden aplicar a un

determinado elemento.

2 Ordenar por orden de importancia (creciente):

1 reglas del agente de usuario
2 reglas normales del usuario
3 reglas normales del autor
4 reglas importantes del autor
5 reglas importantes del usuario

3 Ordenar por concreción de la regla. Las más específicas tiene

mayor peso.

4 Si tras todo hay dos con el mismo peso, la que aparece más

tarde (en el fichero) tiene prioridad.

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Selectores CSS I

1 * Matches any element. Universal selector

2 E Matches any E element (i.e., an element of type E). Type

selectors

3 E F Matches any F element that is a descendant of an E

element. Descendant selectors

4 E > F Matches any F element that is a child of an element E.
Child selectors . ¡¡¡¡IE6 no lo entiende!!!! se tiene que simular
con JavaScript

5 E#myid Matches any E element with ID equal to ”myid”. ID

selectors

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Selectores CSS II

6 E:first-child Matches element E when E is the first child

of its parent. ¡¡¡¡IE6 no lo entiende!!!

7 E:link, E:visited Matches element E if E is the source
anchor of a hyperlink of which the target is not yet visited
(:link) or already visited (:visited). The link pseudo-classes

8 E:active, E:hover, E:focus Matches E during certain user
actions. The dynamic pseudo-classes ¡¡¡¡en IE6 sólo funciona
con etiquetas <a>...</a>!!!! se tiene que simular con
JavaScript

Luis Fernando Llana Díaz

Páginas WEB Accesibles

Departamento de Sistemas Informáticos y Programación

Principios

Una vista rápida

Tipo de media

La cascada

selectores

Modelo de caja

Posicionado

Colores

Modelo de caja I

Luis Fernando Llana Díaz

Páginas W