INSTITUTO TECNOL

OGICO SUPERIOR DE LOS R

IOS
Nombre de la Empresa:
Grupo SYSI (Sistemas y Soluciones Integrales)
Memoria de Residencia Profesional
DESARROLLO DE SISTEMA WEB PARA
AGENCIA DE VIAJES
Asesor Interno:
M.C. Gregorio Perez Olan
Asesor Externo:
M.D.S. Diego Ivan Ya nez Perez
Presenta:
Juan Carlos Luna Sanchez
Carrera:
Ingeniera en Sistemas Computacionales
Balancan, Tabasco, Mexico Septiembre, 2013
c Derechos Reservados por
Juan Carlos Luna S anchez
2013

Indice General

Indice de Figuras III

1. Introducci on 1
1.1. Justicaci on . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 1
1.2. Objetivos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.1. Objetivo General . . . . . . . . . . . . . . . . . . . . . . . . . 2
1.2.2. Objetivos Especicos . . . . . . . . . . . . . . . . . . . . . . . 2
1.3. Caracterizaci on del

Area en que se Particip o . . . . . . . . . . . . . . 2
1.3.1. Antecedentes . . . . . . . . . . . . . . . . . . . . . . . . . . . 3
1.4. Problemas a Resolver, Priorizandolos . . . . . . . . . . . . . . . . . . 4
1.4.1. Analisis de Requerimientos . . . . . . . . . . . . . . . . . . . . 4
1.4.2. Dise no . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.3. Programacion . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.4. Pruebas . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 5
1.4.5. Deteccion de Problemas y Correcci on . . . . . . . . . . . . . . 6
1.4.6. Implementaci on . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5. Alcances y Limitaciones . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.1. Alcances . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 6
1.5.2. Limitaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . 7
2. Marco Te orico 8
2.1. Conceptos B asicos de Portal Web . . . . . . . . . . . . . . . . . . . . 8
2.1.1. Lenguaje de Programacion Web . . . . . . . . . . . . . . . . . 8
2.1.1.1. Lenguajes del lado Cliente . . . . . . . . . . . . . . . 9
2.1.1.2. Lenguajes del lado Servidor . . . . . . . . . . . . . . 9
2.2. Lenguaje HTML . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 9
2.2.1. Caractaersticas generales de HTML . . . . . . . . . . . . . . 9
2.3. JAVASCRIPT . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 10
2.3.1. Caractaersticas generales de JAVASCRIPT . . . . . . . . . . 10
2.3.2. Ventajas y Desventajas en el uso de JAVASCRIPT . . . . . . 11
2.3.2.1. Ventajas . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.3.2.2. Desventajas . . . . . . . . . . . . . . . . . . . . . . . 11
2.4. PHP . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 11
2.4.1. Ventajas y Desventajas en el uso de PHP . . . . . . . . . . . . 12
2.4.1.1. Ventajas . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.4.1.2. Desventajas . . . . . . . . . . . . . . . . . . . . . . . 12
I

INDICE GENERAL II
2.5. SQL . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 12
2.6. AJAX . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 13
2.6.1. Tecnologas incluidas en AJAX . . . . . . . . . . . . . . . . . 14
2.7. JQUERY . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 14
2.7.1. Caractaersticas . . . . . . . . . . . . . . . . . . . . . . . . . . 15
3. Procedimientos y Descripcion de las Actividades Realizadas 16
3.1. Factibilidad Tecnica . . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.2. Factibilidad Operativa . . . . . . . . . . . . . . . . . . . . . . . . . . 17
3.3. Factibilidad economica. . . . . . . . . . . . . . . . . . . . . . . . . . . 17
4. Resultados 18
4.1. Programas Utilizados Durante la Realizaci on del Proyecto . . . . . . 25
5. Conclusiones y Recomendaciones 27
5.1. Conclusiones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
5.2. Recomendaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 27
Bibliografa 28
Anexos 29
Apendice I . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 29
Apendice II . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 30

Indice de Figuras
1.1. Ubicaci on geograca de Grupo SYSI. . . . . . . . . . . . . . . . . . . 3
1.2. Organigrama de Grupo SYSI. . . . . . . . . . . . . . . . . . . . . . . 3
1.3. Cronograma de actividades. . . . . . . . . . . . . . . . . . . . . . . . 6
4.1. P agina de inicio de sesion. . . . . . . . . . . . . . . . . . . . . . . . . 18
4.2. P agina de ofertas de la administraci on. . . . . . . . . . . . . . . . . . 19
4.3. Formulario registro cliente nuevo. . . . . . . . . . . . . . . . . . . . . 19
4.4. Comentario p agina cliente. . . . . . . . . . . . . . . . . . . . . . . . . 20
4.5. P agina de ventas. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 20
4.6. Calendario de actividades. . . . . . . . . . . . . . . . . . . . . . . . . 21
4.7. Pesta n agregar evento. . . . . . . . . . . . . . . . . . . . . . . . . . . 21
4.8. P agina reportes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.9. P agina reportes. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 22
4.10. Elementos dentro de la p agina principal. . . . . . . . . . . . . . . . . 22
4.11. Mapa del apartado Descubre. . . . . . . . . . . . . . . . . . . . . . 23
4.12. Banners. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . 23
4.13. Pagina de contacto. . . . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.14. Venta de promosiones. . . . . . . . . . . . . . . . . . . . . . . . . . . 24
4.15. Ventana principal de Axure. . . . . . . . . . . . . . . . . . . . . . . . 25
4.16. Panel de control de XAMPP. . . . . . . . . . . . . . . . . . . . . . . 25
4.17. Ventana ndex de XAMPP mostrada en el navegador. . . . . . . . . . 26
III
Captulo 1
Introducci on
El estudio del sector de las agencias de viajes virtuales (AVV) resulta intere-
sante por un doble motivo: la distribuci on de servicios tursticos es un ejemplo de
los negocios que ha experimentado un mayor incremento en las ventas a traves de
internet, este a su vez constituye un instrumento de vital importancia para la activi-
dad de estas empresas. Se trata de un sector caracterizado por una fuerte rivalidad
competitiva, donde la calidad percibida por el cliente constituye un elemento clave
de exito, es por esta raz on y para afrontar la competitividad que se trato de crear
un portal s olido y con una conjunci on entre calidad y atractivo a la vista del cliente
y con esto se pretende fortalecer el posicionamiento del sitio web en los mercados
actuales.
1.1. Justicaci on
Solventar la necesidad de proporcionar informaci on de calidad a los clientes de
una agencia de viajes. La gran demanda de usuarios que presenta una agencia de
viajes, requiere un metodo mas eciente para que sus clientes realicen sus reserva-
ciones o tengan informaci on m as amplia acerca de los destinos y paquetes que la
empresa oferta, ya que los tpicos folletos ofrecidos no estan satisfaciendo las necesi-
dades de informaci on, por lo cual se requiere ofrecer informacion de una manera
m as din amica a traves de la realizaci on de un completo portal web el cual facilitara
de una manera muy amplia el realizar reservaciones, este es el principal motivo y la
necesidad primordial que dicho proyecto espera cubrir.
A partir de la puesta en marcha del portal web se espera una mayor atraccion
de clientes potenciales, adem as de aportar al estado de Chiapas un mayor prestigio
como destino id oneo para viajar y con esto contribuir a la economa de este lugar. Se
ha considerado que con la realizaci on de este proyecto todas las partes involucradas
obtengan por lo menos un benecio mnimo.
1
Objetivos 2
1.2. Objetivos
1.2.1. Objetivo General
Desarrollar una herramienta que permita visualizar la oferta que maneja una
agencia de viajes mediante la creaci on un portal web din amico.
1.2.2. Objetivos Especicos
Crear una herramienta completa para administar y comprar paquetes de viajes
o reservaciones de hoteles.
Hacer mas ecaz la manera de vender los paquetes de viaje.
Facilitar al usuario la compra de alg un paquete de viaje.
Dar a conocer al usuario informaci on detallada de los destinos que oferta a
traves de recursos multimedia.
1.3. Caracterizaci on del

Area en que se Participo
El proyecto llamado Desarrollo de sistema web para agencia de viajes se llevo a
cabo en la empresa Grupo SYSI ubicada en la ciudad de San Crist obal de las casas,
Chiapas la cual cuenta con 2 areas organizacionales que son primordiales para re-
sponder a la amplia demanda de servicio por parte de sus clientes. La primera de
estas es el area de soporte tecnico y la segunda es el area de desarrollo de software
que a su vez tiene una sub- area encargada de dise no y servicios web, aqu es donde
se desarrollan sitios y aplicaciones web y es en esta sub- area donde se contempl o el
desarrollo del proyecto, el sitio desarrollado tiene est a vinculado directamente con
el dise no y programaci on de p aginas web, apoyado en diversas herramientas, el cual
se espera responda de manera amplia a las necesidades del usuario nal, en este
caso los clientes quienes demandan mas informacion acerca de los sitios y paquetes
ofertados por la empresa y los empleados de la misma que se encargaran de admin-
istrar el portal web, dicho portal pretende mejorar la experiencia de los clientes al
adquirir un paquete de viaje brindando una herramienta eciente y de gran calidad.
Apoyado en tecnologas o frameworks del lenguaje de programaci on Java tales como
AJAX y JQUERY adem as del uso de los lenguajes de programacion PHP, HTML y
MYSQL los cuales son conocidos por su ecacia en el desarrollo de aplicaciones web
y la administraci on de bases de datos con todos estos elementos se espera tener un
sistema completo e ideal para la agencia de viajes.
Caracterizaci on del

Area en que se Particip o 3
Figura 1.1: Ubicacion geograca de Grupo SYSI.
Figura 1.2: Organigrama de Grupo SYSI.
En el area de desarrollo de sistemas es donde se realiza el desarrollo de las
aplicaciones que incorporan los sistemas de informacion iniciando como los an alisis
y dise no, al igual tambien, con las pruebas mediante un ligero conteo, en donde
se comprueba la aplicaci on para poder implementar de manera conable el sistema
desarrollado. As mismo, capacita a los usuarios para el uso del desarrollo y la
realizaci on de los mantenimientos y actualizaciones de los equipos que estan en
pleno uso, es decir, la que est a en funci on en dicha empresa.
1.3.1. Antecedentes
Grupo SYSI cuenta con el area llamada de Desarrollo de Software dentro la cual
encontramos la sub-area llamada Dise no y servicios web.
Ya que el proyecto se desarrolla en esta ultima, es aqu donde enfocaremos la
atenci on, porque esta parte de la empresa es la responsable de llevar a la conclusi on
la creacion del portal interactivo.
Problemas a Resolver, Prioriz andolos 4
La problematica a resolver se centra en la demanda de informaci on requerida
por los clientes de una agencia de viajes que encargo a Grupo SYSI la creaci on de
un sitio web interactivo, que adem as de servir como medio de informacion ayudara
al registro de clientes, quienes podr an comprar paquetes de viajes a traves de este.
1.4. Problemas a Resolver, Priorizandolos
Es importante darle la importancia adecuada a los problemas que se intentan
resolver con la creaci on del portal web, pero sobre todo mantener un orden en la re-
alizaci on de cada una de las actividades y tomarse el debido tiempo para analizar si
el proyecto cubrir a cada una de las necesidades u objetivos especcos mencionados
con anterioridad. La creacion del portal web es el principal objetivo del proyecto
aunque la importancia de este radica en que es necesario que sea funcional para
lo cual se requiere un cronograma de actividades con el que podamos establecer un
tiempo determinado de acuerdo a la relevancia de cada actividad y que esta se pueda
concluir de manera satisfactoria.
A continuaci on se enlistan las actividades a realizar y la manera en que se llevaran
a cabo para concretar cada una de ellas:
An alisis de requerimientos.
Dise no.
Programaci on.
Pruebas.
Detecci on de problemas y correccion.
Implementaci on.
1.4.1. Analisis de Requerimientos
El primer punto es analizar los requerimientos del sistema (que se necesita que
haga), para ello sera necesario la recopilacion de informaci on de diversas fuentes
que nos sirvan de apoyo, esta informaci on puede ser la opinion de los usuarios (ad-
ministradores del portal y clientes de la agencia) hasta la consulta de trabajos que
puedan servir como antecedentes. Para un mejor analisis es importante la organi-
zaci on de la informacion obtenida esto se logra a traves del uso de algunos diagramas
del lenguaje UML y otras herramientas como mapas de sitio.
Es tambien en esta parte donde se establecen los alcances del proyecto y el
impacto que se pretende tenga en la agencia de viajes, esto incluye varios de los
objetivos especcos.
Problemas a Resolver, Prioriz andolos 5
1.4.2. Dise no
En esta parte se vuelve hacer uso de los diagramas de UML y los mapas de
sitio creados en la etapa de analisis de requerimientos para bosquejar nuestro sitio
web, con el uso de estas herramientas se tendr a la idea general de la organizaci on del
portal, es decir a partir de aqu se conoceran las partes o pesta nas de nuestro sitio web
y los elementos que incluye cada una de estas. Al dise nar el sito siempre es necesario
tener en cuenta todo lo que se reere a la parte del an alisis de requerimientos ya
que esta parte establece los lmites de nuestro portal.
Incrementar el n umero de clientes de la agencia de viajes.
Hacer mas ecaz la manera de vender los paquetes de viaje.
Facilitar al usuario la compra de alg un paquete de viaje.
Dar a conocer al usuario informaci on detallada de los destinos que oferta a
traves de recursos multimedia.
1.4.3. Programaci on
En esta actividad se realizara un prototipo el cual est a basado en la informaci on
recabada a partir del an alisis de requerimientos de la actividad 1 de nuestro crono-
grama y el cual una vez validado regir a el proyecto. Esta es una de las actividades
clave dentro del proyecto y tal vez una las m as relevantes.
La realizacion del portal requiere de la escritura de una gran cantidad de codigo
el cual ser a generado a partir de los lenguajes de programacion JAVASCRIPT, PHP,
MYSQL, HTML y las herramientas de java AJAX Y JQUERY/JQUERY MOBILE
dependiendo del modulo a programar ya que algunos requirieren almacenamiento
de datos mientras otros deben mostrar contenido multimedia y otros elementos;
utilizando los programas Netbeans, Axure y XAMPP como ides de desarrollo.
1.4.4. Pruebas
Una vez terminado la actividad de programaci on de todo el c odigo necesario
para el funcionamiento del portal web se monto la pagina en un servidor que se
utiliza como hosting o almacenador de proyectos, realizados dentro de Grupo SYSI
es necesario mencionar que la empresa elige este tipo de host y no utiliza los que
ofertan empresas dedicadas exclusivamente a esta actividad porque as se puede dar
un mejor mantenimiento a sus proyectos.
Alcances y Limitaciones 6
Se puso en marcha el sistema por un periodo de prueba para evaluar su calidad
y rendimiento, mediante una simulaci on en la que se hizo uso de cada m odulo y se
observ o de manera detallada el desempe no general documentando los resultados.
1.4.5. Detecci on de Problemas y Correccion
Bas andose en los resultados anteriores que se obtuvieron a partir de la obser-
vaci on y documentacion se puso en ejecuci on la actividad de detecci on y correcci on
de problemas y se identicaron algunas fallas en el portal tales como: la omision de
ciertos elementos dentro de algunos m odulos o pesta nas y la inactividad o respuesta
nula de algunos botones. Estos problemas fueron corregidos antes de llegar al paso
nal.
1.4.6. Implementaci on
Esta es la ultima actividad y es en la cual se logro el funcionamiento optimo del
portal para sastifacci on del cliente y la comodidad de cada uno de los usuarios.
Figura 1.3: Cronograma de actividades.
1.5. Alcances y Limitaciones
1.5.1. Alcances
Al termino del proyecto se realiz o una autoevaluacion para determinar si se
cumplieron los alcances pronosticados, se obtuvieron varios resultados entre estos
est an la terminaci on del portal web y su correcto funcionamiento, el cumplimiento
o solvencia de informaci on que los clientes de la agencia requeran, as mismo se
logr o que el portal sea una herramienta innovadora y a la vanguardia para la atrac-
ci on de clientes potenciales ademas de que los administradores mencionaron que es
una forma ecaz al momento de manipular los datos proporcionados en la venta
de paquetes y por ultimo se obtuvo una mayor preferencia de los usuarios al sentir
comodidad en el uso de este sistema.
Alcances y Limitaciones 7
1.5.2. Limitaciones
Durante la realizacion del proyecto hubieron peque nas limitaciones que evitaron
el termino de algunas actividades en el tiempo establecido una de estas limitaciones
fue la entrega de informaci on por parte de la agencia para realizar el an alisis de
requerimientos, adem as de la correccion de algunos problemas que se identicaron
y no se tenan contemplados.
Captulo 2
Marco Teorico
Dentro del amplio mundo de internet existen diversas deniciones y conceptos
de lo que es un sitio o portal web, as mismo de los elementos y lenguajes que hacen
posible la creaci on de estos. A continuaci on se presentan estas opiniones.
2.1. Conceptos Basicos de Portal Web
Un sitio web es un conjunto de p aginas web tpicamente comunes a un dominio
de internet o subdominio en la World Wide Web.
Un portal web es cualquier p agina encontrada en internet y puede ser creada con
diferentes nalidades estas son las mas comunes: existen p aginas web informativas
estas tienen como unica motivaci on proporcionar datos o conocimientos acerca de
alg un tema en especco; otro tipo de p aginas web son las redes sociales las cuales son
un sistema complejo capaz de comunicar personas y albergar cientos de perles ed-
itables, ejemplo de estas son Facebook y Twitter entre otras. Por ultimo pero con la
misma importancia que la referida con anterioridad est an las paginas empresariales
que son aquellas que involucran formularios de registro para guardar informaci on que
es usada despues con distintos nes, algunos de estos sitios pueden estar dedicados a
desempe narse como bolsas de trabajo, tramites gubernamentales, tiendas online etc.
Para la creacion de cualquier sitio web es necesario tener ciertos conocimientos
que pueden involucrar el tema del cual se va a hablar o conocimientos acerca de
los lenguajes de programaci on que se utilizaran para la creacion de la p agina. Se
pueden identicar ciertos pasos los cuales marcan una pauta para la realizaci on de
un sitio web estos pasos pueden ser la recopilaci on de informaci on el dise no del sitio
y la nalidad que este tendra.
2.1.1. Lenguaje de Programaci on Web
Los lenguajes de programaci on web han ido surgiendo las necesidades de las
plataformas, intentando facilitar el trabajo a los desarrolladores de aplicaciones; se
clasican en lenguajes del lado cliente y lenguajes del lado servidor.
8
Lenguaje HTML 9
2.1.1.1. Lenguajes del lado Cliente
Son aquellos lenguajes que son asimilados directamente por el navegador y no
necesitan pre tratamiento.
2.1.1.2. Lenguajes del lado Servidor
Son aquellos lenguajes que se ejecutan por el propio servidor y son enviados al
cliente en un formato para el.
Para la escritura de un sitio web el lenguaje universal se puede considerar HTML
ya que cualquier pagina necesita de una estructura de este tipo, pero es necesario
recordar que existen lenguajes de programaci on web que pueden estar contenidos
dentro de una estructura HTML, estos lenguajes como se menciono anteriormente
pueden ser del lado del lado del servidor o del lado del cliente.
A continuacion se presentan algunos de estos lenguajes, su origen, descripci on,
caractersticas, ventajas y desventajas.
2.2. Lenguaje HTML
El origen de HTML se remonta a 1980, cuando el fsico Tim Berners-Lee, traba-
jador del CERN (Organizaci on Europea para la Investigacion Nuclear) propuso un
nuevo sistema de hipertexto para compartir documentos.
HTML es un lenguaje est atico para el desarrollo de sitios web (acr onimo en ingles
de Hyper Text Markup Language, en espa nol lenguaje de marcado hipertextual)
optimizado por el World Wide Web Consortium. Los archivos pueden tener las
extensiones (htm, html y en ocasiones xhtml dependiendo de la version empleada).
2.2.1. Caractaersticas generales de HTML
Puede ser creado y editado con cualquier editor de texto b asico.
Utiliza etiquetas o marcas, que consisten en breves instrucciones de comienzo
y nal, mediante las cuales se determina la forma en la que debe aparecer en
su navegador el texto.
Cada elemento de un documento HTML consta de una etiqueta de comienzo,
un bloque de texto y una etiqueta de n.
JAVASCRIPT 10
Sintaxis o estructura b asica de un c odigo HTML:
<HTML>
(Marca el inicio del documento).
<Head>
(Cabecera del programa generalmente el contenido de esta seccion
es el que se muestra en la parte superior del navegador).
</Head>
<body>
(Es el cuerpo de la pagina web que incluye diversas etiquetas que
sirven para darle un dise~no adecuado o que corresponda al tipo de
pagina web a crear; es tambien la parte donde se puede incluir
codigo de otros lenguajes tales como JAVASCRIPT, PHP, CSS, etc).
</body>
</HTML>
(Esta etiqueta siempre indica que ha culminado la escritura de
codigo HTML y cualquier etiqueta que se encuentre despues de
esta no sera interpretada).
2.3. JAVASCRIPT
Es un lenguaje de programaci on creado por Netscape con el objetivo de integrarse
en HTML y facilitar la creaci on de p aginas interactivas sin necesidad sin necesidad
de utilizar scripts de CGI. En 1997 los autores propusieron JAVASCRIPT para que
fuera adoptado como est andar de la ECMA (European Computer Manufacturers
Association).
Gracias a JAVASCRIPT podemos desarrollar programas que se ejecuten direc-
tamente en el navegador (Lenguaje del lado del cliente).
2.3.1. Caractaersticas generales de JAVASCRIPT
Es simple, no hace falta tener grandes conocimientos de programaci on para
poder hacer un programa en JavaScript.
Maneja objetos dentro de nuestra p agina Web y sobre ese objeto podemos
denir diferentes eventos. Dichos objetos facilitan la programaci on de p aginas
interactivas, a la vez que se evita la posibilidad de ejecutar comandos que
puedan ser peligrosos para la m aquina del usuario.
Es din amico, responde a eventos en tiempo real. Eventos como presionar un
boton, pasar el puntero del mouse sobre un determinado texto o el simple
hecho de cargar la p agina o caducar un tiempo. Con esto podemos cambiar
totalmente el aspecto de nuestra pagina al gusto del usuario.
PHP 11
2.3.2. Ventajas y Desventajas en el uso de JAVASCRIPT
2.3.2.1. Ventajas
JavaScript es una excelente soluci on para poner en pr actica la validacion de datos
de un formulario en el lado del cliente. Si un usuario omite escribir su nombre en
un formulario, una funcion de validaci on en JavaScript puede desplegar en pantalla
un mensaje pop-up para hacerle saber al usuario acerca de la omision. Este tipo de
funcionalidades son m as ventajosas que tener una rutina de validacion del lado del
servidor para controlar el error, dado que el servidor en este caso no tiene que hacer
ning un tipo procesamiento de informacion adicional.
2.3.2.2. Desventajas
La seguridad sigue siendo el tal on de Aquiles de JavaScript. Los fragmentos de
c odigo de JavaScript una vez a nadidos a las p aginas web en los servidores, estos
son descargados y ejecutados en el navegador del cliente permitiendo as que cierto
c odigo malicioso pueda ser ejecutado en la m aquina del cliente con el objetivo de
explotar alguna vulnerabilidad de seguridad conocida en una de las aplicaciones,
navegadores o el mismo sistema operativo.
Otra desventaja de JavaScript es que este tiende a introducir una cantidad
enorme de fragmentos de c odigo en nuestros sitios web. Por suerte, el problema
de grandes fragmentos de c odigo JavaScript se resuelve facilmente mediante el al-
macenamiento del codigo JavaScript dentro de archivos separados del c odigo HTML
con la extensi on.
2.4. PHP
Es un lenguaje de programaci on utilizado para la creaci on de sitios web. PHP es
un acr onimo recursivo que signica HyperText Pre-processor inicialmente se llama-
ba Personal Home Page surgi o en 1995 por PHP group.
PHP es un lenguaje de script interpretado en el lado del servidor utilizado para
la generaci on de p aginas web dinamicas, enbebidas en paginas HTML y ejecutadas
en el servidor.
SQL 12
2.4.1. Ventajas y Desventajas en el uso de PHP
2.4.1.1. Ventajas
Muy facil de aprender.
Lenguaje muy r apido.
Soporte en cierta medida la orientacion a objetos clases y herencias.
Lenguaje multiplataforma (Linux, Windows entro otros).
Capacidad de conexi on con bases de datos MySQL, SQLSERVER, POST-
GRESQL, ORACLE, etc.
Gran cantidad de funciones.
2.4.1.2. Desventajas
Todo el trabajo lo realiza el servidor y no delega al cliente por tanto puede ser
m as ineciente medida que las solicitudes aumenten en n umero.
La legibilidad del codigo puede verse afectada al mezclar sentencias HTML Y
PHP.
La programacion orientada a objetos es a un muy deciente para aplicaciones
grandes.
Diculta la modularizaci on.
Sintaxis o estructura b asica en PHP:
<?
$mensaje="Hola";
echo $mensaje;
?>
o
<? php
$mensaje="Hola";
echo $mensaje;
?<
2.5. SQL
El lenguaje de consulta estructurada o SQL (por sus siglas en ingles structured
query language) es un lenguaje declarativo de acceso a bases de datos relacionales que
permite especicar diversos tipos de operaciones en ellas. Una de sus caractersticas
es el manejo del algebra y el calculo relacional que permiten efectuar consultas con el
n de recuperar de forma sencilla informaci on de interes de bases de datos, as como
hacer cambios en ella.
AJAX 13
El SQL es un lenguaje de acceso a bases de datos que explota la exibilidad y
potencia de los sistemas relacionales y permite as gran variedad de operaciones.
Es un lenguaje declarativo de alto nivel o de no procedimiento que, gracias
a su fuerte base te orica y su orientacion al manejo de conjuntos de registros y no a
registros individuales permite una alta productividad en codicaci on y la orientaci on
a objetos. De esta forma, una sola sentencia puede equivaler a uno o m as programas
que se utilizaran en un lenguaje de bajo nivel orientado a registros. SQL tambien
tiene las siguientes caractersticas:
Lenguaje de denicion de datos: El LDD de SQL proporciona comandos
para la denici on de esquemas de relaci on, borrado de relaciones y modica-
ciones de los esquemas de relaci on.
Lenguaje interactivo de manipulaci on de datos: El LMD de SQL incluye
lenguajes de consultas basado tanto en algebra relacional como en c alculo
relacional de tuplas.
Integridad: El LDD de SQL incluye comandos para especicar las restric-
ciones de integridad que deben cumplir los datos almacenados en la base de
datos.
Denici on de vistas: El LDD incluye comandos para denir las vistas.
Control de transacciones: SQL tiene comandos para especicar el comienzo y
el nal de una transaccion.
SQL incorporado y dinamico: Esto quiere decir que se pueden incorporar
instrucciones de SQL en lenguajes de programaci on como: C++, C, Java,
Cobol, Pascal y Fortran.
Adem as de los lenguajes mencionados para el desarrollo de portales web inter-
activos podemos hacer uso de otras herramientas que si bien no son consideradas
como un leguaje en si est an contenidas dentro de estos.
2.6. AJAX
La verdad es que Ajax no es nuevo y antes e conoca con otros nombres, pero
no fue muy popular hasta que Google gracias a sus innovadores servicios e interfaz,
permiti o que se hiciera conocido entre los usuarios y los desarrolladores Acr onimo de
Asynchronous JavaScript And XML (JavaScript asncrono y XML), es una tecnica
de desarrollo web para crear aplicaciones interactivas o RIA (Rich Internet Appli-
cations).
JQUERY 14
Estas aplicaciones se ejecutan en el cliente, es decir, en el navegador de los
usuarios mientras se mantiene la comunicaci on asncrona con el servidor en segundo
plano. De esta forma es posible realizar cambios sobre las p aginas sin necesidad de
recargarlas, mejorando la interactividad, velocidad y usabilidad en las aplicaciones.
AJAX es una tecnica v alida para m ultiples plataformas y utilizable en muchos
sistemas operativos y navegadores dados que esta basado en est andares abiertos
como JavaScript y Document Object Model (DOM).
2.6.1. Tecnologas incluidas en AJAX
Ajax es una combinaci on de cuatro tecnologas ya existentes:
XHTML (o HTML) y hojas de estilos en cascada (CSS) para el dise no que
acompa na a la informaci on.
Document Object Model (DOM) accedido con un lenguaje de scripting.
El objeto XMLHttpRequest para intercambiar datos de forma asncrona con
el servidor web. En algunos frameworks y en algunas situaciones concretas,
se usa un objeto iframe en lugar del XMLHttpRequest para ealizar dichos
intercambios. PHP es un lenguaje de programacion de uso general de script
del lado del servidor originalmente dise nado para el desarrollo web de contenido
din amico tambien utilizado en el metodo Ajax.
XML es el formato usado generalmente para la transferencia de datos solicita-
dos al servidor, aunque cualquier formato puede funcionar, incluyendo HTML
pre formateado, texto plano, JSON y hasta EBML.
2.7. JQUERY
JQUERY es una biblioteca de JavaScript, creada inicialmente por John Resig,
que permite simplicar la manera de interactuar con los documentos HTML, ma-
nipular el arbol DOM, manejar eventos, desarrollar animaciones (FLV) y agregar
interacci on con la tecnica AJAX a p aginas web. Fue presentada el 14 de enero de
2006 en el BarCamp NYC. JQUERY es la biblioteca de JavaScript mas utilizada.
JQUERY 15
JQUERY es software libre y de c odigo abierto, posee un doble licenciamiento
bajo la Licencia MIT y la Licencia P ublica General de GNU v2, permitiendo su uso
en proyectos libres y privativos. JQUERY, al igual que otras bibliotecas, ofrece una
serie de funcionalidades basadas en JavaScript que de otra manera requeriran de
mucho m as c odigo, es decir, con las funciones propias de esta biblioteca se logran
grandes resultados en menos tiempo y espacio.
2.7.1. Caractaersticas
Selecci on de elementos DOM.
Interactividad y modicaciones del arbol DOM, incluyendo soporte para CSS
1-3 y un plugin basico de XPath.
Eventos.
Manipulaci on de la hoja de estilos CSS.
Efectos y animaciones.
Animaciones personalizadas.
AJAX.
Soporta extensiones.
Utilidades varias como obtener informacion del navegador, operar con objetos
y vectores, funciones para rutinas comunes, etc.
Compatible con los navegadores Mozilla Firefox 2.0+, Internet Explorer 6+,
Safari 3+, Opera 10.6+ y Google Chrome 8+.
Captulo 3
Procedimientos y Descripcion de
las Actividades Realizadas
Para llevar a cabo la realizaci on del proyecto Dise no de un portal web
dinamico para una agencia de viajes fue necesario hacer una amplia investi-
gaci on tanto de manera bibliogr aca como de fuentes en internet que se encuentran
relacionadas con el tema. En primer se tuvo una acuerdo con el responsable de la
empresa quien se encargo de comunicar a Grupo SYSI las demandas que el portal
en cuestion debera cubrir. Se recopilo informaci on acerca del tema y las posibles
soluciones que el sistema ofrecera a la agencia de viajes para solucionar la prob-
lem atica, despues de este paso se procedi o a ordenar la informaci on obtenida de
acuerdo a la relaci on con el proyecto, lo siguiente fue crear una serie de actividades
a las cuales se les asigno un tiempo especco el cual dependa del tipo de actividad y
la complejidad de la misma en algunos casos ajenos a la empresa se sufri o un atraso
en la realizacion de algunas actividades pero se logr o superar dicho obst aculo; en
cuanto a los recursos que se utilizaron para la elaboraci on del portal web no se fue
necesario la adquisici on de programas adicionales, se trabajo con software y libreras
utilizado anteriormente por la empresa para proyectos similares. Se requiri o la par-
ticipaci on de m as de una persona en la escritura de codigo y otras actividades para
la culminacion exitosa del proyecto.
En lo que se reere a la capacitacion del personal que trabajo en la creaci on
del portal interactivo, estos ya tenan un conocimiento previo pues Grupo SYSI es
una consultora de tecnologas de la informacion y sus trabajadores se encuentran
capacitados para afrontar este tipo de proyectos.
Cabe mencionar que posterior al desarrollo y puesta en marcha del portal web se
realiz o un curso a modo de capacitaci on para los empleados de la empresa que actu-
aran como administradores del portal ya que este puede resultar ser una tecnologa
medianamente nueva para los empleados porque el manejo de una computadora no
asegura a la empresa que puedan administrar de manera correcta un portal web.
16
Factibilidad Tecnica 17
Se realiz o un estudio a partir de toda la informacion obtenida para llevar a cabo
un estudio de factibilidad el cual nos dio una idea de que tan viable era el desarrollo
del proyecto.
3.1. Factibilidad Tecnica
Esta fue necesaria para determinar si los equipos de hardware y software son
capaces de soportar las tecnologas que se requirieron ya que algunos navegadores
no son capaces de soportar AJAX y JQUERY. Como resultado se obtuvo que en
ciertos equipos no se encontraron los navegadores adecuados y se realizo una actu-
alizaci on de los mismos, ademas de que de manera en la etapa de la programaci on
se coloco mediante un c odigo una advertencia de que el navegador no soportaba
AJAX, este es lanzado a la pantalla cuando la situaci on del navegador lo requiere.
3.2. Factibilidad Operativa
Se reere al desarrollo de la p agina en las condiciones adecuadas y se destaca si
se encuentra alg un impedimento para que no sea un sistema completamente opera-
tivo. No se encontraron impedimentos ya que los problemas presentados se pueden
resolver con el mantenimiento peri odico del sistema.
3.3. Factibilidad economica.
Dentro del desarrollo del proyecto se utilizaron licencias de software vigentes
para el uso de la empresa, adem as de que los lenguajes de programaci on utilizados,
las herramientas y libreras empleadas no requieren la solicitud ni pago de permisos
previos a su uso.
Para culminar esta etapa se presentaron los resultados obtenidos descritos en
cada una de las actividades realizadas.
Captulo 4
Resultados
En este apartado se muestran los resultados obtenidos a traves de imagenes que
explican el estado en que se encontraba el portal web al nalizar el proyecto. Como
parte central de este se encuentran algunos de los apartados o pesta nas contenidas
en la p agina web.
Figura 4.1: P agina de inicio de sesion.
En la Figura 4.1; se observa la pagina de inicio de sesi on para acceder al portal
de administraci on para ver la actividad existente y realizar otras operaciones. Para
el acceso es necesario contar con un nombre de usuario y una contrase na que se
obtienen en un registro previo.
18
19
Figura 4.2: P agina de ofertas de la administracion.
En la Figura 4.2; se muestran las opciones de edici on para la pesta na de ofertas
que como se observa contiene varias secciones que corresponden al servicio ofrecido.
Figura 4.3: Formulario registro cliente nuevo.
En la Figura 4.3; se muestra la opci on AGREGAR que se encuentra dentro de
la p agina clientes, este contiene un formulario de registro para un nuevo cliente este
cliente se puede agregar de manera manual.
En la Figura 4.4; se observan los comentarios que son enviados a los clientes
dependiendo de la operaci on que estos hayan realizado.
20
Figura 4.4: Comentario p agina cliente.
En la Figura 4.5; se visualiza el listado de ventas y los campos que esta pagina
contiene (nombre, Forma de pago, estatus, etc.)
Figura 4.5: P agina de ventas.
En la Figura 4.6; se pueden observar los eventos que son agregados al calendario
de actividades.
21
Figura 4.6: Calendario de actividades.
La Figura 4.7; muestra la parte de calendario se pueden agregar como ofertas y la
duraci on que estas tendran, adem as de que permite agregar recordar recordatorios
para los administradores.
Figura 4.7: Pesta n agregar evento.
22
La Figura 4.8; se muestran los tipos de reportes que se pueden generar y la fecha
en que son generados.
Figura 4.8: P agina reportes.
La p agina principal, home o ndice como tambien se le conoce (ver Figura 4.9);
muestra los apartados del portal web y tambien se observa que el dise no fue pensado
para tratar de ser atractivo y llamar la atencion el cliente.
Figura 4.9: P agina reportes.
En la Figura 4.10; se muestran dos imagenes que son elementos que se encuentran
dentro de la p agina principal y son primordiales para empezar a realizar cualquier
acci on dentro del portal web.
Figura 4.10: Elementos dentro de la pagina principal.
23
En la imagen de la izquierda se observa un men u desplegable que muestra las
opciones de idioma para comodidad del usuario ya que el proyecto no solo involucra
mercado nacional sino que tambien oferta este servicio a otros pases como se puede
apreciar, mientras tanto la imagen derecha ayuda a la selecci on del tipo de moneda
que el cliente requiera para que este se de una idea real de lo que podra llegar a
pagar en caso de adquirir alguno de los paquetes. (vea la Figura 4.10)
El apartado Descubre muestra un mapa del estado de Chiapas (ver Figura
4.11), en el cual se encuentran una serie de opciones como sugerencia de lugares a
visitar, estas opciones muestran un globo con informacion acerca de la localizaci on
del sitio sugerido. La integraci on de este mapa a la p agina web se logr o utilizando
plugins que Google Maps proporciona de manera gratuita para la realizacion de este
tipo de proyectos y similares.
Figura 4.11: Mapa del apartado Descubre.
Figura 4.12: Banners.
24
El apartado de Banners muestra ofertas al azar (ver Figura 4.12). Cabe men-
cionar que estas son destacadas ya sea por la preferencia de los usuarios as como
por el precio de las mismas el cual las coloca en el estatus de ofertas.
La p agina de contacto (ver Figura 4.13); muestra un peque no formulario que sirve
para establecer contacto con los administradores del portal, as como la ubicaci on de
las ocinas de la agencia de viajes adem as de los vnculos para acceder a sus redes
sociales.
Figura 4.13: P agina de contacto.
La parte que se reere a promociones (ver Figura 4.14); muestra los paque-
tes promocionales que la empresa ofrece, es necesario mencionar que no se deben
confundir las promociones con ofertas ya que las promociones incluyen mas de una
persona por paquete mientras que las ofertas son solo paquetes individuales es decir
una sola persona.
Figura 4.14: Venta de promosiones.
Programas Utilizados Durante la Realizaci on del Proyecto 25
4.1. Programas Utilizados Durante la Realizacion
del Proyecto
La Figura 4.15; muestra la p agina de Axure, este programa sirvi o como IDE de
desarrollo para la escritura de c odigo del portal web, se utiliz o dicho programa porque
adem as de contar con las licencias necesarias para su uso es una gran herramienta
que permite tener un muy buen dise no de los portales que aqu se desarrollan.
Figura 4.15: Ventana principal de Axure.
Figura 4.16: Panel de control de XAMPP.
Programas Utilizados Durante la Realizaci on del Proyecto 26
Figura 4.17: Ventana ndex de XAMPP mostrada en el navegador.
XAMPP es un servidor independiente de plataforma, software libre, que consiste
principalmente en la base de datos MYSQL. Este programa ayudo a realizar las
pruebas, ya que permite montar un servidor local adem as de trabajar muy acorde
con MYSQL y PHP lo que permiti o que el enlace entre las p aginas y las bases de
datos utilizadas se simplicara.
Captulo 5
Conclusiones y Recomendaciones
5.1. Conclusiones
Hoy en da todas las agencias de viajes cuentan con conexi on a internet lo cual es
de suma importancia para brindar un mejor y novedoso servicio, lamentablemente
son muy pocas agencias de viajes las que reciben la capacitaci on para darse cuenta
de todas las opciones que el internet brinda y explotar al maximo su potencial;
cabe mencionar que la contratacion de empresas externas para realizar el dise no y
actualizaci on de p aginas web es lo m as popular entre las agencias, aunque la mayora
de las personas compran o adquieren paquetes por internet por el solo hecho de la
comodidad y la economa que este medio brinda otro grupo de personas lo realiza
por que es m as novedoso, es de moda o porque tienen mucho tiempo para navegar,
entre otras. Muchas agencias no cuentan con p aginas web lo cual les traera muchos
benecios y aumentara la preferencia de sus clientes.
5.2. Recomendaciones
1. Explotar al maximo todos los servicios que Internet puede ofrecer.
2. Realizar mantenimientos periodicos al portal a n de depurar la informaci on
no necesaria.
3. Actualizar constantemene la informaci on del portal.
27
Bibliografa
[1] Fowley Martin, Scott Kendall. UML Gota a gota. 1ra. Edicion.
Editorial Pearson: 1999.
[2] Oros, Juan Carlos. Gua pr actica de XHTML.JAVA SCRIPT Y CSS.
1ra. Edicion. Editorial Alfaomega: 2012.
[3] Firtman, Maximiliano. AJAX Web 2.0 JQUERY para Profesionales.
2da. Edicion. Editorial Alfaomega.
[4] Negrino, Tom. Java Script. 5ta. Edicion. Editorial Prentice Hall: 2005.
[5] Hobbs, Lilian. Dise nar su propia Web. 2da. Edicion.
Editorial Marcombo: 1999.
[6] http://www.ecured.cu/index.php/lenguajedeprogramacionweb.
[7] http://www.cristalab.com/tutoriales/ajax-en-jquery-c226l/
[8] http://www.asp.net/ajax
28
Anexos
Apendice I
Mapa de sitio que muestra el home o ndex a manera de bosquejo,
aqu tambien se observan los apartados que se encuentran en el sitio web.
29
30
Apendice II
Estos son algunos de los diagramas utilizados creados para la etapa de analisis
de requerimientos dichos diagramas fueron hechos tomando en cuenta las especi-
caciones que indica el lenguaje UML.
Diagrama de la p agina ofertas.
31
Este diagrama hace referencia a una p agina contenida dentro del portal de ad-
ministraci on.
Diagrama de la p agina proveedores.
32
Diagrama de la p agina de ventas.
33
El diagrama calendario es una descripci on de las actividades que se realizan en
esta parte del portal.
Diagrama del apartado calendario.
34
Esta p agina muestra mediante un diagrama de ujo la secci on de reportes uti-
lizada en la administraci on del portal, que como lo indica sirve para realizar los
reportes de toda la actividad llevada a cabo en la pagina.
Diagrama de la p agina reportes.
35
Esta pesta na del portal de administraci on es la que sirve para accesar al control
de clientes, dar de alta, eliminar y editar datos.
Diagrama del apartado acceso a control de clientes.
36
Diagrama de Caso de Uso
Diagrama de casos de uso de todo el sistema.
Diagrama DE E-R del portal.