Está en la página 1de 57

Arquitectura y Servicios de Internet – Ingeniería del Software Web

Unidad C. Ingeniería Software Web

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 1/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Tabla de contenidos
l Proceso
l Metodología
l Diseño de aplicaciones web
l Arquitectura web

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 2/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Previo: Características de las aplicaciones web

l Uso intensivo de red Evolución continua


(internet o intranet) Inmediatez en su
l Concurrencia desarrollo
l Carga difícil de predecir Seguridad
l Alto rendimiento Aspecto
l Disponibilidad 24x7x365
l Centradas en
contenidos
l Hipertexto,
l Gráficos, video, audio
(multimedia)

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 3/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Características de las WebApps => Desarrollo ágil
l Incluyendo:
- análisis, diseño, implementación y pruebas (testing)

l Dentro de un proceso que:


- Adopta el cambio
- Apoya la creatividad e independencia de los desarrolladores
- Implicación de los clientes en el desarrollo
- Equipos de desarrollo pequeños
- Enfatizando el desarrollo evolutivo e incremental:
l con ciclos de vida cortos

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 4/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Equipos multidisciplinares
.vs
l Programadores vs. diseñadores

l Proceso basado en:


l Entregas incrementales
l Cambios frecuentes
l Tiempos de entrega cortos
l Adoptando principios del Manifiesto Ágil:
l "Manifest for Agile Software Development" http://agilemanifesto.org/

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 5/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Manifiesto Ágil:
l Nuestra mayor prioridad es satisfacer al cliente
mediante la entrega temprana y continua de software
con valor.

l Aceptamos que los requisitos cambien, incluso en


etapas tardías del desarrollo. Los procesos Ágiles
aprovechan el cambio para proporcionar ventaja
competitiva al cliente.

l Entregamos software funcional frecuentemente, entre


dos semanas y dos meses, con preferencia al periodo
de tiempo más corto posible.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 6/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Los responsables de negocio y los
desarrolladores trabajamos juntos de forma
cotidiana durante todo el proyecto.

l Los proyectos se desarrollan en torno a individuos


motivados. Hay que darles el entorno y el apoyo
que necesitan, y confiarles la ejecución del
trabajo.

l El método más eficiente y efectivo de comunicar


información al equipo de desarrollo y entre sus
miembros es la conversación cara a cara.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 7/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l El software funcionando es la medida principal de
progreso.

l Los procesos Ágiles promueven el desarrollo


sostenible. Los promotores, desarrolladores y
usuarios debemos ser capaces de mantener un
ritmo constante de forma indefinida.

l La atención continua a la excelencia técnica y al


buen diseño mejora la Agilidad.

l La simplicidad, o el arte de maximizar la cantidad


de trabajo no realizado, es esencial.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 8/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso

l Las mejores arquitecturas, requisitos y diseños


emergen de equipos auto-organizados.

l A intervalos regulares el equipo reflexiona sobre


cómo ser más efectivo para a continuación ajustar
y perfeccionar su comportamiento en
consecuencia.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 9/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso Test de aceptación


Uso por parte del cliente
Evaluación de clientes

Testing

Incremento del software


Nueva release (5)
Entregra
(despliegue) y
retroalimentación
(4)
Construcción

Refactoring
(1)
Comunicación
con el cliente (3)
Modelado

Análisis del negocio


Formulación Modelo de diseño
(2) Contenidos
Planificación Modelo de análisis Arquitectura
Contenido Navegación
Iteraciones Interfaz
Funciones
Plan de iteraciones Configuración

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 10/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Marco general de trabajo: Framework o
actividades de proceso
l 1. Comunicación con el cliente
- Análisis de negocio
l Contexto de la organización
l Identificar stakeholders, cambios potenciales, integración
con otras aplicaciones, bases de datos, etc.
- Formulación
l Recogida de requisitos: ¿Qué problema resuelve la
WebApp?
- Aspectos inciertos y cambios potenciales

l 2. Planificación
- Tareas y línea de tiempo (en semanas) para el
desarrollo
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 11/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l 3. Modelado
- Tareas de análisis y modelado "rápido" adaptadas
a las características especiales
l 4. Construcción
- Herramientas y tecnologías a aplicar para la
construcción
- Añadiendo pruebas (testing) para detectar errores:
l en el diseño, funcionalidad, usabilidad, rendimiento,
etc.
l 5. Despliegue
- Configuración y ajuste en su entorno operacional
con el usuario final
- Evaluaciones posteriores una vez desplegadas
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 12/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso Test de aceptación


Uso por parte del cliente
Evaluación de clientes

Testing

(5)
Entregra
(despliegue) y
Incremento del software retroalimentación
(4)
Nueva release Construcción

Refactoring
(1)
Comunicación
con el cliente (3)
Modelado

Análisis del negocio


Formulación Modelo de diseño
(2) Contenidos
Planificación Modelo de análisis Arquitectura
Contenido Navegación
Iteraciones Interfaz
Funciones
Plan de iteraciones Configuración

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 13/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Mejores prácticas
l Tomarse tiempo para comprender el negocio y los objetivos
- No producir una WebApp buena técnicamente que no resuelve ningún problema
l Definir la interacción con usuarios con escenarios
- Casos de uso
l Usados en planificación, seguimiento, análisis, diseño y testing
l Realizar un plan de desarrollo
- Granularidad fina (semanas) con seguimiento diario
l Gastar tiempo en el modelado
- Diagramas UML de clases, secuencia y de estados
l Revisar los modelos, la consistencia y calidad del sistema
l Usar tecnologías y herramientas que permitan reutilización
l "Probar primero, desplegar después"
- Los usuarios de las WebApp sólo nos darán una oportunidad

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 14/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Análisis del negocio y formulación
l Identificación de necesidades de negocio
l Ámbito de desarrollo
l Objetivos de la WebApp
l Conduce posteriormente a la siguiente fase:
- Análisis con la identificación de datos, funcionalidad y requisitos
l Se centra en la "visión general" del problema
- Frontera difusa con la recogida de requisitos en análisis
l Preguntas a realizar (con respuesta breve):
- ¿Motivación del negocio?
- ¿Objetivos a cumplir?
l ¿Beneficios que aporta?

l Información que muestra y nuevas funcionalidades

- ¿Quién usará la aplicación?

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 15/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Recogida de requisitos
l De contenido
l De funcionalidad
l Interacción con el usuario

l Determinar categorías de usuarios: Roles


l Objetivos
l Background y experiencia
- ¿Cómo llega el usuario a la aplicación?
- ¿Qué características gustan o no?
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 16/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Comunicación con stakeholders y usuarios
l Grupos tradicionales (10 stakeholders/usuarios)
l Comunicación electrónica: foros
l Encuestas
- Encuestas sobre productos parecidos
l Creación de escenarios
- Casos de uso
l Cruzar contenidos y funcionalidad con los usuarios
- Iterativamente hasta llegar al proceso

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 17/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Planificación l A repartir en roles:
l Equipo l Desarrolladores de
- Habilidades
contenido (1)
l Desarrollo de
componentes l Publicadores web
l Red
l Arquitectura - Enlazar (1) y (2)
l Diseño navegacional l Ingenieros web (2)
l Estándar de
internet/lenguajes l Experto del dominio
Diseño de interfaz de
Soporte
l

usuario l

l Diseño gráfico y - Evolución posterior


layout
l Testing l Administrador
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 18/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Proceso
l Planificación
l Pasos:
- Comprensión del ámbito, dimensiones y restricciones
- Definir estrategia incremental
l Sucesivas realeases funcionales
- Análisis de riesgos
- Estimar tiempos y asignar recursos
- Seleccionar lista de tareas
l Adaptable a cada incremento del desarrollo
- Establecer una agenda
- Añadir mecanismos de tracking
l ¿actividades del framework completadas? ¿casos de uso?
- Establecer una gestión de cambios

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 19/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l 1) Métodos de comunicación
l Comunicación entre desarrolladores, clientes, expertos,
jefes de proyecto, etc.
l 2) Métodos de análisis
l Comprender el problema y las interacciones
l 3) Métodos de diseño
l Técnicas de diseño para el contenido, aplicación,
información, interfaz de usuario y navegación
l 4) Métodos de testing
l Revisiones formales y técnicas de pruebas sobre
componentes, arquitectura, navegación, usabilidad,
seguridad, configuración, rendimiento, etc.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 20/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Análisis vs. Volatilidad del producto
l Fundamentado en:

- 1. Información y contenido a presentar


- 2. Funciones a realizar por el usuario
- 3. Comportamiento de la WebApp para presentar
contenidos realizando funciones
l Aspectos del problema a analizar:
l A) Contenidos: identifica datos y colaboraciones
l B) Interacciones: de usuario, navegación y del sistema
l C) Funcional: arrancadas por el usuario y la secuencia de
procesamiento
l D) Configuración: entorno operacional

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 21/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Análisis de requisitos
l Jerarquía de usuarios (actores)
- Usuarios UML y uso de herencia
l Casos de uso
- "Conjunto de funcionalidad"
- Para cada usuario en la jerarquía de usuarios
l Descripción textual informal – tipícamente en desarrollo web
l Descripción con plantillas – en metodologías más
tradicionales
- Organizados en paquetes

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 22/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Análisis de contenidos
l Contenidos de tipo texto, gráfico, audio y video
- De corte más estático, información pre-existente
- Representación:
l Diagramas entidad/relación número

l Árboles de etiquetas nombre


foto

texto
desc
componente video

inicial
precio
descuento
l Clases de análisis y atributos
- Entidades creadas o manipuladas por interacciones del usuario
l Atributos, operaciones y colaboraciones
- Diagramas de clases UML

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 23/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Análisis de interacciones
l Conversación usuario-funcionalidad de WebApp
- UML
l Casos de uso
l Diagramas de secuencia
l Diagramas de estado

- Prototipos de interfaz

l También representadas en el modelo navegacional

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 24/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Análisis funcional
l 1) Observable por el usuario al interactuar con la
WebApp
l 2) Operaciones en las clases de análisis

l Elemento básico:
- Diagramas de actividad
l Apoyado en:
- Diagramas de secuencia

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 25/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Análisis de configuración
l Entornos de lado de servidor y cliente
- Hardware y sistema operativo
- Red (internet, intranet, etc)
- Bases de datos y sistema legados
- Navegadores
l No todos funcionan igual
- Cuestiones avanzadas:
l Distribución de carga entre servidores
l Caching
l Replicación y tolerancia a fallos
l Etc.
l Elemento básico
- Diagramas de despliegue

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 26/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Diseño
l Soluciones previas dirigidas por HTML
("artísticas")
l Aspectos:
- Look & feel (Ej: CSS) y estética
- Arquitectura y navegación
l Diseño de interfaz
- Debe responder a tres preguntas:
l ¿Dónde estoy?
l ¿Qué puedo hacer?
l ¿De dónde vengo y a dónde voy?

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 27/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Estética – diseño gráfico
l Heurísticas:
- No sobrecargar la página
- Enfatizar el contenido importante
- Layout de esquina superior izquierda hacia
esquina inferior derecha
- Agrupar navegación, contenido y funcionalidad
siempre de la misma forma buscando patrones
- No abusar del scroll
l Preferiblemente no utilizarlo
- Considerar resoluciones y tamaños de ventana

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 28/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Diseño de contenidos
l A) Representación de los objetos de contenido y los
mecanismos para instanciar sus relaciones
(ingenieros web)
- Parte del modelo de análisis y continúa en el de diseño
l Ej: diagramas de clases
l B) Representación visual de la información
(diseñadores web)
- Autoría de contenidos
- Look & feel

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 29/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Diseño navegacional
l Caminos de navegación presentados al usuario
para interactuar
l Considerando:
- A) Semántica de navegación
- B) Mecanismos (sintaxis) de navegación

l A) Semánticas de navegación
- En relación a la jerarquía de usuarios y casos de
uso: NSU unidades semánticas de navegación

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 30/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
<<navegation link>>
Solicitar alternativa

l Ej: NSU <<navegation link>>


Habitación Componentes recomendados Componente
<<navegation link>> <<navegation link>>
Seleccionar habitación Mostrar componentes

<<navegation link>> <<navegation link>>


Retornar a habitación Seleccionar componente
<<navegation link>>
Mostrar descripción

<<navegation link>> Cuenta


Ver cuenta
Descripción de componentes

<<navegation link>>
Seleccionar componente DescripciónMarketing

Descripción Técnica
foto

esquema
video

[Sommerville, 2006]
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 31/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l B) Mecanismos (sintaxis) de navegación
l Elementos individuales:
- Links de texto
- Botones
- etc.
l Barra de navegación horizontal
l Barra de navegación vertical
l Tabs
l Menú (emergente)
l Mapas del site

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 32/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Metodología
l Diseño de arquitectura
l 1) Arquitectura de contenido
- Forma en la que se presentan y estructuran los objetos
de contenido u objetos compuestos como páginas web
l Diseño de las aplicaciones web (ver siguiente apartado...)
l 2) Arquitectura web
- Gestión de interacciones de usuario
- Procesos internos
- Efectos de la navegación
- Presentación de contenidos

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 33/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Diseño de las aplicaciones web


l Estructuras hipermedia de contenidos de la WebApp
l 1) Lineal
- Secuencia común de interacciones predecibles
l Ej: tutorial, wizards, etc.
[Sommerville, 2006]

Universidad
Linealde Burgos - Francisco
LinealJ.
conRodríguez
flujo opcional <fjrdiaz@ubu.es> Lineal con desviaciones 34/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Diseño de las aplicaciones web


l 2) Malla
- Organización en categorías en dos o más dimensiones
- Contenidos muy regulares
l Ej: tipos de producto (horizontal) / distintos fabricantes (vertical)

[Sommerville, 2006]

Retícula
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 35/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Diseño de las aplicaciones web


l 3) Jerárquica
- Estructura más habitual en árbol
- Inicialmente con navegación vertical aunque se pueden establecer enlaces en horizontal
pero crean confusión si se abusa

[Sommerville, 2006]

Jerárquica
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 36/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Diseño de las aplicaciones web


l 4) En red o "web pura"
- Similar a la evolución de los sistema orientados a objetos
- Paso de control entre páginas similar al paso de mensaje en objetos
l Flexible pero confuso para el usuario

[Sommerville, 2006]

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es>


Web pura 37/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Arquitectura web
l Arquitecturas
l Infraestructura que permite alcanzar un objetivo de negocio
l División en capas con distintas características
- Datos de aplicación
- Contenidos (navegación)
- Interfaz y look & feel
l Modelo-vista-controlador como solución habitual

Controlador
Maneja peticiones. Petición de cambio de estado
Petición o datos Selecciona comportamiento y
vistas para la respuesta.
Modelo
Encapsula funcionalidad
Cliente Datos a presentar
Accede a datos BD
Navegador Encapsula contenidos
Selección de vista Estado web

Vista
Datos HTML Prepara datos y presentación
Actualizar

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 38/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
l La consecución de los objetivos perseguidos

de una WebApp está condicionada a la


satisfacción del usuario final.
l Factores de influencia:

l Calidad y utilidad de los contenidos


l Calidad del servicio y asistencia del proveedor
l Calidad del diseño
l Buen diseño es sinónimo: Comprensible, fácil
de usar, claro intuitivo y fácil de aprender.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 39/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
l Es imprescindible la adopción de técnica,

procedimientos y métodos que aseguren la


adecuación del diseño a las necesidades,
habilidades y objetivos del usuario.
l Nos centraremos:

l Usabilidad y accesibilidad
l Arquitectura de la información
l Diseño
l Planificación

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 40/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
USABILIDAD Y ACCESIBILIDAD
l Se traduce como facilidad de uso y se define

como "grado de eficacia, eficiencia y satisfacción


con la que los usuarios específicos pueden lograr
objetivos específicos, en contextos de uso
específicos".
l Atributos cuantificables objetivos: eficacia o errores.
l Atributos cuantificables subjetivos: satisfacción
l Una WebApp debe ser usable
independientemente de quién la utilice

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 41/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
USABILIDAD Y ACCESIBILIDAD
l La accesibilidad está íntimamente ligado a la

usabilidad.
l Diseño debe ser usable y posibilitar el acceso a

todos sus potenciales usuarios, sin excluir a


nadie.
l Paradoja:

l Diseño usable para delimitar a nuestra audiencia


potencial, y accesible para darle heterogeneidad.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 42/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
ARQUITECTURA DE LA INFORMACIÓN
l La usabilidad de la WebApp depende no sólo

del diseño de la interfaz, sino también de su


arquitectura -organización y estructura-.
l Arquitectura tiene una gran influencia en la

usabilidad.
l Se define como el arte y ciencia de organizar

espacios para ayudar a los usuarios a


satisfacer sus necesidades.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 43/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
ARQUITECTURA DE LA INFORMACIÓN

l Dos factores fundamentales:


l Recuperación de la información.
l Facilidad para encontrar todos los elementos.

l Se ubica dentro del diseño conceptual del


producto.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 44/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
DISEÑO CENTRADO EN EL USUARIO
l Cumplir con usabilidad, accesibilidad y correcta

arquitectura es necesario una metodología,


técnicas y procedmientos ideados para ello.
l El Diseño Centrado en el Usuario, asume que

todo el proceso de diseño y desarrollo debe estar


conducido por el usuario, sus necesidades,
características y objetivos

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 45/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 46/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
DISEÑO CENTRADO EN EL USUARIO

l Destacar las fases cíclicas de "diseño",


"prototipado" y "evaluación" por eso mismo.
l Si llevamos a cabo este tipo de diseño se
localizarán errores que son díficilmente
salvables en un futuro.
l Reparación asequible.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 47/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
PLANIFICACIÓN
l Fundamental en cualquier desarrollo.

l Identifican los objetivos, necesidades,

requerimientos y objetivos
l Diseño

l Modelado de usuario:
- Definición de clases o perfiles de usuario en base a
atributos comunes
- Tener en mente para quién diseñamos
- Definición de arquetipos, scenarios
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 48/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
PLANIFICACIÓN
l Diseño

l Diseño conceptual:
- Define el esquema de organización,
funcionamiento y navegación del sitio.
- NO APARIENCIA
- Define sistemas de clasificación de contenidos:
Índices, mapas, etc.
l Diseño visual:
- Composición y aspectos.
- Comportamientos
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 49/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
PLANIFICACIÓN
l Diseño

l Diseño de contenidos:
- Equilibrio entre contenidos: interrelacionados y
vinculados.
l Prototipado
l Evaluar usabilidad
l Se elaboran modelos o prototipos de la interfaz
que se deben testear: horizontal o verticalmente,
alta/baja fidelidad.
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 50/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
Y. Hassan, F.J. Martín-Fernández y G. Iazza
PLANIFICACIÓN
l Evaluación

l Es la etapa más importante de esta terminología


l Distintos métodos:
- Heurística
- Tests de usuarios
l Implementación y lanzamiento
l Mantenimiento y seguimiento
l Opiniones de usuarios y Uso del sitio
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 51/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
EJERCICIO
l Pensar en el desarrollo de una web para

comercio electrónico.
l Tras realizar todas las fases iniciales de

comunicación con el cliente y análisis de


requisitos y funcionales, pasamos a realizar el
diseño centrado en el usuario:
l Diseño: Modelado del usuario, diseño conceptual,
diseño visual y definición del estilo, diseño de
contenidos
l Prototipado: Horizontal visualizando gran parte del
contenido, vertical centrada en funcionalidad.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 52/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
EJERCICIO
l Tras realizar todas las fases iniciales de

comunicación con el cliente y análisis de


requisitos y funcionales, pasamos a realizar el
diseño centrado en el usuario:
l Diseño.
l Prototipado.
l Evaluación: A papel, sobre el prototipo, sobre el
sitio web:
- Heurística.
- Centrada en el usuario.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 53/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
EJERCICIO
l Heurística

(http://www.nosolousabilidad.com/articulos/heuristica.htm) :
l Aspectos generales: Coherencia.
l Identidad.
l Lenguaje y redacción.
l Estructura y navegación.
l Layout de la página.
l Búsqueda.
l Elementos multimedia.
l Ayuda y accesibilidad.
Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 54/57
Arquitectura y Servicios de Internet – Ingeniería del Software Web

Alternativa: Diseño Web Centrado en


el Usuario: Usabilidad y Arq. de la Inf.
EJERCICIO
l Centrada en el usuario

(http://www.nosolousabilidad.com/articulos/test_usuarios.htm):
l Coger un grupo de usuarios reales, proponedle un
objetivo a realizar sobre la web y anotar todas sus
interacciones sobre la misma (positivos y/o
negativos).
l Debe ser complementaria a la evaluación heurística.
l Es muy costoso por lo que se recomienda hacerlo
después de la evaluación heurística.

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 55/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Bibliografía
l Pressman, R. (2006) Software engineering – A practitioner's Approach. Sixth
Edition. McGraw-Hill Science/Engineering/Math. ISBN-10: 007301933X ISBN-13:
978-0073019338
l Chapter 16. Web engineering
l Chapter 17. Initiating a WebApp Project
l Chapter 18. Analysis for WebApps
l Chapter 19. Design for WebApps

l Yusef Hassan & Francisco J. Martín Fernández & Ghzala Iazza. Diseño Web Centrado en el Usuario:
Usabilidad y Arquitectura de la Información. "Hipertext.net", núm. 2, 2004.
l Lecturas recomendadas:
l UML en la web
- Conallen, B. (2002) Building Web Applications With Uml. Addison-Wesley. ISBN-10:
0201730383 ISBN-13: 978-0201730388
l Organización visual (diseño de interfaz)
- Vora, P. (2009) Web Application Design Pattern. Morgan Kaufmann Publishers. ISBN: 978-0-
12-374265-0

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 56/57


Arquitectura y Servicios de Internet – Ingeniería del Software Web

Licencia
•Autores: Raúl Marticorena Sánchez y Cristóbal J. Carmona del Jesus
•Área de Lenguajes y Sistemas Informáticos
•Departamento de Ingeniería Civil
•Escuela Politécnica Superior
•UNIVERSIDAD DE BURGOS
•2014

Este obra está bajo una licencia Creative Commons Reconocimiento-NoComercial-CompartirIgual 3.0 Unported.
No se permite un uso comercial de esta obra ni de las posibles obras derivadas, la distribución de las cuales se
debe
hacer con una licencia igual a la que regula esta obra original

Licencia disponible en http://creativecommons.org/licenses/by-nc-sa/3.0/

Universidad de Burgos - Francisco J. Rodríguez <fjrdiaz@ubu.es> 57/57

También podría gustarte