Sie sind auf Seite 1von 63

DIRECCIÓN GENERAL DE EDUCACIÓN SUPERIOR TECNOLÓGICA

INSTITUTO TECNOLÓGICO DE CIUDAD VALLES

DEPARTAMENTO DE SISTEMAS Y COMPUTACIÓN

INGENIERÍA EN SISTEMAS COMPUTACIONALES

ANTOLOGÍAS
DE
INGENIERÍA WEB

ELABORADO POR

ISC. Rosa Imelda García Chi, MTI


Ingeniero en Sistemas Computacionales
Máster en Tecnologías de la Información
Ingeniería Web- Antologías 2013

Contenido

INTRODUCCIÓN .................................................................................................... 1

Datos de la Asignatura ............................................................................................ 2

Nombre de la Asignatura: Ingeniería de Software Web ....................................... 2

Temario de la Asignatura ........................................................................................ 3

Unidad 1: Introducción a la Ingeniería Web (IWeb) ............................................. 3

Unidad 2: Formulación y Planeación de la Ingeniería Web .................................. 3

Unidad 3: Modelado del Análisis de Ingeniería Web ............................................ 3

Unidad 4: Modelado del Diseño de aplicaciones Web ......................................... 4

Unidad 5: Pruebas para IWeb .............................................................................. 5

Objetivo(s) General(es) del Curso de Ingeniería de Software Web......................... 6

Competencias Previas ......................................................................................... 6

Competencias específicas a desarrollar por unidad ............................................ 7

ANTOLOGÍAS DE LA UNIDAD 1 ............................................................................ 9

Unidad 1. Modelado de Negocios ......................................................................... 10

ANTOLOGÍAS DE LA UNIDAD 2 .......................................................................... 22

Unidad 2. Metodologías de Desarrollo de Software .............................................. 22

ANTOLOGÍAS DE LA UNIDAD 3 .......................................................................... 30

Unidad 3. Arquitectura de Software .......................... ¡Error! Marcador no definido.

ANTOLOGÍAS DE LA UNIDAD 4 .......................................................................... 30

Unidad 4. Seguridad ................................................. ¡Error! Marcador no definido.

ANTOLOGÍAS DE LA UNIDAD 5 .......................................................................... 54

Unidad 5. Arquitectura de Software .......................... ¡Error! Marcador no definido.

FORMATO DE REPORTE ....................................... ¡Error! Marcador no definido.

ING. ROSA IMELDA GARCIA CHI, MTI i


Ingeniería Web- Antologías 2013
Formato de Reporte de Prácticas............................. ¡Error! Marcador no definido.

Reporte por práctica............................................. ¡Error! Marcador no definido.

Reporte final de todas las prácticas ...................... ¡Error! Marcador no definido.

Anexo A .................................................................... ¡Error! Marcador no definido.

Bibliografía ............................................................... ¡Error! Marcador no definido.

ING. ROSA IMELDA GARCIA CHI, MTI ii


Ingeniería Web- Antologías 2013

INTRODUCCIÓN

El presente Documento denominado “Antologías de Ingeniería Web” son


una recopilación de artículos relacionados con la Ingeniería de Software Web
(IWeb) integra un conjunto de artículos sugeridos como lecturas base,
correspondientes a las cinco unidades del programa de estudios de la
Especialidad de la carrera de Ingeniería en Sistemas Computacionales del IT de
Cd. Valles.

El Desarrollo de Software Web es una disciplina relativamente nueva en el


ámbito de las tecnologías, su impacto en las Procesos de Negocios Electrónicos,
en el Comercio Electrónico y en los Ambientes Virtuales de Aprendizaje; por eso,
tiene su generación en el Modelo de Ingeniería Web, conocido como Modelo
IWeb, y con esto se sustenta la idea de la recopilación de los artículos incluidos en
esta antología; así como la metodología UML, que ha sido utilizada como notación
de desarrollo en cada una de las fases de modelado de análisis y de modelado de
diseño.

Esta Antología es resultado de un proyecto docente y podrá adquirirse en el


Departamento de Sistemas y Computación, así como en Internet en diversas
plataformas como www.googledocs.com, www.slideshare.net, www.scribd.com, y
www.issuu.com .

ING. ROSA IMELDA GARCIA CHI,MTI 1


Ingeniería Web- Antologías 2013

Datos de la Asignatura

Nombre de la Asignatura: Ingeniería de Software Web

Carrera Ingeniería en Sistemas Computacionales

S/C
Clave de la Asignatura
Asignatura de la Especialidad Ingeniería Web

2–3–5
HT- HP- Créditos SATCA

Temario General UNIDAD 1 Fundamentos de la Ingeniería Web (IWeb)

UNIDAD 2 Formulación y Planificación de la IWeb

UNIDAD 3 Modelado del Análisis de IWeb

UNIDAD 4 Modelado de Diseño para aplicaciones Web

UNDIAD 5 Pruebas para IWeb

ING. ROSA IMELDA GARCIA CHI,MTI 2


Ingeniería Web- Antologías 2013

Temario de la Asignatura

Unidad 1: Introducción a la Ingeniería Web (IWeb)

Temas Unidad 1.1 Atributos de los sistemas y aplicaciones basados en Web


1.2 Estratos de la ingeniería de WebApps
1.3 El proceso de ingeniería Web
1.3.1 Definición del marco de trabajo
1.3.2 Refinamiento del marco de trabajo

Unidad 2: Formulación y Planeación de la Ingeniería Web

Temas Unidad 2 2.1 Formulación de sistemas basados en Web


2.1.1. Preguntas de formulario
2.1.2. Recopilación de requisitos para WebApps
2.1.3. El puente hacia el modelado de análisis
2.2 .Planeación de proyectos de ingeniería Web
2.3. El equipo de ingeniería Web
2.3.1. Los actores
2.3.2. Construcción del equipo
2.4. Conflictos de gestión de proyecto para ingeniería Web
2.4.1 Planeación de WebApps: subcontratación
2.4.2 Planeación de WebApps: ingeniería Web en casa
2.5 Medición para ingeniería Web y WebApps
2.5.1 Mediciones para esfuerzo de ingeniería Web
2.5.2 Medición del valor de negocios

Unidad 3: Modelado del Análisis de Ingeniería Web

Temas Unidad 3 3.1 Requisitos para el análisis de las WebApps


3.1.1 La jerarquía del usuario
3.1.2 Desarrollo de casos de uso
3.1.3 Afinación del modelo de caso de uso
3.2 El modelado de análisis para WebApps
3.3 El modelado de contenido
3.3.1 Definición de objetos de contenido
3.3.2 Relaciones y jerarquía de contenido
3.3.3 Clases de análisis para WebApps
3.4 El modelo de interacción
3.5 El modelo funcional
3.6 El modelo de configuración
3.7 Análisis relación-navegación
3.7.1 Análisis de relaciones
3.7.2 Análisis de navegación

ING. ROSA IMELDA GARCIA CHI,MTI 3


Ingeniería Web- Antologías 2013

Unidad 4: Modelado del Diseño de aplicaciones Web

Temas Unidad 4 4.1 Temas del diseño para ingeniería web


4.1.1 Diseño y calidad de una WebApps
4.1.2 Metas de diseño

4.2 Pirámide del diseño IWeb

4.3 Diseño de la interfaz de la WebApps


4.3.1 Principios y directrices del diseño de interfaz
4.3.2 Mecanismos del control de la interfaz
4.3.3 Flujo de trabajo en el diseño de la interfaz

4.4 Diseño estético


4.4.1 Cuestiones de plantilla
4.4.2 Cuestiones de diseño gráfico

4..5 Diseño de contenido


4.5.1 Objetos de contenido
4.5.2 Cuestiones de diseño de contenido

4.6 Diseño arquitectónico


4.6.1 Arquitectura de contenido
4.6.2 Arquitectura WebApps

4.7 Diseño de navegación


4.7.1 Semántica de navegación
4.7.2 Sintaxis de navegación

4.8 Diseño al nivel de componentes

4.9 Patrones de diseño hipermedia

4.10 Método de diseño hipermedia orientado a objetos(MDHOO)


4.10.1 Diseño conceptual MDHOO
4.10.2 Diseño de navegación mediante el MDHOO
4.10.3 Diseño abstracto de la interfaz e implementación

4.11 Métricas de diseño para WebApps

ING. ROSA IMELDA GARCIA CHI,MTI 4


Ingeniería Web- Antologías 2013

Unidad 5: Pruebas para IWeb

Temas Unidad 5 5.1 Prueba de conceptos para WebApps


5.1.1. Dimensiones de calidad
5.1.2. Errores dentro de un ambiente WebApps
5.1.3. Estrategias de pruebas
5.1.4. Planeación de las pruebas

5.2. El Proceso de prueba

5.3. Prueba de contenido


5.3.1. Objetivos de la prueba de contenido
5.3.2. Prueba de la base de datos

5.4. Prueba de la interfaz del usuario


5.4.1. Estrategia de pruebas de la interfaz
5.4.2. Prueba de mecanismos de la interfaz
5.4.3. Prueba de la semántica de la interfaz
5.4.4. Prueba de la Facilidad de uso
5.4.5. Pruebas de compatibilidad

5.5. Prueba al nivel de componentes

5.6. Pruebas de navegación


5.6.1. Prueba de la sintaxis de navegación
5.6.2. Prueba de la semántica de la navegación

5.7. Prueba de la configuración


5.7.1. Conflictos en el lado del servidor
5.7.2. Conflictos en el lado del cliente

5.8. Pruebas de seguridad

5.9. Pruebas del desempeño


5.9.1. Objetivos de las pruebas de desempeño
5.9.2. Pruebas de carga
5.9.3. Pruebas de tensión

ING. ROSA IMELDA GARCIA CHI,MTI 5


Ingeniería Web- Antologías 2013

Objetivo(s) General(es) del Curso de Ingeniería de Software Web


 Proporcionar al alumno una visión global y actualizada de los principales
campos relacionados con la Ingeniería Web, así como las principales líneas
de investigación relacionadas con dicha disciplina.
 Conocer, comprender y aplicar con profundidad las tecnologías y
metodologías presentes en el entorno profesional para el desarrollo de
aplicaciones Web.
 Diseñar y dirigir soluciones de calidad basadas en aplicaciones Web en el
entorno profesional.
 Analizar y evaluar aplicaciones Web vigentes en el entorno profesional bajo
el marco legal, social y económico

Competencias Previas
 Aplica modelos, técnicas y herramientas para cada una de las etapas del
ciclo de vida de desarrollo de software tradicional y orientado a objetos
 Conoce Sistemas Avanzados de Bases de Datos
 Utiliza algún lenguaje de modelado (UML)
 Conoce de programación web avanzada
 Identifica diferentes Arquitecturas Tecnológicas
 Programación.
 Sistemas Operativos.
 Sistemas Distribuidos.
 Ingeniería del Software.
 Ingeniería de Computadores.
 Sistemas de Información.
 Tecnologías de la Información.
 Gestión de Tecnologías de la Información
 Administración y Gestión de Empresa.
 Sistemas orientados a Servicios.

ING. ROSA IMELDA GARCIA CHI,MTI 6


Ingeniería Web- Antologías 2013

Competencias específicas a desarrollar por unidad

Competencia Específica de la unidad 1

 Desarrollar la habilidad para identificar los atributos que existen en la


mayoría de las WebApps; Así como los estratos de la ingeniería de
WebApps y el proceso de la Ingeniería Web.

Competencia Específica de la unidad 2


 Desarrollar la habilidad para la formulación de sistemas y aplicaciones
basados en Web; Así mismo visualizar la planeación de proyectos de
ingeniería Web contemplando el equipo de ingeniería Web, los conflictos de
gestión de proyectos y la medición para ingeniería Web y WebApps.

Competencia Específica de la unidad 3

 Desarrollar la habilidad para la formulación, recopilación de requisitos y el


modelado de análisis describiendo la motivación básica (metas) y objetivos
para la WebApps, definir la categoría de usuarios, señalar los requisitos de
contenido y de función para la WebApps, establecer una comprensión
básica de por qué se construirá la WebApps quien la usará y que
problema(s) les resolverá a los usuarios.

Competencia Específica de la unidad 4


 Desarrollar la habilidad para aplicar la calidad de una WebApps en términos
de facilidad de uso, funcionalidad, confiabilidad, eficiencia, facilidad de
mantenimiento, seguridad y escalabilidad y tiempo en el mercado logrando
un buen diseño con simplicidad, consistencia, identidad, robustez,
navegabilidad y apariencia visual.

ING. ROSA IMELDA GARCIA CHI,MTI 7


Ingeniería Web- Antologías 2013
Competencia Específica de la unidad 5
 Desarrollar la habilidad de descubrir errores en el contenido, la función, la
facilidad de uso, la navegabilidad, el desempeño, la capacidad y la
seguridad de la WebApps mediante la aplicación de una estrategia de
prueba que abarca tanto revisiones como pruebas ejecutables en todo el
proceso de ingeniería Web.

ING. ROSA IMELDA GARCIA CHI,MTI 8


Ingeniería Web- Antologías 2013

ANTOLOGÍAS DE LA UNIDAD 1

Introducción a la Ingeniería
Web (IWeb)

ING. ROSA IMELDA GARCIA CHI,MTI 9


Ingeniería Web- Antologías 2013

Unidad 1. Introducción a la Ingeniería Web (IWeb)

Ingeniería Web

La World Wide Web y la Internet que la alimentan son, posiblemente los


desarrollos más importantes en la historia de la computación. Estas tecnologías
han llevado a todos a la era de la informática; además se han convertido en parte
integral de la vida diaria en los últimos días.

Figura 1 Modelo de Ingeniería Web. Fuente: (PRESSMAN, 2006)

¿Qué es?
Los sistemas y aplicaciones basadas en Web ofrecen un completo arreglo de
contenido y funcionan a una amplia población de usuarios finales. La ingeniería
Web es el proceso con el que se crean las WebApps de alta calidad. La Ingeniería
Web no es un clon perfecto de la ingeniería de software, pero utiliza muchos
conceptos y principios fundamentales de ella.

ING. ROSA IMELDA GARCIA CHI,MTI 10


Ingeniería Web- Antologías 2013

¿Quién lo hace?
Los ingenieros Web y los desarrolladores de los contenidos que no son técnicos
crean las WebApps.

¿Por qué es importante?


Conforme las WebApps se integran cada vez más en las estrategias de negocios
para pequeños y grandes empresas (ejemplo el comercio electrónico), crese en
importancia la necesidad de construir sistemas confiables, prácticos y adaptables.

¿Cuáles son los pasos?


Como cualquier otra disciplina de ingeniería, la Ingeniería Web aplica un enfoque
genérico que se suaviza mediante estrategias, técnicas y métodos especializados.
El proceso IWeb comienza con una formulación del problema que se resolverá con
la WebApps. El sistema se construye con tecnologías y herramientas
especializadas asociadas con la Web.

¿Cuál es el producto obtenido?


Se producen muchos productos de trabajo IWeb. El resultado final es la WebApps
operativa.

Atributos de los sistemas y aplicaciones Web

¿Qué es la usabilidad?
Técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos
de ordenador.

Tres conceptos muy importantes. Se trabaja para seres humanos, que quieren
realizar una tarea de una forma sencilla y eficaz y en este caso particular, la deben
realizar frente a un ordenador en un entorno gráfico, la Web.

ING. ROSA IMELDA GARCIA CHI,MTI 11


Ingeniería Web- Antologías 2013
La usabilidad ayuda a que esta tarea se realice de una forma sencilla analizando
el comportamiento humano, y los pasos necesarios para ejecutar la tarea de una
forma eficaz. Quizás suene un poco a trabajo industrial, pero al hacer referencia al
término “tarea”, se hace referencia a buscar un programa que se quiere ver en la
tele, a ver información sobre un equipo de fútbol favorito, a comprar un libro sobre
artes marciales.

¿Realmente hace falta la usabilidad para hacer una Web?


Sea tu Web un portal o una página personal, no olvides que la gente que entra en
tu Web es porque básicamente busca algo. Hacerlo sencillo es decisión tuya, pero
seguro que entre todos podemos hacer de Internet un sitio mejor donde la gente
no se sienta perdida o extraviada o sencillamente defraudada.

¿Cuáles son las 8 reglas de Oro sobre la usabilidad?


Quizás mañana sean 10 reglas.

1. En Internet el usuario es el que manda.

Esto quiere decir que sin usuarios tu página muere, así que más vale que los
cuides y les des lo que te piden, de lo contrario te quedaras solo.

2. En Internet la calidad se basa en la rapidez y la fiabilidad.

En Internet cuenta que tu página sea más rápida que bonita, fiable que moderna,
sencilla que compleja, directa.

3. Seguridad.

Si en el mundo real a veces nos cuesta fiarnos del banco de la esquina, imagínate
cómo se siente la gente en Internet cuando llega a tu site. Procura que todo
funcione como un reloj para que la gente pueda fiarse de tu site.

4. La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace.

ING. ROSA IMELDA GARCIA CHI,MTI 12


Ingeniería Web- Antologías 2013
Esto quiere decir que tal y como está la competencia en Internet, no puedes
perder ni un solo visitante por tener un enlace mal hecho. Es mejor salir con algo
sencillo e irlo complicando poco a poco, que salir con todo y ver “qué es lo que
pasa”. Versiones 1.0 son buenas mientras lo que este puesto este bien asentado y
genere confianza. Poco a poco y con el feedback de los usuarios, podrás ir
complicando la página. Pero asegura antes de arriesgar.

5. Si quieres hacer una página decente, simplifica, reduce, optimiza.

La gente no se va a aprender tu site por mucho que insistas, así que por lo menos
hazlo sencillo, reutiliza todos los elementos que puedas, para que de este modo
los usuarios se sientan cómodos y no se pierdan cada vez que necesiten
encontrar algo en tu site.

6. Pon las conclusiones al principio.

El usuario se sentirá más cómodo si ve las metas al principio. De esta forma no


tendrá que buscar lo que necesita y perderá menos tiempo en completar su tarea.
Si completa su tarea en menos tiempo se sentirá cómodo y quizás se dedique a
explorar tú site o quizás se lo recomiende a un amigo.

7. No hagas perder el tiempo a la gente con cosas que no necesitan.

Cuidado con cruzar promociones, si lo haces por lo menos hazlo con cuidado.
Procurar que la selección de productos a cruzar sea consecuente y no lo quieras
“vender todo” en todas las páginas. Según avance el usuario en su navegación
procura dejarle más espacio libre. Puede ocurrir que cuando este punto de
comprar algo vea una oferta que le distraiga y pierdas esa venta.

8. Buenos contenidos.

Escribir bien para Internet es todo un arte. Pero siguiendo las reglas básicas de (1)
poner las conclusiones al principio, (2) escribir como un 25% de lo que pondrías
en un papel, se puede llegar muy lejos.

ING. ROSA IMELDA GARCIA CHI,MTI 13


Ingeniería Web- Antologías 2013
(3) Leer en pantalla cuesta mucho, por lo que, en el caso de textos para Internet,
reduce y simplifica todo lo que puedas.

9. Evaluación del contenido.

A diferencia del software de aplicación que evoluciona continuamente, las


aplicaciones Web involucran una de manera continua. Un seguimiento continuo y
detallado de la información implícita en la aplicación Web. Todo esto hace que la
aplicación Web sirva al usuario fina.

Estratos de la ingeniería Web

El desarrollo de aplicaciones Web incorpora métodos de proceso especializados,


métodos de ingeniería de software adaptados a características de desarrollo de
las aplicaciones Web y un conjunto de importantes tecnologías que permitan un
correcto desarrollo de las mismas.

Los procesos, métodos y tecnologías (herramientas) proporcionan un enfoque en


estratos de la IWeb que es conceptualmente idéntico a los estratos de la
ingeniería de software.

Proceso
Los modelos de procesos Web adoptan la filosofía de desarrollo ágil. El desarrollo
ágil enfatiza un enfoque de desarrollo riguroso que incorpora rápidos ciclos de
desarrollo.

Es importante reconocer que el problema todavía debe analizarse, debe


desarrollarse un diseño, la implementación debe preceder en una forma
incremental y se debe iniciar un enfoque organizado de prueba. Dichas
actividades de marco de trabajo se deben definir dentro de un proceso que:

 Adopte el cambio: Aliente la creatividad y la independencia del equipo de


desarrollo y fortalezca la interacción con el usuario.
 Construya sistemas que utilicen pequeños equipos de desarrollo.

ING. ROSA IMELDA GARCIA CHI,MTI 14


Ingeniería Web- Antologías 2013
 Subraye el desarrollo evolutivo o incremental mediante el uso de cortos
ciclos de desarrollo.

Métodos
Los métodos de la IWeb abarcan un conjunto de labores técnicas que permiten al
ingeniero Web comprender, caracterizar y luego construir una aplicación Web de
alta calidad. Los métodos de la IWeb se puedes categorizar de la siguiente
manera:

Métodos de comunicación:
Métodos de comunicación: Definen el enfoque con que se facilita la comunicación
entre: cliente y desarrollador.

Las técnicas de comunicación son importantes durante la recolección de


requisitos.

Métodos de análisis de requisitos:


Proporcionan una base para comprender el contenido que se entregará a las
WebApps, la función que proporcionará al usuario final y los modos de interacción
de cada clase de usuario requerirá mientras ocurra la navegación por medio de las
WebApps

Métodos de diseño:
Abarcan una serie de técnicas de diseño que abordan el contenido, la aplicación y
la arquitectura de información, así como el diseño de interface y la estructura de
navegación de las WebApps.

Método de prueba:
Incorporan revisiones técnicas formales tanto de contenido y el modelo de diseño
como de una amplia variedad de técnicas de pruebas que abordan conflictos al
nivel de componentes.

Pruebas de la navegación, pruebas de facilidad de uso, pruebas de seguridad y


pruebas de configuración.
ING. ROSA IMELDA GARCIA CHI,MTI 15
Ingeniería Web- Antologías 2013
Herramientas y tecnologías
Las tecnologías abarcan un amplio conjunto de descripción de contenido y
lenguaje de modelación por ejemplo: HTML, VRML, XML, etc. lenguajes de
programación por ejemplo java, php, jsp, etc. recursos de desarrollo basados en
componentes por ejemplo corba, com, activeX, .net, etc. navegadores,
herramientas multimedia, herramientas de auditoria de sitio, herramientas de
conectividad de base de datos, herramientas de seguridad, servidores y utilidades
de servidor, y herramientas de administración y análisis de sitio.

El proceso de ingeniería Web

En un proceso tan rápido como es el proceso de Ingeniería Web, donde los


tiempos de desarrollo y los ciclos de vida de los productos son tan cortos,
¿merece la pena el esfuerzo requerido por la gestión? La respuesta es que dada
su complejidad es imprescindible.

Entre los aspectos que añaden dificultad a la gestión destacamos: - alto porcentaje
de contratación a terceros, - el desarrollo incluye una gran variedad de personal
técnico y no técnico trabajando en paralelo, - el equipo de desarrollo debe dominar
aspectos tan variopintos como, software basado en componentes, redes, diseño
de arquitectura y navegación, diseño gráfico y de interfaces, lenguajes y
estándares en Internet, test de aplicaciones Web, etc., lo que hace que el proceso
de búsqueda y contratación de personal sea arduo.

Definir el marco de trabajo


La efectividad de cualquier proceso de ingeniería depende de su adaptabilidad.
Esto es, la organización del equipo de trabajo del proyecto, los modos de
comunicación entre miembros del equipo, las actividades de ingeniería y las tareas
que deben realizarse, la información que se recolecte y se cree, y los métodos
empleados para producir un producto de alta calidad deben estar adaptados a la
gente que realiza el trabajo, el plazo y las restricciones del proyecto, y al problema
que se quiere resolver.

ING. ROSA IMELDA GARCIA CHI,MTI 16


Ingeniería Web- Antologías 2013
Antes de definir un marco de trabajo de proceso para la IWeb se debe reconocer
que:
 Las WebApps con frecuencia se entregan de manera incremental.
 Los cambios ocurrirán frecuentemente.
 Los plazos son cortos.

Comunicación con el cliente:


La comunicación con el cliente se caracteriza por medio de dos grandes tareas: el
análisis del negocio y la formulación. El análisis del negocio define el contexto
empresarial-organizativo para las WebApps y otras aplicaciones de negocio.

La formulación es una actividad de recopilación de requisitos que involucran a


todos los participantes.

Planeación:
Se crea el plan del proyecto para el incremento de la WebApp. El plan consiste de
una definición de tareas y un calendario de plazos respecto al período establecido
para el desarrollo del proyecto.

Modelado:
Las labores convencionales de análisis diseño de la ingeniería del software se
adaptan al desarrollo de las WebApp, se mezclan y luego se funden en una
actividad de modelado de la IWeb.

El intento es desarrollar análisis rápido y modelos de diseño que definan requisitos


y al mismo tiempo representen una WebApp que los satisfará.

Construcción:
Las herramientas y la tecnología IWeb se aplican para construir la WebApp que se
ha modelado. Una vez que se construye el incremento de WebApp se dirige a una
serie de pruebas rápidas para asegurar que se descubran los errores en el diseño.

ING. ROSA IMELDA GARCIA CHI,MTI 17


Ingeniería Web- Antologías 2013
Despliegue:
Las WebApp se configura para su ambiente operativo, se entrega a los usuarios
finales y luego comienza un período de evaluación. La retroalimentación acerca de
la evaluación para realizar los procesos respectivos.

Figura 2 Fase de construcción de una aplicación Web. Fuente: (PRESSMAN, 2006)

Refinamiento del marco de trabajo


La definición de tareas de ingeniería requerida para refinar cada actividad del
marco de trabajo se dejan a discrecional del juicio del equipo de ingeniería Web.

Es importante destacar que las tareas asociadas con la actividad del marco de
trabajo IWeb pueden modificarse, eliminarse o extenderse con base en las
características del problema, el producto, el proyecto y la gente en el equipo de
ingeniería Web.

Mejores prácticas en la Ingeniería Web.

 Tomar tiempo para entender las necesidades del negocio y los objetivos del
producto, incluso si los detalles de la WebApp son vagos.

ING. ROSA IMELDA GARCIA CHI,MTI 18


Ingeniería Web- Antologías 2013
 Describir cómo interactuarán los usuarios con la WebApp aplicando un
enfoque basado en escenarios.
 Desarrollar un plan del proyecto, incluso si es muy breve
 Utilizar algún tiempo para modelar lo que se construirá.
 Revisar la consistencia y calidad de los modelos.
 Utilizar herramientas y tecnología que permitan construir el sistema con
tantos componentes reutilizables.
 No apoyarse en usuarios anteriores para depurar la WebApp

ING. ROSA IMELDA GARCIA CHI,MTI 19


Ingeniería Web- Antologías 2013

Artículos Relacionados

Para ver los Artículos existen dos opciones:

1. Da Ctrl+click sobre el Hipervínculo


2. Da doble Click sobre el Objeto

Ingeniería Web. Las Aplicaciones Web También Requieren Ingeniería


Por Noé Huerta y Lacendi Nolasco

articulo iweb sg.pdf

Ingeniería Web. Aplicaciones Basadas en Web


Por Roger Pressman

Capítulo_29_ingenieria web.pdf

Ingeniería Web. Un Resumen


Por Laura Sirley Mamani

Ingeniería Web Resumen.pdf

Métodos de ingeniería web dirigidos por modelos: una revisión de literatura


Por Jesús Andrés Hincapié Londoño y John Freddy Duitama

Metodos_IWeb.pdf

ING. ROSA IMELDA GARCIA CHI,MTI 20


Ingeniería Web- Antologías 2013
Fundamentos de Ingeniería de la Web: Ontologías, Web Semántica y Agentes de
Software
Por Luzmila Pró Concepción

ontologias iweb.pdf

ING. ROSA IMELDA GARCIA CHI,MTI 21


Ingeniería Web- Antologías 2013

ANTOLOGÍAS DE LA UNIDAD 2

Formulación y Planeación de
la Ingeniería Web

ING. ROSA IMELDA GARCIA CHI,MTI 22


Ingeniería Web- Antologías 2013

Unidad 2. Metodologías de Desarrollo de Software

Formulación de sistemas basados en Web


La formulación se enfoca sobre el gran cuadro en las necesidades y objetivos del
negocio y el la información relacionada. Los clientes y los ingenieros Web quieren
definir el contenido requerido, discutir la funcionalidad específica, características
específicas e identificar la forma en que los usuarios finales interactuarán con las
WebApp, todo esto es formulación y recopilación de requisitos.

Preguntas de formulación:
En esta etapa es bueno preguntarse y responderse lo siguiente:

 ¿Cuál es la principal motivación para las WebApp?


 ¿Cuáles son los objetivos que deben satisfacer las WebApp?
 ¿Quién usará la WebApp?

Si tenemos una respuesta correcta a estas preguntas implican metas específicas


para el sitio Web.

En general se identificas dos categorías de metas:

Metas informativas: indican una intención de proporcionar contenido información


específicos al usuario final.

Metas aplicables: indican la habilidad para realizar alguna tarea dentro de la


WebApp.

Recopilación de requisitos para WebApps


Los objetivos globales de la recopilación de requisitos propuestos para la
ingeniería de software permanecen inalterados. Adaptados para las WebApp,
dichos objetivos se convierten en:

 Identificar requisitos de contenido.


 Identificar requisitos funcionales.
ING. ROSA IMELDA GARCIA CHI,MTI 23
Ingeniería Web- Antologías 2013
 Definir escenarios de interacción para diferentes clases de usuarios.

Los siguientes pasos de la recopilación de requisitos se dirigen para lograr estos


objetivos

1. Pedir a los clientes que definan una categoría de usuario y describan cada
categoría.

2. Comunicarse con los clientes para definir los requisitos básicos para las
WebApp.

3. Analizar la información recopilada y utilizar la información para realizar un


seguimiento a los clientes.

4. Definir casos de uso que describan escenarios de interacción para cada clase
de usuario.

El puente hacia el modelado de análisis


Toda la información recolectada y tratada se modela con la utilización de casos de
uso y notación UML.

Planeación de proyectos de Ingeniería Web


Dada la inmediatez de las WebApps es razonable preguntar: ¿en realidad se
necesita gastar tiempo en la planeación y administración de un esfuerzo WebApp?
¿No solo se debería dejar involucrar naturalmente a las WebApp, con poco o
ninguna gestión explicativa?

Más de un desarrollador Web optaría por poca o ninguna gestión, pero eso no
hace que estén en lo correcto.

ING. ROSA IMELDA GARCIA CHI,MTI 24


Ingeniería Web- Antologías 2013

El Equipo de ingeniería Web


Un equipo de ingeniería Web exitoso mezcla una amplia variedad de talentos que
deben trabajar como equipo en un ambiente de proyecto con alta presión. Los
plazos son cortos, los cambios son inexorables y la tecnología continúa
cambiando. La creación de un equipo que se consolide no es asunto sencillo.

 Los Actores
 Desarrolladores/proveedores de contenido
 Editores de Web
 Ingeniero Web
 Expertos en dominios empresariales
 Especialista en Soporte
 Administrador

ING. ROSA IMELDA GARCIA CHI,MTI 25


Ingeniería Web- Antologías 2013
Construcción del equipo
Para la construcción del equipo tiene particular relevancia cuando una
organización se forma un equipo de IWeb

 Se debe establecer un conjunto de directrices del equipo.


 El liderazgo fuerte es una obligación
 El respeto hacia los talentos individuales es crucial
 Cada miembro del equipo se debe comprender
 Es fácil comenzar, lo difícil es mantener el espíritu.

Conflictos de gestión de proyecto para ingeniería Web


Una vez realizada la formulación y que se han identificado los requisitos básicos
de la WebApp, la empresa debe elegir una de dos opciones de ingeniería Web:

 La WebApp es subcontratada: la ingeniería Web la realiza un tercer


proveedor con experiencia, talento y recursos con los cuales no cuenta la
empresa.
 Las WebApp la desarrollan en casa ingenieros Web que sean empleados
de la empresa.

Planeación de WebApp: subcontratación


En este caso un negocio (el cliente) pide un precio fijo para desarrollar la WebApp
de uno o más proveedores, evalúa los precios competitivos y luego elige un
proveedor para efectuar el trabajo. Pero ¿Qué busca la organización contratante?
¿Cómo se determina la competencia de un proveedor de WebApp? ¿Cómo se
sabe si una cotización es razonable?

¿Qué grado de planeación, programa de trabajo y valoración de riesgos se


pueden esperar conforme una organización se embarca en un esfuerzo por
desarrollar una gran WebApp?

Estas preguntas no siempre son fáciles de contestar, pero vale la pena considerar
algunos lineamientos.
ING. ROSA IMELDA GARCIA CHI,MTI 26
Ingeniería Web- Antologías 2013
Selección de los subcontratistas candidatos:
Con la finalidad de elegir desarrolladores Web candidatos, el contratante debe
realizar algunas tareas obligadas:

 Entrevistar a los clientes antiguos para determinar el profesionalismo del


vendedor Web, así como su habilidad para cumplir con compromiso de
plazos y costos y su destreza para comunicarse efectivamente.
 Determinar el nombre de ingeniero(s) Web jefe de la empresa
subcontratista para buscar proyectos anteriores exitosos.
 Examinar cuidadosamente ejemplos de trabajo del subcontratista que sean
similares en apariencia y sentido a la WebApp que será contratada.

Planeación de WebApp: Ingeniería Web en casa


Los pasos siguientes se recomiendan para proyectos IWeb pequeños y de tamaño
moderado.

 Entender el ámbito, las dimensiones del cambio y las restricciones del


proyecto.
 Definir una estrategia del proyecto incremental
 Realizar análisis de riesgo
 Desarrollar una estimación rápida
 Elegir un conjunto de tareas
 Establecer un programa
 Definir mecanismos de rastreo del proyecto
 Establecer un enfoque de gestión de cambios

ING. ROSA IMELDA GARCIA CHI,MTI 27


Ingeniería Web- Antologías 2013

Mediación para ingeniería Web y WebApps


La mediación del software ofrece una base para mejorar el proceso de software, lo
que aumenta la precisión de las estimaciones del proyecto, incrementa el rastreo
del proyecto y mejora la calidad del software.

Las mediciones tienen tres metas principales:

 Proporcionar un indicador de calidad de las WebApp desde el punto de


vista técnico.
 Proporcionar una base para la estimación del esfuerzo
 Proporcionar una indicación del éxito de la WebApp desde el punto de vista
empresarial.

ING. ROSA IMELDA GARCIA CHI,MTI 28


Ingeniería Web- Antologías 2013

Artículos Relacionados

Para ver los Artículos existen dos opciones:

1. Da Ctrl+click sobre el Hipervínculo


2. Da doble Click sobre el Objeto

Estrategia de Servicio Web abierta para el Desarrollo de la Sociedad del


Conocimiento
Por José Nelson Pérez Castillo y Blanca Magdalena Castro Vargas

ING. ROSA IMELDA GARCIA CHI,MTI 29


Ingeniería Web- Antologías 2013

ANTOLOGÍAS DE LA UNIDAD 3

Modelado del Análisis de


Ingeniería Web

ING. ROSA IMELDA GARCIA CHI,MTI 30


Ingeniería Web- Antologías 2013

Unidad 3. Modelado del Análisis de Ingeniería Web.

Requisitos para el análisis de las WebApp


El análisis de requisitos para las WebApp abarca tres grandes tareas:

 Formulación
 Recopilación de requisitos
 Modelado de análisis

La jerarquía de usuario
Las categorías de los usuarios finales se identifican como parte de las tareas de
formulación y de recopilación de requisitos. Las categorías de usuarios son
relativamente limitados y no necesitan una representación UML. Sin embargo,
cuando crece el número de categorías de usuario, a veces es aconsejable
desarrollar una jerarquía de usuarios.

Desarrollo de casos de uso


Los casos de uso se desarrollan para cada categoría de usuario descrita en la
jerarquía de usuario. En el contexto de la ingeniería Web, el caso de uso en sí
mismo es relativamente informal: un párrafo narrativo que describe una interacción
especifica entre el usuario y la WebApp.

Afinación del modelo de caso de uso


A la par que se crean los diagramas de casos de uso para cada categoría de
usuario, se desarrolla una vista superior de los requisitos de la WebApp
observables de manera externa.

Cada paquete se valora para garantizar que es:

 Comprensible.
 Cohesivo
 Libremente acoplados
 Jerárquicamente superficial.

ING. ROSA IMELDA GARCIA CHI,MTI 31


Ingeniería Web- Antologías 2013
Puesto que el análisis y modelado de actividades son actividades iterativas.

El modelado de análisis para WebApps


Se basa en la información que contienen los casos de uso desarrollados para l
aplicación. Se identifican el contenido que presentará la WebApp y se extraen las
funciones que se desarrollarán a partir de las descripciones de caso de uso.
Finalmente los requisitos específicos de la implementación se deben desarrollar
de modo que el ambiente y la infraestructura que apoyan la WebApps puedan
construirse.

Cuatro actividades de análisis, cada una con su aporte a la creación de un modelo


de análisis completo son:

 Análisis de contenido
 Análisis de interacción
 Análisis de funciones
 Análisis de configuración

El modelo es si mismo contiene elementos estructurales y dinámicos. Los


elementos estructurales identifican las clases de análisis y los objetivos de
contenido que se requieren para crear una WebApp que satisfaga las necesidades
del cliente.

Los elementos dinámicos del modelo de análisis describen como interactúan los
elementos estructurales, entre ellos y con los usuarios finales.

El modelo de contenido
El modelo de contenido contiene elementos estructurales que proporcionan una
importante visión de los requisitos de contenido para una WebApp. Además
incluye todas las clases de análisis: entidades visibles para el usuario que se
crean o manipulan conforme éste interactúa con la WebApp.

ING. ROSA IMELDA GARCIA CHI,MTI 32


Ingeniería Web- Antologías 2013
Al igual que otros elementos del modelo de análisis, el modelo de contenido se
deriva a partir de un examen cuidadoso de los casos de uso desarrollados para la
WebApp.

Definición de objetos de contenido


Un objeto de contenido puede ser una descripción textual de un producto, un
artículo que describa un evento noticioso.

Los objetos de contenido se extraen en los casos de uso al examinar la


descripción del escenario para referencias directas e indirectas al contenido.

Relaciones de jerarquía de contenido


El modelo de contenido puede contener diagramas de relación de entidades o
árboles de datos que bosquejan las relaciones entre los objetos de contenido o la
jerarquía de éste que mantiene una WebApp.

El modelo de interacción
Este modelo de interacción lo comprenden cuatro elementos:

 Casos de uso
 Diagramas de secuencia
 Diagramas de estado
 Prototipo de interfaz de usuario

Casos de Uso
Un caso de uso se modela para todos los procesos que la WebApp debe llevar a
cabo. Los procesos se describen dentro del caso de uso por una descripción
textual o una secuencia de pasos ejecutados.

Los Diagramas de Actividad se pueden usar también para modelar escenarios


gráficamente. Una vez que el comportamiento de la aplicación está captado de
esta manera, los casos de uso se examinan y amplían para mostrar qué objetos
se interrelacionan para que ocurra este comportamiento.

ING. ROSA IMELDA GARCIA CHI,MTI 33


Ingeniería Web- Antologías 2013
Diagrama de Secuencia
Un diagrama de Secuencia muestra una interacción ordenada según la secuencia
temporal de eventos. En particular, muestra los objetos participantes en la
interacción y los mensajes que intercambian ordenados según su secuencia en el
tiempo.

El eje vertical representa el tiempo, y en el eje horizontal se colocan los objetos y


actores participantes en la interacción, sin un orden prefijado. Cada objeto o actor
tiene una línea vertical, y los mensajes se representan mediante flechas entre los
distintos objetos. El tiempo fluye de arriba abajo. Se pueden colocar etiquetas
(como restricciones de tiempo, descripciones de acciones, etc.) bien en el margen
izquierdo o bien junto a las transiciones o activaciones a las que se refieren.

Diagramas de Estado
El comportamiento en tiempo real de cada clase que tiene comportamiento
dinámico y significativo, se modela usando un Diagrama de Estado. El diagrama
de actividad puede ser usado también aquí, esta vez como una extensión del
diagrama de estado, para mostrar los detalles de las acciones llevadas a cabo por
los objetos en respuesta a eventos internos. El diagrama de actividad se puede
usar también para representar gráficamente las acciones de métodos de clases.

Prototipo de interfaz de usuario


Algunas propuestas se basan en obtener de la definición de requisitos prototipos
que, sin tener la totalidad de la funcionalidad del sistema, permitan al usuario
hacerse una idea de la estructura de la interfaz del sistema con el usuario. Esta
técnica tiene el problema de que el usuario debe entender que lo que está viendo
es un prototipo y no el sistema final.

Puesto que las herramientas de desarrollo de la WebApp son abundantes y


funcionalmente poderosas, es mejor crear prototipos de la interfaz mediante tales
herramientas.

ING. ROSA IMELDA GARCIA CHI,MTI 34


Ingeniería Web- Antologías 2013

El modelo funcional
Este modelo funcional aborda dos elementos de procesamiento de la WebApp y
cada uno representa un gráfico diferente de la abstracción de procedimiento:

 Funcionalidad observable respecto al usuario y que entrega al usuario final


de WebApp.
 Las operaciones dentro de las clases de análisis que implementan
comportamientos asociados con la clase.

ING. ROSA IMELDA GARCIA CHI,MTI 35


Ingeniería Web- Antologías 2013
La funcionalidad observable para el usuario comprende cualesquiera funciones de
procesamiento que éste indicia directamente. Por ejemplo, un sitio Web financiero
puede implementar una variedad de funciones financieras.

El modelo de configuración
Las WebApps se deben diseñar e implementar de forma que se acomoden a una
diversidad de ambientes, tanto del lado del servidor como del cliente. Se deben
especificar el hardware del servidor y el ambiente del sistema operativo. Si las
WebApp deben tener acceso a una gran base de datos o ínter operar con las
aplicaciones corporativas existentes en el lado del servidor, se deben especificar
las interfaces apropiadas, los protocolos de comunicación y la información.

Las WebApp deben someterse a una amplia prueba de cada configuración de


navegador que se especifique como parte del modelo de configuración.

Análisis relación – navegación (ARN)


El análisis relación-navegación proporciona una serie de pasos de análisis que
luchan por identificar relaciones entre los elementos descubiertos como parte de la
creación del modelo de análisis.

El enfoque de ARN se organiza en cinco pasos:

 Análisis de los participantes


 Análisis de los elementos
 Análisis de relaciones
 Análisis de navegación
 Análisis de evaluación.

Análisis de relaciones: preguntas claves


En este análisis se formulan una serie de preguntas que nos ayudará a
comprender más la relación.

ING. ROSA IMELDA GARCIA CHI,MTI 36


Ingeniería Web- Antologías 2013
Análisis de navegación
Uno de los aspectos más importantes en los sistemas de información en las
WebApp es el de la navegación. La gran mayoría de las propuestas metodológicas
para sistemas WebApp resaltan este aspecto ofreciendo modelos que permitan
diseñarlo e implementarlo asegurando la calidad del resultado.

Sin embargo, analizando dichos modelos y técnicas y viendo los resultados de


diferentes estudios comparativos, se puede observar que este aspecto, en la
mayoría de las propuestas, se trata solamente en las últimas fases del ciclo de
vida, principalmente en diseño e implementación.

Los mecanismos de navegación se definen como parte del diseño. En esta etapa,
los desarrolladores deben considerar requisitos de navegación globales.

ING. ROSA IMELDA GARCIA CHI,MTI 37


Ingeniería Web- Antologías 2013

Artículos Relacionados

Para ver los Artículos existen dos opciones:

1. Da Ctrl+click sobre el Hipervínculo


2. Da doble Click sobre el Objeto

Ingeniería Web Basada en UML


Por Marina Lozano Avalos

ING. ROSA IMELDA GARCIA CHI,MTI 38


Ingeniería Web- Antologías 2013

ANTOLOGÍAS DE LA UNIDAD 4

Modela del Diseño de


Aplicaciones Web

ING. ROSA IMELDA GARCIA CHI,MTI 39


Ingeniería Web- Antologías 2013

1 Unidad 4. Modelado del Diseño de Aplicaciones Web.

1.1 Temas de diseño para ingeniería Web


Cuando se aplica el diseño dentro del contexto de la ingeniería Web, se deben
considerar cuestiones tanto genéricas como específicas. El diseño debe ser muy
específico.

1.1.1 Diseño de calidad de una WebApp


En la práctica, la calidad de los sitios web se ha evaluado de una manera “ad hoc”,
basada en el sentido común y en la experiencia de los desarrolladores. El estudio
de la calidad de productos y procesos de desarrollo para la Web es muy reciente y
todavía no se dispone de métodos de evaluación ampliamente difundidos para
este tipo de entorno.

Por lo tanto, existe la gran necesidad de metodologías efectivas para la obtención


de aplicaciones Web de calidad. Actualmente, hay dos vertientes de metodologías
de desarrollo para la Web: la comunidad de Ingeniería de Software y la comunidad
de Hipermedia. Estas metodologías carecen sin embargo de métricas que puedan
ser aplicadas a los modelos intermedios (Ej. Modelo de Objetos, Modelo
Navegacional) utilizados en el proceso de desarrollo orientado a la Web.

Otras características de diseño de calidad Web son:

 Seguridad
 Disponibilidad
 Escalabilidad
 Tiempo en el mercado

ING. ROSA IMELDA GARCIA CHI,MTI 40


Ingeniería Web- Antologías 2013
1.1.2 Metas de diseño
Una de las metas de diseño de una WebApp es abarcar lo siguiente:

 Simplicidad
 Consistencia
 Identidad
 Robustez
 Navegabilidad
 Apariencia visual
 Compatibilidad

1.2 Pirámide del diseño IWEB


El diseño conduce a un modelo que contiene una mezcla adecuada de estética,
contenido y tecnología.

En la figura 3 se muestra la pirámide de diseño de ingeniería Web.

Figura 3 Modelado del Diseño IWeb. Fuente: (PRESSMAN, 2006)

ING. ROSA IMELDA GARCIA CHI,MTI 41


Ingeniería Web- Antologías 2013

1.3 Diseño de la interfaz de la WebApp


Toda interfaz de usuario debe presentar las siguientes características:

 Fácil de usar
 Fácil de aprender
 Fácil de navegar
 Intuitiva
 Consistente
 Eficiente
 Libre de errores
 Funcional

Debe ofrecer al usuario final una experiencia satisfactoria y gratificante.

Los principios y directrices esenciales del diseño de una WebApp se pueden


mencionar:

 Uso equitativo
 Flexibilidad en el uso
 Uso sencillo e intuitivo
 Información perceptible
 Tolerancia al error
 Esfuerzo físico reducido
 Tamaño y espacio para acercarse y usar

En un momento de nuestra vida, cualquiera de nosotros puede llegar a


experimentar una transición física. Ya sea una minusvalía temporal, como un
hueso roto, o una discapacidad permanente, nos veremos enfrentados al cambio.

El simple proceso de envejecimiento nos lleva a ser dependientes de otros. El


diseño universal nos permite transitar por esos cambios y seguir disfrutando de
igualdad de oportunidades, autodeterminación y calidad de vida.

ING. ROSA IMELDA GARCIA CHI,MTI 42


Ingeniería Web- Antologías 2013
1.3.1 Pauta 3.4 de las W3C WCAG 1.0
Utilice unidades relativas en lugar de absolutas al especificar los valores en los
atributos de los marcadores de lenguaje y en los valores de las propiedades de las
hojas de estilo.

1.3.2 Qué significa:


La maquetación, la presentación y los contenidos de texto de una página deben
tener la posibilidad de adaptación a la interfaz utilizada por el usuario, sin
superposiciones o perdida de informaciones en caso de redimensionamiento
(ampliación o reducción de visualización y/o de los caracteres).

em, %, ex, px

Las unidades relativas

em

el tamaño (‘font-size’) de la fuente relevante

H1 { margin: 0.5em }

valor relativo al valor del elemento padre

P { line-height: 140% }

ex

la ‘altura de la x’ de la fuente relevante

H1 { margin: 1ex }

px

pixeles, relacionados con los dispositivos visuales

P { font-size: 14px }

ING. ROSA IMELDA GARCIA CHI,MTI 43


Ingeniería Web- Antologías 2013
1.3.3 Técnicas de diseño

1.3.3.1 Diseño fijo


Diseño que utiliza dimensiones de tamaño absoluto: inches (in), centimetros (cm),
milímetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamaño de un
elemento a un tamaño fijo.

1.3.3.2 Diseño líquido (o fluido)


Diseño que utiliza cómo unidad de medida el porcentaje (%). Su efecto es la
adaptación de los elementos y su disposición aprovechando todo el ancho de
pantalla que será calculada en base a la resolución del dispositivo utilizado.

1.3.3.3 Diseño elástico (o flexible)


Diseño que utiliza cómo unidad de medida em. Su efecto es adaptar el ancho de
los elementos y su disposición en base al tamaño de texto configurado por el
usuario.

1.3.3.4 Diseño hibrido


Diseño que utiliza unidades de medida absolutas, porcentaje y em.

1.3.4 ¿El diseño (más) accesible?

1.3.4.1 Diseño fijo


A favor

Los diseñadores disfrutan de un control absoluto en determinar tamaño y


posicionamiento de los elementos. Favorece la legibilidad.

En contra

No adapto en pantalla: no se conoce a priori las características del monitor


utilizado por el usuario. “Bloquea” la página según el prejuicio del papel.

1.3.4.2 Diseño liquido


A favor

ING. ROSA IMELDA GARCIA CHI,MTI 44


Ingeniería Web- Antologías 2013
Presentación de más informaciones en pantalla y reducción del efecto scroll.
Adaptación al medio.

En contra

Causa líneas de texto muy largas en caso de resoluciones de pantalla muy altas:
dificultad en la lectura.

1.3.4.3 Diseño elástico


A favor

Los diseñadores “controlan” tamaño y disposición de los elementos. Evita la sobre


posición de elementos.

En contra

Al aumentar el tamaño del texto, en determinados diseños puede causar la


comparsa de la barra de scroll horizontal: dificultad en la legibilidad.

1.3.4.4 Diseño hibrido


A favor

Todo lo bueno de aporta el diseño fijo, fluido y elástico.

En contra

¿Hacemos una investigación?

1.3.5 En fin, ¿cuál es diseño (más) accesible?*


 No hay un diseño más accesible que otro.
 Se elige el tipo de diseño en base a las necesidades (proyecto).

ING. ROSA IMELDA GARCIA CHI,MTI 45


Ingeniería Web- Antologías 2013
*La W3C WAI no establece cual sea el diseño más accesible sino que sea
transformable de una manera agradable y que el contenido sea comprensible y
navegable.

1.3.6 Flujo de trabajo en el diseño de la interfaz


Las siguientes tareas representan un flujo de trabajo rudimentario para el diseño
de la interfaz WebApp.

1. Revisar la información contenida en el modelo de análisis y refinarla conforme


se requiera.

2. Desarrollar un bosquejo aproximado de la plantilla de la interfaz de la WebApp.

3. Correlacionar los objetivos del usuario con acciones específicas de la interfaz.

4. Definir un conjunto de tareas de usuario que estén asociadas con cada acción.

5. Elaborar bosquejos con imágenes de la pantalla para cada acción de la interfaz.

6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el


diseño estético.

7. Identificar los objetos de la interfaz del usuario que se requieren para


implementarla.

8. Desarrollar una representación de procedimiento de la interacción del usuario


con la interfaz.

9. Desarrollar una representación del comportamiento de la interfaz.

10. Describir la plantilla de la interfaz par a cada estado.

11. Refinar y revisar el modelo de diseño de la interfaz.

ING. ROSA IMELDA GARCIA CHI,MTI 46


Ingeniería Web- Antologías 2013

1.4 Diseño estético


El diseño estético, también llamado diseño gráfico, es un esfuerzo artístico que
complementa los aspectos técnicos de la ingeniería Web. Sin él una WebApp
puede ser funcional, pero sin atractivo.

1.5 Diseño de contenido


El diseño de contenido se enfoca en dos asuntos de diseño diferentes, cada uno lo
abordan individuos con distintos conjuntos de habilidades. El diseño de contenido
desarrolla una representación de diseño para los objetos de contenido y
representa los mecanismos que se requieren para que establezcan sus relaciones
uno con otro.

1.5.1 Objetos de contenido


La relación entre objetos de contenido, defina como parte del modelo de análisis
WebApp y los objetos de diseño que representan contenido es análoga a la
relación entre las clases de análisis y los componentes de diseño.

Un objeto de contenido tiene atributos que incluyen información específica de


contenido y atributos específicos de implementación que se especifican como
parte del diseño.

1.6 Diseño arquitectónico


El diseño arquitectónico está enlazado con las metas establecidas para la
WebApp, el contenido que se presentará, los usuarios que la vistan y la filosofía
de navegación que se establezca.

La arquitectura de contenido se basa en la forma en que los objetos de contenido


se estructuran para su presentación y navegación.

1.6.1 Arquitectura de contenido


Se centra en la definición de la estructura hipermedia global de la WebApp. El
diseño se puede elegir de cuatro diferentes estructuras de contenido:

ING. ROSA IMELDA GARCIA CHI,MTI 47


Ingeniería Web- Antologías 2013
 Estructuras lineales
 Estructuras en retícula
 Las estructuras jerárquicas
 La estructura en red.

1.7 Diseño de navegación


El diseñador debe definir las rutas de navegación que habiliten para la ruta de los
usuarios el acceso al contenido y las funciones de las WebApp. Para ello se debe:

 Identificar la semántica de navegación para diferentes usuarios del sitio


 Definir la mecánica que logra la navegación.

1.7.1 Semántica de navegación


Durante las etapas iniciales del diseño, de navegación se valora la arquitectura de
contenido de la WebApp para determinar una o más FdN para cada caso de uso.
Como se anotó anteriormente, una FdN identifica los nodos de navegación y los
vínculos que permiten la navegación entre ellos.

1.7.2 Sintaxis de navegación


Conforme el diseño se lleva a cabo se define la mecánica de navegación, entre
sus posibilidades tenemos:

 Vinculo de navegación individual


 Barra de navegación horizontal
 Columna de navegación vertical
 Pestañas
 Mapas del sitio

ING. ROSA IMELDA GARCIA CHI,MTI 48


Ingeniería Web- Antologías 2013

1.8 Método de diseño hipermedia orientado a objetos (MDHOO)


Las metodologías tradicionales de ingeniería de software, o las metodologías para
sistemas de desarrollo de información, no contienen una buena abstracción capaz
de facilitar la tarea de especificar aplicaciones hipermedia. El tamaño, la
complejidad y el número de aplicaciones crecen en forma acelerada en la
actualidad, por lo cual una metodología de diseño sistemática es necesaria para
disminuir la complejidad y admitir evolución y reusabilidad.

Producir aplicaciones en las cuales el usuario pueda aprovechar el potencial del


paradigma de la navegación de sitios web, mientras ejecuta transacciones sobre
bases de información, es una tarea muy difícil de lograr.

En primer lugar, la navegación posee algunos problemas. Una estructura de


navegación robusta es una de las claves del éxito en las aplicaciones hipermedia.
Si el usuario entiende dónde puede ir y cómo llegar al lugar deseado, es una
buena señal de que la aplicación ha sido bien diseñada.

Construir la interfaz de una aplicación web es también una tarea compleja; no sólo
se necesita especificar cuáles son los objetos de la interfaz que deberían ser
implementados, sino también la manera en la cual estos objetos interactuarán con
el resto de la aplicación.

En hipermedia existen requerimientos que deben ser satisfechos en un entorno de


desarrollo unificado. Por un lado, la navegación y el comportamiento funcional de
la aplicación deberían ser integrados. Por otro lado, durante el proceso de diseño
se debería poder desacoplar las decisiones de diseño relacionadas con la
estructura navegacional de la aplicación, de aquellas relacionadas con el modelo
del dominio.

OOHDM propone el desarrollo de aplicaciones hipermedia a través de un proceso


compuesto por cuatro etapas: diseño conceptual, diseño navegacional, diseño de
interfaces abstractas e implementación.

ING. ROSA IMELDA GARCIA CHI,MTI 49


Ingeniería Web- Antologías 2013
1.8.1 Diseño Conceptual
Durante esta actividad se construye un esquema conceptual representado por los
objetos del dominio, las relaciones y colaboraciones existentes establecidas entre
ellos. En las aplicaciones hipermedia convencionales, cuyos componentes de
hipermedia no son modificados durante la ejecución, se podría usar un modelo de
datos semántico estructural (como el modelo de entidades y relaciones). De este
modo, en los casos en que la información base pueda cambiar dinámicamente o
se intenten ejecutar cálculos complejos, se necesitará enriquecer el
comportamiento del modelo de objetos.

En OOHDM, el esquema conceptual está construido por clases, relaciones y


subsistemas. Las clases son descritas como en los modelos orientados a objetos
tradicionales. Sin embargo, los atributos pueden ser de múltiples tipos para
representar perspectivas diferentes de las mismas entidades del mundo real.

Se usa notación similar a UML (Lenguaje de Modelado Unificado) y tarjetas de


clases y relaciones similares a las tarjetas CRC (Clase Responsabilidad
Colaboración). El esquema de las clases consiste en un conjunto de clases
conectadas por relaciones. Los objetos son instancias de las clases. Las clases
son usadas durante el diseño navegacional para derivar nodos, y las relaciones
que son usadas para construir enlaces.

1.8.2 Diseño Navegacional


La primera generación de aplicaciones Web fue pensada para realizar navegación
a través del espacio de información, utilizando un simple modelo de datos de
hipermedia. En OOHDM, la navegación es considerada un paso crítico en el
diseño aplicaciones. Un modelo navegacional es construido como una vista sobre
un diseño conceptual, admitiendo la construcción de modelos diferentes de
acuerdo con los diferentes perfiles de usuarios. Cada modelo navegacional provee
una vista subjetiva del diseño conceptual.

ING. ROSA IMELDA GARCIA CHI,MTI 50


Ingeniería Web- Antologías 2013
El diseño de navegación es expresado en dos esquemas: el esquema de clases
navegacionales y el esquema de contextos navegacionales. En OOHDM existe un
conjunto de tipos predefinidos de clases navegacionales:

Nodos, enlaces y estructuras de acceso. La semántica de los nodos y los enlaces


son las tradicionales de las aplicaciones hipermedia, y las estructuras de acceso,
tales como índices o recorridos guiados, representan los posibles caminos de
acceso a los nodos.

La principal estructura primitiva del espacio navegacional es la noción de contexto


navegacional. Un contexto navegacional es un conjunto de nodos, enlaces, clases
de contextos, y otros contextos navegacionales (contextos anidados). Pueden ser
definidos por comprensión o extensión, o por enumeración de sus miembros.

Los contextos navegacionales juegan un rol similar a las colecciones y fueron


inspirados sobre el concepto de contextos anidados. Organizan el espacio
navegacional en conjuntos convenientes que pueden ser recorridos en un orden
particular y que deberían ser definidos como caminos para ayudar al usuario a
lograr la tarea deseada.

Los nodos son enriquecidos con un conjunto de clases especiales que permiten de
un nodo observar y presentar atributos (incluidos las anclas), así como métodos
(comportamiento) cuando se navega en un particular contexto.

1.8.3 Diseño de Interfaz Abstracta


Una vez que las estructuras navegacionales son definidas, se deben especificar
los aspectos de interfaz. Esto significa definir la forma en la cual los objetos
navegacionales pueden aparecer, cómo los objetos de interfaz activarán la
navegación y el resto de la funcionalidad de la aplicación, qué transformaciones de
la interfaz son pertinentes y cuándo es necesario realizarlas.

ING. ROSA IMELDA GARCIA CHI,MTI 51


Ingeniería Web- Antologías 2013
Una clara separación entre diseño navegacional y diseño de interfaz abstracta
permite construir diferentes interfaces para el mismo modelo navegacional,
dejando un alto grado de independencia de la tecnología de interfaz de usuario.

El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular las


aplicaciones Web) es un punto crítico en el desarrollo que las modernas
metodologías tienden a descuidar. En OOHDM se utiliza el diseño de interfaz
abstracta para describir la interfaz del usuario de la aplicación de hipermedia.

El modelo de interfaz ADVs (Vista de Datos Abstracta) especifica la organización y


comportamiento de la interfaz, pero la apariencia física real o de los atributos, y la
disposición de las propiedades de las ADVs en la pantalla real son hechas en la
fase de implementación.

1.8.4 Implementación
En esta fase, el diseñador debe implementar el diseño. Hasta ahora, todos los
modelos fueron construidos en forma independiente de la plataforma de
implementación; en esta fase es tenido en cuenta el entorno particular en el cual
se va a correr la aplicación.

Al llegar a esta fase, el primer paso que debe realizar el diseñador es definir los
ítems de información que son parte del dominio del problema. Debe identificar
también, cómo son organizados los ítems de acuerdo con el perfil del usuario y su
tarea; decidir qué interfaz debería ver y cómo debería comportarse. A fin de
implementar todo en un entorno Web, el diseñador debe decidir además qué
información debe ser almacenada.

ING. ROSA IMELDA GARCIA CHI,MTI 52


Ingeniería Web- Antologías 2013

Artículos Relacionados

Para ver los Artículos existen dos opciones:

1. Da Ctrl+click sobre el Hipervínculo


2. Da doble Click sobre el Objeto

Arquitectura y Diseño de Sistemas Web Modernos


Por Juan Salvador Castejón Garrido

ING. ROSA IMELDA GARCIA CHI,MTI 53


Ingeniería Web- Antologías 2013

ANTOLOGÍAS DE LA UNIDAD 5

Pruebas para Ingeniería Web

ING. ROSA IMELDA GARCIA CHI,MTI 54


Ingeniería Web- Antologías 2013

Unidad 5. Pruebas para IWeb

Pruebas de conceptos para WebApp


Se consideran las dimensiones de calidad que son particularmente relevantes en
cualquier debate de las pruebas para el trabajo de ingeniería Web. Se considera
también la naturaleza de los errores que se encuentran como consecuencia de las
pruebas y la estrategia de poner a prueba aplicable para descubrir dichos errores.

Dimensiones de calidad
La calidad se incorpora en una aplicación Web como consecuencia de un buen
diseño. Se evalúa al aplicar una serie de revisiones técnicas que valoran varios
elementos del modelo de diseño y al aplicar una serie de revisiones técnicas que
valoran varios elementos del modelo de diseño y al aplicar un proceso de pruebas.

Tanto las revisiones como las pruebas examinan una o más de las siguientes
dimensiones de calidad:

El contenido se evalúa tanto en el ámbito sintáctico y semántica

La función de prueba para descubrir errores que indiquen que no hay


concordancia con los requisitos del cliente.

La estructura se valora para asegurarse de que entrega adecuadamente contenido


y función de la WebApp.

La facilidad de uso se prueba para garantizar que a cada categoría de usuario la


soporta la interfaz.

*La navegabilidad se pone a prueba para garantizar que toda la sintaxis y


semántica de navegación se ejercen para descubrir cualquier error de navegación.

ING. ROSA IMELDA GARCIA CHI,MTI 55


Ingeniería Web- Antologías 2013
*El desempeño se prueba en una diversidad de condiciones operativas,
configuraciones y cargas para asegurar que el sistema responde a la interacción
del usuario.

La compatibilidad se prueba al ejecutar las WebApp en varias configuraciones


huésped.

La interoperabilidad se prueba para asegurar que la WebApp realiza interfaces


adecuadas.

La seguridad se prueba al valorar las vulnerabilidades potenciales e intentar


explotar cada una de ellas.

Estratégicas de prueba
Las estrategias para probar una WebApp adoptan los principios básicos para
todas las pruebas de software.

1. Se revisa el modelado de contenido de la WebApp para descubrir errores.

2. Se revisa el modelo de la interfaz para asegurarse que todos los casos

Las pruebas que se aplican a una aplicación web

El proceso de someter a prueba la WebApp es una suma de actividades


relacionadas con una sola meta: descubrir errores en el contenido, la función, la
facilidad de uso, la navegabilidad, el desempeño, la capacidad y la seguridad de la
WebApp.

Esto se logra a lo largo de todo el proceso de ingeniería Web, mediante la


aplicación de una estrategia de prueba que abarca tanto revisiones como pruebas
ejecutables.

Los ingenieros Web y otros participantes del proyecto (gerentes, clientes, usuarios
finales) toman parte en el proceso de probar WebApp.

ING. ROSA IMELDA GARCIA CHI,MTI 56


Ingeniería Web- Antologías 2013
Si los usuarios finales encuentran errores que afecten su confianza en la
WebApp, se irán a cualquier otra parte por el contenido y la función que necesitan,
y la WebApp fracasará.

Por esta razón, los ingenieros de la Web deben trabajar para eliminar tantos
errores como sea posible antes que la WebApp esté en línea.

El proceso de prueba comienza en enfocarse sobre aquellos aspectos de ésta


que son visibles para el usuario y procede a probar dicha tecnología e
infraestructura.

La prueba consta de siete etapas: contenido, interfaz, navegación, componente,


configuración, desempeño y prueba de seguridad.

En algunos casos se produce un plan de prueba de la WebApp.

En todos los casos se desarrolla un conjunto de casos de prueba para cada etapa
de la prueba y se observa un archivo de resultados de pruebas para uso futuro.

Aunque nunca se puede estar seguro de que han llevado a cabo todas las
pruebas que se necesitan, puede tenerse la seguridad de que la puesta en prueba
ha descubierto errores ( y que éstos se han corregido).

Además, si se ha establecido un plan de prueba, puede verificarse para asegurar


que se han realizado todas las pruebas planeadas.

Puesto que muchas WebApps evolucionan continuamente, la prueba de la


WebApp es una actividad de seguimiento que dirige el equipo de soporte Web,
que utiliza pruebas de regresión derivadas de las pruebas desarrolladas cuando la
WebApp se sometió a ingeniería por primera ocasión.

ING. ROSA IMELDA GARCIA CHI,MTI 57


Ingeniería Web- Antologías 2013
Dimensiones de Calidad

Figura 4 Dimensiones de Calidad

El proceso de Pruebas que se debe aplicar a la página Web que se ha construido


tiene su base en el Diseño de la Página:

Figura 5 Proceso de Prueba

ING. ROSA IMELDA GARCIA CHI,MTI 58


Ingeniería Web- Antologías 2013
En la figura 6 se aprecian todas las pruebas a aplicarse en la Página que se ha
desarrollado:

Figura 6 Proceso de Prueba

ING. ROSA IMELDA GARCIA CHI,MTI 59


Ingeniería Web- Antologías 2013

Artículos Relacionados

Para ver los Artículos existen dos opciones:

1. Da Ctrl+click sobre el Hipervínculo


2. Da doble Click sobre el Objeto

ING. ROSA IMELDA GARCIA CHI,MTI 60

Das könnte Ihnen auch gefallen