manual de uso de las hojas de estilo en cascada y consejos

Unidad de Administración Electrónica y Web
Servicios Informáticos
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 previsualización en diferentes programas de creación de
páginas web. Ventajas de la construcción correcta y con estándares de un
sitio web.
- Estudio del CSS actual, siquiendo la estructura de la interfaz.
- Cómo realizar las actualizaciones futuras.
- Relación de enlaces y libros recomendados.
+ Accesibilidad y usabilidad:
- Aplicación de las recomendaciones de la WAI en la plantilla, prioridad 1 y
2.
- LIONDAU, LSSICE.
- Relación de enlaces y libros recomendados.
1 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ Manual de CSS | Aviso sobre previsualización en diferentes programas de
creación de páginas web. Ventajas de la construcción correcta y con estándares
de un sitio web.
Aviso: lamentablemente, todavía son muchos los programas de software que no ofrecen
soporte visual adecuado a las páginas 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 visualización 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 visualización correcta.
Las ventajas de contruir un sitio con CSS son muchas, aqui citaremos brevemente
algunas, pero recomendamos visitar la página web de World Wide Consortium
(http://www.w3.org y http://www.w3c.es para su oficina en españa):
- Las páginas web hechas con CSS son más accesibles.
- Son mucho más fáciles de actualizar, al centralizar todo lo referente a su
presentación y maquetación en un sólo 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 código, y por tanto aligeran la carga de los servidores que las contienen.
- Es, sencillamente, la forma correcta de hacerlo, según 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 mínimamente adecuado a
estas tecnologías. Aún este soporte no es completo y correcto en la mayoría, pero
en un futuro muy próximo tendrán que cumplir con la normativa y adaptar su
código.
2 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ 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 página, la situación y tamaño de las tres capas (div) que estructuran la página (de
izquierda a derecha) leftnav, content y rightnav, que a su vez están metidas en una capa
que las mantiene a todas centradas, container. Asimismo se definen los colores para los
enlaces, en posición normal, al pasar el ratón y los visitados.
Los scrollbar sólo 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:
width:
margin:
padding:
border-top:
}
left;
165px; /* 155 */
0px;
0px;
5px solid #005AAD;
3 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
#content {
float:
width:
margin:
padding:
color:
font-size:
}
left;
456px; /* 466 */
0px;
0px;
#445464;
0.7em;
#content a{
color:
text-decoration:
font-weight:
}
#0019A8;
none;
bold;
#content a:hover{
color:
text-decoration:
font-weight:
}
#content a:visited{
color: #000066;
text-decoration:
font-weight:
}
#0019A8;
underline;
bold;
underline;
bold;
#rightnav {
float:
width:
margin:
padding:
border-top:
color:
font-size:
}
#footer
left;
158px;
0px;
0px;
5px solid #005AAD;
#1E2D3B;
0.7em;
{
clear:
margin:
padding:
height:
line-height:
font-size:
background:
}
both;
0px 0px -4px 0px;
0px;
6px;
0px;
0px;
url(footer.gif) no-repeat 0px 0px;
4 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
a
{
text-decoration:
none;
color:
#0019AC;
font-weight:
bold;
}
a:hover {
text-decoration: underline;
}
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 contrucción correcta, el menú está formado por una lista
principal no numerada (ul#menu), con listas anidadas en su interior. Según 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;
letter-spacing: 0.1em;
}
ul#menu li a, ul#menu li h2, ul#menu li h3 {
color:
#1E2D3B;
text-decoration:
none;
display:
block;
border-left:
5px solid #FFBA00;
5 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
margin:
padding:
background:
font-size:
font-weight:
}
ul#menu li h2 {
color: #504718;
font-size:
1.0em;
letter-spacing: 0.2em;
}
0px;
4px;
#FFD600;
1em;
bold;
ul#menu li ul
{
list-style-image:
url(“li.gif”);
background:
#fff;
width:
143px; /* 133 */
margin:
5px 0px 5px 20px;
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;
font-weight:
normal;
border:
0px;
background:
#fff;
}
ul#menu li ul li a:hover {
text-decoration: underline;
}
6 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
ul#menu li ul li.last a {
color:
#0018AD;
}
ul#menu li ul li ul {
list-style-image:
url(“licircle.gif”);
width:
120px; /* 110 */
margin:
5px 0px 5px 15px;
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;
font-weight:
normal;
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 sitúa debajo de la
cabecera (Portada, Directorio, Mapa web, Correo, Intranet, Agenda y Contacto).
/******** MENU SECUNDARIO (PORTADA, DIRECTORIO, MAPA WEB, ETC)
***********/
ul#menusecundario {
width:
margin:
padding:
list-style-type: none;
text-align:
border-bottom:
font-family:
font-size:
letter-spacing: 0.1em;
}
ul#menusecundario li {
456px; /* 466 */
0px;
5px 0px;
center;
1px solid #848484;
Arial, Helvetica, sans-serif;
0.9em;
7 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
display:
padding:
margin:
border-right:
}
ul#menusecundario li.last {
border-right:
}
ul#menusecundario li a {
color:
}
ul#menusecundario li a:hover {
text-decoration:
}
ul#menusecundario li img{
margin: 0px;
padding: 0px;
}
ul#menu h2 {
font-weight:
font-family:
}
inline;
0px 2px 0px 2px;
0px 1px 0px 1px;
1px solid #848484;
0px;
#0019A8;
underline;
bold;
Arial, Helvetica, sans-serif;
La miga de pan es la lista de enlaces que encontramos en cada página detallándonos en que
lugar exacto de la estructura general de la web estamos.
/*************
MIGA DE PAN *************/
#breadcrumb
{
padding:
color:
}
10px;
#1E2D3B;
Los estilos bajo el div “content” son aquellos que visualmente ocupan el contenido central.
Al ser el área donde los contenidos previsiblemente cambiarán más a menudo, se definen
estilos para aquellas etiquetas HTML más comunes a la hora de estructurar correctamente una
web: titulares de primer orden(H1), segundo (H2), etc, imágenes, párrafos, listas, miga de pan
(breadcrumb); además se ocupan de algunos casos particulares, como las noticias, archivo de
noticias, etc.
/************* CONTENIDO CENTRAL *************/
h1
{
8 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
p, h2
display:
}
{
margin:
padding:
}
none;
font-family:
font-size:
font-weight:
color:
letter-spacing: 0em;
}
“Times New Roman”, Times, serif;
1.8em;
normal;
#EFAD00;
margin:
padding:
font-family:
font-size:
font-weight:
color:
letter-spacing: 0em;
}
5px;
5px;
“Times New Roman”, Times, serif;
1.5em;
bold;
#56595C;
font-weight:
font-size:
margin-bottom:
padding:
}
bold;
1em;
0px;
0px 10px 5px 10px;
clear:
border-top:
}
left;
1px dashed #525A5A;
0px;
0px 10px 10px 10px;
h2 {
#content h3 {
h4 {
h3.linea
h3.saludo
{
{
text-align: center;
border-top: 1px dotted #848484;
}
#logo
#mosaico
{
margin:
border: 0px;
}
0px 0px 0px 5px;
{
margin:
}
#mosaicomini
10px 0px 0px 15px;
{
9 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
margin:
10px 0px 0px 0px;
color:
#EFAD00;
}
/************* SITUACION DEL BOTON SUBIR *************/
#content p.subir {
text-align:center;
margin: 30px 5px 20px 5px;
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 {
margin:
}
0px 2px 12px 30px;
#content ul.lista li ul{
margin:
}
10px 0px 10px 5px;
/************* TABLAS EN EL BLOQUE CENTRAL *************/
#content table {
width:
90%;
margin: 10px auto;
}
#content table td{
border:
1px solid #FFD600;
padding:
4px 4px 4px 4px;
vertical-align: middle;
font-weight:
normal;
}
#content table tr.descripcion {
font-weight:
bold;
text-align:
left;
padding:
10px 4px 10px 4px;
}
Las noticias podrán estar en la página de inicio o en la dedicada a ampliar las mismas o
guardar el archivo, actualidad.
10 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
/*********** NOTICIAS DE LA PÁGINA DE INICIO Y DE LA PÁGINA 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 */
list-style-image:
none;
list-style-type: none;
float:
left;
width:
210px;
margin:
5px 0px 5px 20px;
margin:
5px 0px 5px 10px;
padding:
0px;
}
#content .pastnews {
margin: 10px;
padding: 5px;
height: 100%;
background-color: white;
display: block;
overflow: hidden;
}
#content .pastnews table {
float: left;
width: 160px;
margin: 5px 35px 5px 5px;
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;
}
11 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
#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 {
margin:
0px 0px 10px 10px;
color:
#EFAD00;
float: left;
padding: 0px 20px 0px 0px;
}
La página 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 {
margin: 30px 5px 5px 0px;
}
#content div.galeria img.left
{
margin: 0px;
padding: 5px 10px;
float: left;
}
#content div.galeria img.right
{
margin: 0px;
padding: 5px 10px;
float: right;
12 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
}
#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 reseñan los datos principales de la misma, tanto en la
página 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;
letter-spacing: 0.1em;
line-height: 1.1em;
}
La columna derecha de la página contiene varios elementos que apoyan la información central
o añaden nuevas funcionalidades: enlaces relacionados, acceso a la galería de imágenes,
enlaces internos de la Universidad o externos, etc.
/********
*********/
BARRA DE NAVEGACION DE LA DERECHA: ENLACES RELACIONADOS, ETC
13 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
#rightnav img
{
margin:
padding:
}
0px;
5px 0px 5px 5px;
#rightnav ul {
margin:
padding:
border-bottom:
}
#rightnav ul li {
padding:
}
ul#enlacesgraficos {
margin:
padding:
border:
0px;
}
0px;
0px 0px 5px 25px;
1px dashed #525A5A;
0px 5px 5px 0px;
0px;
0px;
ul#enlacesgraficos li {
list-style-image:
none;
list-style-type: none;
}
/* avoid ie5.0 (but needed in ie5.5+): */
html*ul#enlacesgraficos li, html*ul#galeria li {
height:
100%;
}
ul#enlacesgraficos li a {
display:
block;
border-bottom:
1px dashed #525A5A;
padding:
5px 0px 5px 10px;
}
ul#enlacesgraficos li, ul#enlacesgraficos li a img
{
margin:
0px;
padding:
0px;
border:
0px;
}
#rightnav ul#banderas {
width:
156px;
margin:
0px;
padding:
0px 0px 1px 0px;
list-style-type: none;
}
#rightnav ul#banderas li{
display: inline;
list-style-type: circle;
14 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
}
.enlacesimg {
border: 0px;
}
#rightnav .enlacesimg {
margin: 0px 2px;
padding: 0px;
vertical-align: baseline;
}
Estilos del campo de búsqueda del área superior derecha.
/************* FORMULARIO DE BUSQUEDA *************/
form
{
margin:
0px;
padding:
0px;
border-bottom:
1px solid #848484;
}
label
{
display:
none;
}
input
{
margin:
0px 0px 15px 10px;
_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;
text-decoration:
none;
font-weight:
bold;
font-size:
1em;
}
Estilos para los iconos que amplían o disminuyen el tamaño de letra
/********************* ICONOS DE AMPLIACION DE TEXTO **************************/
#txtsizer img
{
display:
inline;
15 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
#txtsizer
width:
height:
margin:
padding:
}
{
border-bottom:
padding:
}
24px;
24px;
0px;
0px;
1px dashed #525A5A;
5px 0px 5px 10px;
Estilos para la página 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-family: “Times New Roman”, Times, serif;
font-size: 1.5em;
font-weight: bold;
text-align: right;
}
2/ Galery.css
Estilos para las páginas de fotografías ampliadas (css aparte).
/************* BASIC LAYOUT *************/
html, body {
height:
100%;
margin:
0px;
padding:
0px;
font-family:
Arial, Helvetica, sans-serif;
_font-size:
1em;
letter-spacing: 0.1em;
scrollbar-3dlight -color:#000000;
scrollbar-arrow-color: #000000;
scrollbar-base-color:#FFD600;
scrollbar-darkshadow-color:#ffffff;
scrollbar-face-color:#ffffff;
16 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
scrollbar-highlight-color:#ffffff;
scrollbar-shadow-color:#000000;
}
a
a:hover
{
text-decoration:
color:
font-weight:
}
none;
#0019AC;
bold;
{
text-decoration: underline;
}
h3 {
padding: 5px;
border-bottom:
font-size:
}
1px dashed #525A5A;
1.3em;
#galeriacontainer {
width:
650px; /* 680 */
margin:
0px auto;
padding:
0px 10px 10px 10px;
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;
}
17 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ Manual de CSS | Cómo realizar actualizaciones futuras.
Esta web está pensada para que aquellas personas encargadas de su actualización no
necesiten hacer cambios en el código o en el css, más que añadir contenido. Una de las
principales ventajas del CSS es que se puede controlar el aspecto de una web de miles
de páginas con un sólo archivo, y de esta manera facilitar cualquier cambio de una
manera sencilla y muy rápida.
Como se comentaba anteriormente, los principales cambios afectarán al bloque central,
aunque también cambiarán los enlaces relacionados, e incluso, aunque con mucha
menos frecuencia, alguna sección del menú principal (columna izquierda). A
continuación aclaramos cómo 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
función de la actividad del usuario sobre los items de las mismas.
Para cambiar cualquier dato que aparezca en el menú sólo tenemos que saber esto:
1- Entre las etiquetas <h2> encontraremos los títulos que reúnen cada bloque temático
de contenidos, como por ejemplo, La Facultad, que aparecen con color corporativo de
fondo y nunca son enlaces. Siempre que necesitemos añadir un nuevo bloque de
enlaces deberemos crear una nueva etiqueta <h2> y a continuación 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 Presentación (dentro de la
Facultad). En este caso el titular se mete dentro de etiquetas <h3>, se crea una lista no
numerada despúes <ul>, y a ésta se le da la clase “desplegable”. De esta manera los
items que contenga Presentación se abrirán o cerrarán cuando el usuario haga click
sobre el.
<h3>Presentación</h3>
<ul class=”desplegable”>
<li>Texto de ejemplo</li>
</ul>
3- En los casos en los que nos hallemos en una página 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 habíamos añadido:
18 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
<h3>Presentación</h3>
<ul>
<li>Texto de ejemplo</li>
</ul>
4- Automáticamente todos los enlaces contenidos en el menú principal serán de un color
prefijado en el CSS, y todos los items que no sean enlace porque el usuario esté en esa
página (no tiene sentido que funcione el enlace a la página en la que nos hallemos)
tendrá otro color. Por esto no es necesario modificar nada en las etiquetas para añadir o
quitar color y asi distinguir la página que estemos viendo:
<h3>Presentación</h3>
<ul>
<li><a href=””> enlace</a></li>
<li>página 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 sólo 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 página de inicio
En esta página cambiarán a menudo las noticias del bloque central, y puede que algún
enlace inferior.
Para separar algunas áreas que, aunque estén dentro del bloque central, pertenecen a
contenidos distintos utilizaremos un titular que dibuja una línea superior punteada:
19 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
<h3 class=”linea”>Actualidad</h3>
Las noticias son también una lista no numerada, con el identificador único “id” de
“noticias”. Para añadir más noticias simplemente añadiremos un item <li></li> más a la
lista.
Es importante señalar que, al igual que sucede con las páginas web de periódicos online,
en la página 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 línea o dos,
para a continuación indicar al lector que bajo el enlace “más información” accederá a la
página de actualidad donde podrá, si lo desea, seguir leyendo sobre la noticia de su
interés.
<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 descripción de la noticia<a
href=”#”>más información</a></li>
<li><img src=”../css/liverde.gif” width=”6” height=”6” alt=”comienzo de noticia” />
<stron </ul>
Cualquier contenido que queremos añadir más abajo, en el caso de que sean enlaces
sueltos, no párrafos, se encajarán 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 página tendremos información o utilidades anexas al
contenido central. Todos ellos funcionan también como listas.
Hay casos, como el caso de Web Ct, que estos enlaces serán imágenes. En este caso
tendremos que seguir la siguiente estructura, añadiendo 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 páginas de la propia
Universidad o bien a páginas exteriores a la misma. En ambos casos, aparte de la
imagen inicial que los distingue, que no habrá que modificar, no será necesario añadir
ninguna clase más:
20 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
<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 Galería de imágenes y a la página de accesibilidad, no será
necesario modificarlos.
5/ Cambios en el contenido central en el resto de las páginas
En cualquiera de las páginas 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
Podría darse el caso de que haya un tercer nivel en profundidad dentro de la web, en
cuyo caso tendríamos 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 título principal de dicha página se colocará después 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 - Párrafos: dentro de las etiquetas normales para este tipo de contenido, <p>.
3 - Tablas: no es necesario añadir ninguna clase a la tabla, ya las tiene asignadas en el
CSS principal. Tan sólo, para que se distinga mejor, a la fila superior donde coloquemos
el título que describe el contenido de cada columna de la tabla, añadiremos la clase:
<tr class=”descripcion”>
21 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
Recordemos que hay que separar aquellas partes dentro de la misma página que sean
diferentes con:
<h3 class=”linea”>Titular</h3>
Para el botón de subir, añadiremos esto:
<p class=”subir”><a href=”#up”><img src=”../../images/subir.gif” alt=”subir al comienzo de
la página” width=”71” height=”28” border=”0” /></a></p>
Y antes de la miga de pan:
<a name=”up” id=”up”>
En algunas páginas se ha añadido al principio, después del título de la página, una
imagen que lleva la siguiente clase asignada (para que el resto de contenido en texto la
“rodee”):
<img src=”../../images/img_estudiante.jpg” width=”140” height=”100” class=”imagennivel”
/>
22 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ Manual de CSS | Relación 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º Páginas: 304
23 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ Accesibilidad y usabilidad | Aplicación de las recomendaciones de la WAI en la
plantilla, prioridad 1 y 2.
La Uiversidad de Alcalá, como ente público, está obligada a cumplir con unas mínimas
normas de accesibilidad que se le exigirán a partir de diciembre de este año (ver
apartado más adelante de LIONDAU, LSSICE). Para ello incluímos 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 función o propósito que el contenido visual o auditivo.
Esto quiere decir que todo aquel contenido visual (imágenes, animaciones,
gráficos, esquemas) o auditivo (explicaciones, locuciones, etc) tienen que tener
una alternativa textual en el código, 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
gráficas complejas, o “alt” con AREA o el elemento MAP en el caso de mapas de
imagen.
2/ No se debe distinguir información importante solamente con colores
Por ejemplo, en el caso de los enlaces, si sólo cambiáramos el color, sin usar el
subrayado o el texto en negrita, aquellas personas daltónicas o con problemas
para distinguir colores no sabrían 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 estructuración.
Asimismo, es conveniente usar hojas de estilo para la presentación y
maquetación que con elementos y atributos de presentación, como tablas.
Es imprescindible seguir estas recomendaciones aunque algunos navegadores
antiguos no las soporten correctamente. Además, 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 lógica y totalmente
compresible si hemos usado correctamente las etiquetas (por ejemplo, H1 para
los títulos principales, listas para los menús 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, también, que un documento tenga una lengua base pero también
frases o párrafos en otros idiomas. En estos casos también debe añadirse el
atributo correspondiente.
5/ Solamente se usarán tablas para mostrar datos tabulados.
24 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
Lás páginas maquetadas con tablas presentan muchos problemas de lectura a
los navegadores de voz (usados por algunos discapacitados visuales o físicos).
6/ Lás páginas con elementos tecnológicos nuevos deben poderse entender
también sin ellos, o mostrar contenido alternativo sobre todo si es información
relevante.
Por ejemplo, la página 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 página.
Por ejemplo, las autoactualizaciones o refrescos de pantalla, animaciones
demasiado rápidas 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 pequeña flecha que señala hacia arriba y un texto alternativo
“alt” adecuado.
8/ La página debe ser accesible independientemente del dispositivo de acceso.
Aparte de los navegadores más 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,
programación tipo javascript, etc. Es conveniente proporcionar enlaces directos a
algunas secciones im portantes mediante atajos de teclado “accesskey”.
9/ Si no es posible hacer accesible el contenido, hay que proporcionar una
página alternativa con contenido accesible.
Es lo que conocemos como “versión sólo texto” que aparece en numerosas
webs. De todos modos, es mejor evitar esta solución, 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 código 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 día sobre
código obsoleto, recomendaciones, etc.
12/ Proporcionar información sobre la estructura de la web, con mapas de web,
de contenidos, barras de navegación coherentes y sencillas, términos de uso
habitual evitando tecnicismos o lenguaje complicado, poco conocido, demasiado
técnico o enrevesado.
25 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
En lo posible evitar expresiones vacías de significado, como “pinche aqui” o
similar, informando al usuario siempre de lo que sucederá a continuación.
13/ Parte de la accesibilidad de una página web viene dada por el sentido
común. Es decir: Lenguaje claro y sencillo, estructura lógica, comprensión
independiente del dispositivo y de la capacidad física.
26 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ Accesibilidad y usabilidad | LIONDAU, LSSICE
Legislación española sobre accesibilidad para la Sociedad de la Información (resumen
de la Fundación Sidar . www.sidar.org):
“En cuanto a legislación específica sobre accesibilidad en España, contamos con:
* LEY 51/2003, de 2 de diciembre, de igualdad de oportunidades, no discriminación
y accesibilidad universal de las personas con discapacidad.
Conocida como “LIONDAU”, esta ley viene a llenar el vacío existente en España de un
marco legal amplio y general, similar al que proporcionan en otros países leyes
similares.
La LIONDAU se basa y pone de relieve los conceptos de: No discriminación, acción
positiva y accesibilidad universal.
La ley prevé, además, la regulación de los efectos de la lengua de signos, el
reforzamiento del diálogo social con las asociaciones representativas de las personas
con discapacidad mediante su inclusión en el Real Patronato y la creación 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 más relevantes respecto a la legislación anterior, recogido en el
artículo 20 de la ley, es la inversión 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 discriminación por razón de discapacidad.
La Ley establece, la obligación 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 realización de las adaptaciones
necesarias.
Respecto a los productos y servicios de la Socieddad de la Información la ley
establece:
Disposición final séptima. Condiciones básicas de accesibilidad y no discriminación
para el acceso y utilización de las tecnologías, productos y servicios relacionados con
la sociedad de la información y medios de comunicación social.
1. En el plazo de dos años desde la entrada en vigor de esta ley, el Gobierno
aprobará, según lo previsto en su artículo 10, unas condiciones básicas de
accesibilidad y no discriminación para el acceso y utilización de las tecnologías,
productos y servicios relacionados con la sociedad de la información y de cualquier
27 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
medio de comunicación social, que serán obligatorias en el plazo de cuatro a seis años
desde la entrada en vigor de esta ley para todos los productos y servicios nuevos, y en
el plazo de ocho a diez años para todos aquellos existentes que sean susceptibles de
ajustes razonables.
2. En el plazo de dos años 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 más relevantes desde el punto de vista de la no
discriminación y accesibilidad universal.
Y favoreciendo la formación en diseño para todos:
Disposición final décima. Currículo formativo sobre accesibilidad universal y formación
de profesionales.
El Gobierno, en el plazo de dos años a partir de la entrada en vigor de esta ley,
desarrollará el curriculo formativo en «diseño para todos», en todos los programas
educativos, incluidos los universitarios, para la formación de profesionales en los
campos del diseño y la construcción del entorno físico, la edificación, las
infraestructuras y obras públicas, el transporte, las comunicaciones y
telecomunicaciones y los servicios de la sociedad de la información.
Para administrar la gradualidad en la puesta en marcha de la LIONDAU se consideró
conveniente la elaboración de instrumentos de planificación, y al tiempo de su
redacción se diseñaron dos planes: el “Plan Nacional de Accesibilidad 2004-2012” y el
“II Plan de Acción para las personas con discapacidad 2003-2007”.
* LEY 34/2002, de 11 de julio, de servicios de la sociedad de la información y de
comercio electrónico (LSSICE). Publicada en el B.O.E. el 12 de julio. Entrando en vigor
a los tres meses de su publicación (Es decir el 12 de octubre de 2002), excepto las
disposiciones adicional sexta y finales primera, segunda, tercera y cuarta de esta Ley
que entrarán en vigor el día siguiente al de su publicación en el «Boletín 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
información proporcionada por medios electrónicos.
Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que la
información disponible en sus respectivas páginas 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, podrán exigir que las páginas de Internet cuyo diseño o
mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.
Dos. Igualmente, se promoverá la adopción 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 aprobación. O puede verse la digitalización del B.O.E.,
28 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
que hace la Universidad de Alicante, también en formato pdf en:
http://www.cde.ua.es/boe/20020712.htm
Evolución 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
Información y de Comercio Electrónico. El 27 de junio de 2002 se aprobaron las
enmiendas al artículo 5 apartado 2 y nueva Disposición Adicional Sexta, punto3,
párrafo tercero; al artículo 17, apartado 2; y el resto de las enmiendas del Senado
siendo aprobada definitivamente la LSSI.
Puede leerse el dictamen de la Comisión de Ciencia y Tecnología, y el texto completo
de la ley en: BOLETÍN OFICIAL DE LAS CORTES GENERALES (formato html) o
descargar el documento en formato pdf: Dictamen de la Comisión de Ciencia y
Tecnología
El Dictamen emitido por la Comisión de Ciencia y Tecnología sobre el Proyecto de Ley
de servicios de la sociedad de la información y de comercio electrónico (núm. 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
información proporcionada por medios electrónicos, y muy especialmente a la
información suministrada por las administraciones públicas, compromiso al que se
refiere la resolución del Consejo de la Unión Europea de 25 de marzo de 2002, sobre
accesibilidad de los sitios web públicos y de su contenido.
La Ley prevé sanciones, como las contempladas en el:
Artículo 8. Restricciones a la prestación de servicios.
1. En caso de que un determinado servicio de la sociedad de la información
atente o pueda atentar contra los principios que se expresan a continuación, los
órganos competentes para su protección, en ejercicio de las funciones que tengan
legalmente atribuidas, podrán adoptar las medidas necesarias para que se interrumpa
su prestación 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 discriminación por
motivos de raza, sexo, religión, opinión, nacionalidad, discapacidad o cualquier otra
circunstancia personal o social,
Y además, promueve la creación de códigos de conducta que incluyan:
Artículo 17. Códigos de conducta.
1. Las Administraciones públicas impulsarán, a través de la coordinación y el
asesoramiento, la elaboración y aplicación de códigos de conducta voluntarios, por
29 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
parte de las corporaciones, asociaciones u organizaciones comerciales, profesionales
y de consumidores, en las materias reguladas en esta Ley. La Administración General
del Estado fomentará, en especial, la elaboración de códigos de conducta de ámbito
comunitario o internacional.
Sobre su elaboración dice: ...
2. En la elaboración de dichos códigos, habrá de garantizarse la participación de
las asociaciones de consumidores y usuarios y la de las organizaciones
representativas de personas con discapacidades físicas o psíquicas, cuando afecten a
sus respectivos intereses.
Cuando su contenido pueda afectarles, los códigos de conducta tendrán
especialmente en cuenta la protección de los menores y de la dignidad humana,
pudiendo elaborarse, en caso necesario, códigos específicos sobre estas materias.
3. Los códigos de conducta a los que hacen referencia los apartados
precedentes deberán ser accesibles por vía electrónica. Se fomentará su traducción a
otras lenguas oficiales en la Comunidad europea, con objeto dedarles mayor difusión.
Y también, la Ley en sus:
DISPOSICIONES ADICIONALES
...
Quinta (nueva). Accesibilidad para las personas con discapacidad y de edad
avanzada a la información proporcionada por medios electrónicos.
Uno. Las Administraciones Públicas adoptarán las medidas necesarias para que
la información disponible en sus respectivas páginas 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, podrán exigir que las páginas de Internet cuyo diseño o
mantenimiento financien apliquen los criterios de accesibilidad antes mencionados.
Dos. Igualmente, se promoverá la adopción 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 Proposición 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 Administración General del Estado”. Puede
descargarse en formato pdf el diario de sesiones que recoge al presentación de esta
proposición.
30 / 31
Unidad de Administración Electrónica y Web
Servicios Informáticos
+ 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
31 / 31