ARQUITECTURA

WEB

ANTECEDENTES
La Web
(World Wide Web WWW)
Sistema de distribucin de
informacin basado en
hipertexto o hipermedios
enlazados y accesibles a
travs de Internet.

ANTECEDENTES
Como funciona la Web
1- Traducir la parte nombre del servidor de la URL en una
direccin IP usando DNS.

2- Enviar una peticin HTTP al servidor Web solicitando el

recurso.

3- Al recibir los ficheros solicitados desde el servidor web, el

navegador Renderiza la pgina tal y como se describe en el
cdigo HTML. Al final se incorporan las imgenes y otros
recursos para producir la pgina que ve el usuario en su
pantalla.

ANTECEDENTES
Que es una pgina Web?

Es un documento o informacin electrnica

adaptada para la WWW y que puede ser
accedida mediante un navegador para
mostrarse en un monitor de computadora
o dispositivo mvil
Las pginas web pueden estar
almacenadas en un equipo local o un
servidor web remoto.
El acceso a las pginas web es realizado
mediante su transferencia desde
servidores utilizando el protocolo de
transferencia de hipertexto (HTTP).

ANTECEDENTES
Caractersticas de pgina Web

Est compuesta principalmente por informacin (texto y/o mdulos

multimedia) e hiperenlaces.

Puede contener o asociar datos de estilo para especificar cmo debe

visualizarse.

Son escritas en un lenguaje de marcado que provee la capacidad de

manejar e insertar hiperenlaces, generalmente HTML.

El contenido de la pgina puede ser:

-Predeterminado (pgina web esttica)
-Generado al momento de visualizarla o solicitada a un servidor web (pgina
web dinmica), que son creadas por una aplicacin en el servidor web que
alberga las mismas.

Una pgina web es en esencia una tarjeta de presentacin digital

ANTECEDENTES
Dominio de una pgina web

Es la direccin web de nuestra pgina que es

nica e irrepetible:
www.unid.edu.mx

Los dominios poseen una estructura y una

sintaxis propia con una cantidad mxima de
caracteres de 19. Las partes estructurales de
un dominio estn separadas por un punto:

ANTECEDENTES
Dominio de una pgina web

El prefijo www es la clave que le indica al

navegador que visitaremos una pgina web.

www.unid.edu.mx

El nombre es el cuerpo principal del dominio, o

sea la palabra que denomina nuestra pgina
web.

ANTECEDENTES
Dominio de una pgina web

El tipo identifica la finalidad del sitio.

www.unid.edu.mx

El pas es una parte opcional del dominio que

identifica el pas de origen del mismo.

ANTECEDENTES
Dominio de una pgina Web
Los
dominios
estn
regulados
internacionalmente por ICANN
(sigla en ingls de Corporacin
Internacional para la Asignacin de
Nombres y Nmeros), que es una
organizacin sin fines de lucro que
se encarga de administrar el
sistema de asignacin de dominios.
En todo el mundo, NIC (sigla en
ingls de Centro de Interconexin
de Informacin) es el ente que,
siguiendo
las
prcticas
internacionales,
administra
el
dominio

ARQUITECTURA WEB
Define una tarea que requiere conocimientos
tcnicos de construccin, funcionales y de
diseo para sitios o pginas web. La construccin
de pginas web requiere una compleja
conjuncin de diferentes sistemas integrados
entre s: servidores, bases de datos,
organizacin de la informacin, etctera.

El foco para el diseo y construccin de pginas

web se centra en el usuario y sus
requerimientos.

ARQUITECTURA WEB
Objetivo
El principal objetivo de la arquitectura Web es
resolver las necesidades especficas del
negocio como:
Venta

de productos.
Servicios online.
Satisfaccin de las necesidades de los potenciales
clientes

ARQUITECTURA WEB
Arquitectura de la Informacin
Es el estudio de la organizacin de
informacin con el objetivo de permitir
usuario encontrar su va de navegacin hacia
conocimiento y la comprensin de
informacin.

la
al
el
la

ARQUITECTURA WEB
Anlisis de la arquitectura de webs
Uno de los factores ms importantes en el diseo de un sitio web es la correcta
construccin de su Arquitectura de la Informacin (IA).
En este sentido, la tcnica ms enfocada al estudio de la IA en sistemas de
informacin ya desplegados y que proporciona mayor grado de independencia
es el Test de Estrs de Navegacin (TEN); se basa en una serie de preguntas
que determinan si una IA permite a los usuarios hacerse una idea clara de
dnde estn y qu elementos de informacin tienen a su alcance desde ese
punto.

Otra tcnica novedosa es la de Eye Tracking (ET) seguimiento de los ojos que
permite mirar al usuario en cada momento, consintiendo que los evaluadores
puedan saber si una de las causas de que los usuarios no perciban
correctamente la IA es que no hayan fijado la mirada en algunos de los
elementos relevantes de la misma.

ARQUITECTURA WEB
Aspectos Generales en Arquitectura WEB
1- Escalabilidad.
Caracterstica principal apps WEB:
Posible incremento vertiginoso del nmero de usuarios
Es importante el correcto dimensionamiento de la
aplicacin
La adaptabilidad del sistema ante el incremento de
demanda.
Varias opciones:
Escalabilidad

Horizontal
Escalabilidad Vertical
Cluster de servidores

ARQUITECTURA WEB
Aspectos Generales en Arquitectura WEB

2- Separacin de responsabilidades.
Premisa base para la separacin de capas
Distintas Responsabilidades no deben ser
delegadas en la misma clase (separacin de
incumbencias)
Tendencia actual en aplicaciones WEB:
Arquitectura n-capas
El modelo ms bsico es el de tres capas:
Capa

de presentacin
Capa de negocio
Capa de persistencia

ARQUITECTURA WEB
Aspectos Generales en Arquitectura WEB

3- Portabilidad.
Una aplicacin web debe poder adaptarse a las
distintas arquitecturas fsicas posibles en el despliegue.
Las tareas de adaptacin a un nuevo entorno deben
limitarse al mbito de la configuracin, no del
desarrollo.
Supuesto de ejemplo: Cliente reacio a las tecnologas
de componentes J2EE (EJBs) por costes, rendimiento o
simplemente, moda.

4- Componentizacin de los servicios de infraestructura.

ARQUITECTURA WEB
Aspectos Generales en Arquitectura WEB

5- Gestin de la sesin del usuario, cacheado de

entidades.
Aspecto muy delicado del sistema
Cacheado de entidades en:
Sesin

de usuario
Contexto de la aplicacin
Caducidad de la informacin
Refresco de datos
Rendimiento del sistema. Consumo de recursos del
sistema.

6- Aplicacin de patrones de diseo.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Procurar la accesibilidad,
la navegabilidad y la
usabilidad de una pgina
web es fundamental para
ofrecerles a los visitantes
y
usuarios
una
experiencia gratificante,
y as instarlos a volver a
visitarla.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Accesibilidad

Se refiere a que todas aquellas personas que

lo deseen puedan percibir, entender,
navegar e interactuar con una pgina.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Accesibilidad

El diseo y la arquitectura de una pgina web debe

cumplir con ciertos requisitos de accesibilidad, lo
que implica tener en cuenta muchos factores,
como:

el tipo de contenido
el tamao
la complejidad de la pgina web
las herramientas tecnolgicas con las que ser
desarrollada.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Accesibilidad

Generalmente se evala de acuerdo con tres

niveles de prioridad:
Prioridad 1
Prioridad 2
Son aquellos puntos
Son aquellos puntos
que se deben cumplir
que se deberan
ya que, de otra
cumplir ya que, en
manera, ciertos
caso contrario, sera
grupos de usuarios no muy difcil acceder a
tendran acceso a la
la informacin para
informacin de la
ciertos grupos de
pgina web.
usuarios.

Prioridad 3
Son aquellos puntos
que se deberan
cumplir ya que, de
otra forma, algunos
usuarios
experimentaran
ciertas dificultades
para acceder a la
informacin.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Accesibilidad
En funcin de estas prioridades, las aplicaciones de evaluacin
de accesibilidad establecen niveles de conformidad, que se
codifican de la siguiente forma:

Nivel de
Conformidad "A":

Nivel de
Conformidad "AA":

Nivel de
Conformidad "AAA":

Todos los puntos de

verificacin de
prioridad 1 se
satisfacen

Todos los puntos de

verificacin de
prioridad 1 y 2 se
satisfacen

Todos los puntos de

verificacin de
prioridad 1, 2 y 3 se
satisfacen.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Accesibilidad
Una de las herramientas de evaluacin de accesibilidad
ms utilizadas es TAW (Test de Accesibilidad Web). Sus
destinatarios son profesionales del diseo y desarrollo
web.

En el sitio http://www.tawdis.net/, solo tenemos

que ingresar la URL de la pgina que queremos analizar, y
en breves instantes tendremos un informe en HTML donde
se indican los inconvenientes de accesibilidad y algunas
recomendaciones para mejorarla.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Navegabilidad
Se refiere a la facilidad con que un usuario puede
desplazarse por ella. Si una pgina web es clara,
sencilla, comprensible, ofrece al usuario una
experiencia satisfactoria.

Una pgina web tiene un nivel ptimo de navegabilidad

cuando su interfaz le responde al usuario las siguientes
preguntas: Dnde estoy?, dnde he estado?, dnde
puedo ir?

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Principios para la Navegabilidad Web

Puede determinarse a partir de tres principios:

La estructura del
sitio:

La localizacin:

Es la organizacin
Cuando se trata de
interna de una pgina pginas complejas, es
web: se refiere a
necesario que el
cmo se categorizan
usuario pueda
los contenidos en
identificar con
niveles de
facilidad en qu lugar
importancia, en
de la pgina se
secciones y
encuentra.
subsecciones, etc.

El contexto:
Guiar en todo
momento al visitante
de una pgina web. El
diseo de una pgina
debe proveer a los
usuarios referencias
explcitas que ayuden
a diferenciar una
seccin de otra.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Recomendaciones para la navegabilidad Web

1- Incorporar
el men de
navegacin

2- Poder
volver en
un clic a la
pgina
principal

3- Regla de
los tres clics

4- Crear un
mapa del
sitio

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Usabilidad

Trmino que se utiliza para analizar la mejor

forma de disear sitios web para que los
usuarios puedan interactuar con ellos de la
forma ms fcil, cmoda e intuitiva
posible.

ACCESIBILIDAD, NAVEGABILIDAD Y
USABILIDAD
Criterios a considerar para la Usabilidad

1- Facilidad
de
aprendizaje

3- Flexibilidad

2- Eficiencia
de uso

4- Seguridad

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Decisiones tcnicas sobre los contenidos web
Se deben tener en cuenta ciertas necesidades y requisitos
tcnicos que son fundamentales para la calidad y
performance de la pgina.

Las decisiones tcnicas que se deben tomar con respecto

al contenido son muchas: estructuracin de la
informacin, estructura de las carpetas en el servidor,
tipo de archivo y tamao de las imgenes y fotografas y
vnculos para descargas de archivos imprimibles.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Estructuracin de la informacin
Es importante disear, ya sea en papel o a travs de algn
recurso tecnolgico, un organigrama con todas las
secciones que se quieren publicar en una pgina web,
incluyendo la distribucin de texto, imgenes, vnculos
y otras herramientas.

Las estructuras ms comunes para organizar la

informacin son cuatro:

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Estructuracin de la informacin
1.- Estructura en rbol: Esta estructura se disea a partir
de una pgina principal que se vincula con otras pginas
con menor nivel de jerarqua: esta lnea jerrquica se
reitera cuantas veces sea necesario; solo es recomendada
para pginas con muy poca informacin.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Estructuracin de la informacin
2.- Estructura lineal: No es una estructura que se utilice muy a
menudo en pginas web, sin embargo dado que no es jerrquica
pero implica una secuencialidad lineal y nica, es muy utilizada
en pginas que presentan manuales o cursos, dado que el usuario
debe recorrer forzosamente una secuencia de pginas.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Estructuracin de la informacin
3.- Estructura mixta: Es una estructura que combina la estructura
en rbol y la lineal. Esta estructuracin permite una organizacin
jerrquica en algunos niveles, y una organizacin lineal en otros.
Esta estructuracin facilita mucho la navegabilidad de una pgina,
ya que permite recorrer diferentes secciones sin necesidad de
volver a la pgina de inicio.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Estructuracin de la informacin
4.-Estructura en red: es actualmente la ms utilizada, ya que
permite que todas las pginas estn interconectadas entre s, por
lo tanto es una estructura mucho ms compleja y menos
organizada. Hay que tener en consideracin que la planificacin
de este tipo de estructura se debe realizar con minuciosidad, para
evitar que el usuario se pierda en la navegacin.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Mapa de Sitio
Refleja la estructura de informacin por medio de la
cual est conformada una pgina web, y permite al
usuario saber dnde encontrar determinada seccin o
informacin.

Adems de la estructura de la informacin al nivel de la

pgina o sitio web, debemos tener en cuenta que la
informacin y los contenidos que se publiquen
tambin deben respetar una cierta estructura.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Mapa de Sitio
Cuando se habla de desarrollo para contenidos web se
identifica una serie de Recomendaciones Bsicas:
Los contenidos de un sitio
web se organizan en forma
piramidal: esto implica que la
informacin ms actualizada o
ms importante debe situarse
en un primer nivel.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Mapa de Sitio
Recomendaciones Bsicas:
Se deben destacar los
ttulos, los enlaces a otras
pginas,
los
enlaces
a
secciones propias, los archivos
para descarga, etctera.

REQUERIMIENTOS TCNICOS DE LOS

CONTENIDOS WEB
Mapa de Sitio
Recomendaciones Bsicas:
El texto debe estar escrito de
forma tal que el lector pueda
saber de qu trata el contenido
sin necesidad de leer por
completo la informacin. Esto
puede lograrse con una buena
seleccin
de
ttulos
y
subttulos,
palabras
clave
destacadas, prrafos breves,
etctera.

GRACIAS