Aplicacion Web

Las Aplicaciones Web ya forman parte de nuestro qué hacer cotidiano. Si hasta
hace poco tiempo sólo se esperaba el recoger cierta cantidad de información de
una página Web, hoy no se concibe el no poder interactuar con ella. Se sigue
buscando la información, pero sólo aquella que el usuario considera interesante.

El desarrollo de Internet, el comercio electrónico y las tecnologías de la

información orientan el futuro de las aplicaciones a un entorno global, donde
cualquier usuario al que se le permita el acceso pueda interactuar con el
entorno. Dicho entorno se deberá comportar en función de lo que exija el
usuario, lo que permitirá a una Aplicación Web distinguirse de una simple
página o incluso de una página dinámica.

Y para alcanzar el objetivo propuesto sobre estas líneas, es necesario un

modelado capaz de recoger y mostrar todas las estructuras, formas y
componentes presentes en el entorno Web. A continuación vamos a ver como
hacerlo...

Aplicación web

En la ingeniería de software se denomina aplicación web a aquellas

herramientas que los usuarios pueden utilizar accediendo a un servidor web a
través de Internet o de una intranet mediante un navegador. En otras palabras,
es una aplicación software que se codifica en un lenguaje soportado por los
navegadores web en la que se confía la ejecución al navegador.

Las aplicaciones web son populares debido a lo práctico del navegador web
como cliente ligero, a la independencia del sistema operativo, así como a la
facilidad para actualizar y mantener aplicaciones web sin distribuir e instalar
software a miles de usuarios potenciales. Existen aplicaciones como los
webmails, wikis, weblogs, tiendas en línea y la propia Wikipedia que son
ejemplos bastante conocidos de aplicaciones web.

Es importante mencionar que una página Web puede contener elementos que
permiten una comunicación activa entre el usuario y la información. Esto
permite que el usuario acceda a los datos de modo interactivo, gracias a que la
página responderá a cada una de sus acciones, como por ejemplo rellenar y
enviar formularios, participar en juegos diversos y acceder a gestores de base
de datos de todo tipo.

En los primeros tiempos de la computación cliente-servidor, cada aplicación

tenía su propio programa cliente que servía como interfaz de usuario que tenía
que ser instalado por separado en cada computadora personal de cada usuario.
El cliente realizaba peticiones a otro programa -el servidor- que le daba
respuesta. Una mejora en el servidor, como parte de la aplicación, requería
normalmente una mejora de los clientes instalados en cada computadora
personal, añadiendo un coste de soporte técnico y disminuyendo la
productividad.

A diferencia de lo anterior, las aplicaciones web generan dinámicamente una

serie de páginas en un formato estándar, como HTML o XHTML, soportados por
los navegadores web comunes. Se utilizan lenguajes interpretados en el lado del
cliente, directamente o a través de plugins tales como JavaScript, Java, Flash,
etc., para añadir elementos dinámicos a la interfaz de usuario. Generalmente
cada página web en particular se envía al cliente como un documento estático,
pero la secuencia de páginas ofrece al usuario una experiencia interactiva.
Durante la sesión, el navegador web interpreta y muestra en pantalla las
páginas, actuando como cliente para cualquier aplicación web.

Desarrollo de Aplicaciones Web

Introducción

Gracias al desarrollo de nuevas herramientas y tecnologías, las

Aplicaciones Web son cada vez más populares. La facilidad de su desarrollo
provoca, a veces, la ausencia de un análisis y diseño correctos, pero están
consiguiendo reemplazar a las aplicaciones software tradicionales. Lo que aquí
vamos a ver es una presentación genérica del funcionamiento y estructura de
dichas aplicaciones.

En este documento nos vamos a encontrar con tres partes bien definidas
para el desarrollo de una aplicación Web. En primer lugar, veremos la
arquitectura de dichas aplicaciones. A continuación veremos el porqué de
utilizar UML para su modelado. Y finalmente haremos un recorrido por los
distintos elementos que las componen y sus posibilidades de evolución en un
futuro próximo.
Arquitectura de una Aplicación Web
Sitios Web

Una Aplicación Web es un sitio donde la entrada de datos afecta al estado de la

lógica. Es decir, una Aplicación Web se sirve de un sitio o página como entrada
a una verdadera aplicación. Veamos primero la estructura de un sitio Web :

Figura 1: A la izquierda tenemos la arquitectura de un sitio Web tradicional, y a la

derecha uno dinámico.

Aplicaciones Web

A veces la distinción entre una Aplicación Web y un sitio Web es muy

sutil – por ejemplo, un buscador forma parte de un sitio Web, mientras que si se
acepta información para registrar a un usuario, se trata de una Aplicación Web
-. De todas maneras, lo que sí es evidente es que la arquitectura global de una
Aplicación Web es idéntica a la de un sitio Web, aunque su desarrollo sea más
elaborado.

Páginas

Las páginas son el componente fundamental de las aplicaciones Web, y

se muestran a través de los navegadores que hacen de contenedores del
interfaz de usuario. Estas páginas son el resultado de la combinación de páginas
HTML junto con scripts de páginas dinámicas. El nuevo formato obtenido como
mezcla de los dos anteriores será lo que mostrará el navegador.

Los scripts pueden contener tanto variables como procedimientos y

funciones, cuyo objetivo final es actuar sobre el servidor de manera que:

 Se actualice el estado de la lógica del servidor.

 Se creen las nuevas páginas que debe mostrar el navegador.

Una cosa importante a tener en cuenta es que el servidor no es el único

elemento capaz de ejecutar scripts. Un navegador también es capaz de hacerlo,
aunque presenta el inconveniente de que no tiene acceso al servidor, con lo que
su trabajo se limita al control de datos y asistencia en la navegación. En general,
los procedimientos del lado del servidor son procedurales, mientras que los del
lado del navegador o cliente son dirigidos por eventos.

Formas

Las formas más comunes de introducir información son las áreas de

texto, listas de selección o botones de radio, por ejemplo. Cada uno de estos
elementos tiene un nombre o ID asociado a una página de acción, y cuando el
usuario introduce la información, el servidor interpreta o ejecuta el código
contenido en dicha página. El resultado, la información introducida por el
usuario puede ser procesada.

Componentes

Hay Aplicaciones Web que se sirven de una tercera capa de

componentes, entre el interfaz de usuario y el sistema permanente, que suele
estar formado por objetos compilados que funcionan en un servidor de
aplicaciones. Esta capa sólo se utiliza cuando la lógica necesaria para controlar
la aplicación es muy extensa y el tiempo es un factor crítico en las decisiones de
diseño.
 Las páginas formateadas en HTML también pueden tener referencias a
componentes en la máquina del cliente, como son los JavaApplets o los
controles ActiveX. Su presencia supone la extensión de la Aplicación Web al
cliente y nuevas posibilidades en cuanto a la interfaz con el usuario, puesto que
aumentan la interacción que pueden ofrecer las páginas preformateadas.

Frames

Las capacidades de la interfaz de usuario pueden ser incrementadas con el uso

de frames, que permiten tener varias páginas abiertas y activas al mismo
tiempo.

F
Figura 2 : estructura de una página Web

Otros Componentes

Con los componentes ya mencionados, se puede desarrollar una buena

Aplicación Web, aunque otros componentes más recientes pueden afectar su
arquitectura, como son el caso de XML y los scriptlets. Estos últimos tienen el
inconveniente de que sólo funcionan en navegadores Microsoft.

Modelado
Modelado
 Una de las metodologías o notación empleadas en la modelización de
sistemas Web es la “Metodología Relacional” ( RMM, Relationship Management
Methodology ), es una metodología para el diseño, construcción y mantenimiento
de sistemas web para intranets e internet. Su principal objetivo es la reducción de
costes de mantenimiento de sitios Web dinámicos dirigidos por la base de datos.

Pero esta metodología falla a la hora de construir aplicaciones Web, en

las que la lógica de negocio es la parte central, ya que no las cubre
adecuadamente.

Las aplicaciones Web pueden ser usadas como mecanismo servidor para
aplicaciones distribuidas, y además pueden crear múltiples instancias del mismo
browser y frames en la parte cliente que deben establecer y mantener su propio
mecanismo de comunicación. Todo esto debe ser modelizado también y RMM
no es capaz de hacerlo.

La elección de una notación debe estar en función de la necesidad de

modelizar la parte de las capas de la parte del servidor. Con la admisión de UML
como notación para la modelización cada vez más sistemas están siendo
modelizados con él ya que es capaz de expresar la lógica del sistema en los
componentes Web, a lo largo del resto de la aplicación.

Otro de los modelos importantes ADM ( analisis/desing Model) representa

alguna dificultades cuando trata de modelizar páginas Web y el código ejecutable
asociado a éstas relacionándolo con el resto de elementos en el modelo. Decidir
cómo modelizar ,determinar el grado de abstracción y el detalle que queremos
alcanzar es crítico para los usuarios de ese modelo.

En UML, los links representarían el path de navegación desde una página

a otra. Extendiendo esta forma de pensar las páginas serían clases en la vista
lógica del modelo, por lo tanto los scripsts de las página serían operaciones
( métodos ) de la clase, y las variables de estos scripts cuyo ámbito sea la
página, serían los atributos, pero esto no nos ayuda cuando tenemos que saber
que operaciones, atributos,etc están activos en el servidor, por lo tanto es mejor
modelizarlas como componentes del sistema.
 Un sistema puede ser modelado de diferentes maneras, y todas ellas
consistentes. Sin embargo, asumiremos que el centro de dicho sistema será una
página. Esto levanta las siguientes dudas: una página puede ser modelada como
un objeto, pero ¿ cuáles son sus atributos ?. Pues bien, deben de ser aquellos
elementos que afecten al comportamiento del sistema, es decir, los scripts, por
ejemplo. Y esto suscita un nuevo desafío : el cómo modelar dicho sistema
cuando tanto el servidor como el cliente ejecutan scripts, puesto que compartir
atributos o métodos entre ambos puede llegar a ser muy confuso.

Extensiones del modelado

UML no es perfecto para todas las situaciones, y es por ello que se

definen mecanismos de extensión como las Etiquetas, Estereotipos y
Restricciones. Para resolver el problema presentado anteriormente, se podrían
definir los Estereotipos <<método de cliente >> y << método de servidor >>,
que nos permitirían hacer una distinción adecuada en el diseño. Aún así, al
representar las relaciones no se garantiza que sólo sean válidas desde el lado
del servidor o el del cliente…

Estereotipos de página

Una mejor solución al modelado de páginas pasa por la creación de dos

clases con estereotipo:

 Página de servidor

 Página de cliente

Su implementación puede aparecer en el mismo fichero o componente, pero

la distinción es clara. Mientras la página de servidor se ocupa del acceso a los
componentes, scripts, datos y, u otros elementos que se encuentren en la parte
del servidor, la página del cliente se ocupa de los Applets de Java, los controles
ActiveX y, o el formateado de la página, por ejemplo.

Veamos los estereotipos en detalle.

 1. Hay una relación importante entre ambas páginas, definida
unidireccional y descrita bajo el estereotipo <<construye>>. Y es que
una página de servidor se encarga de construir una de cliente. Incluso
podría darse el caso de que una página de servidor construya varias de
las páginas cliente.

2. Otro estereotipo es el definido como <<redirige>>. Dependiendo de la

entrada y de las exigencias de procesado, una página de servidor puede
redirigirse hacia otras que cumplan una labor más específica. Redirigir
toma en este caso el significado de delegar.

3. <<presenciar>>. Es algo más sutil que los anteriores y se sumaría a un

diagrama que ya conste de un estereotipo <<construye>>. Una página
de servidor construye una de cliente y, bajo ambas, existe un elemento
Web que se da cuenta, que presencia, al menos una de ambas páginas.
Un componente Web presenciaría ambas páginas a la vez.

4. Una relación que no se puede olvidar viene definida por el estereotipo

<<enlace>>. Y sabiendo lo que significa un hiperenlace, está claro que
sólo tiene sentido definirlo desde una página cliente hacia una página
servidor – que generará una nueva página cliente -, o desde la página
cliente hacia otra de su misma clase. Si dicho enlace contiene
parámetros, se modelan fuera de la relación.

Componentes

Los componentes, presentados como interfaces disponibles para los

distintos objetos - por ejemplo, DLLs, controles ActiveX... -, se identifican como
<<componente servidor>> o <<componente cliente>>, para poder diferenciar
quién puede servirse de ellos.

Formas
El significado de una forma se puede resumir
diciendo que una página cliente contiene formas. Es decir,
las formas existen porque hay una serie de atributos que
no tienen significado a lo largo de toda la página cliente, y
porque además desde dicha página queremos llegar a
destinos diferentes. De aquí se puede deducir que una
forma no tenga métodos y que los métodos de una página
cliente tengan acceso a los atributos de todas las formas en
ella contenidas.
Por tanto, hemos de considerar el estereotipo
<<forma>> que a su vez va a generarnos otro nuevo:
<<envía>>. Dicho estereotipo se justifica con la necesaria
relación entre una forma y la página que la procesa. Es
más, la relación es bidireccional puesto que la página que
va a llevar a cabo el proceso tiene acceso a los atributos de
la forma, que son enviados en tiempo de ejecución.

Framesets

Los framesets o conjuntos de marcos aparecen con la posibilidad de

mostrar varias páginas Web al mismo tiempo. Puesto que un frameset puede
contener cualquier página cliente, debemos considerarlo como una
especialización de las mismas y, con ello, generar un nuevo estereotipo
<<marcos>>.

Coordinar la actividad entre las páginas requiere la habilidad de poder

referenciar las páginas dentro de los marcos, y a dicha referencia la llamaremos
objetivo. Un objetivo es muy distinto de un marco y una página sólo puede
referenciar objetivos de navegadores abiertos, así que nos vamos a crear un
nuevo estereotipo para mostrar tal descripción: <<objetivo>>.

La mayor ventaja de haber creado dicho estereotipo es que puede ser

compartido y referenciado por muchas páginas cliente. No posee atributos ni
métodos. Pero surge una especialización del mismo : cuando queremos cargar
un enlace en un navegador distinto de sí mismo. En este caso, estamos frente a
un nuevo estereotipo que llamaremos <<enlace con objetivo>>.
 F

igura 3: Enlace con objetivos

Otros estereotipos

Las extensiones Web para UML están a punto de finalizarse en su fase

inicial. Sin embargo, hay otros estereotipos que están bajo consideración como
son <<xml>> o <<scriplet>>...

Consideraciones del proceso

Una aplicación Web no es más que una especialización de un proceso

cliente/servidor, con lo que se puede aprovechar el modelado de dichas
aplicaciones. En particular, los casos de uso son una herramienta fundamental
en la captura de requisitos.

En el modelado, es importante tener en cuenta el que debemos empezar

por las páginas cliente. En general, un caso de uso nos dará lugar a una página
cliente distinta. Las páginas de servidor serán el último eslabón del proceso de
producción, puesto que se generarán prácticamente ellas mismas al identificar
los componentes del servidor y relacionarlos con las páginas cliente.
 Finalmente, es necesario considerar que se trata de un proceso abierto
debido a los posibles cambios en el diseño y las extensiones propuestas, pero
es una imagen clara y precisa de la aplicación Web.

Estructura de las aplicaciones web

Aunque existen muchas variaciones posibles, una aplicación web está normalmente
estructurada como una aplicación de tres-capas. En su forma más común, el navegador
web ofrece la primera capa, y un motor capaz de usar alguna tecnología web dinámica,
por ejemplo: PHP, Java Servlets o ASP, ASP.NET, CGI, ColdFusion, embPerl, Python
o Ruby on Rails que constituye la capa intermedia. Por último, una base de datos
constituye la tercera y última capa.

El navegador web manda peticiones a la capa intermedia que ofrece servicios

valiéndose de consultas y actualizaciones a la base de datos y a su vez proporciona una
interfaz de usuario.

Programación por capas

La programación por capas es una arquitectura cliente-servidor en el que el objetivo
primordial es la separación de la lógica de negocios de la lógica de diseño; un ejemplo básico
de esto consiste en separar la capa de datos de la capa de presentación al usuario.

La ventaja principal de este estilo es que el desarrollo se puede llevar a cabo en varios
niveles y, en caso de que sobrevenga algún cambio, solo se ataca al nivel requerido sin
tener que revisar entre código mezclado. Un buen ejemplo de este método de
programación sería el modelo de interconexión de sistemas abiertos.

Además, permite distribuir el trabajo de creación de una aplicación por niveles; de este
modo, cada grupo de trabajo está totalmente abstraído del resto de niveles, de forma que
basta con conocer la API que existe entre niveles.

En el diseño de sistemas informáticos actual se suelen usar las arquitecturas multinivel o

Programación por capas. En dichas arquitecturas a cada nivel se le confía una misión
simple, lo que permite el diseño de arquitecturas escalables (que pueden ampliarse con
facilidad en caso de que las necesidades aumenten).

El más utilizado actualmente es el diseño en tres niveles (o en tres capas).

Capas y niveles

1. Capa de presentación: la que ve el usuario (también se la denomina "capa de

usuario"), presenta el sistema al usuario, le comunica la información y captura la
información del usuario en un mínimo de proceso (realiza un filtrado previo para
comprobar que no hay errores de formato). También es conocida como interfaz gráfica
y debe tener la característica de ser "amigable" (entendible y fácil de usar) para el
usuario. Esta capa se comunica únicamente con la capa de negocio.
2. Capa de negocio: es donde residen los programas que se ejecutan, se reciben las
peticiones del usuario y se envían las respuestas tras el proceso. Se denomina capa de
negocio (e incluso de lógica del negocio) porque es aquí donde se establecen todas las
reglas que deben cumplirse. Esta capa se comunica con la capa de presentación, para
recibir las solicitudes y presentar los resultados, y con la capa de datos, para solicitar al
gestor de base de datos almacenar o recuperar datos de él. También se consideran
aquí los programas de aplicación.
3. Capa de datos: es donde residen los datos y es la encargada de acceder a los mismos.
Está formada por uno o más gestores de bases de datos que realizan todo el
almacenamiento de datos, reciben solicitudes de almacenamiento o recuperación de
información desde la capa de negocio.

Todas estas capas pueden residir en un único ordenador, si bien lo más usual es que
haya una multitud de ordenadores en donde reside la capa de presentación (son los
clientes de la arquitectura cliente/servidor). Las capas de negocio y de datos pueden
residir en el mismo ordenador, y si el crecimiento de las necesidades lo aconseja se
pueden separar en dos o más ordenadores. Así, si el tamaño o complejidad de la base de
datos aumenta, se puede separar en varios ordenadores los cuales recibirán las
peticiones del ordenador en que resida la capa de negocio.

Si, por el contrario, fuese la complejidad en la capa de negocio lo que obligase a la

separación, esta capa de negocio podría residir en uno o más ordenadores que
realizarían solicitudes a una única base de datos. En sistemas muy complejos se llega a
tener una serie de ordenadores sobre los cuales corre la capa de negocio, y otra serie de
ordenadores sobre los cuales corre la base de datos.

En una arquitectura de tres niveles, los términos "capas" y "niveles" no significan lo

mismo ni son similares.

El término "capa" hace referencia a la forma como una solución es segmentada desde el
punto de vista lógico:

 Presentación. (Conocida como capa Web en aplicaciones Web o como capa de usuario
en Aplicaciones Nativas)
 Lógica de Negocio. (Conocida como capa Aplicativa)
 Datos. (Conocida como capa de Base de Datos)

En cambio, el término "nivel" corresponde a la forma en que las capas lógicas se

encuentran distribuidas de forma física. Por ejemplo:

 Una solución de tres capas (presentación, lógica del negocio, datos) que residen en un
solo ordenador (Presentación+lógica+datos). Se dice que la arquitectura de la solución
es de tres capas y un nivel.
  Una solución de tres capas (presentación, lógica del negocio, datos) que residen en dos
ordenadores (Presentación+lógica por un lado; lógica+datos por el otro lado). Se dice
que la arquitectura de la solución es de tres capas y dos niveles.

Ventajas y Desventajas
Ventajas

 Ahorra tiempo: se pueden realizar tareas sencillas sin necesidad de descargar

ni instalar ningún programa.
 No hay problemas de compatibilidad: basta tener un navegador actualizado
para poder utilizarlas.
 No ocupan espacio en nuestro disco duro.
 Actualizaciones inmediatas: como el software lo gestiona el propio
desarrollador, cuando nos conectamos estamos usando siempre la última
versión que haya lanzado.
 Consumo de recursos bajo: dado que toda (o gran parte) de la aplicación no
se encuentra en nuestra computadora, muchas de las tareas que realiza el
software no consumen recursos nuestros porque se realizan desde otra
computadora.
 Multiplataforma: se pueden usar desde cualquier sistema operativo porque
solamente es necesario tener un navegador.
 Portables: es independiente de la computadora donde se utilice (PC de
sobremesa, portátil) porque se accede a través de una página web (solamente
es necesario disponer de acceso a Internet). La reciente tendencia al acceso a las
aplicaciones web a través de teléfonos móviles requiere sin embargo un diseño
específico de los ficheros CSS para no dificultar el acceso de estos usuarios.
 La disponibilidad suele ser alta porque el servicio se ofrece desde múltiples
localizaciones para asegurar la continuidad del mismo.
 Los virus no dañan los datos porque están guardados en el servidor de la
aplicación.
 Colaboración: gracias a que el acceso al servicio se realiza desde una única
ubicación es sencillo el acceso y compartición de datos por parte de varios
usuarios. Tiene mucho sentido, por ejemplo, en aplicaciones en línea de
calendarios u oficina.
  Los navegadores ofrecen cada vez más y mejores funcionalidades para crear
"aplicaciones web enriquecidas" (Rich Internet application o RIA).

Inconvenientes

 Habitualmente ofrecen menos funcionalidades que las aplicaciones de

escritorio. Se debe a que las funcionalidades que se pueden realizar desde un
navegador son más limitadas que las que se pueden realizar desde el sistema
operativo.

 La disponibilidad depende de un tercero, el proveedor de la conexión a

internet o el que provee el enlace entre el servidor de la aplicación y el cliente.
Así que la disponibilidad del servicio está supeditada al proveedor.

Diferencia entre aplicación web y aplicación de internet enriquecida (RIA)

Las aplicaciones web se ejecutan nativamente desde el navegador. Pero
existen algunas aplicaciones que funcionan desde el navegador pero además
requieren la instalación de un software en la computadora para poder utilizarse.
Estas aplicaciones se denominan Aplicaciones de Internet Ricas. El motivo de
usar este software adicional es que hay muchas funcionalidades que los
navegadores no pueden ofrecer, y él enriquece a las aplicaciones web
ofreciendo dichas funcionalidades.

Ejemplos de funcionalidades que pueden ofrecer los programas en línea gracias

al uso de software instalado:

 Procesamiento de imágenes
 Captura de imágenes
 Uso de webcam / Captura de video1

Diseño web
El diseño web es una actividad que consiste en la planificación, diseño,
implementación y mantenimiento de sitios web. No es simplemente la
implementación del diseño convencional ya que se abarcan diferentes aspectos
como el diseño gráfico web; diseño de interfaz y experiencia de usuario, como
la navegabilidad, interactividad, usabilidad, arquitectura de la información;
interacción de medios, entre los que podemos mencionar audio, texto, imagen,
enlaces, video y la optimización de motores de búsqueda. A menudo muchas
personas trabajan en equipos que cubren los diferentes aspectos del proceso de
diseño, aunque existen algunos diseñadores independientes que trabajan solos.

El diseñador web comprende perfectamente que el sitio online no es solo "no

faltar en la web", sino una herramienta que se alinea perfectamente con los
lineamientos culturales de la entidad que representa... La unión de un buen
diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia de
la web como canal de comunicación e intercambio de datos, que brinda
posibilidades como el contacto directo entre el productor y el consumidor de
contenidos.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet

especialmente en la World Wide Web. A menudo la web se utiliza como medio
de expresión plástica en sí. Artistas y creadores hacen de las páginas en Internet
un medio más para ofrecer sus producciones y utilizarlas como un canal más de
difusión de su obra.

Diseño web aplicado

El diseño de páginas web es la construcción de documentos de hipertexto para
su visualización en diferentes navegadores. Así como asignarle una presentación
para diferentes dispositivos de salida (en una pantalla de computador, en papel,
en un teléfono móvil, etc).

Estos documentos o páginas web pueden ser creadas:

 Creando archivos de texto en HTML, Asp, Aspx, JavaScript, JSP, Python, Ruby.
 Utilizando un programa visual WYSIWYG o WYSIWYM de creación de páginas.
 Utilizando lenguajes de programación del lado servidor, para generar la página
web.

Etapas
Para el diseño de páginas web debemos tener en cuenta tres etapas:

1. El diseño visual de la información que se desea editar. En esta etapa se trabaja

distribuyendo el texto, los gráficos, los vínculos a otros documentos y otros
objetos multimedia que se consideren pertinentes. Es importante que antes de
'escribir' la página web se realice un boceto o prediseño. Esto facilitará tener un
orden claro sobre el diseño.
2. Estructura y relación jerárquica de las páginas del sitio web. Para esto, y
fundamentalmente para manejar los vínculos entre documentos, se creó el
lenguaje de marcación de hipertexto o HTML. Los enlaces que aparecen
subrayados en este documento y otros de Wikipedia son ejemplos de
hipertexto, puesto que al pulsar sobre ellos conducen a otras páginas con
información relacionada. La importancia de la estructura y arborescencia web
radica en que los usuarios no siempre entran por la página principal o inicial y
en ese caso el sitio debe darle la respuesta a lo que busca rápido, además
permitirle navegar por el sitio.
3. Posicionamiento en buscadores o SEO. Ésta consiste en optimizar la estructura
del contenido para mejorar la posición en que aparece la página en
determinada búsqueda. Etapa no gustosa por los diseñadores gráficos, porque
 a diferencia del texto, aún para el año 2014 no se pueden tener nuevos
resultados en los buscadores con sitios muy gráficos.

El HTML consta de una serie de elementos que estructuran el texto y son

presentados en forma de hipertexto por agente de usuario o navegadores. Esto
se puede hacer con un simple editor de textos (debe guardarse como texto
plano, sin ningún tipo de formato y con extensión .html o .htm). Aprender
HTML es relativamente fácil, así que es sencillo crear páginas web de este modo.
Esta era la única manera de generarlas hasta que aparecieron, a mediados de
1996, algunos editores visuales de HTML, como MS FrontPage y Adobe
Dreamweaver. Con estas herramientas no es necesario aprender HTML (aunque
sí aconsejable), con lo cual el desarrollador se concentra en lo más importante,
el diseño del documento.

Un buen diseño web es aquel que considera dentro de su desarrollo tanto los
elementos básicos del diseño gráfico (la diagramación, el color, los gráficos y las
fuentes) como los fundamentos técnicos (estructura, compatibilidad,
funcionalidad e interactividad) para crear tanto el impacto visual como la
experiencia de usuario optima para la asimilación del contenido.

Fundamentos
El diseño web implica conocer cómo se deben utilizar cada uno de los
elementos permitidos en el HTML, es decir, hacer un uso correcto de este
lenguaje dentro de los estándares establecidos por la W3C y en lo referente a la
web semántica. Debido a la permisibilidad de algunos navegadores web como
Internet Explorer, esta premisa original se ha perdido. Por ejemplo, este
navegador permite que no sea necesario cerrar las etiquetas del marcado,
utiliza código propietario, etc. Esto impide que ese documento web sea
universal e independiente del medio que se utilice para ser mostrado.

La web semántica, por otra parte, aboga por un uso lógico de los elementos
según el significado para el que fueron concebidas. Por ejemplo se utilizará el
elemento <P> para marcar párrafos, y <TABLE> para tabular datos (nunca para
disponer de manera visual los diferentes elementos del documento). En su
última instancia, esto ha supuesto una auténtica revolución en el diseño web
puesto que apuesta por separar totalmente el contenido del documento de la
visualización.

De esta forma se utiliza el documento HTML únicamente para contener,

organizar y estructurar la información y las hojas de estilo CSS para indicar
como se mostrará dicha información en los diferentes medios (como por
ejemplo, una monitor de computadora, un teléfono móvil, impreso en
papel, leída por un sintetizador de voz, etc.). Por lógica, esta metodología
beneficia enormemente la accesibilidad del documento.
También existen páginas dinámicas, las cuales permiten interacción entre la web
y el visitante, proporcionándole herramientas tales como buscadores, chat,
foros, sistemas de encuestas, etc. y poseen de un panel de control de
administración de contenidos. Este permite crear, actualizar y administrar
cantidades ilimitadas de contenido en la misma.

Accesibilidad
El diseño web debe seguir unos requerimientos mínimos de accesibilidad web
que haga que sus sitios web o aplicaciones puedan ser visitados por el mayor
número de personas. Para conseguir estos objetivos de accesibilidad se han
desarrollado pautas como las del W3C: Pautas de accesibilidad al contenido
Web 1.0 WCAG.

HTML 5
La última versión de este lenguaje básico corresponde al HTML5, donde se
introducen nuevos elementos que mejoran la navegación y la usabilidad de los
sitios web en los distintos navegadores, como por ejemplo el uso de <canvas>,
<video> o <footer>.

Esta nueva versión no se trata solamente de cambiar y eliminar etiquetas. Va

mucho más allá.

En todo sitio web hay elementos que se utilizan. El encabezado (header), barras
laterales (sidebars), el pie de página (footer), los menús de navegación, se
utilizarán en esta nueva versión como etiquetas ya establecidas, brindando una
mejora en la intuición para el desarrollo.

Así mismo una de las mayores mejoras es la utilización de "Canvas" o marcos de

trabajo, que sirven para utilizar animaciones sin necesidad de instalar plugins ni
usar un reproductor Adobe Flash para videos web, estándar considerado de
facto. Esta opción es un gran avance, ya que Flash tiene grandes desventajas en
los gráficos web, como que los motores de búsqueda no puedan leer el texto
dentro, que pesan mucho y tardan en cargar. Al implementarse con canvas, se
usará únicamente código Javascript, aligerando el peso de la página.

También quedan obsoletos algunos elementos del HTML 4, razón por la cual es
conveniente repasar acerca de las novedades que incluye HTML5, cuyo lenguaje
es regulado por W3C.
Accesibilidad web
La Organización Mundial de la Salud (OMS) recoge en sus informes un total de 600
millones de personas con discapacidad. El acceso de estas personas a la tecnología
debe tenerse en cuenta en la construcción de una sociedad igualitaria.

La misma Organización Mundial de la Salud, a través de la Clasificación

Internacional del Funcionamiento, de la Discapacidad y de la Salud (CIF) del año
2001, define la discapacidad como "término genérico que incluye déficit,
limitaciones en la actividad y restricciones en la participación. Indica los
aspectos negativos de la interacción entre un individuo (con una condición de
salud) y sus factores contextuales (factores ambientales y personales). (Egea,
2006).

Cuando los sitios web están diseñados pensando en la accesibilidad, todos los
usuarios pueden acceder en condiciones de igualdad a los contenidos. Por
ejemplo, cuando un sitio tiene un código XHTML semánticamente correcto, se
proporciona un texto equivalente alternativo a las imágenes y a los enlaces se
les da un nombre significativo, esto permite a los usuarios ciegos utilizar
lectores de pantalla o líneas Braille para acceder a los contenidos. Cuando los
vídeos disponen de subtítulos, los usuarios con dificultades auditivas podrán
entenderlos plenamente. Si los contenidos están escritos en un lenguaje sencillo
e ilustrados con diagramas y animaciones, los usuarios con dislexia o problemas
de aprendizaje están en mejores condiciones de entenderlos.

Si el tamaño del texto es lo suficientemente grande, los usuarios con problemas

visuales puedan leerlo sin dificultad. De igual modo, el tamaño de los botones o
las áreas activas adecuado puede facilitar su uso a los usuarios que no pueden
controlar el ratón con precisión. Si se evitan las acciones que dependan de un
dispositivo concreto (pulsar una tecla, hacer clic con el ratón) el usuario podrá
escoger el dispositivo que más le convenga.

Lo mencionado en los párrafos anteriores se puede resumir en Pautas de

Accesibilidad; estas pautas explican cómo hacer accesibles los contenidos de la
web a personas con discapacidad. Las pautas están pensadas para todos los
diseñadores de contenidos de la web y para los diseñadores de herramientas de
creación. El fin principal de estas pautas en promover la accesibilidad.

Estas pautas son una especificación del W3C que proporciona una guía sobre la
accesibilidad de los sitios de la web para las personas con discapacidad. Han
sido desarrolladas por la Iniciativa de Accesibilidad en la Web (WAI) del W3C.

Limitaciones
Las limitaciones en la accesibilidad de los sitios Web pueden ser: 1
  Visuales: En sus distintos grados, desde la baja visión a la ceguera total, además
de problemas para distinguir colores (Daltonismo).
 Motrices: Dificultad o la imposibilidad de usar las manos, incluidos temblores,
lentitud muscular, etc, debido a enfermedades como el Parkinson, distrofia
muscular, parálisis cerebral, amputaciones, entre otras.
 Auditivas: Sordera o deficiencias auditivas.
 Cognitivas: Dificultades de aprendizaje (dislexia, discalculia, etc) o
discapacidades cognitivas que afecten a la memoria, la atención, las habilidades
lógicas, etc.

A las personas con discapacidad podemos añadir el conjunto de personas de la

"tercera edad", ya que las carencias y problemas de los medios físicos, así como
muchas veces el contenido, hacen que estas personas se encuentren también en
riesgo de infoexclusión.

Problemas de accesibilidad
Las principales dificultades con las que se encuentra la persona con
discapacidad suelen ser de:

 Manejo de terminales: Los teléfonos, ordenadores, cajeros automáticos y

televisión digital la mayoría de las veces no están diseñados y colocados, en el
caso de los cajeros, prestando atención a las necesidades de las personas con
discapacidad. La variedad de terminales es muy grande, lo que se debe buscar
es seguir la tendencia a reducirlos y acceder a todos los servicios a través de
unos pocos.
 Interacción con las interfaces: Los menús, barras de navegación y botones no
suelen ser accesibles desde una variedad de terminales adaptados.
 Acceso a los contenidos: Los contenidos a los que se tiene acceso desde un
mismo dispositivo son cada vez mayores y, este rápido crecimiento no suele
atender las necesidades específicas de la discapacidad.

Características de un sitio accesible

Un sitio web accesible es:

 Transformable: La información y los servicios deben ser accesibles para todos y

deben poder ser utilizados con todos los dispositivos de navegación.
 Comprensible: Contenidos claros y simples.
 Navegable: Mecanismos sencillos de navegación.

Ayudas técnicas
Las ayudas técnicas, también llamadas tecnologías de apoyo, 2 son los
dispositivos empleados por las personas con discapacidad para prevenir,
compensar, mitigar o neutralizar la discapacidad que poseen.

Las siguientes son algunas de las tecnologías de apoyo que usan los usuarios
discapacitados para navegar de la web:
  Un programa lector de pantalla, que puede leer usando síntesis de voz, los
elementos que se muestran en el monitor (de gran ayuda para los usuarios con
dificultades de aprendizaje o lectura), o que puede leer todo lo que está
pasando en el PC (utilizado por los usuarios ciegos y de visión reducida).
 Líneas Braille, que consiste en dispositivo hardware que convierte el texto en
caracteres Braille.
 Un programa magnificador de pantalla que amplía lo que se muestra en el
monitor de la computadora, haciéndolo más fácil de leer para los usuarios de
visión reducida.
 Eldy es un software que convierte cualquier computadora personal o PC
estándar en un equipo fácil de usar para las personas que nunca han usado una
computadora antes.

Pautas de accesibilidad Web

El máximo organismo dentro de la jerarquía de Internet que se encarga de
promover la accesibilidad es el World Wide Web Consortium (W3C), en especial
su grupo de trabajo Web Accessibility Initiative (WAI). En 1999 el WAI publicó la
versión 1.0 de sus pautas de accesibilidad Web. Con el paso del tiempo se han
convertido en un referente internacionalmente aceptado. En diciembre del 2008
las WCAG 2.0 fueron aprobadas como recomendación oficial.

¿Por qué son necesarias estas pautas?

Las personas con diferentes tipos de discapacidad pueden experimentar

dificultades para utilizar la web debido a la combinación de barreras en la
información de las páginas web, con las barreras de las "aplicaciones de
usuario" ( navegadores, dispositivos multimedia o ayudas técnicas). Estas pautas
tienen relación específicamente con la reducción de barreras en las páginas
web. ( Egea, 2006)

Estas pautas se dividen en tres bloques:

Pautas de Accesibilidad al Contenido en la Web (WCAG)

Están dirigidas a los webmasters e indican cómo hacer que los contenidos del
sitio web sean accesibles.

Pautas de Accesibilidad para Herramientas de Autor (ATAG)

Están dirigidas a los desarrolladores del software que usan los webmasters, para
que estos programas faciliten la creación de sitios accesibles.

Pautas de Accesibilidad para Agentes de Usuario (UAAG)

Están dirigidas a los desarrolladores de Agentes de usuario (navegadores y

similares), para que estos programas faciliten a todos los usuarios el acceso a
los sitios Web.
Legislación
España

Desde el año 2002, en España4 se han desarrollado varias leyes que definen los
niveles de accesibilidad y fechas de cumplimiento: 5

 Ley 34/2002 de 11 de julio, de servicios de la sociedad de la información y de

comercio electrónico.
 Ley 51/2003 de 2 de diciembre de Igualdad de Oportunidades, No
Discriminación y Accesibilidad Universal con discapacidad (LIONDAU).
 Real Decreto 366/2007 de 16 de marzo, de accesibilidad y no discriminación de
las personas con discapacidad en sus relaciones con la Administración General
del Estado.
 Ley 27/2007, de 23 de octubre, por la que se reconocen las lenguas de signos
españolas y se regulan los medios de apoyo a la comunicación oral de las
personas sordas, con discapacidad auditiva y sordociegas.
 Real Decreto 1494/2007, de 12 de noviembre, por el que se aprueba el
Reglamento sobre las condiciones básicas para el acceso de las personas con
discapacidad a la sociedad de la información.
 Ley 49/2007, de 26 de diciembre, por la que se establece el régimen de
infracciones y sanciones en materia de igualdad de oportunidades, no
discriminación y accesibilidad universal de las personas con discapacidad.

Estados Unidos

 Sección 508, del Acta de Rehabilitación de 1973.

Beneficios
Los principales beneficios que ofrece la accesibilidad web.

 Aumenta el número de potenciales visitantes de la página web: esta es una

razón muy importante para una empresa que pretenda captar nuevos clientes.
Cuando una página web es accesible no presenta barreras que dificulten su
acceso, independientemente de las condiciones del usuario. Una página web
que cumple los estándares es más probable que se visualice correctamente en
cualquier dispositivo con cualquier navegador.
 Disminuye los costes de desarrollo y mantenimiento: aunque inicialmente
aprender a hacer una página web accesible supone un coste (igual que supone
un coste aprender a utilizar cualquier tecnología nueva), una vez se tienen los
conocimientos, el coste de desarrollar y mantener una página web accesible es
menor que frente a una no accesible, ya que una página web accesible es una
página bien hecha, menos propensa a contener errores y más sencilla de
actualizar.
 Reduce el tiempo de carga de las páginas web y la carga del servidor web:
al separar el contenido de la información sobre la presentación de una página
 web mediante CSS se logra reducir el tamaño de las páginas web y, por tanto,
se reduce el tiempo de carga de las páginas web.
 Aumenta la usabilidad de la página web: esto también implica
indirectamente, que la página podrá ser visualizada desde cualquier navegador.
 Demostramos que nos implicamos socialmente.
 Aumenta el capital humano de las comunidades de aprendizaje
potenciando la inteligencia colectiva..

Herramientas de accesibilidad Web

TAW

TAW (test de accesibilidad Web) es una herramienta, desarrollada por

Fundación CTIC, que permite comprobar de forma automática ciertos aspectos
de la accesibilidad Web. Sus destinatarios son los profesionales del diseño y
desarrollo Web.

La herramienta TAW dispone de 2 modalidades de ejecución, bien como

analizador en línea (desde su portal web), o como aplicación instalable de forma
local.

El analizador TAW en línea funciona introduciendo una URL del sitio web que se
pretende analizar, generando un informe HTML con información sobre el
resultado del análisis. El analizador en línea está disponible para las siguientes
normativas:

 Pautas de accesibilidad al Contenido Web 1.0 (WCAG 1.0)

 Pautas de accesibilidad al Contenido Web 2.0 (WCAG 2.0). Estas pautas se basan
en cuatro principios fundamentalmente, cada uno de los cuales puede ser
definido con una única palabra: perceptible, operable, comprensible y robusto.
 Aplicaciones informáticas para personas con discapacidad. Requisitos de
accesibilidad para contenidos en la Web (UNE 139803)

Las diferentes normativas agrupan una serie de comprobaciones (llamadas

puntos de verificación o criterios de éxito) en 3 niveles de accesibilidad A, AA,
AAA. El cumplimiento de todos los puntos de verificación de un determinado
nivel de accesibilidad permite declarar la conformidad en ese nivel.

La aplicación TAW, instalable de forma local, analiza únicamente las Pautas de

accesibilidad al Contenido Web 1.0 (WCAG 1.0) pero incluye una serie de
características adicionales como son:

 Análisis multipágina, logrando un análisis extenso del portal.

 Permite la revisión de las incidencias manuales, incluyendo añadir comentarios y
modificar su validez.
 Informe resumen de accesibilidad de las páginas analizadas.
 Configuración individualizada de los puntos de verificación a analizar.
  Creación de verificaciones personalizadas.

HERA
HERA es una utilidad para revisar la accesibilidad de las páginas web de
acuerdo con las recomendaciones de las Directrices de Accesibilidad para el
Contenido Web 1.0 (WCAG 1.0). HERA realiza un análisis automático previo de
la página e informa si se encuentran errores (detectables en forma automática)
y qué puntos de verificación de las pautas deben ser revisados manualmente.

La revisión manual es imprescindible para comprobar realmente si la página es

accesible. Para poder llevar a cabo esta verificación manual es necesario
conocer las directrices de accesibilidad, saber cómo utilizan los usuarios las
ayudas técnicas y tener alguna experiencia en diseño y desarrollo de páginas
web.

HERA facilita la revisión manual proporcionando información acerca de los

elementos a verificar, instrucciones sobre cómo realizar ese control y dos vistas
modificadas de la página (una en modo gráfico, otra del código HTML) con los
elementos más importantes destacados con iconos y colores distintivos.

Un formulario permite modificar los resultados automáticos, agregar

comentarios a cada punto de verificación e indicar el nombre del revisor.
También es posible generar un informe final sobre la revisión, para imprimir o
descargar, en diversos formatos (XHTML, RDF y PDF).

Importante: Los datos se conservarán en la base de datos de Sidar por el

término de 7 (siete) días a partir del inicio de la revisión. Durante ese lapso es
posible retomar un trabajo utilizando la URL de la página resumen, que
contiene el identificador de la revisión.