Css

Unidad de Administracin Electrnica y Web
Servicios Informticos

1 / 31

MANUAL DE USO DE LAS HOJAS DE ESTILO EN CASCADA
Y CONSEJOS GENERALES PARA LA ACCESIBILIDAD Y USABILIDAD
DE LAS WEBS DE FACULTADES DE LA UNIVERSIDAD DE ALCAL

ndice

+ Manual de CSS:

- Aviso sobre previsualizacin en diferentes programas de creacin de
pginas web. Ventajas de la construccin correcta y con estndares de un
sitio web.
- Estudio del CSS actual, siquiendo la estructura de la interfaz.
- Cmo realizar las actualizaciones futuras.
- Relacin de enlaces y libros recomendados.

+ Accesibilidad y usabilidad:

- Aplicacin de las recomendaciones de la WAI en la plantilla, prioridad 1 y
2.
- LIONDAU, LSSICE.
- Relacin de enlaces y libros recomendados.



2 / 31
+ Manual de CSS | Aviso sobre previsualizacin en diferentes programas de
creacin de pginas web. Ventajas de la construccin correcta y con estndares
de un sitio web.

Aviso: lamentablemente, todava son muchos los programas de software que no ofrecen
soporte visual adecuado a las pginas web maquetadas correctamente, con CSS. Esto
no significa ni mucho menos que no se pueda trabajar con total normalidad con estos
programas, si no que la visualizacin no se corresponde con la que se ver en el
navegador. Es probable que versiones futuras, y en un plazo muy breve de tiempo, ya
ofrezcan una visualizacin correcta.

Las ventajas de contruir un sitio con CSS son muchas, aqui citaremos brevemente
algunas, pero recomendamos visitar la pgina web de World Wide Consortium
(http://www.w3.org y http://www.w3c.es para su oficina en espaa):

- Las pginas web hechas con CSS son ms accesibles.
- Son mucho ms fciles de actualizar, al centralizar todo lo referente a su
presentacin y maquetacin en un slo archivo (o pocos, en el caso de hojas de
estilo alternativas).
- Requieren de menos ancho de banda por parte del usuario, al tener menos
peso de cdigo, y por tanto aligeran la carga de los servidores que las contienen.
- Es, sencillamente, la forma correcta de hacerlo, segn las especificaciones del
organismo citado, creador de todos los lenguajes de internet.
- Las tablas se crearon nicamente para mostrar datos tabulados, no para
maquetar una web. El problema es que los principales navegadores (internet
explorer, etc) han tardado mucho en ofrecer un soporte mnimamente adecuado a
estas tecnologas. An este soporte no es completo y correcto en la mayora, pero
en un futuro muy prximo tendrn que cumplir con la normativa y adaptar su
cdigo.



3 / 31
+ Manual de CSS | Estudio del CSS actual, siquiendo la estructura de la interfaz.
1/ Basic.css

Estos son los estilos generales que definen el sitio, como por ejemplo la imagen de fondo
de la pgina, la situacin y tamao de las tres capas (div) que estructuran la pgina (de
izquierda a derecha) leftnav, content y rightnav, que a su vez estn metidas en una capa
que las mantiene a todas centradas, container. Asimismo se definen los colores para los
enlaces, en posicin normal, al pasar el ratn y los visitados.
Los scrollbar slo funcionan en ie, simplemente son para hacer que las barras de
desplazamiento
sean de un color determinado

/****** ESTILOS GENERALES. DIVS PRINCIPALES, MAQUETACION. *************/

html, body {
height: 100%;
margin: 0px;
padding: 0px;
font-family: Arial, Helvetica, sans-serif;
_font-size: 1em;
letter-spacing: 0.1em;
background-image: url(fondo_web.jpg);
background-repeat: repeat-x;
scrollbar-3dlight -color:#000000;
scrollbar-arrow-color: #000000;
scrollbar-base-color:#FFD600;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#000000;
}
#container {
width: 780px;
margin: 0px auto;
padding: 0px;
background: #fff url(cols.gif) repeat-y 0% 0%;
color: #445464;
border-top: 1px solid gray;
}

#leftnav {
float: left;
width: 165px; /* 155 */
margin: 0px;
padding: 0px;
border-top: 5px solid #005AAD;
}


4 / 31

#content {
float: left;
width: 456px; /* 466 */
margin: 0px;
padding: 0px;
color: #445464;
font-size: 0.7em;
}

#content a{
color: #0019A8;
text-decoration: none;
font-weight: bold;
}

#content a:hover{
color: #0019A8;
text-decoration: underline;
font-weight: bold;
}
#content a:visited{
color: #000066;
font-weight: bold;
}

#rightnav {
float: left;
width: 158px;
margin: 0px;
padding: 0px;
border-top: 5px solid #005AAD;
color: #1E2D3B;
font-size: 0.7em;
}

#footer {
clear: both;
margin: 0px 0px -4px 0px;
padding: 0px;
height: 6px;
line-height: 0px;
font-size: 0px;
background: url(footer.gif) no-repeat 0px 0px;
}



5 / 31
a {
color: #0019AC;
font-weight: bold;
}
a:hover {
}

ul {
list-style-image: url(li.gif);
}

Estos estilos corresponden a la columna izquierda de la interfaz, en la que
encontraremos el logo de la Universidad de Alcal y el men principal de la web, que la
estructura.
Por motivos de accesibilidad y contruccin correcta, el men est formado por una lista
principal no numerada (ul#menu), con listas anidadas en su interior. Segn la clase que
le asignemos luego a las listas en el HTML tendremos un men desplegable, o no.
Aqui encontramos atributos como el ancho de la columna que soporta el men, el color
de los enlaces, del fondo, espaciados, etc.

/************* MENU PRINCIPAL *************/

ul#menu {
width: 163px; /* 153 */
margin: 3px 0px 0px 1px;
_margin: 5px 0px 0px 1px;
padding: 3px 0px;
list-style-image: none;
list-style-type: none;
background: #fff;
font-size: 0.7em;
}
ul#menu li {
margin: 0px;
padding: 0px;
}
ul#menu li a, ul#menu li h2, ul#menu li h3 {
color: #1E2D3B;
display: block;
border-left: 5px solid #FFBA00;


6 / 31
margin: 0px;
padding: 4px;
background: #FFD600;
font-size: 1em;
font-weight: bold;
}
ul#menu li h2 {
color: #504718;
font-size: 1.0em;
}

ul#menu li ul {
list-style-image: url(li.gif);
background: #fff;
width: 143px; /* 133 */
padding: 0px;
}
ul#menu li ul li {
margin: 0px;
padding: 0px;
color: #FFAF03;
background: #fff;
font-weight: bold;
}
ul#menu li ul li a, ul#menu li ul li h3 {
margin: 0px;
padding: 0px;
font-weight: normal;
border: 0px;
background: #fff;
}
html*ul#menu li ul li a, html*ul#menu li ul li h3 {
height: 100%;
vertical-align: text-top;
}
ul#menu li ul li a img {
margin: 0px;
padding: 0px;
border: 0px;
background: #fff;
}
ul#menu li ul li a:hover {
}


7 / 31
ul#menu li ul li.last a {
color: #0018AD;
}
ul#menu li ul li ul {
list-style-image: url(licircle.gif);
width: 120px; /* 110 */
padding: 0px;
}
ul#menu li ul li ul li {
margin: 0px;
padding: 0px;
}
/* added */
ul#menu li ul li ul li a, ul#menu li ul li ul li h3 {
margin: 0px;
padding: 0px;
border: 0px;
background: #fff;
}
html*ul#menu li ul li ul li a, html*ul#menu li ul li ul li h3 {
height: 100%;
vertical-align: text-top;
}

Estos estilos controlan el aspecto del men secundario que se sita debajo de la
cabecera (Portada, Directorio, Mapa web, Correo, Intranet, Agenda y Contacto).

/******** MENU SECUNDARIO (PORTADA, DIRECTORIO, MAPA WEB, ETC)
***********/

ul#menusecundario {
width: 456px; /* 466 */
margin: 0px;
padding: 5px 0px;
text-align: center;
border-bottom: 1px solid #848484;
font-size: 0.9em;
}
ul#menusecundario li {


8 / 31
display: inline;
padding: 0px 2px 0px 2px;
border-right: 1px solid #848484;
}
ul#menusecundario li.last {
border-right: 0px;
}
ul#menusecundario li a {
color: #0019A8;
}
ul#menusecundario li a:hover {
}
ul#menusecundario li img{
margin: 0px;
padding: 0px;
}
ul#menu h2 {
font-weight: bold;
font-family: Arial, Hel vetica, sans-serif;
}

La miga de pan es la lista de enlaces que encontramos en cada pgina detallndonos en que
lugar exacto de la estructura general de la web estamos.

/************* MIGA DE PAN *************/

#breadcrumb {
padding: 10px;
color: #1E2D3B;
}

Los estilos bajo el div content son aquellos que visualmente ocupan el contenido central.
Al ser el rea donde los contenidos previsiblemente cambiarn ms a menudo, se definen
estilos para aquellas etiquetas HTML ms comunes a la hora de estructurar correctamente una
web: titulares de primer orden(H1), segundo (H2), etc, imgenes, prrafos, listas, miga de pan
(breadcrumb); adems se ocupan de algunos casos particulares, como las noticias, archivo de
noticias, etc.

/************* CONTENIDO CENTRAL *************/

h1 {


9 / 31
display: none;
}
p, h2 {
margin: 0px;
}
h2 {
font-family: Times New Roman, Times, serif;
font-size: 1.8em;
color: #EFAD00;
letter-spacing: 0em;
}
#content h3 {
margin: 5px;
padding: 5px;
font-size: 1.5em;
font-weight: bold;
color: #56595C;
letter-spacing: 0em;
}
h4 {
font-weight: bold;
font-size: 1em;
margin-bottom: 0px;
}

h3.linea {
clear: left;
border-top: 1px dashed #525A5A;
}
h3.saludo {
text-align: center;
border-top: 1px dotted #848484;
}

#logo {
border: 0px;
}
#mosaico {
}

#mosaicomini {


10 / 31
color: #EFAD00;
}
/************* SITUACION DEL BOTON SUBIR *************/
#content p.subir {
text-align:center;
display: block;
}
#content p.subir img{
padding: 0px 4px;
vertical-align:text-bottom;
}
/************* LISTAS CONTENIDAS EN EL BLOQUE CENTRAL *************/
#content ul.lista {
margin: 0px;
padding: 0px;
}

#content ul.lista li {
}

#content ul.lista li ul{
}

/************* TABLAS EN EL BLOQUE CENTRAL *************/
#content table {
width: 90%;
margin: 10px auto;
}
#content table td{
border: 1px solid #FFD600;
vertical-align: middle;
}
#content table tr.descripcion {
font-weight: bold;
text-align: left;
}

Las noticias podrn estar en la pgina de inicio o en la dedicada a ampliar las mismas o
guardar el archivo, actualidad.


11 / 31

/*********** NOTICIAS DE LA PGINA DE INICIO Y DE LA PGINA DE ARCHIVO
*************/

ul#noticias, ul#enlacesgraficos, ul#galeria {
margin: 0px;
padding: 0px;
}

ul#noticias li {
/* bullet as html img: IE cannot show img bullets on floated list */
float: left;
width: 210px;
padding: 0px;
}
#content .pastnews {
margin: 10px;
padding: 5px;
height: 100%;
background-color: white;
display: block;
overflow: hidden;
}
#content .pastnews table {
float: left;
width: 160px;
padding: 0px;
border: 1px solid #F5F5F5;
background-color: white;
}
#content .pastnews ul{
list-style-type:none;
margin: 10px;
}
#content .pastnews ul li{
display: inline;
margin: 0px;
padding: 0px;
}
#content .pastnews h4{
margin: 0px;
}


12 / 31
#content .pastnews h4.meses{
margin-top: 15px;
}
#content .pastnews table td.day{
background-color: #EFAD00;
color: #FFFFFF;
font-weight: bold;
}
#content .noticiasxtd {
margin: 10px;
padding: 5px;
line-height: 1.3em;
background-color: #F5F5F5;
display: block;
}
.imagennivel {
color: #EFAD00;
float: left;
}

La pgina de Galeria de imagenes tiene estos estilos asociados

/************* ESTILOS DE LA GALERIA DE IMAGENES *************/

#content div.galeria {
display: block;
padding: 5px;
height: 100px;
font-weight:bold;
}

#content div.galeria p {
}
#content div.galeria img.left {
margin: 0px;
padding: 5px 10px;
float: left;
}
#content div.galeria img.right {
margin: 0px;
padding: 5px 10px;
float: right;


13 / 31
}
#content div.galeria img.left, img.right a{
border: 0px;
text-decoration:none;
}

Lo que se ha dado en llamar tarjeta de visita de la Universidad, que es ese area donde, con
fondo del escudo de la Universidad, se resean los datos principales de la misma, tanto en la
pgina de inicio como en las siguientes.

/**** AREA DE DATOS DE LA UNIVERSIDAD DE ALCALA (PAGINA DE INICIO Y
SIGUIENTES) ****/
#content div#tarjeta{
border-top: 1px solid #525A5A;
margin: 5px;
background-image: url(fondo_visita.gif);
background-position:top;
background-repeat: no-repeat;
text-align:center;
line-height: 1em;
}
#content div#tarjeta h3{
font-size: 1.4em;
text-align:center;
}

#leftnav div#tarjeta{
border-top: 1px solid #525A5A;
margin: 0px;
padding: 0px;
background-image: url(fondo_visita2.gif);
background-position:top;
background-repeat: no-repeat;
font-size: 0.7em;
line-height: 1.1em;
}

La columna derecha de la pgina contiene varios elementos que apoyan la informacin central
o aaden nuevas funcionalidades: enlaces relacionados, acceso a la galera de imgenes,
enlaces internos de la Universidad o externos, etc.

/******** BARRA DE NAVEGACION DE LA DERECHA: ENLACES RELACIONADOS, ETC
*********/


14 / 31

#rightnav img {
margin: 0px;
}
#rightnav ul {
margin: 0px;
border-bottom: 1px dashed #525A5A;
}
#rightnav ul li {
}
ul#enlacesgraficos {
margin: 0px;
padding: 0px;
border: 0px;
}

ul#enlacesgraficos li {
}
/* avoid ie5.0 (but needed in ie5.5+): */
html*ul#enlacesgraficos li, html*ul#galeria li {
height: 100%;
}
ul#enlacesgraficos li a {
display: block;
}

ul#enlacesgraficos li, ul#enlacesgraficos li a img {
margin: 0px;
padding: 0px;
border: 0px;
}
#rightnav ul#banderas {
width: 156px;
margin: 0px;
}
#rightnav ul#banderas li{
display: inline;
list-style-type: circle;


15 / 31
}
.enlacesimg {
border: 0px;
}
#rightnav .enlacesimg {
margin: 0px 2px;
padding: 0px;
vertical-align: baseline;
}

Estilos del campo de bsqueda del rea superior derecha.

/************* FORMULARIO DE BUSQUEDA *************/
form {
margin: 0px;
padding: 0px;
border-bottom: 1px solid #848484;
}
label {
display: none;
}
input {
_margin: 0px 0px 6px 10px;
width: 80px;
}
input.send {
border: 0px;
color: #0019AC;
background: #fff;
width: 45px;
margin-left: 5px;
cursor: pointer;
cursor: hand;
color: #0019A8;
font-weight: bold;
font-size: 1em;
}
Estilos para los iconos que amplan o disminuyen el tamao de letra

/********************* ICONOS DE AMPLIACION DE TEXTO **************************/

#txtsizer img {
display: inline;


16 / 31
width: 24px;
height: 24px;
margin: 0px;
padding: 0px;
}
#txtsizer {
}

Estilos para la pgina de saludo del Decano de cada Facultad.

/************************** saludo del Decano **************************/
#saludo {
background-color:#FFFFFF;
width: 550px;
margin: 0px auto;
padding: 15px 5px;
color: #445464;
font-size: 0.7em;
}
#saludo p#firma{
font-size: 1.5em;
font-weight: bold;
text-align: right;
}

2/ Galery.css
Estilos para las pginas de fotografas ampliadas (css aparte).

/************* BASIC LAYOUT *************/
html, body {
height: 100%;
margin: 0px;
padding: 0px;
_font-size: 1em;
scrollbar-3dlight -color:#000000;
scrollbar-arrow-color: #000000;
scrollbar-base-color:#FFD600;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;


17 / 31
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#000000;
}

a {
color: #0019AC;
font-weight: bold;
}
a:hover {
}

h3 {
padding: 5px;
font-size: 1.3em;
}

#galeriacontainer {
width: 650px; /* 680 */
margin: 0px auto;
color: #626469;
font-size: 0.7em;
text-align: center;
background-color: #FFFFFF;
}

#galeriacontainer img{
padding: 10px;
border: 1px solid #445464;
display: block;
margin: 15px auto;
}

#galeriacontainer p.cerrar{
text-align:center;
padding: 10px;
}



18 / 31
+ Manual de CSS | Cmo realizar actualizaciones futuras.

Esta web est pensada para que aquellas personas encargadas de su actualizacin no
necesiten hacer cambios en el cdigo o en el css, ms que aadir contenido. Una de las
principales ventajas del CSS es que se puede controlar el aspecto de una web de miles
de pginas con un slo archivo, y de esta manera facilitar cualquier cambio de una
manera sencilla y muy rpida.

Como se comentaba anteriormente, los principales cambios afectarn al bloque central,
aunque tambin cambiarn los enlaces relacionados, e incluso, aunque con mucha
menos frecuencia, alguna seccin del men principal (columna izquierda). A
continuacin aclaramos cmo se deben hacer estos cambios.

1/ Cambios en el men principal

El men principal se compone de listas anidadas, que se despliegan y encogen en
funcin de la actividad del usuario sobre los items de las mismas.
Para cambiar cualquier dato que aparezca en el men slo tenemos que saber esto:

1- Entre las etiquetas <h2> encontraremos los ttulos que renen cada bloque temtico
de contenidos, como por ejemplo, La Facultad, que aparecen con color corporativo de
fondo y nunca son enlaces. Siempre que necesitemos aadir un nuevo bloque de
enlaces deberemos crear una nueva etiqueta <h2> y a continuacin crear una lista no
numerada <ul>:

<h2>La Facultad</h2>
<ul>
<li>Texto de ejemplo</li>
</ul>
2- En algunos casos tendremos items que se despliegan en sublistas al hacer click
sobre ellos, y que no son enlaces, como por ejemplo Presentacin (dentro de la
Facultad). En este caso el titular se mete dentro de etiquetas <h3>, se crea una lista no
numerada despes <ul>, y a sta se le da la clase desplegable. De esta manera los
items que contenga Presentacin se abrirn o cerrarn cuando el usuario haga click
sobre el.

<h3>Presentacin</h3>
<ul class=desplegable>
</ul>

3- En los casos en los que nos hallemos en una pgina web que est dentro de un
men desplegable, como por ejemplo la anterior, es necesario que toda la lista que la
contiene est desplegada, para que asi el usuario se oriente dentro de la estructura de la
web. Para que sta lista no sea desplegable simplemente quitaremos la clase
desplegable que habamos aadido:



19 / 31
<ul>
</ul>

4- Automticamente todos los enlaces contenidos en el men principal sern de un color
prefijado en el CSS, y todos los items que no sean enl ace porque el usuario est en esa
pgina (no tiene sentido que funcione el enlace a la pgina en la que nos hallemos)
tendr otro color. Por esto no es necesario modificar nada en las etiquetas para aadir o
quitar color y asi distinguir la pgina que estemos viendo:

<ul>
<li><a href=>enlace</a></li>
<li>pgina actual</li>
</ul>

5- En el caso de bloques de contenido que no sean desplegables, simplemente no
habr listas anidadas ni clases desplegable, como en el caso de Estudios:

<h2>Estudios</h2>
<ul>
<li><a href=>Plan de estudios</a></li>
</ul>

2/ Cambios en el men secundario

El men secundario incluye estos enlaces (Portada, Directorio, Mapa web, Correo,
Intranet, Agenda y Contacto). Para ello slo necesitaremos una lista con el id
menusecundario y los items que necesitemos.

<ul id=menusecundario>
<li>Portada</li>
<li>Directorio</li>
</ul>

3/ Cambios en la pgina de inicio

En esta pgina cambiarn a menudo las noticias del bloque central, y puede que algn
enlace inferior.
Para separar algunas reas que, aunque estn dentro del bloque central, pertenecen a
contenidos distintos utilizaremos un titular que dibuja una lnea superior punteada:



20 / 31
<h3 class=linea>Actualidad</h3>

Las noticias son tambin una lista no numerada, con el identificador nico id de
noticias. Para aadir ms noticias simplemente aadiremos un item <li></li> ms a la
lista.
Es importante sealar que, al igual que sucede con las pginas web de peridicos online,
en la pgina de inicio no es recomendable poner el texto completo de la noticia, sobre
todo si ste es largo. Bastar con un titular suficientemente descriptivo y una lnea o dos,
para a continuacin indicar al lector que bajo el enlace ms informacin acceder a la
pgina de actualidad donde podr, si lo desea, seguir leyendo sobre la noticia de su
inters.

<ul id=noticias>
<li><img src=../css/liverde.gif width=6 height=6 alt=comienzo de noticia />
<strong>Titular destacado de la noticia</strong>breve descripcin de la noticia<a
href=#>ms informacin</a></li>
<li><img src=../css/liverde.gif width=6 height=6 alt=comienzo de noticia />
<stron </ul>

Cualquier contenido que queremos aadir ms abajo, en el caso de que sean enlaces
sueltos, no prrafos, se encajarn en listas, con el <h3 class=linea> para separarlo del
contenido anterior.
La mayor parte de las listas no numeradas que se encuentran dentro del rea central
llevan, asimismo, asociado la clase lista:

<h3 class=linea>Titular</h3>
<ul class=lista>
<li>Item 1</li>
</ul>

4/ Cambios en la columna de la derecha

En el rea de la derecha de la pgina tendremos informacin o utilidades anexas al
contenido central. Todos ellos funcionan tambin como listas.
Hay casos, como el caso de Web Ct, que estos enlaces sern imgenes. En este caso
tendremos que seguir la siguiente estructura, aadiendo el id enlacesgraficos a la
etiqueta <ul>:

<ul id=enlacesgraficos>
<li><img src= alt=texto descriptivo /></li>
</ul>

En el caso siguiente, tendremos enlaces que o bien nos lleven a pginas de la propia
Universidad o bien a pginas exteriores a la misma. En ambos casos, aparte de la
imagen inicial que los distingue, que no habr que modificar, no ser necesario aadir
ninguna clase ms:


21 / 31

<img src=../images/enlaces_uah.gif width=145 height=32 alt=enlaces de la
universidad de Alcal />
<ul>
<li>enlace interno 1</li>
</ul>

Los enlaces siguientes, a la Galera de imgenes y a la pgina de accesibilidad, no ser
necesario modificarlos.

5/ Cambios en el contenido central en el resto de las pginas

En cualquiera de las pginas siguientes de segundo nivel es importante que incluyamos
antes del desarrollo de contenido central la miga de pan:

<p id=breadcrumb><strong>titulo del bloque</strong>: titulo del apartado </p>

Recordemos que la miga de pan tiene esta forma:

Estudiantes: Otros contenidos > Calendario escolar

Podra darse el caso de que haya un tercer nivel en profundidad dentro de la web, en
cuyo caso tendramos un enlace intermedio en la miga de pan:

<p id=breadcrumb><strong>titulo del bloque</strong>: <a href=>titulo del apartado
a</a>
> titulo del apartado en el que estemos
</p>

El ttulo principal de dicha pgina se colocar despus de la miga de pan, con la etiqueta
<h2>:

<h2>Titulo</h2>

El resto de los contenidos pueden ser de tres tipos:

1 - Listas. En este caso crearemos una lista no numerada <ul> con la clase lista.
2 - Prrafos: dentro de las etiquetas normales para este tipo de contenido, <p>.
3 - Tablas: no es necesario aadir ninguna clase a la tabla, ya las tiene asignadas en el
CSS principal. Tan slo, para que se distinga mejor, a la fila superior donde coloquemos
el ttulo que describe el contenido de cada columna de la tabla, aadiremos la clase:

<tr class=descripcion>



22 / 31
Recordemos que hay que separar aquellas partes dentro de la misma pgina que sean
diferentes con:

<h3 class=linea>Titular</h3>

Para el botn de subir, aadiremos esto:

<p class=subir><a href=#up><img src=../../images/subir.gif alt=subir al comienzo de
la pgina width=71 height=28 border=0 /></a></p>

Y antes de la miga de pan:

<a name=up id=up>

En algunas pginas se ha aadido al principio, despus del ttulo de la pgina, una
imagen que lleva la siguiente clase asignada (para que el resto de contenido en texto la
rodee):

<img src=../../images/img_estudi ante.jpg width=140 height=100 class=imagennivel
/>



23 / 31
+ Manual de CSS | Relacin de enlaces y libros recomendados

http://www.alistapart.com/
http://css.maxdesign.com.au/
http://www.thenoodleincident.com/
http://www.bluerobot.com/web/layouts/
http://www.richinstyle.com/
http://www.digital-web.com/tutorials/tutorial_2001-5.shtml
http://www.disenorama.com/
http://www.minid.net/archivos/categorias/css/index.php
http://www.brainjar.com/css/using/
http://www.meyerweb.com/eric/css/
http://www.mako4css.com/index.htm
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html
http://www.pixy.cz/blogg/clanky/cssnopreloadrollovers/
http://www.csszengarden.com/
http://www.tierradenomadas.com/
http://www.w3schools.com/css/
http://dezwozhere.com/links.html
http://www.hotdesign.com/seybold/
http://cssvault.com/gallery.php
http://www.cssbeauty.com/
http://www.stylegala.com/
http://www.w3csites.com/
http://larsholst.info/blog/index.php?p=40

CASCADING STYLE SHEET, de Anaya
Autores:
Briggs, Owen
Champeon, Steven
Costello, Eric
Patterson, Matt
N Pginas: 304



24 / 31
+ Accesibilidad y usabilidad | Aplicacin de las recomendaciones de la WAI en la
plantilla, prioridad 1 y 2.

La Uiversidad de Alcal, como ente pblico, est obligada a cumplir con unas mnimas
normas de accesibilidad que se le exigirn a partir de diciembre de este ao (ver
apartado ms adelante de LIONDAU, LSSICE). Para ello inclumos aqui un breve
resumen de las pautas a seguir tanto de prioridad uno como de la dos:

1/ Proporcione un contenido que, presentado al usuario, cumpla esencialmente
la misma funcin o propsito que el contenido visual o auditivo.
Esto quiere decir que todo aquel contenido visual (imgenes, animaciones,
grficos, esquemas) o auditivo (explicaciones, locuciones, etc) tienen que tener
una alternativa textual en el cdigo, utilizando alt para los elementos IMG,
INPUT y APPLET o proporcionando texto equivalente en el contenido de los
elementos OBJECT Y APPLET, longdesc con IMG o FRAME en el caso de
grficas complejas, o alt con AREA o el elemento MAP en el caso de mapas de
imagen.

2/ No se debe distinguir informacin importante solamente con colores
Por ejemplo, en el caso de los enlaces, si slo cambiramos el color, sin usar el
subrayado o el texto en negrita, aquellas personas daltnicas o con problemas
para distinguir colores no sabran que es un enlace. Asimismo, no se deben usar
colores para el texto que no se diferencien suficientemente del fondo.

3/ Es necesario marcar los documentos Web con una correcta estructuracin.
Asimismo, es conveniente usar hojas de estilo para la presentacin y
maquetacin que con elementos y atributos de presentacin, como tablas.
Es imprescindible seguir estas recomendaciones aunque algunos navegadores
antiguos no las soporten correctamente. Adems, en el caso de que el
navegador del usuario no puede leer correctamente el css o se prefiera
desactivarlo, el documento resultante tendr una estructura lgica y totalmente
compresible si hemos usado correctamente las etiquetas (por ejemplo, H1 para
los ttulos principales, listas para los mens o listas de enlaces, etc).
Se deben usar medidas relativas y no absolutas para algunos contenidos de la
web, sobre todo textos.

4/ Es conveniente aclarar el lenguaje usado en el documento mediante los
atributos lang, (en XML, xml:lang).
Puede ocurrir, tambin, que un documento tenga una lengua base pero tambin
frases o prrafos en otros idiomas. En estos casos tambin debe aadirse el
atributo correspondiente.

5/ Solamente se usarn tablas para mostrar datos tabulados.


25 / 31
Ls pginas maquetadas con tablas presentan muchos problemas de lectura a
los navegadores de voz (usados por algunos discapacitados visuales o fsicos).

6/ Ls pginas con elementos tecnolgicos nuevos deben poderse entender
tambin sin ellos, o mostrar contenido alternativo sobre todo si es informacin
relevante.
Por ejemplo, la pgina web debe ser accesible y comprensible aunque se tengan
desactivados los css o el javascript.

7/ Hay que asegurarse de que el usuario tendr siempre el control de la pgina.
Por ejemplo, las autoactualizaciones o refrescos de pantalla, animaciones
demasiado rpidas o textos corriendo de un lado a otro sin control del usuario
(los lectores de pantalla no leen texto en movimiento), destellos que pueden
perjudicar a usuarios con problemas nerviosos o de epilepsia, etc.
Asimismo se debe avisar al usuario de que se le abrir una ventana nueva
cuando d a un enlace determinado. En el caso de la web que nos ocupa, esto
se hace con una pequea flecha que seala hacia arriba y un texto alternativo
alt adecuado.

8/ La pgina debe ser accesible independientemente del dispositivo de acceso.
Aparte de los navegadores ms comunes, existen navegadores de voz, aparatos
que permiten pulsar el teclado sin manos, etc. Se debe poder acceder a
cualquier parte de la web con la tecla tabulador o desactivando el css,
programacin tipo javascript, etc. Es conveniente proporcionar enlaces directos a
algunas secciones importantes mediante atajos de teclado accesskey.

9/ Si no es posible hacer accesible el contenido, hay que proporcionar una
pgina alternativa con contenido accesible.
Es lo que conocemos como versin slo texto que aparece en numerosas
webs. De todos modos, es mejor evitar esta solucin, ya que nos obligar a tener
que actulizar el contenido por duplicado.

10/ Incluir texto de ejemplo en las cajas de texto, formularios, etc.

11/ Usar el cdigo correctamente (HTML, XHTML, CSS, etc) asegura una buena
parte de la accesibilidad de una web.
Revisando webs como la citada www.w3.org es sencillo ponerse al da sobre
cdigo obsoleto, recomendaciones, etc.

12/ Proporcionar informacin sobre la estructura de la web, con mapas de web,
de contenidos, barras de navegacin coherentes y sencillas, trminos de uso
habitual evitando tecnicismos o lenguaje complicado, poco conocido, demasiado
tcnico o enrevesado.


26 / 31
En lo posible evitar expresiones vacas de significado, como pinche aqui o
similar, informando al usuario siempre de lo que suceder a continuacin.

13/ Parte de la accesibilidad de una pgina web viene dada por el sentido
comn. Es decir: Lenguaje claro y sencillo, estructura lgica, comprensin
independiente del dispositivo y de la capacidad fsica.



27 / 31
+ Accesibilidad y usabilidad | LIONDAU, LSSICE

Legislacin espaola sobre accesibilidad para la Sociedad de la Informacin (resumen
de la Fundacin Sidar . www.sidar.org):

En cuanto a legislacin especfica sobre accesibilidad en Espaa, contamos con:

* LEY 51/2003, de 2 de diciembre, de igualdad de oportunidades, no discriminacin
y accesibilidad universal de las personas con discapacidad.

Conocida como LIONDAU, esta ley viene a llenar el vaco existente en Espaa de un
marco legal amplio y general, similar al que proporcionan en otros pases leyes
similares.

La LIONDAU se basa y pone de relieve los conceptos de: No discriminacin, accin
positiva y accesibilidad universal.

La ley prev, adems, la regulacin de los efectos de la lengua de signos, el
reforzamiento del dilogo social con las asociaciones representativas de las personas
con discapacidad mediante su inclusin en el Real Patronato y la creacin del Consejo
Nacional de la Discapacidad, y el establecimiento de un calendario de accesibilidad
por ley para todos los entornos, productos y servicios nuevos o ya existentes.

Uno de los cambios ms relevantes respecto a la legislacin anterior, recogido en el
artculo 20 de la ley, es la inversin de la carga de la prueba, por la que ser el
demandado, y no el demandante, quien deber probar su inocencia ante un posible
caso de discriminacin por razn de discapacidad.

La Ley establece, la obligacin gradual y progresiva de que todos los entornos,
productos y servicios deben ser abiertos, accesibles y practicables para todas las
personas y dispone plazos y calendarios para realizacin de las adaptaciones
necesarias.

Respecto a los productos y servicios de la Socieddad de la Informacin la ley
establece:
Disposicin final sptima. Condiciones bsicas de accesibilidad y no discriminacin
para el acceso y utilizacin de las tecnologas, productos y servicios relacionados con
la sociedad de la informacin y medios de comunicacin social.
1. En el plazo de dos aos desde la entrada en vigor de esta ley, el Gobierno
aprobar, segn lo previsto en su artculo 10, unas condiciones bsicas de
accesibilidad y no discriminacin para el acceso y utilizacin de las tecnologas,
productos y servicios relacionados con la sociedad de la informacin y de cualquier


28 / 31
medio de comunicacin social, que sern obligatorias en el plazo de cuatro a seis aos
desde la entrada en vigor de esta ley para todos los productos y servicios nuevos, y en
el plazo de ocho a diez aos para todos aquellos existentes que sean susceptibles de
ajustes razonables.
2. En el plazo de dos aos desde la entrada en vigor de esta ley, el Gobierno
deber realizar los estudios integrales sobre la accesibilidad a dichos bienes o
servicios que se consideren ms relevantes desde el punto de vista de la no
discriminacin y accesibilidad universal.

Y favoreciendo la formacin en diseo para todos:
Disposicin final dcima. Currculo formativo sobre accesibilidad universal y formacin
de profesionales.
El Gobierno, en el plazo de dos aos a partir de la entrada en vigor de esta ley,
desarrollar el curriculo formativo en diseo para todos, en todos los programas
educativos, incluidos los universitarios, para la formacin de profesionales en los
campos del diseo y la construccin del entorno fsico, la edificacin, las
infraestructuras y obras pblicas, el transporte, las comunicaciones y
telecomunicaciones y los servicios de la sociedad de la informacin.
Para administrar la gradualidad en la puesta en marcha de la LIONDAU se consider
conveniente la elaboracin de instrumentos de planificacin, y al tiempo de su
redaccin se disearon dos planes: el Plan Nacional de Accesibilidad 2004-2012 y el
II Plan de Accin para las personas con discapacidad 2003-2007.
* LEY 34/2002, de 11 de julio, de servicios de la sociedad de la informacin y de
comercio electrnico (LSSICE). Publicada en el B.O.E. el 12 de julio. Entrando en vigor
a los tres meses de su publicacin (Es decir el 12 de octubre de 2002), excepto las
disposiciones adicional sexta y finales primera, segunda, tercera y cuarta de esta Ley
que entrarn en vigor el da siguiente al de su publicacin en el Boletn Oficial del
Estado.
Sobre accesibilidad la ley dice, en sus disposiciones adicionales:
Quinta. Accesibilidad para las personas con discapacidad y de edad avanzada a la
informacin proporcionada por medios electrnicos.
Uno. Las Administraciones Pblicas adoptarn las medidas necesarias para que la
informacin disponible en sus respectivas pginas de Internet pueda ser accesible a
personas con discapacidad y de edad avanzada de acuerdo con los criterios de
accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de
2005. Asimismo, podrn exigir que las pginas de Internet cuyo diseo o
mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.
Dos. Igualmente, se promover la adopcin de normas de accesibilidad por los
prestadores de servicios y los fabricantes de equipos y software, para facilitar el
acceso de las personas con discapacidad o de edad avanzada a los contenidos
digitales.
Puede descargarse, en formato pdf, el BOCG del 3 de julio de 2002, en el que se
recoge el texto de la ley y su aprobacin. O puede verse la digitalizacin del B.O.E.,


29 / 31
que hace la Universidad de Alicante, tambin en formato pdf en:
http://www.cde.ua.es/boe/20020712.htm

Evolucin de la LSSICE
9 de mayo de 2002 se aprob, por 173 votos a favor y 118 en contra, en el Pleno del
Congreso de los Diputados, el Proyecto de Ley de Servicios de la Sociedad de la
Informacin y de Comercio Electrnico. El 27 de junio de 2002 se aprobaron las
enmiendas al artculo 5 apartado 2 y nueva Disposicin Adicional Sexta, punto3,
prrafo tercero; al artculo 17, apartado 2; y el resto de las enmiendas del Senado
siendo aprobada definitivamente la LSSI.

Puede leerse el dictamen de la Comisin de Ciencia y Tecnologa, y el texto completo
de la ley en: BOLETN OFICIAL DE LAS CORTES GENERALES (formato html) o
descargar el documento en formato pdf: Dictamen de la Comisin de Ciencia y
Tecnologa
El Dictamen emitido por la Comisin de Ciencia y Tecnologa sobre el Proyecto de Ley
de servicios de la sociedad de la informacin y de comercio electrnico (nm. expte.
121/000068) recoge que: Asimismo, se contempla en la Ley una serie de previsiones
orientadas a hacer efectiva la accesibilidad de las personas con discapacidad a la
informacin proporcionada por medios electrnicos, y muy especialmente a la
informacin suministrada por las administraciones pblicas, compromiso al que se
refiere la resolucin del Consejo de la Unin Europea de 25 de marzo de 2002, sobre
accesibilidad de los sitios web pblicos y de su contenido.
La Ley prev sanciones, como las contempladas en el:

Artculo 8. Restricciones a la prestacin de servicios.
1. En caso de que un determinado servicio de la sociedad de la informacin
atente o pueda atentar contra los principios que se expresan a continuacin, los
rganos competentes para su proteccin, en ejercicio de las funciones que tengan
legalmente atribuidas, podrn adoptar las medidas necesarias para que se interrumpa
su prestacin o para retirar los datos que los vulneran.
Los principios a que alude este apartado son los siguientes:
...
c) el respeto a la dignidad de la persona y al principio de no discriminacin por
motivos de raza, sexo, religin, opinin, nacionalidad, discapacidad o cualquier otra
circunstancia personal o social,

Y adems, promueve la creacin de cdigos de conducta que incluyan:
Artculo 17. Cdigos de conducta.
1. Las Administraciones pblicas impulsarn, a travs de la coordinacin y el
asesoramiento, la elaboracin y aplicacin de cdigos de conducta voluntarios, por


30 / 31
parte de las corporaciones, asociaciones u organizaciones comerciales, profesionales
y de consumidores, en las materias reguladas en esta Ley. La Administracin General
del Estado fomentar, en especial, la elaboracin de cdigos de conducta de mbito
comunitario o internacional.

Sobre su elaboracin dice: ...
2. En la elaboracin de dichos cdigos, habr de garantizarse la participacin de
las asociaciones de consumidores y usuarios y la de las organizaciones
representativas de personas con discapacidades fsicas o psquicas, cuando afecten a
sus respectivos intereses.
Cuando su contenido pueda afectarles, los cdigos de conducta tendrn
especialmente en cuenta la proteccin de los menores y de la dignidad humana,
pudiendo elaborarse, en caso necesario, cdigos especficos sobre estas materias.
3. Los cdigos de conducta a los que hacen referencia los apartados
precedentes debern ser accesibles por va electrnica. Se fomentar su traduccin a
otras lenguas oficiales en la Comunidad europea, con objeto dedarles mayor difusin.

Y tambin, la Ley en sus:
DISPOSICIONES ADICIONALES
...
Quinta (nueva). Accesibilidad para las personas con discapacidad y de edad
avanzada a la informacin proporcionada por medios electrnicos.
Uno. Las Administraciones Pblicas adoptarn las medidas necesarias para que
la informacin disponible en sus respectivas pginas de Internet pueda ser accesible a
personas con discapacidad y de edad avanzada de acuerdo con los criterios de
accesibilidad al contenido generalmente reconocidos antes del 31 de diciembre de
2005. Asimismo, podrn exigir que las pginas de Internet cuyo diseo o
mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.
Dos. Igualmente, se promover la adopcin de normas de accesibilidad por los
prestadores de servicios y los fabricantes de equipos y software, para facilitar el
acceso de las personas con discapacidad o de edad avanzada a los contenidos
digitales.

* El 15 de marzo de 2001 fue aprobada por unanimidad en el Congreso de los
Diputados la Proposicin No de Ley, presentada por el diputado Jordi Jan en nombre
del Grupo Parlamentario CIU, para facilitar el acceso de las personas mayores y con
discapacidad en el protal de Internet de la Administracin General del Estado. Puede
descargarse en formato pdf el diario de sesiones que recoge al presentacin de esta
proposicin.



31 / 31
+ Accesibilidad y usabilidad | Enlaces recomendados

http://www.w3.org/WAI/
http://www.sidar.org
http://www.e-kaw.org/index.jsp
http://joeclark.org/book/sashay/serialization/
http://www.manolo.net/
http://www.accessify.com/default.asp
http://www.discapnet.es/Discapnet/CAstellano/default.htm
http://www.lssi.es/
http://www.alistapart.com

Css

Uploaded by

Document Information

Copyright

Available Formats

Share this document

Share or Embed Document

Sharing Options

Did you find this document useful?

Is this content inappropriate?

Copyright:

Available Formats

Css

Uploaded by

Copyright:

Available Formats

Unidad de Administracin Electrnica y Web

You might also like