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 COMPUTACIONALESGUÍA TÉCNICA 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- Guía Técnica 2013 1 Contenido 2 3 INTRODUCCIÓN ............................................................................................. 1 Datos de la Asignatura ..................................................................................... 4 3.1 4 Nombre de la Asignatura: Ingeniería de Software Web ............................. 4 Temario de la Asignatura ................................................................................. 5 4.1 4.2 4.3 4.4 4.5 Unidad 1: Introducción a la Ingeniería Web (IWeb) .................................... 5 Unidad 2: Formulación y Planeación de la Ingeniería Web ........................ 5 Unidad 3: Modelado del Análisis de Ingeniería Web .................................. 5 Unidad 4: Modelado del Diseño de aplicaciones Web ............................... 6 Unidad 5: Pruebas para IWeb .................................................................... 7 5 Objetivo(s) General(es) del Curso de Ingeniería de Software Web ................. 8 5.1 5.2 Competencias Previas ............................................................................... 8 Competencias específicas a desarrollar por unidad ................................... 9 GUÍA TÉCNICA DE LA UNIDAD 1 ........................................................................ 11 6 Unidad 1. Introducción a la Ingeniería Web ................................................... 12 6.1 6.2 6.3 6.4 6.5 7 Ingeniería Web ......................................................................................... 12 Atributos de los sistemas y aplicaciones Web .......................................... 13 Estratos de la ingeniería Web .................................................................. 16 El proceso de ingeniería Web .................................................................. 18 Mejores prácticas en la Ingeniería Web. .................................................. 20 Práctica No. 1................................................................................................. 22 7.1 Nombre de la práctica: Fase 1 Plan de Negocios para Proyecto IWeb .. 22 GUÍA TÉCNICA DE LA UNIDAD 2 ........................................................................ 24 8 Unidad 2. Formulación y Planeación de la Ingeniería Web ............................ 25 ING. ROSA IMELDA GARCIA CHI, MTI i Ingeniería Web- Guía Técnica 2013 8.1 8.2 8.3 8.4 8.5 8.6 9 Formulación de sistemas basados en Web .............................................. 25 Planeación de proyectos de Ingeniería Web ............................................ 27 El Equipo de ingeniería Web .................................................................... 27 Conflictos de gestión de proyecto para ingeniería Web ........................... 28 Mediación para ingeniería Web y WebApps ............................................ 30 Las peores prácticas para proyectos Web ............................................... 30 Práctica No. 2................................................................................................. 31 9.1 Nombre de la práctica: Fase 2 Formulación y Planificación IWeb ......... 31 GUÍA TÉCNICA DE LA UNIDAD 3 ........................................................................ 33 10 Unidad 3. Modelado del Análisis de Ingeniería Web. .................................. 34 Requisitos para el análisis de las WebApp ........................................... 34 El modelado de análisis para WebApps................................................ 35 El modelo de contenido ........................................................................ 35 El modelo de interacción ....................................................................... 36 El modelo funcional ............................................................................... 38 El modelo de configuración ................................................................... 38 Análisis relación – navegación (ARN) ................................................... 38 10.1 10.2 10.3 10.4 10.5 10.6 10.7 11 Práctica No. 3 .............................................................................................. 40 Nombre de la práctica: Fase 3 Modelado del Análisis de IWeb .......... 40 11.1 GUÍA TÉCNICA DE LA UNIDAD 4 ........................................................................ 43 12 Unidad 4. Modelado del Diseño de Aplicaciones Web. ............................... 44 Temas de diseño para ingeniería Web ................................................. 44 Pirámide del diseño IWEB .................................................................... 45 Diseño de la interfaz de la WebApp ...................................................... 46 Diseño estético ..................................................................................... 50 ING. ROSA IMELDA GARCIA CHI, MTI 12.1 12.2 12.3 12.4 ii Ingeniería Web- Guía Técnica 2013 12.5 12.6 12.7 12.8 13 Diseño de contenido ............................................................................. 51 Diseño arquitectónico ........................................................................... 51 Diseño de navegación .......................................................................... 52 Método de diseño hipermedia orientado a objetos (MDHOO) .............. 53 Práctica No. 4 .............................................................................................. 57 Nombre de la práctica: Fase 4: Modelado del Diseño de IWeb .......... 57 13.1 GUÍA TÉCNICA 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 aplicación web ................................ 61 14.1 14.2 15 Práctica No. 5 .............................................................................................. 65 Nombre de la práctica: Fase 5 Aplicación 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 Bibliografía................................................................................................... 83 ING. ROSA IMELDA GARCIA CHI, MTI iii definir las categorías de usuarios y señalar los requisitos de contenido y de función de la WebApps para establecer una comprensión básica de porqué se construirá la WebApps. Se inicia la unidad 1 con prácticas relacionadas con los estratos: procesos. que define la calidad en términos de facilidad de uso. funcionalidad. facilidad de mantenimiento. eficiencia. denominado Modelado del Análisis IWeb. Se desarrolla la segunda fase del proyecto IWeb. define las necesidades del negocio. que corresponde a la propuesta. seguridad. En la segunda unidad. En esta unidad se desarrolla la primera fase del proyecto IWeb. riguroso. métodos. El Proceso IWeb adopta el enfoque de desarrollo ágil que subraya un punto de vista de ingeniería “magro”. las funciones y características principales y el grado de interoperabilidad con otras aplicaciones. escalabilidad y tiempo en el mercado. que conduce a la entrega incremental del sistema que será construido. generando la fase tres del proyecto. Valles. confiabilidad. herramientas/tecnología. cuyo propósito es describir la motivación básica (metas) y objetivos de una WebApps.Guía Técnica 2013 2 INTRODUCCIÓN La Guía Técnica de Ingeniería de Software Web (IWeb) integra un conjunto de prácticas sugeridas 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. denominada Formulación y Planeación de IWeb. En la cuarta unidad se aborda el Modelado del diseño de la IWeb. ROSA IMELDA GARCIA CHI.Ingeniería Web. En la tercera unidad se integran prácticas que describen el Modelado de Análisis de la IWeb. quién la usará y qué problemas les resolverá a los usuarios. las metas y objetivos del proyecto. las categorías de usuario final. ING.MTI 1 . integra la actividad de comunicación con el cliente. así como analizar y evaluar aplicaciones Web vigentes en el marco legal. interoperabilidad. estructura. Las pruebas se centran en contenido. facilidad de uso. el Modelado de Diseño de IWeb. que proporcione al alumno la habilidad y destreza para conocer. 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. e incluye la información básica para resolver un conjunto de prácticas de la asignatura de Ingeniería de Software Web de la Carrera de Ingeniería en Sistemas Computacionales. Las pruebas también incorporan revisiones que ocurren conforme se diseña la Web App. tiene como objetivo la integración de los diferentes elementos. criterios y métodos. Se solicita evidencia de la aplicación de las pruebas. Incluye una representación de la plantilla de pantalla. se revisan los temas referentes a las Pruebas de IWeb. Y por última unidad. Se propone en esta unidad probar el producto obtenido de aplicar el modelado de Ingeniería Web en cada una de sus fases. ING. una definición de los modos de interacción y una descripción de los mecanismos de navegación. compatibilidad. En esta unidad se describen las métricas de diseño para la ingeniería Web. social y económico. referente a la apariencia y la percepción de la Web Apps e incluye esquemas de color. Aquí también se incluye el diseño gráfico. La presente Guía Técnica. plantilla geométrica. capacidad y seguridad. el uso de gráficos y decisiones estéticas relacionadas.MTI 2 . desempeño. función. navegabilidad. diseñar y dirigir soluciones de calidad basadas en aplicaciones Web. En esta unidad se solicita la generación de la fase cuatro del proyecto.Guía Técnica 2013 El diseño de la interfaz describe la estructura y organización de la interfaz del usuario. comprender y aplicar con profundidad las tecnologías y metodologías presentes en el entorno profesional para el desarrollo de aplicaciones Web.Ingeniería Web. tamaño de texto. ROSA IMELDA GARCIA CHI. fuente y ubicación. www.com. para que el estudiante integre al final un documento integrador.MTI 3 . ROSA IMELDA GARCIA CHI.slideshare. y www. donde muestre la aplicación y resultado de cada una de las prácticas o fases.net. Esta Guía es resultado de un proyecto docente y podrá adquirirse en el Departamento de Sistemas y Computación.issuu.Guía Técnica 2013 La Guía presenta una serie de prácticas o fases de proyecto que cubre cada una de las competencias de las unidades del programa de estudios. ING.com . Se incorporan formatos para elaborar las fases del proyecto IWeb. www. Las prácticas son sólo una sugerencia didáctica para que el docente guie al alumno a aplicar los conocimientos adquiridos en cada una de las unidades.com. así como en Internet en diversas plataformas como www.googledocs.Ingeniería Web.scribd. 1 Carrera Ingeniería en Sistemas Computacionales 3.1 Nombre de la Asignatura: Ingeniería de Software Web 3.1. ROSA IMELDA GARCIA CHI.4 Temario General S/C 2–3–5 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.MTI 4 .3 HT.Créditos SATCA 3.HP.1.1.2 Clave de la Asignatura 3.Guía Técnica 2013 3 Datos de la Asignatura 3.Ingeniería Web.1. MTI 5 .1 Unidad 1: Introducción a la Ingeniería Web (IWeb) Temas Unidad 1.4.5 El modelo funcional 3.1 La jerarquía del usuario 3.1.3. El equipo de ingeniería Web 2.2 1.3.3 Unidad 3: Modelado del Análisis de Ingeniería Web Temas Unidad 3 3.4 El modelo de interacción 3. Los actores 2.7.7.7 Análisis relación-navegación 3.2 Relaciones y jerarquía de contenido 3. El puente hacia el modelado de análisis 2.4.3.1.2 El modelado de análisis para WebApps 3.Guía Técnica 2013 4 Temario de la Asignatura 4.5.1.1 1.2 Planeación de WebApps: ingeniería Web en casa 2.2 .3.1.4.1.2.3.1 Formulación de sistemas basados en Web 2. Conflictos de gestión de proyecto para ingeniería Web 2.3.2 Análisis de navegación ING.Ingeniería Web.1 Planeación de WebApps: subcontratación 2.3 Afinación del modelo de caso de uso 3.2.3.Planeación de proyectos de ingeniería Web 2. Construcción del equipo 2. ROSA IMELDA GARCIA CHI.5.1 1.2 Atributos de los sistemas y aplicaciones basados en Web Estratos de la ingeniería de WebApps El proceso de ingeniería Web Definición del marco de trabajo Refinamiento del marco de trabajo 4.3 1.5 Medición para ingeniería Web y WebApps 2.2 Medición del valor de negocios 4.1 Definición de objetos de contenido 3.1 Análisis de relaciones 3.1 Mediciones para esfuerzo de ingeniería Web 2.1 Requisitos para el análisis de las WebApps 3.3 Clases de análisis para WebApps 3.2 Desarrollo de casos de uso 3.3.1. Preguntas de formulario 2.6 El modelo de configuración 3.3 El modelado de contenido 3.2 Unidad 2: Formulación y Planeación de la Ingeniería Web Temas Unidad 2 2. Recopilación de requisitos para WebApps 2.1.1.3. 1.3.6.3.6.1 Principios y directrices del diseño de interfaz 4.10.2 Cuestiones de diseño gráfico 4. ROSA IMELDA GARCIA CHI.6 Diseño arquitectónico 4..1 Diseño y calidad de una WebApps 4.1.7.5.4.10 Método de diseño hipermedia orientado a objetos(MDHOO) 4.11 Métricas de diseño para WebApps ING.5 Diseño de contenido 4.5.3.7.2 Sintaxis de navegación 4.Ingeniería Web.3 Flujo de trabajo en el diseño de la interfaz 4.4 Diseño estético 4.1 Temas del diseño para ingeniería web 4.2 Cuestiones de diseño de contenido 4.2 Pirámide del diseño IWeb 4.7 Diseño de navegación 4.8 Diseño al nivel de componentes 4.2 Mecanismos del control de la interfaz 4.1 Cuestiones de plantilla 4.1 Diseño conceptual MDHOO 4.3 Diseño abstracto de la interfaz e implementación 4.9 Patrones de diseño hipermedia 4.10.4 Unidad 4: Modelado del Diseño de aplicaciones Web Temas Unidad 4 4.10.2 Arquitectura WebApps 4.Guía Técnica 2013 4.1 Arquitectura de contenido 4.1 Objetos de contenido 4.4.MTI 6 .2 Diseño de navegación mediante el MDHOO 4.3 Diseño de la interfaz de la WebApps 4.1 Semántica de navegación 4.2 Metas de diseño 4. Guía Técnica 2013 4.6.7.8.3. Pruebas de carga 5.Ingeniería Web. Pruebas de compatibilidad 5.7. Pruebas de navegación 5.5. Estrategia de pruebas de la interfaz 5. Errores dentro de un ambiente WebApps 5. Conflictos en el lado del servidor 5. Prueba de contenido 5.2.1.4.4. Prueba de la Facilidad de uso 5. Prueba de la sintaxis de navegación 5.7. Estrategias de pruebas 5.1.1.4.3.2.5. Pruebas de seguridad 5.1.6.4. Objetivos de las pruebas de desempeño 5.2. Prueba de la semántica de la navegación 5. Prueba de la semántica de la interfaz 5.1. Pruebas de tensión ING. Prueba de la interfaz del usuario 5.9.4.6.1.1. Conflictos en el lado del cliente 5.2.9. Planeación de las pruebas 5. Objetivos de la prueba de contenido 5.1.2. Prueba al nivel de componentes 5.2.1. Prueba de la configuración 5. ROSA IMELDA GARCIA CHI. Prueba de la base de datos 5.3.4.4. El Proceso de prueba 5.2.1. Pruebas del desempeño 5.3.3. Dimensiones de calidad 5.5 Unidad 5: Pruebas para IWeb Temas Unidad 5 5. Prueba de mecanismos de la interfaz 5.1 Prueba de conceptos para WebApps 5.9.9.3.4.MTI 7 . Guía Técnica 2013 5 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. Ingeniería de Computadores. Diseñar y dirigir soluciones de calidad basadas en aplicaciones Web en el entorno profesional.Ingeniería Web. Sistemas Operativos. 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. así como las principales líneas de investigación relacionadas con dicha disciplina. social y económico 5. Sistemas Distribuidos.MTI 8 . Sistemas orientados a Servicios. Tecnologías de la Información. Analizar y evaluar aplicaciones Web vigentes en el entorno profesional bajo el marco legal.1 Competencias Previas Aplica modelos. Conocer. Gestión de Tecnologías de la Información Administración y Gestión de Empresa. comprender y aplicar con profundidad las tecnologías y metodologías presentes en el entorno profesional para el desarrollo de aplicaciones Web. Sistemas de Información. ROSA IMELDA GARCIA CHI. ING. Ingeniería del Software. facilidad de mantenimiento. recopilación de requisitos y el modelado de análisis describiendo la motivación básica (metas) y objetivos para la WebApps.3 Competencia Específica de la unidad 3 Desarrollar la habilidad para la formulación. señalar los requisitos de contenido y de función para la básica de por qué WebApps.2. Así mismo visualizar la planeación de proyectos de ingeniería Web contemplando el equipo de ingeniería Web.1.Guía Técnica 2013 5.Ingeniería Web.2. 5.MTI 9 .1. eficiencia.2 Competencia Específica de la unidad 2 Desarrollar la habilidad para la formulación de sistemas y aplicaciones basados en Web. robustez. 5. los conflictos de gestión de proyectos y la medición para ingeniería Web y WebApps. funcionalidad.1 Competencia Específica de la unidad 1 Desarrollar la habilidad para identificar los atributos que existen en la mayoría de las WebApps. navegabilidad y apariencia visual. identidad.2.1. definir la categoría de usuarios. ROSA IMELDA GARCIA CHI. establecer una comprensión quien la usará y que se construirá la WebApps problema(s) les resolverá a los usuarios. Así como los estratos de la ingeniería de WebApps y el proceso de la Ingeniería Web. seguridad y escalabilidad y tiempo en el mercado logrando un buen diseño con simplicidad.1. confiabilidad.2.2 Competencias específicas a desarrollar por unidad 5. consistencia. 5. ING.4 Competencia Específica de la unidad 4 Desarrollar la habilidad para aplicar la calidad de una WebApps en términos de facilidad de uso. Guía Técnica 2013 5.5 Competencia Específica de la unidad 5 Desarrollar la habilidad de descubrir errores en el contenido.MTI 10 . 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.1.Ingeniería Web. la facilidad de uso. la función. la navegabilidad. ROSA IMELDA GARCIA CHI. ING. el desempeño.2. Guía Técnica 2013 GUÍA TÉCNICA DE LA UNIDAD 1 Introducción a la Ingeniería web ING. ROSA IMELDA GARCIA CHI.MTI 11 .Ingeniería Web. Guía Técnica 2013 6 Unidad 1.Ingeniería Web. pero utiliza muchos conceptos y principios fundamentales de ella. Estas tecnologías han llevado a todos a la era de la informática.1 Ingeniería Web La World Wide Web y la Internet que la alimentan son.1 ¿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 no es un clon perfecto de la ingeniería de software. posiblemente los desarrollos más importantes en la historia de la computación.1. 2006) 6. ROSA IMELDA GARCIA CHI.MTI 12 . ING. Figura 1 Modelo de Ingeniería Web. Introducción a la Ingeniería Web 6. además se han convertido en parte integral de la vida diaria en los últimos días. Fuente: (PRESSMAN. La ingeniería Web es el proceso con el que se crean las WebApps de alta calidad. prácticos y adaptables. crese en importancia la necesidad de construir sistemas confiables. la Web. El sistema se construye con tecnologías y herramientas especializadas asociadas con la Web. la deben realizar frente a un ordenador en un entorno gráfico. que quieren realizar una tarea de una forma sencilla y eficaz y en este caso particular.1.2 ¿Quién lo hace? Los ingenieros Web y los desarrolladores de los contenidos que no son técnicos crean las WebApps. 6.1 ¿Qué es la usabilidad? Técnicas que ayudan a los seres humanos a realizar tareas en entornos gráficos de ordenador.Ingeniería Web.1.4 ¿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. ROSA IMELDA GARCIA CHI. ING. Se trabaja para seres humanos. 6.1.2 Atributos de los sistemas y aplicaciones Web 6. El resultado final es la WebApps operativa.Guía Técnica 2013 6. 6. 6.2.MTI 13 . Tres conceptos muy importantes. técnicas y métodos especializados.3 ¿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).5 ¿Cuál es el producto obtenido? Se producen muchos productos de trabajo IWeb.1. El proceso IWeb comienza con una formulación del problema que se resolverá con la WebApps. no olvides que la gente que entra en tu Web es porque básicamente busca algo. Procura que todo funcione como un reloj para que la gente pueda fiarse de tu site. pero al hacer referencia al término “tarea”. La confianza es algo que cuesta mucho ganar y se pierde con un mal enlace. 4. de lo contrario te quedaras solo. directa. 3. En Internet la calidad se basa en la rapidez y la fiabilidad. sencilla que compleja.Guía Técnica 2013 La usabilidad ayuda a que esta tarea se realice de una forma sencilla analizando el comportamiento humano. ING. Hacerlo sencillo es decisión tuya.MTI 14 . y los pasos necesarios para ejecutar la tarea de una forma eficaz. 6. 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. Quizás suene un poco a trabajo industrial.2 ¿Realmente hace falta la usabilidad para hacer una Web? Sea tu Web un portal o una página personal. Esto quiere decir que sin usuarios tu página muere. En Internet el usuario es el que manda. ROSA IMELDA GARCIA CHI. así que más vale que los cuides y les des lo que te piden.2. 1. se hace referencia a buscar un programa que se quiere ver en la tele. fiable que moderna. Si en el mundo real a veces nos cuesta fiarnos del banco de la esquina. 2. a comprar un libro sobre artes marciales. imagínate cómo se siente la gente en Internet cuando llega a tu site. Seguridad.2.Ingeniería Web.3 ¿Cuáles son las 8 reglas de Oro sobre la usabilidad? Quizás mañana sean 10 reglas. a ver información sobre un equipo de fútbol favorito. En Internet cuenta que tu página sea más rápida que bonita. Pero siguiendo las reglas básicas de (1) poner las conclusiones al principio.Ingeniería Web. Pon las conclusiones al principio. La gente no se va a aprender tu site por mucho que insistas. no puedes perder ni un solo visitante por tener un enlace mal hecho. ROSA IMELDA GARCIA CHI. reduce. Escribir bien para Internet es todo un arte. Procurar que la selección de productos a cruzar sea consecuente y no lo quieras “vender todo” en todas las páginas. 5. así que por lo menos hazlo sencillo. 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. Poco a poco y con el feedback de los usuarios. No hagas perder el tiempo a la gente con cosas que no necesitan. optimiza. Versiones 1.0 son buenas mientras lo que este puesto este bien asentado y genere confianza. que salir con todo y ver “ qué es lo que pasa”. El usuario se sentirá más cómodo si ve las metas al principio. (2) escribir como un 25% de lo que pondrías en un papel. 7. simplifica. se puede llegar muy lejos. Según avance el usuario en su navegación procura dejarle más espacio libre. Es mejor salir con algo sencillo e irlo complicando poco a poco.Guía Técnica 2013 Esto quiere decir que tal y como está la competencia en Internet. 6. Cuidado con cruzar promociones. 8. De esta forma no tendrá que buscar lo que necesita y perderá menos tiempo en completar su tarea. Pero asegura antes de arriesgar. para que de este modo los usuarios se sientan cómodos y no se pierdan cada vez que necesiten encontrar algo en tu site. ING. Si quieres hacer una página decente. si lo haces por lo menos hazlo con cuidado.MTI 15 . podrás ir complicando la página. Puede ocurrir que cuando este punto de comprar algo vea una oferta que le distraiga y pierdas esa venta. Buenos contenidos. reutiliza todos los elementos que puedas. Los procesos. 9.3.Guía Técnica 2013 (3) Leer en pantalla cuesta mucho.Ingeniería Web. reduce y simplifica todo lo que puedas.MTI 16 . 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. A diferencia del software de aplicación que evoluciona continuamente. Evaluación del contenido.1 Proceso Los modelos de procesos Web adoptan la filosofía de desarrollo ágil. debe desarrollarse un diseño. las aplicaciones Web involucran una de manera continua. Un seguimiento continuo y detallado de la información implícita en la aplicación Web. ING. ROSA IMELDA GARCIA CHI. por lo que. Todo esto hace que la aplicación Web sirva al usuario fina.3 Estratos de la ingeniería Web El desarrollo de aplicaciones Web incorpora métodos de proceso especializados. 6. en el caso de textos para Internet. Construya sistemas que utilicen pequeños equipos de desarrollo. la implementación debe preceder en una forma incremental y se debe iniciar un enfoque organizado de prueba. El desarrollo ágil enfatiza un enfoque de desarrollo riguroso que incorpora rápidos ciclos de desarrollo. 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. 6. 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. Es importante reconocer que el problema todavía debe analizarse. MTI 17 .3.3. ROSA IMELDA GARCIA CHI.2. caracterizar y luego construir una aplicación Web de alta calidad.4 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. así como el diseño de interface y la estructura de navegación de las WebApps.2.Guía Técnica 2013 Subraye el desarrollo evolutivo o incremental mediante el uso de cortos ciclos de desarrollo. 6.1 Métodos de comunicación: Métodos de comunicación: Definen el enfoque con que se facilita la comunicación entre: cliente y desarrollador.3. 6.2 Métodos Los métodos de la IWeb abarcan un conjunto de labores técnicas que permiten al ingeniero Web comprender.Ingeniería Web.2.3. Las técnicas de comunicación son importantes durante la recolección de requisitos. 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 6. Los métodos de la IWeb se puedes categorizar de la siguiente manera: 6.2 Métodos de análisis de requisitos: Proporcionan una base para comprender el contenido que se entregará a las WebApps.3 Métodos de diseño: Abarcan una serie de técnicas de diseño que abordan el contenido. 6. pruebas de seguridad y pruebas de configuración.3. pruebas de facilidad de uso. Pruebas de la navegación. la aplicación y la arquitectura de información.2. ING. MTI 18 . . . herramientas de seguridad. software basado en componentes. Esto es.1 Definir el marco de trabajo La efectividad de cualquier proceso de ingeniería depende de su adaptabilidad. los modos de comunicación entre miembros del equipo. la información que se recolecte y se cree. recursos de desarrollo basados en componentes por ejemplo corba.4 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. diseño gráfico y de interfaces.Guía Técnica 2013 6. 6. lenguajes y estándares en Internet. redes. jsp. activeX. y al problema que se quiere resolver.el desarrollo incluye una gran variedad de personal técnico y no técnico trabajando en paralelo. etc. la organización del equipo de trabajo del proyecto. etc. ¿merece la pena el esfuerzo requerido por la gestión? La respuesta es que dada su complejidad es imprescindible. el plazo y las restricciones del proyecto. navegadores. XML. y herramientas de administración y análisis de sitio.. php. herramientas de auditoria de sitio. herramientas de conectividad de base de datos.3 Herramientas y tecnologías Las tecnologías abarcan un amplio conjunto de descripción de contenido y lenguaje de modelación por ejemplo: HTML. y los métodos empleados para producir un producto de alta calidad deben estar adaptados a la gente que realiza el trabajo. 6.4.alto porcentaje de contratación a terceros. etc.3. . test de aplicaciones Web. ING. etc. com. Entre los aspectos que añaden dificultad a la gestión destacamos: . ROSA IMELDA GARCIA CHI. diseño de arquitectura y navegación.net.Ingeniería Web. las actividades de ingeniería y las tareas que deben realizarse. lenguajes de programación por ejemplo java. herramientas multimedia. servidores y utilidades de servidor. VRML. lo que hace que el proceso de búsqueda y contratación de personal sea arduo.el equipo de desarrollo debe dominar aspectos tan variopintos como. 2 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.4. La formulación es una actividad de recopilación de requisitos que involucran a todos los participantes.MTI 19 .4. 6. ROSA IMELDA GARCIA CHI. 6. El análisis del negocio define el contexto empresarial-organizativo para las WebApps y otras aplicaciones de negocio. se mezclan y luego se funden en una actividad de modelado de la IWeb.5 Construcción: Las herramientas y la tecnología IWeb se aplican para construir la WebApp que se ha modelado. ING. 6. Los cambios ocurrirán frecuentemente. 6. El plan consiste de una definición de tareas y un calendario de plazos respecto al período establecido para el desarrollo del proyecto. 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.4.3 Planeación: Se crea el plan del proyecto para el incremento de la WebApp.4 Modelado: Las labores convencionales de análisis diseño de la ingeniería del software se adaptan al desarrollo de las WebApp. 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á.4.Guía Técnica 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 plazos son cortos.Ingeniería Web. eliminarse o extenderse con base en las características del problema. La retroalimentación acerca de la evaluación para realizar los procesos respectivos. Es importante destacar que las tareas asociadas con la actividad del marco de trabajo IWeb pueden modificarse. Tomar tiempo para entender las necesidades del negocio y los objetivos del producto. Figura 2 Fase de construcción de una aplicación Web.MTI 20 .4. ING.6 Despliegue: Las WebApp se configura para su ambiente operativo. el producto.4. 2006) 6.7 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. se entrega a los usuarios finales y luego comienza un período de evaluación. 6. Fuente: (PRESSMAN. incluso si los detalles de la WebApp son vagos.Guía Técnica 2013 6. el proyecto y la gente en el equipo de ingeniería Web.Ingeniería Web.5 Mejores prácticas en la Ingeniería Web. ROSA IMELDA GARCIA CHI. Guía Técnica 2013 Describir cómo interactuarán los usuarios con la WebApp aplicando un enfoque basado en escenarios. incluso si es muy breve Utilizar algún tiempo para modelar lo que se construirá. ROSA IMELDA GARCIA CHI. Desarrollar un plan del proyecto. Utilizar herramientas y tecnología que permitan construir el sistema con tantos componentes reutilizables. No apoyarse en usuarios anteriores para depurar la WebApp ING.Ingeniería Web.MTI 21 . Revisar la consistencia y calidad de los modelos. com. Alianzas estratégicas 9. ING. Resumen ejecutivo 2. Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto.1. www.1. www.scribd.com.googledocs. Competencia 5. Estrategia de marketing y ventas 10.4 Metodología Computadora con Acceso a Internet Dispositivo de almacenamiento Plataforma Moodle del IT Valles Procesador de Textos p. Descripción del producto y valor distintivo 3. Modelo de negocio y plan financiero 6. ROSA IMELDA GARCIA CHI. Word 7.Principales riesgos y estrategias de salida 7. Los puntos a considerar en un Plan de Negocios son: 1.issuu. Conformar equipo de trabajo con diversos roles 2. Mercado potencial 4.Ingeniería Web.com.Guía Técnica 2013 7 Práctica No. Descargar el formato para elaborar la fase 1 (Anexo No.net.1 Nombre de la práctica: Fase 1 Plan de Negocios para Proyecto IWeb 7. también en plataformas como www.1 Objetivo Definir el Plan de Negocios como propuesta de desarrollo de un Proyecto de Ingeniería Web.3 Material y Equipo 7. 1).slideshare.1. Estado de desarrollo y plan de implantación 8. www. Equipo directivo y organización 7. 1 7.1.2 Introducción 1.e.MTI 22 . Ingeniería Web. que se puede aplicar a la fase inicial del proyecto.1. Subirlo a la Plataforma Virtual de Aprendizaje 7.Guía Técnica 2013 3.5 Sugerencias Puedes revisar diversos materiales referentes a la elaboración de Planes de Negocios. En Ingeniería de Software se aprendió sobre el Modelado de Negocios. De la misma manera la materia de Administración de Proyectos aporta elementos para generar un Plan de Negocios bajo el esquema del PMBook.MTI 23 . Resolver cada uno de los puntos propuestos en la fase del proyecto 4. ING. Elaborarlo en formato digital 5. el cuál puede ser aplicado en esta fase del proyecto. ROSA IMELDA GARCIA CHI. Guía Técnica 2013 GUÍA TÉCNICA DE LA UNIDAD 2 Formulación y Planeación de la Ingeniería Web ING.MTI 24 .Ingeniería Web. ROSA IMELDA GARCIA CHI. Formulación y Planeación de la Ingeniería Web 8. características específicas e identificar la forma en que los usuarios finales interactuarán con las WebApp. Los clientes y los ingenieros Web quieren definir el contenido requerido.1 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? ING. ROSA IMELDA GARCIA CHI. discutir la funcionalidad específica.Ingeniería Web. todo esto es formulación y recopilación de requisitos.1.1 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.MTI 25 .Guía Técnica 2013 8 Unidad 2. 8. Definir escenarios de interacción para diferentes clases de usuarios. ING. 3.2 Recopilación de requisitos para WebApps Los objetivos globales de la recopilación de requisitos propuestos para la ingeniería de software permanecen inalterados. Identificar requisitos funcionales. 2. ROSA IMELDA GARCIA CHI. Pedir a los clientes que definan una categoría de usuario y describan cada categoría. 8. 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. Comunicarse con los clientes para definir los requisitos básicos para las WebApp. Adaptados para las WebApp. Los siguientes pasos de la recopilación de requisitos se dirigen para lograr estos objetivos 1. Analizar la información recopilada y utilizar la información para realizar un seguimiento a los clientes. dichos objetivos se convierten en: Identificar requisitos de contenido.MTI 26 . Metas aplicables: indican la habilidad para realizar alguna tarea dentro de la WebApp.1.Ingeniería Web.Guía Técnica 2013 Si tenemos una respuesta correcta a estas preguntas implican metas específicas para el sitio Web. Definir casos de uso que describan escenarios de interacción para cada clase de usuario. 4. 8. 8.MTI 27 .2 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. ROSA IMELDA GARCIA CHI.3 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. pero eso no hace que estén en lo correcto. Los plazos son cortos.Ingeniería Web.3 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. con poco o ninguna gestión explicativa? Más de un desarrollador Web optaría por poca o ninguna gestión. La creación de un equipo que se consolide no es asunto sencillo.1.Guía Técnica 2013 8. Los Actores Desarrolladores/proveedores de contenido Editores de Web Ingeniero Web Expertos en dominios empresariales Especialista en Soporte Administrador ING. los cambios son inexorables y la tecnología continúa cambiando. 4.1 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. 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. 8. ING. talento y recursos con los cuales no cuenta la empresa.4 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. lo difícil es mantener el espíritu. 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.Guía Técnica 2013 8. Las WebApp la desarrollan en casa ingenieros Web que sean empleados de la empresa.1 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. 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.3. ROSA IMELDA GARCIA CHI. 8.MTI 28 .Ingeniería Web. pero vale la pena considerar algunos lineamientos. evalúa los precios competitivos y luego elige un proveedor para efectuar el trabajo. 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. 8. el contratante debe realizar algunas tareas obligadas: Entrevistar a los clientes antiguos para determinar el profesionalismo del vendedor Web. Examinar cuidadosamente ejemplos de trabajo del subcontratista que sean similares en apariencia y sentido a la WebApp que será contratada. ROSA IMELDA GARCIA CHI. las dimensiones del cambio y las restricciones del proyecto. Determinar el nombre de ingeniero(s) Web jefe de la empresa subcontratista para buscar proyectos anteriores exitosos.2 Planeación de WebApp: Ingeniería Web en casa Los pasos siguientes se recomiendan para proyectos IWeb pequeños y de tamaño moderado. 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.MTI 29 .Guía Técnica 2013 8.4. Entender el ámbito. así como su habilidad para cumplir con compromiso de plazos y costos y su destreza para comunicarse efectivamente.1.1 Selección de los subcontratistas candidatos: Con la finalidad de elegir desarrolladores Web candidatos.4.Ingeniería Web. incrementa el rastreo del proyecto y mejora la calidad del software.6 Las peores prácticas para proyectos Web Para mayor comprensión de este punto revisar la sección 17.Ingeniería Web. 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.5 Mediación para ingeniería Web y WebApps La mediación del software ofrece una base para mejorar el proceso de software.6 del texto base. lo que aumenta la precisión de las estimaciones del proyecto. referente al tema. Las mediciones tienen tres metas principales: Proporcionar un indicador de calidad de las WebApp desde el punto de vista técnico. 8. ROSA IMELDA GARCIA CHI.Guía Técnica 2013 8.MTI 30 . definir un programa.Ingeniería Web. para la formulación y la planificación deben cohesionarse.1 Objetivo Elaborar la Formulación y Planificación de un Proyecto de Ingeniería Web La ingeniería web formula procesos bajo la necesidad subyacente de la aplicación web.2 Introducción asegurarse de que las inconsistencias y omisiones se identifiquen a tiempo.MTI 31 . 9. Word Microsoft Visio o Concept Draw o DIA ING. considerar los riesgos. y establecer mecanismos para el seguimiento del trabajo de cómo avanza la investigación.1. escritos. La Formulación y planificación de la información debe ser revisada con las partes interesadas para pero los documentos deben ser 9.3 Material y Equipo Computadora con Acceso a Internet Plataforma Moodle del IT Valles Procesador de Textos p.Guía Técnica 2013 9 Práctica No. las características y las funciones deseadas por los usuarios. y el alcance del esfuerzo de desarrollo. Desde IWeb hay un proceso ágil de los productos de trabajo. 2 9.1.1 Nombre de la práctica: Fase 2 Formulación y Planificación IWeb 9.1. ROSA IMELDA GARCIA CHI. IWeb planifica las directrices de las cosas que deben ser definidos para establecer un plan de trabajo.e. ING.issuu. Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto. www. Se sugiere el uso de herramientas de desarrollo de software como diagramadores o herramientas CASE. 2). también en plataformas como www. www.MTI 32 . Descargar el formato para elaborar la fase 2 (Anexo No. Resolver cada uno de los puntos propuestos en la fase del proyecto 4.com.googledocs.com. ROSA IMELDA GARCIA CHI.Guía Técnica 2013 9. 3.4 Metodología 1.1.net. www. los diagramas de clase.1.slideshare.com.5 Sugerencias Para elaborar la Formulación y la Planificación de un proyecto de Ingeniería Web es necesario conocer y dominar aspectos del Lenguaje Unificado de Modelado (UML) específicamente los diagramas de casos de uso. Conformar equipo de trabajo con diversos roles 2. Algunas de estas herramientas son: Microsoft Visio. Elaborarlo en formato digital 5.scribd.Ingeniería Web. Concept Draw o DIA. Subirlo a la Plataforma Virtual de Aprendizaje 9. Ingeniería Web- Guía Técnica 2013 GUÍA TÉCNICA DE LA UNIDAD 3 Modelado del Análisis de Ingeniería Web ING. ROSA IMELDA GARCIA CHI,MTI 33 Ingeniería Web- Guía Técnica 2013 10 Unidad 3. Modelado del Análisis de Ingeniería Web. 10.1 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 10.1.1 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. 10.1.2 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. 10.1.3 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 34 Ingeniería Web- Guía Técnica 2013 Puesto que el análisis y modelado de actividades son actividades iterativas. 10.2 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. 10.3 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 35 Ingeniería Web- Guía Técnica 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. 10.3.1 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. 10.3.2 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. 10.4 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 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 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 36 se modela usando un Diagrama de Estado. Puesto que las herramientas de desarrollo de la WebApp son abundantes y funcionalmente poderosas. ROSA IMELDA GARCIA CHI.4.4 Prototipo de interfaz de usuario Algunas propuestas se basan en obtener de la definición de requisitos prototipos que. 10. El diagrama de actividad se puede usar también para representar gráficamente las acciones de métodos de clases. 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. esta vez como una extensión del diagrama de estado. sin un orden prefijado.3 Diagramas de Estado El comportamiento en tiempo real de cada clase que tiene comportamiento dinámico y significativo. descripciones de acciones. Se pueden colocar etiquetas (como restricciones de tiempo.4. para mostrar los detalles de las acciones llevadas a cabo por los objetos en respuesta a eventos internos. 10. El tiempo fluye de arriba abajo. muestra los objetos participantes en la interacción y los mensajes que intercambian ordenados según su secuencia en el tiempo. permitan al usuario hacerse una idea de la estructura de la interfaz del sistema con el usuario.MTI 37 . El diagrama de actividad puede ser usado también aquí. etc. y en el eje horizontal se colocan los objetos y actores participantes en la interacción.Ingeniería Web. es mejor crear prototipos de la interfaz mediante tales herramientas.Guía Técnica 2013 10. El eje vertical representa el tiempo.4. Cada objeto o actor tiene una línea vertical. En particular. sin tener la totalidad de la funcionalidad del sistema.) bien en el margen izquierdo o bien junto a las transiciones o activaciones a las que se refieren. ING.2 Diagrama de Secuencia Un diagrama de Secuencia muestra una interacción ordenada según la secuencia temporal de eventos. y los mensajes se representan mediante flechas entre los distintos objetos. 5 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. 10. Las WebApp deben someterse a una amplia prueba de cada configuración de navegador que se especifique como parte del modelo de configuración.7 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. Por ejemplo. tanto del lado del servidor como del cliente. ROSA IMELDA GARCIA CHI. 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.Guía Técnica 2013 10. Las operaciones dentro de las clases de análisis que implementan comportamientos asociados con la clase.Ingeniería Web. un sitio Web financiero puede implementar una variedad de funciones financieras. La funcionalidad observable para el usuario comprende cualesquiera funciones de procesamiento que éste indicia directamente. se deben especificar las interfaces apropiadas. El enfoque de ARN se organiza en cinco pasos: Análisis de los participantes Análisis de los elementos ING. 10.6 El modelo de configuración Las WebApps se deben diseñar e implementar de forma que se acomoden a una diversidad de ambientes.MTI 38 . los protocolos de comunicación y la información. Se deben especificar el hardware del servidor y el ambiente del sistema operativo. 7.7. 10. los desarrolladores deben considerar requisitos de navegación globales. Sin embargo. ROSA IMELDA GARCIA CHI.Ingeniería Web. se trata solamente en las últimas fases del ciclo de vida. se puede observar que este aspecto.1 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. 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.2 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. 10. en la mayoría de las propuestas.MTI 39 . En esta etapa. analizando dichos modelos y técnicas y viendo los resultados de diferentes estudios comparativos. ING. principalmente en diseño e implementación. Los mecanismos de navegación se definen como parte del diseño.Guía Técnica 2013 Análisis de relaciones Análisis de navegación Análisis de evaluación. 11. especialistas en contenido.MTI 40 . requisitos El Modelado de Análisis de una aplicación web se centra en cuatro aspectos fundamentales del problema: contenidos interacción función configuración ING. Los análisis de modelos permiten que el equipo de ingeniería concreta Web de para los crear una de representación aplicación web.1 Nombre de la práctica: Fase 3 Modelado del Análisis de IWeb 11.1. y las partes interesadas desarrollan el modelo de análisis. Los ingenieros de red.Guía Técnica 2013 11 Práctica No.1. ROSA IMELDA GARCIA CHI.Ingeniería Web.1 Objetivo Elaborar la Fase 3 del Modelado de Análisis de la Ingeniería Web utilizando el Lenguaje de Modelado Unificado con ayuda de Herramientas de Software.2 Introducción El Análisis de aplicaciones web se centra en tres áreas: la información o contenido que se presenta las funciones del usuario final a ejecutar los comportamientos de aplicación web que se presenta en respuesta a acciones del usuario. 3 11. Ingeniería Web. Los Productos de trabajo de análisis son revisados para la corrección. ROSA IMELDA GARCIA CHI. Condiciones que favorecen el análisis de modelos Grandes o complejos WebApp ser construidos Gran número de interesados Un gran número de ingenieros Web y otros colaboradores Las metas y los objetivos de aplicación web afectará a la línea de negocios inferior Éxito aplicación web tendrá gran influencia en el éxito de la empresa Requisitos de tareas de análisis de aplicación web Formulación Identificar las metas y objetivos para la aplicación web Definir las categorías de usuarios y crear la jerarquía de usuario La recopilación de requisitos La comunicación entre el equipo Web y las partes interesadas intensifica ING.Guía Técnica 2013 El producto del trabajo de análisis de modelos IWeb es un conjunto de diagramas UML y un texto descriptivo que describe los resultados de los cuatro análisis realizados.MTI 41 . integridad y consistencia. Word Microsoft Visio o Concept Draw o DIA y requisitos funcionales se 1.e. Conformar equipo de trabajo con diversos roles 2.1.issuu.MTI 42 .com.Guía Técnica 2013 Contenido enumeran Los escenarios de interacción (casos de uso) son desarrollados 11. 3). Resolver cada uno de los puntos propuestos en la fase del proyecto 4. 3. En esta fase también se requiere el uso de herramientas de elaboración de diagramas UML. www. Elaborarlo en formato digital 5.slideshare.com. Subirlo a la Plataforma Virtual de Aprendizaje 11. www.scribd. www.3 Material y Equipo 11.googledocs.com.1. Descargar el formato para elaborar la fase 3 (Anexo No.5 Sugerencias Para esta fase de proyecto es importante haber cumplido y acreditado la fase 1 y fase 2 del proyecto.net. ING. ROSA IMELDA GARCIA CHI.4 Metodología Computadora con Acceso a Internet Plataforma Moodle del IT Valles Procesador de Textos p.Ingeniería Web. Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto. Para Modelar el Análisis se requiere de los diagramas de caso de uso y los diagramas de clase del UML generados en la fase 1 del proyecto.1. también en plataformas como www. Ingeniería Web. ROSA IMELDA GARCIA CHI.MTI 43 .Guía Técnica 2013 GUÍA TÉCNICA DE LA UNIDAD 4 Modela del Diseño de Aplicaciones Web ING. la calidad de los sitios web se ha evaluado de una manera “ad hoc”. Estas metodologías carecen sin embargo de métricas que puedan ser aplicadas a los modelos intermedios (Ej. 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. El diseño debe ser muy específico. Modelado del Diseño de Aplicaciones Web. 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.1. basada en el sentido común y en la experiencia de los desarrolladores. 12. Actualmente. hay dos vertientes de metodologías de desarrollo para la Web: la comunidad de Ingeniería de Software y la comunidad de Hipermedia. existe la gran necesidad de metodologías efectivas para la obtención de aplicaciones Web de calidad. 12.1 Temas de diseño para ingeniería Web Cuando se aplica el diseño dentro del contexto de la ingeniería Web.MTI 44 .Ingeniería Web. Modelo de Objetos. Por lo tanto.1 Diseño de calidad de una WebApp En la práctica. ROSA IMELDA GARCIA CHI.Guía Técnica 2013 12 Unidad 4. se deben considerar cuestiones tanto genéricas como específicas. MTI 45 .Guía Técnica 2013 12. En la figura 3 se muestra la pirámide de diseño de ingeniería Web. Figura 3 Modelado del Diseño IWeb. ROSA IMELDA GARCIA CHI.Ingeniería Web. contenido y tecnología. Fuente: (PRESSMAN.2 Pirámide del diseño IWEB El diseño conduce a un modelo que contiene una mezcla adecuada de estética.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 12. 2006) ING. ING.Guía Técnica 2013 12. como un hueso roto. o una discapacidad permanente. El diseño universal nos permite transitar por esos cambios y seguir disfrutando de igualdad de oportunidades. ROSA IMELDA GARCIA CHI. autodeterminación y calidad de vida. cualquiera de nosotros puede llegar a experimentar una transición física.Ingeniería Web.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. El simple proceso de envejecimiento nos lleva a ser dependientes de otros. nos veremos enfrentados al cambio.MTI 46 . 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. Ya sea una minusvalía temporal. 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.2 Qué significa: La maquetación.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. sin superposiciones o perdida de informaciones en caso de redimensionamiento (ampliación o reducción de visualización y/o de los caracteres). %.1 Pauta 3.MTI 47 . px Las unidades relativas em el tamaño (‘font-size’) de la fuente relevante H1 { margin: 0.4 de las W3C WCAG 1.Guía Técnica 2013 12. ROSA IMELDA GARCIA CHI. relacionados con los dispositivos visuales P { font-size: 14px } ING. 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. 12.Ingeniería Web.3.3. ex. em. milímetros (mm).4 Diseño hibrido Diseño que utiliza unidades de medida absolutas.4.3.3 Diseño elástico (o flexible) Diseño que utiliza cómo unidad de medida em.3. Su efecto es bloquear el tamaño de un elemento a un tamaño fijo.2 Diseño líquido (o fluido) Diseño que utiliza cómo unidad de medida el porcentaje (%). “Bloquea” la página según el prejuicio del papel.3.Ingeniería Web. centimetros (cm).3.4 ¿El diseño (más) accesible? 12. puntos (pt). 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. 12.3.Guía Técnica 2013 12.3.1 Diseño fijo A favor Los diseñadores disfrutan de un control absoluto en determinar tamaño y posicionamiento de los elementos.3. ROSA IMELDA GARCIA CHI. Favorece la legibilidad. 12.2 Diseño liquido A favor ING.3 Técnicas de diseño 12. 12.3.3.3. En contra No adapto en pantalla: no se conoce a priori las características del monitor utilizado por el usuario. Su efecto es adaptar el ancho de los elementos y su disposición en base al tamaño de texto configurado por el usuario.3.MTI 48 . 12.3. picas (pc). porcentaje y em. 12.1 Diseño fijo Diseño que utiliza dimensiones de tamaño absoluto: inches (in).4. 5 En fin.4 Diseño hibrido A favor Todo lo bueno de aporta el diseño fijo.4. ING. fluido y elástico.MTI 49 .3. en determinados diseños puede causar la comparsa de la barra de scroll horizontal: dificultad en la legibilidad.3. Evita la sobre posición de elementos. En contra ¿Hacemos una investigación? 12. Adaptación al medio.4. En contra Al aumentar el tamaño del texto. 12.Guía Técnica 2013 Presentación de más informaciones en pantalla y reducción del efecto scroll.3.Ingeniería Web. ¿cuál es diseño (más) accesible?* No hay un diseño más accesible que otro. ROSA IMELDA GARCIA CHI. 12. Se elige el tipo de diseño en base a las necesidades (proyecto).3 Diseño elástico A favor Los diseñadores “controlan” tamaño y disposición de los elementos. En contra Causa líneas de texto muy largas en caso de resoluciones de pantalla muy altas: dificultad en la lectura. 6. ROSA IMELDA GARCIA CHI.MTI 50 . 8. 7. Revisar la información contenida en el modelo de análisis y refinarla conforme se requiera. Refinar la plantilla de la interfaz y los bosquejos con el uso de entradas desde el diseño estético. 4.3. 3. 9.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. 10. Refinar y revisar el modelo de diseño de la interfaz. Desarrollar una representación del comportamiento de la interfaz. 5.4 Diseño estético ING. 11.Guía Técnica 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. 12. Describir la plantilla de la interfaz par a cada estado. Elaborar bosquejos con imágenes de la pantalla para cada acción de la interfaz. Desarrollar una representación de procedimiento de la interacción del usuario con la interfaz. 1. Correlacionar los objetivos del usuario con acciones específicas de la interfaz.Ingeniería Web. Definir un conjunto de tareas de usuario que estén asociadas con cada acción. Identificar los objetos de la interfaz del usuario que se requieren para implementarla. 12. Desarrollar un bosquejo aproximado de la plantilla de la interfaz de la WebApp. 2. 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. ROSA IMELDA GARCIA CHI.6 Diseño arquitectónico El diseño arquitectónico está enlazado con las metas establecidas para la WebApp. La arquitectura de contenido se basa en la forma en que los objetos de contenido se estructuran para su presentación y navegación. 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. 12. 12. Sin él una WebApp puede ser funcional.1 Objetos de contenido La relación entre objetos de contenido. pero sin atractivo. 12. cada uno lo abordan individuos con distintos conjuntos de habilidades. 12. también llamado diseño gráfico.1 Arquitectura de contenido Se centra en la definición de la estructura hipermedia global de la WebApp.6. es un esfuerzo artístico que complementa los aspectos técnicos de la ingeniería Web. los usuarios que la vistan y la filosofía de navegación que se establezca. el contenido que se presentará.5 Diseño de contenido El diseño de contenido se enfoca en dos asuntos de diseño diferentes.MTI 51 . 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.Guía Técnica 2013 El diseño estético. El diseño se puede elegir de cuatro diferentes estructuras de contenido: Estructuras lineales ING.5.Ingeniería Web. Guía Técnica 2013 Estructuras en retícula Las estructuras jerárquicas La estructura en red.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. 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. 12. una FdN identifica los nodos de navegación y los vínculos que permiten la navegación entre ellos. 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.2 Sintaxis de navegación Conforme el diseño se lleva a cabo se define la mecánica de navegación.7.MTI 52 .7.1 Semántica de navegación Durante las etapas iniciales del diseño. Como se anotó anteriormente. ROSA IMELDA GARCIA CHI.Ingeniería Web. 12. de navegación se valora la arquitectura de contenido de la WebApp para determinar una o más FdN para cada caso de uso. 12. no contienen una buena abstracción capaz de facilitar la tarea de especificar aplicaciones hipermedia. no sólo se necesita especificar cuáles son los objetos de la interfaz que deberían ser implementados. de aquellas relacionadas con el modelo del dominio. sino también la manera en la cual estos objetos interactuarán con el resto de la aplicación. la complejidad y el número de aplicaciones crecen en forma acelerada en la actualidad. la navegación posee algunos problemas. o las metodologías para sistemas de desarrollo de información. Construir la interfaz de una aplicación web es también una tarea compleja. la navegación y el comportamiento funcional de la aplicación deberían ser integrados. 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. En hipermedia existen requerimientos que deben ser satisfechos en un entorno de desarrollo unificado. es una tarea muy difícil de lograr. En primer lugar. Si el usuario entiende dónde puede ir y cómo llegar al lugar deseado.MTI 53 . Una estructura de navegación robusta es una de las claves del éxito en las aplicaciones hipermedia. ROSA IMELDA GARCIA CHI.8 Método de diseño hipermedia orientado a objetos (MDHOO) Las metodologías tradicionales de ingeniería de software.Ingeniería Web.Guía Técnica 2013 12. Por un lado. mientras ejecuta transacciones sobre bases de información. Producir aplicaciones en las cuales el usuario pueda aprovechar el potencial del paradigma de la navegación de sitios web. diseño navegacional. El tamaño. OOHDM propone el desarrollo de aplicaciones hipermedia a través de un proceso compuesto por cuatro etapas: diseño conceptual. diseño de interfaces abstractas e implementación. por lo cual una metodología de diseño sistemática es necesaria para disminuir la complejidad y admitir evolución y reusabilidad. ING. es una buena señal de que la aplicación ha sido bien diseñada. Por otro lado. En OOHDM. De este modo.8. ROSA IMELDA GARCIA CHI. Cada modelo navegacional provee una vista subjetiva del diseño conceptual. relaciones y subsistemas. en los casos en que la información base pueda cambiar dinámicamente o se intenten ejecutar cálculos complejos.MTI 54 .1 Diseño Conceptual Durante esta actividad se construye un esquema conceptual representado por los objetos del dominio. admitiendo la construcción de modelos diferentes de acuerdo con los diferentes perfiles de usuarios. Sin embargo.Ingeniería Web. En las aplicaciones hipermedia convencionales. la navegación es considerada un paso crítico en el diseño aplicaciones.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. 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). cuyos componentes de hipermedia no son modificados durante la ejecución. Las clases son usadas durante el diseño navegacional para derivar nodos.Guía Técnica 2013 12. se podría usar un modelo de datos semántico estructural (como el modelo de entidades y relaciones). se necesitará enriquecer el comportamiento del modelo de objetos. las relaciones y colaboraciones existentes establecidas entre ellos. El esquema de las clases consiste en un conjunto de clases conectadas por relaciones. y las relaciones que son usadas para construir enlaces. utilizando un simple modelo de datos de hipermedia. Un modelo navegacional es construido como una vista sobre un diseño conceptual. Los objetos son instancias de las clases. 12. el esquema conceptual está construido por clases. En OOHDM. ING. Las clases son descritas como en los modelos orientados a objetos tradicionales.8. 12. Un contexto navegacional es un conjunto de nodos.8. Pueden ser definidos por comprensión o extensión. y otros contextos navegacionales (contextos anidados). enlaces y estructuras de acceso. Los contextos navegacionales juegan un rol similar a las colecciones y fueron inspirados sobre el concepto de contextos anidados. En OOHDM existe un conjunto de tipos predefinidos de clases navegacionales: Nodos. se deben especificar los aspectos de interfaz. La principal estructura primitiva del espacio navegacional es la noción de contexto navegacional. cómo los objetos de interfaz activarán la navegación y el resto de la funcionalidad de la aplicación.Guía Técnica 2013 El diseño de navegación es expresado en dos esquemas: el esquema de clases navegacionales y el esquema de contextos navegacionales. tales como índices o recorridos guiados. así como métodos (comportamiento) cuando se navega en un particular contexto. o por enumeración de sus miembros. clases de contextos. 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. Esto significa definir la forma en la cual los objetos navegacionales pueden aparecer.Ingeniería Web. Los nodos son enriquecidos con un conjunto de clases especiales que permiten de un nodo observar y presentar atributos (incluidos las anclas).MTI 55 . ROSA IMELDA GARCIA CHI. enlaces. y las estructuras de acceso. representan los posibles caminos de acceso a los nodos. ING.3 Diseño de Interfaz Abstracta Una vez que las estructuras navegacionales son definidas. La semántica de los nodos y los enlaces son las tradicionales de las aplicaciones hipermedia. qué transformaciones de la interfaz son pertinentes y cuándo es necesario realizarlas. 4 Implementación En esta fase.Ingeniería Web. dejando un alto grado de independencia de la tecnología de interfaz de usuario.8. el diseñador debe decidir además qué información debe ser almacenada. En OOHDM se utiliza el diseño de interfaz abstracta para describir la interfaz del usuario de la aplicación de hipermedia. decidir qué interfaz debería ver y cómo debería comportarse. Hasta ahora. Debe identificar también. y la disposición de las propiedades de las ADVs en la pantalla real son hechas en la fase de implementación. cómo son organizados los ítems de acuerdo con el perfil del usuario y su tarea. ING. en esta fase es tenido en cuenta el entorno particular en el cual se va a correr la aplicación. todos los modelos fueron construidos en forma independiente de la plataforma de implementación. 12. el diseñador debe implementar el diseño. pero la apariencia física real o de los atributos.MTI 56 .Guía Técnica 2013 Una clara separación entre diseño navegacional y diseño de interfaz abstracta permite construir diferentes interfaces para el mismo modelo navegacional. A fin de implementar todo en un entorno Web. ROSA IMELDA GARCIA CHI. El modelo de interfaz ADVs (Vista de Datos Abstracta) especifica la organización y comportamiento de la interfaz. el primer paso que debe realizar el diseñador es definir los ítems de información que son parte del dominio del problema. 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. Al llegar a esta fase. Guía Técnica 2013 13 Práctica No. 4 13. la calidad de los sitios web se ha evaluado de una manera “ad hoc”. existe la gran necesidad de metodologías efectivas para la obtención de aplicaciones Web de calidad.1 Objetivo Desarrollar el Modelado del Diseño de la aplicación Web que ha estado resolviendo desde la Fase 1.1. 13. 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.MTI 13.2 Introducción 57 .Ingeniería Web. Estas metodologías carecen sin embargo de métricas que puedan ser aplicadas a los modelos intermedios (Ej. Cuando se aplica el diseño dentro del contexto de la ingeniería Web. ROSA IMELDA GARCIA CHI. hay dos vertientes de metodologías de desarrollo para la Web: la comunidad de Ingeniería de Software y la comunidad de Hipermedia. basada en el sentido común y en la experiencia de los desarrolladores. Actualmente. El diseño debe ser muy específico.1 Nombre de la práctica: Fase 4: Modelado del Diseño de IWeb 13. Por lo tanto. Modelo Navegacional) utilizados en el proceso de desarrollo orientado a la Web. Word Microsoft Visio o Concept Draw o DIA ING.3 Material y Equipo Computadora con Acceso a Internet Plataforma Moodle del IT Valles Procesador de Textos p. se deben considerar cuestiones tanto genéricas como específicas.1.1. Modelo de Objetos. Diseño de calidad de una WebApp En la práctica.e. Ingeniería Web. 13. ya que podrás ver tu creación en internet.1&1.Guía Técnica 2013 www. www. Descargar el formato para elaborar la fase 4 (Anexo No.mipaginawebgratis.scribd.tl . también en plataformas como www.googledocs. Generar la página Web en algunas de las herramientas de la web o herramientas de desarrollo de páginas web 6. www.5 Sugerencias Es recomendable que utilices las herramientas de desarrollo de páginas web que están disponibles en la Web de manera gratuita. ING. Se encuentra disponible en la plataforma virtual de aprendizaje del Instituto.mx . Resolver cada uno de los puntos propuestos en la fase del proyecto 4.mex.com.MTI 58 . Subirlo a la Plataforma Virtual de Aprendizaje 13. www.net. 3.com.1.com. Conformar equipo de trabajo con diversos roles 2. entre otras páginas que permitan el diseño de la página web.es. www.slideshare. www.issuu. Elaborarlo en formato digital 5.4 Metodología Herramientas de diseño de páginas web 1.1. ROSA IMELDA GARCIA CHI. 4). ROSA IMELDA GARCIA CHI.Guía Técnica 2013 GUÍA TÉCNICA DE LA UNIDAD 5 Pruebas para Ingeniería Web ING.MTI 59 .Ingeniería Web. 1. ROSA IMELDA GARCIA CHI. 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.Ingeniería Web. La facilidad de uso se prueba para garantizar que a cada categoría de usuario la soporta la interfaz.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 ingeniería Web.Guía Técnica 2013 14 Unidad 5. ING.MTI 60 . *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. 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. Pruebas para IWeb 14. La estructura se valora para asegurarse de que entrega adecuadamente contenido y función de la WebApp.1 Dimensiones de calidad La calidad se incorpora en una aplicación Web como consecuencia de un buen diseño. 14. 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 capacidad y la seguridad de la WebApp. La compatibilidad se prueba al ejecutar las WebApp en varias configuraciones huésped. ING. el desempeño. 14.2 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 facilidad de uso. Los ingenieros Web y otros participantes del proyecto (gerentes.Ingeniería Web. Se revisa el modelado de contenido de la WebApp para descubrir errores. configuraciones y cargas para asegurar que el sistema responde a la interacción del usuario. la función. Se revisa el modelo de la interfaz para asegurarse que todos los casos 14.MTI 61 . ROSA IMELDA GARCIA CHI. la navegabilidad. La seguridad se prueba al valorar las vulnerabilidades potenciales e intentar explotar cada una de ellas. usuarios finales) toman parte en el proceso de probar WebApp. mediante la aplicación de una estrategia de prueba que abarca tanto revisiones como pruebas ejecutables.2 Estratégicas de prueba Las estrategias para probar una WebApp adoptan los principios básicos para todas las pruebas de software.1. La interoperabilidad se prueba para asegurar que la WebApp realiza interfaces adecuadas. 2. Esto se logra a lo largo de todo el proceso de ingeniería Web.Guía Técnica 2013 *El desempeño se prueba en una diversidad de condiciones operativas. 1. clientes. la prueba de la WebApp es una actividad de seguimiento que dirige el equipo de soporte Web. los ingenieros de la Web deben trabajar para eliminar tantos errores como sea posible antes que la WebApp esté en línea.Guía Técnica 2013 Si los usuarios finales encuentran errores que afecten su confianza en la WebApp. En algunos casos se produce un plan de prueba de la WebApp.MTI 62 . y la WebApp fracasará. si se ha establecido un plan de prueba. puede verificarse para asegurar que se han realizado todas las pruebas planeadas. desempeño y prueba de seguridad. puede tenerse la seguridad de que la puesta en prueba ha descubierto errores ( y que éstos se han corregido). interfaz. 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. se irán a cualquier otra parte por el contenido y la función que necesitan. que utiliza pruebas de regresión derivadas de las pruebas desarrolladas cuando la WebApp se sometió a ingeniería por primera ocasión. ROSA IMELDA GARCIA CHI. La prueba consta de siete etapas: contenido. 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. Puesto que muchas WebApps evolucionan continuamente. Además. navegación. configuración. Por esta razón. Aunque nunca se puede estar seguro de que han llevado a cabo todas las pruebas que se necesitan. ING. componente.Ingeniería Web. 2.1 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.Ingeniería Web.MTI 63 .Guía Técnica 2013 14. ROSA IMELDA GARCIA CHI. Guía Técnica 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.Ingeniería Web.MTI 64 . ROSA IMELDA GARCIA CHI. adopta los principios básicos para todas las pruebas de software y aplica una estrategia y las tácticas que se recomendaron respecto de los sistemas orientados a objetos como se indica a continuación: Revisión del modelo de contenido de la WebApp en busca de errores Revisión del modelo de la interfaz asegurándose que todos los casos de uso pueden acomodarse Revisión del modelo de diseño de la WebApp en busca de errores de navegación Se prueba la interfaz de usuario para descubrir errores en la presentación o los mecanismos de navegación.1 Objetivo Aplicar todo el proceso de pruebas a la Página Web desarrollada mostrando evidencia de la aplicación en un documento digital. con la compatibilidad. 5 15. ING.2 Introducción La estrategia para probar una WebApp.1 Nombre de la práctica: Fase 5 Aplicación de Pruebas IWeb 15. confiabilidad y desempeño de la WebApp.1. Se prueba la WebApp en una población controlada y monitoreada de usuarios finales buscando errores relacionados con la facilidad de uso.1. 15. Componentes funcionales seleccionados se prueban en forma individual.Ingeniería Web. Se llevan a cabo pruebas de desempeño.Guía Técnica 2013 15 Práctica No. ROSA IMELDA GARCIA CHI.MTI 65 . Ingeniería Web. Las pruebas no se pueden aplicar si no está terminada la página Web.e.MTI 66 .1.4 Metodología Computadora con Acceso a Internet Navegadores Diversos dispositivos para accesar a la página Plataforma Moodle del IT Valles Procesador de Textos p.5 Sugerencias Es necesario que todo el equipo participe en la prueba de la página web. ROSA IMELDA GARCIA CHI. 15. Entregar en la plataforma virtual el documento de pruebas. Cargar la página Web que desarrollaron 4.3 Material y Equipo 15. Documentar y agregar evidencia de las pruebas aplicadas 6. Conformar equipo de trabajo 2.1.1. Word 1.Guía Técnica 2013 15. Tener diversos dispositivos con acceso a internet 3. Aplicar cada una de las pruebas de IWeb 5. ING. MTI 67 .Ingeniería Web. ROSA IMELDA GARCIA CHI.Guía Técnica 2013 FORMATO FASES DE PROYECTO IWEB Documento Integrador ING. Ingeniería Web. ING. Formato Fase 1 Proyecto IWeb.MTI 68 .Guía Técnica 2013 16 Anexo No. 1. ROSA IMELDA GARCIA CHI. ROSA IMELDA GARCIA CHI.MTI 69 .Guía Técnica 2013 ING.Ingeniería Web. ING.Guía Técnica 2013 17 Anexo No. Formato Fase 2 Proyecto IWeb. ROSA IMELDA GARCIA CHI.Ingeniería Web. 2.MTI 70 . ROSA IMELDA GARCIA CHI.Ingeniería Web.Guía Técnica 2013 ING.MTI 71 . Guía Técnica 2013 ING. ROSA IMELDA GARCIA CHI.MTI 72 .Ingeniería Web. Ingeniería Web.MTI 73 .Guía Técnica 2013 ING. ROSA IMELDA GARCIA CHI. Guía Técnica 2013 ING.MTI 74 .Ingeniería Web. ROSA IMELDA GARCIA CHI. Ingeniería Web.Guía Técnica 2013 ING. ROSA IMELDA GARCIA CHI.MTI 75 . Guía Técnica 2013 18 Anexo No. 3. Formato Fase 3 Proyecto IWeb.Ingeniería Web. ING.MTI 76 . ROSA IMELDA GARCIA CHI. MTI 77 . ROSA IMELDA GARCIA CHI.Ingeniería Web.Guía Técnica 2013 ING. ING. 4.MTI 78 . Formato Fase 4 Proyecto IWeb. ROSA IMELDA GARCIA CHI.Ingeniería Web.Guía Técnica 2013 19 Anexo No. ROSA IMELDA GARCIA CHI.Ingeniería Web.MTI 79 .Guía Técnica 2013 ING. Formato Fase 5 Proyecto IWeb. ROSA IMELDA GARCIA CHI. ING.Guía Técnica 2013 20 Anexo No.Ingeniería Web. 5.MTI 80 . Guía Técnica 2013 ING.Ingeniería Web.MTI 81 . ROSA IMELDA GARCIA CHI. Guía Técnica 2013 ING.Ingeniería Web. ROSA IMELDA GARCIA CHI.MTI 82 . . García Molina. 9. J. Ingeniería Web: E-learning.B. Moreira. G. et al. Grady. UML gota a gota. 11. SCOTT. UML 2.. 25(3): p.. G.Ingeniería Web. Ingeniería de la Web y Patrones de Diseño. 67. 2011(5): p. and K. Fowler..A. Gestión del proceso software. 10. Fuente. ING. 2010. 7. El lenguaje unificado de modelado...J. 4. Identificación de Procesos de Negocio. Novática: Revista de la Asociación de Técnicos de Informática. Scott. 1999: Pearson Educación. Successful software process improvement.J.. I. 2005: p. R. Cuevas. 2002. J. ROSA IMELDA GARCIA CHI. A. 2. and I. Programación.. 2006. A. Llorens. 5. 1620.. Arlow.. 2005. 4-5. and J.M. 6 pág. Fuentes. and A. Guevera. Génova. Cultura Científica. R. J. A. G. 6. Hernández González.MTI 83 . Rossi. 1999: Addison Wesley Madrid. 2004(168): p. et al. G. 3. M. Booch.. I Jornadas de Innovación Docente de la EUITIO. Cuevas Agustín.. El libro Azul de la Ingeniería en Informática: una alternativa al Libro Blanco. 1997: Prentice Hall PTR.Guía Técnica 2013 21 Bibliografía 1. 8. Neustad. Anaya Multimedia-Anaya Interactiva. Ingeniería Industrial. Evaluación de herramientas CASE para UML. UML: el lenguaje estándar para el modelado de software. . Análisis y diseño de sistemas.S. 1992: México: McGraw Hill. W. J.A. Agile web development with rails. Ingeniería del software. 2005: Pearson Educación. 16.M. O. Introducción al Proceso Software Personal (PSP). 13. Senn. 15. 6ta edicion. Sommerville. Mercer. Grady Booch. 2001: Addison–Wesley. I. Pressman. ROSA IMELDA GARCIA CHI. Troya.S. 2002.Guía Técnica 2013 12.. D. et al. 14. OOWS: Una aproximación para el Modelado Conceptual de Aplicaciones Web. 18. and D. and I. Humphrey. Rumbaugh. J. and J.MTI 84 . 2006: McGraw Hill. ING. The Unified Modeling Language Reference Manual (The Addison-Wesley Object Technology Series). Pastor.. 2001.. 17. Thomas. Ingeniería del software: Un enfoque práctico. 2005: Pragmatic bookshelf New York. R. Jacobson.Ingeniería Web.