Universidad Mariano Gálvez de Guatemala

Elaboración de Páginas Web

Ingeniería En Sistemas

TECNOLOGÍAS W3C
Accesibilidad, CSS, Estándares Web e Independencia de
Dispositivos

Heldy Angelo Galindo Ventura 1090-08-2123

Ludwin Emmanuel Castro Alvarado 1090-08-1733
Angel Gehovany Salvador Tavico Mejía 1090-08-7026

18 de septiembre de 2010
 La accesibilidad de una página web es el grado de facilidad que tiene esa página para que la
información que contiene esté disponible para todo tipo de personas. Independientemente del tipo
de hardware, software, infraestructura de red, idioma, cultura, localización geográfica y capacidades
de los usuarios.

Con esta idea de accesibilidad nace la Iniciativa de Accesibilidad Web, conocida como WAI
(Web Accessibility Initiative). Se trata de una actividad desarrollada por el W3C, cuyo objetivo es
facilitar el acceso de las personas con discapacidad, desarrollando pautas de accesibilidad, mejorando
las herramientas para la evaluación y reparación de accesibilidad Web, llevando a cabo una labor
educativa y de concienciación en relación a la importancia del diseño accesible de páginas Web, y
abriendo nuevos campos en accesibilidad a través de la investigación en este área.

Las medidas a tomar para hacer más accesibles las páginas entran dentro de estas categorías:

Estructurales. HTML es un lenguaje de marcas estructural, si lo usamos para obtener una apariencia
visual, estamos deformando el significado de esas marcas, para obtener un resultado visual adecuada
debemos usar hojas de estilo CSS.

Navegación. La navegación debe ser por completamente funcional usando únicamente teclas y de
una fácil orientación.

Contenido alternativo. Todos los elementos visuales, sonidos, scripts y applets deberían tener un
texto alternativo que explique el contenido de los mismos.

Pautas de Accesibilidad Web

Estas pautas explican cómo hacer accesibles los contenidos de la Web a personas con
discapacidad. Las pautas están pensadas para todos los desarrolladores de contenidos de la Web. El
fin principal de estas pautas es promover la accesibilidad. De cualquier modo, siguiéndolas, se hará la
Web más asequible también para todos los usuarios, cualquiera que sea la aplicación de usuario que
esté utilizando.
1. Proporcione alternativas equivalentes para el contenido visual y auditivo: Proporcione un
contenido que, presentado al usuario, cumpla esencialmente la misma función o propósito que el
contenido visual o auditivo.

2. No se base sólo en el color: Asegúrese de que los textos y gráficos son comprensibles cuando se
vean sin color.

3. Utilice marcadores y hojas de estilo y hágalo apropiadamente. Marque los documentos con los
elementos estructurales apropiados. Controle la presentación con hojas de estilo en vez de con
elementos y atributos de presentación.

4. Identifique el idioma usado. Use marcadores que faciliten la pronunciación o interpretación de

texto abreviado o extranjero.

5. Cree tablas que se transformen correctamente. Asegure que las tablas tienen los marcadores
necesarios para transformarlas mediante navegadores accesibles y otras aplicaciones de usuario.

6. Asegúrese de que las páginas que incorporan nuevas tecnologías se transformen

correctamente. Asegúrese de que las páginas son accesibles incluso cuando no se soportan las
tecnologías más modernas o éstas estén desconectadas.

7. Asegure al usuario el control sobre los cambios de los contenidos tempo-dependientes.

Asegúrese de que los objetos o páginas que se mueven, parpadean, se desplazan o se actualizan
automáticamente, puedan ser detenidos o parados.

8. Asegure la accesibilidad directa de las interfaces de usuario incrustadas. Asegure que la interfaz
de usuario sigue los principios de un diseño accesible: funcionalidad de acceso independiente del
dispositivo, teclado operable, voz automática, etc.

9. Diseñe para la independencia del dispositivo. Utilice características que permitan la activación
de los elementos de la página a través de diversos dispositivos de entrada.
10. Utilice soluciones provisionales. Utilice soluciones de accesibilidad provisionales de forma que
las ayudas técnicas y los antiguos navegadores operen correctamente.

11. Utilice las tecnologías y pautas W3C. Utilice tecnologías W3C (de acuerdo con las
especificaciones) y siga las pautas de accesibilidad. Donde no sea posible utilizar una tecnología
W3C, o usándola se obtengan materiales que no se transforman correctamente, proporcione una
versión alternativa del contenido que sea accesible.

12. Proporcione información de contexto y orientación. Proporcione información de contexto y

orientativa para ayudar a los usuarios a entender páginas o elementos complejos.

13. Proporcione mecanismos claros de navegación. Proporcione mecanismos de navegación claros y

coherentes, (información orientativa, barras de navegación, un mapa del sitio, etc.) para
incrementar la probabilidad de que una persona encuentre lo que está buscando en un sitio.

14. Asegúrese de que los documentos sean claros y simples. Asegure que los documentos son claros
y simples para que puedan ser más fácilmente comprendidos.

El lenguaje HTML está limitado a la hora de aplicarle forma a un documento. Esto es así porque fue
concebido para otros usos (científicos sobre todo), distinto a los actuales, mucho más amplios.

Para solucionar estos problemas los diseñadores han utilizado técnicas tales como la utilización de
tablas imágenes transparentes para ajustarlas, utilización de etiquetas que no son estándares del
HTML y otras. Estas "trampas" han causado a menudo problemas en las páginas a la hora de su
visualización en distintas plataformas.

El modo de funcionamiento de las CSS consiste en definir, mediante una sintaxis especial, la forma de
presentación que le aplicaremos a:

• Un web entero, de modo que se puede definir la forma de todo el web de una sola vez.
• Un documento HTML o página, se puede definir la forma, en un pequeño trozo de código en la
cabecera, a toda la página.
• Una porción del documento, aplicando estilos visibles en un trozo de la página.
• Una etiqueta en concreto, llegando incluso a poder definir varios estilos diferentes para una sola
etiqueta. Esto es muy importante ya que ofrece potencia en nuestra programación. Podemos
definir, por ejemplo, varios tipos de párrafos: en rojo, en azul, con margenes, sin ellos...

Navegadores que lo soportan

Esta tecnología es bastante nueva, por lo que no todos los navegadores la soportan. En concreto, sólo
los navegadores de Netscape versiones de la 4 en adelante y de Microsoft a partir de la versión 3 son
capaces de comprender los estilos en sintaxis CSS. Además cabe destacar que no todos los
navegadores implementan las mismas funciones de hojas de estilos, por ejemplo, Microsoft Internet
Explorer 3 no soporta todo lo relativo a capas.

Esto quiere decir que debemos de usar esta tecnología con cuidado, ya que muchos usuarios no
podrán ver los formatos que apliquemos a las páginas con CSS. Así pues, utilizad las hojas de estilos
cuando estas no vayan a suponer un problema.

Aplicación de las Hojas de Estilo en Cascada

Pequeñas partes de la página

Para definir estilos en secciones reducidas de una página se utiliza la etiqueta <SPAN>. Con su
atributo style indicamos en sintaxis CSS las características de estilos. Lo vemos con un ejemplo,
pondremos un párrafo en el que determinadas palabras las vamos a visualizar en color verde.

<p>
Esto es un párrafo en varias palabras <SPAN style="color:green">en color
verde</SPAN>. resulta muy fácil.
</p>

Que tiene como resultado:

Esto es un párrafo con varias palabra en color verde. resulta muy fácil.

Estilo definido para una etiqueta

De este modo podemos hacer que toda una etiqueta muestre un estilo determinado. Por ejemplo,
podemos definir un párrafo entero en color rojo y otro en color azul. Para ello utilizamos el
atributo style, que es admitido por todas las etiquetas del HTML (siempre y cuando dispongamos de
un navegador compatible con CSS).

<p
style="color:#990000">
Esto es un párrafo de color
rojo.
</p>
<p
style="color:#000099">
Esto es un párrafo de color
azul.
</p>
Que tiene como resultado:
Esto es un párrafo de color rojo.
Esto es un párrafo de color azul.

• Estilo definido para toda una página

Podemos definir, en la cabecera del documento, estilos para que sean aplicados a toda la página. Es
una manera muy cómoda de darle forma al documento y muy potente, ya que estos estilos serán
seguidos en toda la página y nos ahorraremos así muchas etiquetas HTML que apliquen forma al
documento. Además, si deseamos cambiar los estilos de la página lo haremos de una sola vez.

A grandes rasgos, entre de <STYLE> y </STYLE>, se coloca el nombre de la etiqueta que queremos
definir los estilos y entre llaves -{}- colocamos en sintaxis CSS las características de estilos.

<html>
<head>
<title>Ejemplo de estilos para toda una p&aacute;gina</title>
<STYLE type="text/css">
<!--
H1 {text-decoration: underline; text-align:center}
P {font-Family:arial,verdana; color: white; background-color: black}
BODY {color:black;background-color: #cccccc; text-indent:1cm}
// -->
</STYLE>
</head>

<body>
<h1>P&aacute;gina con estilos</h1>
Bienvenidos...
<p>Siento ser tan hortera, pero esto es un ejemplo sin m&aacute;s
importancia</p>
</body>
</html>

Reglas de importancia en los estilos

Los estilos se heredan de una etiqueta a otra, como se indicó anteriormente. Por ejemplo, si tenemos
declarado en el <BODY> unos estilos, por lo general, estas declaraciones también afectarán a
etiquetas que estén dentro de esta etiqueta, o lo que es lo mismo, dentro de todo el cuerpo.
En muchas ocasiones más de una declaración de estilos afecta a la misma porción de la página.
Siempre se tiene en cuenta la declaración más particular. Pero las declaraciones de estilos se pueden
realizar de múltiples modos y con varias etiquetas, también entre estos modos hay una jerarquía de
importancia para resolver conflictos entre varias declaraciones de estilos distintas para una misma
porción de página. Se puede ver a continuación esta jerarquía, primero ponemos las formas de
declaración más generales, y por tanto menos respetadas en caso de conflicto:
• Declaración de estilos con fichero externo. (Para todo un sitio web)
• Declaración de estilos para toda la página. (Con la etiqueta <STYLE> en la cabecera de la página)
• Definidos en una etiqueta en concreto. (Utilizando el atributo style en la etiqueta en cuestión)
• Declaración de estilo para una porción pequeña del documento. (Con la etiqueta <SPAN>)
Ya vimos cómo incluir estilos en la página, de todas las maneras posibles e hicimos un repaso con la
lista anterior. Ahora estás en condiciones de empezar a usar las hojas de estilo en cascada para
mejorar tus páginas y aumentar la productividad de tu trabajo. Pero estate atento a los siguientes
capítulos donde aprenderás las lecciones que te faltan para dominar bien la materia: conocer la
sintaxis, los distintos atributos de estilos y otras cosas que mejorarán tus páginas.

¿Por qué diseñar en CSS?

Las tablas existen y existieron desde el comienzo en HTML, pero no se crearon para diseñar un sitio,
sino para la presentación de datos tabulares. La utilización del “border=0” y las imágenes
transparentes hicieron posible crear una rejilla que permitió a los diseñadores organizar textos e
imágenes, establecer tamaños y ubicar objetos. Pero ésto es sencillamente incorrecto. Las tablas no
se crearon para maquetar y no deben utilizarse para eso, porque de esta forma se mezclan
presentación y contenido.

La solución es clara: CSS+HTML/XHTML. Afortunadamente, cada vez son más las empresas que
deciden dejar atrás las tediosas tablas y evolucionar desarrollando sus sitios respetando los
estándares establecidos por la W3C (organización internacional que desde hace unos 12 años se
dedica al desarrollo de pautas y estándares web), lo que facilita la accesibilidad y la correcta
visualización de las páginas en los navegadores que respeten dichos estándares.

Algunas de las ventajas de la maquetación con CSS:

• Separación de forma y contenido. Generalmente CSS y HTML se encuentran en archivos separados,

lo que facilita el trabajo en equipo porque diseñador y programador pueden trabajar
independientemente. Por otro lado, permite el acceso a distintos navegadores y dispositivos.
• Tráfico en el servidor. Las páginas pueden reducir su tamaño entre un 40% y un 60%, y los
navegadores guardan la hoja de estilos en la caché, ésto reduce los costos de envío de información.
• Tiempos de carga. Por la gran reducción en el peso de las páginas, mejora la experiencia del
usuario, que valora de un sitio el menor tiempo en la descarga.
• Precisión. La utilización de CSS permite un control mucho mayor sobre el diseño, especificando
exactamente la ubicación y tamaño de los elementos en la página. También se pueden emplear
medidas relativas o variables para que la pantalla o la caja contenedora se acomode a su
contenido.
• Mantenimiento. Reduce notablemente el tiempo de mantenimiento cuando es necesario
introducir un cambio porque se modifica un solo archivo, el de la presentación, sin tener que tocar
las páginas que contienen la estructura con el contenido.
• Diseño unificado y flexibilidad. Es posible cambiar completa o parcialmente el aspecto de un sitio
con sólo modificar la hoja de estilos. Por otro lado, el tener el estilo de una web en un solo archivo
permite mantener la misma apariencia en todas las páginas.
• Posicionamiento. Las páginas diseñadas con CSS tienen un código más limpio porque no llevan
diseño, sólo contenido. Esto es semánticamente más correcto y la página aparecerá mejor
posicionada en los buscadores. Google navega obviando el diseño.

Podemos definir un “estándar web” (Web Standar) como especificaciones técnicas que definen
y describen aspectos de la WWW. Esto está asociado principalmente a “buenas prácticas” para para
construcción de sitios web, si bien hay muchas especificaciones, creado por grandes actores de la
escena mundial, podemos decir que es una filosofía de diseño y desarrollo que incluye métodos que
permiten que un sitio web sea visualizado correctamente en “todos” y cada uno de los navegadores
que hay disponibles (por mencionar algunos: Firefox, Safari, Internet Explorer, Iceweasel, Mozilla,
etc.)

Los estándares web son un conjunto de recomendaciones dadas por el World Wide Web
Consortium (W3C) y otras organizaciones internacionales acerca de cómo crear e interpretar
documentos basados en el Web. Son un conjunto de tecnologías orientadas a brindar beneficios a la
mayor cantidad de usuarios, asegurando la vigencia de todo documento publicado en el Web.
El objetivo es crear un Web que trabaje mejor para todos, con sitios accesible a más personas
y que funcionen en cualquier dispositivo de acceso a Internet.

Un sitio basado en estándares web mostrará una mayor consistencia visual. Gracias al uso de
XHTML para el contenido y CSS para la apariencia, se puede transformar rápidamente un sitio, sin
importar que se trate de una página web o miles, realizando cambios en un solo lugar.

Los documentos que separan apariencia de contenido usan menos código, además, CSS
permite conseguir efectos que antes requerían el uso de Javascript e imágenes, por lo que los sitios
basados en estándares utilizan menos ancho de banda y se muestran más rápido a los usuarios,
mejorando dramáticamente la experiencia de estos.

Los documentos basados en XHTML válido son más relevantes para los motores de búsqueda,
contienen mayor información y menos código, por lo que un sitio basado en estándares web tendrá
una mejor posición.

De igual manera, la posición en directorios, editados por humanos, se verá beneficiada pues el
sitio será más usable.
 XHTML es una aplicación de XML, por lo que el contenido puede ser procesado de muchas
formas, permitiendo la creación de sitios extensibles.

El uso de validadores nos permite crear XHTML bien formado.

Un sitio basado en estándares web es compatible con todos los navegadores actuales, y lo será
con versiones futuras. Funcionará tan bien en un PC, un navegador aural y un teléfono móvil dentro
de diez años.

Un sitio basado en estándares web es más fácil de mantener y actualizar, el código es más
simple, de esta forma se elimina la dependencia de un solo desarrollador.

Un sitio basado en estándares web es más accesible, permitiendo a personas con

discapacidades utilizar su contenido.

La Independencia de Dispositivo está basada principalmente en la idea de que

independientemente del dispositivo o dispositivos usados para acceder a la información, ésta va a
estar siempre disponible y accesible para el usuario, es decir, se trata de hacer la Web universal y
accesible para cualquier persona, en cualquier sitio, en cualquier momento y usando cualquier
dispositivo, evitando la fragmentación de la Web en espacios accesibles sólo por dispositivos
concretos. El objetivo principal es mejorar la experiencia del usuario y al mismo tiempo reducir
costes al desarrollar estándares que permitan acceder a esa información desde cualquier
dispositivo.

La Independencia de Dispositivo, desde dos puntos de vista diferentes, implicaría:

 desde el punto de vista del usuario implica acceso universal.

 desde el punto de vista del desarrollador, implica un único desarrollo con multitud de
aplicaciones.

En pocas palabras podría decirse que sirve para mejorar la experiencia del usuario ante un
mercado que en los últimos años ha sufrido un rápido crecimiento en lo que a dispositivos y
mecanismos de acceso a la Web se refiere. Los mecanismos de conexión han evolucionado para
incluir módems de banda ancha, LANs y redes inalámbricas cada vez más eficientes. Al mismo
tiempo, las expectativas de los usuarios en relación a acceso, disponibilidad y consumo de
contenido Web, han crecido exponencialmente. Gracias a las nuevas tecnologías y a la creación de
infraestructuras inalámbricas más asequibles para el usuario, éste espera acceder a la información
desde diferentes mecanismos de acceso, desde diferentes lugares y a diferentes momentos
durante el día, es decir, espera tener siempre la información accesible. Ante esta demanda, los
autores de contenido empiezan a desarrollar contenido accesible desde cualquier mecanismo,
reduciendo esfuerzo y costes al desarrollar un único diseño de contenido y de aplicaciones que
puedan ser enviadas a través de diferentes mecanismos.
 Uno de los aspectos a tener en cuenta a la hora de cuantificar la importancia de la
Independencia de Dispositivo es la estimación del creciente número de usuarios potenciales de la
Web en los países en vías de desarrollo. Estas personas accederán a la Web desde una gran
variedad de dispositivos, muchos de ellos obsoletos o con grandes deficiencias, o a través de
dispositivos sencillos que usan redes inalámbricas.

¿Cómo funciona?

Desde el usuario:

Desde el desarrollador:

Se programa una sola vez pero se aplica a cualquier mecanismo, de esta forma se evita la
duplicación de información.

Por lo tanto, para conseguir independencia de dispositivos son necesarios lenguajes de

etiquetado estándares que funcionen en una amplia gama de dispositivos y de tecnologías.
También son necesarias técnicas de autor nuevas para ayudar a los desarrolladores, una
negociación de contenido mejorada entre un agente de usuario y servidores de contenido, es
decir, es necesaria más información sobre el contexto de envío (preferencias de los usuarios,
características de los dispositivos, contexto y entorno). CC/PP juega aquí un papel muy importante
como sistema cuyo objetivo principal es estandarizar los medios para expresar las características y
la configuración de los dispositivos. Este entorno genérico permite al agente de usuario (UA)
describir las características del dispositivo, el contexto, y las preferencias del usuario junto con las
restricciones que sufre.

Así funcionaría CC/PP:

 http://www.mygnet.net/articulos/w3c/accesibilidad_en_paginas_web.826

http://www.w3c.es/traducciones/es/wai/intro/components

http://accesibilidad-web.net/

http://www.discapnet.es/web_accesible/wcag10/WAI-WEBCONTENT-19990505_es.html

http://www.maestrosdelweb.com/editorial/estandaresweb/

http://www.accnera.com/webmovil/webmovil-estandares.html

http://www.dominointernet.com/internet/la-importancia-de-los-estandares-web/

http://www.niux.com.ar/la-importancia-de-los-estandares-web/

http://www.w3c.es/divulgacion/guiasbreves/IndependenciaDispositivo