You are on page 1of 88

DIRECCIN GENERAL DE EDUCACIN SUPERIOR TECNOLGICA INSTITUTO TECNOLGICO DE CIUDAD VALLES DEPARTAMENTO DE SISTEMAS Y COMPUTACIN INGENIERA EN SISTEMAS COMPUTACIONALES

GUA TCNICA DE INGENIERA WEB


ELABORADO POR

ISC. Rosa Imelda Garca Chi, MTI


Ingeniero en Sistemas Computacionales Mster en Tecnologas de la Informacin

Ingeniera Web- Gua Tcnica 2013


1 Contenido
2 3 INTRODUCCIN ............................................................................................. 1 Datos de la Asignatura ..................................................................................... 4 3.1 4 Nombre de la Asignatura: Ingeniera de Software Web ............................. 4

Temario de la Asignatura ................................................................................. 5 4.1 4.2 4.3 4.4 4.5 Unidad 1: Introduccin a la Ingeniera Web (IWeb) .................................... 5 Unidad 2: Formulacin y Planeacin de la Ingeniera Web ........................ 5 Unidad 3: Modelado del Anlisis de Ingeniera Web .................................. 5 Unidad 4: Modelado del Diseo de aplicaciones Web ............................... 6 Unidad 5: Pruebas para IWeb .................................................................... 7

Objetivo(s) General(es) del Curso de Ingeniera de Software Web ................. 8 5.1 5.2 Competencias Previas ............................................................................... 8 Competencias especficas a desarrollar por unidad ................................... 9

GUA TCNICA DE LA UNIDAD 1 ........................................................................ 11 6 Unidad 1. Introduccin a la Ingeniera Web ................................................... 12 6.1 6.2 6.3 6.4 6.5 7 Ingeniera Web ......................................................................................... 12 Atributos de los sistemas y aplicaciones Web .......................................... 13 Estratos de la ingeniera Web .................................................................. 16 El proceso de ingeniera Web .................................................................. 18 Mejores prcticas en la Ingeniera Web. .................................................. 20

Prctica No. 1................................................................................................. 22 7.1 Nombre de la prctica: Fase 1 Plan de Negocios para Proyecto IWeb .. 22

GUA TCNICA DE LA UNIDAD 2 ........................................................................ 24 8 Unidad 2. Formulacin y Planeacin de la Ingeniera Web ............................ 25 ING. ROSA IMELDA GARCIA CHI, MTI

Ingeniera Web- Gua Tcnica 2013


8.1 8.2 8.3 8.4 8.5 8.6 9 Formulacin de sistemas basados en Web .............................................. 25 Planeacin de proyectos de Ingeniera Web ............................................ 27 El Equipo de ingeniera Web .................................................................... 27 Conflictos de gestin de proyecto para ingeniera Web ........................... 28 Mediacin para ingeniera Web y WebApps ............................................ 30 Las peores prcticas para proyectos Web ............................................... 30

Prctica No. 2................................................................................................. 31 9.1 Nombre de la prctica: Fase 2 Formulacin y Planificacin IWeb ......... 31

GUA TCNICA DE LA UNIDAD 3 ........................................................................ 33 10 Unidad 3. Modelado del Anlisis de Ingeniera Web. .................................. 34 Requisitos para el anlisis de las WebApp ........................................... 34 El modelado de anlisis para WebApps................................................ 35 El modelo de contenido ........................................................................ 35 El modelo de interaccin ....................................................................... 36 El modelo funcional ............................................................................... 38 El modelo de configuracin ................................................................... 38 Anlisis relacin navegacin (ARN) ................................................... 38

10.1 10.2 10.3 10.4 10.5 10.6 10.7 11

Prctica No. 3 .............................................................................................. 40 Nombre de la prctica: Fase 3 Modelado del Anlisis de IWeb .......... 40

11.1

GUA TCNICA DE LA UNIDAD 4 ........................................................................ 43 12 Unidad 4. Modelado del Diseo de Aplicaciones Web. ............................... 44 Temas de diseo para ingeniera Web ................................................. 44 Pirmide del diseo IWEB .................................................................... 45 Diseo de la interfaz de la WebApp ...................................................... 46 Diseo esttico ..................................................................................... 50 ING. ROSA IMELDA GARCIA CHI, MTI

12.1 12.2 12.3 12.4

ii

Ingeniera Web- Gua Tcnica 2013


12.5 12.6 12.7 12.8 13 Diseo de contenido ............................................................................. 51 Diseo arquitectnico ........................................................................... 51 Diseo de navegacin .......................................................................... 52 Mtodo de diseo hipermedia orientado a objetos (MDHOO) .............. 53

Prctica No. 4 .............................................................................................. 57 Nombre de la prctica: Fase 4: Modelado del Diseo de IWeb .......... 57

13.1

GUA TCNICA DE LA UNIDAD 5 ........................................................................ 59 14 Unidad 5. Pruebas para IWeb ..................................................................... 60 Pruebas de conceptos para WebApp ................................................... 60 Las pruebas que se aplican a una aplicacin web ................................ 61

14.1 14.2 15

Prctica No. 5 .............................................................................................. 65 Nombre de la prctica: Fase 5 Aplicacin de Pruebas IWeb .............. 65

15.1

FORMATO FASES DE PROYECTO IWEB........................................................... 67 16 17 18 19 20 21 Anexo No. 1. Formato Fase 1 Proyecto IWeb. ........................................... 68 Anexo No. 2. Formato Fase 2 Proyecto IWeb. ........................................... 70 Anexo No. 3. Formato Fase 3 Proyecto IWeb. ........................................... 76 Anexo No. 4. Formato Fase 4 Proyecto IWeb. ........................................... 78 Anexo No. 5. Formato Fase 5 Proyecto IWeb. ........................................... 80 Bibliografa................................................................................................... 83

ING. ROSA IMELDA GARCIA CHI, MTI

iii

Ingeniera Web- Gua Tcnica 2013


2 INTRODUCCIN
La Gua Tcnica de Ingeniera de Software Web (IWeb) integra un conjunto de prcticas sugeridas correspondientes a las cinco unidades del programa de estudios de la Especialidad de la carrera de Ingeniera en Sistemas Computacionales del IT de Cd. Valles. Se inicia la unidad 1 con prcticas relacionadas con los estratos: procesos, mtodos, herramientas/tecnologa. El Proceso IWeb adopta el enfoque de desarrollo gil que subraya un punto de vista de ingeniera magro, riguroso, que conduce a la entrega incremental del sistema que ser construido. En esta unidad se desarrolla la primera fase del proyecto IWeb, que corresponde a la propuesta. En la segunda unidad, denominada Formulacin y Planeacin de IWeb, integra la actividad de comunicacin con el cliente, define las necesidades del negocio, las metas y objetivos del proyecto, las categoras de usuario final, las funciones y caractersticas principales y el grado de interoperabilidad con otras aplicaciones. Se desarrolla la segunda fase del proyecto IWeb. En la tercera unidad se integran prcticas que describen el Modelado de Anlisis de la IWeb, cuyo propsito es describir la motivacin bsica (metas) y objetivos de una WebApps, definir las categoras de usuarios y sealar los requisitos de contenido y de funcin de la WebApps para establecer una comprensin bsica de porqu se construir la WebApps, quin la usar y qu problemas les resolver a los usuarios, generando la fase tres del proyecto, denominado Modelado del Anlisis IWeb. En la cuarta unidad se aborda el Modelado del diseo de la IWeb, que define la calidad en trminos de facilidad de uso, funcionalidad, confiabilidad, eficiencia, facilidad de mantenimiento, seguridad, escalabilidad y tiempo en el mercado.

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013


El diseo de la interfaz describe la estructura y organizacin de la interfaz del usuario. Incluye una representacin de la plantilla de pantalla, una definicin de los modos de interaccin y una descripcin de los mecanismos de navegacin. Aqu tambin se incluye el diseo grfico, referente a la apariencia y la percepcin de la Web Apps e incluye esquemas de color, plantilla geomtrica, tamao de texto, fuente y ubicacin, el uso de grficos y decisiones estticas relacionadas. En esta unidad se describen las mtricas de diseo para la ingeniera Web. En esta unidad se solicita la generacin de la fase cuatro del proyecto, el Modelado de Diseo de IWeb. Y por ltima unidad, se revisan los temas referentes a las Pruebas de IWeb. La meta de probar las Web Apps es ejercitar cada una de las muchas dimensiones de la calidad con la finalidad de encontrar errores o descubrir conflictos que pudieran conducir a fallas en la calidad. Las pruebas se centran en contenido, funcin, estructura, facilidad de uso, navegabilidad, desempeo, compatibilidad, interoperabilidad, capacidad y seguridad. Las pruebas tambin incorporan revisiones que ocurren conforme se disea la Web App. Se propone en esta unidad probar el producto obtenido de aplicar el modelado de Ingeniera Web en cada una de sus fases. Se solicita evidencia de la aplicacin de las pruebas. La presente Gua Tcnica, tiene como objetivo la integracin de los diferentes elementos, criterios y mtodos, e incluye la informacin bsica para resolver un conjunto de prcticas de la asignatura de Ingeniera de Software Web de la Carrera de Ingeniera en Sistemas Computacionales, que proporcione al alumno la habilidad y destreza para conocer, comprender y aplicar con profundidad las tecnologas y metodologas presentes en el entorno profesional para el desarrollo de aplicaciones Web, disear y dirigir soluciones de calidad basadas en aplicaciones Web, as como analizar y evaluar aplicaciones Web vigentes en el marco legal, social y econmico.

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013


La Gua presenta una serie de prcticas o fases de proyecto que cubre cada una de las competencias de las unidades del programa de estudios. Las prcticas son slo una sugerencia didctica para que el docente guie al alumno a aplicar los conocimientos adquiridos en cada una de las unidades. Se incorporan formatos para elaborar las fases del proyecto IWeb, para que el estudiante integre al final un documento integrador, donde muestre la aplicacin y resultado de cada una de las prcticas o fases. Esta Gua es resultado de un proyecto docente y podr adquirirse en el Departamento de Sistemas y Computacin, 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

Ingeniera Web- Gua Tcnica 2013


3 Datos de la Asignatura
3.1 Nombre de la Asignatura: Ingeniera de Software Web
3.1.1 Carrera

Ingeniera en Sistemas Computacionales

3.1.2 Clave de la Asignatura 3.1.3 HT- HP- Crditos SATCA 3.1.4 Temario General

S/C

235

UNIDAD 1 Fundamentos de la Ingeniera Web (IWeb) UNIDAD 2 Formulacin y Planificacin de la IWeb UNIDAD 3 Modelado del Anlisis de IWeb UNIDAD 4 Modelado de Diseo para aplicaciones Web UNDIAD 5 Pruebas para IWeb

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013


4 Temario de la Asignatura
4.1 Unidad 1: Introduccin a la Ingeniera Web (IWeb)
Temas Unidad
1.1 1.2 1.3 1.3.1 1.3.2 Atributos de los sistemas y aplicaciones basados en Web Estratos de la ingeniera de WebApps El proceso de ingeniera Web Definicin del marco de trabajo Refinamiento del marco de trabajo

4.2 Unidad 2: Formulacin y Planeacin de la Ingeniera Web


Temas Unidad 2
2.1 Formulacin de sistemas basados en Web 2.1.1. Preguntas de formulario 2.1.2. Recopilacin de requisitos para WebApps 2.1.3. El puente hacia el modelado de anlisis 2.2 .Planeacin de proyectos de ingeniera Web 2.3. El equipo de ingeniera Web 2.3.1. Los actores 2.3.2. Construccin del equipo 2.4. Conflictos de gestin de proyecto para ingeniera Web 2.4.1 Planeacin de WebApps: subcontratacin 2.4.2 Planeacin de WebApps: ingeniera Web en casa 2.5 Medicin para ingeniera Web y WebApps 2.5.1 Mediciones para esfuerzo de ingeniera Web 2.5.2 Medicin del valor de negocios

4.3 Unidad 3: Modelado del Anlisis de Ingeniera Web


Temas Unidad 3
3.1 Requisitos para el anlisis de las WebApps 3.1.1 La jerarqua del usuario 3.1.2 Desarrollo de casos de uso 3.1.3 Afinacin del modelo de caso de uso 3.2 El modelado de anlisis para WebApps 3.3 El modelado de contenido 3.3.1 Definicin de objetos de contenido 3.3.2 Relaciones y jerarqua de contenido 3.3.3 Clases de anlisis para WebApps 3.4 El modelo de interaccin 3.5 El modelo funcional 3.6 El modelo de configuracin 3.7 Anlisis relacin-navegacin 3.7.1 Anlisis de relaciones 3.7.2 Anlisis de navegacin

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013


4.4 Unidad 4: Modelado del Diseo de aplicaciones Web
Temas Unidad 4
4.1 Temas del diseo para ingeniera web 4.1.1 Diseo y calidad de una WebApps 4.1.2 Metas de diseo 4.2 Pirmide del diseo IWeb 4.3 Diseo de la interfaz de la WebApps 4.3.1 Principios y directrices del diseo de interfaz 4.3.2 Mecanismos del control de la interfaz 4.3.3 Flujo de trabajo en el diseo de la interfaz 4.4 Diseo esttico 4.4.1 Cuestiones de plantilla 4.4.2 Cuestiones de diseo grfico 4..5 Diseo de contenido 4.5.1 Objetos de contenido 4.5.2 Cuestiones de diseo de contenido 4.6 Diseo arquitectnico 4.6.1 Arquitectura de contenido 4.6.2 Arquitectura WebApps 4.7 Diseo de navegacin 4.7.1 Semntica de navegacin 4.7.2 Sintaxis de navegacin 4.8 Diseo al nivel de componentes 4.9 Patrones de diseo hipermedia 4.10 Mtodo de diseo hipermedia orientado a objetos(MDHOO) 4.10.1 Diseo conceptual MDHOO 4.10.2 Diseo de navegacin mediante el MDHOO 4.10.3 Diseo abstracto de la interfaz e implementacin 4.11 Mtricas de diseo para WebApps

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013


4.5 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. Planeacin 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 semntica 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 navegacin 5.6.1. Prueba de la sintaxis de navegacin 5.6.2. Prueba de la semntica de la navegacin 5.7. Prueba de la configuracin 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 desempeo 5.9.1. Objetivos de las pruebas de desempeo 5.9.2. Pruebas de carga 5.9.3. Pruebas de tensin

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013


5 Objetivo(s) General(es) del Curso de Ingeniera de Software Web
Proporcionar al alumno una visin global y actualizada de los principales campos relacionados con la Ingeniera Web, as como las principales lneas de investigacin relacionadas con dicha disciplina. Conocer, comprender y aplicar con profundidad las tecnologas y metodologas presentes en el entorno profesional para el desarrollo de aplicaciones Web. Disear 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 econmico

5.1 Competencias Previas


Aplica modelos, tcnicas 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 algn lenguaje de modelado (UML) Conoce de programacin web avanzada Identifica diferentes Arquitecturas Tecnolgicas Programacin. Sistemas Operativos. Sistemas Distribuidos. Ingeniera del Software. Ingeniera de Computadores. Sistemas de Informacin. Tecnologas de la Informacin. Gestin de Tecnologas de la Informacin Administracin y Gestin de Empresa. Sistemas orientados a Servicios. ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013

5.2 Competencias especficas a desarrollar por unidad


5.2.1.1 Competencia Especfica de la unidad 1 Desarrollar la habilidad para identificar los atributos que existen en la

mayora de las WebApps; As como los estratos de la ingeniera de WebApps y el proceso de la Ingeniera Web. 5.2.1.2 Competencia Especfica de la unidad 2 Desarrollar la habilidad para la formulacin de sistemas y aplicaciones basados en Web; As mismo visualizar la planeacin de proyectos de ingeniera Web contemplando el equipo de ingeniera Web, los conflictos de gestin de proyectos y la medicin para ingeniera Web y WebApps. 5.2.1.3 Competencia Especfica de la unidad 3 Desarrollar la habilidad para la formulacin, recopilacin de requisitos y el modelado de anlisis describiendo la motivacin bsica (metas) y objetivos para la WebApps, definir la categora de usuarios, sealar los requisitos de contenido y de funcin para la bsica de por qu WebApps, establecer una comprensin quien la usar y que

se construir la WebApps

problema(s) les resolver a los usuarios. 5.2.1.4 Competencia Especfica de la unidad 4 Desarrollar la habilidad para aplicar la calidad de una WebApps en trminos de facilidad de uso, funcionalidad, confiabilidad, eficiencia, facilidad de

mantenimiento, seguridad y escalabilidad y tiempo en el mercado logrando un buen diseo con simplicidad, consistencia, identidad, robustez, navegabilidad y apariencia visual.

ING. ROSA IMELDA GARCIA CHI,MTI

Ingeniera Web- Gua Tcnica 2013

5.2.1.5 Competencia Especfica de la unidad 5 Desarrollar la habilidad de descubrir errores en el contenido, la funcin, la facilidad de uso, la navegabilidad, el desempeo, la capacidad y la seguridad de la WebApps mediante la aplicacin de una estrategia de prueba que abarca tanto revisiones como pruebas ejecutables en todo el proceso de ingeniera Web.

ING. ROSA IMELDA GARCIA CHI,MTI

10

Ingeniera Web- Gua Tcnica 2013

GUA TCNICA DE LA UNIDAD 1

Introduccin a la Ingeniera web

ING. ROSA IMELDA GARCIA CHI,MTI

11

Ingeniera Web- Gua Tcnica 2013


6 Unidad 1. Introduccin a la Ingeniera Web
6.1 Ingeniera Web
La World Wide Web y la Internet que la alimentan son, posiblemente los desarrollos ms importantes en la historia de la computacin. Estas tecnologas han llevado a todos a la era de la informtica; adems se han convertido en parte integral de la vida diaria en los ltimos das.

Figura 1 Modelo de Ingeniera Web. Fuente: (PRESSMAN, 2006)

6.1.1 Qu es? Los sistemas y aplicaciones basadas en Web ofrecen un completo arreglo de contenido y funcionan a una amplia poblacin de usuarios finales. La ingeniera Web es el proceso con el que se crean las WebApps de alta calidad. La Ingeniera Web no es un clon perfecto de la ingeniera de software, pero utiliza muchos conceptos y principios fundamentales de ella.

ING. ROSA IMELDA GARCIA CHI,MTI

12

Ingeniera Web- Gua Tcnica 2013

6.1.2 Quin lo hace? Los ingenieros Web y los desarrolladores de los contenidos que no son tcnicos crean las WebApps. 6.1.3 Por qu es importante? Conforme las WebApps se integran cada vez ms en las estrategias de negocios para pequeos y grandes empresas (ejemplo el comercio electrnico), crese en importancia la necesidad de construir sistemas confiables, prcticos y adaptables. 6.1.4 Cules son los pasos? Como cualquier otra disciplina de ingeniera, la Ingeniera Web aplica un enfoque genrico que se suaviza mediante estrategias, tcnicas y mtodos especializados. El proceso IWeb comienza con una formulacin del problema que se resolver con la WebApps. El sistema se construye con tecnologas y herramientas especializadas asociadas con la Web. 6.1.5 Cul es el producto obtenido? Se producen muchos productos de trabajo IWeb. El resultado final es la WebApps operativa.

6.2 Atributos de los sistemas y aplicaciones Web


6.2.1 Qu es la usabilidad? Tcnicas que ayudan a los seres humanos a realizar tareas en entornos grficos 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 grfico, la Web.

ING. ROSA IMELDA GARCIA CHI,MTI

13

Ingeniera Web- Gua Tcnica 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. Quizs suene un poco a trabajo industrial, pero al hacer referencia al trmino tarea, se hace referencia a buscar un programa que se quiere ver en la tele, a ver informacin sobre un equipo de ftbol favorito, a comprar un libro sobre artes marciales. 6.2.2 Realmente hace falta la usabilidad para hacer una Web? Sea tu Web un portal o una pgina personal, no olvides que la gente que entra en tu Web es porque bsicamente busca algo. Hacerlo sencillo es decisin 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. 6.2.3 Cules son las 8 reglas de Oro sobre la usabilidad? Quizs maana sean 10 reglas. 1. En Internet el usuario es el que manda. Esto quiere decir que sin usuarios tu pgina muere, as que ms 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 pgina sea ms rpida 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, imagnate cmo 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

14

Ingeniera Web- Gua Tcnica 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, podrs ir complicando la pgina. Pero asegura antes de arriesgar. 5. Si quieres hacer una pgina 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 cmodos y no se pierdan cada vez que necesiten encontrar algo en tu site. 6. Pon las conclusiones al principio. El usuario se sentir ms cmodo 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 cmodo y quizs se dedique a explorar t site o quizs 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 seleccin de productos a cruzar sea consecuente y no lo quieras vender todo en todas las pginas. Segn avance el usuario en su navegacin procura dejarle ms 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 bsicas de (1) poner las conclusiones al principio, (2) escribir como un 25% de lo que pondras en un papel, se puede llegar muy lejos. ING. ROSA IMELDA GARCIA CHI,MTI

15

Ingeniera Web- Gua Tcnica 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. Evaluacin del contenido. A diferencia del software de aplicacin que evoluciona continuamente, las aplicaciones Web involucran una de manera continua. Un seguimiento continuo y detallado de la informacin implcita en la aplicacin Web. Todo esto hace que la aplicacin Web sirva al usuario fina.

6.3 Estratos de la ingeniera Web


El desarrollo de aplicaciones Web incorpora mtodos de proceso especializados, mtodos de ingeniera de software adaptados a caractersticas de desarrollo de las aplicaciones Web y un conjunto de importantes tecnologas que permitan un correcto desarrollo de las mismas. Los procesos, mtodos y tecnologas (herramientas) proporcionan un enfoque en estratos de la IWeb que es conceptualmente idntico a los estratos de la ingeniera de software. 6.3.1 Proceso Los modelos de procesos Web adoptan la filosofa de desarrollo gil. El desarrollo gil enfatiza un enfoque de desarrollo riguroso que incorpora rpidos ciclos de desarrollo. Es importante reconocer que el problema todava debe analizarse, debe desarrollarse un diseo, la implementacin 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 interaccin con el usuario. Construya sistemas que utilicen pequeos equipos de desarrollo. ING. ROSA IMELDA GARCIA CHI,MTI

16

Ingeniera Web- Gua Tcnica 2013


Subraye el desarrollo evolutivo o incremental mediante el uso de cortos ciclos de desarrollo. 6.3.2 Mtodos Los mtodos de la IWeb abarcan un conjunto de labores tcnicas que permiten al ingeniero Web comprender, caracterizar y luego construir una aplicacin Web de alta calidad. Los mtodos de la IWeb se puedes categorizar de la siguiente manera: 6.3.2.1 Mtodos de comunicacin: Mtodos de comunicacin: Definen el enfoque con que se facilita la comunicacin entre: cliente y desarrollador. Las tcnicas de comunicacin son importantes durante la recoleccin de requisitos. 6.3.2.2 Mtodos de anlisis de requisitos: Proporcionan una base para comprender el contenido que se entregar a las WebApps, la funcin que proporcionar al usuario final y los modos de interaccin de cada clase de usuario requerir mientras ocurra la navegacin por medio de las WebApps 6.3.2.3 Mtodos de diseo: Abarcan una serie de tcnicas de diseo que abordan el contenido, la aplicacin y la arquitectura de informacin, as como el diseo de interface y la estructura de navegacin de las WebApps. 6.3.2.4 Mtodo de prueba: Incorporan revisiones tcnicas formales tanto de contenido y el modelo de diseo como de una amplia variedad de tcnicas de pruebas que abordan conflictos al nivel de componentes. Pruebas de la navegacin, pruebas de facilidad de uso, pruebas de seguridad y pruebas de configuracin. ING. ROSA IMELDA GARCIA CHI,MTI

17

Ingeniera Web- Gua Tcnica 2013


6.3.3 Herramientas y tecnologas Las tecnologas abarcan un amplio conjunto de descripcin de contenido y lenguaje de modelacin por ejemplo: HTML, VRML, XML, etc. lenguajes de programacin 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 administracin y anlisis de sitio.

6.4 El proceso de ingeniera Web


En un proceso tan rpido como es el proceso de Ingeniera 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 gestin? La respuesta es que dada su complejidad es imprescindible. Entre los aspectos que aaden dificultad a la gestin destacamos: - alto porcentaje de contratacin a terceros, - el desarrollo incluye una gran variedad de personal tcnico y no tcnico trabajando en paralelo, - el equipo de desarrollo debe dominar aspectos tan variopintos como, software basado en componentes, redes, diseo de arquitectura y navegacin, diseo grfico y de interfaces, lenguajes y estndares en Internet, test de aplicaciones Web, etc., lo que hace que el proceso de bsqueda y contratacin de personal sea arduo. 6.4.1 Definir el marco de trabajo La efectividad de cualquier proceso de ingeniera depende de su adaptabilidad. Esto es, la organizacin del equipo de trabajo del proyecto, los modos de comunicacin entre miembros del equipo, las actividades de ingeniera y las tareas que deben realizarse, la informacin que se recolecte y se cree, y los mtodos 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

18

Ingeniera Web- Gua Tcnica 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 ocurrirn frecuentemente. Los plazos son cortos.

6.4.2 Comunicacin con el cliente: La comunicacin con el cliente se caracteriza por medio de dos grandes tareas: el anlisis del negocio y la formulacin. El anlisis del negocio define el contexto empresarial-organizativo para las WebApps y otras aplicaciones de negocio. La formulacin es una actividad de recopilacin de requisitos que involucran a todos los participantes. 6.4.3 Planeacin: Se crea el plan del proyecto para el incremento de la WebApp. El plan consiste de una definicin de tareas y un calendario de plazos respecto al perodo establecido para el desarrollo del proyecto. 6.4.4 Modelado: Las labores convencionales de anlisis diseo de la ingeniera 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 anlisis rpido y modelos de diseo que definan requisitos y al mismo tiempo representen una WebApp que los satisfar. 6.4.5 Construccin: Las herramientas y la tecnologa 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 rpidas para asegurar que se descubran los errores en el diseo.

ING. ROSA IMELDA GARCIA CHI,MTI

19

Ingeniera Web- Gua Tcnica 2013


6.4.6 Despliegue: Las WebApp se configura para su ambiente operativo, se entrega a los usuarios finales y luego comienza un perodo de evaluacin. La retroalimentacin acerca de la evaluacin para realizar los procesos respectivos.

Figura 2 Fase de construccin de una aplicacin Web. Fuente: (PRESSMAN, 2006)

6.4.7 Refinamiento del marco de trabajo La definicin de tareas de ingeniera requerida para refinar cada actividad del marco de trabajo se dejan a discrecional del juicio del equipo de ingeniera 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 caractersticas del problema, el producto, el proyecto y la gente en el equipo de ingeniera Web.

6.5 Mejores prcticas en la Ingeniera 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

20

Ingeniera Web- Gua Tcnica 2013


Describir cmo interactuarn los usuarios con la WebApp aplicando un enfoque basado en escenarios. Desarrollar un plan del proyecto, incluso si es muy breve Utilizar algn tiempo para modelar lo que se construir. Revisar la consistencia y calidad de los modelos. Utilizar herramientas y tecnologa que permitan construir el sistema con tantos componentes reutilizables. No apoyarse en usuarios anteriores para depurar la WebApp

ING. ROSA IMELDA GARCIA CHI,MTI

21

Ingeniera Web- Gua Tcnica 2013


7 Prctica No. 1
7.1 Nombre de la prctica: Fase 1 Plan de Negocios para Proyecto IWeb
7.1.1 Objetivo Definir el Plan de Negocios como propuesta de desarrollo de un Proyecto de Ingeniera Web. Los puntos a considerar en un Plan de Negocios son: 1. Resumen ejecutivo 2. Descripcin del producto y valor distintivo 3. Mercado potencial 4. Competencia 5. Modelo de negocio y plan financiero 6. Equipo directivo y organizacin 7. Estado de desarrollo y plan de implantacin 8. Alianzas estratgicas 9. Estrategia de marketing y ventas 10.Principales riesgos y estrategias de salida 7.1.3 Material y Equipo 7.1.4 Metodologa Computadora con Acceso a Internet Dispositivo de almacenamiento Plataforma Moodle del IT Valles Procesador de Textos p.e. Word

7.1.2 Introduccin

1. Conformar equipo de trabajo con diversos roles 2. Descargar el formato para elaborar la fase 1 (Anexo No. 1). Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto, tambin en plataformas como

www.slideshare.net,

www.issuu.com,

www.googledocs.com, www.scribd.com. ING. ROSA IMELDA GARCIA CHI,MTI

22

Ingeniera Web- Gua Tcnica 2013


3. Resolver cada uno de los puntos propuestos en la fase del proyecto 4. Elaborarlo en formato digital 5. Subirlo a la Plataforma Virtual de Aprendizaje 7.1.5 Sugerencias Puedes revisar diversos materiales referentes a la elaboracin de Planes de Negocios. En Ingeniera de Software se aprendi sobre el Modelado de Negocios, el cul puede ser aplicado en esta fase del proyecto. De la misma manera la materia de Administracin de Proyectos aporta elementos para generar un Plan de Negocios bajo el esquema del PMBook, que se puede aplicar a la fase inicial del proyecto.

ING. ROSA IMELDA GARCIA CHI,MTI

23

Ingeniera Web- Gua Tcnica 2013

GUA TCNICA DE LA UNIDAD 2

Formulacin y Planeacin de la Ingeniera Web

ING. ROSA IMELDA GARCIA CHI,MTI

24

Ingeniera Web- Gua Tcnica 2013


8 Unidad 2. Formulacin y Planeacin de la Ingeniera Web
8.1 Formulacin de sistemas basados en Web
La formulacin se enfoca sobre el gran cuadro en las necesidades y objetivos del negocio y el la informacin relacionada. Los clientes y los ingenieros Web quieren definir el contenido requerido, discutir la funcionalidad especfica, caractersticas especficas e identificar la forma en que los usuarios finales interactuarn con las WebApp, todo esto es formulacin y recopilacin de requisitos. 8.1.1 Preguntas de formulacin: En esta etapa es bueno preguntarse y responderse lo siguiente: Cul es la principal motivacin para las WebApp? Cules son los objetivos que deben satisfacer las WebApp? Quin usar la WebApp?

ING. ROSA IMELDA GARCIA CHI,MTI

25

Ingeniera Web- Gua Tcnica 2013


Si tenemos una respuesta correcta a estas preguntas implican metas especficas para el sitio Web. En general se identificas dos categoras de metas: Metas informativas: indican una intencin de proporcionar contenido informacin especficos al usuario final. Metas aplicables: indican la habilidad para realizar alguna tarea dentro de la WebApp. 8.1.2 Recopilacin de requisitos para WebApps Los objetivos globales de la recopilacin de requisitos propuestos para la ingeniera de software permanecen inalterados. Adaptados para las WebApp, dichos objetivos se convierten en: Identificar requisitos de contenido. Identificar requisitos funcionales. Definir escenarios de interaccin para diferentes clases de usuarios.

Los siguientes pasos de la recopilacin de requisitos se dirigen para lograr estos objetivos 1. Pedir a los clientes que definan una categora de usuario y describan cada categora. 2. Comunicarse con los clientes para definir los requisitos bsicos para las WebApp. 3. Analizar la informacin recopilada y utilizar la informacin para realizar un seguimiento a los clientes. 4. Definir casos de uso que describan escenarios de interaccin para cada clase de usuario.

ING. ROSA IMELDA GARCIA CHI,MTI

26

Ingeniera Web- Gua Tcnica 2013


8.1.3 El puente hacia el modelado de anlisis Toda la informacin recolectada y tratada se modela con la utilizacin de casos de uso y notacin UML.

8.2 Planeacin de proyectos de Ingeniera Web


Dada la inmediatez de las WebApps es razonable preguntar: en realidad se necesita gastar tiempo en la planeacin y administracin de un esfuerzo WebApp? No solo se debera dejar involucrar naturalmente a las WebApp, con poco o ninguna gestin explicativa? Ms de un desarrollador Web optara por poca o ninguna gestin, pero eso no hace que estn en lo correcto.

8.3 El Equipo de ingeniera Web


Un equipo de ingeniera Web exitoso mezcla una amplia variedad de talentos que deben trabajar como equipo en un ambiente de proyecto con alta presin. Los plazos son cortos, los cambios son inexorables y la tecnologa contina cambiando. La creacin 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

27

Ingeniera Web- Gua Tcnica 2013


8.3.1 Construccin del equipo Para la construccin del equipo tiene particular relevancia cuando una organizacin se forma un equipo de IWeb Se debe establecer un conjunto de directrices del equipo. El liderazgo fuerte es una obligacin El respeto hacia los talentos individuales es crucial Cada miembro del equipo se debe comprender Es fcil comenzar, lo difcil es mantener el espritu.

8.4 Conflictos de gestin de proyecto para ingeniera Web


Una vez realizada la formulacin y que se han identificado los requisitos bsicos de la WebApp, la empresa debe elegir una de dos opciones de ingeniera Web: La WebApp es subcontratada: la ingeniera 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. 8.4.1 Planeacin de WebApp: subcontratacin En este caso un negocio (el cliente) pide un precio fijo para desarrollar la WebApp de uno o ms proveedores, evala los precios competitivos y luego elige un proveedor para efectuar el trabajo. Pero Qu busca la organizacin contratante? Cmo se determina la competencia de un proveedor de WebApp? Cmo se sabe si una cotizacin es razonable? Qu grado de planeacin, programa de trabajo y valoracin de riesgos se pueden esperar conforme una organizacin se embarca en un esfuerzo por desarrollar una gran WebApp? Estas preguntas no siempre son fciles de contestar, pero vale la pena considerar algunos lineamientos. ING. ROSA IMELDA GARCIA CHI,MTI

28

Ingeniera Web- Gua Tcnica 2013


8.4.1.1 Seleccin 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. 8.4.2 Planeacin de WebApp: Ingeniera Web en casa Los pasos siguientes se recomiendan para proyectos IWeb pequeos y de tamao moderado. Entender el mbito, las dimensiones del cambio y las restricciones del proyecto. Definir una estrategia del proyecto incremental Realizar anlisis de riesgo Desarrollar una estimacin rpida Elegir un conjunto de tareas Establecer un programa Definir mecanismos de rastreo del proyecto Establecer un enfoque de gestin de cambios

ING. ROSA IMELDA GARCIA CHI,MTI

29

Ingeniera Web- Gua Tcnica 2013


8.5 Mediacin para ingeniera Web y WebApps
La mediacin del software ofrece una base para mejorar el proceso de software, lo que aumenta la precisin 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 tcnico. Proporcionar una base para la estimacin del esfuerzo Proporcionar una indicacin del xito de la WebApp desde el punto de vista empresarial.

8.6 Las peores prcticas para proyectos Web


Para mayor comprensin de este punto revisar la seccin 17.6 del texto base, referente al tema.

ING. ROSA IMELDA GARCIA CHI,MTI

30

Ingeniera Web- Gua Tcnica 2013


9 Prctica No. 2
9.1 Nombre de la prctica: Fase 2 Formulacin y Planificacin IWeb
9.1.1 Objetivo Elaborar la Formulacin y Planificacin de un Proyecto de Ingeniera Web La ingeniera web formula procesos bajo la necesidad subyacente de la aplicacin web, las caractersticas y las funciones deseadas por los usuarios, y el alcance del esfuerzo de desarrollo. IWeb planifica las directrices de las cosas que deben ser definidos para establecer un plan de trabajo, considerar los riesgos, definir un programa, y establecer mecanismos para el seguimiento del trabajo de cmo avanza la investigacin. Desde IWeb hay un proceso gil de los productos de trabajo, para la formulacin y la planificacin deben cohesionarse, escritos. La Formulacin y planificacin de la informacin debe ser revisada con las partes interesadas para pero los documentos deben ser

9.1.2 Introduccin

asegurarse de que las inconsistencias y omisiones se identifiquen a tiempo. 9.1.3 Material y Equipo Computadora con Acceso a Internet Plataforma Moodle del IT Valles Procesador de Textos p.e. Word Microsoft Visio o Concept Draw o DIA

ING. ROSA IMELDA GARCIA CHI,MTI

31

Ingeniera Web- Gua Tcnica 2013


9.1.4 Metodologa 1. Conformar equipo de trabajo con diversos roles 2. Descargar el formato para elaborar la fase 2 (Anexo No. 2). Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto, tambin en plataformas como

www.slideshare.net,

www.issuu.com,

www.googledocs.com, www.scribd.com. 3. Resolver cada uno de los puntos propuestos en la fase del proyecto 4. Elaborarlo en formato digital 5. Subirlo a la Plataforma Virtual de Aprendizaje 9.1.5 Sugerencias Para elaborar la Formulacin y la Planificacin de un proyecto de Ingeniera Web es necesario conocer y dominar aspectos del Lenguaje Unificado de

Modelado (UML) especficamente los diagramas de casos de uso, los diagramas de clase. Se sugiere el uso de herramientas de desarrollo de software como diagramadores o herramientas CASE. Algunas de estas herramientas son: Microsoft Visio, Concept Draw o DIA.

ING. ROSA IMELDA GARCIA CHI,MTI

32

Ingeniera Web- Gua Tcnica 2013

GUA TCNICA DE LA UNIDAD 3

Modelado del Anlisis de Ingeniera Web

ING. ROSA IMELDA GARCIA CHI,MTI

33

Ingeniera Web- Gua Tcnica 2013


10 Unidad 3. Modelado del Anlisis de Ingeniera Web.
10.1 Requisitos para el anlisis de las WebApp
El anlisis de requisitos para las WebApp abarca tres grandes tareas: Formulacin Recopilacin de requisitos Modelado de anlisis

10.1.1 La jerarqua de usuario Las categoras de los usuarios finales se identifican como parte de las tareas de formulacin y de recopilacin de requisitos. Las categoras de usuarios son relativamente limitados y no necesitan una representacin UML. Sin embargo, cuando crece el nmero de categoras de usuario, a veces es aconsejable desarrollar una jerarqua de usuarios. 10.1.2 Desarrollo de casos de uso Los casos de uso se desarrollan para cada categora de usuario descrita en la jerarqua de usuario. En el contexto de la ingeniera Web, el caso de uso en s mismo es relativamente informal: un prrafo narrativo que describe una interaccin especifica entre el usuario y la WebApp. 10.1.3 Afinacin del modelo de caso de uso A la par que se crean los diagramas de casos de uso para cada categora 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 Jerrquicamente superficial. ING. ROSA IMELDA GARCIA CHI,MTI

34

Ingeniera Web- Gua Tcnica 2013


Puesto que el anlisis y modelado de actividades son actividades iterativas.

10.2 El modelado de anlisis para WebApps


Se basa en la informacin que contienen los casos de uso desarrollados para l aplicacin. Se identifican el contenido que presentar la WebApp y se extraen las funciones que se desarrollarn a partir de las descripciones de caso de uso. Finalmente los requisitos especficos de la implementacin se deben desarrollar de modo que el ambiente y la infraestructura que apoyan la WebApps puedan construirse.

Cuatro actividades de anlisis, cada una con su aporte a la creacin de un modelo de anlisis completo son: Anlisis de contenido Anlisis de interaccin Anlisis de funciones Anlisis de configuracin

El modelo es si mismo contiene elementos estructurales y dinmicos. Los elementos estructurales identifican las clases de anlisis y los objetivos de contenido que se requieren para crear una WebApp que satisfaga las necesidades del cliente. Los elementos dinmicos del modelo de anlisis describen como interactan los elementos estructurales, entre ellos y con los usuarios finales.

10.3 El modelo de contenido


El modelo de contenido contiene elementos estructurales que proporcionan una importante visin de los requisitos de contenido para una WebApp. Adems incluye todas las clases de anlisis: entidades visibles para el usuario que se crean o manipulan conforme ste interacta con la WebApp. ING. ROSA IMELDA GARCIA CHI,MTI

35

Ingeniera Web- Gua Tcnica 2013


Al igual que otros elementos del modelo de anlisis, el modelo de contenido se deriva a partir de un examen cuidadoso de los casos de uso desarrollados para la WebApp. 10.3.1 Definicin de objetos de contenido Un objeto de contenido puede ser una descripcin textual de un producto, un artculo que describa un evento noticioso. Los objetos de contenido se extraen en los casos de uso al examinar la descripcin del escenario para referencias directas e indirectas al contenido. 10.3.2 Relaciones de jerarqua de contenido El modelo de contenido puede contener diagramas de relacin de entidades o rboles de datos que bosquejan las relaciones entre los objetos de contenido o la jerarqua de ste que mantiene una WebApp.

10.4 El modelo de interaccin


Este modelo de interaccin lo comprenden cuatro elementos: Casos de uso Diagramas de secuencia Diagramas de estado Prototipo de interfaz de usuario

10.4.1 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 descripcin textual o una secuencia de pasos ejecutados. Los Diagramas de Actividad se pueden usar tambin para modelar escenarios grficamente. Una vez que el comportamiento de la aplicacin est captado de esta manera, los casos de uso se examinan y amplan para mostrar qu objetos se interrelacionan para que ocurra este comportamiento. ING. ROSA IMELDA GARCIA CHI,MTI

36

Ingeniera Web- Gua Tcnica 2013


10.4.2 Diagrama de Secuencia Un diagrama de Secuencia muestra una interaccin ordenada segn la secuencia temporal de eventos. En particular, muestra los objetos participantes en la interaccin y los mensajes que intercambian ordenados segn 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 interaccin, sin un orden prefijado. Cada objeto o actor tiene una lnea 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. 10.4.3 Diagramas de Estado El comportamiento en tiempo real de cada clase que tiene comportamiento dinmico y significativo, se modela usando un Diagrama de Estado. El diagrama de actividad puede ser usado tambin aqu, esta vez como una extensin 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 tambin para representar grficamente las acciones de mtodos de clases. 10.4.4 Prototipo de interfaz de usuario Algunas propuestas se basan en obtener de la definicin 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 tcnica 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

37

Ingeniera Web- Gua Tcnica 2013


10.5 El modelo funcional
Este modelo funcional aborda dos elementos de procesamiento de la WebApp y cada uno representa un grfico diferente de la abstraccin de procedimiento: Funcionalidad observable respecto al usuario y que entrega al usuario final de WebApp. Las operaciones dentro de las clases de anlisis que implementan comportamientos asociados con la clase. 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.

10.6 El modelo de configuracin


Las WebApps se deben disear 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 comunicacin y la informacin. Las WebApp deben someterse a una amplia prueba de cada configuracin de navegador que se especifique como parte del modelo de configuracin.

10.7 Anlisis relacin navegacin (ARN)


El anlisis relacin-navegacin proporciona una serie de pasos de anlisis que luchan por identificar relaciones entre los elementos descubiertos como parte de la creacin del modelo de anlisis. El enfoque de ARN se organiza en cinco pasos: Anlisis de los participantes Anlisis de los elementos ING. ROSA IMELDA GARCIA CHI,MTI

38

Ingeniera Web- Gua Tcnica 2013


Anlisis de relaciones Anlisis de navegacin Anlisis de evaluacin.

10.7.1 Anlisis de relaciones: preguntas claves En este anlisis se formulan una serie de preguntas que nos ayudar a comprender ms la relacin. 10.7.2 Anlisis de navegacin Uno de los aspectos ms importantes en los sistemas de informacin en las WebApp es el de la navegacin. La gran mayora de las propuestas metodolgicas para sistemas WebApp resaltan este aspecto ofreciendo modelos que permitan disearlo e implementarlo asegurando la calidad del resultado. Sin embargo, analizando dichos modelos y tcnicas y viendo los resultados de diferentes estudios comparativos, se puede observar que este aspecto, en la mayora de las propuestas, se trata solamente en las ltimas fases del ciclo de vida, principalmente en diseo e implementacin. Los mecanismos de navegacin se definen como parte del diseo. En esta etapa, los desarrolladores deben considerar requisitos de navegacin globales.

ING. ROSA IMELDA GARCIA CHI,MTI

39

Ingeniera Web- Gua Tcnica 2013


11 Prctica No. 3
11.1 Nombre de la prctica: Fase 3 Modelado del Anlisis de IWeb
11.1.1 Objetivo Elaborar la Fase 3 del Modelado de Anlisis de la Ingeniera Web utilizando el Lenguaje de Modelado Unificado con ayuda de Herramientas de Software. 11.1.2 Introduccin El Anlisis de aplicaciones web se centra en tres reas: la informacin o contenido que se presenta las funciones del usuario final a ejecutar los comportamientos de aplicacin web que se presenta en respuesta a acciones del usuario. Los ingenieros de red, especialistas en contenido, y las partes interesadas desarrollan el modelo de anlisis. Los anlisis de modelos permiten que el equipo de ingeniera concreta Web de para los crear una de

representacin aplicacin web.

requisitos

El Modelado de Anlisis de una aplicacin web se centra en cuatro aspectos fundamentales del

problema: contenidos interaccin funcin configuracin

ING. ROSA IMELDA GARCIA CHI,MTI

40

Ingeniera Web- Gua Tcnica 2013

El producto del trabajo de anlisis de modelos IWeb es un conjunto de diagramas UML y un texto descriptivo que describe los resultados de los cuatro anlisis realizados. Los Productos de trabajo de anlisis son revisados para la correccin, integridad y consistencia. Condiciones que favorecen el anlisis de modelos Grandes o complejos WebApp ser construidos Gran nmero de interesados Un gran nmero de ingenieros Web y otros colaboradores Las metas y los objetivos de aplicacin web afectar a la lnea de negocios inferior xito aplicacin web tendr gran influencia en el xito de la empresa Requisitos de tareas de anlisis de aplicacin web Formulacin Identificar las metas y objetivos para la aplicacin web Definir las categoras de usuarios y crear la jerarqua de usuario La recopilacin de requisitos La comunicacin entre el equipo Web y las partes interesadas intensifica

ING. ROSA IMELDA GARCIA CHI,MTI

41

Ingeniera Web- Gua Tcnica 2013


Contenido enumeran Los escenarios de interaccin (casos de uso) son desarrollados 11.1.3 Material y Equipo 11.1.4 Metodologa Computadora con Acceso a Internet Plataforma Moodle del IT Valles Procesador de Textos p.e. Word Microsoft Visio o Concept Draw o DIA y requisitos funcionales se

1. Conformar equipo de trabajo con diversos roles 2. Descargar el formato para elaborar la fase 3 (Anexo No. 3). Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto, tambin en plataformas como

www.slideshare.net,

www.issuu.com,

www.googledocs.com, www.scribd.com. 3. Resolver cada uno de los puntos propuestos en la fase del proyecto 4. Elaborarlo en formato digital 5. Subirlo a la Plataforma Virtual de Aprendizaje 11.1.5 Sugerencias Para esta fase de proyecto es importante haber cumplido y acreditado la fase 1 y fase 2 del proyecto. Para Modelar el Anlisis se requiere de los diagramas de caso de uso y los diagramas de clase del UML generados en la fase 1 del proyecto. En esta fase tambin se requiere el uso de herramientas de elaboracin de diagramas UML.

ING. ROSA IMELDA GARCIA CHI,MTI

42

Ingeniera Web- Gua Tcnica 2013

GUA TCNICA DE LA UNIDAD 4

Modela del Diseo de Aplicaciones Web

ING. ROSA IMELDA GARCIA CHI,MTI

43

Ingeniera Web- Gua Tcnica 2013


12 Unidad 4. Modelado del Diseo de Aplicaciones Web.
12.1 Temas de diseo para ingeniera Web
Cuando se aplica el diseo dentro del contexto de la ingeniera Web, se deben considerar cuestiones tanto genricas como especficas. El diseo debe ser muy especfico. 12.1.1 Diseo de calidad de una WebApp En la prctica, la calidad de los sitios web se ha evaluado de una manera ad hoc, basada en el sentido comn 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 todava no se dispone de mtodos de evaluacin ampliamente difundidos para este tipo de entorno. Por lo tanto, existe la gran necesidad de metodologas efectivas para la obtencin de aplicaciones Web de calidad. Actualmente, hay dos vertientes de metodologas de desarrollo para la Web: la comunidad de Ingeniera de Software y la comunidad de Hipermedia. Estas metodologas carecen sin embargo de mtricas 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 caractersticas de diseo de calidad Web son: Seguridad Disponibilidad Escalabilidad Tiempo en el mercado

ING. ROSA IMELDA GARCIA CHI,MTI

44

Ingeniera Web- Gua Tcnica 2013


12.1.2 Metas de diseo Una de las metas de diseo de una WebApp es abarcar lo siguiente: Simplicidad Consistencia Identidad Robustez Navegabilidad Apariencia visual Compatibilidad

12.2 Pirmide del diseo IWEB


El diseo conduce a un modelo que contiene una mezcla adecuada de esttica, contenido y tecnologa. En la figura 3 se muestra la pirmide de diseo de ingeniera Web.

Figura 3 Modelado del Diseo IWeb. Fuente: (PRESSMAN, 2006)

ING. ROSA IMELDA GARCIA CHI,MTI

45

Ingeniera Web- Gua Tcnica 2013


12.3 Diseo de la interfaz de la WebApp
Toda interfaz de usuario debe presentar las siguientes caractersticas: Fcil de usar Fcil de aprender Fcil 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 diseo de una WebApp se pueden mencionar: Uso equitativo Flexibilidad en el uso Uso sencillo e intuitivo Informacin perceptible Tolerancia al error Esfuerzo fsico reducido Tamao y espacio para acercarse y usar

En un momento de nuestra vida, cualquiera de nosotros puede llegar a experimentar una transicin fsica. Ya sea una minusvala 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 diseo universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades, autodeterminacin y calidad de vida. ING. ROSA IMELDA GARCIA CHI,MTI

46

Ingeniera Web- Gua Tcnica 2013


12.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. 12.3.2 Qu significa: La maquetacin, la presentacin y los contenidos de texto de una pgina deben tener la posibilidad de adaptacin a la interfaz utilizada por el usuario, sin superposiciones o perdida de informaciones en caso de redimensionamiento (ampliacin o reduccin de visualizacin y/o de los caracteres). em, %, ex, px Las unidades relativas em el tamao (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

47

Ingeniera Web- Gua Tcnica 2013


12.3.3 Tcnicas de diseo 12.3.3.1 Diseo fijo Diseo que utiliza dimensiones de tamao absoluto: inches (in), centimetros (cm), milmetros (mm), puntos (pt), picas (pc). Su efecto es bloquear el tamao de un elemento a un tamao fijo. 12.3.3.2 Diseo lquido (o fluido) Diseo que utiliza cmo unidad de medida el porcentaje (%). Su efecto es la adaptacin de los elementos y su disposicin aprovechando todo el ancho de pantalla que ser calculada en base a la resolucin del dispositivo utilizado. 12.3.3.3 Diseo elstico (o flexible) Diseo que utiliza cmo unidad de medida em. Su efecto es adaptar el ancho de los elementos y su disposicin en base al tamao de texto configurado por el usuario. 12.3.3.4 Diseo hibrido Diseo que utiliza unidades de medida absolutas, porcentaje y em. 12.3.4 El diseo (ms) accesible? 12.3.4.1 Diseo fijo A favor Los diseadores disfrutan de un control absoluto en determinar tamao y posicionamiento de los elementos. Favorece la legibilidad. En contra No adapto en pantalla: no se conoce a priori las caractersticas del monitor utilizado por el usuario. Bloquea la pgina segn el prejuicio del papel. 12.3.4.2 Diseo liquido A favor ING. ROSA IMELDA GARCIA CHI,MTI

48

Ingeniera Web- Gua Tcnica 2013


Presentacin de ms informaciones en pantalla y reduccin del efecto scroll. Adaptacin al medio. En contra Causa lneas de texto muy largas en caso de resoluciones de pantalla muy altas: dificultad en la lectura. 12.3.4.3 Diseo elstico A favor Los diseadores controlan tamao y disposicin de los elementos. Evita la sobre posicin de elementos. En contra Al aumentar el tamao del texto, en determinados diseos puede causar la comparsa de la barra de scroll horizontal: dificultad en la legibilidad. 12.3.4.4 Diseo hibrido A favor Todo lo bueno de aporta el diseo fijo, fluido y elstico. En contra Hacemos una investigacin? 12.3.5 En fin, cul es diseo (ms) accesible?* No hay un diseo ms accesible que otro. Se elige el tipo de diseo en base a las necesidades (proyecto).

ING. ROSA IMELDA GARCIA CHI,MTI

49

Ingeniera Web- Gua Tcnica 2013


*La W3C WAI no establece cual sea el diseo ms accesible sino que sea transformable de una manera agradable y que el contenido sea comprensible y navegable. 12.3.6 Flujo de trabajo en el diseo de la interfaz Las siguientes tareas representan un flujo de trabajo rudimentario para el diseo de la interfaz WebApp. 1. Revisar la informacin contenida en el modelo de anlisis 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 especficas de la interfaz. 4. Definir un conjunto de tareas de usuario que estn asociadas con cada accin. 5. Elaborar bosquejos con imgenes de la pantalla para cada accin de la interfaz. 6. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseo esttico. 7. Identificar los objetos de la interfaz del usuario que se requieren para implementarla. 8. Desarrollar una representacin de procedimiento de la interaccin del usuario con la interfaz. 9. Desarrollar una representacin del comportamiento de la interfaz. 10. Describir la plantilla de la interfaz par a cada estado. 11. Refinar y revisar el modelo de diseo de la interfaz.

12.4 Diseo esttico

ING. ROSA IMELDA GARCIA CHI,MTI

50

Ingeniera Web- Gua Tcnica 2013


El diseo esttico, tambin llamado diseo grfico, es un esfuerzo artstico que complementa los aspectos tcnicos de la ingeniera Web. Sin l una WebApp puede ser funcional, pero sin atractivo.

12.5 Diseo de contenido


El diseo de contenido se enfoca en dos asuntos de diseo diferentes, cada uno lo abordan individuos con distintos conjuntos de habilidades. El diseo de contenido desarrolla una representacin de diseo para los objetos de contenido y representa los mecanismos que se requieren para que establezcan sus relaciones uno con otro. 12.5.1 Objetos de contenido La relacin entre objetos de contenido, defina como parte del modelo de anlisis WebApp y los objetos de diseo que representan contenido es anloga a la relacin entre las clases de anlisis y los componentes de diseo. Un objeto de contenido tiene atributos que incluyen informacin especfica de contenido y atributos especficos de implementacin que se especifican como parte del diseo.

12.6 Diseo arquitectnico


El diseo arquitectnico est enlazado con las metas establecidas para la WebApp, el contenido que se presentar, los usuarios que la vistan y la filosofa de navegacin que se establezca. La arquitectura de contenido se basa en la forma en que los objetos de contenido se estructuran para su presentacin y navegacin. 12.6.1 Arquitectura de contenido Se centra en la definicin de la estructura hipermedia global de la WebApp. El diseo se puede elegir de cuatro diferentes estructuras de contenido: Estructuras lineales ING. ROSA IMELDA GARCIA CHI,MTI

51

Ingeniera Web- Gua Tcnica 2013


Estructuras en retcula Las estructuras jerrquicas La estructura en red.

12.7 Diseo de navegacin


El diseador debe definir las rutas de navegacin que habiliten para la ruta de los usuarios el acceso al contenido y las funciones de las WebApp. Para ello se debe: Identificar la semntica de navegacin para diferentes usuarios del sitio Definir la mecnica que logra la navegacin.

12.7.1 Semntica de navegacin Durante las etapas iniciales del diseo, de navegacin se valora la arquitectura de contenido de la WebApp para determinar una o ms FdN para cada caso de uso. Como se anot anteriormente, una FdN identifica los nodos de navegacin y los vnculos que permiten la navegacin entre ellos. 12.7.2 Sintaxis de navegacin Conforme el diseo se lleva a cabo se define la mecnica de navegacin, entre sus posibilidades tenemos: Vinculo de navegacin individual Barra de navegacin horizontal Columna de navegacin vertical Pestaas Mapas del sitio

ING. ROSA IMELDA GARCIA CHI,MTI

52

Ingeniera Web- Gua Tcnica 2013


12.8 Mtodo de diseo hipermedia orientado a objetos (MDHOO)
Las metodologas tradicionales de ingeniera de software, o las metodologas para sistemas de desarrollo de informacin, no contienen una buena abstraccin capaz de facilitar la tarea de especificar aplicaciones hipermedia. El tamao, la complejidad y el nmero de aplicaciones crecen en forma acelerada en la actualidad, por lo cual una metodologa de diseo sistemtica es necesaria para disminuir la complejidad y admitir evolucin y reusabilidad. Producir aplicaciones en las cuales el usuario pueda aprovechar el potencial del paradigma de la navegacin de sitios web, mientras ejecuta transacciones sobre bases de informacin, es una tarea muy difcil de lograr. En primer lugar, la navegacin posee algunos problemas. Una estructura de navegacin robusta es una de las claves del xito en las aplicaciones hipermedia. Si el usuario entiende dnde puede ir y cmo llegar al lugar deseado, es una buena seal de que la aplicacin ha sido bien diseada. Construir la interfaz de una aplicacin web es tambin una tarea compleja; no slo se necesita especificar cules son los objetos de la interfaz que deberan ser implementados, sino tambin la manera en la cual estos objetos interactuarn con el resto de la aplicacin. En hipermedia existen requerimientos que deben ser satisfechos en un entorno de desarrollo unificado. Por un lado, la navegacin y el comportamiento funcional de la aplicacin deberan ser integrados. Por otro lado, durante el proceso de diseo se debera poder desacoplar las decisiones de diseo relacionadas con la estructura navegacional de la aplicacin, de aquellas relacionadas con el modelo del dominio. OOHDM propone el desarrollo de aplicaciones hipermedia a travs de un proceso compuesto por cuatro etapas: diseo conceptual, diseo navegacional, diseo de interfaces abstractas e implementacin.

ING. ROSA IMELDA GARCIA CHI,MTI

53

Ingeniera Web- Gua Tcnica 2013


12.8.1 Diseo 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 ejecucin, se podra usar un modelo de datos semntico estructural (como el modelo de entidades y relaciones). De este modo, en los casos en que la informacin base pueda cambiar dinmicamente o se intenten ejecutar clculos 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 mltiples tipos para representar perspectivas diferentes de las mismas entidades del mundo real. Se usa notacin similar a UML (Lenguaje de Modelado Unificado) y tarjetas de clases y relaciones similares a las tarjetas CRC (Clase Responsabilidad Colaboracin). 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 diseo navegacional para derivar nodos, y las relaciones que son usadas para construir enlaces. 12.8.2 Diseo Navegacional La primera generacin de aplicaciones Web fue pensada para realizar navegacin a travs del espacio de informacin, utilizando un simple modelo de datos de hipermedia. En OOHDM, la navegacin es considerada un paso crtico en el diseo aplicaciones. Un modelo navegacional es construido como una vista sobre un diseo conceptual, admitiendo la construccin de modelos diferentes de acuerdo con los diferentes perfiles de usuarios. Cada modelo navegacional provee una vista subjetiva del diseo conceptual.

ING. ROSA IMELDA GARCIA CHI,MTI

54

Ingeniera Web- Gua Tcnica 2013


El diseo de navegacin 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 semntica 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 nocin 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 comprensin o extensin, o por enumeracin 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 deberan 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 mtodos (comportamiento) cuando se navega en un particular contexto. 12.8.3 Diseo 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, cmo los objetos de interfaz activarn la navegacin y el resto de la funcionalidad de la aplicacin, qu transformaciones de la interfaz son pertinentes y cundo es necesario realizarlas.

ING. ROSA IMELDA GARCIA CHI,MTI

55

Ingeniera Web- Gua Tcnica 2013


Una clara separacin entre diseo navegacional y diseo de interfaz abstracta permite construir diferentes interfaces para el mismo modelo navegacional, dejando un alto grado de independencia de la tecnologa de interfaz de usuario. El aspecto de la interfaz de usuario de aplicaciones interactivas (en particular las aplicaciones Web) es un punto crtico en el desarrollo que las modernas metodologas tienden a descuidar. En OOHDM se utiliza el diseo de interfaz abstracta para describir la interfaz del usuario de la aplicacin de hipermedia. El modelo de interfaz ADVs (Vista de Datos Abstracta) especifica la organizacin y comportamiento de la interfaz, pero la apariencia fsica real o de los atributos, y la disposicin de las propiedades de las ADVs en la pantalla real son hechas en la fase de implementacin. 12.8.4 Implementacin En esta fase, el diseador debe implementar el diseo. Hasta ahora, todos los modelos fueron construidos en forma independiente de la plataforma de implementacin; en esta fase es tenido en cuenta el entorno particular en el cual se va a correr la aplicacin. Al llegar a esta fase, el primer paso que debe realizar el diseador es definir los tems de informacin que son parte del dominio del problema. Debe identificar tambin, cmo son organizados los tems de acuerdo con el perfil del usuario y su tarea; decidir qu interfaz debera ver y cmo debera comportarse. A fin de implementar todo en un entorno Web, el diseador debe decidir adems qu informacin debe ser almacenada.

ING. ROSA IMELDA GARCIA CHI,MTI

56

Ingeniera Web- Gua Tcnica 2013


13 Prctica No. 4
13.1 Nombre de la prctica: Fase 4: Modelado del Diseo de IWeb
13.1.1 Objetivo Desarrollar el Modelado del Diseo de la aplicacin Web que ha estado resolviendo desde la Fase 1. Cuando se aplica el diseo dentro del contexto de la ingeniera Web, se deben considerar cuestiones tanto genricas como especficas. El diseo debe ser muy especfico. Diseo de calidad de una WebApp En la prctica, la calidad de los sitios web se ha evaluado de una manera ad hoc, basada en el sentido comn 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 todava no se dispone de mtodos de evaluacin ampliamente difundidos para este tipo de entorno. Por lo tanto, existe la gran necesidad de metodologas efectivas para la obtencin de aplicaciones Web de calidad. Actualmente, hay dos vertientes de metodologas de desarrollo para la Web: la comunidad de Ingeniera de Software y la comunidad de Hipermedia. Estas metodologas carecen sin embargo de mtricas que puedan ser aplicadas a los modelos intermedios (Ej. Modelo de Objetos, Modelo Navegacional) utilizados en el proceso de desarrollo orientado a la Web. 13.1.3 Material y Equipo Computadora con Acceso a Internet Plataforma Moodle del IT Valles Procesador de Textos p.e. Word Microsoft Visio o Concept Draw o DIA ING. ROSA IMELDA GARCIA CHI,MTI

13.1.2 Introduccin

57

Ingeniera Web- Gua Tcnica 2013


www.mex.tl , www.1&1.mx , www.mipaginawebgratis.es, entre otras pginas que permitan el diseo de la pgina web. 13.1.4 Metodologa Herramientas de diseo de pginas web

1. Conformar equipo de trabajo con diversos roles 2. Descargar el formato para elaborar la fase 4 (Anexo No. 4). Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto, tambin en plataformas como

www.slideshare.net,

www.issuu.com,

www.googledocs.com, www.scribd.com. 3. Resolver cada uno de los puntos propuestos en la fase del proyecto 4. Elaborarlo en formato digital 5. Generar la pgina Web en algunas de las herramientas de la web o herramientas de desarrollo de pginas web 6. Subirlo a la Plataforma Virtual de Aprendizaje 13.1.5 Sugerencias Es recomendable que utilices las herramientas de desarrollo de pginas web que estn disponibles en la Web de manera gratuita, ya que podrs ver tu creacin en internet.

ING. ROSA IMELDA GARCIA CHI,MTI

58

Ingeniera Web- Gua Tcnica 2013

GUA TCNICA DE LA UNIDAD 5

Pruebas para Ingeniera Web

ING. ROSA IMELDA GARCIA CHI,MTI

59

Ingeniera Web- Gua Tcnica 2013


14 Unidad 5. Pruebas para IWeb
14.1 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 ingeniera Web. Se considera tambin 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. 14.1.1 Dimensiones de calidad La calidad se incorpora en una aplicacin Web como consecuencia de un buen diseo. Se evala al aplicar una serie de revisiones tcnicas que valoran varios elementos del modelo de diseo y al aplicar una serie de revisiones tcnicas que valoran varios elementos del modelo de diseo y al aplicar un proceso de pruebas. Tanto las revisiones como las pruebas examinan una o ms de las siguientes dimensiones de calidad: El contenido se evala tanto en el mbito sintctico y semntica La funcin 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 funcin de la WebApp. La facilidad de uso se prueba para garantizar que a cada categora de usuario la soporta la interfaz. *La navegabilidad se pone a prueba para garantizar que toda la sintaxis y semntica de navegacin se ejercen para descubrir cualquier error de navegacin.

ING. ROSA IMELDA GARCIA CHI,MTI

60

Ingeniera Web- Gua Tcnica 2013


*El desempeo se prueba en una diversidad de condiciones operativas, configuraciones y cargas para asegurar que el sistema responde a la interaccin del usuario. La compatibilidad se prueba al ejecutar las WebApp en varias configuraciones husped. 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. 14.1.2 Estratgicas de prueba Las estrategias para probar una WebApp adoptan los principios bsicos 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

14.2 Las pruebas que se aplican a una aplicacin 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 funcin, la facilidad de uso, la navegabilidad, el desempeo, la capacidad y la seguridad de la WebApp. Esto se logra a lo largo de todo el proceso de ingeniera Web, mediante la aplicacin 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

61

Ingeniera Web- Gua Tcnica 2013


Si los usuarios finales encuentran errores que afecten su confianza en la WebApp, se irn a cualquier otra parte por el contenido y la funcin que necesitan, y la WebApp fracasar. Por esta razn, los ingenieros de la Web deben trabajar para eliminar tantos

errores como sea posible antes que la WebApp est en lnea. El proceso de prueba comienza en enfocarse sobre aquellos aspectos de sta que son visibles para el usuario y procede a probar dicha tecnologa e infraestructura. La prueba consta de siete etapas: contenido, interfaz, navegacin, componente, configuracin, desempeo 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). Adems, 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 regresin derivadas de las pruebas desarrolladas cuando la WebApp se someti a ingeniera por primera ocasin.

ING. ROSA IMELDA GARCIA CHI,MTI

62

Ingeniera Web- Gua Tcnica 2013


14.2.1 Dimensiones de Calidad

Figura 4 Dimensiones de Calidad

El proceso de Pruebas que se debe aplicar a la pgina Web que se ha construido tiene su base en el Diseo de la Pgina:

Figura 5 Proceso de Prueba

ING. ROSA IMELDA GARCIA CHI,MTI

63

Ingeniera Web- Gua Tcnica 2013


En la figura 6 se aprecian todas las pruebas a aplicarse en la Pgina que se ha desarrollado:

Figura 6 Proceso de Prueba

ING. ROSA IMELDA GARCIA CHI,MTI

64

Ingeniera Web- Gua Tcnica 2013


15 Prctica No. 5
15.1 Nombre de la prctica: Fase 5 Aplicacin de Pruebas IWeb
15.1.1 Objetivo Aplicar todo el proceso de pruebas a la Pgina Web desarrollada mostrando evidencia de la aplicacin en un documento digital. 15.1.2 Introduccin La estrategia para probar una WebApp, adopta los principios bsicos para todas las pruebas de software y aplica una

estrategia y las tcticas que se recomendaron respecto de los sistemas orientados a objetos como se indica a continuacin: Revisin del modelo de contenido de la WebApp en busca de errores Revisin del modelo de la interfaz asegurndose que todos los casos de uso pueden acomodarse Revisin del modelo de diseo de la WebApp en busca de errores de navegacin Se prueba la interfaz de usuario para descubrir errores en la presentacin o los mecanismos de navegacin. Componentes funcionales seleccionados se prueban en forma individual. Se llevan a cabo pruebas de desempeo. Se prueba la WebApp en una poblacin controlada y monitoreada de usuarios finales buscando errores relacionados con la facilidad de uso, con la compatibilidad, confiabilidad y desempeo de la WebApp.

ING. ROSA IMELDA GARCIA CHI,MTI

65

Ingeniera Web- Gua Tcnica 2013


15.1.3 Material y Equipo 15.1.4 Metodologa Computadora con Acceso a Internet Navegadores Diversos dispositivos para accesar a la pgina Plataforma Moodle del IT Valles Procesador de Textos p.e. Word

1. Conformar equipo de trabajo 2. Tener diversos dispositivos con acceso a internet 3. Cargar la pgina Web que desarrollaron 4. Aplicar cada una de las pruebas de IWeb 5. Documentar y agregar evidencia de las

pruebas aplicadas 6. Entregar en la plataforma virtual el documento de pruebas. 15.1.5 Sugerencias Es necesario que todo el equipo participe en la prueba de la pgina web. Las pruebas no se pueden aplicar si no est terminada la pgina Web.

ING. ROSA IMELDA GARCIA CHI,MTI

66

Ingeniera Web- Gua Tcnica 2013

FORMATO FASES DE PROYECTO IWEB

Documento Integrador

ING. ROSA IMELDA GARCIA CHI,MTI

67

Ingeniera Web- Gua Tcnica 2013


16 Anexo No. 1. Formato Fase 1 Proyecto IWeb.

ING. ROSA IMELDA GARCIA CHI,MTI

68

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

69

Ingeniera Web- Gua Tcnica 2013


17 Anexo No. 2. Formato Fase 2 Proyecto IWeb.

ING. ROSA IMELDA GARCIA CHI,MTI

70

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

71

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

72

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

73

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

74

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

75

Ingeniera Web- Gua Tcnica 2013


18 Anexo No. 3. Formato Fase 3 Proyecto IWeb.

ING. ROSA IMELDA GARCIA CHI,MTI

76

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

77

Ingeniera Web- Gua Tcnica 2013


19 Anexo No. 4. Formato Fase 4 Proyecto IWeb.

ING. ROSA IMELDA GARCIA CHI,MTI

78

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

79

Ingeniera Web- Gua Tcnica 2013


20 Anexo No. 5. Formato Fase 5 Proyecto IWeb.

ING. ROSA IMELDA GARCIA CHI,MTI

80

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

81

Ingeniera Web- Gua Tcnica 2013

ING. ROSA IMELDA GARCIA CHI,MTI

82

Ingeniera Web- Gua Tcnica 2013


21 Bibliografa
1. 2. Cuevas, I., Ingeniera de la Web y Patrones de Diseo. 2005. Arlow, J. and I. Neustad, UML 2. Programacin. Anaya Multimedia-Anaya Interactiva, 2006. 3. Booch, G., et al., El lenguaje unificado de modelado. 1999: Addison Wesley Madrid. 4. 5. Cuevas Agustn, G., Gestin del proceso software. 2002. Fowler, M., R. SCOTT, and K. Scott, UML gota a gota. 1999: Pearson Educacin. 6. Fuente, A.A.J., et al., El libro Azul de la Ingeniera en Informtica: una alternativa al Libro Blanco. I Jornadas de Innovacin Docente de la EUITIO, 2005: p. 67. 7. Garca Molina, J.J., G. Rossi, and A. Moreira, UML: el lenguaje estndar para el modelado de software. Novtica: Revista de la Asociacin de Tcnicos de Informtica, 2004(168): p. 4-5. 8. Gnova, G., J.M. Fuentes, and J. Llorens, Evaluacin de herramientas CASE para UML. 9. Grady, R.B., Successful software process improvement. 1997: Prentice Hall PTR. 10. Guevera, A., Ingeniera Web: E-learning. Cultura Cientfica, 2011(5): p. 1620. 11. Hernndez Gonzlez, A., Identificacin de Procesos de Negocio. Ingeniera Industrial, 2010. 25(3): p. 6 pg.

ING. ROSA IMELDA GARCIA CHI,MTI

83

Ingeniera Web- Gua Tcnica 2013


12. Humphrey, W.S., Introduccin al Proceso Software Personal (PSP). 2001: AddisonWesley. 13. Pastor, O. OOWS: Una aproximacin para el Modelado Conceptual de Aplicaciones Web. 2002. 14. Pressman, R.S. and J.M. Troya, Ingeniera del software: Un enfoque prctico. 6ta edicion. 2006: McGraw Hill. 15. Rumbaugh, J. and I. Jacobson, Grady Booch. The Unified Modeling Language Reference Manual (The Addison-Wesley Object Technology Series), 2001. 16. Senn, J.A. and D. Mercer, Anlisis y diseo de sistemas. 1992: Mxico: McGraw Hill. 17. 18. Sommerville, I., Ingeniera del software. 2005: Pearson Educacin. Thomas, D., et al., Agile web development with rails. 2005: Pragmatic bookshelf New York.

ING. ROSA IMELDA GARCIA CHI,MTI

84

You might also like