| Introducción. I
INSTITUTO POLITÉCNICO NACIONAL
ESCUELA SUPERIOR DE INGENIERÍA MECÁNICA Y ELÉCTRICA
“
SERVICIOS ACADÉMICOS ATRAVÉS DE LA WEB
PARA LA ACADEMIA DE COMPUTACIÓN
”
T É S I S
QUE PARA OBTENER EL TÍTULO DE:
INGENIERO EN COMUNICACIONES Y ELECTRÓNICA
P R E S E N T A N:
HERRERA URBINA ARES ROBERTO
MENDOZA MORENO VICENTE
ORTIZ CERVANTES RICARDO
ASESORES:
ING. ARMANDO MANCILLA LEÓN M .en. C. ROBERTO GALICIA GALICIA
| Introducción. III
Dedicatoria
| Introducción. IV
Agradecimiento
En primer lugar quiero agradecer a Dios por bendecirme para llegar hasta donde he llegado. Gracias por ayudarme a levantarme en mis fracasos, por aprender de ellos y principalmente por permitirme realizar el sueño más
i porta te de i vida.
A mis padres, quienes contribuyeron a mi formación como Ser y como persona, por su sacrificio desmedido y desinteresado para procurar mi bien y el de mis hermanos, y por el apoyo incondicional que me dieron a lo largo de la carrera.
A mis hermanos, por hacer todo cuanto estuvo a su alcance con tal de ayudarme.
A mis asesores de tesis, Ing. Armando Mancilla León y M .en. C. Roberto Galicia Galicia, por su valiosa asesoría y su gran apoyo y colaboración que me brindaron para la realización de este proyecto.
A mis compañeros, por todos los momentos vividos durante la carrera y por impulsar en mí el espíritu de competencia.
A la Escuela Superior de Ingeniería Mecánica y Eléctrica (ESIME), por haberme brindado la oportunidad de estudiar mí adorada carrera: Ingeniería en Comunicaciones y Electrónica.
| Introducción. V
Tabla de contenido
Introducción. ... X Objetivo general. ...XI Objetivo particular. ...XI Descripción. ...XI
Capítulo 1. Planteamiento del problema...1
Descripción del problema...1
Formulación. ...2
Delimitación. ...2
Justificación. ...3
Capítulo 2. Marco teórico...4
Antecedentes Teóricos. ...4
Estado Del Arte ...6
Marco Conceptual. ...7
Ingeniería de Software. ...7
HTML. ...10
XHTML. ...11
DOM. ...12
XML. ...12
JavaScript. ...12
CSS. ...13
Tecnología .NET ...14
AJAX. ...16
Framework Ajax Extjs ...18
PHP. ...19
MySql ...20
Capítulo 3. Análisis ...21
Diagramas de Caso de Uso ...21
Caso de Uso de Profesores ...21
Diagrama de Caso de Uso de Profesores ...21
Caso de Uso para Alumnos ...22
| Introducción. VI
Caso de Uso para el Administrador ...23
Diagrama de Caso de Uso para el Administrador ...23
Requerimientos no funcionales. ...24
Requerimientos no funcionales del servidor. ...24
Requerimientos no funcionales del cliente. ...24
Capítulo 4. Metodología ...25
Ciclo de Vida del Software ...25
Modelo de Desarrollo Iterativo. ...25
Definición de Objetivos. ...26
Entornos de Trabajo ...28
Entorno de Desarrollo ...28
Entorno de Producción ...29
Capítulo 5. Diseño ...31
Usuarios y Permisos ...31
Separación del Portal en Niveles ...32
Nivel Principal ...32
Nivel de Acceso de Profesores ...33
Nivel de Acceso del Administrador ...33
Modelado de la Base de Datos ...34
Tablas de la Base de Datos ...35
Diagrama de Clases ...37
Diagrama de Clases para el manejo de Sesión de los usuarios. ...37
Diagrama de Clases para la Interfaz Ajax ...38
Diagrama de Clases para la Base de Datos ...39
Distribución de Archivos y Carpetas ...40
Capítulo 6. Implementación ...44
Sitio Principal ...44
Curricula ...45
Proyectos...46
Alumnos ...47
Materias ...49
| Introducción. VII
Información de los Profesores ...50
Material de Apoyo ...51
Sitio de Acceso del Profesor ...52
Sitio Personal del Profesor ...53
Videos...55
Materias ...56
Perfil ...57
Evaluación ...58
Sitio de Acceso del Administrador ...59
Avisos ...60
Anuncios Publicitarios o Banners ...61
Claves de Acceso para el Registro de Profesores ...62
E-MAIL ...63
Capítulo 7. Análisis de costos. ...64
Estudio Económico. ...64
Costo de Producción ...64
Costo de Administración ...67
Precio de Venta ...67
Desglose de cada uno de los gastos ...68
Conclusiones ...70
Recomendaciones ...71
Glosario ...72
Bibliografía ...77
Apéndice 1. Código Fuente ...78
index.php ...78
index.js ...79
index.css ...81
functions.js ...83
database-config.php...86
Database.sql ...86
fixtures.sql ...89
| Introducción. VIII
crud-class.php ...93
pwd-class.php ...95
registra.php ...96
savexml.php ...97
creapdf.php ...98
proyectos.xml ...99
configurar.php ...99
Apéndice 2. Manual de Operación ...101
Sitio del Administrador ...101
Sitio del Profesor ...104
Sitio Principal ...108
Índice de Figuras Figura 1. Esquema de evolución de HTML y XHTML ...11
Figura 2. Tecnologías agrupadas bajo el concepto de AJAX ...16
Figura 3. (izq) Modelo Tradicional de las aplicaciones Web. (der) Modelo Ajax (Garrett) ...17
Figura 4. Arquitectura de Comunicación en PHP ...19
Figura 5. Diagrama de casos de uso del profesor ...21
Figura 6. Diagrama de casos de uso para el alumno...22
Figura 7. Diagrama de casos de uso para el administrador ...23
Figura 8. Ciclo de vida del software ...25
Figura 9. Niveles de Acceso en el Portal ...32
Figura 10. Diagrama a bloques del Sitio Principal...32
Figura 11. Diagrama a bloques del Sitio de nivel de acceso de profesores ...33
Figura 12. Diagrama a bloques del sitio de nivel de acceso del administrador ...33
Figura 13. Modelo de la Base de Datos ...34
Figura 14. Sistema de clases para el manejo de Sesiones ...37
Figura 15. Sistema de clases para la interfaz AJAX ...38
Figura 16. Clase para la abstracción de datos ...39
Figura 17. Distribución de carpetas ...40
Figura 18. Distribución de Archivos I ...41
Figura 19. Distribución de Archivos II ...42
Figura 20. Distribución de archivos III ...43
Figura 21. Captura de pantalla del sitio principal ...44
Figura 23. Captura de pantalla de los Horarios de clase ...45
Figura 22. Captura de pantalla del mapa curricular ...45
| Introducción. IX
Figura 25. Captura de pantalla del formulario de registro del alumno ...47
Figura 26. Captura de pantalla de inicio de sesion del alumno ...47
Figura 27. Captura de pantalla del formulario de evaluación de profesores ...48
Figura 28. Captura de pantalla de ingreso de comentarios y sugerencias para los profesores ...48
Figura 29. Captura de pantalla de las materias de Computación ...49
Figura 30. Captura de pantalla de los sitios de profesores ...49
Figura 31. Captura de pantalla de la información del profesor ...50
Figura 32. Captura de pantalla del reproductor de videos ...51
Figura 33. Captura de pantalla del sitio principal del profesor ...52
Figura 34. Captura de pantalla para agregar contenido al sitio Personal ...53
Figura 35. Captura de pantalla del sitio personal en modo edición ...53
Figura 36. Captura de pantalla de configuración del enlace permanente ...54
Figura 37. Captura de pantalla del mensaje de configuración correcta ...54
Figura 38. Captura de pantalla para agregar un video ...55
Figura 39. Captura de pantalla para modificar el sitio de la materia ...56
Figura 40. Captura de pantalla del módulo de perfil ...57
Figura 41. Captura de pantalla de las gráficas de resultado de la evaluación de profesores ...58
Figura 42. Captura de pantalla de consulta de los comentarios hechos a los alumnos ...58
Figura 43. Captura de pantalla del inicio de Sesión del administrador ...59
Figura 44. Captura de pantalla del módulo de Avisos ...60
Figura 45. Captura de pantalla del módulo de avisos en modo de edición ...60
Figura 46. Captura de pantalla del manejador de Banners ...61
Figura 47. Captura de pantalla del generador de claves de acceso ...62
Figura 48. Captura de pantalla donde se muestran las claves de acceso ...62
Figura 49. Captura de pantalla para mostrar las claves disponibles ...63
Figura 50. Captura de pantalla para enviar un correo electrónico ...63
Figura 51. Distribución del costo total...64
Figura 52. Materiales Directos ...65
Figura 53. Sueldos y Salarios ...66
Figura 54. Gastos indirectos ...66
Figura 55. Costo de Administración...67
Índice de Tablas Tabla 1. Requerimientos no funcionales del servidor ...24
Tabla 2. Requerimientos no funcionales del cliente ...24
| Introducción. X
Introducción.
Este proyecto surge como una necesidad de estar al día en los cambios tecnológicos que se presentan, donde estar a la vanguardia es parte fundamental para las instituciones educativas, es por esto que el equipo de este proyecto de la carrera de Ingeniería en Comunicaciones y Electrónica del Instituto Politécnico Nacional, ha decidido crear un Portal Web para la Academia de Computación.
| Objetivo general. XI
Objetivo general.
Crear aplicaciones con servicio por la Web para la administración académica, aplicando los conocimientos adquiridos, utilizando la red o intranet.
Objetivo particular.
Crear aplicaciones donde se utilicen Bases de Datos como un servicio Web, facilitando el manejo de la información entre profesores y alumnos.
Descripción.
| Capítulo 1. Planteamiento del problema. 1
Capítulo 1. Planteamiento del problema.
Descripción del problema.
Dentro de la Academia de Computación, se necesita facilitar el manejo de la información generada por profesores y alumnos, como son programas de estudio, proyectos de investigación, guías de estudio, exámenes tipo, tareas, avisos para el grupo, comunicación entre profesores, y otros recursos académicos.
Toda la información existente de la academia se encuentra dispersa y no está concentrada en una sola aplicación, por esta razón nos encontramos con profesores que tienen sus páginas Web en distintos sitios. Para el alumno, esta situación se presenta difícil, al tener que buscar por muchos sitios para encontrar la información de sus distintas materias.
| Capítulo 1. Planteamiento del problema. 2 Formulación.
A partir de la investigación de varios sistemas de información de las academias a nivel de universidades, definir cuáles son las características de requerimientos funcionales y usabilidad que se necesitan, para que un Portal de la Academia de Computación brinde un servicio adecuado en el manejo de información para los estudiantes y profesores.
Delimitación.
El desarrollo del proyecto, consiste en la creación de un Portal Web que gestione las actividades académicas en el Instituto Politécnico Nacional, basados en la investigación acerca de la Ingeniería de software y en específico en la ingeniería Web.
| Capítulo 1. Planteamiento del problema. 3 Justificación.
Debido al desarrollo tecnológico y las demandas que son requeridas por los usuarios, la Academia de Computación de ESIME Zacatenco se ve en la necesidad de hacer uso de nuevas tecnologías y herramientas en los procesos de educativos, que tienen como finalidad el desarrollo de aplicaciones Web con el fin de no quedarse atrás en el avance tecnológico.
| Capítulo 2. Marco teórico. 4
Capítulo 2. Marco teórico.
Antecedentes Teóricos.
En 1989 Tim Berners Lee inventó lo que hoy en día se conoce como HTML (HyperText Markup Language) que permitía separar la implementación de la información que se le mostraba al usuario, también creó el HTTP (Hyper Text Transfer Protocol), que permitía a los servidores comunicarse con los clientes. (Berners-Lee)
Cuando aparecieron las páginas Web, solamente tenían contenido estático, lo cual para comenzar estaba bien, los científicos intercambiaban textos de sus investigaciones. Sin embargo, al popularizarse Internet los usuarios comenzaron a demandar un contenido que les permitiera interactuar con los sitios Web.
La primera solución que se creó fue la de los scripts CGI (Common Gateway Interface), los cuales pueden ser creados en diferentes lenguajes de programación, pasando por PERL hasta Visual Basic, estos scripts son rutinas que se ejecutan del lado del servidor, cuando el cliente envía una petición. No obstante, los scripts CGI son lentos y poco seguros, pero aún son usados en diversos sitios Web.
PHP (acrónimo de "PHP: Hypertext Preprocessor") es un lenguaje de "código abierto" interpretado, de alto nivel, incrustado en páginas HTML y ejecutado en el servidor. (php.net)
Fue creado en 1995, por Rasmus Lerdorf, con el objetivo de dar dinamismo a las páginas Web, su principal ventaja es la gran cantidad de extensiones que permiten aumentar su potencial, y se hizo popular varios años después.
| Capítulo 2. Marco teórico. 5 En 1997, cuando Netscape y Microsoft lanzaron las versiones 4.0 de sus navegadores, los cuales implementaban la versión 1.1 del protocolo HTTP, los desarrolladores podían crear nuevas aplicaciones basadas en DHTML1. La combinación de estas tecnologías, le permitía a los desarrolladores modificar el contenido y la estructura de las páginas rápidamente.
Sin embargo, las implementaciones para cada uno de estos navegadores eran diferentes, lo cual ha sido un problema para DHTML. Además, los costos de desarrollo también fueron altos, debido a la gran cantidad de código necesario para crear las aplicaciones.
La W3C2 creó XML (eXtensible Markup Language) en 1998, como una forma de representar información, también se pretendía estandarizar las páginas Web, debido a que las aplicaciones de XML han llegado mucho más lejos y actualmente, es usado como un metalenguaje en diferentes aplicaciones tanto de Web, como de plataforma.
1 Dynamic Hyper Text Language.- Es una unión entre HTML, CSS (Cascading Style Sheets) y JavaScript. 2
| Capítulo 2. Marco teórico. 6 Estado Del Arte
Las páginas que actualmente se están desarrollando obedecen a la demanda de un usuario que requieren de una respuesta rápida, y la inclusión de un mayor número de servicios como podrían ser televisión, telefonía, radio, seguridad, automatización en algunas tareas o servicios, para lo cual también hay que hacer uso de las ultimas herramientas de desarrollo y lenguajes orientados a servicios específicos.
Anteriormente la Academia de Computación contaba con una página web, la cual ya no se encuentra disponible en la red; esta página no cubría las necesidades actuales y demandantes de los docentes de la Academia de Computación, además de que no era muy formal, pero esto no quita que era de mucha utilidad para la comunidad estudiantil, en ella se podían encontrar vínculos para sitios de profesores pertenecientes a la academia, guías de estudio, algunos apuntes y programas de estudio, esto nos sirvió para ver que se tenía actualmente y partiendo de ahí, se buscaron otros servicios que se podrían brindar a profesores y alumnos, se consultaron otras páginas de diferentes instituciones académicas, como lo son, el Tecnológico de Monterrey, UNAM y UAM, entre otras.
Actualmente en la realización de páginas Web se está usando más, el software de distribución libre como lo es PHP y las Bases de Datos MySQL, usando plataformas Linux en servidores Apache, esto no implica que no se estén usando aunque con menos frecuencia los servidores Microsoft, para proyectos basados en tecnología ASP, los cuales han sido lentamente desplazados por las tecnologías mencionadas anteriormente.
Se están elaborando páginas Web homologadas por el W3C (World Wide Web Consortium), como máximo organismo internacional que lidera la World Wide Web, hacia su máximo potencial con la creación de protocolos, guías y pautas a seguir para un desarrollo Web lógico y uniforme, teniendo en cuenta lo antes mencionado, con lo que se consigue que las páginas Web sean compatibles con el hardware y software que se están usando en la actualidad.
| Capítulo 2. Marco teórico. 7 Marco Conceptual.
Ingeniería de Software.
Con el crecimiento espectacular de la demanda de sistemas de computación cada vez más y más complejos, asociado a la inmadurez del propio sector informático y a la falta de métodos y recursos, provocó lo que se llamó la crisis del software (en palabras de Edsger Dijkstra) entre los años 1965 y 1985. (Marc Gibert Ginestá, 2005)
Así pues, desde 1985 hasta el presente, han ido apareciendo herramientas, metodologías y tecnologías que se presentaban como la solución definitiva al problema de la planificación, previsión de costes y aseguramiento de la calidad en el desarrollo de software.
Entre las herramientas, la programación estructurada, la programación orientada a objetos, la programación orientada a los aspectos, la documentación, los estándares, los servicios Web y el lenguaje UML (entre otros) fueron todos anunciados en su momento como la solución a los problemas de la ingeniería del software.
Ciclo de vida del software
Se llama ciclo de vida del software a las fases por las que pasa un proyecto de software desde que es concebido, hasta que está listo para usarse. Es por eso que se han propuesto varios modelos: en cascada, incremental, evolutivo, en espiral, o concurrente, para describir el progreso real del proyecto.
| Capítulo 2. Marco teórico. 8 A continuación se describirán las principales fase del modelo en cascada.
Análisis
El análisis de requisitos es la primera fase de la vida de un proyecto. En ella, habrá que recoger tanto las necesidades del usuario del producto, al más alto nivel, como la especificación de los requisitos de software del sistema.
Diseño
El diseño es la primera etapa técnica del proceso de Ingeniería de Software, consiste en producir un modelo o representación técnica del software que se va a desarrollar.
Implementación.
En esta fase de desarrollo de software se realiza la codificación y se lleva a cabo todo lo planeado en las fases de análisis y diseño.
Pruebas
Los elementos, ya programados, se ensamblan para componer el sistema y se comprueba que funciona correctamente antes de ser puesto en explotación.
Implantación
| Capítulo 2. Marco teórico. 9
UML
Existen muchas técnicas orientadas a modelar un aspecto de los sistemas de información, Bases de Datos, interfaces de usuario, componentes, flujos de datos, etc., pero pocas han aportado un enfoque global al problema.
A finales de los años noventa, una empresa en particular (Rational Corp.) empezó una iniciativa para desarrollar un estándar de modelado a la que se sumaron científicos y otras empresas del sector. Así nació UML (Unified Modeling Language), que hoy en día sigue siendo el método de modelado más completo y aceptado en la industria.
Un diagrama nos permitirá representar gráficamente un conjunto de elementos del modelo, a veces como un grafo con vértices conectados, y otras veces como secuencias de figuras conectadas que representen un flujo de trabajo.
Cada punto de vista del sistema (y cada nivel de detalle) podrá modelarse y ese modelo podrá representarse gráficamente. Lo que UML propone es una notación y un conjunto de diagramas que abarcan las perspectivas más relevantes del sistema. Estos diagramas son:
Diagrama de casos de uso Diagrama de clases
Diagrama de Casos de Uso
Los casos de uso son una herramienta esencial en la toma de requisitos del sistema. Nos permiten expresar gráficamente las relaciones entre los diferentes usos del mismo y sus participantes o actores. El resultado es un conjunto de diagramas muy fácilmente entendibles tanto por el cliente, como por los analistas del proyecto.
Diagrama de Clases
| Capítulo 2. Marco teórico. 10 HTML.
HyperText Markup Language (Lenguaje de marcación de Hipertexto) es el lenguaje de marcas de texto utilizado normalmente en la www (World Wide Web).
Fue creado en 1986 por el físico nuclear Tim Berners-Lee; el cual tomó dos herramientas preexistentes: El concepto de Hipertexto (Conocido también como link o ancla), que permite conectar dos elementos entre sí y el SGML (Lenguaje Estándar de Marcación General), el cual sirve para colocar etiquetas o marcas en un texto que indique como debe verse. HTML no es propiamente un lenguaje de programación como C++, Visual Basic, etc., sino un sistema de etiquetas. HTML no presenta ningún compilador, por lo tanto algún error de sintaxis que se presente, éste no lo detectará y se visualizara en la forma como éste lo entienda.
El funcionamiento de HTML se limita a los siguientes pasos:
i. Se abre el explorador.
ii. Se envía una solicitud de archivos HTML al servidor remoto mediante la URL.
iii. El servidor procesa la solicitud y envía datos al navegador del usuario.
iv. Una vez que los datos llegan al navegador del usuario, interpreta todas esas etiquetas, imágenes, sonidos, entre otros, reconstruyendo la página como es originalmente.
| Capítulo 2. Marco teórico. 11 XHTML.
XHTML (Lenguaje de Marcado de Hipertexto Extensible) es una versión más estricta y limpia de HTML, que nace precisamente con el objetivo de remplazar a HTML ante su limitación de uso, con las cada vez más abundantes herramientas basadas en XML. (w3c)
XHTML, al estar orientado al uso de un etiquetado correcto, exige una serie de requisitos básicos a cumplir, en lo que a código se refiere. Entre estos requisitos básicos se puede mencionar una estructuración coherente dentro del documento, donde se incluirían elementos correctamente anidados, etiquetas en minúsculas, elementos cerrados correctamente, atributos de valores entrecomillados, etc.
XHTML es muy similar al lenguaje HTML. De hecho, XHTML no es más que una adaptación de HTML al lenguaje XML. Técnicamente, HTML es descendiente directo del lenguaje SGML, mientras que XHTML lo es del XML. Esto se puede apreciar mejor en la siguiente figura.
| Capítulo 2. Marco teórico. 12 DOM.
DOM (Document Object Model) es la representación orientada a objetos de una página, que puede ser modificada con un lenguaje de encriptación como JavaScript. Fue estandarizado por la W3C en diferentes niveles. El DOM nivel 1 fue terminado en Octubre de 1998 y dio como resultado HTML 4.0 y XML 1.0, el DOM nivel 2 terminado en Noviembre de 2000 incluye a CSS, pero aún no está implementado por todos los navegadores y la última es conocida como DOM nivel 3, incluye la versión 1.1 de XML, XML Schema 1.0 y SOAP 1.2, estos niveles están diseñados para crear la forma de modificar el contenido de un documento DOM con contenido XML independientemente del Sistema Operativo y el lenguaje que se desea usar.
DOM está basado en la orientación de objetos. Define los objetos que son necesarios para representar y modificar documentos, los atributos y la relación entre dichos atributos.
XML.
XML (Extensible Markup Language) es un Lenguaje de Etiquetado Extensible muy simple, pero estricto, que juega un papel fundamental en el intercambio de una gran variedad de datos. Es un lenguaje muy similar a HTML pero su función principal es describir datos y no mostrarlos, como es el caso de HTML. XML es un formato que permite la lectura de datos a través de diferentes aplicaciones. (w3c)
JavaScript.
JavaScript es un lenguaje de programación que se utiliza principalmente para crear páginas Web dinámicas.
Una página Web dinámica es aquella que incorpora efectos como texto que aparece y desaparece, animaciones, acciones que se activan al pulsar botones y ventanas con mensajes de aviso al usuario.
Técnicamente, JavaScript es un lenguaje de programación interpretado, por lo que no es necesario compilar los programas para ejecutarlos. En otras palabras, los programas escritos con JavaScript se pueden probar directamente en cualquier navegador, sin necesidad de procesos intermedios.
| Capítulo 2. Marco teórico. 13 CSS.
CSS (Cascading Style Sheets) es un lenguaje de hojas de estilos, creado para controlar el aspecto o presentación de los documentos electrónicos definidos con HTML y XHTML. CSS es la mejor forma de separar los contenidos y su presentación y es imprescindible para crear páginas Web complejas.
La separación de los contenidos y su presentación presenta numerosas ventajas, ya que obliga a crear documentos HTML/XHTML bien definidos y con significado completo (también llamados docu e tos se á ticos ). Además, mejora la accesibilidad del documento, reduce la complejidad de su mantenimiento y permite visualizar el mismo documento en infinidad de dispositivos diferentes.
| Capítulo 2. Marco teórico. 14 Tecnología .NET
.NET es un proyecto de Microsoft para crear una nueva plataforma de desarrollo de software con énfasis en transparencia de redes, con independencia de la plataforma de hardware y que permita un rápido desarrollo de aplicaciones.
La norma (incluido en ECMA-335, ISO/IEC 23271) que define el conjunto de funciones que debe implementar la biblioteca de clases base (BCL por sus siglas en inglés), define un conjunto funcional mínimo que debe implementarse para que el marco de trabajo sea soportado por un sistema operativo.
.NET soporta ya más de 20 lenguajes de programación y es posible desarrollar cualquiera de los tipos de aplicaciones soportados en la plataforma con cualquiera de ellos.
Algunos de los lenguajes desarrollados para el marco de trabajo .NET son: C#, Visual Basic, Delphi (Object Pascal), C++, J#, Perl, Python, Fortran, Cobol y PowerBuilder.
Common Language Runtime (CLR)
Este es el lenguaje insignia de .NET Framework (marco de trabajo .NET) y pretende reunir las ventajas de lenguajes como C, C++ y Visual Basic en uno solo. El CLR es el verdadero núcleo del Framework de .NET, entorno de ejecución en el que se cargan las aplicaciones desarrolladas en los distintos lenguajes, ampliando el conjunto de servicios del sistema operativo.
Características
Es el encargado de proveer lo que se llama coadministrador, es decir, un entorno que provee servicios automáticos al código que se ejecuta.
Cargador de clases: permite cargar en memoria las clases.
Compilador MSIL a nativo: transforma código intermedio de alto nivel independiente del hardware que lo ejecuta a código de máquina propio del dispositivo que lo ejecuta.
Administrador de código: coordina toda la operación de los distintos subsistemas del Common Language Runtime.
Recolector de basura: elimina de memoria objetos no utilizados. Motor de seguridad: administra la seguridad del código que se ejecuta.
Motor de depuración: permite hacer un seguimiento de la ejecución del código aún cuando se utilicen lenguajes distintos.
| Capítulo 2. Marco teórico. 15 Administrador de excepciones: maneja los errores que se producen durante la ejecución del código.
Soporte de multiproceso (threads): permite ejecutar código en forma paralela. Empaquetador de COM: coordina la comunicación con los componentes COM para que puedan ser usados por el .NET Framework.
Soporte de la Biblioteca de Clases Base: interfaz con las clases base del .NET Framework. Esto quiere decir que existen tipos de estructuras como es la de java y la .NET
Biblioteca de clases .NET
La Biblioteca de Clases Base (BCL por sus siglas en inglés) maneja la mayoría de las operaciones básicas que se encuentran involucradas en el desarrollo de aplicaciones, incluyendo entre otras:
Interacción con los dispositivos periféricos. Manejo de datos (ADO.NET).
Administración de memoria. Cifrado de datos.
Transmisión y recepción de datos por distintos medios (XML, TCP/IP).
Administración de componentes Web que corren tanto en el servidor como en el cliente (ASP.NET).
Manejo y administración de excepciones. Manejo del sistema de ventanas.
Herramientas de despliegue de gráficos (GDI+).
Herramientas de seguridad e integración con la seguridad del sistema operativo. Manejo de tipos de datos unificado.
Interacción con otras aplicaciones.
Manejo de cadenas de caracteres y expresiones regulares. Operaciones aritméticas.
Manipulación de fechas, zonas horarias y periodos de tiempo. Manejo de arreglos de datos y colecciones.
Manipulación de archivos de imágenes. Aleatoriedad.
Generación de código. Manejo de idiomas.
Auto descripción de código.
| Capítulo 2. Marco teórico. 16 AJAX.
El término AJAX se a uñó po p i e a vez e el a tí ulo Ajax: A New Approach to Web Applications , publicado por Jesse James Garrett el 18 de Febrero de 2005. Hasta ese momento, no existía un término normalizado que hiciera referencia a un nuevo tipo de aplicación Web que estaba apareciendo.
En realidad, el término AJAX es un acrónimo de Asynchronous JavaScript + XML,
ue se puede t adu i o o JavaScript así o o + XML .
El artículo define AJAX de la siguiente forma:
Ajax no es una tecnología en sí mismo. En realidad, se trata de la unión de varias tecnologías que se desarrollan de forma autónoma, y que se unen de formas nuevas y sorprendentes. (Garrett)
Las tecnologías que forman AJAX son:
XHTML y CSS, para crear una presentación basada en estándares. DOM, para la interacción y manipulación dinámica de la presentación. XML, XSLT y JSON, para el intercambio y la manipulación de información. XMLHttpRequest, para el intercambio asíncrono de información.
JavaScript, para unir todas las demás tecnologías.
En la siguiente figura se muestran estas tecnologías que son agrupadas bajo el concepto de AJAX.
| Capítulo 2. Marco teórico. 17 Desarrollar aplicaciones AJAX, requiere un conocimiento avanzado de todas y cada una de las tecnologías anteriores.
En las aplicaciones Web tradicionales, las acciones del usuario en la página, desencadenan llamadas al servidor.
Una vez procesada la petición del usuario, el servidor devuelve una nueva página HTML al navegador del usuario.
En la siguiente figura se puede observar el modelo tradicional de las aplicaciones Web, así como el modelo Ajax.
Esta técnica tradicional para crear aplicaciones Web funciona correctamente, pero no crea una buena sensación al usuario. Al realizar peticiones continuas al servidor, el usuario debe esperar a que se recargue la página con los cambios solicitados. Si la aplicación debe realizar peticiones continuas, la aplicación Web se convierte en algo más molesto que útil.
AJAX permite mejorar completamente la interacción del usuario con la aplicación, evitando las recargas constantes de la página, ya que el intercambio de información con el servidor se produce en un segundo plano.
| Capítulo 2. Marco teórico. 18 Las aplicaciones construidas con AJAX eliminan la recarga constante de páginas, mediante la creación de un elemento intermedio entre el usuario y el servidor. La nueva capa intermedia de AJAX mejora la respuesta de la aplicación, ya que el usuario nunca se encuentra con una ventana del navegador vacía, esperando la respuesta del servidor.
Framework Ajax Extjs
Soporte definido en la cual otro proyecto de software puede ser organizado y desarrollado. Típicamente, un Framework puede incluir soporte de programas, bibliotecas y un lenguaje interpretado entre otros software, para ayudar a desarrollar y unir los diferentes componentes de un proyecto.
Un Framework representa una arquitectura de software que modela las relaciones generales de las entidades del dominio. Provee una estructura y una metodología de trabajo, la cual extiende o utiliza las aplicaciones del dominio.
| Capítulo 2. Marco teórico. 19 PHP.
PHP es un lenguaje de scripting que permite la generación dinámica de contenidos en un servidor Web. Su nombre oficial es PHP: HyperText Preprocessor. (Rubio)
La primera versión de PHP se remonta a 1994, y en sus orígenes, no eran más que una serie de scripts CGI escritos en Perl. Sin embargo, fue reescrito en su tercera versión por Andi Gutmans y Zeev Suraski, con el fin de mejorar el funcionamiento y agregar nuevas funcionalidades, basado en C / C++, pero con funciones de otros lenguajes como Pascal, Basic y Perl.
En el siguiente esquema se puede observar el proceso de la arquitectura de comunicación den PHP.
La versión más reciente de PHP es la 5.0, tiene ventajas como el soporte de XML (libxml2 library), una nueva extensión SimpleXML, extensión SOAP (interoperabilidad), MySQLi, mejora del streaming para acceder a operaciones sobre sockets. PHP está muy relacionado con HTML, ya que en algunos casos hay código PHP insertado dentro de HTML; una vez interpretado PHP, éste genera una página HTML que será enviada al cliente.
| 20 MySql
Es un gestor de Base de Datos sencillo de usar e increíblemente rápido. También es uno de los motores de Base de Datos más usados en Internet, la principal razón de esto, es que es software libre para aplicaciones no comerciales.
Las características principales de MySQL son:
Es un gestor de Base de Datos. Una Base de Datos es un conjunto de datos y un gestor de Base de Datos, es una aplicación capaz de manejar este conjunto de datos de manera eficiente y cómoda.
Es una Base de Datos relacional. Una Base de Datos relacional es un conjunto de datos que están almacenados en tablas, entre las cuales se establecen unas relaciones para manejar los datos, de una forma eficiente y segura. Para usar y gestionar una Base de Datos relacional se usa el lenguaje estándar de programación SQL.
Es Open Source. El código fuente de MySQL se puede descargar y está accesible a cualquiera, por otra parte, usa la licencia GPL3 para aplicaciones no comerciales.
Es una Base de Datos muy rápida, segura y fácil de usar. Gracias a la colaboración de muchos usuarios, la Base de Datos se ha ido mejorando optimizándose en velocidad. Por eso es una de las Bases de Datos más usadas en Internet.
3 Licencia Pública General.- Es una licencia creada por la Free Software Foundation y orientada
| Capítulo 3. Análisis 21
Capítulo 3. Análisis
Diagramas de Caso de Uso
Los diagramas de caso de uso (Use Case Diagram), definidos en UML, son una representación gráfica de las interacciones de los usuarios y su funcionalidad. Los casos de uso nos sirven para obtener los requisitos de un sistema o de un software.
Caso de Uso de Profesores
Los profesores tendrán un mayor acceso a la información contenida del sitio Web. Revisar la Evaluación de profesores.
Visualizar y editar sus sitios personales. Modificar su información personal.
Subir materiales de apoyo como videos Académicos. Editar los Sitios de las Materias que imparte.
Diagrama de Caso de Uso de Profesores
A continuación en la figura 5 se puede visualizar este diagrama de Caso de Uso del profesor.
| Capítulo 3. Análisis 22 Caso de Uso para Alumnos
El uso general de un estudiante para la aplicación Web, se basa simplemente en la información que los profesores proporcionen y las opciones son:
Visualización de la página principal.
Visualización de los sitios de las materias y profesores. Visualización de los programas sintéticos de cada materia. Visualización de horarios y datos de los profesores.
Visualización de los proyectos curriculares.
Acceso a materiales de apoyo como videos Académicos. Realizar la evaluación de Profesores.
Diagrama de Caso de Uso de los Alumnos
A continuación en la figura 6 se puede visualizar este diagrama de Caso de Uso para el alumno.
| Capítulo 3. Análisis 23 Caso de Uso para el Administrador
El Administrador tiene los permisos y posibilidades para manejar información fundamental en el Portal Web.
Administrar proyectos de tesis. Envío de Correo Electrónico. Manejadores de Banners
Envío de Avisos para la Academia de Computación.
Administrar cuentas de acceso para el registro de profesores.
Diagrama de Caso de Uso para el Administrador
A continuación en la figura 7 se puede visualizar este diagrama de Caso de Uso para el Administrador.
| Capítulo 3. Análisis 24 Requerimientos no funcionales.
Requerimientos no funcionales del servidor.
Estos requerimientos son las características necesarias para que el Portal Web pueda ser alojado en un servidor, los cuales se muestran en la Tabla 1.
Nombre Descripción Tipo Aceptación Criterio de
Apache
El servidor HTTP más ampliamente disponible en Internet. Soporta los lenguajes
PERL y PHP.
Servidor
Web Multiplataforma Software libre
PHP para el desarrollo de Webs Lenguaje de programación dinámicas
Lenguaje de
servidor Multiplataforma Software libre
Windows server, Unix o
Linux.
Sistema Operativo que puede
trabajar como servidor Web operativo Sistema Alto desempeño
Mysql MySQL es el servidor de Bases de Datos relacionales más
popular en software libre.
Gestor de Bases de
Datos
Software libre Multiplataforma
Tabla 1. Requerimientos no funcionales del servidor
Requerimientos no funcionales del cliente.
Estos requerimientos son las características necesarias para que el Portal Web pueda ser visualizado por los usuarios, los cuales se muestran en la Tabla 2.
Nombre Tipo Versión
Windows Sistema Operativo 2000, Xp, Vista
Linux Sistema Operativo Kernel 2.6
Mac Os Sistema Operativo 10 o superior
Internet Explorer Navegador 6 o superior
Firefox Navegador 1.5, 2.0, 3.0
Safari Navegador 3 o superior
Opera Navegador 9 o superior
| Capítulo 4. Metodología 25
Capítulo 4. Metodología
Ciclo de Vida del Software
En cuanto al ciclo de vida del software, hemos decidido tomar el modelo iterativo en el cual el desarrollo del software siempre continúa.
Según Grady Booch, el modelo de desarrollo iterativo e incremental, Es u
proceso que involucra la continua integración de la arquitectura del sistema, para poder generar los ejecutables, do de ada u o de ellos i luye u a ejo a so e los ot os .
Modelo de Desarrollo Iterativo.
Dado que el proyecto de software que pretendemos realizar es largo, lo vamos a trabajar como multiproyectos, con lo cual con cada iteración obtendremos una versión del software. En la figura 8 se muestra un esquema del ciclo de vida del software.
Figura 8. Ciclo de vida del software
| Capítulo 4. Metodología 26 Las principales ventajas que nos proporciona este modelo son:
En caso de que alguna iteración falle, con la ayuda de las iteraciones controladas, sólo se pierde el esfuerzo de esa iteración y no del proyecto completo.
Acelera la velocidad de desarrollo de los programadores, dado que es más eficiente trabajar con objetivos a corto plazo.
Optar por este modelo asegura mejores soluciones a necesidades muy cambiantes, ya que es fácilmente adaptable a cambios del entorno.
Definición de Objetivos.
Se definieron los objetivos en cada vuelta del ciclo. Se realizaron 8 ciclos, los cuales generaron 8 versiones que hemos nombrado con lo correspondiente a las fases de desarrollo, definidas en la ingeniería de software.
Versiones Alfa
Estas versiones son las primeras que el equipo de desarrollo entrega, y por tanto sólo contemplan algunas de las funcionalidades del producto final, con muchos errores y poca estabilidad.
Versiones Beta
Estas versiones proporcionan las funcionalidades más importantes del proyecto. Las versiones beta son generalmente usadas para dar a conocer un producto y que pueda ser probado.
Versión RC
| Capítulo 4. Metodología 27 A continuación veremos los objetivos más importantes de cada ciclo o iteración.
Alfa 1
Desarrollar la Interfaz Ajax. Crear Imágenes y Logos.
Definir la distribución de Archivos y Carpetas.
Alfa 2
Agregar soporte de pestañas a la interfaz Ajax. Crear el Módulo de Mapa Curricular.
Crear la ventana de Horarios.
Alfa 3
Creación del sistema de gestión de profesores. Creación del sistema de gestión del Administrador. Creación del módulo Sitio Personal.
Sesiones de los Profesores y el Administrador.
Beta 1
Creación del módulo Proyectos de Tesis. Sesión de Alumnos.
Creación del módulo Evaluación de profesores. Creación del módulo Manejador de Banners.
Beta 2
Agregar Soporte para proyectos en formato PDF. Creación del módulo Perfil del Profesor.
Creación del módulo Sistema de Avisos. Creación del módulo Materias tipo Wiki.
Beta 3
Creación del sistema de Registro de Profesores y Alumnos. Creación del módulo Videos Académicos.
Optimizar la velocidad de carga del Portal.
RC
Creación del módulo Correo Electrónico Masivo. Agregar Enlace Permanente al módulo Sitio Personal.
| Capítulo 4. Metodología 28 Entornos de Trabajo
Un entorno de trabajo está definido por la ingeniería de software, como todas las herramientas necesarias para desarrollar, producir y probar una aplicación.
Existen tres entornos de trabajo: Entorno de Desarrollo, Entorno de Producción, Entorno de Pruebas.
Entorno de Desarrollo
El entorno de desarrollo es el conjunto de las aplicaciones que utilizamos para desarrollar el Portal Web. Entiéndase por desarrollar como diseñar, modelar y programar.
Eclipse PDT (PHP Development Tools)
Es un proyecto de software libre basado en el IDE Eclipse, que nos proporcionó todos los componentes necesarios, para desarrollar en el lenguaje de programación PHP fácilmente y rápidamente.
Aptana Studio
Es un plugin para Eclipse, el cual proporciona editores avanzados para los siguientes lenguajes: HTML, XHtml, JavaScript, Css y XML.
Umbrello
Es una herramienta de software libre que nos permite crear diagramas UML. Este nos permite la mayoría de los diagramas soportados por UML versión 2:
Diagrama de casos de uso. Diagrama de componentes. Diagrama de despliegue. Diagrama de modelo entidad-relación.
| Capítulo 4. Metodología 29
PhpMyAdmin
Es una herramienta de software libre escrita en PHP, que nos permite manejar las Base de Datos en Mysql. Actualmente puede crear y eliminar Bases de Datos, crear, eliminar y alterar tablas, borrar, editar y añadir campos, ejecutar cualquier sentencia SQL, administrar privilegios, exportar datos en varios formatos, etc.
MySql Workbench OSS
Es una herramienta de software libre, que nos permite diseñar de forma visual, generar y gestionar Bases de Datos MySQL. Se pueden crear complejos modelos E/R, gestión de versiones del esquema de una Base de Datos, generación automática de documentación de una Base de Datos, ingeniería inversa, etc.
Entorno de Producción
El entorno de producción es el conjunto de software, que nos permite tener el Portal Web de la Academia de Computación en un servidor Web y que sea accesible mediante Internet.
El entorno de producción puede ser multiplataforma pero en nuestro caso hemos decidido especificar el que más se acerque a la filosofía del software libre.
Sistema operativo GNU/Linux
Es el sistema operativo más utilizado con licencia libre, ofrece una gran seguridad y trabaja perfectamente en servidores en Internet.
Apache
| Capítulo 4. Metodología 30
PHP
Es un lenguaje de programación, tanto estructurado como orientado a objetos que se utiliza para complementar el HTML logrando hacer una Web más interactiva y funcional. Gracias a este lenguaje se pueden desarrollar cualquier tipo de servicios, a través de su sitio Web.
Mysql
Es un servidor de Bases de Datos relacionales, en la comunidad de software libre es el más popular y está desarrollado por Sun MicroSystems. Cabe destacar su gran potencial unido a la programación PHP.
PHP-GD
| Capítulo 5. Diseño 31
Capítulo 5. Diseño
Usuarios y Permisos
En el Portal Web manejamos cuentas de usuarios, por lo cual es necesario separar los permisos a distintos niveles del sitio. Es por eso que se definen cuatro tipos de cuentas: Administrador, Profesor, Alumno e Invitado.
Invitado.- Posee el mínimo de permisos, lo cual implica navegación solamente por la página principal.
Alumno.- Incluye los permisos de un Invitado pero además permite ingresar a sitios restringidos como al módulo Evalua ió de P ofeso es .
Profesor.- Este tipo de usuario cuenta con permisos especiales, como lo son: manejo de su sitio personal, modificación de su perfil y otros que se definirán más adelante.
| Capítulo 5. Diseño 32 Separación del Portal en Niveles
Siguiendo una de las frases ele es de Julio Césa , Divide y Ve e ás , hemos distribuido el Portal Web en tres niveles: Nivel Principal, Nivel de Acceso de Profesores, Nivel de Acceso del Administrador, como se muestra en la siguiente figura:
Figura 9. Niveles de Acceso en el Portal Nivel Principal
Es el sitio donde cualquier persona puede ingresar y consultar la información que contiene. En la siguiente figura se muestra el diagrama a bloques de este nivel principal.
Figura 10. Diagrama a bloques del Sitio Principal
Portal Web de la
Academia de
Computación
Nivel Principal
Nivel de Acceso
a Profesores
Nivel de Acceso
al Administrador
Sitio Principal
Mapa Curricular Información de los Profesores
Horarios
Avisos a la Comunidad
Académica
Proyectos de Titulación
Evaluación de Profesores
Sitios Personales
de Profesores Videos
Sitios de Materias de Computación
| Capítulo 5. Diseño 33 Nivel de Acceso de Profesores
Con ayuda de este sitio, los profesores pueden fácilmente publicar su sitio personal, los sitios de las diferentes materias de computación, modificar sus datos personales y subir algún video académico. En la siguiente figura se muestra el diagrama a bloques de este nivel de acceso a profesores.
Figura 11. Diagrama a bloques del Sitio de nivel de acceso de profesores Nivel de Acceso del Administrador
Este sitio permite al administrador modificar borrar y actualizar la información importante de la Academia de Computación. En la siguiente figura se muestra el diagrama a bloques de este nivel de acceso al administrador.
Figura 12. Diagrama a bloques del sitio de nivel de acceso del administrador
Nivel de Acceso de Profesores
Sitio Personal MateriasSitios de
Información
Personal Videos
Resultados de Evaluación Profesores
Nivel de Acceso del Administrador
Manejo de Banners
Manejo de Avisos
Manejo de Claves de Acceso
Proyectos de Titulación
| Capítulo 5. Diseño 34 Modelado de la Base de Datos
El modelado de la Base de Datos comprende la estructura de la Base de Datos, así como las relaciones que existen entre cada una de las tablas. Este modelo se muestra en la figura 13. El Código Fuente esta descrito en los archivos Database.sql, database-config.php y fixtures.sql del Apéndice.
| Capítulo 5. Diseño 35 Tablas de la Base de Datos
profesoresCompuICE
Esta es la tabla más importante de la Base de Datos, donde se concentran las cuentas de los profesores, es decir los nombres de usuarios y sus contraseñas. A demás el campo user_id que es el identificador de usuario que sirve para relacionar con las otras tablas.
materiasProfesores
Esta tabla contiene la relación entre materias y profesores, dicho de otro modo contiene las materias que imparte cada profesor.
Materias
Esta tabla almacena las materias de la Academia de Computación y su respectivo identificador.
Wiki
Esta tabla almacena todos los sitios de las materias impartidas por la Academia de Computación. Los campos materia_id y profesor_id, son índices que permiten relacionarse con las tablas materias y profesoresCompuICE respectivamente.
Sugerencias
Esta tabla almacena las sugerencias realizadas por los alumnos, hacia sus profesores en el módulo de evaluación de profesores.
EvaluaciónProfesores
Aquí se almacenan los resultados del proceso de evaluación de los profesores. Esta tabla es crucial para generar las gráficas de resultados.
infoProfesores
| Capítulo 5. Diseño 36
Permalink
Esta tabla contiene los enlaces permanentes de cada profesor que lo configure, obteniendo así acceso directo a su sitio personal vía la siguiente dirección: http://148.204.x.x/academia/sitio/nombre_del_enlace
sitesWeb
Esta tabla almacena todos los sitios personales de los profesores. Contiene campos como el título, texto, y la fecha de creación, así como el campo profesor_id que sirve para relacionar con la tabla de los profesores.
Videos
En esta tabla se almacenan todos los videos que los profesores suben al servidor. Esta tabla contiene campos como la dirección del video, el título, la duración. Estos campos son de suma importancia para el módulo de Videos Académicos.
Alumnos
Esta tabla agrupa todos los datos personales para las cuentas de los estudiantes, como son: nombre y apellidos, boleta, grupo, semestre, su cuenta de usuario y password.
proyectosCompuICE
Aquí se almacenan los proyectos de titulación curricular que los profesores les ofrecen a sus alumnos.
Claves
Contiene las claves que permiten a los profesores registrarse en el Portal Web.
Banners
Esta tabla contiene información sobre los anuncios publicitarios, culturales, académicos y deportivos que aparecen el sitio principal.
Avisos
| Capítulo 5. Diseño 37 Diagrama de Clases
Los diagramas de clases son los más utilizados para el diseño de sistemas de software. Son parte fundamental en la ingeniería de software y quedan definidos en UML. Muestran un conjunto de clases, interfaces, y sus relaciones entre ellas.
Diagrama de Clases para el manejo de Sesión de los usuarios.
Este diagrama se compone de cuatro clases, que se relacionan a través de la herencia que existe con la clase Session. La clase Session provee de atributos y métodos comunes a sus clases hijas. Cada Clase hija posee sus propios atributos y métodos, con los cuales se pretende tener el control sobre los usuarios que ingresan en el Portal. Como se muestra a continuación en el siguiente diagrama. El Código Fuente esta descrito en el archivo sesión-class.php del Apéndice.
| Capítulo 5. Diseño 38 Diagrama de Clases para la Interfaz Ajax
Este diagrama de clases muestra las relaciones que existen entre las diferentes clases que componen a la interfaz Ajax. La interfaz Ajax es la encargada de procesar todas las peticiones XHR (XML HTTP Request), y presentarlas en el sitio principal a través de Pestañas o Ventanas; como se muestra a continuación. El Código Fuente esta descrito en los archivos index.php, index.js, index.css y functions.js del Apéndice.
| 39 Diagrama de Clases para la Base de Datos
El manejo de Bases de Datos es muy complejo, es por eso que se creó una clase que encapsule el comportamiento de la misma. A esta clase la hemos llamado CRUD. CRUD es el acrónimo de Crear, Obtener, Actualizar y Borrar (Create, Retrieve, Update y Delete en inglés). Es usado para referirse a las funciones básicas en Bases de Datos, o la capa de persistencia en un sistema de software; como se ve en la siguiente figura. El Código Fuente esta descrito en el archivo crud-class.php del Apéndice.
| 40 Distribución de Archivos y Carpetas
Para la mejor organización de nuestra aplicación, se debe de tener una distribución de carpetas, en la cual se puedan agrupar archivos relacionados, y no tener en desorden todos los archivos. A continuación en la siguiente figura se muestran la distribución de las carpetas del Portal de la Academia de Computación.
| 41 En la siguiente figura se pueden ver los archivos más importantes, para el
desarrollo del Portal Web de la Academia de Computación.
| 42 A continuación, se muestran los archivos más importantes que están debajo del directorio admin:
| Capítulo 6. Implementación 44
Capítulo 6. Implementación
Recordando lo explicado en capítulos anteriores, la página se dividió en tres partes, las cuales son:
Página principal Página de profesores Página del administrador
Este capítulo será centrado en la explicación a detalle de cada una de estas secciones, mencionando sus opciones para el alumno, profesor y para el público en general, se mostrará el funcionamiento de cada una de las opciones, sus atributos, y la forma de acceso a cada uno de ellos.
Sitio Principal
La página principal a la que tendrán acceso cualquier persona llámese alumno o cualquier otra persona ajena a la institución, cuenta con un menú principal donde se puede consultar la curricula de los profesores, proyectos , alumnos, materias, sitios de profesores, información de profesores, material de apoyo, también se pueden consultar los avisos puestos por el administrador y un área de enlaces a páginas de la institución o a sitios personales de profesores, en la siguiente figura se puede apreciar la página principal.
| Capítulo 6. Implementación 45 Curricula
En esta opción se pueden consultar los mapas curriculares de las materias impartidas por la Academia de Computación, desde primer semestre hasta noveno semestre, donde el alumno podrá visualizar el objetivo general de la materia seleccionada, contenido sintético, metodología y la bibliografía así como descargar todo el programa sintético de la materia impartida. Esto se puede apreciar en la siguiente figura.
Dentro de la opción de curricula se pueden consultar todos los horarios desde primero hasta noveno semestre ya sea del turno matutino o vespertino, como se observa en la siguiente figura.
| Capítulo 6. Implementación 46 Proyectos
En esta opción se podrán observar, los proyectos terminales en los que se estén trabajando, el profesor encargado del proyecto, asesor titular, descripción del proyecto y también se puede descargar el documento PDF del proyecto, si el alumno quiere saber más a profundidad sobre el proyecto, como se ve en la siguiente figura. El Código Fuente esta descrito en los archivos savexml.php, creapdf.php y proyectos.xml del Apéndice.
| Capítulo 6. Implementación 47 Alumnos
En esta opción primeramente se debe registrar, deberá proporcionar su nombre de usuario, su password, los cuales se le pedirán cada vez que quiera ingresar como alumno, boleta, grupo y email; como se muestra en la siguiente figura.
Figura 25. Captura de pantalla del formulario de registro del alumno
Una vez que se haya registrado deberá proporcionar su nombre de usuario y su contraseña, como se muestra a continuación.
| Capítulo 6. Implementación 48 Ya que haya iniciado su sesión como alumno, podrá evaluar a su profesor, proporcionando su grupo, materia y el nombre del profesor, como se muestra en la siguiente figura.
Figura 27. Captura de pantalla del formulario de evaluación de profesores
Al final de la evaluación, el alumno podra dar sus comentarios y sugerencias a la escuela y al profesor en cuanto a la forma de impartir la clase.
| Capítulo 6. Implementación 49 Materias
En este campo el alumno podrá consultar sus materias de computación, desde primero hasta noveno semestre, como se muestra en la siguiente figura.
Figura 29. Captura de pantalla de las materias de Computación Sitios Personales
Aquí se pueden verificar los sitios personales de los profesores, ya sea tareas o cualquier otro aviso para el grupo que el profesor edite en su sitio, como se muestra a continuación.
| Capítulo 6. Implementación 50 Información de los Profesores
En esta opción el alumno podrá estar bien informado de los datos del profesor, como son: nombre, teléfono, lugar en donde encontrarlo y el horario en el que se le pueda ir a consultar, como se observa en la siguiente figura.
| Capítulo 6. Implementación 51 Material de Apoyo
Aquí el alumno podrá tener acceso a videos didácticos, puestos por el profesor o el administrador de la página, guías de examen, trabajos de referencia o cualquier otro tipo de material que el profesor considere conveniente para un mejor entendimiento del tema que se esté analizando, como se ve a continuación.
| Capítulo 6. Implementación 52 Sitio de Acceso del Profesor
Para que el profesor pueda tener acceso a esta parte de la página primeramente necesita registrase como profesor, deberá tener su clave de acceso, dada por el administrador, una vez que se haya registrado el profesor, podrá mostrar o editar su sitio personal de una forma fácil y sencilla, publicar calificaciones, apuntes, tareas, exámenes, esto para brindarle un mejor servicio a la comunidad estudiantil. A continuación se muestra el sitio principal del profesor.
| Capítulo 6. Implementación 53 Sitio Personal del Profesor
En esta sección es donde el profesor puede editar su sitio personal, teniendo la opción de colocar imágenes para que tenga una mejor presentación, cambiar el tipo de letra, el color etc., como se observa en la siguiente figura.
Figura 34. Captura de pantalla para agregar contenido al sitio Personal
Una vez editado su sitio, el profesor podrá agregar o quitar partes del mismo, como también, tendrá la opción de observar una vista previa de como se mostrará en la página principal.
| Capítulo 6. Implementación 54 Ya que el profesor tenga bien definido su sitio, podrá colocarlo en la opción de enlaces dentro de la página principal, esto se pensó para que el alumno tenga un fácil acceso a dicho sitio, deberá colocar el título de su página y el nombre del enlace, en la opción de modificar y automáticamente será creado el enlace permanente. Esto se puede apreciar en las figuras 36 y 37 como se muestran a continuación. El Código Fuente esta descrito en el archivo configurar.php del Apéndice.
Figura 36. Captura de pantalla de configuración del enlace permanente
| Capítulo 6. Implementación 55 Videos
En esta pestaña, el profesor podrá subir videos, los cuales aparecerán en la página principal en la opción de material de apoyo. Para poder subirlos correctamente deberá colocar el título del video y la duración del mismo, así como la ruta en donde se encuentra el archivo.
| Capítulo 6. Implementación 56 Materias
En la pestaña de materias, el profesor podrá agregar, mostrar y editar tareas, avisos o cualquier tipo de información que desee, notando que sólo podrá hacerlo con las materias que imparta, indicadas a la hora de darse de alta en la página de registro a profesores. En la siguiente figura se puede observar un ejemplo de esto.
| Capítulo 6. Implementación 57 Perfil
En esta opción el profesor podrá editar su perfil, el cual aparece en la página principal en el área de menú, dentro de la pestaña de información de profesores, resaltando que también tiene la opción de poder subir su foto, para una mejor presentación de su sitio, como se muestra en la figura 40.
| Capítulo 6. Implementación 58 Evaluación
Aquí es donde el profesor puede observar los resultados de las evaluaciones de los alumnos, respecto a la forma de dar su clase, teniendo un enlace donde puede consultar los comentarios y sugerencias que se le hacen, también tendrá la opción de pasar directamente a ver estos comentarios y sugerencias, sin necesidad de ver primero la evaluación, como se muestra en las figuras 40 y 41 respectivamente.
Figura 41. Captura de pantalla de las gráficas de resultado de la evaluación de profesores
| Capítulo 6. Implementación 59 Sitio de Acceso del Administrador
En esta sección de la página el Administrador, podrá cambiar la apariencia de la misma de una forma fácil, sin necesidad de meterse con el código de programación, será el encargado de proporcionar a los profesores claves de acceso, tendrá la opción de poner avisos para el personal académico de la institución, enviar correos ya sea para profesores, alumnos o para ambos.
Primeramente se debe ingresar el nombre de usuario y la contraseña, para poder entrar como administrador, una vez iniciada la sesión como administrador se tiene acceso a la página donde podrá manipular todas las propiedades antes expuestas. En la siguiente figura se observa la página de inicio de sesión del administrador.
| Capítulo 6. Implementación 60 Avisos
En la pestaña de avisos, el administrador podrá editarlos, cambiándoles el tipo de letra, el tamaño, color etc., y serán publicados en la página principal, esto se puede ver dando clic en el aérea de avisos, ubicado en la parte superior derecha de la página.
Figura 44. Captura de pantalla del módulo de Avisos
Ya creados los avisos, se tiene la opción de borrar y modificar, al igual que en el sitio personal para profesores, también cuenta con la opción de mostrar la vista previa de cómo se a visualizar en la página principal, como se muestra figura 45.
| Capítulo 6. Implementación 61 Anuncios Publicitarios o Banners
En esta opción el administrador podrá decidir que banners colocarle a la página; dichos banners se pueden colocar en el lado derecho, izquierdo, y central de la página principal, la forma en la que configuramos la página es usando el lado derecho y el izquierdo, pero el administrador podrá cambiarlos cuantas veces quiera y si lo cree conveniente puede usar el banner central.
| Capítulo 6. Implementación 62 Claves de Acceso para el Registro de Profesores
Aquí es donde el administrador va a manejar todas las claves para profesores, para generar las claves solamente se debe colocar el número de cuantas claves se desean y dar clic en generar, el administrador podrá generar más claves conforme se vayan agotando. Como se muestra en las figuras 47, 48 y 49.
Figura 47. Captura de pantalla del generador de claves de acceso
| Capítulo 6. Implementación 63 Figura 49. Captura de pantalla para mostrar las claves disponibles
En esta opción, el Administrador podrá enviar correos electrónicos a alumnos o profesores o ambos, las direcciones a las que serán enviados estos coreos son las que fueron ingresadas a la hora que se realizó el registro tanto de alumnos como de profesores. Al igual que en las opciones anteriores, se puede aplicar formato al correo, por ejemplo, cambiarle el tamaño a la letra, el color, tipo de letra, agregarle una imagen, etc., como se muestra en la figura 50.
