Documentos de Académico
Documentos de Profesional
Documentos de Cultura
Guia Tecnica de Ingenieria Web
Guia Tecnica de Ingenieria Web
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
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
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
ii
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
iii
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
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.
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.
10
11
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.
12
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.
13
14
15
16
17
18
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.
19
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.
20
21
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,
22
23
24
25
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.
26
27
28
29
30
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
31
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.
32
33
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
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.
35
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
37
38
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.
39
requisitos
El Modelado de Anlisis de una aplicacin web se centra en cuatro aspectos fundamentales del
40
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
41
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.
42
43
44
45
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
47
48
49
50
51
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
52
53
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.
54
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.
55
56
13.1.2 Introduccin
57
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.
58
59
60
61
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.
62
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:
63
64
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.
65
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.
66
Documento Integrador
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84