AyD Sitio Web Educativo

PATRONES DE DISEO ORIENTADO A OBJETOS DE SITIOS WEB
EDUCATIVOS
NDICE GENERAL. CAPTULO I INTRODUCCIN 1.1.- Planteamiento del problema 1.2.- Propuesta de solucin 1.3.- Metodologa 1.4.- Objetivos 1.5.- Justificacin CAPTULO II MARCO TERICO 2.1.- Pginas web 2.2.- Modelacin 2.3.- UML 2.4.- Extensin de UML para aplicaciones web 2.5.- El modelo educativo del ITESM CAPTULO III ANLISIS 3.1.- Requerimientos del sitio 3.2.- Definicin de actores 3.3.- Casos de uso 3.3.1.- Caso de uso: Mostrar informacin 3.3.1.1.- Caso de uso: Mostrar pgina principal 3.3.1.2.- Caso de uso: Mostrar introduccin 3.3.1.3.- Caso de uso: Mostrar intenciones 3.3.1.4.- Caso de uso: Mostrar objetivo 3.3.1.5.- Caso de uso: Mostrar contenido 3.3.1.6.- Caso de uso: Mostrar mapa 3.3.1.7.- Caso de uso: Mostrar estrategia 3.3.1.8.- Caso de uso: Mostrar expectativas 3.3.1.9.- Caso de uso: Mostrar bibliografa 3.3.1.10.- Caso de uso: Mostrar auxiliares 3.3.1.11.- Caso de uso: Mostrar criterios 3.3.1.12.- Caso de uso: Mostrar documentacin didctica 3.3.1.13.- Caso de uso: Consultar promedios 3.3.2.- Casos de uso: Actualizar informacin 3.3.2.1.- Caso de uso: Registrar maestro 3.3.2.2.- Caso de uso: Descargar archivos 3.3.2.3.- Caso de uso: Actualizar archivos 3.3.3.- Casos de uso: Contestar exmenes en lnea 3.3.3.1.- Caso de uso: Registrar alumno 1 1 2 2 4 4 5 5 11 12 22 28 31 31 34 34 35 36 36 37 37 37 37 37 37 37 38 38 38 38 38 39 39 40 41 41 i
3.3.3.2.- Caso de uso: Realizar examen 3.4.- Navegacin del sitio 3.5.- Diagramas de secuencia CAPTULO IV DISEO 4.1.- Diagrama de clases 4.2.- Patrones de diseo 4.3.- Diagramas de navegacin 4.3.1.- Diagramas de navegacin: Funcionalidad 4.4.- Diagrama de componentes CONCLUSIONES GLOSARIO REFERENCIAS
41 42 44 49 49 50 54 57 60 61 64 73
ii
NDICE DE FIGURAS
iii
Figura 2.1 Figura 2.2 Figura 2.3 Figura 2.4 Figura 2.5 Figura 2.6 Figura 2.7 Figura 2.8 Figura 2.9 Figura 2.10 Figura 2.11 Figura 2.12 Figura 3.1 Figura 3.2 Figura 3.3 Figura 3.4 Figura 3.5 Figura 3.6 Figura 3.7 Figura 3.8 Figura 3.9 Figura 3.10 Figura 3.11 Figura 3.12 Figura 3.13 Figura 3.14 Figura 4.1 Figura 4.2 Figura 4.3
Ejemplo de hipervnculos Origen del UML Diagrama de actividad Actores Diagrama de casos de uso Diagrama de secuencia Diagrama de colaboracin Clases Diagrama de clases Diagrama de componentes Diagrama de despliegue Ejemplo de estereotipos web Jerarqua de actores Caso de uso Mostrar informacin Caso de uso Mostrar informacin detallado Casos de uso de la seccin Actualizar informacin Casos de uso de la seccin Contestar examen en lnea Organizacin bsica del sitio Diagrama de secuencia del sitio para el caso de uso Mostrar informacin Diagrama de secuencia del sitio para el caso de uso Mostrar pgina principal Diagrama de secuencia del sitio para el caso de uso Registrar maestro Diagrama de secuencia del sitio para el caso de uso Descargar archivos Diagrama de secuencia del sitio para el caso de uso Actualizar archivos Diagrama de secuencia del sitio para el caso de uso Registrar alumno Diagrama de secuencia del sitio para el caso de uso Realizar examen Diagrama de secuencia del sitio para el caso de uso Realizar examen curso alterno Diagrama de clases Patrn del sitio web educativo Patrn de la seccin de acceso docentes
6 13 13 14 15 16 16 17 18 19 20 21 34 35 35 40 42 43 44 45 45 46 46 47 47 48 50 51 51 iv
Figura 4.4 Figura 4.5 Figura 4.6 Figura 4.7 Figura 4.8 Figura 4.9 Figura 4.10 Figura 4.11 Figura 4.12 Figura 4.13 Figura 4.14 Figura 4.15 Figura 4.16
Patrn de la seccin de acceso alumnos Pgina inicial Pginas de contenido Pgina de docentes registrados Pgina de alumnos registrados Pgina de exmenes Diagrama de navegacin del sitio (principal) Diagrama de navegacin del sitio (alumnos) Diagrama de navegacin del sitio (maestros) Diagrama de funcionalidad: mostrar informacin Diagrama de funcionalidad: generar examen Diagrama de funcionalidad: actualizar informacin Diagrama de componentes
52 52 53 53 54 54 55 56 56 57 58 59 60
NDICE DE TABLAS Tabla 2.1 Tabla 2.2 Tabla 3.1 Combinaciones de estereotipos Modelo educativo del ITESM Actividades que se deben realizaren el sitio 27 30 33
CAPITULO I: INTRODUCCIN
La intencin de este capitulo es dar a conocer las generalidades del proyecto de titulacin, como lo es una descripcin clara del problema, la propuesta de solucin que ofrecemos y la metodologa que usaremos para lograr los objetivos, mismos que tambin se encuentran descritos en este mismo capitulo. Tambin incluimos una breve justificacin de este trabajo, que describe los beneficios que esperamos lograr tanto para el usuario final del proyecto como para nosotros como estudiantes. 1.1.- Planteamiento del problema Durante el transcurso del 2003, estuvimos en contacto con el departamento de Sistemas de Informacin del Instituto Tecnolgico y de Estudios Superiores de Monterrey campus Estado de Mxico (ITESM-CEM) y pudimos conocer a grandes rasgos el modelo educativo que se maneja en dicha institucin. Este modelo, propuesto en la Misin ITESM2005 cambia el esquema tradicional en dos aspectos fundamentales: el primero para convertirlo de un proceso centrado en la enseanza, en un proceso centrado en el aprendizaje; y el segundo, para desarrollar de una manera estructurada y programada habilidades, actitudes y valores1.
ITESM, Hacia un Nuevo modelo educativo, http://www.itesm.mx/va/nuevmod/NMod. html.
Captulo I: Introduccin
El problema en el cual se centra nuestro proyecto es que no todas las pginas educativas que actualmente se utilizan en el CEM cuentan con patrones de diseo uniformes y principalmente que no se estn cubriendo todos los requerimientos deseados. Tambin observamos que no se cuenta con una documentacin que pueda ser til al momento de actualizar los sitios o darles mantenimiento. 1.2.- Propuesta de solucin A finales del 2003 nos fue ofrecida la oportunidad de solucionar el problema, para lo cual, nuestro proyecto ofrece como solucin una documentacin del anlisis y el diseo de un sitio web de uno de los cursos rediseados del CEM 2 que contenga el anlisis de requerimientos de las pginas, la modelacin de sus componentes y los patrones de diseo. 1.3.- Metodologa En el 2001 Steve Franklin [5] propuso dos fases principales para la modelacin de un sitio web, las cuales son: La fase de planeacin o Conocer a los usuarios y el papel que juegan: Es importante conocer a los diversos tipos de usuarios que estn obrando recprocamente con su sistema, categorizndolos y entendiendo sus necesidades. o Definir los requerimientos de la aplicacin o aplicaciones: Se necesita convenir en lo que se est intentando construir antes de que se d inicio al proyecto, se debe tener tiempo para bosquejar algunos diagramas y para anotar algunas notas sobre los servicios que el sitio ofrecer. o Planear las pantallas y su organizacin: Mientras se trabaja en los casos de uso se pueden tener algunas pistas sobre las pantallas que el sitio requerir, esto ayudara a bosquejar superficialmente la estructura del sitio a crear. o Escoger las herramientas a utilizar: Escoger las herramientas y las tecnologas es algo muy simple para los sitios pequeos, sin embargo, los sitios ms grandes de la red requieren evaluar y probar sus herramientas de manera rigurosa antes de invertir en ellas tiempo y esfuerzo.
2
Trejo, R., Computacin II, http://webdia.cem.itesm.mx/ac/rtrejo/CompuII/Index.htm.
La fase de diseo o Disear pensando a futuro: El principal beneficio de llevar un diseo del sistema es la capacidad de reutilizar el cdigo, as como la estructura y organizacin de un sitio web al momento de realizar otro sitio similar que requiera la misma arquitectura. o Modelar la ejecucin del sistema: La idea es modelar cmo es que va a funcionar el sistema al momento de ejecutarlo para visualizar los aspectos dinmicos del sistema. Se pueden realizar diagramas para los diferentes escenarios que pudieran presentarse y definir un patrn general del cdigo. o Planear para la distribucin: Al diagramar la distribucin del sitio se puede tener una mejor visin de la arquitectura de la organizacin de los archivos. Aunque el uso de estos diagramas va a depender de la complejidad del sitio. Para la elaboracin de los diagramas, la herramienta que hemos decidido usar es
UML ya que ste es considerado como un lenguaje de modelacin estandarizado para especificar, visualizar, construir y documentar todos los elementos de un sistema de software [11] y con su capacidad de extensin que permite modelar nuevas entidades, de modo tal, que las organizaciones puedan a su vez evolucionar y ser de mayor capacidad de respuesta, nivelando el surgimiento de nuevas ideas y de su modelacin [1]. En 1999, Jim Conallen [4], consultor de Rational, propone una extensin para la modelacin de aplicaciones web con UML, que mediante el uso de estereotipos modela el comportamiento de un sitio. Booch, Rumbaugh y Jacobson consideran que el desarrollar un modelo de un sistema de software antes de su elaboracin o renovacin, es tan importante como disear los planos de un edificio antes de su construccin [2]. Un buen modelo es esencial para una buena comunicacin entre los miembros de un equipo de desarrollo y as asegurarse de llegar a obtener un buen producto. Daniel Sholler considera que aunque sea imposible disear hasta el mnimo detalle de alguna aplicacin futura, las organizaciones deberan planear los patrones de interaccin de las aplicaciones y relacionarlas con las herramientas y tecnologas apropiadas [14].
1.4.- Objetivos Documentacin del anlisis de requerimientos de las paginas de un curso rediseado del sistema ITESM. Realizar una modelacin orientada a objetos de los componentes lgicos de las pginas del curso. Desarrollar patrones de diseo a partir del modelo propuesto para el desarrollo de las pginas de otros cursos rediseados. 1.5.- Justificacin Los sitios web educativos actuales del ITESM han sido desarrollados cada uno de manera aislada e independiente y con el modelo a proponer en este proyecto se puede lograr un mejor aprovechamiento de los recursos, as como una reduccin de tiempo para la actualizacin y mantenimiento de tales sitios. Este proyecto, nos permitir a nosotros, como estudiantes y futuros ingenieros conocer y aplicar nuevas herramientas de modelacin y a darle a sta la importancia necesaria con respecto al papel que desempea en el proceso de desarrollo de software.
CAPITULO II: MARCO TERICO

El presente captulo est dedicado a ayudar en el anlisis y diseo de sitios web educativos para el Departamento de Sistemas de Informacin del ITESM-CEM. Considerando que lo que se desea modelar es un sitio web, es importante brindar una breve sntesis de la importancia de los sitios web en la actualidad as como algunos temas importantes de importancia para el desarrollo de sitios web. En este capitulo tambin incluye una descripcin de las herramientas necesarias para lograr la modelacin del sitio. 2.1.- PGINAS WEB La World Wide Web (WWW) puede ser considerada como una enorme biblioteca en la Internet, donde los "sitios" web son los libros de esa gran biblioteca y las "pginas" web son las pginas que constituyen los libros. As podemos deducir que a un grupo de pginas web se le denomina como un sitio web. Una "pgina principal" es el punto de inicio de un sitio web, sera el equivalente a la cubierta o el ndice de un libro; Cada pgina web, incluida la pgina principal, tiene una direccin exclusiva llamada URL (Universal Resource Locator) con el cual las pginas se pueden interconectar en la web. La conexin a otras pginas se efecta haciendo clic sobre texto o grficos llamados hipervnculos. Los hipervnculos son palabras y grficos subrayados o con un recuadro, que tienen direcciones de web (tambin llamadas direcciones URL) incrustadas. Al hacer clic en un hipervnculo, se salta a una pgina de un determinado sitio web, los hipervnculos pueden diferenciarse fcilmente, ya que por lo general aparecen en un color distinto al resto del texto del sitio web. (Figura 2.1).
Captulo II: Marco Terico
Figura 2.1.- Ejemplo de hipervnculos.
El desarrollo de sitios web se basa en el lenguaje Html ( HyperText Markup Languaje), todos los sitios web contienen este lenguaje, incluso los programados con otras tecnologas (como ASP, PHP, etc.) que devuelven al navegador cdigo html puro, para que este lo interprete y lo muestre al usuario. Una forma comn de construir un sitio web es mediante un editor visual como Frontpage o Dreamweaver, los cuales facilitan la construccin del sitio, ya que aparte de poder ver y editar el cdigo html, tambin se puede ver y editar en una forma visual, en otras palabras: un editor visual nos permite realizar la pgina tal como la veremos en el navegador. Otra forma es escribiendo directamente el cdigo HTML en un editor de texto plano. Esta forma la utilizan los desarrolladores de sitios web ms avanzados, ya que es mucho ms posible que funcione de manera correcta. Los llamados editores visuales a veces pueden cambiar parte del cdigo, o agregar elementos que funcionan solamente en algunos navegadores, Igualmente, existen editores html que permiten escribir el cdigo de una manera ms fcil y cmoda. Una buena forma de empezar a desarrollar sitios web, es leer tutoriales, practicar, probar y comprender lo que el sitio nos quiere explicar o exponer. Tambin es aconsejable participar en los foros de discusin del tema que tenemos dudas, como puede ser el lenguaje html, o FrontPage, o dudas sobre como publicar un sitio. Ya que de esta forma obtendremos varias respuestas a una pregunta, con lo cual podremos informarnos mejor. [9]. Para subir un sitio se puede utilizar un servidor que tenga presencia en Internet, el cual es ms comnmente llamado hosting, en donde podremos alojar los archivos correspondientes a nuestro sitio, ya sean documentos tipo html, imgenes jpg gif y archivos Captulo II: Marco Terico 6
para que los visitantes al sitio puedan descargar tales como archivos zip, exe, etc. Hay dos tipos de hosting, los que son gratis, y aquellos que son de paga. Los pagados presentan mucha eficacia, confiabilidad y velocidad, mientras que los gratuitos nos incluyen publicidad (algunos) y suelen ser ms lentos e incluso, en ocasiones, estn fuera de servicio. Para poder subir los archivos arriba mencionados es necesario contar con un programa de FTP, como el Ws_Ftp, o el Cute_Ftp. Algunos servidores ofrece la posibilidad de subir los archivos desde el mismo navegador. Otros, que incluyen las Extensiones de Frontpage, el cual permite subir los archivos desde este programa, esto es una ventaja ya que sube solamente los archivos modificados desde la ltima publicacin. Es de gran importancia al momento de desarrollar sitios web el analizar la usabilidad de ste, es decir la facilidad de uso de la interfase de usuario, esto tiene como finalidad los siguientes dos puntos: El visitante del Sitio web debe de poder navegar dentro del mismo con la mayor facilidad y debe de sentirse cmodo. El visitante se convencer de que es capaz de encontrar sin esfuerzo alguno, la informacin que se desea buscar. Muy pocos diseadores de sitios web dan a la usabilidad la importancia que se merece. No hace falta llegar a ser tan estrictos como Jacob Nielsen (el padre de la usabilidad), pero si hay que tener siempre en cuenta los siguientes principios bsicos [6]: 1. Capturar la atencin del usuario y mantenerlo en el sitio web el tiempo suficiente para comunicarle lo que queremos 2. El usuario debe moverse (navegar) perfectamente dentro del Sitio: Men de enlaces claro y comprensible, diferenciado del resto de contenidos de la pgina. Men principal y secundario si es necesario para ayudar a clarificar el contenido del Sitio web. No es necesario esforzarse por crear un men original, que se diferencie del tipo de men habitual, situado a la izquierda de la pantalla o en la parte superior. Muchas veces por querer hacer algo original, conseguiremos dificultar la navegacin del visitante.
Todas las pginas deben presentar en una zona visible (por ejemplo en la parte superior izquierda) el nivel jerrquico dentro del sitio en el que se encuentra la pgina actual. As podemos visualizar que los niveles superiores son por orden: "Principios bsicos" y "Usabilidad".
Conviene hacer una "prueba de navegacin" sobre un prototipo de nuestro sitio (no sobre el sitio ya implementado) y con esta prueba buscar una orientacin de las modificaciones que debemos realizar con 5 usuarios englobados dentro del perfil de usuarios que nos interesa como visitantes de nuestro sitio web. Estos usuarios no deben pertenecer a nuestro grupo de trabajo. Con esto podremos suponer cmo se comportar un nuevo visitante y as corregiremos las fallas observadas.
3. El usuario debe conseguir la informacin que busca, en el menor tiempo posible este objetivo se logra mediante los conceptos siguientes: a. Descarga rpida de las pginas
Limitar el peso de las pginas, esto es limitar el nmero de bytes que se descarga para ver la pgina. 3 kb si predomina un mercado potencial de usuarios que visiten la web con un acceso a Internet de 28 kbps va mdem. 6 kb si predominan accesos a 56 kbps 10 kb si predominan accesos RDSI a 64 kbps 28 kb si predominan accesos RDSI a 128 kbps 40 kb si predominan accesos Adsl a 256 kbps 80 kb si predominan accesos Adsl a 512 kbps La informacin deseada debe ser encontrada en el menor numero de clicks, esto lo podemos lograr analizando exhaustivamente el contenido que tendr el sitio, agrupando contenidos por orden de importancia. Dicha importancia viene dada desde 2 puntos de vista: El del productor de contenidos y el del mercado de usuarios potenciales. El productor de contenidos, es el encargado de orientar al diseador en cuanto a la importancia de los contenidos, de manera que los contenidos de mayor importancia sean de ms fcil acceso. El mercado de usuarios potenciales,
se refiere a los contenidos que solicitarn los visitantes. Porque no slo el productor manda, sino los visitantes. Puede que el productor tenga las ideas muy claras, pero si nadie visita los contenidos del sitio, de nada sirve. As que conviene extraer una muestra de los usuarios potenciales, y ver qu contenidos intentan localizar. b. Que las pginas sean lo menos extensas, de modo que el visitante no desista de ver el contenido completo.
En el prrafo anterior se resalt la importancia de "Cmo reducir el Peso de una pgina". Como ya hemos comentado, el primer inters del creador de un Sitio web, es el de captar la atencin del visitante, y retenerle el mayor tiempo posible, debemos de partir del hecho de que el visitante es impaciente: quiere la informacin cada vez ms rpida y fcil.
4. Diseo de las pginas procurando el uso de lenguajes, objetos y herramientas lo ms compatibles posible con todos los navegadores del mercado, as como con todas las versiones de los mismos. Lo ms importante en el Diseo de un sitio web, es que nuestro potencial visitante "nos pueda ver". As pues, debemos tener en cuenta que el Sitio web se visualice correctamente en los navegadores ms importantes del mercado: Internet Explorer, Mozilla, Netscape, Opera, etc. Para evitar dificultades en mantener un diseo estable, de manera que no vare entre navegadores debemos de: Limitar el uso de plug-ins No utilizar frames. Afecta en gran medida a la estabilidad del diseo entre navegadores. Ya no tiene sentido porque cada vez el acceso de los visitantes se hace mediante conexiones ms rpidas, as que ya no hay que preocuparse por mantener unas frames en pantalla que eviten tener que descargar los mens en cada pgina. Adems, pensando en una futura inclusin de los contenidos del Sitio en Google, hay que ser conscientes de que Google no tiene en cuenta los frames. Procurar uso exclusivo de HTML como lenguaje de implementacin. Limitar el uso de Javascript, Java, etc. Evitar el uso de herramientas de implementacin que inserten "gratuitamente" cdigo no deseado (Frontpage inserta un montn de cdigo basura) Captulo II: Marco Terico 9
5. Distribuir coherentemente el contenido de las pginas, resaltando las palabras y prrafos que ms reflejen el sentido que queremos para el Sitio. 6. Es necesario hacer la planeacin del sitio considerando las expectativas de los usuarios. Esto implica usar los mismos medios al que el usuario recurrira para visualizar el sitio, las mismas preferencias, el mismo sistema operativo, las mismas restricciones y hasta la misma resolucin. Hasta la fecha, el mtodo de prueba y error sigue siendo el mas efectivo a la hora de combatir la incompatibilidad. Se deben tomar en cuenta los mensajes con que comnmente se puede encontrar uno al navegar en la Internet, "lo siento, tiene un problema" y "no se preocupe, ya esta solucionado". Tambin existen dos tipos de sitios, los que informan al usuario que el sitio se ve mejor con un navegador en particular y los que se ven igual con todos. Hasta aqu hemos podido ver algunas de las formas ms comunes de construir y publicar pginas web. Sin embargo, considerando la creciente complejidad de las aplicaciones de software y su incursin al medio web se hace cada vez ms necesaria la modelacin de tales aplicaciones para poder desarrollarlas en una forma de ptima inversin, tanto econmica como de tiempo y simplificando tambin el mantenimiento requerido. Las aplicaciones Web son cada vez ms completas y complejas y debera existir un mayor inters en la modelacin y documentacin del diseo de las mismas. En el curso de los ltimos aos, el uso de la Internet como medio de comunicacin se ha incrementado de manera exponencial, lo que ha abierto una nueva puerta para el desarrollo de la educacin y el comercio. En la actualidad ya no nos es raro escuchar trminos como e-learning o e-commerce, esto es dado a que las aplicaciones web tienen varias ventajas significativas en comparacin a las aplicaciones tradicionales [3]. Las aplicaciones web son cada vez ms completas y complejas y debera existir un mayor inters en la modelacin y documentacin del diseo de las mismas. Daniel Sholler [14] considera que aunque sea imposible disear hasta el mnimo detalle de alguna aplicacin futura, las organizaciones deberan planear los patrones de interaccin de las aplicaciones y relacionarlas con las herramientas y tecnologas apropiadas, ya que esto puede ayudar tambin a un mantenimiento ms simple y eficiente de los sistemas desarrollados con estas metodologas [5].
10
2.2.- MODELACIN La modelacin de software es tan importante o ms aun que el software mismo. Segn la especificacin del Lenguaje Unificado de Modelacin, es esencial el desarrollo de planos de cualquier sistema de software antes de su programacin, como lo es el desarrollo de los planos de construccin de un edificio antes de la construccin de este. Una buena modelacin es esencial para la comunicacin entre equipos del proyecto y para asegurar una firmeza en la arquitectura del mismo [10]. Si imaginamos la construccin de un edificio sin el uso de planos, es muy probable que el resultado no sea el deseado. Las dimensiones pueden no ser las apropiadas, el nmero de cuartos y su ubicacin pueden ser errneos e incluso existe la posibilidad de que el edificio se colapse. Un buen desarrollo de planos del edificio, que tome en cuenta las necesidades de quien solicit su construccin, es ms seguro que resulte en el edificio deseado. Adems hay que tomar en cuenta que no basta con un solo plano, sino que se requieren planos para la instalacin elctrica, la cimentacin y otros ms, que van a ser interpretados por el grupo de personas al que le corresponda su desarrollo. Lo mismo sucede con un proyecto de software. Booch, Rumbaugh y Jacobson consideran que el desarrollar un modelo de un sistema de software antes de su elaboracin o renovacin, es tan importante como disear los planos de un edificio antes de su construccin [2]. Un buen modelo es esencial para una buena comunicacin entre los miembros de un equipo de desarrollo y as asegurarse de llegar a obtener un buen producto. La modelacin de un sistema de software, previa al desarrollo del mismo, ayuda a minimizar la posibilidad de errores durante su codificacin y a tener una arquitectura lo ms simplificada posible para facilitar el mantenimiento del producto terminado. La modelacin estructurada es llevada a cabo para construir sistemas mediante programacin estructurada, la cual permite que sea posible leer la codificacin de un programa desde su inicio hasta su terminacin en forma continua, sin tener que saltar de un lugar a otro del programa siguiendo el rastro de la lgica establecida por el programador. Por otra parte, la orientacin a objetos permite manejar algunas ventajas en el desarrollo de un proyecto de software, como lo es el manejo de clases y la herencia que se puede dar entre
11
stas, aparte de la reutilizacin de cdigo, lo que significa una simplificacin durante el desarrollo y una reduccin del tiempo invertido en la programacin. Durante la ltima dcada ha habido un auge de metodologas de diseo orientadas a objetos. Estas metodologas permiten ver el sistema como un todo estructural, con comportamientos y funcionalidad [3, 5, 11, 13]. Esta manera de ver el sistema se adapta muy bien al diseo de sitios web, a continuacin presentamos una breve analoga de la herramienta para modelacin la cual se usar para el desarrollo de este proyecto. 2.3.- UML UML es un lenguaje de modelacin estandarizado para especificar, visualizar, construir y documentar todos los elementos de un sistema de software [11]. Este lenguaje es una sntesis de varias notaciones originalmente desarrolladas por Grady Booch, Jim Rumbaugh, Ivar Jacobson y muchos otros. Desde 1991 empezaron a publicarse libros sobre metodologas de modelado y aunque eran independientes y cada una tena sus cualidades, el objetivo era el mismo. Esto continu as hasta 1994, cuando Rumbaugh, quien trabajaba con su metodologa conocida como OMT, se uni a Rational y empez a trabajar junto con Booch, hasta que finalmente, en octubre de 1995 presentaron el Mtodo Unificado, el cual se convertira posteriormente en lo que hoy se conoce como UML. Esto fue en 1997, cuando Jacobson y su metodologa Objectory se uni al equipo e introdujeron el Lenguaje Unificado de Modelacin al OMG para que se convirtiera en un estndar. Como se ilustra en la figura 2.2, UML es una sntesis de diferentes notaciones, creadas por Grady Booch, Jim Rumbaugh e Ivar Jacobson, a quienes se les conoce como Los Tres Amigos El uso y diseo de extensiones se vuelve una necesidad para este proyecto, ya que al momento de considerar los elementos estndar de la modelacin con UML, se vuelve evidente de que no todos los elementos de la aplicacin encajan dentro de su descripcin [3].
12
Figura 2.2.- Origen del UML
Terry Quatrani muestra un ejemplo de un modelo usando UML e introduce el uso de una extensin para html [11]. Su ejemplo se basa en un pequeo sistema de registro de cursos para alumnos y maestros y en este caso inicia con un diagrama de actividad, el cual se muestra en la figura 2.3.
Figura 2.3.- Diagrama de actividad
13
El diagrama en la figura 2.3 muestra un flujo de actividades representadas en rectngulos redondeados. Las actividades son por lo general estados de accin y se puede transferir al siguiente estado cuando la accin ha sido completada. El crculo negro representa el inicio del diagrama de actividad, donde inicia el control del flujo. Las flechas indican transiciones de un estado a otro y no se puede realizar la transicin hasta que la actividad haya sido completada. Las barras de sincronizacin (representadas en el diagrama como dos barras negras horizontales) indican cuando algunas actividades suceden en paralelo. El siguiente diagrama que muestra el ejemplo del sistema de registros de cursos para alumnos y maestros es el diagrama de casos de uso, este se crea ubicando primeramente a los actores. Un actor es alguien o algo que es externo al sistema, pero que va a interactuar con el mismo. Para uso del ejemplo, se requieren los siguientes actores: controlador, profesor, estudiante y un sistema de cobro, los cuales estn ilustrados en la figura 2.4. Se puede decir que un caso de uso es una parte de la funcionalidad del sistema, no es un modulo de software, sino algo que le da valor al actor.
Figura 2.4.- Actores
La figura 2.5 muestra los diagramas de casos de uso, los cuales estn representados por valos. La manera ms fcil de identificar los casos de uso de un sistema es observando a los actores y preguntarse cual va a ser su relacin con el sistema. En el ejemplo de la figura 2.5, el controlador va a mantener el currculo, el profesor va a solicitar su temario, el estudiante va a formar su horario y el sistema de cobro va a recibir la informacin de los cargos.
14
Figura 2.5.- Diagrama de casos de uso
El siguiente paso es documentar cada caso de uso. Cada uno debe describir el flujo de eventos y esto es realizado desde el punto de vista del actor. Debe detallar que es lo que el sistema va a proveer al actor cuando el caso de uso sea ejecutado. Por lo general indica como es que se inicia el caso de uso y como termina. Una vez realizados estos pasos, contamos con una buena perspectiva general del sistema, muestra que es lo que esta fuera del sistema (actores) y la funcionalidad que el sistema debe de proveer (casos de uso). Un punto a tomar en cuenta sobre los casos de uso es la realizacin del caso, o como es que va a ser ejecutado el caso de uso. Esto se puede realizar mediante el uso de tres tipos de diagramas: de secuencia, de colaboracin y de clases. A este ltimo tambin se le llama una vista de las clases participantes. Diagramas de secuencia: Aqu se muestran las interacciones entre distintos objetos organizados en una secuencia de tiempo. Se puede utilizar el flujo de eventos para determinar qu objetos e interacciones van a ser necesarias para lograr la funcionalidad especificada por el flujo de eventos. En el diagrama de secuencia de la figura 2.6, se muestra como un estudiante se registra exitosamente en un curso. El estudiante llena una forma la enva, la forma se comunica con el manejador y le solicita agregar al estudiante al curso indicado. El manejador le informa al curso que desea agregar un estudiante, el curso le pregunta a la seccin 1 si se encuentra con cupo. En este caso, la seccin 1 contesta afirmativamente y
15
entonces el curso le solicita a la seccion1 agregar al estudiante a su lista. Este diagrama muestra paso a paso al cliente que es lo que va a ocurrir en el sistema.
Figura 2.6.-: Diagrama de secuencia
Diagramas de colaboracin: En el diagrama mostrado en la figura 2.7 se muestran los objetos y sus relaciones con los actores, solo que no de acuerdo al tiempo, sino que son mostrados basndose en las relaciones entre los objetos. Este tipo de diagramas es de gran utilidad cuando se quieren visualizar todos los mensajes entre algunos objetos para un caso de uso o escenario en particular, especialmente en el caso de un escenario grande.
Figura 2.7.- Diagrama de colaboracin
16
Diagramas de clases: Una clase es una coleccin de objetos con una estructura comn, al igual que su comportamiento, sus relaciones y su semntica. Se pueden identificar examinando los objetos de los diagramas de secuencia y de colaboracin y en UML son representados por un rectngulo con tres compartimientos. En la figura 2.8 se muestran las clases involucradas con el ejemplo.
Figura 2.8.- Clases
El compartimiento superior de cada recuadro muestra el nombre de la clase, el de en medio muestra su estructura (atributos) y el inferior su comportamiento (operaciones). La herramienta Microsoft Visio, usada para la elaboracin de los diagramas aqu mostrados utiliza los signos (-) en cada rengln de los atributos y el signo (+) en cada rengln de las operaciones a manera de poder identificarlas y diferenciarlas. Estos compartimentos pueden ser usados a conveniencia del modelador, de forma que se vea solo el nombre, el nombre y sus atributos o los tres. Se debe tener en consideracin al nombrar las clases, usar un vocabulario del domino y usarlo como un estndar. El diagrama de clases debe incluir adems informacin sobre las relaciones y dependencia de las clases, as como la multiplicidad y su navegacin, entre otras cosas. La figura 2.9 muestra el diagrama de clases completo para el ejemplo en cuestin.
17
Figura 2.9.- Diagrama de clases
Las relaciones representan caminos de comunicacin entre objetos. Existen tres tipos de relaciones: de asociacin, agregacin y dependencia. Las relaciones de asociacin representan una conexin bi-direccional entre clases y son representadas por UML como una lnea que conecta a las clases relacionadas. En la figura 2.9 se puede encontrar esta asociacin entre las clases
FormadeRegistro y ManejadordeRegistro.
Las relaciones de agregacin son una forma ms fuerte de relacin, donde sta se da entre un todo y sus partes. Esto le indica al desarrollador que existe un alto acoplamiento entre esas clases de objetos. En UML se representan con una lnea que conecta a las clases relacionadas y tiene una figura de diamante junto a la clase que representa al todo. Este tipo de relacin se puede apreciar entre las clases Curso y OfertaCurso ilustradas en la figura 2.9.
Las relaciones de dependencia, que son una relacin ms dbil entre un cliente y un proveedor, donde el cliente no tiene el conocimiento semntico del proveedor y quiere decir que necesita el servicio, pero no sabe que existe. En UML son representadas por una lnea punteada que apunta del cliente hacia el proveedor. En el diagrama de la figura 2.9 se puede encontrar esta asociacin entre las clases
ManejadordeRegistro
y AlgoritmodeHorarios. 18
La multiplicidad define cuantos objetos participan en una relacin. Es el nmero de instancias de una clase en relacin a una instancia de la otra clase y esta se debe realizar en cada lado de la relacin. La navegacin es representada con una flecha y aunque las asociaciones y agregaciones son bi-direccionales por defecto, es por lo general deseable restringir la navegacin a una sola direccin. Este ltimo punto no es necesario en todas las relaciones, sino solo en las que el modelador quiera asegurarse que sea unidireccional. Si existen relaciones entre superclases y subclases, se puede indicar herencia de comportamientos de una a otra usando un tringulo indicando que una clase es usuaria de otra. Una subclase hereda la definicin de la superclase de la que procede, sin embargo puede agregarle o hacerle cambios a la definicin. Una superclase puede tener diversas subclases y stas pueden tener sus propias subclases. El siguiente proceso es visualizar el sistema dentro del mundo real y para esto se pueden usar los diagramas de componentes y de despliegue. El primero se puede observar en la figura 2.10. Este se usa para ilustrar las organizaciones y dependencias entre los componentes de software, incluyendo componentes de cdigo fuente, de tiempo de ejecucin o ejecutables. UML los muestra como un rectngulo grande con dos pequeos a un lado. Los crculos representan interfaces. En el caso del diagrama 2.10, se indica que el componente
Controlador.exe
es dependiente de interfaces con Cursos.dll, con Personas.dll y con Cobros.exe.
Figura 2.10.- Diagrama de componentes
19
El diagrama de despliegue es crucial, ya que muestra a los procesadores del sistema y las conexiones entre ellos, tambin muestran la distribucin de los componentes en la empresa y se sabe qu se ejecuta en cul procesador (figura 2.11).
Figura 2.11.- Diagrama de despliegue
Por ltimo, la notacin de UML se puede extender para complacer las necesidades de todo modelador y ofrece el concepto de estereotipos. Esto es, se puede tomar un elemento de modelacin bsico y darle ms significado. Los estereotipos pueden ser usados para clasificar y extender asociaciones, relaciones de herencia, clases y componentes. La figura 2.12 muestra un diagrama con los estereotipos web del ejemplo representado con los diagramas anteriores. Los pequeos engranes representan acciones que son ejecutadas en el servidor, as que se puede visualizar lo que es ejecutado por el cliente, lo que es ejecutado en el servidor y con que objetos tiene que tratar cada uno. Por ejemplo, desde la pgina Inicio existe un enlace o liga hacia la Lista de categoras. En la pgina Inicio, el usuario sigue la liga y se lleva a cabo una funcin por parte del servidor para revisar el catalogo, obteniendo las categoras existentes en la clase Catalogo. La respuesta del servidor es mostrar la pgina con la lista de catlogos.
20
Figura 2.12.- Ejemplo de estereotipos web
Aunque exista una gran diversidad de caractersticas y funciones especficas en cada aplicacin web, se presentan elementos en comn que pueden agruparse de tal manera que mediante abstraccin se llegue a un grupo de modelos bsicos que sirven para modelar las arquitecturas de cualquier tipo de aplicacin. Actualmente se est empezando a considerar una definicin de estereotipos de algunos de los componentes que integran una aplicacin web. Dicha definicin aun no se encuentra integrada a las aplicaciones dedicadas a la modelacin de aplicaciones, ni se cuenta con una definicin clara de su integracin a las metodologas existentes de modelacin.
21
2.4.- EXTENSIN DE UML PARA APLICACIONES WEB La extensin actual de UML para aplicaciones web define una serie de estereotipos, valores etiquetados y limitantes que permiten modelar aplicaciones web, los cuales son aplicados a ciertos componentes de las mismas y nos permite representarlos dentro del mismo modelo, en conjunto con los diagramas que describen el resto del sistema. A continuacin se muestran los estereotipos definidos en extensin de UML creada por Conallen [4]:
Nombre: Server Page Clase de Metamodelo: Class Descripcin: Una pgina de servidor representa una pgina web que tiene scripts que son ejecutados por el servidor. Estos scripts interactan con recursos en el servidor (bases de datos, lgica de negocios, sistemas externos, etc.). Las operaciones del objeto representan las funciones en el script y sus atributos representan las variables que son visibles en el alcance de la pgina (accesibles por toda funcin de la pgina).
Icono: Limitantes: Las pginas de servidor solo pueden tener relaciones con objetos en el servidor. Valores etiquetados: Scripting Engine: Ya sea el lenguaje o el motor que deba ser usado para ejecutar o interpretar esta pgina (JavaScript, VBScript, Perl, etc.) Nombre: Client Page Clase de Metamodelo: Class Descripcin: Una instancia de una pgina cliente es una pgina web con formato HTML. Como cualquier pgina HTML, es una mezcla de datos, presentacin e incluso lgica. Las pginas cliente son mostradas por navegadores de cliente y pueden contener scripts que son interpretados por el navegador. Las funciones de las pginas cliente se direccionan a funciones en etiquetas de scripts en la pgina. Los atributos de la pgina cliente se direccional a variables declaradas en las etiquetas de scripts de las pginas que son accesibles por cualquier funcin de la pgina (en su alcance).
Icono: Limitantes: Ninguna. Valores etiquetados: TitleTag El ttulo de la pgina como se muestra en el navegador. BaseTag El URL base para quitar referencias a URLs relativos. BodyTag El conjunto de atributos para la etiqueta <body> que fija los atributos de fondo y texto por defecto.
22
Nombre: Form Clase de Metamodelo: Class Descripcin: Una clase estereotipada como <<form>> es una coleccin de campos de entrada que forman parte de una pgina cliente. Una clase Form direcciona directamente a la etiqueta form de HTML. Sus atributos representan los campos de entrada de la forma de HTML (cajas de entrada, reas de texto, botones de radio y campos ocultos. Un <<form>> no tiene operaciones dado que no pueden ser encapsuladas en una forma. Cualquier operacin que interacte con la forma seria propiedad de la pgina que contiene dicha forma.
Icono: Limitantes: Ninguna. Valores etiquetados: Method El mtodo usado para enviar datos al URL de accin, ya sea GET o POST. Nombre: Frame Set Clase de Metamodelo: Class Descripcin: Un conjunto de marcos (frame set) es un contenedor de mltiples pginas web. El rea de vista rectangular es dividida en marcos rectangulares pequeos. Cada marco puede ser asociado con un <<target>> de nombre nico, aunque no es siempre necesario. El contenido de un marco puede ser una pgina web u otro conjunto de marcos. Una clase estereotipada como Fame Set direcciona directamente a una pgina web frameset y a la etiqueta frame de HTML. Dado que un frameset es una pgina cliente, puede tener operaciones y atributos, pero son solo activados por navegadores que no muestran marcos.
Icono: Limitantes: Ninguna. Valores etiquetados: Rows El valor del atributo de renglones de la etiqueta <frameset> de HTML. Esta es una cadena de texto con alturas de rengln delimitadas por comas. Cols - El valor del atributo de columnas de la etiqueta <frameset> de HTML. Esta es una cadena de texto con anchos de columna delimitados por comas. Nombre: Target Clase de Metamodelo: Class Descripcin: Un blanco (target) es un compartimiento nombrado en una ventana de navegador en donde se pueden mostrar las pginas web. El nombre de la clase estereotipada es el nombre del blanco. Por lo general, un blanco es un marco de una ventana definida como frameset, sin embargo puede ser una instancia o ventana del navegador. Asociaciones del tipo <<Targeted link>> especifican blancos como si el lugar fuera una pgina web nueva a ser mostrada.
Icono: Limitantes: El nombre de un blanco debe ser nico para cada cliente del sistema. Esto quiere decir que solo una instancia de un blanco puede existir en el mismo cliente. Valores etiquetados: Ninguno.
23
Nombre: JavaScript Clase de Metamodelo: Class Descripcin: En un navegador habilitado para JavaScript es posible simular objetos definidos por el usuario con funciones JavaScript. Las instancias <<JavaScript>> existen solo en el contexto de pginas cliente.
Icono: Limitantes: Ninguna. Valores etiquetados: Ninguno. Nombre: Link Clase de Metamodelo: Association Descripcin: Una liga (link) es un apuntador de una pgina cliente a otra <<Page>>. En un diagrama de clases, una liga es una asociacin entre una <<client page>> y ya sea otra <<client page>> o una <<server page>>. Una asociacin de liga direcciona directo a la etiqueta ancla de HTML. Icono: Ninguno. Limitantes: Ninguna. Valores etiquetados: Parameters Una lista de nombres de parmetros que debe ser pasada junto con la requisicin de la pgina ligada. Nombre: Targeted Link Clase de Metamodelo: Association Descripcin: Similar a una asociacin <<link>>, un <<targeted link>> es una liga en donde la pgina asociada es mostrada en otro blanco. Esta asociacin lleva directamente a la etiqueta ancla de HTML, con el blanco especificado por el atributo target de la etiqueta. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Parameters una lista de nombres de parmetros que debe ser pasada junto con la solicitud de la pgina ligada. Nombre: Frame Content Clase de Metamodelo: Association Descripcin: Una asociacin de contenido de marco es una asociacin de agregacin que expresa el contenido d un marco de otra pgina o blanco. Tambin puede sealar hacia otro frameset, indicando marcos anidados. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Row Un entero indicando el rengln especifico del marco en el frameset de la pgina o blanco asociado a la que corresponde. Nombre: Submit Clase de Metamodelo: Association Descripcin: Una asociacin <<submit> siempre es entre un <<form>> y un <<server page>>. Las formas envan los valores de sus campos al servidor a travs de <<server pages>> para procesamiento. El servidor web procesa el <<server page>>, el cual acepta y usa la informacin en la forma enviada. Esta relacin indica que pgina (o pginas) pueden procesar la forma, y sobre que de formas un <<server page>> tiene conocimiento. Continua:
24
Continua: Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Parameters una lista de nombres de parmetros que deben ser pasados junto con la solicitud de la pgina ligada. Nombre: Builds Clase de Metamodelo: Association Descripcin: La relacin <<builds>> es una relacin especial que une el espacio entre las pginas cliente y servidor. Las pginas servidor solo existen en el servidor y son usadas para construir pginas cliente. Esta asociacin identifica que pgina servidor es responsable de la creacin de una pgina cliente. Esta es una relacin direccional, dado que la pgina cliente no contiene conocimiento alguno de cmo es que vino a existir. Una pgina servidor puede construir mltiples pginas cliente, pero una pgina cliente solo puede ser construida por una pgina servidor. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Ninguno Nombre: Redirect Clase de Metamodelo: Association Descripcin: Una relacin <<redirect>> es una asociacin unidireccional con otra pgina web. Puede ser direccionada tanto para o hacia pginas cliente o servidor. Si la relacin se origina de una <<server page>> entonces indica que el procesamiento de la solicitud de la pgina puede continuar con la otra pgina. Esto no indica que la pgina destino siempre participe en la construccin de la pgina cliente, solo que puede hacerlo. Esta relacin en particular no es por completo estructural, dado que la invocacin en si de la operacin de redireccionamiento debe ser hecha programticamente en el cdigo de la pgina que la origina. Si la relacin se origina de una <<client page>> entonces, esto indica que la pgina destino ser automticamente solicitada por el navegador, sin peticin del usuario. Un valor de retraso de tiempo puede ser fijado para especificar un retraso (en segundos) antes de que la segunda pgina solicitada. Este uso de redireccionamiento corresponde a la etiqueta META y el valor equivalente en HTTP a Refresh. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Delay La cantidad de tiempo que debe esperar una pgina cliente antes de redireccionar a la pgina siguiente. Este valor corresponde a al atributo Content de la etiqueta META. Nombre: Object Clase de Metamodelo: Association Descripcin: Una asociacin entre una pgina cliente y un objeto que esta integrado en ella. El objeto es por lo general un Java Applet o un control ActiveX. Esta asociacin lleva en parte a la etiqueta <object> de HTML. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Object Parameters Una lista delimitada por punto y coma de nombres de parmetros y valores opcionales que deben ser ubicados en las etiquetas <param> de la definicin de la etiqueta <object>. Nombre: IIOP Clase de Metamodelo: Association Descripcin: IIOP (Internet Inter-Orb Protocol) es un tipo especial de relacin entre objetos del lado del cliente y objetos del lado del servidor. Representa un mecanismo de comunicacin diferente al HTTP para comunicaciones cliente-servidor. Tpicamente, esta relacin es entre Java Beans ene. Cliente y Enterprise Java Beans en el servidor. Continua: Continua:
25
Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Ninguno Nombre: RMI Clase de Metamodelo: Association Descripcin: RMI (Remote Method Invocation) es una mecanismo para Java Applets y Beans para enviar mensajes a otros Java Beans en maquinas diferentes. Por lo general esta relacin es entre Java Beans o Applets en el cliente y Enterprise Java Beans en el servidor. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Ninguno Nombre: Input Element Clase de Metamodelo: Attribute Descripcin: Un elemento de entrada es un atributo de un objeto <<form>>. Conduce directamente a la etiqueta <input> en una forma HTML. Es usada para introducir una palabra o lnea de texto. Los valores etiquetados asociados con este atributo estereotipado corresponden a los atributos de la etiqueta <tag>. Para completar los valores requeridos para la etiqueta de HTML, el nombre del atributo es usado como el nombre de la etiqueta <input> y el valor inicial del atributo es el valor de la etiqueta. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Type El tipo de control de entrada a ser usado que puede ser {Text, Number, Password, Checkbox, Radio, Submit, Reset}. Size Especifica el tamao del rea a alojar de la pantalla, en caracteres. Maxlength El numero mximo de caracteres que puede introducir el usuario. Nombre: Select Element Clase de Metamodelo: Attribute Descripcin: Un control de entrada usado en formas. El control seleccionado permite al usuario seleccionar uno o ms artculos de una lista. La mayora de los navegadores muestran este control como una caja de lista o combo. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Size Especifica cuantos artculos deben ser mostrados al mismo tiempo. Multiple Un valor boleando que indica si mltiples artculos pueden ser seleccionados a la vez o no. Nombre: Text Area Element Clase de Metamodelo: Attribute Descripcin: Un control de entrada usado en formas, que permite entrada de mltiples lneas. Icono: Ninguno Limitantes: Ninguna Valores etiquetados: Rows l numero de lneas de texto visibles. Cols El ancho visible del control en promedio al largo de caracteres. Nombre: Page Clase de Metamodelo: Component Descripcin: Un componente pgina es una pgina web. Puede ser solicitada por nombre desde un navegador. Una pgina puede contener o no scripts de cliente o servidor. Por lo general, los componentes pgina son archivos de texto accesibles por el servidor web, pero tambin pueden ser mdulos compilados que son cargados e invocados por el servidor web. Continua:
26
Continua: Al final cuando son accesadas por un servidor web (ya sea como archivo o ejecutable) una pgina produce un documento con formato HTML que enva respuesta a la solicitud del navegador.
Icono: Limitantes: Ninguna Valores etiquetados: Path La ruta requerida para especificar a la pgina web en el servidor web. Este valor debe ser relativo al directorio raz de la aplicacin web (del sitio).
Las reglas a seguir para obtener un sitio bien formado que plantea la extensin son las siguientes: Realizacin de componentes: Los componentes pueden realizar estereotipos de clases <<server page>>, <<client page>> o <<frameset>>. Generalizacin: Todos los elementos de modelacin en una generalizacin deben ser del mismo estereotipo. Asociacin: Las pginas cliente pueden tener a lo mas una relacin <<builds>> con una pgina servidor, aunque una pgina servidor puede tener relaciones <<builds>> mltiples con pginas cliente diferentes. Aparte de las combinaciones estndar de UML, las siguientes combinaciones son permitidas para cada estereotipo:
To: From: Client Page Server Page Frameset Target Form Aggregated By Submit Link Targeted Link Redirect Builds Redirect Frame Content Link Targeted Link Redirect Redirect Link Targeted Link Redirect Redirect Builds Frame Content Frame Content Dependency Aggregation Client Page Server Page Frameset Target Form
Tabla 2.1.- Combinaciones de estereotipos.
27
2.5.- EL MODELO EDUCATIVO DEL ITESM El ITESM cuenta con un nuevo modelo educativo. Este modelo se empez a implementar en 1998 y busca establecer una mejor cooperacin entre el maestro y el alumno con el uso de la tecnologa moderna. El mtodo propone los siguientes cambios por parte del alumno [7]:
Propicia que el alumno se convierta en responsable de su propio aprendizaje, que desarrolle las habilidades de buscar, seleccionar, analizar y evaluar la informacin, asumiendo un papel ms activo en la construccin de su propio conocimiento.
Conduce a que el alumno asuma un papel participativo y colaborativo en el proceso de enseanza-aprendizaje a travs de actividades que le permitan exponer e intercambiar ideas, aportaciones, opiniones y experiencias con sus compaeros, convirtiendo as la vida del aula en un foro abierto a la reflexin y al contraste crtico de pareceres y opiniones.
Sita al alumno en contacto con su entorno para intervenir social y profesionalmente en l a travs de actividades como desarrollo de proyectos, estudio casos y proposicin de soluciones a problemas.
Compromete al alumno con su proceso de reflexin sobre lo que hace, cmo lo hace y qu resultados logra, proponiendo tambin acciones concretas para su mejoramiento. En este modelo educativo el papel del profesor se diversifica haciendo sumamente
importante dos funciones especficas, que se llevan a cabo en dos momentos diferentes: 1. Planear y disear las experiencias y actividades necesarias para la adquisicin de los aprendizajes previstos, as como definir los espacios y recursos adecuados para su logro. Esta actividad del profesor es previa al desarrollo del curso. 2. Facilitar, guiar, motivar y ayudar a los alumnos durante su proceso de aprendizaje, y conducir permanentemente el curso hacia los objetivos propuestos. En ambas funciones el profesor deber escuchar e involucrar en lo posible al alumno, para hacer de ste corresponsable de su propio modelo educativo.
28
A consecuencia de estos cambios, el proceso didctico tambin sufre cambios y la comunidad acadmica ha desarrollado diversas estrategias didcticas que han hecho de este cambio, algo ms eficiente. Entre ellos estn:

el mtodo de casos, el aprendizaje basado en problemas, el mtodo de proyectos, la tcnica del debate, los juegos de negocios y simulaciones, la investigacin, el sistema de instruccin personalizada y la tcnica de la pregunta,
muchos de los cuales ya se han usado extensivamente, pero que ahora pueden usarse ms efectivamente debido a logros recientes que han surgido en el rea didctica tales como el funcionamiento de grupos colaborativos o los mtodos de autoaprendizaje. Aunado a esto hay que tomar en cuenta que en los ltimos aos, hemos visto grandes avances tecnolgicos, como lo es el uso de la Internet, el correo electrnico, los grupos de discusin y los sistemas de multimedios que han logrado facilitar en gran manera el proceso de aprendizaje, permitiendo al alumno estar en contacto con otros alumnos as como con maestros, tener acceso de ultima mano de las fuentes de informacin y con esto poder estar lo ms actualizado posible en cuanto a su rea de estudio. El Sistema Tecnolgico, que integra a un gran nmero de estudiantes y profesores, requiere una plataforma tecnolgica robusta, que sustente la colaboracin de tales nmeros de usuarios. Es por ello que se ha decidido hacer uso de una plataforma tecnolgica (Lotus Notes-Learning Space) que ofrece las caractersticas requeridas por el Instituto. En este nuevo modelo se fortalece el aprendizaje auto-dirigido al incorporar el elemento de auto-evaluacin inmediata, lo que permite al alumno re-estudiar algunos temas o definir ms claramente sus dudas, adems, el alumno toma un papel ms activo. La intervencin del maestro est en funcin de las necesidades de los alumnos detectadas a travs de los resultados de los exmenes de auto-evaluacin y analizados previamente en la clase. El aprendizaje colaborativo adquiere una mayor importancia y empieza a tener muchas Captulo II: Marco Terico 29
variantes; a distancia o presencial, sincrnico o asncrono, sobre el propio conocimiento o sobre sus aplicaciones, etc. Se usa la tecnologa de una manera muy efectiva para hacer ms eficientes los procesos de aprendizaje. Por ultimo, el maestro puede reaccionar a las necesidades individuales del alumno.
Primer cambio del nuevo modelo educativo Convertir el proceso de uno centrado en la enseanza, a uno centrado en el aprendizaje individual y colaborativo Convertir el proceso de uno centrado en el profesor, a uno centrado en el alumno
al agregar Una plataforma didctica que enfatice aspectos tales como: el razonamiento el autoaprendizaje el aprendizaje colaborativo el uso y anlisis de la informacin el contacto con la realidad del pas
que se enriquece con
como por ejemplo
Una plataforma Lotus Notes tecnolgica que Internet permita: Home pages acceso a ms informacin y ms actualizada mejor trabajo en grupo colaborativo facilidades para una mejor planeacin del curso mejor manejo de la informacin relacionada al curso trabajo asncrono y a distancia
Tabla 2.2.- Modelo educativo en el ITESM.
30
CAPITULO III: ANLISIS

El fin de este captulo es recabar la informacin necesaria para poder realizar el diseo del sitio web de Computacin II del ITESM-CEM, para esta planeacin, vamos a hacer uso de una descripcin de requerimientos del sitio, una definicin de los actores que tendrn interaccin con el sitio, los diagramas de secuencia de las actividades que se realizaran y una planeacin de la navegacin bsica del sitio. Para asegurarnos de obtener los resultados deseados por el CEM, mantuvimos un contacto constante con el mismo durante el desarrollo de este captulo. 3.1.- REQUERIMIENTOS DEL SITIO El sitio que vamos a tomar como referencia para el modelo a realizar en esta tesis es un auxiliar para el curso de computacin II 3, para los alumnos de licenciatura en diversas carreras y que forma parte del rediseo descrito en el capitulo anterior. El sitio consta de un conjunto de pginas en formato html e incluye las siguientes secciones: Principal, Introduccin, Intenciones, Objetivo, Contenido, Mapa, Estrategia, Qu se espera?, Fuentes, Recursos, Evaluacin y Documentacin didctica. Cada una de estas secciones est listada en un men que es visible desde el sitio entero. A continuacin se describe a grandes rasgos cada una de estas secciones. Principal: Esta opcin lleva al navegador a la pantalla principal del sitio, desde cualquier pgina del sitio. Introduccin: Aqu se da una descripcin general del curso, se habla de su contenido y sus beneficios.
3
Trejo, R., Computacin II, http://webdia.cem.itesm.mx/ac/rtrejo/CompuII/Index.htm.
Captulo III: Anlisis
31
Intenciones: En esta pgina se mencionan los puntos que el curso desea lograr en cuanto a la preparacin integral del alumno. Objetivo: Describe los objetivos de aprendizaje del curso en particular. Contenido: Esta pgina muestra el contenido temtico de la materia y es la parte central del sistema, ya que cuenta con una serie de enlaces a la mayora de las secciones listadas. En estas secciones se encuentran enlaces hacia actividades que debe desarrollar el alumno para completar la leccin, como tareas, reportes y material de apoyo, en ocasiones incluye enlaces hacia algunas instituciones como Carnegie Technolgy Education, Java y la Biblioteca Digital del Instituto.
Mapa: Describe el contenido de la materia mediante un mapa conceptual. Estrategia: Explica los puntos de la estrategia global del curso, como lo es la tcnica del aprendizaje basado en problemas, las exposiciones por parte del profesor, la tcnica de autoaprendizaje y la de resolucin de problemas.
Qu se espera?: Expresa las expectativas del curso, tanto por parte del profesor como por parte del alumno. Fuentes: Esta pgina lista la bibliografa necesaria para el curso. En el caso de los libros de texto y de consulta se incluyen enlaces a las descripciones de los libros. Se incluyen enlaces tambin a las instituciones involucradas y a la biblioteca digital.
Recursos: Contiene una lista de recursos que puede usar el alumno para llevar a cabo el curso, como lo son compiladores, ambientes de programacin y manuales, todos con enlace directo a sus fuentes originales.
Evaluacin: Describe detalladamente la forma de evaluacin del curso y las polticas de evaluacin de los tipos de actividades involucradas en el curso. Documentacin didctica: Contiene enlaces a documentos sobre la historia del curso, gua para el profesor y sugerencias de actividades para el curso. Segn Larman [8] los requerimientos son una descripcin de las necesidades o deseos
de un producto y su meta principal es identificar y documentar lo que en realidad se necesita, de una forma tal que sea clara para el cliente y para los responsables de desarrollar el producto. Captulo III: Anlisis 32
En el rediseo del sitio se desea incluir la opcin de poder realizar exmenes en lnea y que un alumno pueda ver su promedio de calificaciones de la materia. En la tabla 3.1 se listan las actividades que se desea sean cumplidas dentro del sitio, incluyendo las que ya estn en funcionamiento en el sitio actual.
Actividad 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 Funcin Mostrar la pgina principal del sitio desde cualquiera de sus pginas. Mostrar en una pgina una introduccin del curso. Mostrar en una pgina una explicacin de la intencin del sitio. Mostrar en una pgina los objetivos generales del curso. Mostrar en una pgina el contenido temtico del curso, con enlaces a cada uno de los puntos listados. Mostrar en una pgina la teora referente a un punto del contenido temtico. Permitir al usuario consultar informacin referente a la bibliografa relacionada con el curso. Permitir al usuario consultar y/o descargar herramientas de apoyo para el curso. Permitir al usuario a consultar y/o descargar ejercicios y tareas del curso. Mostrar en una pgina un mapa conceptual que explique la organizacin del contenido del curso y los prerrequisitos de la materia. Mostrar en una pgina la estrategia de trabajo del curso virtual. Mostrar en una pgina las expectativas del curso, tanto por parte del profesor como del alumno. Mostrar en una pgina un listado de los recursos disponibles en Internet auxiliares al curso. Mostrar en una pgina los criterios y polticas de evaluacin del curso. Mostrar una pgina con documentacin didctica: historia del curso, guas para el profesor y sugerencias para actividades de clase. Permitir al maestro registrarse y poder modificar el banco de reactivos para los exmenes en lnea. Permitir al maestro registrarse y dar de alta a los alumnos que tendrn derecho a examen en lnea. Permitir al maestro manipular los archivos con la informacin textual de los temas del curso. Permitir al maestro registrarse y poder ingresar calificaciones de tareas, trabajos y ejercicios a la tabla de promedios. Permitir a los alumnos registrarse y solicitar un examen en lnea. Mostrar al alumno el resultado del examen al momento de haberlo contestado en su totalidad y enviado al sistema. Mostrar en una pgina una tabla con los promedios de los alumnos inscritos en el curso. Respetando los criterios de evaluacin. El sitio debe ser capaz de generar exmenes tomando los reactivos de manera aleatoria de un banco de reactivos creado por el profesor. Tabla 3.1.- Actividades que se deben realizar en el sitio Categora Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Evidente Oculta
33
3.2.- DEFINICIN DE ACTORES Los actores que tendrn interaccin con el sitio, son deducidos de las actividades que se realizarn en el sitio. En la figura 3.1 se muestran los usuarios que de alguna manera estn involucrados con el sitio: el maestro del curso y los alumnos. Los alumnos pueden estar inscritos o no en la materia, pero tomando en cuenta que solo los alumnos inscritos deben tener acceso a los exmenes en lnea y solo los maestros registrados deben poder modificar el banco de reactivos para los exmenes. Los usuarios no registrados son considerados como visitantes. Para efectos de la modelacin a efectuar, vamos a considerar a los maestros y alumnos registrados, ya que con ellos se puede representar la funcionalidad total del sitio.
Figura 3.1.- Jerarqua de actores
3.3.- CASOS DE USO Los casos de uso que se presentan a continuacin tienen la intencin de dar una perspectiva ms clara de las actividades que un usuario podr realizar dentro del sitio web de la materia de Computacin II, para la cual tomaremos en cuenta tres casos de uso principales, correspondientes a las funciones de mostrar informacin, actualizar informacin y contestar exmenes en lnea.
34
3.3.1.- Caso de uso: mostrar informacin En estas funciones del sitio, el usuario selecciona algunas de las opciones del men principal y el sitio muestra la informacin en la ventana correspondiente. La figura 3.2 ilustra este caso de uso de una manera simplificada.
Figura 3.2.- Caso de uso Mostrar informacin
Las actividades que se realizan dentro del caso de uso de la figura 3.2, contiene varias actividades, las cuales pueden verse con detalle en el diagrama de la figura 3.3 mostrada a continuacin:
Figura 3.3.- Caso de uso Mostrar informacin detallado
35
3.3.1.1.- Caso de uso: Mostrar pgina principal Actores: Propsito: Alumno (iniciador), sitio web. Mostrar al alumno la pgina principal del sitio web del curso con el que desea interactuar. Curso normal de eventos: Accin del actor 1.- El alumno selecciona la Principal del men principal. Respuesta del sitio web opcin 2.- El sitio despliega en la ventana correspondiente la pgina principal del sitio. 3.- El alumno ve la pagina principal y tiene la opcin de hacer una nueva seleccin del men. 3.3.1.2.- Caso de uso: Mostrar introduccin Actores: Propsito: Alumno (iniciador), sitio web. Mostrar al alumno una breve introduccin al curso al cual se desea tener acceso as como una cordial bienvenida a dicho curso. Curso normal de eventos: Accin del actor 1.- El alumno selecciona la opcin Introduccin del men principal. Respuesta del sitio web 2.- El sitio despliega en la ventana correspondiente la informacin necesaria para detallar un texto que permitir introducir al usuario en el curso a interactuar. 3.- El alumno ve la informacin referente a la bienvenida e introduccin y tiene la opcin de hacer una nueva seleccin del men. Dado que todos los casos de uso referentes a mostrar informacin tienen el mismo curso de eventos, basta con slo explicar el propsito de cada uno de ellos.
36
3.3.1.3.- Caso de uso: Mostrar intenciones Propsito: Mostrar al alumno mediante texto una breve explicacin de las intenciones que el curso desea plasmar en el alumno. 3.3.1.4.- Caso de uso: Mostrar objetivo Propsito: Mostrar al alumno los objetivos generales que el curso o materia desea obtener. 3.3.1.5.- Caso de uso: Mostrar contenido Propsito: Mostrar al alumno el contenido temtico del curso o materia a impartir.
3.3.1.6.- Caso de uso: Mostrar mapa Propsito: Mostrar al alumno un mapa conceptual con la organizacin temtica del curso as como tambin los prerrequisitos que el curso demandara. 3.3.1.7.- Caso de uso: Mostrar estrategia Propsito: Mostrar al la estrategia de trabajo del curso virtual, esto es, la forma en que se va ha trabajar en el transcurso del estudio de el curso seleccionado. 3.3.1.8.- Caso de uso: Mostrar expectativas Propsito: Mostrar al alumno una pagina web que explique las responsabilidades del curso tanto por parte del aluno, como por parte del profesor. 3.3.1.9.- Caso de uso: Mostrar bibliografa Propsito: Mostrar al alumno una pagina web que liste las referencias bibliogrficas a usar en el curso. Estas pueden ser bibliografa bsica y/o adicional. Tambin puede incluir una lista con los recursos disponibles en la red, por ejemplo, la biblioteca digital del ITESM.
37
3.3.1.10.- Caso de uso: Mostrar auxiliares Propsito: Mostrar al usuario una pagina web que liste las herramientas auxiliares al curso disponibles para descarga por el alumno. Estas pueden ser tutoriales, manuales, compiladores, etc. 3.3.1.11.- Caso de uso: Mostrar criterios Propsito: Mostrar al alumno una pagina web que explique el criterio de evaluacin del curso, con los porcentajes correspondientes a exmenes, tareas, etc. Tambin explica las polticas de evaluacin correspondientes al curso, as como las del instituto. 3.3.1.12.- Caso de uso: Mostrar documentacin didctica Propsito: Mostrar al alumno una pagina web que contenga informacin sobre el curso que pueda servir como punto de referencia para los maestros que impartan el curso, as como sugerencias de actividades para realizar en clase. Tambin se puede incluir una resea histrica del curso en la institucin. 3.3.1.13.- Caso de uso: Consultar promedios Propsito: Permitir al alumno consultar una tabla general de promedios, para que pueda observar su desempeo en el curso. 3.3.2.- Casos de uso: actualizar informacin El sitio cuenta con unas funciones en las que el maestro puede actualizar la informacin con la que funciona el sitio, como lo es la actualizacin del banco de reactivos con que se generan los exmenes, el control de los alumnos que tienen acceso a los exmenes, el contenido terico de los temas y la actualizacin de la lista de promedios.
38
3.3.2.1.- Caso de uso: Registrar maestro Actores: Propsito: Maestro (iniciador), Sitio web. Permitir al maestro del curso registrarse en el sitio web para descargar o actualizar la informacin que se muestra en el sitio. Curso normal de eventos: Accin del actor 1.- El maestro selecciona la Docentes del men principal. Respuesta del sitio web opcin 2.- El sitio solicita el nombre de usuario y clave de acceso del maestro. 3.- El maestro ingresa la informacin solicitada. 4.- El sitio verifica que el maestro est registrado. 5.- Si el maestro est registrado, el sitio muestra en la ventana un listado con los directorios en donde se almacenan los archivos manipulables: banco de reactivos, registro de alumnos, tareas, auxiliares y tabla de promedios. 6.- El maestro se encuentra registrado y puede seleccionar una de las opciones ofrecidas. Cursos alternos: L5.- Si el maestro no se encuentra registrado, el sitio mostrar una pgina de error de registro. En caso de no contar con un registro, el maestro deber solicitar al administrador web que lo registre (en caso de no ser l mismo). 3.3.2.2.- Caso de uso: Descargar archivos Actores: Propsito: Maestro (iniciador), Sitio web. Permitir al maestro del curso, una vez registrado en el sitio, descargar archivos con informacin del curso, ya sea bancos de reactivos, tabla de registro de alumnos, tareas, auxiliares y tabla de promedios. Curso normal de eventos: Accin del actor 1.- El maestro, ya registrado, selecciona una de las opciones ofrecidas. Respuesta del sitio web 2.- El sitio muestra el contenido de los archivos en el directorio seleccionado, cada uno con una liga para descargar o actualizar. Captulo III: Anlisis 39
3.- El maestro selecciona descargar un archivo. 4.- El sitio descarga el archivo a la computadora del maestro e informa que la descarga ha sido exitosa. 5.- El maestro puede hacer una nueva seleccin de las opciones. 3.3.2.3.- Caso de uso: Actualizar archivos Actores: Propsito: Maestro (iniciador), Sitio web. Permitir al maestro del curso, una vez registrado en el sitio, actualizar archivos con informacin del curso, ya sea bancos de reactivos, tabla de registro de alumnos, tareas, auxiliares y tabla de promedios, o en su defecto, subir nuevos archivos. Curso normal de eventos: Accin del actor 1.- El maestro, ya registrado, selecciona una de las opciones ofrecidas. Respuesta del sitio web 2.- El sitio muestra el contenido de los archivos en el directorio seleccionado, cada uno con una liga para descargar o actualizar. 3.- El maestro selecciona actualizar un archivo. 4.- El sitio solicita al maestro la ruta de acceso en donde se encuentra el archivo que se desea incluir en el directorio. 5.- El maestro indica la ruta de acceso. 6.- El sitio graba el archivo en el servidor, dentro del directorio actual. 7.- El maestro puede hacer una nueva seleccin de las opciones.
Figura 3.4.- Casos de uso de la seccin actualizar informacin
40
3.3.3.- Casos de uso: Contestar exmenes en lnea El sitio debe contar con la capacidad de que los alumnos autorizados por el maestro del curso, puedan contestar exmenes en lnea y ver los resultados de los mismos dentro del mismo sitio. 3.3.3.1.-Caso de uso: Registrar alumno Actores: Propsito: Alumno (iniciador), Sitio web. Permitir al alumno registrarse en el sitio para poder realizar un examen en lnea, o en el caso de que el alumno ya ha contestado el examen, le informe el resultado del mismo. Curso normal de eventos: Accin del actor 1.- El alumno selecciona la opcin Exmenes del men principal. 3.- El alumno ingresa la informacin solicitada. 4.- El sitio verifica que el alumno est registrado. 5.- Si el registro del alumno es exitoso, el sitio muestra en la ventana correspondiente un listado de ligas que llevan a los exmenes planeados para el curso. 6.- El alumno puede seleccionar de la lista el examen que desea contestar. Cursos alternos: L5.- Si el alumno no se encuentra registrado, el sitio mostrar una pgina de error de registro. En caso de no contar con un registro, el alumno deber solicitar al maestro del curso que lo registre. 3.3.3.2.-Caso de uso: Realizar examen Actores: Propsito: Alumno (iniciador), Sitio web. Permitir al alumno realizar un examen en lnea y poder ver la calificacin del examen contestado. Curso normal de eventos: Captulo III: Anlisis 41 Respuesta del sitio web 2.- El sitio solicita el nombre de usuario y clave de acceso del alumno.
Accin del actor 1.- Una vez registrado, el alumno puede seleccionar la liga correspondiente al examen que desea contestar.
Respuesta del sitio web
2.- El sitio verifica si el examen ya fue contestado o no. 3.- Si no ha sido contestado, el sitio genera un examen aleatorio, tomando de los reactivos correspondientes al examen solicitado. 4.- El alumno selecciona las respuestas de las opciones presentadas en el examen, contando con un lmite de tiempo predefinido. 5.- El alumno enva el examen contestado de regreso al sistema. 6.- El sitio califica el examen comparando las respuestas dadas por el alumno con las que estn en la base de datos y registra una calificacin en la tabla de promedios. 7.- El sitio muestra en una pgina nueva el resultado del examen. 9.- El alumno tiene la opcin de hacer la solicitud de otro examen. Cursos alternos: L2.- Si el examen ya fue contestado, se pasa hasta L7.
Figura 3.5.- Casos de uso de la seccin contestar exmenes en lnea
3.4.- NAVEGACIN DEL SITIO Dentro de la planeacin del proyecto, Franklin propone esquematizar la navegacin bsica del sitio tomando en cuenta las actividades planteadas por los casos de uso mediante
42
un diagrama de componentes [5]. La organizacin bsica del sitio se puede apreciar mediante el diagrama de la figura 3.6. En el diagrama de navegacin de la figura 3.6 se indica la pgina principal con el nombre de Index, el cual es el nombre que por lo general se les da a las pginas de inicio de un sitio. En la parte inferior izquierda de cada paquete se indica la regin del sitio a la que corresponde, las reas principales son /, que corresponde a la raz del sitio; /informacin/, que corresponde a las paginas encargadas de mostrar informacin; /docentes/, que corresponde al rea de actualizacin de informacin por el maestro y /exmenes/ que corresponde al rea en donde los alumnos solicitan la elaboracin o los resultados de un examen.
Figura 3.6: Organizacin bsica del sitio
43
Dentro del paquete /informacin/ se pueden observar otros tres paquetes, los cuales corresponden a las reas de informacin detallada de libros, acceso a la biblioteca digital y la informacin contenida en los temas del curso. Dentro del paquete /docentes/ se encuentran otros paquetes correspondientes a las reas de /reactivos/, correspondiente a la actualizacin del banco de datos para los exmenes; /alumnos/, en donde se mantiene el control de los alumnos autorizados para presentar exmenes y /promedios/, que es donde se actualiza la informacin de las calificaciones obtenidas a lo largo del curso. En el paquete /exmenes/ se encuentran otros dos paquetes mas: /exmenes/ y /resultados/, el primero contiene lo referente a lo exmenes que los alumnos podrn contestar y el segundo lleva un registro de los exmenes contestados y de mostrar los resultados. 3.5.- DIAGRAMAS DE SECUENCIA Una vez habiendo construido los casos de uso que muestran las actividades del sitio web de Computacin II, podemos ver el flujo de acciones entre el sitio y los actores involucrados de una forma grfica, esto se puede apreciar mediante los diagramas de secuencia. Para representar las acciones de mostrar pginas con material informativo, basta con tomar el caso de uso de la figura 3.2 en la seccin 3.3.1 y diagramar la interaccin que el alumno tiene con el sistema, la cual se puede apreciar en la figura 3.7.
Figura 3.7: Diagrama de secuencia del sitio para el caso de uso Mostrar informacin
44
El diagrama de la figura 3.7 puede aplicarse a cada una de las actividades correspondientes a pginas que se limitan a mostrar informacin, indicadas en el diagrama 3.3 de la seccin 3.3.1. Por ejemplo, la figura 3.8 muestra el diagrama de secuencia correspondiente al caso de uso Mostrar pgina principal.
Figura 3.8: Diagrama de secuencia del sitio para el caso de uso Mostrar pgina principal
En lo referente a los casos de uso de la seccin 3.3.2 se pueden observar tres acciones distintas: registrar al maestro, descargar archivos del servidor y grabar archivos en el servidor, ilustrados por las figuras 3.9, 3.10 y 3.11 respectivamente
Figura 3.9: Diagrama de secuencia del sitio para el caso de uso Registrar maestro
45
Figura 3.10: Diagrama de secuencia del sitio para el caso de uso Descargar archivos
Figura 3.11: Diagrama de secuencia del sitio para el caso de uso Actualizar archivos
Para los casos de uso de la seccin 3.3.3, contestar exmenes en lnea, se pueden considerar los siguientes diagramas de secuencia: registrar alumno (figura 3.12), y realizar examen (figura 3.13). En el caso de que el examen solicitado, ya ha sido contestado, las interacciones se ilustran en la figura 3.14. Captulo III: Anlisis 46
Figura 3.12: Diagrama de secuencia del sitio para el caso de uso Registrar alumno
Figura 3.13: Diagrama de secuencia del sitio para el caso de uso Realizar examen
47
Figura 3.14: Diagrama de secuencia del sitio para el caso de uso Realizar examen curso alterno
Con los diagramas construidos en las secciones incluidas en este capitulo, se ilustra el anlisis de las funciones del sitio y se pueden identificar su interaccin con los usuarios, el siguiente capitulo trata sobre el diseo del sitio, incluyendo notacin de la extensin para aplicaciones web de UML.
48
CAPITULO IV: DISEO

El diseo descrito en este captulo muestra las clases necesarias para el funcionamiento del sitio y la forma en que interactan entre ellas, se incluyen los patrones de contenido de las paginas principales y con base en ellos, se incluyen tambin diagramas de navegacin del sitio y diagramas de funcionalidad, con ayuda de la extensin de UML para aplicaciones web descrita en el captulo 2. El diseo con patrones, cuando se va a trabajar con mltiples sitios, permite usar la funcionalidad de un sitio en otro igual o similar en cuanto a su estructura, organizacin y cdigo reutilizable. 4.1.- DIAGRAMA DE CLASES El diagrama de clases muestra la naturaleza esttica del sitio, muestra la existencia de clases y sus relaciones en una visin lgica, su navegabilidad y multiplicidad [11]. En la figura 4.1 se muestra el diagrama de clases del sitio web Computacin II
Captulo IV: Diseo
49
Figura 4.1.- Diagrama de clases
4.2.- PATRONES DE DISEO Para poder visualizar de una manera ms clara las funciones del sitio web y tomando en cuenta que la modelacin basada en el sitio web de Computacin II ser utilizada para desarrollar tambin otros sitios educativos web similares, es importante contar con ciertos patrones de diseo que nos sirvan para modelar este tipo de sitios. Las paginas web presentan cierta complejidad que no se puede capturar de una manera intuitiva con UML por si solo, Captulo IV: Diseo 50
por lo que se han ideado extensiones que permitan realizar la abstraccin necesaria para visualizarlas. Jim Conallen public en 1999 una extensin para UML, la cual permite de manera dinmica disear las operaciones que se llevan a cabo en un sitio web [4], dicha extensin se encuentra descrita dentro del marco terico (captulo 2). Los patrones de las figuras 4.2, 4.3 y 4.4 representan la estructura general que se requiere en los sitios web educativos que se planean construir. La figura 4.2 indica el contenido general del sitio web educativo.
Figura 4.2.- Patrn del sitio web educativo
En la figura 4.3 se observa el patrn correspondiente del contenido que debe llevar la seccin en donde solo pueden acceder los maestros del curso.
Figura 4.3.- Patrn de la seccin de acceso de docentes
Captulo IV: Diseo
51
El patrn de la figura 4.4 permite ver lo que un alumno registrado puede acceder dentro del sitio web.
Figura 4.4.- Patrn de la seccin de acceso de alumnos
Al aplicar los patrones de las figuras 4.2, 4.3 y 4.4 al sitio web de Computacin II, se pueden generar los siguientes diagramas: La figura 4.5 indica cules son las ligas necesarias desde la pgina principal (Index), cabe mencionar que estas ligas son accesibles para todo usuario del sitio (registrado y no registrado).
Figura 4.5.- Pgina inicial
Captulo IV: Diseo
52
Las pginas en donde se despliega la informacin referente a los temas del curso deben contener una o ms ligas a las bibliografas usadas en el tema as como a archivos auxiliares, este tipo de paginas se pueden representar mediante el diagrama de la figura 4.6.
Figura 4.6.- Pginas de contenido
En cuanto al acceso de usuarios registrados, tenemos el caso del acceso de maestro(s) del curso. El diagrama 4.7 indica que el men disponible para un maestro registrado se presenta en una ventana nueva del navegador, as como las ligas a los recursos que un maestro puede administrar.
Figura 4.7.- Pgina de docentes registrados
Otro usuario registrado del sitio es el alumno. Un alumno tiene acceso a un men que le permite solicitar un examen o revisar la tabla de promedios. La figura 4.8 muestra el men disponible a los alumnos registrados. Captulo IV: Diseo 53
Figura 4.8.- Pgina de alumnos registrados
El diagrama de la figura 4.9 indica el contenido de dicha pgina. El examen es mostrado tambin en una ventana nueva e incluye una forma que contiene los reactivos a contestar y un reloj que limita el examen a un tiempo determinado.
Figura 4.9.- Pgina de examen
4.3.- DIAGRAMAS DE NAVEGACIN Para poder apreciar la navegacin del sitio podemos nuevamente hacer uso de la notacin propuesta por Conallen [3], que nos sirve para visualizar las operaciones que el usuario puede realizar y la respuesta que el sitio debe dar. Tomando como base, el diagrama de clases de la figura 4.1 y los diagramas de patrones de diseo, podemos construir el diagrama de navegacin de la figura 4.10. Captulo IV: Diseo 54
Figura 4.10.- Diagrama de navegacin del sitio (principal)
En el diagrama mostrado en la figura 4.10 se pueden ver la navegacin desde el men principal, la cual incluye dos ligas a otras pginas para los usuarios registrados. La pgina Menu_Examenes.html es en donde los alumnos tienen acceso para presentar exmenes en lnea y el diagrama de navegacin de esa seccin del sitio se puede ver en la figura 4.11. Por otro lado, la pagina Menu_Docentes.html, es donde los maestros pueden administrar el contenido del sitio y la navegacin de esta seccin se muestra en la figura 4.12. Captulo IV: Diseo 55
Figura 4.11.- Diagrama de navegacin del sitio (alumnos)
Figura 4.12.- Diagrama de navegacin del sitio (maestros)
Captulo IV: Diseo
56
4.3.1.- DIAGRAMAS DE NAVEGACIN: FUNCIONALIDAD Contando con los diagramas de clases y de navegacin, podemos ver algunos detalles del funcionamiento del sitio mediante los siguientes diagramas de estereotipos web. Los diagramas de estereotipos web no permiten ver con detalle qu es ejecutado en el servidor y qu es ejecutado en el cliente as como qu interaccin tiene con algn objeto del diagrama de clases [11]. Las tres funciones principales del sitio, como lo son sealadas por los casos de uso, son el poder ver informacin, realizar exmenes en lnea (alumnos) y actualizar la informacin del sitio (maestros). Estas tres funciones pueden ser mejor comprendidas mediante sus diagramas de estereotipos web correspondientes, mostrados en las figuras 4.13, 4.14 y 4.15 respectivamente.
Figura 4.13.- Diagrama de funcionalidad: mostrar informacin
En el diagrama de la figura 4.13 se muestra la secuencia a seguir para ver la informacin de un tema contenido en el sitio. De la pagina Index.html se sigue la liga a la pagina Contenido.html, dicha pagina contiene ligas hacia cada uno de los temas del curso, al Captulo IV: Diseo 57
seleccionar la liga correspondiente a un tema, el servidor se encarga de buscar el tema correspondiente de entre los temas disponibles para poder construir la pagina correspondiente.
Figura 4.14.- Diagrama de funcionalidad: generar examen
En la figura 4.14 se indica la seleccin de la pagina Login_Alumnos.html, el cual es mostrado en una ventana nueva del navegador. Desde ah el alumno se puede registrar Captulo IV: Diseo 58
ingresando su nombre de usuario y contrasea, datos que son verificados por el servidor. De ser correctos, el servidor muestra la pagina Menu_Examenes.html, desde donde el alumno puede solicitar un examen en lnea. Al seleccionar la liga de uno de los exmenes disponibles, el servidor verifica si el examen esta o no contestado, para mostrar el resultado o generar un examen aleatorio (segn sea el caso). Despus de presentar un examen, este es calificado, el resultado es registrado en la base de datos correspondiente y es mostrado al cliente del sitio.
Figura 4.15.- Diagrama de funcionalidad: actualizar informacin
Captulo IV: Diseo
59
En la figura 4.15 se puede ver que cuando el maestro se registra en el sitio, el servidor lo conduce a administrar los archivos correspondientes a su grupo. El diagrama muestra como ejemplo el manejo del archivo de la tabla de promedios, las operaciones a realizar con cualquiera de los archivos son descargar el archivo seleccionado o subir un archivo al servidor. 4.4.- DIAGRAMA DE COMPONENTES Aunque este caso no sea muy complejo, el diagrama de componentes del sitio ilustrado en la figura 4.16 indica que se cuenta con un servidor web y servidores adicionales en donde se almacenan los archivos del sitio y los archivos de registro de usuarios.
Figura 4.16.- Diagrama de componentes
Los diagramas contenidos en este captulo componen un diseo general para los sitios web educativos que se desean implementar en algunos cursos del ITESM-CEM y en conjunto con el captulo III componen un modelo rediseado para la clase de Computacin II, el cual, con ayuda de los patrones de diseo, servir para el rediseo de los cursos adicionales que sean requeridos.
Captulo IV: Diseo
60
CONCLUSIONES
Entre las ltimas aplicaciones de la tecnologa en el campo de la educacin, se encuentra lo que es el uso de cursos en lnea. En algunos casos, el uso de un curso en lnea, es un auxiliar al curso presencial y en otros casos el curso es en su totalidad a distancia. La WWW es el medio en donde se publican los sitios educativos para los cursos en lnea y dichos cursos se han empezado a convertir en una herramienta cada vez ms utilizada en instituciones del pas. El uso de un sitio educativo puede presentar diversas ventajas en el proceso de enseanza-aprendizaje, ya que se pueden aprovechar las ventajas de la Internet en cuanto al acceso de informacin de manera inmediata. Un curso en lnea refuerza en el alumno su capacidad de autoaprendizaje, as como su inters por la investigacin. Los sitios educativos deben de contar con ciertas caractersticas en comn, como lo es contar con un rea general que pueda ser vista por visitantes en general, lo que sirve para que otros alumnos no inscritos en el curso puedan revisar el contenido y despertar algn inters por los temas ah presentados. El sitio debe tener acceso a usuarios registrados, los cuales son los maestros y los alumnos. Los maestros deben contar con una seccin desde donde puedan administrar el contenido del sitio. Los alumnos deben tener acceso a un rea del sitio desde donde puedan realizar exmenes en lnea y consultar calificaciones. El objetivo general de este proyecto de titulacin es el de contar con una documentacin de la modelacin de uno de los sitios educativos del ITESM-CEM y crear los patrones necesarios para desarrollar otros sitios dentro del departamento de sistemas de Conclusiones 61
informacin de la institucin. La documentacin del anlisis y diseo del sitio de Computacin II se encuentra descrita en los captulos III y IV de este proyecto y por medio de ellos podemos visualizar de una manera clara, como debe estar organizado el sitio, en cuanto a su contenido y organizacin. Al iniciar este proyecto, considerando que lo que se iba a modelar era un sitio web, decidimos que UML era la herramienta ideal para realizarlo, dado que cuenta con una extensin para modelar dichas aplicaciones. La notacin orientada a objetos de la herramienta de modelacin utilizada permite visualizar el sitio, sus relaciones e interacciones desde el punto de vista cliente-servidor y permite disear la navegacin del sitio de una manera funcional ptima. Los patrones presentados en el capitulo IV muestran la generalidad de los sitios educativos que se quieren construir, esto es, lo que debe contener y como debe estar organizado. El uso de los patrones permite que al modelar otros sitios educativos, se cuente con la misma estructura bsica en cada sitio. En este proyecto se muestran los patrones y su aplicacin al sitio educativo de Computacin II, complementando la modelacin del sitio y facilitando la construccin de los sitios adicionales que el ITESM-CEM desea redisear. Un modelo es un ejemplo a seguir y puede ser adaptado de acuerdo a las necesidades particulares de cada sitio web y la documentacin permite al modelador ver con precisin en donde debe agregar, quitar o modificar el contenido del sitio sin afectar su funcionalidad. Con los patrones obtenidos y la modelacin realizada del sitio de Computacin II mediante UML y su extensin para sitios web presentados en este proyecto se han logrado obtener los objetivos planteados en el captulo I y han sido aprobados por el departamento de sistemas de informacin del ITESM-CEM. Recomendaciones Aunque la modelacin del sitio web de Computacin II fue realizada de acuerdo a los requerimientos solicitados, se pueden considerar algunas adiciones que haran del sitio educativo una aplicacin ms completa. Sugerimos que se incluyan en el sitio un rea de discusin en donde puedan participar tanto alumnos como maestros registrados para incrementar la comunicacin entre ellos y poder dar una atencin ms personalizada durante el curso. Tambin se puede incluir una seccin de preguntas y respuestas comunes del curso Conclusiones 62
para simplificar el proceso de asesoras. Y tambin se puede agregar una seccin dentro del rea de exmenes donde el alumno pueda realizar un examen sencillo de cada unidad antes de presentar los exmenes finales. En futuros proyectos se propone realizar una herramienta que automatice la construccin de sitios con base en patrones de una manera visual. Tambin se propone que se planee en conjunto con la UACJ un proyecto similar a ste para los cursos virtuales que se tienen planeados a futuro.
Conclusiones
63
GLOSARIO
Abstraccin: Accin de concentrar las cualidades esenciales o generales de cosas similares. Tambin las caractersticas esenciales resultantes de una cosa. Actor: Es un usuario del sistema, que necesita o usa algunos de los casos de uso. Se representa mediante un, acompaado de un nombre significativo, si es necesario. ADSL: Significa Lnea Asincrnica de Suscripcin Digital. Mtodo que emplea los cables de cobre del tendido telefnico en los hogares. En lugar de usar un solo canal, como lo hace el servicio telefnico tradicional, el sistema crea mltiples canales dividiendo el canal en varias frecuencias (Mltiplexin de Divisin de Frecuencias FDM) sobre el par trenzado de cobre (lnea telefnica normal). Se logra un mayor aumento del ancho de banda dividiendo luego estos canales por tiempo (mltiplex in de divisin por tiempo TDM). ADSL puede transmitir hasta 6 Mbps a un suscriptor, y hasta 832 kbps o ms en ambas direcciones, permitiendo as a los usuarios aprovechar a pleno la comunicacin en banda ancha. Aleatorio: Relativo a un suceso, aquel en cuya realizacin interviene el azar, no pudindose dar de antemano el resultado del experimento realizado.
Glosario
64
ASP: (Active Server Pages) Pgina web que incluye uno o ms scripts que se procesan dinmicamente en un servidor web antes de ser enviados al navegador del usuario. Estos scripts son, en general, de VBScript (Visual Basic Script) o de JavaScript. Esta clase de pginas web tienen extensin .asp. Builds: Es una relacin especial que une el espacio entre las pginas cliente y servidor. Las pginas servidor solo existen en el servidor y son usadas para construir pginas cliente. Esta asociacin identifica que pgina servidor es responsable de la creacin de una pgina cliente. CEM: Campus Estado de Mxico. Clase: Descripcin de un conjunto de objetos que comparten los mismos atributos, operaciones, mtodos y significado. Client: Computadora cliente conectada a una red (o a la Internet) que utiliza los servicios que se encuentran en un servidor. Por ejemplo, una computadora que a travs del navegador, solicita al servidor ver una pgina web (transferencia de un archivo HTML) es un cliente. Compilador: Programa que lee las lneas escritas en un lenguaje de programacin (como Pascal) y las traduce a otro que pueda ejecutar la computadora. Los programas compilados se ejecutan ms rpido que los interpretados, debido a que han sido completamente traducidos a lenguaje de mquina y no necesitan compartir memoria con el intrprete. CuteFTP: Cliente de FTP. Cuenta con todas las funciones del protocolo FTP, como subir y bajar archivos, y ejecutar comandos en el servidor remoto (crear directorios, renombrar archivos, etc.). Tambin permite crear macros, e incluye un conjunto de carpetas donde el usuario puede guardar sus FTPs "favoritos" Docente: Que ensea, persona que se dedica a la practica y actividad de la enseanza; perteneciente o relativo a la enseanza.
Glosario
65
Documentacin: Disciplina de las ciencias de la informacin que se ocupa de la recogida de los documentos cientficos y del tratamiento y almacenamiento de la informacin en ellos contenida para su posterior recuperacin y difusin. Didctica: Perteneciente o relativo a la enseanza; propio, adecuado para ensear o instruir. E-commerce: (Comercio electrnico) Compra y venta de objetos, informacin y servicios por Internet, especialmente en la WWW. Editor (de texto): Programa utilizado para crear y manipular archivos de texto (lenguaje fuente de un programa, listados de nombres y direcciones). Estos programas se diferencian de los procesadores de textos porque no disponen de caractersticas elaboradas de formatos e impresin (tales como alineado automtico, negritas, fuentes tipogrficas, cuerpos). Por ejemplo, el Bloc de notas de Windows es un editor. E-learning: Medio de aprendizaje a distancia a travs de la WWW. Estereotipo: Modelo, patrn o norma establecida de cualidades, conductas, etc. Extensin: Accin y efecto de extender, ampliacin del mismo a otro concepto. Frames: Se trata de una modalidad de diseo de pginas web, por medio de la cual el usuario que las crea divide una pgina en dos o ms secciones y carga un archivo HTML distinto en cada una de ellas. Para ver una pgina que contiene frames, es necesario contar con las ltimas versiones de los navegadores. FTP: (File Transfer Protocol) Protocolo de transferencia de datos especialmente diseado para transmitir archivos a travs de una conexin remota. Este protocolo es un estndar en los sistemas UNIX.
Glosario
66
GIF: (Graphics Interchange Format) Formato grfico muy usado en la construccin de pginas web, sobre todo porque el tamao que ocupan las imgenes es muy reducido y permite usar un fondo transparente en la imagen. Host: Unidad, software o persona que "hospeda" un servicio. A los usuarios de este servicio se los llama guests (invitados). HTML: (HyperText Mark-up Language) Lenguaje utilizado para armar documentos de hipertexto, como las pginas que se visualizan en la World Wide Web. Al texto, imgenes, etc., se les da formato mediante tags, que son instrucciones incluidas dentro de los signos > y <. Estas instrucciones pueden hacer que el texto contenido entre un tag de apertura y otro de cierre sea representado en el explorador de Internet en itlicas, negritas, un color en particular, parpadeante, etc., o pueden incluir dicho texto dentro del formato de una tabla ordenada. HTTP: (HyperText Transfer Protocol) Uno de los protocolos de Internet ms importantes, utilizado en las comunicaciones de la World Wide Web. Hipertexto: Informacin que se relaciona con otros datos a travs de enlaces o links resaltados. Esta tcnica fue creada para que los programas respondan inmediatamente sobre un tema relacionado, del cual se requiere informacin. El ejemplo ms conocido es la ayuda de Windows o las pginas de la World Wide Web. Index: Mtodo de generar una direccin efectiva que modifica la direccin especifica dada en la instruccin por el contenido de un registro ndice concreto. En el caso del nombre de una pagina web, indica que es la pagina principal del sitio, que por lo general es solicitada por los proveedores de hospedaje de sitios web. Interaccin: Dilogo bidireccional entre un emisor y un receptor. Trmino muy utilizado en los ltimos aos en computacin y dems actividades relacionadas con los sistemas multimedia, para denominar las capacidades que posee una computadora, sistema televisivo Glosario 67
o programa, para interactuar con el usuario. Los programas interactivos, en general, despliegan indicadores de pantalla que le piden al usuario que introduzca informacin para decidir cmo se lleva a cabo una tarea en particular. Estos programas son ideales para aplicaciones educativas, puesto que despiertan el inters tanto de nios como de adultos en cuanto a resolver problemas y obtener informacin. Interfase: Es una especificacin de un conjunto de funciones que proporciona el sistema; la especificacin incluye los nombres de las funciones sus tipos de parmetros, los tipos de resultados y las expresiones. Una interfase es el medio con el cual un usuario interacta con un sistema. Internet: Red mundial de computadoras o Red de Redes. Los orgenes de Internet se remontan a 1969, cuando el Departamento de Defensa de los Estados Unidos cre ARPANET, red precursora de Internet. En la actualidad, Internet utiliza una porcin de las redes pblicas de telecomunicaciones, y lo que la distingue del resto es el hecho de que usa la suite de protocolos TCP/IP. A travs de Internet, cualquier usuario puede ver informacin almacenada en otra computadora, e incluso "hablar" en tiempo real con personas conectadas a otras computadoras. Algunos servicios que brinda Internet son: WWW, IRC, correo electrnico, servicios de telefona, etc. ITESM-CEM: Instituto Tecnolgico y de Estudios Superiores de Monterrey Campus Estado de Mxico. JAVA: Lenguaje de programacin orientado a objetos que se basa en clases. JPEG: (Joint Photographic Experts Group) Formato grfico que permite comprimir imgenes de gran cantidad de colores con muy poca prdida de calidad. Es soportado por el protocolo HTTP, es decir que se puede ver un archivo .JPG con el cualquier navegador de Internet.
Glosario
68
Link: Una conexin entre un elemento de un documento de hipertexto, como una palabra, frase, smbolo o imagen y un elemento distinto del documento, otro documento de hipertexto, un archivo o un guin. Metodologa: Conjunto de mtodos que se siguen en una investigacin cientfica o en una exposicin doctrinal. Modelacin: Una representacin grafica y documental de una situacin u objeto del mundo real. Navegacin: Accin que se refiere al recorrido y desplazamiento realizados por un usuario de computadora, a travs de los distintos sitios o enlaces (links) que contiene Internet (con o sin destino fijo), de las opciones de un programa de computacin o de los contenidos de una enciclopedia multimedia (generalmente editada en CD-ROM), con el fin de recopilar informacin, consultar datos de inters o efectuar alguna tarea determinada. Navegador: Programa diseado para acceder a los contenidos textuales, grficos y audiovisuales publicados en la World Wide Web. El navegador o browser interpreta el cdigo fuente con el que se disean las pginas web (lenguaje HTML). Las versiones ms populares son Netscape Navigator y Microsoft Explorer. El auge de estos programas va de la mano del desarrollo de Internet como nuevo medio de comunicacin interactivo. Notacin: Conjunto de smbolos y formatos utilizados para describir los elementos de programacin, matemticas o un campo cientfico; la sintaxis de un lenguaje se define en parte por su notacin. OMG: (Object Management Group) Organizacin internacional conformada por mas de 600 miembros, incluyendo proveedores de sistemas de informacin, desarrolladores de software y usuarios. Fundada en 1989. Promueve la teora y practica de tecnologas orientadas a objetos en el desarrollo de software.
Glosario
69
Patrn(es): Modelo(s) que sirve(n) de muestra para sacar otra(s) cosa(s) igual(es). Perspectiva: Circunstancia de poder analizar o ver las cosas a distancia, para aplicarlas a su valor. Plasmar: Dar forma a algo o reflejar algo en una obra. PHP: Siglas en ingles de Personal Home Pages. Paginas principales personales. Es el nombre original de un lenguaje de programacin, conocido ahora como PHP Hypertext Preprocessor. Plug-in: Pequeo programa de software que conectado a una aplicacin de mayor tamao proporciona nuevas funciones. Prototipo: Ejemplar original o primer molde en que se fabrica una figura u otra cosa y que sirve de modelo para hacer otras iguales. Publicacin: Accin y efecto de publicar. Accin de cargar un sitio o pagina web a un servidor para que pueda ser visualizado por medio de la Internet. RDSL: (Rate-Adaptive Digital Subscriber Line). Ver ADSL. Script: Es una serie de instrucciones sin compilar que son interpretados por una aplicacin. Se diferencia de las aplicaciones porque stas son ejecutadas directamente sobre el procesador de la computadora, como programas compilados. Son muy utilizados en Internet, para enviar comandos especiales a los navegadores. Existen bsicamente dos tipos de scripts: los del lado del cliente y los del lado del servidor. Los del lado del cliente, son enviados tal cual al navegador del usuario, y ste los ejecuta automticamente. Si una pgina tiene scripts del lado del servidor, stos son procesados por el servidor que contiene la pgina Web que estamos visitando y devuelve a nuestro navegador el resultado de la ejecucin de dicho script, que puede ser el resultado de una consulta, o un valor que depende de la hora a la que estemos consultando la pgina Glosario 70
Server: En una red, se denomina servidor a una computadora compartida por mltiples usuarios. Existen servidores de archivos, de impresin, etc. Son procesadores de gran potencia que se encuentran a disposicin de los usuarios. Cuando los usuarios de Internet se intercomunican, en realidad lo hacen a travs de servidores. Software: Programa. Conjunto de instrucciones que indican a la computadora lo que debe hacer. Un programa se escribe en un lenguaje de programacin y se convierte al lenguaje de mquina de la computadora, por medio de otros programas denominados ensambladores y compiladores. Tag: "Marcas" que se utilizan en el cdigo HTML, que van encerradas entre signos < y >. Por ejemplo <BODY>, <TABLE> y <HTML> son tags. Para ver el cdigo HTML de una pgina web, se debe seleccionar la opcin Ver cdigo fuente (View source) en el men del navegador. Target: Un blanco (target) es un compartimiento nombrado en una ventana de navegador en donde se pueden mostrar las pginas web. Target Link: Liga en donde la pgina asociada es mostrada en otro blanco. Temtica: Conjunto de los temas parciales contenidos en un asunto general. Que se arregla, ejecuta o dispone segn el tema o asunto de cualquier materia. Tutorial: Leccin o gua acerca de un tema en particular. Permite aprender cmo llevar a cabo una determinada tarea o asimilar algn conocimiento puntual. En Internet son muy usuales los tutoriales en referencia a temas de informtica, mediante los cuales las personas que acceden a dichos contenidos tienen la posibilidad de aprender a utilizar aplicaciones, programar en algn lenguaje e incluso instalar o configurar algn dispositivo de hardware.
Glosario
71
UML: (Undefined Modeling Lenguaje) Lenguaje de modelacin estandarizado para especificar, visualizar, construir y documentar todos los elementos de un sistema de software URL: (Uniform Resource Locator) Direccin de un sitio de Internet. La web utiliza los URLs para especificar las direcciones de diversos servidores en Internet y los documentos ubicados en cada servidor. Por ejemplo, el URL de IBM es www.ibm.com (www significa World Wide Web y .com significa comercial). Usuario: Cualquier persona que precise o utilice un sistema de procesos de datos. Web page: Documento en el World Wide Web la cual esta formada por un archivo HTML, con archivos asociados para grficos y guiones en un directorio particular en una maquina particular. Web site: Grupo de documentos HTML relacionados y archivos asociados, guiones y bases de datos que son servidos por un servidor de http en el World Wide Web. WWW: (World Wide Web) Conjunto total de documentos de hipertexto con enlaces entre ellos que residen en servidores de HTTP alrededor de todo el mundo.
Glosario
72
Referencias [1] Alhir, S., Unified Modeling Language extension mechanisms, http://www. DistributedComputing.com, 1998. [2] Booch, G., Rumbaugh J., Jacobson I., El lenguaje unificado de modelado, Addison Wesley Iberoamericana, 1999. [3] Conallen, J., Modeling web application design with UML, http://www.conallen.org /whitepapers/webapps/ModelingWebApplications.htm, 1999. [4] Conallen, J., UML extension for Web Applications 0.91, http://www.conallen.org /technologyCorner/webextension/WebExtension091.htm, 1999. [5] Franklin S., Planning your web site with UML, WebReview: cross-training for web teams, http://webreview.com/2001/05_18/developers/index01.shtml, 2001. [6] Fungairio Martn Luis, Usabilidad de los sitios web. http://www.funga.net/index.htm, 2004. [7] ITESM, Hacia un Nuevo modelo educativo, http://www.itesm.mx/va/nuevmod /NMod. html. [8] Larman, C., Applying UML and patterns: An introduction to object-oriented analysis and design and the unified process, 2nd edition, Pearson Education, 2001. [9] Muller Fabian, Introduccin al desarrollo web para principiantes, http://www.webexperto.com, 2002. [10] Object Management Group, OMG Unified Modeling Language Specification, Version 1.5, http://www.omg.org/, 2003. [11] Quatrani, T., Introduction to the unified modeling language, Rational Developer Network, http://www.rational.com/media/uml/intro_rdn.pdf, 2001. [12] Rossi, G., Schwabe, D., Lyardet, F., Abstraction and reuse mechanisms in Web Application Models, 2000. [13] Rumbaugh, J., Blaha, M., Premerlani, W., Eddy, F. y Lorensen, W., Modelado y Diseo Orientado a Objetos, Prentice Hall, 1997. [14] Sholler, D., Web services need structure, http://www.zdnet.com/filters/printer friendly/0,6061,2881845-92,00.html, 2002. [15] Trejo, R., Computacin II, http://webdia.cem.itesm.mx/ac/rtrejo/CompuII/Index.htm.
Referencias
73

AyD Sitio Web Educativo

Cargado por

Información del documento

Título original

Derechos de autor

Formatos disponibles

Compartir este documento

Compartir o incrustar documentos

Opciones para compartir

¿Le pareció útil este documento?

¿Este contenido es inapropiado?

Copyright:

Formatos disponibles

AyD Sitio Web Educativo

Cargado por

Copyright:

Formatos disponibles

PATRONES DE DISEO ORIENTADO A OBJETOS DE SITIOS WEB

ITESM, Hacia un Nuevo modelo educativo, http://www.itesm.mx/va/nuevmod/NMod. html.

Trejo, R., Computacin II, http://webdia.cem.itesm.mx/ac/rtrejo/CompuII/Index.htm.

CAPITULO II: MARCO TERICO

Captulo II: Marco Terico

Figura 2.1.- Ejemplo de hipervnculos.

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Figura 2.2.- Origen del UML

Figura 2.3.- Diagrama de actividad

Captulo II: Marco Terico

Figura 2.4.- Actores

Captulo II: Marco Terico

Figura 2.5.- Diagrama de casos de uso

Captulo II: Marco Terico

Figura 2.6.-: Diagrama de secuencia

Figura 2.7.- Diagrama de colaboracin

Captulo II: Marco Terico

Figura 2.8.- Clases

Captulo II: Marco Terico

Figura 2.9.- Diagrama de clases

Captulo II: Marco Terico

es dependiente de interfaces con Cursos.dll, con Personas.dll y con Cobros.exe.

Figura 2.10.- Diagrama de componentes

Captulo II: Marco Terico

Figura 2.11.- Diagrama de despliegue

Captulo II: Marco Terico

Figura 2.12.- Ejemplo de estereotipos web

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Captulo II: Marco Terico

Tabla 2.1.- Combinaciones de estereotipos.

Captulo II: Marco Terico

Captulo II: Marco Terico

que se enriquece con

como por ejemplo

Tabla 2.2.- Modelo educativo en el ITESM.

Captulo II: Marco Terico

CAPITULO III: ANLISIS

Trejo, R., Computacin II, http://webdia.cem.itesm.mx/ac/rtrejo/CompuII/Index.htm.

Captulo III: Anlisis

Captulo III: Anlisis

Figura 3.1.- Jerarqua de actores

Captulo III: Anlisis

Figura 3.2.- Caso de uso Mostrar informacin

Figura 3.3.- Caso de uso Mostrar informacin detallado

Captulo III: Anlisis

Captulo III: Anlisis

Captulo III: Anlisis

Captulo III: Anlisis

Figura 3.4.- Casos de uso de la seccin actualizar informacin

Captulo III: Anlisis

Respuesta del sitio web

Figura 3.5.- Casos de uso de la seccin contestar exmenes en lnea

Captulo III: Anlisis

Figura 3.6: Organizacin bsica del sitio

Captulo III: Anlisis