REDISEÑO GRAFICO DE LA PÁGINA PRINCIPAL DEL CINEDD Y DEL SISTEMA DE FORMACIÓN Y CAPACITACIÓN DOCENTE UNIVERSIDAD DEL VALLE DE MÉXICO

Transcripción

1 UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad. Conocimiento. Servicio. REDISEÑO GRAFICO DE LA PÁGINA PRINCIPAL DEL CINEDD Y DEL SISTEMA DE FORMACIÓN Y CAPACITACIÓN DOCENTE UNIVERSIDAD DEL VALLE DE MÉXICO CENTRO DE INNOVACIÓN EDUCATIVA Y DESARROLLO DOCENTE REGIÓN CENTRO-OCCIDENTE (CINEDD) Reporte de Estadía Para Obtener El Título De Técnico Superior Universitario En Tecnologías De La Información Y Comunicación En El Área De Sistemas Informáticos URIEL PAULINO TOVAR DOMÍNGUEZ 1

2 2

3 UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad. Conocimiento. Servicio. REDISEÑO GRAFICO DEL PORTAL WEB DEL CINEDD Y DEL SISTEMA DE FORMACIÓN Y CAPACITACIÓN DOCENTE UNIVERSIDAD DEL VALLE DE MEXÍCO CENTRO DE INNOVACIÓN EDUCATIVA Y DESARROLLO DOCENTE REGIÓN CENTRO-OCCIDENTE (CINEDD) Reporte de Estadía Para Obtener El Título De Técnico Superior Universitario En Tecnologías De La Información Y Comunicación En El Área De Sistemas Informáticos Asesor de Empresa MTRA. MERARÍ FLORES VALENTÍN Asesor de Universidad ANTONIO SANCHEZ Alumno URIEL PAULINO TOVAR DOMÍNGUEZ 3

4 4

5 INDICE INTRODUCCIÓN Historia de la Universidad del Valle de México Giro de la Empresa Misión Universidad del Valle de México Visión Universidad del Valle de México Misión CINEDD Organigrama Análisis y Necesidades Definición del Proyecto Objetivos Plan de Trabajo Especificaciones Presentación de la Fase 1 Sistema de Formación y Capacitación Docente Aplicación del nuevo diseño grafico al Sistema de Formación y Capacitación Docente Pruebas y Correcciones al Sistema de Formación y Capacitación Docente Presentacion de la Fase 2 Portal Web del CINEDD Aplicación del nuevo diseño grafico al Portal web del CINEDD Correcciones portal web del CINEDD Etapas del Proyecto Presentación de la fase 1 Sistema de Formación y Capacitación Docente Aplicación del nuevo diseño grafico al Sistema de Formación y Capacitación Docente

6 Pruebas y Correcciones al Sistema de Formación y Capacitación Docente Presentacion de la fase 2 Portal Web del CINEDD Aplicación del nuevo diseño grafico al Portal Web del CINEDD Pruebas y Correcciones al Portal Web del CINEDD Dificultades Logros Obtenidos...31 Glosario Material de consulta 6

7 INTRODUCCIÓN El presenté trabajo documenta como se realizó el rediseño grafico del portal web del Centro de Innovación Educativa y Desarrollo Docente (CINEDD) que es un área de la Universidad del Valle de México. Este portal cuenta con varios sistemas y aplicaciones donde se desarrollan las diferentes funciones del CINEDD, siendo uno el Sistema de Formación y Capacitación Docente que también fue modificado visualmente. Por lo tanto el proyecto consistió en modificar toda la parte visual del portal web del CINEDD y del Sistema de Formación y Capacitación Docente, siguiendo los requerimientos establecidos por el área de programación. Todo esto para mantener el portal web del CINEDD actualizado y novedoso. 7

8 CAPÍTULO I UNIVERSIDAD DEL VALLE DE MÉXICO CENTRO DE INNOVACIÓN EDUCATIVA Y DESARROLLO DOCENTE REGIÓN CENTRO-OCCIDENTE (CINEDD) 8

9 1.1Historia de la Universidad del Valle de México Con el fin de conocer un poco más sobre la empresa, a continuación se menciona un poco de su historia (Universidad del Valle de México, 2009) La Universidad inició sus funciones el 16 de noviembre de 1960 en la Institución Harvard, con una población de 212 estudiantes, 23 profesores y 14 colaboradores administrativos impartiendo los niveles básico, medio básico y medio superior, con las licenciaturas en Contaduría Pública y Administración de Empresas, desincorporando posteriormente los primeros dos niveles. Tras varios años de intensa labor, la institución alcanzó su consolidación y a partir de 1968 ostenta con orgullo su actual nombre: Universidad del Valle de México (UVM). Actualmente, la Universidad del Valle de México cuenta con 36 campus alrededor de la República Mexicana, lo que se traduce en un liderazgo indiscutible en materia de Educación Superior al ser la primera comunidad universitaria privada más grande del país. 1.2 Giro de la Empresa La Universidad del Valle de México es una empresa del sector privado educativo perteneciente a la cadena de Laureate International Universities (la red de universidades más importante del mundo) concentrándose en los niveles medio superior y superior. 9

10 Actualmente la Universidad del Valle de México forma profesionales, con actitudes con compromiso de ser líderes de empresas, con habilidades de aprender, trabajar en equipo y de demostrar que tiene conocimientos para una forma productiva dentro el ámbito laboral y así satisfacer las necesidades demandas por el estudiante. 1.3 Misión Universidad del Valle de México La Universidad del Valle de México (UVM) es una institución que, de manera integral, educa con un equilibrio entre los enfoques científico-tecnológico y ético-cultural, acordes con las necesidades sociales, la búsqueda de la verdad y el bien común; fundamentándose en su Filosofía Institucional y su Modelo Educativo. (Universidad del Valle de México, 2009) 1.4 Visión Universidad del Valle de México La Universidad del Valle de México se proyecta como una Institución educativa de prestigio nacional, con nexos internacionales. Competitiva por su Modelo Educativo, sus acreditados programas académicos y su carácter proactivo, prospectivo, flexible e innovador. Garantiza para sus egresados una congruencia social por su formación como individuos de calidad, íntegros y competitivos, proveedores de conocimientos y habilidades, con decidida actitud de liderazgo y comprometidos con su actualización (Universidad del Valle de México, México 2009) 10

11 1.5 Misión CINEDD El Centro de Innovación Educativa y Desarrollo Docente tiene como misión, promover la excelencia en la enseñanza y el aprendizaje, a través del desarrollo integral de la función docente, en un marco de colaboración e innovación, que asegure la construcción de conocimientos y desarrollo de las habilidades y competencias del profesorado en los estudiantes, con base en el Modelo Educativo del Siglo XXI (MES XXI). (Centro de Innovación Educatica y Desarrollo Docente, 2010) 11

12 1.6 Organigrama Dr. Francisco Martínez Medellín Dirección de Planeación y Desarrollo Regional Mtra. Merarí Flores Valentín Coordinación Regional del Centro de Innovación Educativa y Desarrollo Docente Alma Vargas Medellín Diseño Grafico Mtro. José Luis Rubio Garduño Administración de Proyectos Ing. Raúl Alejandro Sandoval Mijangos Programador Figura 1.1 Organigrama del CINEDD 12

13 CAPÍTULO II REDISEÑO GRAFICO DEL PORTAL WEB DEL CINEDD Y DEL SISTEMA DE FORMACIÓN Y CAPACITACIÓN DOCENTE 13

14 2.1 Análisis y Necesidades Definición del Proyecto El proyecto se realizará en el CINEDD específicamente en el área de programación que está a cargo del Ing. Raúl Alejandro Sandoval. Cuenta con un portal web que a su vez tiene diferentes sistemas donde se realizan las diferentes funciones a cargo del CINEDD, estos son modificados de forma visual cada año en el mes de agosto, de esta forma se mantienen actualizados y novedosos. Por esta razón el área de programación determinó que el proyecto de estadía consistirá en ayudar en el rediseño del portal web. El proyecto a su vez se dividió en dos fases, la primera será la modificación de la parte visual del Sistema de Formación y Capacitación Docente y a segunda fase consistirá en la modificación del portal web del CINEDD, respetando el nuevo diseño establecido por el área de programación y teniendo en cuenta no afectar al portal web en sus aplicaciones ni en la estructura que se tiene actualmente Objetivos 1.- Aplicar el nuevo diseño grafico al portal web del CINEDD, la cual se llevará a cabo respetando los diseños establecidos. 2.-Dar una apariencia más fresca y novedosa. 3.- Aplicar el nuevo diseño grafico al Sistema de Formación y Capacitación Docente. Todo lo anterior servirá para mantener actualizado y novedoso el portal del CINEDD. 14

15 2.2 Plan de Trabajo A continuación se presenta el diagrama de Gantt y las diferentes actividades a realizar. 15

16 2.2.2 Especificaciones 1.- Presentación de la Fase 1 Sistema de Formación y Capacitación Docente En esta etapa se dará a conocer por parte del área de programación, el nuevo diseño del Sistema de Formación y Capacitación Docente. Esto se llevará a cabo por medio de una imagen que contiene las especificaciones del nuevo diseño del sistema y así proceder con su modificación usando dicha imagen de guía. 2.- Aplicación del nuevo diseño grafico al Sistema de Formación y Capacitación Docente Se realizará el cambio del diseño anterior del Sistema de Formación y Capacitación Docente al nuevo diseño establecido, respetando todas las especificaciones hechas por el área de programación y sin alterar las aplicaciones del sistema. Hay que tener en cuenta que este sistema está realizado en el lenguaje de programación C# y el nuevo diseño se realizara en el mismo lenguaje. 3.-Pruebas y Correcciones al Sistema de Formación y Capacitación Docente Se presentará al área de programación el Sistema de Formación y Capacitación Docente ya con el nuevo diseño, esto con el fin de que sea aprobado o en caso contrario se hicieran observaciones y proceder a modificar los puntos que no cumplieron con las especificaciones establecidas. 16

17 A su vez también se realizarán algunos tipos de pruebas con el fin de poder detectar errores de programación que afecten a las aplicaciones del sistema y poder eliminarlos para que el sistema pueda seguir funcionando de manera adecuada. 4.-Presentacion de la Fase 2 Portal Web del CINEDD Se dará a conocer por parte del área de programación, el nuevo diseño del portal web del CINEDD. Esto se llevará a cabo por medio de una imagen que contiene las especificaciones del nuevo diseño del sistema y así proceder con su modificación usando dicha imagen de guía. 5.-Aplicación del nuevo diseño grafico al Portal web del CINEDD Se realizará el cambio del diseño anterior al portal web del CINEDD al nuevo diseño establecido, respetando todas las especificaciones hechas por el área de programación. 6.- Correcciones portal web del CINEDD Se presentará al área de programación la pagina principal del CINEDD ya con el nuevo diseño, esto con el fin de que sea aprobado o en caso contrario se hicieran observaciones y proceder a modificar los puntos que no cumplieron con las especificaciones establecidas. 17

18 A su vez también se realizarán algunos tipos de pruebas con el fin de poder detectar errores de programación que afecten a las aplicaciones del sistema y poder eliminarlos para que el sistema pueda seguir funcionando de manera adecuada. 18

19 CAPITULO III DESARROLLO DEL PROYECTO 19

20 3.1 Etapas del Proyecto Presentación de la fase 1 Sistema de Formación y Capacitación Docente El área de programación especificó todos los puntos a modificar del Sistema de Formación y Capacitación Docente, detallando todos los requerimientos establecidos por el área de programación mediante una imagen que a continuación se presenta. Cabe recalcar que el área de programación pidió que la modificación se llevara a cabo en el mismo lenguaje de programación en el que está programado el sistema. Figura. 3.1 Diseño del Sistema 20

21 Aplicación del nuevo diseño grafico al Sistema de Formación y Capacitación Docente Para llevar a cabo el rediseño del Sistema de Formación y Capacitación Docente primero se analizo el diseño actual, para ver los puntos a modificar y no alterar ninguna de sus aplicaciones. Figura. 3.2 sistema Actual Esta página cuenta con un menú de acordeón situado en la parte izquierda de la página, teniendo como color domínate el azul, teniendo un frame del lado derecho donde se cargan todas las paginas solicitadas cuando se le da clic al hipervínculo deseado del menú. 21

22 Figura. 3.3 sistema mostrando el uso de frame Se llevó a cabo la modificación del diseño de la página tomando los requerimientos propuestos por el área de programación, también se pidió que esta página fuera modificada con el mismo lenguaje de programación con el cual está programada esta página (C#). Primero se empezó colocando dos plecas al sistema, una superior y una inferior de 800 pixeles y de forma centrada. Se cambió el color de azul a amarillo y el frame de color gris colocado entre las dos plecas teniendo como medidas 395 X 800 pixeles dejando el espacio de los lados en blanco. También se modificó el menú de acordeón por uno horizontal de forma desplegable, es más cómodo y elegante para la página. 22

23 Figura. 3.4 Sistema modificado A su vez también se modificaron las secciones, manteniendo el diseño nuevo y teniendo un reacomodo de su contenido, ya que al colocarse el frame de esta forma se tiene más espacio disponible para cargar las páginas solicitadas. 23

24 Figura. 3.5 Nuevo Diseño Pruebas y Correcciones al Sistema de Formación y Capacitación Docente Una vez terminado el rediseño del sistema se presentó al área de programación para ver si no tenía ningún inconveniente, y si fuera así poder modificarlo. A su vez también se llevaron a cabo pruebas para poder verificar que no se haya alterado el código y poder corregir los errores que esto pudiera ocasionar. 24

25 Fig. 3.6 Detección de Errores Presentacion de la fase 2 Portal Web del CINEDD En la segunda fase del proyecto se pidió que se modificara el portal web del CINEDD. De igual manera se presentó el diseño nuevo que se tenía que aplicar para esta página. Teniendo en cuenta el tamaño y tipo de letra, color, tamaño de las plecas, etc. 25

26 Fig. 3.6 Segundo Diseño Aplicación del nuevo diseño grafico al Portal Web del CINEDD El portal web actualmente cuenta con un buen diseño, teniendo dos plecas (superior e inferior), un menú horizontal y el frame en medio, teniendo en los lados imágenes referentes a la educación. También esta página cuenta con un flash en la pleca superior, donde se hace referencia a los diferentes servicios que realiza el CINEDD. 26

27 Figura. 3.7 Pagina actual El rediseño del portal se realizó siguiendo lo establecido por el área de programación respetando de igual forma la estructura propuesta a si como los colores, el tipo y tamaño de letra estructura, etc. De igual forma se manejaron dos plecas de 800 pixeles de largo. También se manejo un menú horizontal desplegable realizado en java script, de esta forma se puedes cumplir con lo establecido en el diseño propuesto. El frame se sigue ocupando en medio de las dos plecas para distribuir mejor el espacio al momento de cargar las páginas requeridas. 27

28 Figura. 3.8 Pagina modificada Cabe señalar que la modificación se llevó a cabo usando hojas de estilo (CSS) que nos permite modificar las secciones de una forma más rápida y sencilla, manteniendo el estilo propuesto. 28

29 Figura. 3.9 Estilo de la página Pruebas y Correcciones al Portal Web del CINEDD Una vez terminado el rediseño del portal se le presentó el nuevo diseño al área de programación para ver si no tenía ningún inconveniente, y si fuera así poder modificarlo. A su vez también se llevaron a cabo pruebas para poder verificar que no se haya alterado el código y poder corregir los errores que esto pudiera ocasionar. Se verificaron que todos los hipervínculos funcionaran y cargaran la página correcta en el frame establecido sin marcar ningún tipo de error. 29

30 CAPÍTULO IV CONCLUSIONES 30

31 4.1.-Dificultades La mayor dificultad que se tuvo fue en realizar el rediseño del Sistema de Formación y Capacitación Docente, ya que está programado en C# y no se conocía muy bien este lenguaje, por lo que costo tiempo investigar y aprender su lógica de programación para poder llevar a cabo la modificación de dicho sistema. Además, la investigación sobre el lenguaje de programación resultó un poco cansada, ya que toda la información fue consultada en diferentes fuentes de información en Internet Logros Obtenidos En particular mi estadía fue muy agradable, fructífera y productiva dentro de la empresa, ya que estuve realizando las actividades dentro del área de programación, en esta área fue donde aplique los conocimientos adquiridos en la UTEQ. En cuanto al proyecto, los objetivos propuestos se cumplieron satisfactoriamente ya que se llevo a cabo la aplicación del nuevo diseño grafico al Sistema de Formación y Capacitación Docente sin alterar ninguna aplicación y cumpliendo todos los requerimientos establecidos por el área de programación. A su vez también se cumplió con lo establecido cuando se aplico el modificar visualmente la página principal del CINEDD sin alterar ninguna de sus aplicaciones. 31

32 GLOSARIO 32

33 C#: es un lenguaje de programación orientado a objetos desarrollado y estandarizado por Microsoft como parte de su plataforma.net, que después fue aprobado como un estándar por la ECMA e ISO. CINEDD: Centro de Innovación Educativa y Desarrollo Docente CSS: Cascading Style Sheets (en español hojas de estilo en cascada) es un lenguaje usado para definir la presentación de un documento estructurado escrito en HTML o XML (y por extensión en XHTML). Frame: Un frame es una especie de marco o recuadro independiente en el que podemos cargar una página web. HTML: siglas de HyperText Markup Language (Lenguaje de Marcado de Hipertexto), es el lenguaje de marcado predominante para la elaboración de páginas web. Pixel: Un píxel o pixel, plural píxeles (acrónimo del inglés picture element, "elemento de imagen") es la menor unidad homogénea en color que forma parte de una imagen digital, ya sea esta una fotografía, un fotograma de vídeo o un gráfico. UVM: Universidad del Valle de México. 33

34 MATERIAL DE CONSULTA 34

35 Universidad del Valle de México (2009).Conoce la UVM. Recuperado el 2 de septiembre de 2010 de Centro de Innovación Educativa y Desarrollo Docente (2009). Misión del CINEDD. Recuperado el 23 de agosto de 2009 de Wiki pedía la Enciclopedia Libre. Empresa. [consulta 4 de septiembre de 2010] Frames en HTML. Introducción a los frames en_html [Consulta 6 de septiembre de 2010] Ejemplo de.com. Ejemplo de tesis. [Consulta 4 de septiembre de 2010] Citas textuales. [consulta 5 de septiembre de 2010] UCES Biblioteca. Manual de Citas Bibliográficas 3 ª edición, 2005 Lic. Silvia Torres. [consulta 6 de septiembre de 2010] 35