universidad politécnica de victoria unidad gonzález carrera: ingeniería en tecnologías de la...

Universidad Politécnica De Victoria Unidad González

Carrera: Ingeniería En Tecnologías De La Información

Estancia No. II

Asesor Empresarial: MSI. Mario Humberto Rodríguez Chávez

Asesor Institucional: MSI. Mario Humberto Rodríguez Chávez

Carril a Santa Fe Km 1.0

González Tamaulipas

México.

C.P 89700.

Tel (836) 273 19 54.

1

Página Web Universidad Politécnica De Victoria Unidad González

11 de enero de 2014

ÍNDICE

ANEXO ............................................................................................................................................... 17 BIBLIOGRAFÍA .............................................................................................................................. 16 CONCLUSIÓN ................................................................................................................................ 15 EXECUTIVE RESUME .................................................................................................................... 2 ÍNDICE ................................................................................................................................................. 1 JUSTIFICACIÓN .............................................................................................................................. 7 MARCO TEÓRICO ................................................................................................................................ 3 OBJETIVOS DE LAS ACTIVIDADES O PROYECTO .............................................................. 6 RESULTADOS Y DISCUSIÓN .................................................................................................... 14

2


11 de enero de 2014

EXECUTIVE RESUME

Durante las practicas realizadas del 18 de noviembre al 18 de diciembre del 2013

se estuvo llevando en desarrollo el proyecto del sitio web de la Universidad

Politécnica De Victoria Sede González.

Dicho proyecto consiste en elaborar un sitio web con las características que requiere

y también tomándose en cuenta las características que los coordinadores de la

unidad sugirieron.

Dentro de los puntos más recalcados con los cuales cuenta dicho sitio son, noticias

breves y más trascendentes que ocurren actualmente dentro de la universidad, un

sitio donde se dé a conocer el modelo educativo con el cual se cuenta y el plan de

estudios de cada carrera, un área de solicitud de tramites escolares, un apartado

donde se muestre que es la educación a distancia y como funciona así como sus

valores, misión, visión, y políticas institucionales.

El objetivo principal de este sitio web es el de brindar como todo sitio web ciertas

características las cuales hacen más resaltar a una institución educativa, este sitio

traerá como beneficio una imagen más profesional, lo cual atraerá aún más a

nuevos aspirantes universitarios.

Durante el desarrollo de este proyecto se estuvieron desarrollando diferentes

actividades tanto como de investigación, diseño d animaciones, diseño y edición de

imágenes y logotipos, creación y edición de código de diferentes plataformas (PHP,

HTML, CSS), todas estas actividades se incorporan entre sí para lograr un objetivo

en específico el cual es el funcionamiento del sitio web.

Para que todas las actividades antes mencionadas se lograran realizar con éxito se

estuvo trabajando con diferente software libre y de licencia, los cuales nos

permitieron manipular la información, imágenes y diferentes archivos con éxito.

Durante el desarrollo de este proyecto se adquirió cierta práctica, experiencia en el

manejo de nuevos software de desarrollo de animaciones, así como la

familiarización de ciertos problemas en código HTML los cuales orillan a uno como

desarrollador buscar nuevas alternativas para lograr los requerimientos marcados.

3


11 de enero de 2014

MARCO TEÓRICO

En el desarrollo de este proyecto se estuvo utilizando tanto como software como

hardware, así como también las nuevas tecnologías de HTML5, y CSS, también el

tradicional código HTML estructurado todo esto manipulado mediante un sistema

de gestión de contenidos denominado wordpress, para poder utilizar el sistema

gestor de contenidos se hiso uso de un servidor local virtual denominado

WampServer el cual nos permitió la instalación wordpress mediante la creación de

una base de datos en MySQL, una vez realizada y finalizada la página web solo es

cuestión de subir todos los archivos generados por wordpress al hosting indicado

por medio de una transferencia FTP.

Los archivos generados por wordpress generalmente se alojan en el servidor local

dentro del sistema operativo Windows en el siguiente directorio, C:\wamp\www la

carpeta www es la que se transfiere por medio de FTP.

De las herramientas de software que se utilizaron se encuentran editores de imagen,

editores de texto HTML, software creador de animaciones CSS, navegadores de

internet, servidor virtual, y dentro del hardware utilizado se encuentra un equipo de

cómputo.

Software editor de imagen: fueron utilizados para la edición de imágenes, diseño

de gota de agua, diseño de logotipo de pie e inicio de página.

Software de licencia

Adobe Fireworks CS5

Versión 11.0.0


Adobe Photoshop CS5

Versión 12.0

4


11 de enero de 2014

Software editor de texto CSS, HTLM utilizados para la edición de las hojas de estilo,

creación y edición de funciones.


Adobe Dream Weaver CS5

Versión 11.0.0

Compilación 4969

Software libre

Sublime Text

Versión 1.0.0.1

Software creador de animaciones HTML utilizado para la elaboración de

animaciones de presentación de oferta educativa aportando a la página mayor

portabilidad y usabilidad

Software de licencia (modo de prueba)

Sencha Animator

versión 1.5

Compilación 219

Sistema gestor de contenidos fue primordial en el desarrollo del proyecto, ya que

por medio de este se logró la estructuración de la página principal, subpáginas, y

realización completa del proyecto.

Software libre

WordPress

Versión 3.7.1

Sistema gestor de base de datos este juega un papel entre el sistema gestor de

datos y el servidor ya que este permite crear la base de datos en la cual, WordPress

logra crear sus funcionalidades.

Software libre

MySQL

Versión 5.5.24-log

Servidor virtual web utilizado para que el equipo funcione como un servidor y de

esta manera permita el desarrollo del proyecto de una manera local.

Software libre

Apache

Versión 2.2.22 Win32

5


11 de enero de 2014

Manejador, administrador, y gestor de bases de datos de MySQL a través de una

interfaz gráfica de usuario.

Software libre

PhpMyAdmin

Versión 5.3.13

Explorador web utilizado para la edición del proyecto y la visualización del mismo.

Software libre

Mozilla Firefox

Versión 25.0.1 x86

Equipo de cómputo en este se desarrolló el completamente además de que fungió

como servidor virtual local.

Modelo: HP Pavilion g4 Notebook PC

Memoria física instalada: 4.00 GB

Disco duro: 600 GB

Procesador: Procesador Intel(R) Core(TM) i3-2330M

Sistema operativo: Microsoft Windows 7 Ultimate

Tarjeta gráfica: Intel(R) HD Graphics Family 1760 MB

6


11 de enero de 2014

OBJETIVOS DE LAS ACTIVIDADES O PROYECTO

Las actividades y objetivos realizados dentro de este proyecto son las de crear un

sitio web, que cubra las necesidades que solicita la Universidad Politécnica De

Victoria A Distancia Unidad González.

Como objetivo principal de este proyecto es realizar un sitio web oficial de la Unidad

A Distancia González De La Universidad Politécnica De Victoria, la cual permita una

mejor presentación a la institución educativa esperando con esto mejores resultados

en el aspecto de crecimiento educativo.

El sitio web debe cumplir con ciertas características y funcionalidades que fueron

establecidas por los coordinadores de la Unidad A Distancia González, las cuales

son.

I. Contar con un sitio web el cual permita dar a conocer a los aspirantes de

nuevo ingreso las carreras con las cuales se cuenta en la institución de

educación superior.

II. El sitio web debe contar con una paguita específica en las cuales se pueda

mostrar el plan de estudios con el cual se cuenta actualmente.

III. Un sitio donde se pueda difundir las noticias que acontecen día con día en la

unidad y que son de agrado para la vida estudiantil.

IV. Un sitio web el cual cuente con la usabilidad necesaria para la publicación de

nuevas noticias, páginas, que contengan noticias de vital importancia para

los alumnos y nuevos aspirantes

V. El sitio debe brindar una flexibilidad de portabilidad para el fácil uso en

dispositivos móviles

Cada actividad desarrollada dentro del proyecto cumple una función importante que

la cual está vinculada a llevar a cabo algunas funciones de los puntos antes

mencionados.

7


11 de enero de 2014

JUSTIFICACIÓN

Hoy en día a cualquier organización ya sea del sector público o privado le es

necesario publicar sus servicios o productos más allá de los municipios donde se

encuentran, así que recurren a la creación de sitios web para que estos extiendan

su mercado gracias a la publicidad que le ofrece, además de extender sus

posibilidades a los negocios informáticos tan comunes y productivos hoy en día.

En el caso de la Universidad Politécnica De Victoria A Distancia Unidad González

el uso del sitio web es para extender la publicidad a municipios aledaños a la

localidad donde se encuentra, ya que se está tomando en cuenta que en la

actualidad el uso de dispositivos móviles permite que todos aquellos interesados

puedan acceder al sitio y obtener información acerca de la institución educativa, de

esta manera obtener más apoyo publicitario en vísperas de inicios de nuevos ciclos

escolares.

La importancia de que la Unidad González cuente con un sitio web propio aparte

del sitio oficial con el que cuenta la Universidad Politécnica De Victoria es de vital

importancia, porque de esta manera se pueda dar a conocer lo que es la modalidad

de educación a distancia dentro del estado de Tamaulipas, los municipios donde se

cuenta con este modelo educativo, así como también el impacto que estas unidades

tienen dentro del estado y la calidad educativa con la que se cuenta en cada una de

ellas.

Otras de las ventajas de contar con un sitio web es que la unidad entra

automáticamente a la competitividad educativa con otras instituciones del estado y

del país, se reducen costos de publicidad ya que la mayoría de la información

necesaria se pude publicar en la página web, además de que el contar con un sitio

web oficial es una gran carta de presentación para la cede dando una imagen más

profesional.

por otra parte otros de los beneficios que se obtienen es que las demás unidades a

distancia que se ubican dentro del estado al ver el impacto y resultados que se

8


11 de enero de 2014

obtuvo gracias el sitio web , estas también tomen la iniciativa de la creación de uno

propio para cada una de ellas, y de esa manera las unidades a distancia de la

Universidad Politécnica De Victoria tengas más demanda estudiantil al estarse

publicando al municipio, y el estado su desarrollo, competitividad, y alto desempeño

de sus alumnos.

DESARROLLO

Dentro de las primeras actividades que se desarrollaron en este proyecto fue la de

realizar un extenso análisis con lo que el sitio web debería contar y los

requerimientos con que necesitaría además de que se tomó en cuenta las

herramientas, y nuevas tecnologías que se agruparían y utilizarían para su

desarrollo, una vez hecho esto se realizó un diagrama de Gantt para ver para

calendarizar las actividades que se llevarían a cabo.

FECHAS DE SEMANAS

ACTIVIDAD INICIO FIN 1 2 3 4 5 6

Análisis de requerimientos 18/11/2013 21/11/2013

Realización de prototipos 21/11/2013 26/11/2013

desarrollo de páginas y codificación 27/11/2013 06/12/2013

realización de animaciones CS5 09/12/2013 12/12/2013

incorporación de animaciones a las páginas web 13/12/2013 13/12/2013

realización de pruebas 16/12/2013 18/12/2013

solución de errores 19/12/2013 20/12/2013

Diagrama de Gantt de las actividades del proyecto (Grafico 1.1).

Durante la primera semana se realizó lo que fue el análisis de requerimientos de la

página para determinar qué es lo que realmente necesitaba el sitio web así como

también en que plataforma se realizaría si por medio de código HTML estructurado

o de un sistema administrador de contenidos.

Para determinar en qué plataforma se desarrollaría el sitio web se realizó un análisis

de viabilidad y portabilidad basándose en búsquedas realizadas en internet de

fuentes confiables. Ya que por medio de código HTML se obtiene una flexibilidad

muy buena de desarrollo pero sin embargo en el área de usabilidad le resta puntos

ya que sería más complicado al publicar una noticia ya que se debería crear una

página completamente desde cero por medio de un editor de textos HTML o un

9


11 de enero de 2014

software de edición, y si se realizaba por medio de un administrador de contenidos

esta operación sería más fácil ya que solo se realizaría una entrada y se re

direccionaría al menú principal.

Al elegir la opción más factible que fue el administrador de contenidos se procedió

a hacer la elección sobre que administrador de contenidos utilizar y se optó por

elegir el WordPress, el cual cuanta con más herramientas para el desarrollo de sitios

web así como también es compatible con gran cantidad de templetes.

Una vez ya que se tenía elegido el administrador de contenidos tenía que buscarse

una manera de instalarlo y empezar a trabajar en el diseño así que se instaló en el

equipo de cómputo un servidor virtual el cual nos permitiera contar con una base de

datos con la cual WordPress se instalaría y se estaría trabajando, así que se

procedió a instalar WampServer para utilizar los servicios de apache como servidor

web.

WampServer permite servir páginas HTML a internet, además de que nos permite

gestionar los datos entre ellas además de que proporciona un lenguaje de

programación para desarrollar aplicaciones web.

Utilizándose el gestor de base de datos MySQL se creó una base de datos la cual

se usara para la instalación de WordPress, la base de datos fue creada por medio

de la interfaz de phpMyAdmin.

Ya una vez finalizada la base de datos se comienza con la instalación de

WordPress, primero que nada el sistema administrador de contenidos es

descargado de la página oficial, una vez que se descarga se genera un archivo RAR

se le extrajo todo el contenido y se ubicó en dentro del directorio del servidor cuando

se finaliza esta actividad lo siguiente es iniciar la instalación de WordPress

indicándole el nombre de la base de datos que se creó anteriormente.

Cuando WordPress se encuentra instalado se gestiona el tema que será utilizado y

se instala desde el menú, apariencia, temas, después de esta instalación se procede

a la edición de hojas de estilos para lograr los colores con los que se estará

trabajando los cuales son colores web #FF6600 y #660066, para lograr uno de los

colores dentro del pie de la página se modificó el archivo layout.css lo que se hiso

fue modificar el color directamente desde el código.

10


11 de enero de 2014

Imagen 1.1 código modificado para lograr el color en el pie de página.

Ya que el tema contaba con los colores deseados se procedió a la creación de las

subpáginas con las cuales contaría para agregar nuevas páginas, la acción se

realizaba desde el menú, paginas, añadir página, dentro de las páginas se introdujo

texto e imagen, el texto tenía un formato obtenido de una clase creada en cada

página y el formato se le aplicaba llamando la clase en cada método.

Imagen 1.2 clase de formato de texto y aplicación de la clase a un párrafo.

Para insertar las imágenes se utilizó de un plugin denominado Lightbox Gallery este

al activarlo nos permite insertar un short code en las páginas que realizamos para

poder agregar galerías de imágenes de una manera más completa y formal, y para

utilizar este plugin en las páginas deseadas simplemente insertando una nueva

galería de imágenes.

11


11 de enero de 2014

Imagen 1.3 nuevo aspecto de galería de imágenes obtenida.

Para elaborar el plan de estudios de las diferentes carreras con las que cuenta la

institución se realizó una animación en HTML5 y CSS, el motivo por el cual se realizó

la animación es esta plataforma es para mantener la portabilidad del sitio web ya

que algunos dispositivos no son compatibles con otras plataformas.

Para poder realizar lo anterior mencionado, se utilizó un software desarrollador de

animaciones HTML5, CSS en el cual por medio de escenas, líneas de tiempo,

acciones, botones, y formatos, el desarrollo de los botones se realizó a cabo en otro

software de edición de imagen y solo se exporto al de animaciones y se trabajó con

ellos, igual es el caso de las imágenes utilizadas en las animaciones. (Para

visualizar el entorno del software de desarrollo de animaciones vea anexo 2.0)

Para poder incorporar la animación dentro de la página en la cual se requería, la

animación solo se exporto como HTML desde el software de desarrollo y se colocó

dentro del servidor local, el siguiente paso fue, realizar un frame y centrarlo, dentro

de este frame se hacía referencia a la animación y de esta forma se colocaba dentro

de la página, el procedimiento fue el mismo para ambas páginas que requerían la

animación, el siguiente código es el cual coloca la animación.

<center><iframe title="Iframe" src="http://localhost/PyMES/index.html"

height="480" width="700" frameborder="0"></iframe></center>

Para colocar archivos PDF dentro de algunas páginas también se utilizo un código

parecido como el anterior solo que este hacía referencia a un archivo PDF.

<!DOCTYPE html>

<html>

<head>

12


11 de enero de 2014

<iframe title="Iframe" src="http://localhost/docs/ITI.pdf"

height="1050" width="100%" frameborder="0"></iframe>

</head>

</html>

<body>

Para elaborar un formulario el cual cumpliría la función de comunicar a los

coordinadores de la unidad con los alumnos para agilizar los trámites de

documentación se utilizó el formulario de contacto, sin embargo se le realizaron

unas modificaciones para que el alumno pueda enviar la ficha de pago.

Para insertar el formulario, desde el menú contacto dentro del administrador de

contenidos, nos muestra los formularios con los cuales contamos, al seleccionar el

formulario con el cual se está trabajando se nos redirige a otra ventana en la cual

por medio de código HTML se agrega los tilos de los campos, y se generan las

etiquetas con las cuales se trabajara, se coloca el correo electrónico con los cuales

se estará trabajando el formulario, así como también los formatos que se pueden

adjuntar en el correo. (Para ver la ventana de configuración de formulario vea anexo

2.1)

Imagen 1.4 Esta es la apariencia del formulario ya terminado.

Dentro de la página principal se solicitó que se colocaran unas breves noticias de

lo más destacado de la unidad para que el público que la visite este al tanto de las

novedades de la universidad, estas noticias contaban con una imagen la cual estaba

configurada con un mouseover para poder lograr una mejor presentación para lograr

13


11 de enero de 2014

ese efecto se utilizó un código el cual simplemente lo que hacía era mostrar una

imagen dentro de la página y cuando detectara el mouse sobre de la imagen la

cambiara automáticamente por otra y cuando se retirara el mouse se dejara la

imagen en primera instancia para lograr este efecto se utilizó el siguiente código.

<img src="http://localhost/wp-content/uploads/2013/img/dm1.jpg"

onmouseover="this.src='http://localhost/wp-content/uploads/2013/img/dm2.jpg';"

onmouseout="this.src='http://localhost/wp-content/uploads/2013/img/dm1.jpg';"/>

Para cambiar el logotipo al inicio de sesión del administrador del sitio, se modificó

el archivo wp-admin.min.css en cual se prestó atención en el tamaño que se

mostraba la imagen así como sus márgenes, después se colocó en el mismo

directorio dentro del servidor, para poder obtener la información del tamaño de

imagen y ubicación se inspecciono el elemento desde el explorador. (Para ver

código modificado vea anexo 2.2)

La animación de la página principal fue desarrollada con uno de los plugin ya

instalados del tema el cual permite realizar el trabajo por medio de escenas, y línea

de tiempo, además de agregar nuestras propias imágenes y texto que se dese, para

llegar hasta este plugin se accede desde el menú de administrador del sitio aparece

una opción denominada Revolution Slider en la cual nos aparece la ventana para

seleccionar la animación a editar y ya una vez seleccionada nos redirige a la

ventana de configuración de la animación principal. (Para visualizar esta ventana

vea anexo 2.3)

14


11 de enero de 2014

RESULTADOS Y DISCUSIÓN

Como resultados se obtuvo la finalización de la página web dentro de un servidor

local, y después su ubicación provisional en un hosting gratuito, como principal

objetivo de este sitio web, es la publicidad de la unidad así como, una gran

presentación la cual brindara mayor competitividad.

La promoción o publicidad es tan importante ya que con el sitio web se pretende

cubrir un 90% de más publicidad en González Tamaulipas y en los municipios

vecinos, la publicidad es tan importante ya que de los alumnos egresados de nivel

medio superior en esta zona con las carreras a fin son las siguientes.

Grafico 1.2 demanda educativa dentro de la región.

67%

17%

7%

9%

Título del gráficoInformatica

Contabilidad

Contabilidad

Asit. Ejecutivo

15


11 de enero de 2014

Gracias al sitio web se cubrirá más territorio, ya que algunos municipios se

encuentran en diferentes áreas geográficas, al brindarles la información en tiempo

y forma sobre la institución a los alumnos egresados de nivel medio superior de la

zona se les causara un interés de ingresar al plantel UP@D González.(para

visualizar las diferentes ubicaciones municipios vecinos vea anexo 2.4)

Siendo de esa manera como cumpliría con su principal objetivo el sitio web

desarrollado para la Universidad Politécnica De Victoria A Distancia Unidad

González.

Otro de los resultados que se están arrojando es el formulario de documentación

por el cual los alumnos pueden realizar petición a los coordinadores de distintos

documentos al departamento de escolares sin necesidad de presentar su boleta de

pago personalmente, sino digitalizado desde la comodidad del hogar gracias a este

formulario, ya que además de realizar la petición se puede adjuntar el documento

de comprobante.

CONCLUSIÓN

Al finalizar el proyecto de sitio web Universidad Politécnica De Victoria A Distancia

Unidad González se obtuvieron distintos conocimientos en el uso de nuevas

tecnologías de desarrollo, ya que se estuvo trabajando con HTML5 y CSS, el estar

analizando, y editando a las necesidades que requería dicho código me fui

familiarizando un poco con este nuevo lenguaje, además de que descubrí la

portabilidad y usabilidad que ofrece, además de que pude comprobar que no es un

código muy pesado de compilar ya que cualquier explorador es capaz de ejecutar

sin ningún problema incluso los navegadores móviles.

Otra de la edición de código antes mencionado, también se desarrolló animaciones

en las plataformas también antes mencionadas, para poder desarrollar estas

animaciones en corto tiempo se utilizó un software de desarrollo el cual se especificó

en el marco teórico de este documento, para poder elegir el software de desarrollo

primero que nada se tuvo que realizar una investigación para seleccionar el software

más estable posible, ya que como este tipo de animaciones es nueva los software

están aún en vías de desarrollo, el desarrollo de esta animación enriqueció mis

conocimientos en esta área ya que manipule software nuevo con facilidad, gracias

al apoyo de manuales web.

16


11 de enero de 2014

Durante el desarrollo de este proyecto también adquirí desarrolle más habilidades

para resolver diferentes problemas presentados en marcha, los cuales me orillaron

a pedir apoyo a la investigación así como también al asesor institucional.

Al desarrollar este proyecto se pusieron en práctica los conocimientos adquiridos

durante este periodo de formación, ya que se abarco lo que es diseño de interfaces

desarrollando una interfaz amigable, accesible, y usable, aplicando así distintas

normas de diseño web. También se estuvo abordando temas de programación web,

creación de base de datos en MySQL, y manejo de phpMyAdmin, manejo

profesional de software de edición de imágenes.

BIBLIOGRAFÍA

17


11 de enero de 2014

ANEXO

Imagen 2.0 ventana de configuración de correo

18


11 de enero de 2014

Anexo 2.1 elaboración de animación HTML en Sencha Animator.

Anexo 2.2 código modificado para el inicio de sesión de administrador.

Anexo 2.3 ventana de configuración de slider principal

19


11 de enero de 2014

Anexo 2.4 ubicación de municipios vecinos y los cuales se cubrirá con el sitio web.

universidad politécnica de victoria unidad gonzález carrera: ingeniería en tecnologías de la...

Documents