2.

Modelado de aplicaciones Web

Ha obtenido 0 punto(s) sobre 0 hasta ahora.

Aplicación 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 cómo 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.

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>>.
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.