UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad. Conocimiento. Servicio.

Transcripción

1 Universidad Tecnologica de Queretaro Digitally signed by Universidad Tecnologica de Queretaro DN: cn=universidad Tecnologica de Queretaro, c=mx, o=universidad Tecnologica de Queretaro, ou=uteq, Date: :14:25-06'00' UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO Voluntad. Conocimiento. Servicio. ACTUALIZACIÓN DE LA PÁGINA WEB DEL CENTRO EDUCATIVO Y CULTURAL DEL ESTADO DE QUERÉTARO MANUEL GÓMEZ MORÍN CENTRO EDUCATIVO Y CULTURAL DEL ESTADO DE QUERÉTARO MANUEL GÓMEZ MORÍN Reporte de estadía para obtener el Título de Técnico Superior Universitario en Tecnologías de Información y Comunicación Alumna ARIADNA IXEL GARCÍA PELAYO Santiago de Querétaro Diciembre 2006 UNIVERSIDAD TECNOLÓGICA DE QUERÉTARO

2 Voluntad. Conocimiento. Servicio. ACTUALIZACIÓN DE LA PÁGINA WEB DEL CENTRO EDUCATIVO Y CULTURAL DEL ESTADO DE QUERÉTARO MANUEL GÓMEZ MORÍN CENTRO EDUCATIVO Y CULTURAL DEL ESTADO DE QUERÉTARO MANUEL GÓMEZ MORÍN Reporte de estadía para obtener el Título de Técnico Superior Universitario en Tecnologías de Información y Comunicación Asesor en la Empresa L.I. JAVIER GUSTAVO LEAL ESPÍNDOLA Asesor en la Universidad ING. CARLOS HUMBERTO YEE RODRÍGUEZ Alumna ARIADNA IXEL GARCÍA PELAYO Santiago de Querétaro Diciembre 2006

3 AGRADECIMIENTOS

4 Le doy gracias principalmente a Dios por haberme permitido culminar una de mis metas más deseadas. En una forma especial agradezco a mis padres, José Antonio García y Susana Adoración Pelayo Galván porque siempre me apoyaron y estuvieron conmigo en todo momento impulsándome con sus sabios consejos a seguir siempre adelante. A mis hermanos a los cuales les tengo mucho cariño en especial a José Andrés por ser comprensivo e inspirarme para seguir adelante. También agradezco a mis profesores por su ética y profesionalismo con el que desempeñan su trabajo y por el interés que depositaron en mí y que demostraron día a día. Gracias a todos mis compañeros y amigos del grupo T-68 por haber estado conmigo en las buenas y en las malas; por brindarme su compañía y valiosa amistad. Al igual le doy gracias al Centro Educativo y Cultural del Estado de Querétaro, Manuel Gómez Morín por brindarme la oportunidad de haber formado parte de su equipo de trabajo, en especial al equipo conformado por la Red Central de Informática por haberme brindado la confianza para que mi estancia dentro de ella fuera la mejor, gracias L. I. Javier Gustavo Leal Espíndola por ser mi asesor y amigo en el transcurso de este proyecto y alentarme a seguir adelante para conquistar nuevas metas.

5 Por último, este trabajo se lo dedico a mi familia por apoyarme desde el inicio de mis estudios. ÍNDICE AGRADECIMIENTOS INTRODUCCIÓN

6 CAPÍTULO I ACTUALIZACIÓN DE LA PÁGINA WEB DEL CECEQ PÁG. 1.1 Centro Educativo y Cultural del Estado de Querétaro Giro de la Empresa Misión Organigrama Análisis de Necesidades Definición del Proyecto Objetivo Justificación Alternativas de Solución Elección de Alternativas Óptimas Plan de Trabajo Diagrama de Gantt Especificaciones 16 CAPÍTULO II DESARROLLO DEL PROYECTO 2.1 Desarrollo de la página Elaboración de la página principal Elaboración del Menú Diseño de páginas Informativas Elaboración de páginas de actualización continua Elaboración de páginas Dinámicas. 29 CAPÍTULO III CONCLUSIONES

7 3.1 Dificultades Logros Obtenidos Recomendaciones Aportaciones 35 ANEXOS GLOSARIO MATERIAL DE CONSULTA INTRODUCCIÓN El presente documento describe el proyecto que se realizó en el Centro Educativo y Cultural del Estado de Querétaro (CECEQ)

8 dentro del área de la Red Central de Informática (RCI), en donde se elaboró una página Web apropiada para la fácil actualización de la misma. Para la elaboración de la página se llevó a cabo una investigación tanto de contenido como de nuevas tecnologías de programación para páginas Web. Este documento está dividido en tres capítulos: En el primer capítulo se describen aspectos importantes del CECEQ donde se realizó la estadía, además de definir el proyecto realizado, objetivos y justificación. En el segundo capítulo, se da una descripción amplia de la planeación del trabajo y se explica cómo se fue desarrollando paso a paso el proyecto. Por último en el tercer capítulo, se describen las dificultades, logros obtenidos, recomendaciones y aportaciones que se fueron dando durante el periodo de estadía.

9 CAPÍTULO I ACTUALIZACIÓN DE LA PÁGINA WEB DEL CECEQ 1.1 Centro Educativo y Cultural del Estado de Querétaro Giro de la empresa

10 El Centro Educativo y Cultural del Estado de Querétaro (CECEQ) Manuel Gómez Morín es un espacio que pertenece al Gobierno del Estado, el cual se dedica a prestar servicios y espacios que sirvan para la educación de la ciudadanía y a su formación tanto cultural como artística. El CECEQ, fue inaugurado por el Presidente de la República Vicente Fox Quezada y el Gobernador del estado Ing. Ignacio Loyola Vera el 22 de septiembre de 2003, con el objetivo de crear espacios que integren foros modernos y adecuados para las diferentes expresiones educativas, académicas, artísticas y culturales en el Estado de Querétaro Misión Propiciar el desarrollo integral de las personas que componen todos los sectores de la población, enfocando principalmente a la atención de la niñez y la juventud, al promover la cultura, la ciencia y la tecnología, fungiendo como un espacio en donde se puedan manifestar las formas de ser, pensar y actuar de cada individuo, anteponiendo su atención y cuidado, sobre los bienes materiales Organigrama 10

11 El proyecto se realizó dentro (CECEQ) en el área del Informática bajo la dirección del L.I. Javier Gustavo Leal Espíndola. A continuación se presenta el organigrama del área de trabajo. Fig.1.1 Organigrama del CECEQ 1.2 Análisis de necesidades Definición del proyecto 11

12 En el CECEQ fue necesario contar con las herramientas óptimas para difundir las diferentes actividades que se realizan dentro del mismo; tales como talleres, conferencias, círculos de lectura, proyección de películas, entre otras. Por lo tanto y de acuerdo con las posibilidades tecnológicas existentes se desarrollará una página Web, a través de la cual se difundirá a la población en general las diferentes opciones con las que cuenta la institución. Cabe destacar que el centro ya cuenta con una página pero con el paso del tiempo surgió la necesidad de actualizar su contenido, para que fuera más vistosa a los ojos de los usuarios y del público en general, promoviendo con ello la asistencia al CECEQ Objetivo Actualizar la página Web del CECEQ mediante la realización de una página Web con un diseño atractivo que permita mostrar las diferentes actividades del centro, incrementando el interés de los usuarios, además de facilitar la renovación del contenido de la página mediante la utilización de plantillas para hacer un rápido vaciado de información Justificación 12 La actualización de la página Web brindará como beneficio a los usuarios, el fácil acceso a la programación de actividades y a los

13 espacios con los que cuenta el centro cultural, incrementando con ello el interés por la cultura en el Estado. 1.3 Alternativas de solución Hoy en día existen diversas tecnologías de programación y desarrollo para la elaboración de páginas Web. Las alternativas analizadas para la realización del proyecto son: HTML. Utilizado para la construcción de páginas Web porque es compatible con la mayoría de los navegadores de Internet. JAVASCRIPT. Se usa para la elaboración de scripts implícitos en el código HTML y se encarga de realizar ciertas acciones en el ambiente de una página Web, como por ejemplo, crear efectos especiales en las páginas y definir interactividades con el usuario. FLASH MX. Es una tecnología que permite añadir movimiento y una gran cantidad de efectos visuales a una página Web. FRONTPAGE. Es un programa con el que se puede crear páginas Web de forma rápida y sencilla debido a que el programador se ocupa en mayor medida de la parte visual sin tener muchos conocimientos de programación. CSS. Usado para la presentación, optimización 13 y acabado minucioso de un documento escrito en HTML,

14 además de que su finalidad es separar la estructura de un documento de su presentación. DREAMWEAVER. Permite realizar páginas Web sin tener conocimientos especializados de las tecnologías de programación Web por código, de igual manera que FrontPage, pero con la diferencia de que tiene mejor integración con otras herramientas como Macromedia Flash. COREL. Programa muy popularizado por los diseñadores profesionales, ya que se utiliza para aplicaciones de diseño, construcción y procesamiento de imágenes y gráficas útiles para la construcción de documentos Web. 1.4 Elección de alternativas óptimas Después de analizar las diferentes herramientas para la actualización de la página Web, se decidió seleccionar las siguientes opciones: - HTML lenguaje primordial en la elaboración de la página Web por su compatibilidad con la mayoría de los navegadores, por lo tanto será la tecnología básica a utilizar. -JavaScript se utilizará tanto en la parte de interacciones como en el desarrollo de algunas funciones que se quieran agregar, con la idea de enriquecer el comportamiento de la página. 14 -FrontPage será la herramienta a utilizar para hacer prototipos sin perder mucho tiempo en la programación de código HTML.

15 -CSS se encargará del refinamiento de la aplicación Web requerida. En el caso de software como: DREAMWEAVER, FLASH MX y COREL, éstas no se tomaron en cuenta debido a que las imágenes que se utilizarán en la página Web ya están diseñadas por especialistas del área de planeación y promoción, además de que el CECEQ no cuenta con las licencias respectivas. 1.5 Plan de Trabajo Diagrama de Gantt ACTIVIDAD Especificaciones del Proyecto Recaudación de Información Investigación de Tecnologías Desarrollo de la Página Elaboración de la Página Principal Elaboración del Menú Diseño de Páginas informativas Elaboración de páginas de actualización continua Elaboración de página dinámicas MAYO JUNIO JULIO AGOSTO Fig.1.2 Diagrama de Gantt Especificaciones 15 Especificaciones del Proyecto.- El asesor del CECEQ explicará en qué consiste el proyecto y especificará el contenido para la página Web.

16 Recaudación de Información.- El asesor del CECEQ delimitará la información que deberá contener la página Web. Investigación de Tecnologías orientadas a páginas Web.- En esta etapa se consultarán manuales que contengan información acerca de las nuevas tecnologías existentes para la elaboración de la página Web del CECEQ. Desarrollo de la página.- La elaboración de la página Web comprenderá diferentes etapas: Elaboración de la página principal: en esta etapa se define la organización de la página y el contenido. Elaboración del menú: se diseñará la estructura del menú para facilitar el enlace a las páginas contiguas. Diseño de páginas informativas: se elaborará las páginas de contenido general. Elaboración de páginas de actualización continua: se diseñarán las secciones en las que se renovará la información según lo requiera 16 la programación del mes en curso.

17 Elaboración de páginas Dinámicas: se diseñarán las páginas que contendrán animaciones como por ejemplo una galería de imágenes interactiva. Pruebas preliminares.- En esta etapa se identificarán los errores que tenga la página haciendo los cambios necesarios, ya sea en el código o en el diseño de la página. 17

18 CAPÍTULO II DESARROLLO DEL PROYECTO 2.1 Desarrollo de la página Elaboración de la página principal.

19 La página principal del CECEQ está dividida en 2 partes. La primera es el menú localizado en la parte derecha de la pantalla donde se encuentran las secciones en las que se encuentra dividido el sitio Web. En la segunda sección se encuentra una imagen que contiene el logotipo oficial y el nombre de la institución, además de dos logotipos del Gobierno del Estado de Querétaro. De igual manera se encuentra una ventana del tipo pop-up que permite vincular a los horarios de las conferencias de Informática. Fig. (2.1) Ventana Pop-up Menú Imagen Fig.2.1 Página inicial del CECEQ Elaboración del Menú 19 La página Web propuesta consta de 15 páginas diferentes enlazadas desde un menú, este menú está siempre en la parte

20 derecha de la pantalla para que el usuario pueda localizarlo y encuentre lo que más le interesa de forma sencilla. El menú cuenta con submenús que enlazan a otras secciones de las páginas para que pueda el usuario tener una visión más clara de la composición del mismo. (Fig. 2.2) El menú se realizó con javascript por lo tanto se encuentra en un archivo con la extensión.js invocado desde la página inicial. Submenús Fig. 2.2 Menú de la página del CECEQ Diseño de páginas informativas Página del Reglamento 20

21 Para llegar al reglamento es necesario hacer clic sobre el botón información de la página principal. La página del reglamento se encuentra dividida en dos secciones. La primera despliega el menú principal y en la segunda se encuentra el cuerpo de la página. El cuerpo está dividido en tres columnas las cuales dan a conocer el reglamento para el acceso y uso del módulo de servicios digitales, así como los derechos y obligaciones de los usuarios, las restricciones y el horario de atención. (Fig.2.3) Fig. 2.3 Página del reglamento del CECEQ Página de los servicios La página de servicios se encuentra en el botón información de 21 la pantalla principal. Esta página se encuentra dividida en tres

22 columnas para el cuerpo y una columna más para el menú. En la figura (2.4) se muestra el contenido de dicha página. Fig. 2.4 Página de servicios del CECEQ 22 Página de información de inscripción al RCI

23 La página RCI permite al usuario conocer los trámites de inscripción al RCI así como también los requisitos para los cursos de informática para adultos. La página de trámite de inscripción a la Red Central de Informática se encuentra en el menú, en el botón RCI. Fig. 2.5 Página de Inscripción a la Red Central de Informática 23 Página de Información General

24 Esta página describe la información general referente al CECEQ, tales como división de áreas, ubicación, infraestructura, actividades y servicios generales. Las pantallas se despliegan a través de los botones de la página principal del menú. (Fig ) Fig. 2.6 Página de Información General 24

25 Fig. 2.7 Página del mapa central Fig. 2.8 Página de zonificación 25

26 2.1.4 Elaboración páginas de Actualización continúa Estas páginas contienen información que se renueva una vez al mes y se despliegan mediante la opción actividades en el menú principal. En dichas páginas el usuario encontrará los horarios referentes a actividades que se realizan dentro del CECEQ tales como: talleres, películas, círculos de lectura, conferencias y cursos. (Fig ) Cabe mencionar que la característica principal de las páginas de actualización continua es que su diseño está elaborado en capas, por lo que se facilita la ubicación de la información dando como resultado una plantilla para usar posteriormente. Con la ayuda del editor de páginas Web (FrontPage) se facilita el diseño particular de cada página lo cual permite actualizar constantemente su contenido. (Fig. 2.9 ) Fig. 2.9 Ejemplo de una plantilla 26

27 Fig Página del Paralelepípedo Fig Página de continuación del paralelepípedo 27

28 Fig Página de actividades del CECEQ Fig Continuación de Actividades del CECEQ 28

29 2.1.5 Elaboración de páginas Dinámicas Página en construcción Estas páginas se utilizan en ocasiones en las que la información no se encuentre preparada para subirse a la red, evitando confusión por parte de los usuarios en la presentación de los horarios o actividades. Esta página muestra una imagen animada elaborada con GIFANIMATOR. (Fig. 2.14) Fig Página en construcción 29

30 Galería de imágenes Se realizó una galería de Imágenes donde el usuario puede visualizar los diferentes espacios con los que cuenta el CECEQ de manera fácil y dinámica. Las fotografías se muestran de tres formas diferentes (continua, siguiente y atrás, y vista previa) con los botones que se encuentran en la parte inferior de la fotografía (Fig. 2.15), cabe destacar que la galería no será subida a la red hasta que sea aprobada por los miembros del centro educativo (Ver Anexo A). Inicia secuencia Rotación de imágenes Detiene secuencia Enlace a página vista previa Muestra la foto anterior Muestra la foto siguiente Fig Galería de Imágenes 30

31 Vista Previa La vista previa es un vínculo que permite visualizar todas las fotos del CECEQ en tamaño pequeño. Al dar clic sobre cada foto se visualiza una ventana con la foto en tamaño real. (Fig. 2.16) Fig.2.16 Vista Previa 31

32 CAPÍTULO III CONCLUSIONES

33 3.1 Dificultades Las dificultades encontradas durante la realización del proyecto fueron las siguientes: -No tener a tiempo la programación de las actividades mensuales del CECEQ que se tendrían que subir a la página Web lo cual provocó que la información mostrada en Internet no estuviera actualizada. -La falta de conocimientos en JavaScript y FrontPage retardó la programación del sitio Web. Para solucionar este problema se tuvo que investigar en libros e Internet el uso de dichas herramientas. -Adecuar la página a las necesidades del Centro así como la falta de licencias y autorización para utilizar tecnologías como Dreamweaver y Flash. -Actualmente la página se subió a Internet en su totalidad, con excepción de la galería de imágenes y la página en construcción, las cuales están pendientes de aprobación por parte del Área de diseño del CECEQ, por lo que se podrá utilizar esta parte de la página una vez que sea aprobada. 3.2 Logros Obtenidos -Se actualizó la página Web del CECEQ mediante el uso de nuevas tecnologías, permitiendo con ello obtener un diseño atractivo y dinámico que contribuyera a incrementar el interés del usuario por las actividades que se realizan en esta institución. 33

34 Actualmente la página se encuentra disponible en Internet con excepción de la galería de imágenes y la página en construcción. Por último, es importante mencionar que la página Web se diseñó de tal forma que se le puedan hacer cambios constantemente a la conformación que ésta contiene sin que se afecte la estructura original. 3.3 Recomendaciones -Debido a que la información debe ser actualizada por lo menos una vez al mes, será necesario tomar en cuenta los siguientes pasos para actualizar la página: 1.- Utilizar una copia de la página del mes anterior. 2.- Utilizar las plantillas de las páginas de actualización continua. 3.- Actualizar información 4.- Integrar las actualizaciones, mejoras o desarrollos logrados. 5.- Revisar código: a) HTML: es importante revisar que los acentos, caracteres especiales y enlaces, se visualicen de manera correcta, por lo tanto siempre se deberá cuidar que por ejemplo los caracteres especiales estén definidos con la referencia &_acute;. b) Java Script: indicar en la página la ubicación donde inicia con <SCRIPT language=javascript> y temina con </SCRIPT>. c) CSS: verificar la ejecución correcta de los estilos. 34

35 d) Subir página: verificar que se visualice todas las páginas y que los enlaces funcionen en Internet. Adicionalmente se recomienda realizar un manual de actualización que ayude al entendimiento de la página así como utilizar nuevos lenguajes de programación Web como lo son Dreamweaver o Flash para hacer la página más dinámica. 3.4 Aportaciones Durante la estadía en el CECEQ se realizaron actividades adicionales al proyecto de estadía tales como: -Investigación y realización de manuales para elaborar páginas Web utilizando FrontPage, lo cual permitirá que se abran nuevos cursos de programación Web. -Investigación de nuevas tecnologías para el desarrollo de páginas Web. 35

36 ANEXOS ANEXO A

37 La galería de imágenes es dinámica porque contiene botones que permiten ir a la siguiente foto (botón de adelante), regresar a una foto anterior (botón atrás), además de tener botones de reproducción y paro de fotos. Adicionalmente se cuenta con el botón vista previa, el cual visualiza en una página nueva todas las fotos que se encuentran disponibles. En las siguientes páginas se muestra el código de cada uno de estos botones. Fig. 3.1 Galería de Imágenes Código del botón Play y Stop

38 <script type="text/javascript"> var segundos = 2 var dire = "../galeria1" var imagenes=new Array() imagenes[0]="inicialimagenes/image004.jpg" imagenes[1]="inicialimagenes/image006.jpg" imagenes[2]="inicialimagenes/image008.jpg" imagenes[3]="inicialimagenes/image010.jpg" if(dire!= "" && dire.charat(dire.length-1)!= "/") {dire = dire + "/"} var preimagenes = new Array() for (pre = 0; pre < imagenes.length; pre++){ preimagenes[pre] = new Image() preimagenes[pre].src = dire + imagenes[pre] } cont=0 function presimagen(){ document.foto.src= dire + imagenes[cont] subeopacidad() if (cont < imagenes.length-1) {cont ++} else {cont=0}

39 tiempo=window.settimeout('bajaopacidad()',segundos*1000) } var iex = navigator.appname=="microsoft Internet Explorer"? true : false; var fi = iex?'filters.alpha.opacity':'style.mozopacity' var opa = iex? 100 : 1; function bajaopacidad(){ eval(opa) if(opa >= 0){ cambia() opa -= iex?10:0.1; settimeout('bajaopacidad()',10) } else{presimagen()} } function subeopacidad(){ opaci = iex?100:1; if(opa <= opaci){ cambia() opa += iex?10: 0.1; settimeout('subeopacidad()',10) } } function cambia(){

40 eval('document.foto.' + fi + ' = opa') } var tiempo function inicio(){ cleartimeout(tiempo) bajaopacidad() } var tiempo1 function fin(){ cleartimeout(tiempo) {cont=0} } </script> Código de botón siguiente y anterior <script language="javascript1.1"> var photos=new Array() var which=0 photos[0]="inicialimagenes/image002.jpg" photos[1]="inicialimagenes/image004.jpg" photos[2]="inicialimagenes/image006.jpg" photos[3]="inicialimagenes/image008.jpg" photos[4]="inicialimagenes/image010.jpg" photos[5]="inicialimagenes/image012.jpg" photos[6]="inicialimagenes/image014.jpg" photos[7]="inicialimagenes/image016.jpg"

41 photos[8]="inicialimagenes/image018.jpg" photos[6]="inicialimagenes/image020.jpg" photos[6]="inicialimagenes/image022.jpg" function atrás(){ if (which>0){ window.status="galería de imágenes" which-document.images.foto.src=photos[which] } } function adelante(){ if (which<photos.length-1){ which++ document.images.foto.src=photos[which] } else window.status='fin de las imágenes' } </script>

42 GLOSARIO Animación: creación de movimento en una imágen fija. Capa: una capa es una división dentro de la página, o una parte de página, la cual se puede colocar en cualquier parte dentro de la misma.

43 Carácter: signos de la escritura como por ejemplo el acento ortográfico. Editor: programa que modifica archivos de un tipo determinado. Internet: interconexión de redes informáticas que permite a los ordenadores o computadoras conectadas comunicarse directamente, es decir, cada ordenador de la red puede conectarse a cualquier otro ordenador de la red. Link: es un enlace, también conocido como hipervínculo que al ser pulsado conduce a otro sitio en Internet. Plantilla: página dividida en diferentes capas o tablas Servidor: dispositivo de almacenamiento de archivos en una red de área local, o en Internet, al que los distintos usuarios de la red pueden acceder. Software: conjunto de programas, instrucciones y reglas informáticas para ejecutar ciertas tareas en una computadora. Vínculo: enlace de una página a otra.

44 MATERIAL DE CONSULTA Alberdi Patrix Iriondo. (2003). Tutorial de FrontPage. Recuperado el 13 de Junio del 2006, de.

45 Álvarez Miguel Ángel. (2006). Guiarte Multimedia S.L. Recuperado el 13 de Junio del 2006, de. Álvarez Mieguel Ángel. (2006). Tutorial aplicación de capas. Recuperado el 11 de Julio del 2006, de. Consortium oficina española (2005). Guía Breve de CSS. Recuperado el 20 de Junio del 2006, de. Mas Joan M (2005). Tutorial de galería de fotos con JavaScript. Recuperado el 19 de Julio del 2006,de. ml