You are on page 1of 106

INSTITUTO TECNOLOGICO DE ORIZABA

1








INGENIERIA EN SISTEMAS
COMPUTACIONALES



Tema:
Sistema a nivel rectora para la gestin de papeleras

Lugar de realizacin:
Universidad del Golfo de Mxico Rectora Centro

Presenta:
Hernndez Florencio Juan Antonio

No. Control:
07011289

Asesor Interno:
L.I. Ariadna Jimnez Aguilar

Asesor externo:
Ing. Beatriz Snchez Peralta.

Periodo de realizacin:
26 de Agosto del 2013 al 26 de Enero del 2014
INSTITUTO TECNOLOGICO DE ORIZABA




2




ndice

Introduccin .............................................................................................................................................. 7
Captulo I. Generalidades ........................................................................................................................ 11
1.1 Antecedentes de la empresa .......................................................................................................... 11
1.2 Ubicacin geogrfica de la empresa ............................................................................................ 18
1.3 Organigrama de la empresa ........................................................................................................... 19
1.4 Descripcin del rea de desarrollo ............................................................................................... 20
1.5 Cronograma de actividades ........................................................................................................... 21
1.6 Alcances y limitaciones ................................................................................................................. 22
CAPTULO 2. MARCO TERICO ....................................................................................................... 23
2.1 Internet ........................................................................................................................................... 23
2.2 Dominio de Internet ....................................................................................................................... 25
2.3 Los sistemas web ........................................................................................................................... 25
2.4 Herramientas para el diseo y desarrollo del sistema .................................................................... 26
2.4.1 Visual Paradigm para UML ................................................................................................... 26
2.4.2 HTML 5 .................................................................................................................................. 26
2.4.3 Hojas de Estilo ........................................................................................................................ 28
2.4.4 CSS ......................................................................................................................................... 29
2.4.5 JQuery ..................................................................................................................................... 30
2.4.6 Xampp ................................................................................................................................... 31
2.4.7 FileZilla .................................................................................................................................. 32
2.4.8 PHP 5 ...................................................................................................................................... 32
2.4.9 AJAX ...................................................................................................................................... 33
2.4.10 Adobe Photoshop .................................................................................................................. 33
2.4.11 Java Script ............................................................................................................................ 36
2.5 Herramientas a Utilizar en el Desarrollo Web ............................................................................... 37
2. 5.1 Interfaz ................................................................................................................................... 37
2.5.2 Gestor de Base de Datos: MYSQL ......................................................................................... 37
2.6 Lenguajes de programacin ........................................................................................................... 38
2.6.1 Notepad ++ ............................................................................................................................. 39
2.7 Concepto de Ingeniera Web ......................................................................................................... 39
INSTITUTO TECNOLOGICO DE ORIZABA




3
2.7.1 reas ....................................................................................................................................... 40
2.7.2 Categoras ............................................................................................................................... 41
2.7.3 Formulacin y planeacin para la Ingeniera Web ................................................................. 43
2.8 PLANEACION EN PROYECTOS DE INGENIERIA WEB ....................................................... 45
2.8.1 Se necesita una gran cantidad de talentos para desarrollar un proyecto web entre ellos. ....... 45
2.8.2 Construccin del equipo: ........................................................................................................ 46
2.8.3 Modelado de anlisis para aplicaciones web .......................................................................... 46
2.8.4 Anlisis relacin -navegacin ARN ....................................................................................... 48
2.8.5 Modelado del diseo .............................................................................................................. 48
2.8.6 Diseo de la interfaz de la WebApp ....................................................................................... 49
2.8.7 Diseo del contenido .............................................................................................................. 49
2.8.8 Diseo arquitectnico ............................................................................................................. 50
2.8.9 Diseo de navegacin ............................................................................................................. 50
2.8.10 Diseo a nivel de componentes ............................................................................................ 51
2.9 Metodologa UWE ......................................................................................................................... 52
2.9.1 UWE y su relacin con UML ................................................................................................. 53
2.9.2 Modelos UWE ........................................................................................................................ 53
CAPTULO 3 APLICACIN ................................................................................................................. 55
3.1 Solucin de problema .................................................................................................................... 55
3.1.2 Identificacin de necesidades y requerimientos ..................................................................... 55
3.2 Recopilacin de requisitos ............................................................................................................. 57
3.3 Establecer alcances y limitaciones ................................................................................................ 57
3.4 Planificacin .................................................................................................................................. 57
3.4.1 Estudio de factibilidad ............................................................................................................ 57
3.4.2 Estudio Tcnico ...................................................................................................................... 58
3.5 Estudio de anlisis ......................................................................................................................... 59
3.5.1 Anlisis de riesgos .................................................................................................................. 59
3.5.2 Anlisis Relacin-Navegacin ............................................................................................... 59
3.5.3 Anlisis de Configuracin ...................................................................................................... 60
3.5.4 Anlisis Funcional .................................................................................................................. 61
3.5.5 Anlisis de Interaccin ........................................................................................................... 62
3.5.6 Diagrama de clases ................................................................................................................. 76
3.5.7 Diseo de Navegacin ............................................................................................................ 77
INSTITUTO TECNOLOGICO DE ORIZABA




4
3.5.8 Diseo de la Base de Datos .................................................................................................... 78
3.5.9 Diseo de la implementacin ................................................................................................. 78
3.6 Generacin de pginas y pruebas ................................................................................................. 78
3.6.1 Pruebas de integracin. ........................................................................................................... 85
3.6.2 Prueba de configuracin ......................................................................................................... 89
3.6.3 Prueba de componentes .......................................................................................................... 90
3.6.4 Prueba de Navegacin ............................................................................................................ 90
3.6.5 Prueba de contenido................................................................................................................ 91
3.6.6 Prueba de la interfaz ............................................................................................................... 92
3.7 Evaluacin del cliente .................................................................................................................... 92
CONCLUSIONES ....................................................................................................................................... 55
RECOMENDACIONES ............................................................................................................................. 103
GLOSARIO .............................................................................................................................................. 104
BIBLIOGRAFIA: ....................................................................................................................................... 106
REFERENCIAS DE INTERNET ................................................................................................................... 106
INSTITUTO TECNOLOGICO DE ORIZABA




5


ndice de Figuras
Figura 1 1 Escudo de la Universidad del Golfo de Mxico....................................................................... 11
Figura 1 2 Plantel Margarita Olivo Lara ................................................................................................... 13
Figura 1 3 Plantel Rio Blanco ................................................................................................................... 14
Figura 1 4 Ubicacin Geogrfica .............................................................................................................. 18
Figura 1 5 Organigrama Jerrquico ......................................................................................................... 19
Figura 2.1 Quien Utiliza Jquery ................................................................................................................ 31
Figura 2.2 Diseo de Photoshop .............................................................................................................. 35
Figura 3.1 Diagrama de casos de usos ..................................................................................................... 62
Figura 3.2 Diagrama de Clases ................................................................................................................. 76
Figura 3.3 Diagrama de navegacin Sys Papeleras ................................................................................. 77
Figura 3.4 Prototipo de interfaz de usuario de entrada del sistema ....................................................... 78
Figura 3.5 Prueba de la pgina de login en google chrome .................................................................... 89
Figura 3.6 Pgina de login (Inicio de la aplicacin) ................................................................................. 92
Figura 3.7 Logo UGM ............................................................................................................................... 93
Figura 3.8 Eslogan .................................................................................................................................... 93
Figura 3.9 Imgenes de Papelera............................................................................................................ 93
Figura 3.10 Pagina de Sys Papeleras ...................................................................................................... 94
Figura 3.11 Formulario de inicio de sesin .............................................................................................. 94
Figura 3.12 Nombre de la sucursal .......................................................................................................... 95
Figura 3.13 Cabecera de sys papelera .................................................................................................... 95
Figura 3.14 Marquesina y men que describe las opciones para el usuario .......................................... 96
Figura 3.15 Opcin de Registro de categoras ......................................................................................... 96
Figura 3.16 Formulario de categoras ...................................................................................................... 97
Figura 3.17 Opcin de Unidad de Medida ............................................................................................... 97
Figura 3.18 Formulario de Unidad de medida ......................................................................................... 98
Figura 3.19 Opcin de Productos ............................................................................................................ 98
Figura 3.20 Formulario de Producto........................................................................................................ 99
Figura 3.21 Opcin Sucursales ................................................................................................................. 99
Figura 3.22 Formulario de Sucursales................................................................................................... 100
Figura 3.23 Formulario de registro de tipo y datos de sucursales 100







INSTITUTO TECNOLOGICO DE ORIZABA




6


ndice de tablas
Tabla 1 1 Actividades Realizadas ............................................................................................................. 21
Tabla 3.1 Requerimientos del cliente ...................................................................................................... 56
Tabla 3.2 Requerimientos del programador ........................................................................................... 56
Tabla 3.3 Escenarios registrar categoras ................................................................................................ 63
Tabla 3.4 Escenario modificar categoras ................................................................................................ 64
Tabla 3.5 Escenarios eliminar categora .................................................................................................. 65
Tabla 3.6 Escenarios registra unidad de medida ..................................................................................... 66
Tabla 3.7 Escenarios modifica unidad de medida ................................................................................... 67
Tabla 3.8 Escenarios elimina unidad de medida ..................................................................................... 68
Tabla 3.9 Escenarios registra producto ................................................................................................... 69
Tabla 3.10 Escenarios modifica producto................................................................................................ 70
Tabla 3.11 Escenarios eliminar productos ............................................................................................... 71
Tabla 3.12 Asignar imagen al producto ................................................................................................... 73
Tabla 3.13 Escenarios registrar sucursal ................................................................................................. 74
Tabla 3.14 Escenarios modificar sucursal ................................................................................................ 75
Tabla 3.15 Escenarios eliminar sucursal .................................................................................................. 85
Tabla 3.16 Prueba de integracin unidad de medida ............................................................................. 86
Tabla 3.17 Prueba de integracin categorias .......................................................................................... 87
Tabla 3.18 Prueba de integracin productos .......................................................................................... 88
Tabla 3.19 Prueba de integracion sucursales .......................................................................................... 90
Tabla 3.21 prueba de Navegacin 91













INSTITUTO TECNOLOGICO DE ORIZABA




7


Introduccin

Debido a los enormes cambios sufridos por el mercado en los ltimos aos con la
incorporacin de tecnologas informticas que facilitarn la administracin de los datos, con el
fin de ofrecer mejoras en la toma de decisiones gerenciales .En la actualidad, se requiere que
los sistemas de informacin se manejen de forma sistematizada, ya que existen una gran
variedad de herramientas de desarrollo que permiten a las empresas y/o entidades contar con
medios que sirven para obtener una informacin rpida, veraz, actualizada y oportuna de los
requerimientos solicitados por los usuarios; un sistema de informacin contribuye al desarrollo
y mejoramiento en el control y toma de decisiones por parte de los directivos de las empresas.
La tecnologa es un pilar fundamental en las entidades, debido a que esta sirve como escaln
para avanzar y permite resolver problemas que se presenten por el manejo inadecuado de la
informacin llevada en forma manual

La implementacin de sistemas de informacin en una compaa, brindan la posibilidad de
obtener grandes ventajas, incrementar la capacidad de organizacin de la empresa, y tomar de
esta manera los procesos a una verdadera competitividad. Para ello, es necesario un sistema
eficaz que ofrezca mltiples posibilidades, permitiendo acceder a los datos relevantes de
manera frecuente y oportuna.

De esta manera, con los aos se han ido incorporando los avances de la tecnologa informtica
para brindar las herramientas necesarias en la creacin de sistemas de informacin confiable y
eficaz. Por estas razones la Universidad del Golfo de Mxico decidi que era importante
desarrollar su propio sistema de informacin, por lo que se ha definido el proyecto Sistema a
nivel rectora para la gestin de papeleras Este proyecto de residencias describe el desarrollo
de aplicaciones a travs de la ingeniera web.




INSTITUTO TECNOLOGICO DE ORIZABA




8



Este documento detalla las metodologas y herramientas usadas en el desarrollo del Sistema a
nivel rectora para la gestin de papeleras, la problemtica a resolver, las actividades que se
llevaron a cabo para lograr el fin planteado, los alcances y delimitaciones del proyecto
realizado.

Esta documentacin consta de 3 captulos:

CAPITULO 1 GENERALIDADES:

Este apartado est conformado por informacin importante acerca de la empresa donde
se est realizando el proyecto, en este caso en particular se refiere a la Institucin
Educativa Universidad del Golfo de Mxico, Rectora Centro, dentro del departamento
de Sistemas y Telecomunicaciones.

CAPITULO 2: MARCO TEORICO:

Este captulo contiene las herramientas y lenguajes de programacin utilizados, metodologa
empleada, su uso y modo de aplicacin para el desarrollo del proyecto.

CAPITULO 3: DESARROLLO DEL PROYECTO:

En este captulo se describe detalladamente la metodologa implementada para el
Desarrollo del proyecto, as como las fases que lo conforman, para los fines de este
proyecto se trabajara bajo el uso de la Metodologa Web UWE

Por ltimo se tendrn los resultados obtenidos as como sus respectivas conclusiones para
poder brindar algunas recomendaciones que ayudaran a mejorar el desempeo del
proyecto en caso de que posteriormente se busque optimizar aun ms su funcionamiento.


INSTITUTO TECNOLOGICO DE ORIZABA




9


Planteamiento del problema

La Universidad del Golfo de Mxico (UGM) Rectora Centro es una institucin educativa
que actualmente cuenta con diversos planteles ubicados en diferentes estados de la
repblica.

Esta institucin cuenta con un servicio de papelera que actualmente lleva todos los procesos
de registro manualmente, as como entradas de artculos adquiridos por los proveedores, el
conteo de las ventas registradas diariamente e inventarios, generando prdida de tiempo y
teniendo un margen de error a la hora de entregar un reporte final.
Es necesario que un sistema pueda ser controlado desde un medio como es el internet,
mediante el acceso de un usuario y contrasea se podrn realizar consultas en los diferentes
campus sobre las papeleras que se encuentran en ellos. Tambin se debe consideran que cada
campus debe contar con un administrador que lleven el control de la papelera de dicho
campus, y que exista un administrador principal el cual tendr control total del sistema.

Justificacin

En la actualidad contar con un sistema de informacin es de gran importancia, ya que permite
utilizar procesos y respaldar informacin, un aspecto importante que no se debe olvidar es que
permitan gestionar los datos evitando as la prdida o inconsistencia de estos, por ello surge la
necesidad de disear, desarrollar e implementar un sistema de informacin que permita realizar
y obtener un buen control de las diferentes actividades que son necesarias para una buena
administracin de la papelera ubicada en el plantel de la Universidad del Golfo de Mxico
(UGM) rectora centro.
INSTITUTO TECNOLOGICO DE ORIZABA




10


Objetivo General

Llevar un sistema de informacin que permita obtener un control eficiente de las diferentes
actividades para una mejor administracin de la papelera.

Objetivos Especficos

Disear una interfaz que sea fcil de usar
Analizar los aspectos principales que se desean evaluar
Diagnosticar mtodos de evaluacin eficientes
Disminucin de margen de error
Optimizar tiempos
Datos en tiempo real
Control de inventarios
INSTITUTO TECNOLOGICO DE ORIZABA




11


Captulo I. Generalidades

1.1 Antecedentes de la empresa

La Universidad del Golfo de Mxico, nace en 1989, cuando un grupo de profesionistas de la
regin, deciden fundar esta institucin educativa, que inici sus labores en Septiembre de ese
ao, teniendo como precursores a un grupo de visionarios que acercaron la educacin de
calidad a todos los niveles sociales, hoy se dividen en Rectoras: Norte, Sur y Centro.










Siendo este centro de estudios instalado en un edificio de Ciudad Mendoza, Veracruz, Situado
en la Avenida Hidalgo contra esquina del Parque Central; inicia sus labores con 14 alumnos de
Bachillerato y 34 alumnos de Licenciatura en Administracin de Empresas.

Los alumnos egresados de esa generacin ahora ejercen sus carreras como profesionales,
habindose titulado en el sistema UGM.

1989 Se crea el Patronato Pro-Construccin de la Escuela de Bachilleres y Universidad del
Golfo de Mxico A.C.

1989 Nace la Universidad del Golfo de Mxico en Ciudad Mendoza; Bachillerato General y
licenciatura en Administracin de Empresas.
Figura 1.1 Escudo de la Universidad del Golfo de Mxico
INSTITUTO TECNOLOGICO DE ORIZABA




12


1990 Se incorporan nuevas licenciaturas: Administracin de Empresas Tursticas, Psicologa y
Derecho.

1990 Nace el Campus Tehuacn, Puebla, con las Licenciaturas en: Administracin de
Empresas, Administracin de Empresas Tursticas, Informtica, Derecho y Psicologa.

1992 Nace el Campus Orizaba, trasladndose las Licenciaturas que se impartan en Cd.
Mendoza a Orizaba

1992 Nace el Campus Crdoba.

1994 Nace el Campus Minatitln.

1996 Nace el Campus Oaxaca, Oax. Con la autorizacin del Instituto Estatal de Educacin
Pblica de Oaxaca para iniciar clases mientras se tramitan los RVOE correspondientes.

1996 Nace el Bachillerato General de Enseanza abierta para el campus Cd. Mendoza.

1997 Nacen los Campus: Tuxpan, Martnez de la Torre, Tierra Blanca, San Andrs Tuxtla y
Coatzacoalcos.

1997 Se imparte en el Campus Crdoba, el Diplomado en Comunicacin Organizacional e
Imagen Corporativa, en convenio con la Universidad Nacional Autnoma de Mxico.

1998 Nace el Bachillerato General para el Campus Tehuacn.

1999 Se incorporan al Sistema de la Universidad del Golfo de Mxico los bachilleratos
Tcnicos en Poza Rica, Tuxpan, Martnez de la Torre, Tierra Blanca, Minatitln y San Andrs
Tuxtla.


INSTITUTO TECNOLOGICO DE ORIZABA




13


1999 Se adquiere el Instituto Pluviosilla en la ciudad de Orizaba, siendo este Bachillerato
general del Golfo de Mxico.

1999 Nace e inicia actividades el Colegio de Golfo de Mxico impartiendo nivel primaria en
Orizaba, Ver.

2000 En Crdoba, Ver. Se incorpora al Sistema Educativo UGM la primaria "Isaac Newton",
contando con los niveles de Jardn de Nios y Primaria.

2000 El mes de agosto inicia actividades el Campus de Ciudad Mendoza en los niveles de
Jardn de nios, Primaria y Secundaria








2000 En el mes de octubre se firma convenio con el Instituto Tecnolgico de Tijuana, B.C.
para impartir la maestra en Administracin.

2000 Se inicia el Jardn de Nios de la Ciudad de Orizaba

2001 Inician las actividades de secundaria en Orizaba y Crdoba.

2001 Se adquiere la escuela "Margarita Olivo Lara" en la ciudad de Coatzacoalcos, ofreciendo

Figura 1.2 Plantel Margarita Olivo Lara
INSTITUTO TECNOLOGICO DE ORIZABA




14


2002 En convenio con la Universidad de Tlaxcala se imparte la maestra en Derecho Penal y
Fiscal iniciando en el plantel de Orizaba en el mes de Agosto.

2002 Nacen los campus de Cosamaloapan y Coscomatepec, a nivel Licenciatura.

2003 Debido al crecimiento de la Universidad es necesario crear dos rectoras: Sur y
Norte que atiendan de una mejor manera a los planteles.

2004 Son creados los planteles de Xalapa, Ver. y Matas Romero A. Oax. Atendidos por
rectora Sur, y Quertaro atendido por rectora Norte.

2005 Firma de Convenio con la Alianza Francesa para promover este idioma en los planteles
de UGM.








2006 En abril de este ao Rectora Sur se divide crendose Rectora Centro bajo la supervisin
del Ing. Prudencio Reyes Larios. En ese mismo ao surgen los campus de Puebla y Ro Blanco
en Veracruz, bajo la tutora de Rectora Centro. (Figura 1.3)

2006 Se apertura el plantel de Ixtaczoquitln en el estado de Veracruz otorgando el nivel de
Jardn de nios y Primaria, de igual manera surgen Jos Azueta nivel licenciatura en Veracruz
por parte de Rectora Centro y Veracruz Puerto atendido por rectora Sur, se firm convenio
con el Centro de Ciencias Jurdicas de Puebla para impartir seis maestras en Derecho.
Figura 1.3 Plantel Rio Blanco
INSTITUTO TECNOLOGICO DE ORIZABA




15


2008 Se apertura los campus de Acayucan y Playa Vicente en Veracruz, Salina Cruz en
Oaxaca y Ciudad Serdn en Puebla, se inicia en Minatitln el nivel de jardn de nios y
primaria. De igual manera UGM Rectora Centro obtiene el permiso a nivel estatal para ofrecer
su primera maestra de manera individual, siendo esta la de Direccin y Gestin de Centros
Educativos.

2009 Se apertura el campus Tuxtepec, Oax.

2010 Se apertura el campus Huatulco, Oax. y la Secretara de Educacin de Veracruz otorg
los RVOES para ofrecer las maestras en Impuestos y Defensa Fiscal, criminologa,
Administracin, Derecho Procesal e Ingeniera Industrial. Se firm convenio con la
Universidad Nacional Abierta para impartir la maestra en Educacin Abierta y a Distancia.

2011 Se apertura el campus Loma Bonita, Oax.

Misin
Ofrecer educacin de alta calidad, innovadora en todos sus niveles y modalidades, accesible en
todos los diferentes estratos sociales, mantener el compromiso de preservar valores,
costumbres y tradiciones, ecologa y medio ambiente, fomentar el arraigo regional, promover y
generar el cambio de mentalidad para el desarrollo integral del pas

Visin
Ser de las instituciones educativas ms prestigiadas de Mxico por su calidad
acadmica y compromiso social.





INSTITUTO TECNOLOGICO DE ORIZABA




16


Valores

Puesto que los valores son el fundamento de toda estructura social, personal, familiar y
organizacional, hemos estructurado los que se constituyen como Piedra Angular del Sistema de
Calidad UGM:

Humanismo
Compromiso Social
Pertenencia
Servicio
Confianza
Orden
Calidad
Excelencia

Ideario UGM.

UGM es una institucin Educativa sin fines de lucro, laica y ajena a partidismos polticos. Es
una Universidad que nace con la conciencia de ser solidaria con la sociedad, ofreciendo
educacin de la ms alta calidad a costos accesibles. Se promueve y motiva la realizacin
humana de quienes truncaron sus estudios ofertando horarios matutino, vespertino, nocturnos
y/o dominical.








INSTITUTO TECNOLOGICO DE ORIZABA




17


Poltica de Calidad

La Universidad del Golfo de Mxico es una institucin Educativa sin fines de lucro, laica y
ajena a partidismos polticos. Es una Universidad que nace con la conciencia de ser
solidaria con la sociedad. Ofreciendo educacin de la ms alta calidad a costos accesibles.
Se promueve y motiva la realizacin humana de quienes truncaron sus estudios Ofertando
horarios matutino, vespertino, nocturnos y/o dominical.

UGM tiene el compromiso de ofrecer servicios educativos de calidad que rebasen las
expectativas de los estudiantes, docentes, empleados, padres de familia y de la sociedad
a travs de la mejora continua y la optimizacin de recursos basados en los requisitos de
la norma de calidad ISO9001:2000.
INSTITUTO TECNOLOGICO DE ORIZABA




18




1.2 Ubicacin geogrfica de la empresa

La Universidad del Golfo de Mxico rectora centro se encuentra ubicada en Poniente 7 # 661
altos entre calle sur 12 y 14 Col. Centro, Orizaba Veracruz.

























Figura 1.4 Ubicacin Geogrfica
INSTITUTO TECNOLOGICO DE ORIZABA




19

1.3 Organigrama de la empresa


























Departamento
Acadmico
Departamento de Compras
Departamento de Servicios
Escolares
Departamento de Almacn
y Activo Fijo
Departamento
Administrativo
Departamento de Recursos
Humanos
Rector
Universidad del Golfo
de Mxico
Departamento de Obras
Departamento de Planta
Fsica
Departamento de Jurdico
Departamento de
Planeacin y Calidad
Departamento de Sistemas
y Telecomunicaciones
Departamento de Extensin
Servicios Universitarios
Figura 1.5 Organigrama Jerrquico
INSTITUTO TECNOLOGICO DE ORIZABA




20




1.4 Descripcin del rea de desarrollo

La Universidad del Golfo de Mxico, Rectora Centro est conformado por diferentes
departamentos, en donde cada uno se encarga de realizar tareas especficas
correspondientes a un rea en especfico.

El rea en donde surge la propuesta de este proyecto y en donde es llevado a cabo es en el
rea de Desarrollo Web y Programacin de Sistemas, perteneciente al Departamento
de Sistemas y Telecomunicaciones, en donde se analiza, disea, desarrolla e
implementa sistemas de informacin para el mejoramiento de un proceso o para
solucionar nuevos requerimientos que van surgiendo con el paso del tiempo.

Este departamento cuenta con diferentes reas de inters, como lo es el rea de
mantenimiento y soporte, en donde se brinda soporte tcnico y de sistemas, se capacita
y asesora a los administrativos que estn encargados de gestionar los sistemas de cada uno
de los planteles de la Universidad del Golfo de Mxico, sin olvidar que cada plantel cuenta
con diferentes niveles y modalidades.


INSTITUTO TECNOLOGICO DE ORIZABA




21


1.5 Cronograma de actividades
















Tabla 1. 1 Actividades Realizadas
INSTITUTO TECNOLOGICO DE ORIZABA




22

1.6 Alcances y limitaciones

Alcances

Los principales alcances de los Sitios Web fueron los siguientes:

Gestin de contenidos, mens y usuarios del sistema.
Paginas que sean de fcil utilizacin para el usuario.
Fcil interaccin al realizar las evaluaciones.
Facilidad de realizar mantenimiento a la aplicacin.
Facilidad para la administracin de las encuestas.


Limitaciones

Se consideran los puntos que pueden ocasionar que el proyecto no se logre o se retrase.

La adquisicin de un servidor nuevo.
El administrador no est capacitado.
El administrador abandone el puesto y se tenga que volver a capacitar a otra
persona.
Los usuarios no podrn visualizar pginas a las que no tengan autorizado
ingresar







INSTITUTO TECNOLOGICO DE ORIZABA




23

CAPTULO 2. MARCO TERICO
2.1 Internet

Hoy en da el internet es una herramienta poderosa, la cual ha permitido llegar a diversos
lugares del mundo, es por ello que es considerada como un conjunto descentralizado de redes
de comunicacin interconectadas que utilizan la familia de protocolos TCP/IP, garantizando
que las redes fsicas heterogneas que la componen funcionen como una red lgica nica, de
alcance mundial.

Sus orgenes se remontan a la dcada de 1960, dentro de ARPA (hoy DARPA), como
respuesta a la necesidad de esta organizacin de buscar mejores maneras de usar los
computadores de ese entonces, pero enfrentados al problema de que los principales
investigadores y laboratorios deseaban tener sus propios computadores, lo que no slo era ms
costoso, sino que provocaba una duplicacin de esfuerzos y recursos.5 As nace ARPANet
(Advanced Research Projects Agency Network o Red de la Agencia para los Proyectos de
Investigacin Avanzada de los Estados Unidos), que nos leg el trazado de una red inicial de
comunicaciones de alta velocidad a la cual fueron integrndose otras instituciones
gubernamentales y redes acadmicas durante los aos 70.

La red fue ideada como proyecto de seguridad nacional por el ejrcito norteamericano ms no
de tipo comercial pero hoy su uso dice otra cosa. La web es la herramienta ms usada en
internet ya que muestra en la pantalla, paginas como informacin en las computadoras remotas
o sitios. WWW permite el acceso a internet en algo usual para las personas, permitiendo
recorrer la web, publicar en ella, retomar informacin y mucho ms lo cual est en los
hipervnculos. Un archivo se almacena en un servidor de la web dando acceso a otras
computadoras que estn conectadas a l, va internet. Al archivo se accede a travs de
exploradores web, son los que transfieren de archivos mostrando el resultado en el monitor. En
la web hay interactividad y permite usar objetos multimedia ese es utilizado para describir
sonido, video, archivos de textos etc.


INSTITUTO TECNOLOGICO DE ORIZABA




24

Que se combinan y muestra la informacin. Existen por tanto, muchos otros servicios y
protocolos en Internet, aparte de la Web: el envo de correo electrnico (SMTP), la transmisin
de archivos (FTP y P2P), las conversaciones en lnea (IRC), la mensajera instantnea y
presencia, la transmisin de contenido y comunicacin multimedia -telefona (VoIP), televisin
(IPTV), los boletines electrnicos (NNTP) el acceso remoto a otros dispositivos (SSH y
Telnet).

El mtodo de acceso a Internet vigente hace algunos aos, la telefona bsica, ha venido siendo
sustituido gradualmente por conexiones ms veloces y estables, entre ellas el ADSL, Cable
Mdems, o el RDSI. Tambin han aparecido formas de acceso a travs de la red elctrica, e
incluso por satlite (generalmente, slo para descarga, aunque existe la posibilidad de doble
va, utilizando el protocolo DVB-RS).

Internet tambin est disponible en muchos lugares pblicos tales como bibliotecas,
restaurantes, hoteles o cibercafs y hasta en centros comerciales. Una nueva forma de acceder
sin necesidad de un puesto fijo son las redes inalmbricas, hoy presente en aeropuertos,
subterrneo, universidades o poblaciones enteras. En realidad, Internet no es un medio de
comunicacin, sino muchos medios, una red que comprende distintos tipos y distintos sistemas
de comunicacin. La gente utiliza Internet para muy distintas finalidades. Muchas de ellas
estn relacionadas con diferentes y variadas categoras de comunicacin, informacin e
interaccin.

Algunas son nuevas y otras muy antiguas, pero estas categoras no se excluyen mutuamente,
ya que no slo los usuarios pueden participar en Internet mediante una combinacin de
comunicacin, informacin e interaccin al mismo tiempo, sino que tambin los distintos
medios se entremezclan en el mismo canal. Javier Candeira no se cansa de repetir que Internet
no es un medio, sino un canal. En su artculo La Web como memoria organizada dice:
"Aprovecho cada ocasin que tengo para puntualizarlo: Internet no es un medio, es un canal.
Los distintos medios que utilizan Internet como canal son la Web, el correo electrnico, el
telnet e incluso la televisin y la radio".


INSTITUTO TECNOLOGICO DE ORIZABA




25


Se podra afirmar que Internet no es ni un canal ni un medio, sino un hipersistema, un
Macrosistema o un metasistema de comunicacin en el que los distintos sistemas se mezclan y
entretejen. La digitalidad no slo reduce todas las morfologas de la informacin a una sola:
texto, imagen y sonido se convierten en bits de informacin, sino que tambin los distintos
medios de comunicacin con sus distintos sistemas, se integran en uno al converger en la red
Javier Echeverra en Los seores del aire: Telpolis y el Tercer Entorno afirma: "Suele decirse
que Internet es un medio de comunicacin, y ello es muy cierto. Sin embargo, Internet posee
otras cualidades 'mediticas', y por ello diremos que esa red es: un medio de comunicacin, un
medio de informacin, un medio de memorizacin, un medio de produccin, un medio de
comercio, un medio para el ocio y el entretenimiento y un medio de interaccin".

2.2 Dominio de Internet

Un Dominio es un nombre alfanumrico nico que se utiliza para identificar en Internet a un
sitio, un servidor web o un servidor de correo. Los dominios permiten a los usuarios de la red
escribir un nombre para identificar una Direccin electrnica totalmente formada por nmeros.
Mediante la utilizacin de los Dominios, los usuarios conectados a Internet pueden encontrar
sitios web y enviar e-mail sin necesidad de recordar las direcciones numricas, que en realidad
son las que localizan las computadoras o servicios en Internet.

2.3 Los sistemas web

Un sistema web es una aplicacin que es accedida va interne y est elaborado por varios
lenguajes de programacin que son ejecutados en el entorno del navegador y codificado en
algn lenguaje que es soportado por el navegador como por ejemplo javascritp combinado con
HTML y PHP. es un sistema web suelen distinguirse tres niveles: el nivel superior que
interacciona con el usuario (el cliente web, normalmente un navegador). El nivel inferior que
proporciona los datos (base de datos) y el intermedio que procesa los datos (servidor web


INSTITUTO TECNOLOGICO DE ORIZABA




26


2.4 Herramientas para el diseo y desarrollo del sistema
2.4.1 Visual Paradigm para UML

Visual Paradigm for UML (VP-UML) es una herramienta de diseo UML y herramienta
CASE UML diseado para ayudar al desarrollo de software. VP-UML soporta los
principales estndares de modelado como Lenguaje de Modelado Unificado (UML) 2.4,
SysML, ERD, DFD, BPMN 2.0, 2.0 ArchiMate, etc. Es compatible con los equipos de
desarrollo de software en la captura de requisitos, software de planificacin (utilizar el
anlisis de caso), cdigo de la ingeniera, modelado clase, modelado de datos, etc.

Permite realizar anlisis para plasmas cualquier tipo de diagramas, de casos de uso,
clases, secuencia, actividad, navegacin, componentes, entre otros. Para este proyecto se
utiliz la versin Community, para uso no-comercial, la cual no tiene ningn costo de
adquisicin, con la restriccin de no poder generar de cdigo y crear tablas de base de datos,
adems de la exportacin de diagramas a imgenes con marca de agua

2.4.2 HTML 5

HTML5 (HyperText Markup Language, versin 5) es la quinta revisin importante del
lenguaje bsico de la World Wide Web, HTML. HTML5 especifica dos variantes de sintaxis
para HTML: un clsico HTML (text/html), la variante conocida como HTML5 y una
variante XHTML conocida como sintaxis XHTML5 que deber ser servida como XML).

Esta es la primera vez que HTML y XHTML se han desarrollado en paralelo. Todava se
encuentra en modo experimental, lo cual indica la misma W3C; aunque ya es usado por
mltiples desarrolladores web por sus avances, mejoras y ventajas.
Al no ser reconocido en viejas versiones de navegadores por sus nuevas etiquetas, se le
recomienda al usuario comn actualizar a la versin ms nueva, para poder disfrutar de todo el
potencial que provee HTML5.
INSTITUTO TECNOLOGICO DE ORIZABA




27


El desarrollo de este lenguaje de marcado es regulado por el Consorcio W3C.HTML5
establece una serie de nuevos elementos y atributos que reflejan el uso tpico de los sitios web
modernos. Algunos de ellos son tcnicamente similares a las etiquetas <div> y <span>, pero
tienen un significado semntico, como por ejemplo <nav> (bloque de navegacin del sitio
web) y <footer>. Otros elementos proporcionan nuevas funcionalidades a travs de una
interfaz estandarizada, como los elementos <audio> y <video>. Mejora el elemento <canvas>,
capaz de renderizar elementos 3D en los navegadores ms importantes (Mozilla, Chrome,
Opera, Safari e IE).
Algunos elementos de HTML 4.01 han quedado obsoletos, incluyendo elementos puramente de
presentacin, como <font> y<center>, cuyos efectos son manejados por Hojas de estilo en
cascada. Tambin hay un renovado nfasis en la importancia del scripting DOM para el
comportamiento de la web. 2.0
La estructura bsica de una pgina es:

<html>
<head>
...
</head>
<body>
...
</body>
</html>







INSTITUTO TECNOLOGICO DE ORIZABA




28


2.4.3 Hojas de Estilo

Las hojas de estilo representan un avance importante para los diseadores de pginas web, al
darles un mayor rango de posibilidades para mejorar la apariencia de sus pginas. En los
entornos cientficos en que la Web fue concebida, la gente estaba ms preocupada por el
contenido de sus pginas que por su presentacin.

A medida que la Web era descubierta por un espectro mayor de personas de distintas
procedencias, las limitaciones del HTML se convirtieron en fuente de continua frustracin, y
los autores se vieron forzados a superar las limitaciones estilsticas del HTML. Aunque las
intenciones han sido buenas -- mejorar la presentacin de las pginas web, las tcnicas para
conseguirlo han tenido efectos secundarios negativos.

Entre estas tcnicas, que dan buenos resultados para algunas personas, algunas veces, pero no
siempre ni para todas las personas, se incluyen:

La utilizacin de extensiones propietarias del HTML
Conversin del texto en imgenes
Utilizacin de imgenes para controlar el espacio en blanco
La utilizacin de tablas para la organizacin de las pginas
Escribir programas en lugar de usar HTML

Estas tcnicas incrementan considerablemente la complejidad de las pginas web, ofrecen una
flexibilidad limitada, sufren de problemas de interoperabilidad, y crean dificultades para las
personas con discapacidades. Las hojas de estilo resuelven estos problemas al mismo tiempo
que reemplazan al limitado rango de mecanismos de presentacin del HTML. Con las hojas de
estilo es ms fcil especificar la cantidad de espacio entre lneas, el sangrado de las lneas, los
colores a utilizar para el texto y el fondo, el tamao y estilo de las fuentes, y otros muchos
detalles.

INSTITUTO TECNOLOGICO DE ORIZABA




29

2.4.4 CSS

Las hojas de estilo en cascada o (Cascading Style Sheets, o sus siglas CSS) hacen
referencia a un lenguaje de hojas de estilos usado para describir la presentacin
semntica (el aspecto y formato) de un documento escrito en lenguaje de marcas. Su
aplicacin ms comn es dar estilo a pginas webs escritas en lenguaje HTML y XHTML,
pero tambin puede ser aplicado a cualquier tipo de documentos XML, incluyendo SVG y
XUL.

La informacin de estilo puede ser adjuntada como un documento separado o en el mismo
documento HTML. En este ltimo caso podran definirse estilos generales en la cabecera
del documento o en cada etiqueta particular mediante el atributo "<style>".

2.4.4.1 Formas de usar las hojas de estilo

Para dar formato a un documento HTML, puede emplearse CSS de tres formas distintas:
Mediante CSS introducido por el autor del HTML

1.- Un estilo en lnea (online) es un mtodo para insertar el lenguaje de estilo de pgina
directamente dentro de una etiqueta HTML. Esta manera de proceder no es totalmente
adecuada. El incrustar la descripcin del formateo dentro del documento de la pgina Web,
a nivel de cdigo, se convierte en una manera larga, tediosa y poco elegante de resolver el
problema de la programacin de la pgina. Este modo de trabajo se podra usar de
manera ocasional si se pretende aplicar un formateo con prisa, al vuelo. No es todo lo claro
o estructurado que debera ser pero funciona. Dado que los clientes de correo electrnico no
soportan las hojas de estilos externas, y que no existen estndares que los fabricantes de
clientes de correo respeten para utilizar CSS en este contexto, la solucin ms
recomendable para maquetar correos electrnicos, es utilizar CSS dentro de los propios
elementos (online).


INSTITUTO TECNOLOGICO DE ORIZABA




30


2. Una hoja de estilo interna, que es una hoja de estilo que
incrustada dentro de un documento HTML, dentro del elemento <head>, marcada por
la etiqueta <style>. De esta manera se obtiene el beneficio de separar la informacin
del estilo del cdigo HTML propiamente dicho. Se puede optar por copiar la hoja de
estilo incrustada de una pgina a otra (esta posibilidad es difcil de ejecutar si se desea
para guardar las copias sincronizadas).
En general, la nica vez que se usa una hoja de estilo interna, es cuando se quiere
proporcionar alguna caracterstica a una pgina Web en un simple fichero, por ejemplo, si se
est enviando algo a la pgina Web.

3. Una hoja de estilo externa, es una hoja de estilo que est almacenada en un
archivo diferente al archivo donde se almacena el cdigo HTML de la pgina Web. Esta es
la manera de programar ms potente, porque separa completamente las reglas de formateo
para la pgina HTML de la estructura bsica de la pgina.

Estilos CSS introducidos por el usuario que ve el documento, mediante un archivo CSS
especificado mediante las configuraciones del navegador, y que sobre escribe los estilos
definidos por el autor en una, o varias pginas web.
Los estilos marcados "por defecto" por los user agent, para diferentes elementos de un
documento HTML, como por ejemplo, los enlaces.

2.4.5 JQuery

JQuery es una biblioteca o framework de Javascript, creada inicialmente por John Resig, que
permite simplificar la manera de interactuar con los documentos HTML, manipular el
rbol DOM, manejar eventos, desarrollar animaciones y agregar interaccin con la
tecnologa AJAX a pginas web. Fue presentada el 14 de enero de 2006 en el BarCamp
NYC.


INSTITUTO TECNOLOGICO DE ORIZABA




31


JQuery es software libre y de cdigo abierto, posee un doble licenciamiento bajo la licencia
MIT y de la GNU General Public License, Versin 2.
JQuery, al igual que otras bibliotecas, ofrece una serie de funcionalidades basadas en
JavaScript que de otra manera requeriran de mucho ms cdigo. Es decir, con las funciones
propias de esta biblioteca se logran grandes resultados en menos tiempo y espacio.

Quin est utilizando JQuery?



Figura 2.1 Quien Utiliza Jquery

2.4.6 Xampp

XAMPP es un servidor independiente de plataforma, software libre, que consiste
principalmente en la base de datos MySQL, el servidor Web Apache y los intrpretes para
lenguajes de script: PHP y Perl. El nombre proviene del acrnimo de X (para cualquiera de los
diferentes sistemas operativos), Apache, MySQL, PHP, Perl. El programa est liberado bajo la
licencia GNU y acta como un servidor Web libre, fcil de usar y capaz de interpretar pginas
dinmicas. Actualmente XAMPP est disponible para Microsoft Windows, GNU/Linux,
Solaris, y MacOS X.


INSTITUTO TECNOLOGICO DE ORIZABA




32


2.4.7 FileZilla

FileZilla es un cliente FTP multiplataforma de cdigo abierto y software libre, licenciado
bajo la Licencia Pblica General de GNU. Soporta los protocolos FTP, SFTP y FTP sobre
SSL/TLS (FTPS).

Inicialmente fue diseado para funcionar en Microsoft Windows, pero desde la versin
3.0.0, gracias al uso de wxWidgets, es multiplataforma, estando disponible adems para
otros sistemas operativos, entre ellos GNU/Linux, FreeBSD y Mac OS X.

Cuenta con una interfaz intuitiva y fcil de utilizar mediante la cual los usuarios
pueden subir o bajar sus archivos una vez que se haya realizado la conexin
correspondiente.

2.4.8 PHP 5

Con las primeras 2 versiones de PHP, PHP 3 y PHP 4, se haba conseguido una plataforma
potente y estable para la programacin de pginas del lado del servidor. Estas versiones han
servido de mucha ayuda para la comunidad de desarrolladores, haciendo posible que PHP sea
el lenguaje ms utilizado en la web para la realizacin de pginas avanzadas.

Sin embargo, todava existan puntos negros en el desarrollo PHP que se han tratado de
solucionar con la versin 5, aspectos que se echaron en falta en la versin 4, casi desde el da
de su lanzamiento. Nos referimos principalmente a la programacin orientada a objetos (POO)
que, a pesar de que estaba soportada a partir de PHP3, slo implementaba una parte muy
pequea de las caractersticas de este tipo de programacin.
El principal objetivo de PHP5 ha sido mejorar los mecanismos de POO para solucionar las
carencias de las anteriores versiones. Un paso necesario para conseguir que PHP sea un
lenguaje apto para todo tipo de aplicaciones y entornos, incluso los ms exigentes.

INSTITUTO TECNOLOGICO DE ORIZABA




33


2.4.9 AJAX

Acrnimo de Asynchronous JavaScript And XML (Java Script asncrono y XML), es una
tcnica de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet
Applications). Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los
usuarios mientras se mantiene la comunicacin asncrona con el servidor en segundo plano. De
esta forma es posible realizar cambios sobre las pginas sin necesidad de recargarlas,
mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
Ajax es una tecnologa asncrona, en el sentido de que los datos adicionales se solicitan al
servidor y se cargan en segundo plano sin interferir con la visualizacin ni el comportamiento
de la pgina. Java Script es el lenguaje interpretado (scripting language) en el que normalmente
se efectan las funciones de llamada de Ajax mientras que el acceso a los datos se realiza
mediante XMLHttpRequest, objeto disponible en los navegadores actuales. En cualquier caso,
no es necesario que el contenido asncrono est formateado en XML.
Ajax es una tcnica vlida para mltiples plataformas y utilizable en muchos sistemas
operativos y navegador dado que est basado en estndares abiertos como Java Script
y Document Object Model (DOM).

2.4.10 Adobe Photoshop

(Popularmente conocido slo por su segundo nombre, Photoshop) es un editor de grficos
rasterizados desarrollado por Adobe Systems principalmente usado para
el retoque de fotografas y grficos. Su nombre en espaol significa literalmente "taller de
fotos". Es lder mundial del mercado de las aplicaciones de edicin de imgenes y domina este
sector de tal manera que su nombre es ampliamente empleado como sinnimo para la edicin
de imgenes en general.


INSTITUTO TECNOLOGICO DE ORIZABA




34


Actualmente forma parte de la familia Adobe Creative Suite y es desarrollado y comercializado
por Adobe Systems Incorporated inicialmente para computadores Apple pero posteriormente
tambin para plataformas PC con sistema operativo Windows. Su distribucin viene en
diferentes presentaciones, que van desde su forma individual hasta como parte de un paquete
Siendo stos: Adobe Creative Suite Design Premium y Versin Standard, Adobe Creative Suite
Web Premium, Adobe Creative Suite Production Studio Premium y Adobe Creative Suite
Master Collection.

2.4.10.1 Caractersticas.

Photoshop en sus versiones inciales trabajaba en un espacio (bitmap) formado por una sola
capa, donde se podan aplicar toda una serie de efectos, textos, marcas y tratamientos. En cierto
modo tena mucho parecido con las tradicionales ampliadoras. En la actualidad lo hace con
mltiples capas.
A medida que ha ido evolucionando, el software ha ido incluyendo diversas mejoras
fundamentales, como la incorporacin de un espacio de trabajo multicapa, inclusin de
elementos vectoriales, gestin avanzada de color (ICM / ICC), tratamiento extensivo de
tipografas, control y retoque de color, efectos creativos, posibilidad de incorporar plugins de
terceras compaas, exportacin para sitios web entre otros.
Photoshop se ha convertido, casi desde sus comienzos, en el estndar de facto en retoque
fotogrfico, pero tambin se usa extensivamente en multitud de disciplinas del campo del
diseo y fotografa, como diseo web, composicin de imgenes en mapa de bits, estilismo
digital, fotocomposicin, edicin y grafismos de vdeo y bsicamente en cualquier actividad
que requiera el tratamiento de imgenes digitales.
Photoshop ha dejado de ser una herramienta nicamente usada por diseadores, para
convertirse en una herramienta usada profusamente por fotgrafos profesionales de todo el
mundo, que lo usan para realizar el proceso de retoque y edicin digital, no teniendo que pasar
ya por un laboratorio ms que para la impresin del material.
INSTITUTO TECNOLOGICO DE ORIZABA




35

Con el auge de la fotografa digital en los ltimos aos, Photoshop se ha ido popularizando
cada vez ms fuera de los mbitos profesionales y es quiz, junto a Windows y Flash (de
Adobe Systems Tambin) uno de los programas que resulta ms familiar (al menos de nombre)
a la gente que comienza a usarlo, sobre todo en su versin Photoshop Elements, para el retoque
casero fotogrfico.
Aunque el propsito principal de Photoshop es la edicin fotogrfica, ste tambin puede ser
usado para crear imgenes, efectos, grficos y ms en muy buena calidad. Aunque para
determinados trabajos que requieren el uso de grficos vectoriales es ms aconsejable utilizar
Adobe Ilustrador.
Entre las alternativas a este programa, existen algunos programas de software libre como
GIMP, orientado a la edicin fotogrfica en general, o privativos como PhotoPaint de Corel,
capaz de trabajar con cualquier caracterstica de los archivos de Photoshop, y tambin con sus
filtros plugin.
Figura 2.2 Diseo de Photoshop
INSTITUTO TECNOLOGICO DE ORIZABA




36

2.4.11 Java Script

Java script es un lenguaje de programacin utilizado para crear pequeos programas
Encargados de realizar acciones dentro del mbito de una pgina web. Se trata de un lenguaje
de programacin del lado del cliente, porque es el navegador el que soporta la carga de
procesamiento.

Gracias a su compatibilidad con la mayora de los navegadores modernos, es el lenguaje de
programacin del lado del cliente ms utilizado. Con Java Script podemos crear efectos
especiales en las pginas y definir interactividades con el usuario. El navegador del cliente es
el encargado de interpretar las instrucciones Java Script y ejecutarlas para realizar estos efectos
e interactividades, de modo que el mayor recurso, y tal vez el nico, con que cuenta este
lenguaje es el propio navegador. Java script es el siguiente paso, despus del HTML, que
puede dar un programador de la web que decida mejorar sus pginas y la potencia de sus
proyectos. Es un lenguaje de programacin bastante sencillo y pensado para hacer las cosas
con rapidez, a veces con ligereza. Incluso las personas que no tengan una experiencia previa en
la programacin podrn aprender este lenguaje con facilidad y utilizarlo en toda su potencia
con slo un poco de prctica.

Entre las acciones tpicas que se pueden realizar en Java script tenemos dos vertientes. Por un
lado los efectos especiales sobre pginas web, para crear contenidos dinmicos y elementos de
la pgina que tengan movimiento, cambien de color o cualquier otro dinamismo. Por el otro,
java script nos permite ejecutar instrucciones como respuesta a las acciones del usuario, con lo
que podemos crear pginas interactivas con programas como calculadoras, agendas, o tablas de
clculo.

Java script es un lenguaje con muchas posibilidades, permite la programacin de pequeos
scripts, pero tambin de programas ms grandes, orientados a objetos, con funciones,
estructuras de datos complejas, etc. Adems, Java script pone a disposicin del programador
todos los elementos que forman la pgina web, para que ste pueda acceder a ellos y
modificarlos dinmicamente.
INSTITUTO TECNOLOGICO DE ORIZABA




37

2.5 Herramientas a Utilizar en el Desarrollo Web
2. 5.1 Interfaz

Las interfaces web tienen ciertas limitaciones en las funcionalidades que se ofrecen al usuario.
Hay funcionalidades comunes en las aplicaciones de escritorio como dibujar en la pantalla o
arrastrar y soltar que no estn soportadas por las tecnologas web estndar.
Los desarrolladores web generalmente utilizan lenguajes interpretados (scripts) en el lado del
cliente para aadir ms funcionalidades, especialmente para ofrecer una experiencia interactiva
que no requiera recargar la pgina cada vez (lo que suele resultar molesto a los usuarios).
Recientemente se han desarrollado tecnologas para coordinar estos lenguajes con las
tecnologas en el lado del servidor.

2.5.2 Gestor de Base de Datos: MYSQL

MySQL es un sistema de gestin de bases de datos Una base de datos es una coleccin
estructurada de datos. Puede ser cualquier cosa, desde una simple lista de compra a una galera
de pintura o las ms vastas cantidades de informacin en una red corporativa. Para aadir,
acceder, y procesar los datos almacenados en una base de datos, necesita un sistema de gestin
de base de datos como MySQL Server. Al ser los computadores muy buenos en tratar grandes
cantidades de datos, los sistemas de gestin de bases de datos juegan un papel central en
computacin, como aplicaciones autnomas o como parte de otras aplicaciones.
MySQL es un sistema de gestin de bases de datos relacionales Una base de datos relacional
almacena datos en tablas separadas en lugar de poner todos los datos en un gran almacn. Esto
aade velocidad y flexibilidad. La parte SQL de "MySQL"

Se Refiere a "Structured Query Language". SQL es el lenguaje estandarizado ms comn para
acceder a bases de datos y est definido por el estndar ANSI/ISO SQL. El estndar SQL ha
evolucionado desde 1986 y existen varias versiones. MySQL software es Open Source. Open
Source significa que es posible para cualquiera usar y modificar el software. Cualquiera puede
bajar el software MySQL desde internet y usarlo sin pagar nada. Si lo desea, puede estudiar el
cdigo fuente y cambiarlo para adaptarlo a sus necesidades.
INSTITUTO TECNOLOGICO DE ORIZABA




38


El software MySQL usa la licencia GPL (GNU General Public License), para definir lo que
puede y no puede hacer con el software en diferentes situaciones. Si no se encuentra cmodo
con la GPL o necesita aadir cdigo MySQL en una aplicacin comercial, puede comprarnos
una licencia

El servidor de base de datos MySQL es muy rpido, fiable y fcil de usar. Si esto es lo que est
buscando, debera probarlo. El servidor MySQL tambin tiene una serie de caractersticas
prcticas desarrolladas en cooperacin con los usuarios. Puede encontrar comparaciones de
rendimiento de MySLQL Server con otros sistemas de gestin de bases de datos en nuestra
pgina de comparativas de rendimiento. MySQL Server se desarroll originalmente para tratar
grandes bases de datos mucho ms rpido que soluciones existentes y ha sido usado con xito
en entornos de produccin de alto rendimiento durante varios aos. MySQL Server ofrece hoy
en da una gran cantidad de funciones. Su conectividad, velocidad, y seguridad hacen de
MySQL Server altamente apropiado para acceder bases de datos en Internet MySQL Server
trabaja en entornos cliente/servidor o incrustados El software de bases de datos MySQL es un
sistema cliente/servidor que consiste en un servidor SQL multi-threaded que trabaja con
diferentes bakends, programas y bibliotecas cliente, herramientas administrativas y un amplio
abanico de interfaces de programacin para aplicaciones (APIs).

2.6 Lenguajes de programacin

Existen varias interfaces de programacin de aplicaciones que permiten, a aplicaciones escritas
en diversos lenguajes de programacin, acceder a las bases de datos MySQL, incluyendo C,
C++, C#, Pascal, Delphi (va dbExpress), Eiffel, Smalltalk, Java (con una implementacin
nativa del driver de Java), Lisp, Perl, PHP, Python, Ruby, Gambas, REALbasic (Mac y Linux),
(x)Harbour (Eagle1), FreeBASIC, y Tcl; cada uno de estos utiliza una interfaz de
programacin de aplicaciones especfica. Tambin existe una interfaz ODBC, llamado
MyODBC que permite a cualquier lenguaje de programacin que soporte ODBC comunicarse
con las bases de datos MySQL. Tambin se puede acceder desde el sistema SAP, lenguaje
ABAP
INSTITUTO TECNOLOGICO DE ORIZABA




39

2.6.1 Notepad ++

Notepad + + es un SW libre (como en "libertad de expresin") editor de cdigo fuente y el
remplazo de la libreta que soporta varios lenguajes. Ejecuta en el entorno de MS Windows, su
uso est regulado por el GPL License. Basado en el potente componente de edicin Scintilla,
Notepad + + est escrito en C + + y usa la API de Win32 y STL lo que asegura una velocidad
mayor de ejecucin y menor tamao del programa.

Mediante la optimizacin de las rutinas como sea posible sin perder la facilidad de uso,
Notepad + + est tratando de reducir las emisiones mundiales de dixido de carbono. Al
utilizar menos energa de la CPU, el PC puede moderar la marcha y reducir el consumo de
energa, resultando en un medio ambiente ms verde. Desde la pgina Traducciones es donde
usted podra conseguir el idioma que necesita. Desde la v3.1, Notepad + + tiene la capacidad
de extensin - el sistema de plugins. Por favor, consulte Plugins HOWTO para aprender a
instalar un plugin y/o la forma de desarrollar un plugin.

Al ser Software libre, hay varias maneras de contribuir al proyecto de Notepad + +:

Enve su reporte de errores, solicitud de funcin o de correccin de errores/parche
nueva caracterstica.
Traducir Notepad + + binario a su idioma.
Traducir Notepad + + sitio de documentos en lnea a su idioma.
Comparta su plug-in.

2.7 Concepto de Ingeniera Web

La ingeniera web es la aplicacin de metodologas sistemticas, disciplinadas y
cuantificables al desarrollo eficiente, operacin y evolucin de aplicaciones de alta
calidad en la World Wide Web.


INSTITUTO TECNOLOGICO DE ORIZABA




40
La ingeniera web se debe al crecimiento desenfrenado que est teniendo la Web est
ocasionando un impacto en la sociedad y el nuevo manejo que se le est dando a la
informacin en las diferentes reas en que se presenta ha hecho que las personas tiendan a
realizar todas sus actividades por esta va.

Desde que esto empez a suceder el Internet se volvi ms que una diversin y
empez a ser tomado ms en serio, ya que el aumento de publicaciones y de
informaciones hizo que la Web se volviera como un desafo para los (Ingeniera del
software) ingenieros del software, a raz de esto se crearon enfoques disciplinados,
sistemticos y metodologas donde tuvieron en cuenta aspectos especficos de este nuevo
medio.

2.7.1 reas

El desarrollo de aplicaciones Web posee determinadas caractersticas que lo hacen diferente
del desarrollo de aplicaciones o software tradicional y La Ingeniera de la Web es
multidisciplinar y aglutina contribuciones de diferentes reas: arquitectura de la
informacin, ingeniera de hipermedia/hipertexto, ingeniera de requisitos, diseo de
interfaz de usuario, usabilidad, diseo grfico y de presentacin, diseo y anlisis de
sistemas, ingeniera de software, ingeniera de datos, indexado y recuperacin de
informacin, testeo, modelado y simulacin, despliegue de aplicaciones, operacin de
sistemas y gestin de proyectos.

La ingeniera de la Web no es un clon o subconjunto de la ingeniera de software aunque
ambas incluyen desarrollo de software y programacin, pues a pesar de que la ingeniera
de la Web utiliza principios de ingeniera de software, incluye nuevos enfoques,
metodologas, herramientas, tcnicas, guas y patrones para cubrir los requisitos nicos de
las aplicaciones web. Sin embargo el trmino de ingeniera de la web ha sido un trmino
muy controvertido especialmente para profesionales en disciplinas tales como la ingeniera
del software ya que no la consideran como un campo dentro de la ingeniera.


INSTITUTO TECNOLOGICO DE ORIZABA




41


Los principales aspectos de la ingeniera de la Web incluyen, entre otros, los siguientes
temas:

Diseo de procesos de negocio para aplicaciones web.
Herramientas CASE para aplicaciones web.
Generacin de cdigo para aplicaciones web.
Desarrollo web colaborativo.
Modelado conceptual de aplicaciones web.
Diseo de Modelos de datos para sistemas de informacin web.
2.7.2 Categoras

Los sitios web pueden ser categorizados de la siguiente forma:

Slo esttico, que se enfoca en la organizacin de la estructura y el
contenido, en la forma como se va a presentar la informacin y que sea fcil de
manejar para cualquier usuario, pero debe tener en cuenta la eficiencia y la
confiabilidad.

Sitio esttico con formularios de entrada, este sitio tiene las mismas
caractersticas que el anterior, adicionndole que le permite a los usuarios la
interaccin por medio de cuestionarios, comentario y sugerencias.

Sitio con acceso de datos dinmicos, aqu adems de las caractersticas antes
mencionadas, cuenta con bases de datos en las cuales el usuario puede realizar
consultas y bsquedas.





INSTITUTO TECNOLOGICO DE ORIZABA




42


Sitio creado dinmicamente, en este sitio los requerimientos son parecidos
pero deben suplir con las necesidades de cada usuario; creando sitios
dinmicos que sean compatibles con el entorno de navegacin de cada
usuario.
Aplicacin de software basada en la Web, este sitio puede tener todas las
caractersticas antes mencionadas, pero logrando un parecido con una
implementacin cliente/servidor comnmente conocido que a un sitio web
esttico.

Con el pasar del tiempo y la constante evolucin tecnolgica que atraviesa nuestro mundo
circundante hemos podido observar la necesidad y la utilidad de la red de redes; Internet para
mejorar de cierta manera nuestras condiciones de vida y as fortalecer ms nuestro proceso
de formacin educativa y contribuir con un mejoramiento del global de las necesidades de
cada quien observemos que un proyecto que comenz meramente con fines militares
para no centralizar los datos, ha tenido un crecimiento significable hoy en Da el mundo se
mueve con la web, ayudando a pequeas, medianas y grandes Empresas a si como
t oda entidad educativa.

Tengamos en cuenta que empresas mueven sus negocios por medio de la internet y que
hasta polticas como el CRM para el manejo de clientes, son muy importantes para las
empresas como por ejemplo, Dell, surgen polticas para el mantener los clientes y
tenerlos en contactos va Web, mediante Internet se cuidada de cierta manera la imagen
de una empresa, por ejemplo mediante el marketing a travs de Internet permite reforzar el
servicio, haciendo ms fuerte la relacin entre la marca y el cliente.

INSTITUTO TECNOLOGICO DE ORIZABA




43

Esto implica un uso creativo del medio, involucrando verdaderamente a las personas con la
compaa. Utilizando la inmediatez, que brinda esta va de comunicacin.

Con la herramienta comunicacional, se permite una relacin constante e inmediata
con los clientes, as como mantener a los clientes contentos, conquistar nuevos
nichos de mercado y, por ende, incrementar las ventas.

Debemos tener en cuenta que para la efectiva comunicacin en la web , se tienen
protocolos que es como el lenguaje para que se haga efectiva el intercambio de
comunicacin, vale la pena preguntarse, as para poder acceder a toda la informacin que
nos puede suministrar Internet slo debes poseer un servicio de algn proveedor de
Internet un navegador como Mozilla o Netscape.

Por medio de un sitio web podremos tener nuestro sitio accesible o disponible 24
horas al da, 365 das del ao en absolutamente todo el mundo para quienes tienen acceso; es
decir, cerca de 600 millones de personas aproximadamente, es por esto que nuestros datos
en internet publicados en el sitio web podran ser accesibles a toda persona en
cualquier momento en cualquier parte del mundo.

Todas estas consideraciones nos llevan a la conclusin de que un sitio web bien logrado no
es nicamente un espacio en la red para ver el mismo comercial que en televisin; es en
realidad una extensin de las empresas o instituciones, as mismo teniendo en cuenta la
importancia y aplicabilidad que tiene la ingeniera Web en nuestro desarrollo cognitivo,
social y vivencial es fcil visionar que cada una de las funciones que ella emana estarn
siempre ligadas a la vanguardia del desarrollo progresivo de la tecnologa y del hombre.

2.7.3 Formulacin y planeacin para la Ingeniera Web

A pesar de las declaraciones radicales de que la web representa un nuevo paradigma los
desarrolladores se estn dando cuenta que las lecciones aprendidas en el desarrollo de
proyectos de software previos a la web a un se aplican y entre los principios
INSTITUTO TECNOLOGICO DE ORIZABA




44


Fundamentales podemos destacar "comprender el problema antes de empezar a resolverlo y
estar seguro que la solucin concebida es la que realmente quiere la gente" y "Planear el
trabajo antes de comenzar a realizarlo"

La formulacin de sistemas y aplicaciones basados en web inicia con la identificacin de
las necesidades, se mueve hacia la descripcin de objetivos, define grandes caractersticas
y funciones, realiza la recopilacin de requisitos y un modelo de anlisis.

Powell sugiere una serie de preguntas que deben formularse y responderse al comienzo de la
etapa de formulacin.

Cul es la principal motivacin para la WebApp?

Cules son los objetivos que debe satisfacer la WebApp?

Quin usara la WebApp?

Se debe tratar de describir lo que la WebApp pretende en un solo enunciado de lo
contrario si no se puede posiblemente no se estn entendiendo las metas globales.

Existen dos categoras de metas:

Metas informativas. Indican una intencin de proporcionar contenido informativo
especfico al usuario.

Metas aplicables. Indican la habilidad de poder realizar una tarea dentro de la webApp.




INSTITUTO TECNOLOGICO DE ORIZABA




45


La recopilacin de requisitos es parecida a la de las aplicaciones convencionales
estos requisitos se convierten para las WebApps en:

- Identificar requisitos de contenido

- Identificar requisitos funcionales

- Definir escenarios de interaccin para las diferentes clases de usuarios

Los pasos de la recopilacin de requisitos se dirigen para lograr los objetivos:

1. Pedir a los clientes que definan la categora de usuario y describan cada categora.

2. Comunicarse con los clientes para definir los requisitos bsicos de la WebApp

3. Analizar la informacin recopilada y utilizar la informacin para realizar un
seguimiento de clientes.

4. Definir casos de uso.

2.8 PLANEACION EN PROYECTOS DE INGENIERIA WEB

2.8.1 Se necesita una gran cantidad de talentos para desarrollar un proyecto web entre
ellos.

Desarrolladores / proveedores de contenido.

Editores web.

INSTITUTO TECNOLOGICO DE ORIZABA




46


Ingeniero web.

Expertos en dominios empresariales.


2.8.2 Construccin del equipo:

Se debe establecer un conjunto de directrices de equipo.

El respeto hacia los talentos individuales es crucial.

Cada miembro del equipo se debe comprometer.

Es fcil comenzar lo difcil es mantener el mpetu.


2.8.3 Modelado de anlisis para aplicaciones web

El anlisis de una potencial aplicacin Web se enfoca en tres preguntas importantes

1.- Que informacin o contenido se presentara o manipulara?

2.- Que funciones realizara el usuario final?

3.- Que comportamiento exhibir la WebApp conforme presente el contenido y
realice funciones?




INSTITUTO TECNOLOGICO DE ORIZABA




47


El anlisis de requisitos para las WebApps abarca tres grandes tareas, formulacin,
recopilacin de requisitos y modelado de anlisis.

Es una buena idea construir una jerarqua de usuarios ofrece una visin instantnea de la
poblacin de usuarios y una marca de verificacin que ayudaran a asegurar que se
han abordado las necesidades de cada usuario.

El modelado de anlisis para un WebApp se basa en la informacin que contienen los
casos de uso desarrollados para la aplicacin, las descripciones de los casos de uso se
analizan gramaticalmente para identificar potenciales clases de anlisis y las operaciones y
atributos asociados con cada clase.

Existen cuatro actividades de anlisis:

Anlisis de contenido.
Anlisis de interaccin.
Anlisis de funciones.
Anlisis de configuracin.

Un objeto de contenido es cualquier artculo de informacin cohesiva que se presentara a un
usuario final. Usualmente los objetos de contenido se extraen de los casos de uso.

Un rbol de datos representa una jerarqua de objetos de contenido.

El modelo de interaccin est compuesto por diagramas de:
1. casos de uso.
2. de secuencia.
3. de estado.
4. un prototipo de interfaz de usuario.
INSTITUTO TECNOLOGICO DE ORIZABA




48

Es importante tener las tres dimensiones o puntos de vista de los diagramas puesto que
alguna consideracin que se escape por alguno de los diagramas puede tomarse por otro.

2.8.4 Anlisis relacin -navegacin ARN

Proporciona a los analistas de sistemas una tcnica sistemtica para determinar la
estructura de la relacin de una aplicacin. Se organiza en 5 pasos.

Anlisis de los participantes.

Anlisis de elementos.

Anlisis de relaciones.

Anlisis de navegacin.

Anlisis de evaluacin


2.8.5 Modelado del diseo

La visin y el sentido del contenido se desarrollan como parte del diseo grfico; la
plantilla esttica de la interfaz de usuario se crea como parte del diseo de la interfaz y la
estructura tcnica de la WebApp se modela como parte del diseo arquitectnico y de
navegacin. En toda instancia se debe crear un modelo de diseo antes que comience la
construccin, pero un buen ingeniero web reconoce que el diseo evolucionara mientras
ms se conozca acerca de los participantes conforme se construya la WebApp.

INSTITUTO TECNOLOGICO DE ORIZABA




49



2.8.6 Diseo de la interfaz de la WebApp

Toda interfaz de usuario debe presentar las siguientes caractersticas: fcil de usar, fcil de
aprender, fcil de navegar, intuitiva, consistente, eficiente, libre de errores y funcional. Debe
ofrecer al usuario final una experiencia satisfactoria y gratificante. Los conceptos,
principios y mtodos de diseo de la interfaz brindan al ingeniero web las herramientas
requeridas para lograr esta lista de atributos.

Diseo esttico: Es llamado tambin diseo grfico, es un esfuerzo artstico que
complementa los aspectos tcnicos de la ingeniera web. El diseo grfico considera cada
aspecto de la presentacin y percepcin de una WebApp.

El proceso de diseo grfico comienza con la plantilla y procede hacia la consideracin de
esquemas de color globales, tipos de fuentes, tamaos y estilos, el uso de medios
audiovisuales complementarios y todos los dems elementos estticos de una aplicacin.

2.8.7 Diseo del contenido

Desarrolla una representacin de diseo para los objetos de contenido y representa los
mecanismos que se requieren para que establezcan sus relaciones uno con otro. Adems, el
diseo de contenido se ocupa de la representacin de la informacin dentro de un objeto de
contenido especfico. Una vez modelados todos los objetos de contenido, la informacin
que cada objeto entregar debe crearse y luego formatearse para satisfacer mejor las
necesidades del cliente.



INSTITUTO TECNOLOGICO DE ORIZABA




50


2.8.8 Diseo arquitectnico

Est enlazado con las metas establecidas para la WebApp, el contenido que se presentar,
los usuarios que la visitarn y la filosofa de navegacin que se establezca. El diseo de la
arquitectura de contenido se centra en la definicin de la estructura hipermedia global de la
WebApp. El diseo se puede elegir de cuatro diferentes estructuras de contenido.

Estructuras lineales.

Estructuras en retcula.

Estructuras jerrquicas.

Estructuras en red o Web pura.

La arquitectura de WebApp describe una infraestructura que permite a un sistema o
aplicaciones basadas en web lograr sus objetivos de negocios.

2.8.9 Diseo de navegacin

Una vez establecida la arquitectura de WebApp y la identificacin de los componentes,
el diseador debe definir las rutas de navegacin que habiliten para los usuarios el acceso
al contenido y las funciones de la WebApp. Para lograr esto el diseador debe:

1) Identificar la semntica de navegacin para diferentes usuarios del sitio.

2) Definir la mecnica que logra la navegacin
INSTITUTO TECNOLOGICO DE ORIZABA




51


El diseo de navegacin comienza con una consideracin de la jerarqua de usuario y
los casos de uso desarrollados para cada categora de usuario (actor).Cada actor
puede usar la WebApp de manera un poco diferente y, por tanto tener diferentes
requisitos de navegacin. Conforme el diseo se lleva acabo se define la mecnica de
navegacin.

Entre muchas posibles soluciones estn:

Vinculo de navegacin individual.

Barra de navegacin horizontal.

Columna de navegacin vertical.

Pestaas.

Mapas de sitio.

2.8.10 Diseo a nivel de componentes

Los patrones de diseo aplicados en la Ingeniera Web abarcan dos grandes
clases:

1) Patrones de diseo genrico que son aplicables a todos los tipos de software.

2) Patrones de diseo hipermedia que son especficos de la WebApp. En el contexto de
los sistemas basados en Web German y Cowan sugieren las siguientes categoras de
patrones:

INSTITUTO TECNOLOGICO DE ORIZABA




52


Patrones arquitectnicos.
Patrones de construccin y componentes.
Patrones de navegacin.
Patrones de presentacin
Patrones de interaccin comportamiento/usuario


2.9 Metodologa UWE

UWE (UML-Based Web Engineering) es una propuesta basada en UML y en el proceso
unificado para modelar aplicaciones web. Esta propuesta est formada por una notacin
para especificar el dominio (basada en UML) y un modelo para llevar a cabo el desarrollo
del proceso de modelado. Los sistemas adaptativos y la sistematizacin son dos aspectos
sobre los que se enfoca UWE.
Adems de estar considerado como una extensin del estndar UML, tambin se basa en
otros estndares como por ejemplo: XMI como modelo de intercambio de formato, MOF
para el metamodelado, los principios de modelado de MDA, el modelo de transformacin
del lenguaje QVT y XML. El modelo que propone UWE est compuesto por 6 etapas o
submodelos:

1. Modelo de Casos de Uso: modelo para capturar los requisitos del sistema.
2. Modelo de Contenido: es un modelo conceptual para el desarrollo del contenido.
3. Modelo de Usuario: es modelo de navegacin, en el cual se incluyen modelos estticos
y modelos dinmicos.
4. Modelo de estructura: en el cual se encuentra la presentacin del sistema y el
Modelo de flujo.
5. Modelo Abstracto: incluye el modelo a de interfaz de usuario y el modelo de ciclo de
vida del objeto.
6. Modelo de Adaptacin.
INSTITUTO TECNOLOGICO DE ORIZABA




53


2.9.1 UWE y su relacin con UML

UWE define una extensin del Lenguaje Unificado de Modelado (UML). sta, es
considerada como una extensin ligera de peso e incluye en su definicin tipos, etiquetas de
valores y restricciones para las caractersticas especificas del diseo Web, las cuales, unidas
a las definiciones de UML forman el conjuntos de objetos de modelado que se usarn para
el desarrollo del modelo utilizado en UWE.

Las funcionalidades que cubren UWE abarcan reas relacionadas con la Web como la
navegacin, presentacin, los procesos de negocio y los aspectos de adaptacin
Una de las ventajas de que UWE extienda el estndar UML es la flexibilidad de ste para la
definicin de un lenguaje de modelado especifico para el dominio web y sobretodo la
aceptacin universal de dicho estndar en el campo de la ingeniera del software.
Otra gran ventaja es que actualmente existen mltiples de herramientas CASE basadas en
UML, con lo cual es relativamente sencillo su utilizacin y ampliacin para utilizar los
objetos de modelado definidos en UWE

2.9.2 Modelos UWE

En esta seccin se explicarn los modelos para cada una de los aspectos web que cubre la
metodologa UWE, recordemos que estos aspectos eran navegacin, presentacin, los
procesos de negocio y adaptacin.

Modelo de Contenido
Este modelo especifica cmo se encuentra relacionados los contenidos del sistema, es
decir, define la estructura de los datos que se encuentran alojados en el sitio web.
Modelo de Navegacin
Este modelo indica como el sistema de pginas web del sitio est relacionado
internamente. Es decir cmo se enlazan los elementos de navegacin. Para ello se
INSTITUTO TECNOLOGICO DE ORIZABA




54


Utilizan unidades de navegacin llamadas nodos conectadas por enlaces de navegacin.
Estos nodos pueden ser mostrados en la misma pgina web, no tienen por qu estar en
pginas diferentes.

Modelo de Presentacin: En este modelo se representan las clases de navegacin y
de procesos que pertenecen a cada pgina web.
Modelo de Procesos: Esta modelo especfica las acciones que realiza cada clase
de proceso, en este modelo se incluye:
Modelo de Estructura de Procesos: que define las relaciones entre las diferentes
clases proceso.
Modelo de Flujo de Procesos: que especifica las actividades conectadas con cada
proceso. Describe los comportamientos de una clase proceso. Lo que ocurre en
detalle dentro de cada una.















INSTITUTO TECNOLOGICO DE ORIZABA




55

CAPTULO 3 APLICACIN

En el captulo anterior se mencionaron las herramientas que se utilizaron para el desarrollo
del presente proyecto, a continuacin se hace una descripcin de cmo se utilizaron dichas
herramientas para lograrlo. As como las caractersticas de la aplicacin que se obtuvo al
trmino de esta

3.1 Solucin de problema

Una de las funciones ms importantes de este proyecto es la de agilizar el proceso de la
informacin con respecto a la papelera de la institucin en sus diferentes planteles de la
Universidad del Golfo de Mxico a travs del internet, para esto se llev a cabo una reunin
con el asesor externo para establecer el modo de trabajo y las caractersticas con las que
debera contar el sitio web. Se estableci el diseo y contenido de las pginas dependiendo
de cada tipo de usuario.

En esta reunin se estipularon tambin los requerimientos para el desarrollo de esta
aplicacin, su prioridad, contenido y descripcin, definidos por el jefe del departamento de
sistemas.

3.1.2 Identificacin de necesidades y requerimientos

Con la actividad anterior y con la actividad de recoleccin de requisitos, se lleg a la
Conclusin de que se requiere disear un sistema cuyo contenido dependa del tipo de
usuario que ingrese a la aplicacin. Lo anterior se describe con las siguientes tablas de
requisitos.

INSTITUTO TECNOLOGICO DE ORIZABA




56







Requerimientos del programador


Software para el diseo y programacin
de las paginas como lo es
HTML, CSS, PHP, MySql, JQUERY.
Un servidor web
Un espacio dentro de la institucin
para trabajar en el proyecto

Tabla 3.2 Requerimientos del programador









Requerimientos del
Cliente

El diseo del sistema tendr colores que
distingan a la institucin logrando con
ello una mayor esttica,
El sistema debe visualizarse y funcionar
correctamente en cualquier navegador,
como Internet Explorer, Google,
Chrome, Mozilla firefox
Fcil manejo de la informacin del
sistema
Fcil manejo de los formularios.
Tabla 3.1 Requerimientos del cliente
INSTITUTO TECNOLOGICO DE ORIZABA




57

3.2 Recopilacin de requisitos

Los requisitos impuestos por el cliente fueron definidos en esta etapa, tales como los
requisitos de contenido, requisitos funcionales, definicin de las interacciones que existen
entre los diferentes usuarios y la aplicacin, mediante las tcnicas mencionadas
anteriormente y realizando diferentes tipos de modelados para tener una idea clara de lo que
se pretende desarrollar.

3.3 Establecer alcances y limitaciones

En comn acuerdo entre el desarrollador y la Universidad del Golfo de Mxico Rectora
Centro se establecieron los alcances y limitaciones para no comprometer al desarrollador a
realizar trabajos o actividades fuera del lapso programado para este proyecto y adems para
identificar el contenido que formar parte de este.

3.4 Planificacin
3.4.1 Estudio de factibilidad

El anlisis detallado que se realiz dio como resultado los siguientes requerimientos
divididos en cuatro categoras:

Factibilidad Tcnica: El equipo de cmputo con el que cuenta el departamento de
sistemas y telecomunicaciones.
Factibilidad Operativa: El recurso humano disponible y capacitado para la
manipulacin del proyecto.
Factibilidad Econmica: Capital actual disponible por parte de la Institucin para
cubrir los costes que se generaron durante el desarrollo del proyecto.


INSTITUTO TECNOLOGICO DE ORIZABA




58

Factibilidad Legal: Autorizacin de requerimientos de los programas, as como las
licencias re-queridos para el proyecto que se desarroll.

3.4.2 Estudio Tcnico

La institucin cubri los requerimientos tcnicos por lo que proporciono para el desarrollo
de proyecto las siguientes herramientas de trabajo:

1.- Lenguajes de programacin y herramientas de diseo necesarios para el desarrollo del
proyecto

HTML 5
CSS
PHP 5
MySQL
NOTEPAD ++
JQUERY
JAVASCRIP
AJAX
VISUAL PARADIGM

2.- Implementacin

La institucin cuenta con Internet inalmbrico infinitum, que es el requerimiento
Indispensable para poner en marcha sistema, pero este servicio contiene limitantes ya que
se restringe abrir ciertas pginas de descargas.





INSTITUTO TECNOLOGICO DE ORIZABA




59

3.5 Estudio de anlisis
3.5.1 Anlisis de riesgos

Al considerar los posibles riesgos se tomaron como las ms importantes el restringir que los
usuarios que no hayan iniciado sesin puedan ingresar a algn modulo del sistema o que los
usuarios que hayan iniciado sesin puedan ingresar a pginas restringidas para ellos.

3.5.2 Anlisis Relacin-Navegacin

En esta fase se identificaron las relaciones que existen entre la informacin que debe tener
el sistema con las funciones de procesamiento que el usuario de las pginas inicia
directamente. Esto se llev a cabo con el propsito de establecer los principales requisitos
para Especificar los vnculos de navegacin que le permiten al usuario lograr el propsito
de su visita al sitio, de manera que le haga ms prctica el cambio de un contenido hacia
otro contenido.

Para poder realizar un mejor anlisis de relacin entre el contenido del sitio se formularon
las siguientes cuestiones:

1. De qu forma disear la interfaz?
2. Cul es el contenido que se requiere mostrar a cada tipo de usuario?
3. Cmo estructurar los formularios del sistema?
4. De qu forma se deben mostrar los resultados?

Al identificar los elementos y decidir su ubicacin y gestin, se realiz el anlisis de
navegacin que proporciono la estructura de navegacin, dentro de cada categora de
usuario en la aplicacin.



INSTITUTO TECNOLOGICO DE ORIZABA




60

1. Qu informacin debe ser ms fcil de alcanzar de los Sitios Web? Y en qu orden se
deben presentar?

2. Cul es la informacin que debe resaltarse para llamar la atencin de los usuarios y
lograr el inters hacia estos Sitios?

3. La navegacin de un contenido hacia otro, dentro de los Sitios Web se debe de realizar
por medio de vnculos u otro medio?

4. Debe de estar disponible un mapa o men de navegacin completo, dentro de cada
punto en donde puede interactuar el usuario?

5. Un usuario puede acceder a todos los elementos, funciones u objetos de contenido
dentro de la aplicacin?

6. Habr restricciones para las diferentes clases de usuario?

3.5.3 Anlisis de Configuracin

La pgina de inicio de sesin del sistema de evaluacin se desarroll de manera que pueda
acoplarse a los diferentes ambientes; tanto del lado del servidor como de los usuarios de la
aplicacin.

Los navegadores que se usarn para las pruebas de navegacin de las pginas sern:
Mozilla, FireFox, Google Chrome por ser stos unos de los ms comunes entre los
usuarios.




INSTITUTO TECNOLOGICO DE ORIZABA




61

3.5.4 Anlisis Funcional

Aqu se representan las funciones tanto de los usuarios externos como de los internos
divididos de acuerdo a sus jerarquas, ya que son actividades diferentes en cada caso como
lo muestra a continuacin el siguiente Esquema.

























Ingresan
Inicio de sesin


Usuarios

Rectora
Agrega, Modifica,
Elimina Categora
Agrega, Modifica,
Elimina U. de Medida
Agrega, Modifica,
Elimina
Productos
Agrega, Modifica,
Elimina
Sucursales
Salen de la Aplicacin
Se asigna imagen
al producto.
Se registran datos y se
da de alta la sucursal
con su tipo.
INSTITUTO TECNOLOGICO DE ORIZABA




62

3.5.5 Anlisis de Interaccin

A continuacin se realizaron los diagramas de casos de uso, para definir la funcionalidad de
la aplicacin. Mediante las jerarquas de usuario definidas. Como lo muestra la figura



Figura 3.1 Diagrama de casos de usos


INSTITUTO TECNOLOGICO DE ORIZABA




63

En el caso de usuario administrador el proceso a seguir es el de ingresar (iniciando sesin)
seleccionando una de las opciones mostradas en el men y la de realizar evolucin (en el
caso de ser sucursal podr acceder solo a su modulo).

3.5.5.1 Escenarios.

Documentacin de actores que intervienen en nuestro sistema.

Registrar Categoras










Detalles











Nombr
e Valor
Nombr
e Valor



Tabla 3.3 Escenarios registrar categoras

Nombre

Valor


Nombre

Registrar Categoras
Actor

Administrador


Nombre

Valor


Precondiciones

El administrador llega al sistema y se identifica y
autentica

Post-condiciones

Se registran Categoras

1.- El administrador introduce una categora
2.-El sistema verifica que la categora no se encuentre ya
registrada
3.-El sistema proporciona la categora solicitada.
3.-El administrador cierra la sesin y se va
INSTITUTO TECNOLOGICO DE ORIZABA




64

Modificar Categoras









Detalles





















Nombre

Valor


Nombre

Modificar Categoras
Actor

Administrador


Nombre

Valor


Precondiciones

El administrador llega al sistema se identifica y autentica

Post-condiciones

Se modifica categora

1.-El administrador elige la categora que quiere
modificar
2.-El administrador introduce los datos necesarios para
identificar la categora que desea modificar
3.-El administrador introduce los datos nuevos para la
Categora, introduce valores modificados.
4.-El sistema comprueba si se puede realizar la
modificacin
5.-El administrador cierra la sesin y se va
Tabla 3.4 Escenario modificar categoras
INSTITUTO TECNOLOGICO DE ORIZABA




65


Eliminar Categoras









Detalles




















Nombre

Valor


Nombre

Eliminar Categoras
Actor

Administrador


Nombre

Valor


Precondiciones

El administrador llega al sistema y se identifica y
autentica

Post-condiciones

Se elimina la categora

1.-El administrador elige la categora a eliminar.
2.-El sistema pregunta si desea eliminar la categora.
3.-El sistema elimina la categora indicada.
4.-El administrador cierra la sesin y se va.
Tabla 3.5 Escenarios eliminar categora
INSTITUTO TECNOLOGICO DE ORIZABA




66


Registrar Unidad de Medida










Detalles








Nombre

Valor


Nombre

Unidad de medida
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones

Se Registra unidad de medida

1.-El administrador elige el tipo de unidad de medida
2.-El sistema verifica que la unidad no est ya registrada.
2.- El sistema registra la categora.
3.- El Administrador cierra la sesin y se va.

Tabla 3.6 Escenarios registra unidad de medida
INSTITUTO TECNOLOGICO DE ORIZABA




67



Modificar Unidad de Medida











Detalles







Nombre

Valor


Nombre

Modificar unidad de medida
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones

Se modifica unidad de medida

1.-El administrador modifica la unidad de medida
2.-El sistema identifica que haya modificado
3.-El administrador cierra la sesin y se va

Tabla 3.7 Escenarios modifica unidad de medida
INSTITUTO TECNOLOGICO DE ORIZABA




68



Eliminar Unidad de Medida











Detalles


Tabla 3.8 Escenarios elimina unidad de medida



Nombre

Valor


Nombre

Eliminar unidad de medida
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones

Se Elimina unidad de medida

1.-El administrador identifica la unidad de medida a eliminar.
2.-El sistema pregunta si realmente se desea eliminar.
3.- El sistema elimina la unidad de medida.
4.-El administrador cierra la sesin y se va.

INSTITUTO TECNOLOGICO DE ORIZABA




69


Registra Producto










Detalles


Tabla 3.9 Escenarios registra producto



Nombre

Valor


Nombre

Registra Producto
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se da de alta un producto

1.- El administrador introduce un nombre, categora y unidad
de medida.
3-El sistema verifica que el producto no se encuentre
registrado.
2.-El sistema registra el producto y se le asigna una imagen
por default.
3.-El administrador cierra la sesin y se va.
INSTITUTO TECNOLOGICO DE ORIZABA




70


Modificar Producto








Detalles







Nombre

Valor


Nombre

Modificar Producto
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se modifica un producto
1.-El administrador elige el producto que quiere modificar
2-.El administrador introduce los datos necesarios para
identificar el producto que quiere modificar
3.-El administrador introduce los nuevos datos para el
producto elegido sea introduce valores modificados
(posiblemente dejando algunos campos como estaban)
4.-El sistema comprueba si se puede realizar la modificacin,
en caso de si, el sistema pide una confirmacin final al usuario
y registra las modificaciones del producto.
5.-El administrador cierra la sesin y se va.
Tabla 3.10 Escenarios modifica producto
INSTITUTO TECNOLOGICO DE ORIZABA




71


Eliminar Producto










Detalles








Nombre

Valor


Nombre

Eliminar Producto
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se elimina el Producto
1.-El administrador elige el producto que quiere eliminar.
2.-El sistema pregunta si realmente se desea eliminar el
producto
3.- El sistema elimina el producto indicado.
4.- El administrador cierra la sesin y se va.
Tabla 3.11 Escenarios eliminar productos
INSTITUTO TECNOLOGICO DE ORIZABA




72
Asignar imagen al producto









Detalles


Nombre

Valor


Nombre

Asignar imagen al producto
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se asigna imagen al producto
1.-El administrador elige el producto al que desea asignar una
imagen.
2.-El sistema te permite subir y asignar una imagen al
producto.
3.- El sistema verifica que el archivo elegido sea de tipo
imagen.
4.- Si el archivo es de tipo imagen, el sistema confirma la
asignacin de la imagen al producto seleccionado.
Tabla 3.12 Escenarios asignar imagen al producto
INSTITUTO TECNOLOGICO DE ORIZABA




73

Registrar Sucursal










Detalles


Tabla 3.13 Escenarios registrar sucursal





Nombre

Valor


Nombre

Registrar Sucursal
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se registra sucursal
1.-El administrador introduce los datos necesarios para
registrar una sucursal como el nombre y contrasea.
2.- El sistema verifica que la sucursal no se encuentre
registrada.
2.-El sistema registra la sucursal.
3.-El administrador cierra la sesin y se va
INSTITUTO TECNOLOGICO DE ORIZABA




74


Modificar Sucursal








Detalles


Nombre

Valor


Nombre

Modificar Sucursal
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se modifica la sucursal indicada en el sistema
1.-El administrador elige la sucursal correspondiente que
quiere modificar
2.-El administrador introduce los datos necesarios para
identificar la sucursal que quiere modificar
3.-El administrador introduce los datos nuevos para la
sucursal
Elegida ,introduce valores modificados (posiblemente dejando
algunos
campos como estaban)
4.-El sistema comprueba si puede realizar la modificacin ;en
caso de
si, el sistema pide una confirmacin final al administrador y
registra las
Modificaciones de la sucursal en el sistema. En caso
contrario, indica como aviso de error la colisin que existe sin
realizar la modificacin.
Tabla 3.14 Escenarios modificar sucursal
INSTITUTO TECNOLOGICO DE ORIZABA




75

Eliminar Sucursal










Detalles








Nombre

Valor


Nombre

Eliminar Sucursal
Actor

Administrador



Nombre

Valor


Precondiciones

El Administrador llega al sistema se identifica y autentica


Post-condiciones
Se elimina la sucursal
1.- El administrador elige la sucursal correspondiente que
quiere eliminar
2.-El sistema pregunta si se desea eliminar la sucursal.
3.-El sistema elimina la sucursal.
4.-El administrador cierra la sesin y se va.
Tabla 3.15 Escenarios eliminar sucursal
INSTITUTO TECNOLOGICO DE ORIZABA




76
3.5.6 Diagrama de clases


Figura 3.2 Diagrama de Clases


INSTITUTO TECNOLOGICO DE ORIZABA




77

3.5.7 Diseo de Navegacin

A continuacin se especifica la forma en la que se accede a los componentes del sistema
mediante mapas de navegacin.


























SysPapeleras
Login

Administrador
Inicio Categora

U. medida Productos

Sucursales

Salir

Figura 3.3 Diagrama de navegacin Sys Papeleras
Asignar Imagen
Producto.

Agregar,
eliminar
y modificar
u. medida.

Agregar,
eliminar
y modificar
producto.

Agregar,
eliminar
y modificar
categora.

Agregar,
eliminar
y modificar
sucursal.

Agregar datos y
dar de alta
sucursal con su
tipo.

INSTITUTO TECNOLOGICO DE ORIZABA




78

3.5.8 Diseo de la Base de Datos

Debido a la naturaleza del proyecto y a los acuerdos estipulados para su elaboracin, no es
posible mostrar el diseo de la base de datos por confidencialidad

3.5.9 Diseo de la implementacin

Prototipo de interfaz


Figura 3.4 Prototipo de interfaz de usuario de entrada del sistema






INSTITUTO TECNOLOGICO DE ORIZABA




79

3.6 Generacin de pginas y pruebas

Se procedi en esta fase a la generacin de cada una de las pginas con las que cuenta el
proyecto, para ello se tomaron en cuenta los requisitos mencionados en la fase de anlisis y
de diseo de pginas. Posteriormente se realizaron las siguientes pruebas.


Componente: sesin

Modulo a aprobar:
Iniciar sesin
Verificar que se muestre un formulario para el inicio de sesin.
Validar que el nombre de usuario y contrasea existan en la base de datos.
Validar que el usuario ingresado se le muestren solo el men dependiendo del tipo
de usuario que se le asigno.
Cerrar sesin
Validar que al cerrar la sesin de cualquier usuario me redirija al ndex del sistema.


Componente: Categora

Modulo a aprobar:
Agregar una nueva categora

Ingresar la categora, validar que no haya campos vacios, cantidad solo
nmeros.
Comprobar que la categora no se encuentre en la base de datos.
Comprobar que la categora se registr correctamente.


INSTITUTO TECNOLOGICO DE ORIZABA




80


Componente: Categora

Modulo a aprobar:

Modificar Categora

Validar que no haya campos vacios, Modificar la categora
Validar que se hayan hecho los cambios correspondientes.

Componente: Categora

Modulo a aprobar:
Eliminar Categora

Validar que no haya campos vacios, seleccionar la categora a eliminar.
Comprobar que la categora haya sido eliminada de la base de datos.


Componente: Unidad de Medida

Modulo a aprobar:
Agregar una nueva unidad de medida

Ingresar la unidad de medida, validar que no haya campos vacios,
cantidad solo nmeros.
Comprobar que la unidad de medida no se encuentre en la base de datos.
Comprobar que la unidad de medida se registr correctamente.

INSTITUTO TECNOLOGICO DE ORIZABA




81

Componente: Unidad de Medida

Modulo a aprobar:

Modificar Unidad de Medida

Validar que no haya campos vacios, Modificar la unidad de medida
Validar que se hayan hecho los cambios correspondientes.

Componente: Unidad de Medida

Modulo a aprobar:
Eliminar Unidad de Medida

Validar que no haya campos vacios, seleccionar la unidad de medida a
eliminar.
Comprobar que la unidad de medida haya sido eliminada de la base de
datos.

Componente: Productos

Modulo a aprobar:
Agregar un nuevo producto

Ingresar el producto, validar que no haya campos vacios, cantidad solo
nmeros.
Comprobar que el producto no se encuentre en la base de datos.
Comprobar que el producto se registr correctamente.
INSTITUTO TECNOLOGICO DE ORIZABA




82

Componente: Productos

Modulo a aprobar:

Modificar Productos

Validar que no haya campos vacios, Modificar el producto
Validar que se hayan hecho los cambios correspondientes.

Componente: Productos

Modulo a aprobar:
Eliminar Productos

Validar que no haya campos vacios, seleccionar el producto a eliminar.
Comprobar que el producto haya sido eliminado de la base de datos.

Componente: Sucursales

Modulo a aprobar:
Agregar una nueva sucursal

Ingresar la sucursal, validar que no haya campos vacios, cantidad solo
nmeros.
Comprobar que la sucursal no se encuentre en la base de datos.
Comprobar que la sucursal se registr correctamente.


INSTITUTO TECNOLOGICO DE ORIZABA




83


Componente: Sucursales

Modulo a aprobar:

Modificar Sucursal

Validar que no haya campos vacios, Modificar la sucursal
Validar que se hayan hecho los cambios correspondientes.

Componente: Sucursales

Modulo a aprobar:
Eliminar Sucursal

Validar que no haya campos vacios, seleccionar la sucursal a eliminar.
Comprobar que la sucursal haya sido eliminada de la base de datos.








INSTITUTO TECNOLOGICO DE ORIZABA




84


Preparacin de ambiente de pruebas

Requerimientos de Hardware:
Procesador Pentium o Compatible 1.5 GHz o superior.
1GB de Memoria RAM, o superior.
20 GB de espacio libre en el disco duro.
Conexin a internet o red local.


Requerimientos de Software:
Lampp
Versin. 1.7.7 o superior.
Copiar el proyecto dentro de la carpeta htdocs.
Crear la BD UGM para posteriormente ejecutar el script que creara la estructura de
tablas y relaciones de dicha base.
Acceder va local host a travs de un navegador para iniciar pruebas.









INSTITUTO TECNOLOGICO DE ORIZABA




85

3.6.1 Pruebas de integracin.
Tabla 3.16 Prueba de integracin categora

Pruebas de Integracin
Fecha: 24/01/14 Persona
responsable de
la prueba
Antonio
Hernndez
Nombre del requisito Funcional (R.F) Categora
Breve descripcin del (R.F) Permite Agregar, modificar y
eliminar categoras al sistema
El R.F es parte del diagrama de casos de uso Si ( x )
No ( )

El R.F incluye formulario de entrada Si ( x )
No ( )

Los datos solicitados en el formulario de entrada
corresponden con los atributos estipulados en el B.D.
datos (tipo y tamao)
Si ( x )
No ( )

El R.F. requiere de datos de salida

Si ( x)
No ( )

El R.F. es parte de diagrama de descomposicin
funcional o mapa de navegacin

Si ( x )
No ( )

Los datos de salida se almacenan en la B.D. y los
atributos estipulados corresponden en el D. datos (tipo
y tamao)

Si ( x )
No ( )

INSTITUTO TECNOLOGICO DE ORIZABA




86


Pruebas de Integracin
Fecha: 24/01/14 Persona
responsable de
la prueba
Antonio
Hernndez
Nombre del requisito Funcional (R.F) Unidad de Medida
Breve descripcin del (R.F) Permite Agregar, modificar y
eliminar las unidades de medida.
El R.F es parte del diagrama de casos de uso Si ( x )
No ( )

El R.F incluye formulario de entrada Si ( x )
No ( )

Los datos solicitados en el formulario de entrada
corresponden con los atributos estipulados en el B.D.
datos (tipo y tamao)
Si ( x )
No ( )

El R.F. requiere de datos de salida

Si ( x)
No ( )

El R.F. es parte de diagrama de descomposicin
funcional o mapa de navegacin

Si ( x )
No ( )

Los datos de salida se almacenan en la B.D. y los
atributos estipulados corresponden en el D. datos (tipo
y tamao)

Si ( x )
No ( )


Tabla 3.17 Prueba de integracin unidad de medida

INSTITUTO TECNOLOGICO DE ORIZABA




87

Pruebas de Integracin
Fecha: 24/01/14 Persona
responsable de
la prueba
Antonio
Hernndez
Nombre del requisito Funcional (R.F) Productos
Breve descripcin del (R.F) Permite registrar, modificar y
eliminar productos
El R.F es parte del diagrama de casos de uso Si ( x )
No ( )

El R.F incluye formulario de entrada Si ( x )
No ( )

Los datos solicitados en el formulario de entrada
corresponden con los atributos estipulados en el B.D.
datos (tipo y tamao)
Si ( x )
No ( )

El R.F. requiere de datos de salida

Si ( x)
No ( )

El R.F. es parte de diagrama de descomposicin
funcional o mapa de navegacin

Si ( x )
No ( )

Los datos de salida se almacenan en la B.D. y los
atributos estipulados corresponden en el D. datos (tipo
y tamao)

Si ( x)
No ( )


Tabla 3.18 Prueba de integracin productos

INSTITUTO TECNOLOGICO DE ORIZABA




88

Pruebas de Integracin
Fecha: 24/01/14 Persona
responsable de
la prueba
Antonio
Hernndez
Nombre del requisito Funcional (R.F) Sucursales
Breve descripcin del (R.F) Permite registrar, modificar y
eliminar sucursales
El R.F es parte del diagrama de casos de uso Si ( x )
No ( )

El R.F incluye formulario de entrada Si ( )
No ( x )

Los datos solicitados en el formulario de entrada
corresponden con los atributos estipulados en el B.D.
datos (tipo y tamao)
Si ( x )
No ( )

El R.F. requiere de datos de salida

Si ( )
No ( x )

El R.F. es parte de diagrama de descomposicin
funcional o mapa de navegacin

Si ( x )
No ( )

Los datos de salida se almacenan en la B.D. y los
atributos estipulados corresponden en el D. datos (tipo
y tamao)

Si ( x )
No ( )


Tabla 3.19 Prueba de integracin sucursales
INSTITUTO TECNOLOGICO DE ORIZABA




89

3.6.2 Prueba de configuracin

Se evalu a cada una de las interfaces que se disearon en la etapa de generacin de
pginas, por lo cual cada una de stas se probaron mediante dos de los navegadores ms
usados por los usuarios: Google Chrome y Mozilla Firefox, con el fin de corregir los
errores de presentacin de los componentes y contenidos (imgenes, texto, mens de
navegacin, color, etc.) de cada una de las pginas.




Figura 3.5 Prueba de la pgina de login en google chrome



INSTITUTO TECNOLOGICO DE ORIZABA




90

3.6.3 Prueba de componentes

A continuacin se muestra una tabla donde se prueba las funciones de las paginas, es decir
se llevaron a cabo para descubrir errores sobre stas, teniendo estrecha relacin con las
pruebas de navegacin y de contenido.


Componente

Navegadores
Internet Explorer Google Chrome Mozilla Firefox

Login







Administrador







Sucursal







Tabla 3.20 Prueba de componentes


3.6.4 Prueba de Navegacin

Se llev a cabo para verificar que todas las opciones que permiten navegar al usuario final
de la aplicacin, se encuentren trabajando correctamente. Los mecanismos de navegacin
se probaron para asegurar que cada uno realice la funcin correcta.

INSTITUTO TECNOLOGICO DE ORIZABA




91


Tabla 3.21 Prueba de navegacin


3.6.5 Prueba de contenido

En la prueba de contenido se revisaron pruebas ejecutables de las pginas para descubrir
errores semnticos en los objetos de contenido, estructura y organizacin presentados, es
decir cundo el usuario est navegando de una pgina a otra.

La prueba de contenido tiene tres objetivos importantes:
1) Descubrir errores sintcticos en los documentos basados en texto, representaciones
grficas y otros medios audiovisuales.
2) Descubrir errores semnticos en cualquier objeto de contenido presentado conforme
ocurra la navegacin.


Componente

Navegadores
Internet Explorer Google Chrome Mozilla Firefox

Login







Administrador







Sucursal






INSTITUTO TECNOLOGICO DE ORIZABA




92

3) Hallar errores en la organizacin o estructura del contenido que se presenta al usuario
final.

3.6.6 Prueba de la interfaz

Para la realizacin de la prueba de interfaz ocurrieron distintos puntos generados en el
proceso de la Ingeniera Web; es decir la formulacin y el anlisis de los requisitos
proporcionados, se revis que el modelo de la interfaz con el propsito de garantizar los
requerimientos y/o necesidades especificados por la Institucin. Adems, se revisaron los
modelos de diseo para que UGM especificara los criterios establecidos y alcanzados para
todas las interfaces que se usan en la aplicacin.
3.7 Evaluacin del cliente

En esta fase UGM Rectora Centro realiz una inspeccin de las pginas para evaluar
aspectos tales como la estructura, organizacin y contenido de las pginas que fueron
requeridas para las opciones de cada tipo de usuario.











Figura 3.6 Pgina de login (Inicio de la aplicacin)
INSTITUTO TECNOLOGICO DE ORIZABA




93

Conformada por:























Figura 3.7 Logo UGM
Figura 3.8 Eslogan
Figura 3.9 Imgenes de Papelera
INSTITUTO TECNOLOGICO DE ORIZABA




94










Figura 3.11 Pagina de Sys Papeleras


Figura 3.10 Formulario de inicio de sesin
INSTITUTO TECNOLOGICO DE ORIZABA




95


Contenido de la pagina:













Figura 3.12 Bienvenida sucursal
Figura 3.13 Cabecera de Sys papelera
INSTITUTO TECNOLOGICO DE ORIZABA




96













Figura 3.14 Marquesina y men que describe las opciones para el usuario
Figura 3.15 Opcin de Registro de categoras
INSTITUTO TECNOLOGICO DE ORIZABA




97

























Figura 3.16 Formulario de categoras
Figura 3.17 Opcin de Unidad de Medida
INSTITUTO TECNOLOGICO DE ORIZABA




98

























Figura 3.18 Formulario de Unidad de medida
Figura 3.19 Opcin de Productos
INSTITUTO TECNOLOGICO DE ORIZABA




99

























Figura 3.20 Formulario de Productos
Figura 3.21 Opcin Sucursales
INSTITUTO TECNOLOGICO DE ORIZABA




100




















Figura 3.23 Formulario de registro de tipo
y datos de sucursales.
Figura 3.22 Formulario de Sucursales
INSTITUTO TECNOLOGICO DE ORIZABA




101
CONCLUSIONES

Los sistemas de informacin han resultado ser de gran beneficio para las empresas debido a
Que permiten el manejo de una gran cantidad de informacin de diferentes tipos de una
forma rpida, confiable y eficiente.

Uno de sus beneficios es la recoleccin de datos, que en otros tiempos era menos eficiente
y con resultados no siempre confiables debido a que el proceso de recoleccin de
informacin era realizado a travs del personal de la empresa.

El Sistema a nivel plantel para la gestin de papeleras se desarrollo con la finalidad de
entender las funciones de un desarrollador web, debido a que no es simplemente una
aplicacin del diseo convencional, ya que considera cuestiones tales como navegabilidad,
interactividad, usabilidad, arquitectura de la informacin y la interaccin entre la aplicacin
y el usuario.

La implementacin de este mdulo permitir a la Universidad del Golfo de Mxico la
recoleccin de datos de todos sus planteles a travs del uso de la tecnologa, permitiendo de
Esta forma poder gestionar la informacin recolectada de una mejor manera, obteniendo as
Resultados de gran beneficio ya que le permitir usar los datos recabados para facilitar la
toma de decisiones futuras.

Al llevar a cabo la realizacin de proyecto para la Universidad del Golfo de Mxico se
lleg a lo siguiente:







INSTITUTO TECNOLOGICO DE ORIZABA




102
La mejor Accesibilidad al sistema en cualquier momento mediante red y
Posteriormente Internet.

Una Interfaz agradable para el usuario

El Manejo de diferentes usuarios

El software desarrollado utiliz una metodologa orientada a objetos utilizando el
UML como lenguaje de modelado.

Los requerimientos tcnicos y de contenidos se recabaron en tiempo y forma
logrando el desarrollo de la aplicacin con las pruebas pertinentes desarrolladas en
las actividades.

Con esto el sistema de gestin de papeleras cumple con la finalidad para la cual fue
desarrollado, adems establece una forma ms eficiente y eficaz de llevar a cabo el control
de ella, permitiendo su utilizacin al personal establecido por la Universidad del Golfo de
Mxico











INSTITUTO TECNOLOGICO DE ORIZABA




103

RECOMENDACIONES

A todo el personal encargado en la papelera de UGM rectora centro que utilizara el
Sistema a nivel plantel para la gestin de papeleras, se le pide de forma atenta, usar la
aplicacin con responsabilidad, ya que el control adecuado del mismo adems de ser
llevado a cabo por el sistema siempre necesitara de personal humano que lo manipule, es
por eso que los usuarios encargados deben administrar los datos de manera adecuada,
especialmente porque a la hora de capturar los datos para la papelera deben de ser los
correctos que el usuario realizo.

Igualmente se hace hincapi en la difusin adecuada del sistema para que el personal se
involucre y familiarice con el mismo para poder de esta forma explotar al mximo la
aplicacin realizada.

Cabe mencionar que el sistema de gestin de papelera fue desarrollado usando tecnologas
innovadoras y pensando siempre en la calidad del mismo, es por esto que se hace algunas
recomendaciones a las personas que en un futuro desarrollaran software, y las
recomendaciones son:

Ser innovadores en sus proyectos,
Actualizar sus conocimientos constantemente,
Documentndose sobre las ltimas tecnologas y terminologas usadas en el
desarrollo de software,
Tener siempre el sentido de responsabilidad,
Proponer mejoras
Enfrentar los retos, logrando con esto un producto de software de calidad.



INSTITUTO TECNOLOGICO DE ORIZABA




104

GLOSARIO

Internet: Es un sistema mundial de redes de computadoras, un conjunto integrado por las
Diferentes redes de cada pas del mundo, por medio del cual un usuario en cualquier
computadora puede tener acceso a cualquier tipo de informacin.

MYSQL: Es un gestor de Bases de Datos multiusuario que gestiona bases de datos
Relacionales

PHP: Es un lenguaje de programacin interpretado, diseado originalmente para la
Creacin de pginas web dinmicas.

Vnculo: Conexin que se establece entre pginas web o textos mediante una referencia
Insertada.

Web: El trmino se utiliza para definir el universo del World Wide Web, los sitios, la
Informacin y los servicios de la telaraa.

WebApp: Se denomina aplicacin web a aquellas aplicaciones que los usuarios pueden
Utilizar accediendo a un servidor web a travs de Internet o de una intranet mediante un
Navegador.

CSS: Son plantillas que se pueden utilizar para crear documentos HTML y dar formato a
Los textos que se presenten en pantalla.

Hipermedia: Combinacin de los trminos hipertexto y multimedia. Se refiere a las
Pginas Web que integran informacin en distintos tipos de formato: texto, imgenes,
Sonidos y video, principalmente.


INSTITUTO TECNOLOGICO DE ORIZABA




105

Hipersistema: Es un sistema de "saltos" no lineales en el que un salto puede llevarnos a un
plano o dimensin totalmente diferente

Servidor: Se encarga de proporcionar al navegador los documentos y medios que este
Solicita. Utiliza un protocolo HTTP para atender las solicitudes de archivos por parte de un
Navegador.

UML: Lenguaje grfico para especificar, construir, visualizar las partes o artefactos que
Son informacin utilizada y originada mediante un proceso de software. Es un lenguaje
Estndar de modelado orientado a objetos.

URL: Es el Localizador Uniforme de Recursos, o dicho ms claramente, es la direccin
Que localiza una informacin dentro de Internet

Login: Acceso a un sistema informtico por medio de identificacin de usuario y
contrasea del mismo

PDF: es un formato de almacenamiento de documentos digitales independiente de
plataformas de software o hardware








INSTITUTO TECNOLOGICO DE ORIZABA




106

BIBLIOGRAFIA:

1) Lujan Mora Sergio, Programacin de aplicaciones web: historia, principios bsicos y
clientes web, Editorial Club Universitario
2) St-Pierre Armand y Stephanos Willian, Redes Locales e Internet, Introduccin a la
comunicacin de datos, Mxico: editorial Trillas.
3) Bobadilla Jess, Alcocer Alejandro, Santiago Alonso y Gutirrez Abraham, HTML
Dinmico, ASP y Java Script a travs de ejemplos, Mxico: Editorial Alfaomega Ra-Ma.

REFERENCIAS DE INTERNET


1) http://www.mysqlya.com.ar/
2) www.cesarcancino.com
3) http://mysql.conclase.net/curso/?cap=007b
4) http://casamadrugada.net/
5) http://www.javascriptya.com.ar/

You might also like