instituto tecnolÓgico superior “cordillera” carrera de

234
INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE SISTEMAS LA GESTIÓN TURÍSTICA Y LA TECNOLOGÍA QR, SOFTWARE DE INFORMACIÓN TURÍSTICA CON RECONOCIMIENTO DE CÓDIGOS QR PARA EL CENTRO HISTÓRICO DE QUITO Proyecto de Trabajo de Graduación que se presenta como requisito para optar por el título de Tecnólogo Analista en Sistemas Autor: FUELTALA Pillajo, Carlos Rafael Director de Trabajo de Graduación: Ing. William Cueva Quito, Noviembre del 2012 CARÁTULA

Upload: others

Post on 25-Apr-2022

23 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA”

CARRERA DE SISTEMAS

LA GESTIÓN TURÍSTICA Y LA TECNOLOGÍA QR, SOFTWARE DE INFORMACIÓN TURÍSTICA CON

RECONOCIMIENTO DE CÓDIGOS QR PARA EL CENTRO HISTÓRICO DE QUITO

Proyecto de Trabajo de Graduación que se presenta como requisito para optar por el título de Tecnólogo Analista en Sistemas

Autor: FUELTALA Pillajo, Carlos Rafael

Director de Trabajo de Graduación: Ing. William Cueva

Quito, Noviembre del 2012

CARÁTULA

Page 2: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

ii

DECLARACIÓN DE AUTENTICIDAD

Declaro que los contenidos y los resultados obtenidos en el presente proyecto,

como requerimiento previo para la obtención del Título de Tecnólogo Analista de

Sistemas, son absolutamente originales, auténticos y personales y de exclusiva

responsabilidad legal y académica del autor.

Fueltala Pillajo Carlos Rafael

171791563-9

Page 3: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

iii

AGRADECIMIENTO

A Dios y mi familia por haberme apoyado en todo y

nunca desampararme, por sus consejos, sus valores,

y por la motivación constante que me han entregado

y por su ayuda para ser una persona de bien. A

todos mis amigos y maestros por su constancia

que los caracterizaban, por el apoyo que

mutuamente nos brindamos en nuestra formación

profesional y por todo el valor mostrado para salir

adelante.

Muchas Gracias

Page 4: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

iv

DEDICATORIA

A mi padre, quien permanentemente me apoyo

incondicionalmente con su espíritu alentador,

contribuyendo a lograr mis metas y objetivos

propuestos y que al brindarme con su ejemplo a ser

perseverante y darme la fuerza que me impulsó a

conseguirlo.

A mi madre y hermanos que me acompañaron a lo

largo del camino, brindándome la fuerza necesaria

para continuar y momentos de ánimo, ayudándome

en lo que fuera posible, dándome consejos y

orientación.

Rafael Fueltala

Page 5: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

v

CERTIFICADO DE CONSEJO Y DIRECCIÓN DE CARRERA

Page 6: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

vi

APROBACIÓN DEL TRIBUNAL DE TRABAJO DE GRADUACIÓN

Page 7: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

vii

CERTIFICADO DE ACEPTACIÓN DEL DIRECTOR DEL TRABAJO DE GRADUACIÓN

Page 8: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

viii

ÍNDICE GENERAL

Pág. CARÁTULA ........................................................................................................................ i

DECLARACIÓN DE AUTENTICIDAD ........................................................................... ii

AGRADECIMIENTO ....................................................................................................... iii

DEDICATORIA .................................................................................................................iv

CERTIFICADO DE CONSEJO Y DIRECCIÓN DE CARRERA ..................................... v

APROBACIÓN DEL TRIBUNAL DE TRABAJO DE GRADUACIÓN .........................vi

CERTIFICADO DE ACEPTACIÓN DEL DIRECTOR DEL TRABAJO DE GRADUACIÓN ................................................................................................................. vii

ÍNDICE GENERAL ......................................................................................................... viii

ÍNDICE DE CUADROS ..................................................................................................... xi

ÍNDICE DE GRÁFICOS .................................................................................................. xiii

RESUMEN ....................................................................................................................... xvi

INTRODUCCIÓN .............................................................................................................. 1

CAPÍTULO I .................................................................................................................... 3

EL PROBLEMA ................................................................................................................ 3

1.1. PLANTEAMIENTO DEL PROBLEMA. .......................................................... 3

1.2. FORMULACIÓN DEL PROBLEMA. .............................................................. 5

1.3. OBJETIVOS. ...................................................................................................... 6

1.4. JUSTIFICACIÓN E IMPORTANCIA. .............................................................. 6

CAPÍTULO II ..................................................................................................................... 8

MARCO TEÓRICO ............................................................................................................ 8

2.1 ANTECEDENTE DE LA INVESTIGACIÓN. .................................................. 8

2.2 FUNDAMENTACIÓN TEÓRICA. ................................................................... 9

2.3 FUNDAMENTACIÓN LEGAL. ...................................................................... 15

2.4 GLOSARIO DE TÉRMINOS. ......................................................................... 17

2.5 CARACTERIZACIÓN DE LAS VARIABLES. ............................................. 18

2.6 PREGUNTAS DIRECTRICES DE LA INVESTIGACIÓN............................ 18

CAPÍTULO III .................................................................................................................. 19

METODOLOGÍA DE LA INVESTIGACIÓN ................................................................ 19

3.1 TIPOS DE INVESTIGACIÓN. ........................................................................ 19

Page 9: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

ix

3.2 MÉTODOS Y TÉCNICAS DE INVESTIGACIÓN. ....................................... 20

3.3 POBLACIÓN Y MUESTRA. ........................................................................... 21

3.4 OPERACIONALIZACIÓN DE LAS VARIABLES. ....................................... 23

3.5 TÉCNICAS E INSTRUMENTOS DE RECOLECCIÓN DE DATOS. ........... 23

CAPÍTULO IV.................................................................................................................. 26

ANÁLISIS E INTERPRETACIÓN DE RESULTADOS ................................................. 26

4.1 RECOLECCIÓN Y PROCESAMIENTO DEL TRABAJO DE CAMPO. ..... 26

4.2 RESPUESTAS A LAS INTERROGANTES DE LA INVESTIGACIÓN. ...... 33

CAPÍTULO V ................................................................................................................... 35

CONCLUSIONES Y RECOMENDACIONES ................................................................ 35

5.1 CONCLUSIONES Y RECOMENDACIONES. .............................................. 35

CAPÍTULO VI.................................................................................................................. 37

LA PROPUESTA ............................................................................................................. 37

6.1 ALCANCES Y DELIMITACIONES. .............................................................. 37

6.2. ESTRUCTURA ORGANIZACIONAL. .......................................................... 38

6.3. INFRAESTRUCTURA INFORMÁTICA........................................................ 39

6.4. DESCRIPCIÓN DE ALTERNATIVAS. .......................................................... 41

6.5. EVALUACIÓN Y SELECCIÓN DE ALTERNATIVAS. ............................... 48

6.6. FACTIBILIDAD TÉCNICA. ........................................................................... 52

6.7. DESCRIPCIÓN DE PROCESOS. .................................................................... 52

6.8 DESCRIPCIÓN DE METODOLOGÍA DE DESARROLLO RUP. .............. 55

6.9 MODELO CONCEPTUAL. ............................................................................. 59

6.10 MODELO FÍSICO. ........................................................................................... 59

6.11 DICCIONARIO DE DATOS. .......................................................................... 59

6.12 ESTÁNDARES. ............................................................................................... 60

6.13 PANTALLAS Y REPORTES. ......................................................................... 65

6.14 PRUEBAS Y DEPURACIÓN. ......................................................................... 71

6.15 INSTALACIÓN DEL SISTEMA. .................................................................... 74

6.16 RECOPILACIÓN Y CARGA DE DATOS. ..................................................... 83

6.17 PRUEBAS Y DEPURACIÓN FINAL EN FUNCIONAMIENTO. ................. 84

6.18 PUESTA EN MARCHA DEL SISTEMA. ....................................................... 84

6.19 CAPACITACIÓN AL USUARIO TÉCNICO. ................................................ 85

6.20 CAPACITACIÓN AL USUARIO FINAL. ...................................................... 86

6.21 CONCLUSIÓN. ................................................................................................ 88

Page 10: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

x

6.22 RECOMENDACIÓN. ...................................................................................... 88

6.23. ASPECTOS ADMINISTRATIVOS. ................................................................ 89

6.24 BIBLIOGRAFÍA .............................................................................................. 89

ANEXOS .......................................................................................................................... 91

Page 11: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

xi

ÍNDICE DE CUADROS

Pág.

CUADRO N° 1

Título: Causas y Consecuencias .............................................................................. 5

CUADRO N° 2

Titulo: Tabla de Caracterización de Variables ...................................................... 18

CUADRO N° 3

Título: Operacionalización de las variables .......................................................... 23

CUADRO N° 4

Título: Ficha de Observación ................................................................................ 24

CUADRO N° 5

Título: Hardware ................................................................................................... 39

CUADRO N° 6

Título: Software .................................................................................................... 40

CUADRO N° 7

Título: Equipo de Comunicación .......................................................................... 40

CUADRO N° 8

Título: Recurso humano ........................................................................................ 41

CUADRO N° 9

Título: Alternativa 1, Cyberia Projects ................................................................. 43

CUADRO N° 10

Título: Alternativa 2: Global Sistemas .................................................................. 45

CUADRO N° 11

Título: Alternativa 3, Propuesta de tema de Grado ............................................... 48

CUADRO N° 12

Título: Evaluacion de alternativas ......................................................................... 50

CUADRO N° 13

Título: Tabla de costos .......................................................................................... 50

CUADRO N° 14

Título: Tabla de garantías...................................................................................... 51

Page 12: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

xii

Pág.

CUADRO N° 15

Título: Tabla de soporte técnico ............................................................................ 51

CUADRO N° 16

Título: Estándares de Tablas ................................................................................. 61

CUADRO N° 17

Título: Estándares de campos ............................................................................... 61

CUADRO N° 18

Título: Estándares de Relaciones .......................................................................... 62

CUADRO N° 19

Título: Estándares de Claves ................................................................................. 62

CUADRO N° 20

Título: Estándares de Clases ................................................................................. 63

CUADRO N° 21

Título: Estándares de Funciones y Procedimientos .............................................. 63

CUADRO N° 22

Título: Estándares de Variables ............................................................................ 63

CUADRO N° 23

Título: Tipos de datos ........................................................................................... 64

CUADRO N° 24

Título: Estándares de Controles Visuales Html ................................................... 64

CUADRO N° 25

Título: Capacitación al usuario técnico. ................................................................ 86

CUADRO N° 26

Título: Capacitación al usuario técnico. ................................................................ 87

Page 13: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

xiii

ÍNDICE DE GRÁFICOS

Pág.

GRÁFICO N° 1

Título: Pregunta 1 de la Encuesta.......................................................................... 26

GRÁFICO N° 2

Título: Pregunta 2 de la Encuesta.......................................................................... 27

GRÁFICO N° 3

Título: Pregunta 3 de la Encuesta.......................................................................... 27

GRÁFICO N° 4

Título: Pregunta 4 de la Encuesta.......................................................................... 28

GRÁFICO N° 5

Título: Pregunta 5 de la Encuesta.......................................................................... 29

GRÁFICO N° 6

Título: Pregunta 6 de la Encuesta.......................................................................... 30

GRÁFICO N° 7

Título: Pregunta 7 de la Encuesta.......................................................................... 30

GRÁFICO N° 8

Título: Pregunta 8 de la Encuesta.......................................................................... 31

GRÁFICO N° 9

Título: Pregunta 9 de la Encuesta.......................................................................... 31

GRÁFICO N° 10

Título: Pregunta 10 de la Encuesta........................................................................ 32

GRÁFICO N° 11

Título: Posible Organigrama Estructural .............................................................. 39

GRÁFICO N° 12

Título: Ingreso al sistema ...................................................................................... 53

GRÁFICO N° 13

Título: Mantenimiento de tablas ........................................................................... 53

GRÁFICO N° 14

Título: Mantenimiento de tablas ........................................................................... 54

Page 14: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

xiv

Pág.

GRÁFICO N° 15

Título: Pantalla de Login ....................................................................................... 65

GRÁFICO N° 16

Título: Pantalla de Login manual (izq), Login QR (der) ...................................... 66

GRÁFICO N° 17

Título: Pantalla de Inicio del sistema .................................................................... 66

GRÁFICO N° 18

Título: Nombre de usuario y notificaciones .......................................................... 67

GRÁFICO N° 19

Título: Administración de usuarios ....................................................................... 67

GRÁFICO N° 20

Título: Registro de usuarios .................................................................................. 68

GRÁFICO N° 21

Título: Modificación de usuario ............................................................................ 68

GRÁFICO N° 22

Título: Validación del campo de texto Apellido ................................................... 69

GRÁFICO N° 23

Título: Paginación simple ..................................................................................... 69

GRÁFICO N° 24

Título: Mapa con varios markers .......................................................................... 70

GRÁFICO N° 25

Título: Código QR de un sitio importante y QR Card de usuario ......................... 71

GRÁFICO N° 26

Título: Instalar WampServer como administrador ................................................ 75

GRÁFICO N° 27

Título: Pantalla de inicio de WampServer ............................................................ 75

GRÁFICO N° 28

Título: Acuerdo de licencia WampServer ............................................................. 76

GRÁFICO N° 29

Título: Directorio de trabajo de WampServer ....................................................... 76

Page 15: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

xv

Pág.

GRÁFICO N° 30

Título: Accesos directos de WampServer ............................................................. 77

GRÁFICO N° 31

Título: Directorio de trabajo de WampServer ....................................................... 77

GRÁFICO N° 32

Título: Instalando WampServer ............................................................................ 78

GRÁFICO N° 33

Título: Escogiendo un navegador web para WampServer .................................... 78

GRÁFICO N° 34

Título: Finalización de la estación de WampServer ............................................. 79

GRÁFICO N° 35

Título: Ícono de WampServer ............................................................................... 79

GRÁFICO N° 36

Título: Elegir lenguaje de WampServer ................................................................ 80

GRÁFICO N° 37

Título: Menú de WampServer ............................................................................... 80

GRÁFICO N° 38

Título: Crear base de datos en phpMyAdmin ....................................................... 81

GRÁFICO N° 39

Título: Tablas de la base de datos en phpMyAdmin ............................................. 82

GRÁFICO N° 40

Título: Menú de ajustes de Android ...................................................................... 83

Page 16: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

xvi

INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA”

CARRERA DE SISTEMAS

LA GESTIÓN TURÍSTICA Y TECNOLOGÍA QR, SOFTWARE DE INFORMACIÓN TURÍSTICA CON RECONOCIMIENTO DE CÓDIGOS

QR PARA EL CENTRO HISTÓRICO DE QUITO

Autor: Fueltala Pillajo Carlos Rafael

Director del Trabajo de Graduación: Ing. William Cueva

RESUMEN

La tecnología móvil en todas sus manifestaciones se ha incorporado

rápidamente a la rutina diaria de los usuarios, y ha comenzado a volverse

imprescindible en el ámbito laboral y por supuesto el rubro “ocio y turismo”

no podía quedarse afuera. Una de las estrategias para promover y posicionar

a un lugar turístico con una imagen positiva es implementando una campaña

informativa la cual exponga los recursos que este tiene para ofrecer, para lo

cual se aprovechará la tecnología móvil (SmartPhones), la Geolocalización de

Google Maps y el acceso rápido a la información mediante Códigos QR.

Llevando a cabo esta estrategia para cada lugar importante del Centro

Histórico de Quito se logrará un desarrollo económico, permitiendo generar

altos índices de turismo. Con las tecnologías anteriormente mencionadas se

conseguirá que el Centro Histórico de Quito, y sus respectivos atractivos, se

de a conocer y se posicione como uno de los principales destinos turísticos,

aunque en el país algunas de estas tecnologías no estén todavía muy

extendidas.

Page 17: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

1

INTRODUCCIÓN

La presente investigación en torno a la tecnología de los Códigos QR se centra

fundamentalmente en dos aspectos: por una parte la codificación y conversión de

una dirección URL (link) dentro de una imagen y por otra parte, el escaneo,

detección y decodificación de esa imagen hasta la obtención de una dirección

URL (link).

Se procederá a la recopilación y análisis de la literatura científica con el fin de

poder ahondar en el conocimiento así como usar los diferentes apartados que

traten sobre la correcta decodificación de códigos QR, además de la tecnología de

Google Maps y con esto realizar una Geolocalización de cada uno de los lugares

importantes Centro Histórico de Quito.

Se analizará la documentación y definición de las estrategias y protocolos de

actuación. (Métodos, sistemas y software a utilizar en cada caso de estudio y para

cada Código QR) hasta conseguir una correcta integración y aplicación del

conocimiento adquirido para así desarrollar el sistema.

Este proyecto se centra en el análisis de patrones y matrices de datos así como un

proceso largo de encriptación para crear un Código QR. La idea general del

proceso de funcionamiento consistirá en ubicar una imagen impresa de un Código

QR en un lugar visible de una Iglesia del Centro Histórico de Quito, luego la

imagen será escaneada por una aplicación previamente instalada en un

Smartphone, finalmente se mostrara en la pantalla un micro portal web con

información turística relevante de esa Iglesia y sus alrededores, Además de indicar

la Geolocalización de la misma. Dentro de cada uno de los capítulos se expondrán

temas de suma relevancia para la obtención de resultados satisfactorios que

ayudarán a aclarecer dudas y así llegar a conclusiones que permitirán la creación

de un sistema turístico fiable que cumpla con la mayoría de las expectativas de la

comunidad turística.

Page 18: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

2

A continuación se dará a conocer de manera simplificada la estructura general de

los capítulos que contiene el proyecto.

� CAPÍTULO I

Trata sobre la situación actual del problema en el Centro Histórico de Quito,

las causas que originaron la problemática así como sus consecuencias. En este

capítulo se abordará y definirán los objetivos generales y específicos, además

de la justificación e importancia de la investigación que gira entorno a la

Gestión Turística.

� CAPÍTULO II

Abarca toda la información conceptual, básica y de vital importancia para el

análisis del sector turístico del Centro Histórico de Quito y las diferentes

variables que intervienen en la investigación.

� CAPÍTULO III

Describe la importancia de conocer los diferentes métodos de investigación y

herramientas de recolección de información utilizando una población y una

muestra de las diferentes personas que intervienen en el problema.

� CAPÍTULO IV

Se emplea un mecanismo para el procesamiento y tabulación de la

información, esta información fue recolectada utilizando una herramienta de

recolección de información llamada encuesta, que por medio de cuadros y

gráficos estadísticos poder representar los resultados de la investigación.

� CAPÍTULO V

Aborda las recomendaciones y conclusiones a las que se ha llegado luego de

la recolección, procesamiento, tabulación y análisis de la investigación, se

comprobará que se cumplan los objetivos de la investigación así como del

marco teórico.

� CAPÍTULO VI

Esta enfocado hacia el alcance y limitaciones del proyecto planteando

alternativas convenientes para la Gestión Turística y un correcto

aprovechamiento de la Tecnología QR. Se describe los principales procesos, la

metodología de diseño de software aplicada, las pruebas, la carga de datos

reales, instalación y puesta en marcha del sistema.

Page 19: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

3

CAPÍTULO I

EL PROBLEMA

1.1. PLANTEAMIENTO DEL PROBLEMA.

En la ciudad de San Francisco de Quito, capital de la República del

Ecuador y también de la provincia de Pichincha, se encuentra el Centro

Histórico de Quito el cual tiene la misión de recibir gran afluencia de

turismo específicamente y en mayor número en las diferentes Iglesias

históricas, museos, plazas, hoteles, etc donde en cada uno la generación y

reconversión de nuevos productos turísticos, adecuación de la

infraestructura, capacitación e información entre otras son de vital

importancia.

El turismo es una herramienta muy importante para el desarrollo

económico de las ciudades. Lo cual ha generado que en la actualidad estas

enfrenten una gran competencia por atraer al mayor número de turistas.

Entonces la problemática se origina por el desconocimiento y falta de

puntos de información turística y por otra parte el acceso y el exceso de

información entregada, ¿demasiada información da como resultado la

desinformación?

Al mismo tiempo también existe un desaprovechamiento de los recursos

tecnológicos que posee gran parte del sector turístico, el cual se ve en la

necesidad de usar un dispositivo móvil en busca de información específica

y de suma importancia como es la historia de las Iglesias, su ubicación

cartográfica, los horarios y lugares aledaños para hospedarse o

alimentarse. Todo esto In Situ y dependientemente del atractivo donde se

encuentre el turista.

Page 20: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

4

También existen los sitios virtuales que mantienen las empresas de

turismo, los cuales no están optimizados ni adaptados para la tecnología

móvil así como lo son los teléfonos inteligentes o Smartphone, además

estas empresas desconocen la aplicación de la Tecnología QR como

promotores del sector turístico actual o también llamado Turismo 2.0

El problema aparece debido al auge turístico y tecnológico que se respira a

diario en toda la ciudad de Quito, enfocándose en el centro histórico para

ser más precisos y a la constante necesidad de aprovechar la información y

tecnología disponible, donde la problemática fundamental es la falta de

guías o información turística relevante o cercana a un lugar histórico-

turístico.

La información que a veces esta disponible no puede ser encontrada

fácilmente lo cual deja como consecuencia una mala imagen o una idea

falsa de retraso tecnológico y la mala experiencia que se llevaría cada

turista que visita el Centro Histórico de Quito, el cual muy ansiosamente

desea conocer y aprender de la cultura que se respira en la misma, así

como sus lugares histórico-turísticos más relevantes como son sus Iglesias

tradicionales.

Esta problemática no debe ser un obstáculo definitivo pero resulta lógico

que debe ser enfrentada con decisión. Las soluciones no son o no deberían

ser responsabilidad solamente de las autoridades y los organismos

encargados de promocionar el sector turístico, sino de diferentes grupos

humanos que de una u otra manera tienen que ver directamente con esta

importante actividad.

En el país el 76,3% de personas posee telefonía celular y el 46,6% una

línea activa, de este porcentaje el 8,4% corresponde a SmartPhones, lo que

se traduce en alrededor de 563 mil personas, de acuerdo a los últimos datos

registrados por el INEC durante el 2011. Estas cifras confirman que la

brecha digital se acortará más pronto a través del Internet móvil que desde

una computadora de escritorio.

Page 21: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

5

Según un estudio realizado por ecuadorencifras.com, una web

perteneciente al INEC, en lo que respecta a los sitios web que mantienen

varias empresas turísticas, solo un 1% cuenta con un micrositio optimizado

para dispositivos móviles y ninguna empresa utiliza la tecnología

propuesta en este trabajo como es la Tecnología QR que permitirán

acceder al contenido de una forma rápida e In Situ.

Causas y Consecuencias del problema

Causa Consecuencia Falta de información turística relevante en cada atractivo del Centro Histórico de Quito.

Se genera un desconocimiento o poco interés hacia el lugar por parte de la comunidad turística.

No disponer de una web virtual móvil optimizada para usuarios de tecnología móvil o Smartphone.

Prácticamente ocasiona un descontento ya que cada turista tiene siempre a mano un dispositivo móvil.

Desconocimiento del uso, aplicación y utilidad de la Tecnología QR en el sector turístico.

La empresa así como el turista están desaprovechando una tecnología que proporciona un rápido acceso a la información.

Falta de información sobre sitios relevantes como Hoteles y Restaurants.

Provoca un disgusto ya que son lugares de vital importancia para todos y cada uno de los turistas que visitan la ciudad de Quito.

Información turística extensa y poco filtrada

Genera un aire de poca retención y desinterés al no ver información clara y concisa.

CUADRO N° 1

Título: Causas y Consecuencias

Fuente: Rafael Fueltala

1.2. FORMULACIÓN DEL PROBLEMA.

¿Cómo la tecnología QR mejorará la Gestión Turística en el Centro

Histórico de Quito?

Page 22: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

6

1.3. OBJETIVOS.

1.3.1. Objetivo General.

Identificar los sectores turísticos para el despliegue de información eficaz

usando Tecnología QR para el Centro Histórico de Quito.

1.3.2. Objetivos Específicos.

Relacionar la Tecnología QR con el sector turístico.

Identificar los lugares con más afluencia de turistas.

Proporcionar una guía o punto de información permanente.

Analizar los recursos disponibles para el levantamiento e implementación

del sistema.

Desarrollar e Implementar la Gestión turística y tecnología QR, software

de información turística con reconocimiento de Códigos QR para el Centro

Histórico de Quito.

1.4. JUSTIFICACIÓN E IMPORTANCIA.

Los Códigos QR al ser una estrategia innovadora en el Marketing de

proximidad aportarán herramientas de captación y fidelización de clientes

para el sector turístico, mediante una inserción de códigos en folletos

publicitarios, anuncios de prensa, paneles, como complemento a la

información tradicional; la divulgación de información turística a través de

guías turísticas (los códigos QR dan más información sobre los lugares

más importantes visitados de las ciudades) y en los monumentos u obras

de arte en museos o exposiciones (aquí la información adicional enriquece

la visita del usuario al poder elegir lo que le interesa) y el comercio

electrónico/control de accesos (gracias a los códigos QR se obtiene un

comercio electrónico fácil, cómodo y seguro, los accesos a hoteles,

aeropuertos, museos, cines, parques atracciones, etc. se pueden realizar de

forma rápida y segura). Las condiciones de estabilidad política, social y

macroeconómica representan un contexto favorable para el desarrollo de

esta actividad, pero no bastan por sí solas. Para ello, es necesaria la

Page 23: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

7

configuración de una institucionalidad turística acorde a los nuevos

desafíos que el país enfrenta en este ámbito, constituyendo un imperativo

para avanzar y consolidar el proceso de desarrollo que hoy se observa en

numerosos destinos nacionales. Al usar códigos QR y tecnología móvil se

abrirá un campo de enormes posibilidades para nutrir el turismo, con

recursos dinámicos, interactivos y creativos. Aquí la información se

convierte en interactiva y digital, fomentando la creatividad en la

información. La posibilidad de transmitir contenidos digitales de manera

contextual a la información textual de tipo tradicional es particularmente

relevante no solo por su valor cultural agregado, sino por el hecho que, así

como lo demuestran numerosas investigaciones, el código QR mejora, de

tantas maneras, el rendimiento en el aprendizaje. Luego de analizar las

ventajas que tendría el sistema informático de Gestión Turística y sistema

de Reconocimiento de Códigos QR, y hacer una proyección estimada se

calcula que el tiempo otorgado para la realización del mismo, y gracias a

un exhaustivo esfuerzo de investigación y desarrollo del aplicativo así

como el respectivo análisis usando la metodología RUP se determinó que

el tiempo es más que suficiente para la culminación, implantación y fase

de pruebas que requerirá el mismo.

El sistema facilita el acceso de los turistas a una ruta de forma totalmente

autónoma y permite además conocer el centro histórico de Quito cuando el

turista lo desee. Una ventaja es que el usuario no tiene que depender de los

horarios de los puntos de información turísticos. El uso de Tecnología QR

para acciones de publicidad y entrega de información web móvil supone,

un alto grado de innovación capaz de diferenciarse de la competencia.

Ofrece al turista la posibilidad de escanear un Código QR y así obtener

información: hotelera, gastronómica y social, haciendo crecer la imagen

del Centro histórico de Quito.

El uso de tecnología QR junto a una web informativa móvil reducirán el

manejo descuidado de folletos, mapas, flyers o demás publicidad en papel,

lo cual será un gran aporte al medio ambiente.

Page 24: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

8

CAPÍTULO II

MARCO TEÓRICO

2.1 ANTECEDENTE DE LA INVESTIGACIÓN.

2.1.1 APLICACIONES DE LA TECNOLOGÍA QR.

Información en mapas turísticos

Aplicación de Códigos QR en el turismo para obtener información adicional

sobre puntos de interés turístico como playas, edificios culturales, etc.

En paneles informativos con puntos de interés cultural o paisajístico

Con el teléfono Smartphone se procede a escanear el código QR ubicado en un

panel o valla informativa, luego se abre un navegador web donde se amplia la

información y se accede a contenido multimedia o aplicando una combinación de

objetos reales y objetos generados por computador, esta tecnología es llamada

Realidad Aumentada.

Boleto o ticket de avión

La información del boleto de avión se puede almacenar en un código QR e

imprimirlo dentro del boleto y mediante un lector QR comprobar los datos y

usarlo como tarjeta de embarque agilizando el proceso y aumentando la

fiabilidad.

Códigos QR en el marketing

Debido al gran alcance de los códigos QR, no podía faltar la aplicación en

el campo de Marketing como lo hizo el bar americano Guiness.

“La empresa Guinness ha puesto creatividad al asunto y ha ideado un nuevo lugar donde colocar un código QR, ellos los han colocado en los vasos de pintas que usan en los bares, el cual permite publicar un tweet, el status en Facebook o incluso invitar a los amigos al bar….” - http://blog.qrdreams.com/tag/ejemplos-codigos-qr/

Page 25: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

9

Juegos / Entretenimiento.

Los códigos QR se pueden utilizar para captar la atención de las personas,

permitiendo a los mismos descargar juegos o contenido multimedia mientras se

viaja en el transporte público o en zonas de espera.

En la salud

Poco a poco el conocimiento y aplicaciones de los códigos QR van ganando terreno, ahora se los puede usar hasta en los aspectos más importantes de la vida cotidiana de las personas como es el sector Salud como se lee en la siguiente cita:

“…la otra utilidad consiste en tatuarse en un sitio visible el código con datos sanitarios de vital importancia como puede ser de alergias, diabetes u otra información que pueda resultar vital si en algún momento ingresamos en un hospital y no estamos conscientes para informar de dichos problemas.” - http://ciberwalker.wordpress.com/category/codigos-qr/

Folletos y catálogos

Usar códigos QR en folletos, panfletos o catálogos ayuda a los usuarios a ampliar

su información accediendo a la web del autor o accediendo a contenidos extra

como una visita virtual, vídeos o compras electrónicas.

Tarjeta de fidelización:

Una de las evoluciones de la tarjeta de visita o de presentación son las llamadas

VCARD, donde dentro de un código QR se guarda gran cantidad de información

sobre el cliente y sobre un establecimiento.

Vallas publicitarias o posters y medios escritos:

Donde el cliente mediante el código QR puede acceder a información extra,

códigos promocionales o sorteos.

2.2 FUNDAMENTACIÓN TEÓRICA.

2.2.1 TECNOLOGÍA QR

La evolución de la tecnología móvil ha servido para poner en manos de

marcas y consumidores nuevos sistemas de almacenamiento de datos

como lo son los conocidos y populares Códigos QR.

Page 26: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

10

Estos códigos bidimensionales se han convertido en una nueva

herramienta de marketing y publicidad ya que gracias a la facilidad de

creación y capacidad de ser leídos desde los dispositivos y teléfonos

móviles inteligentes, permiten disponer de un acceso a la información

almacenada de forma rápida con su simple lectura.

Su uso aplicado se ha ido viendo ampliado con toques de ingenio e

innovación, pudiendo encontrar este tipo de códigos no sólo en productos

o espacios reservados, sino presente en múltiples soportes insospechados y

lugares accesibles por los consumidores.

Código QR

Un código QR (código de barras de respuesta rápida) es un sistema para

almacenar información en una matriz de puntos o un código de barras

bidimensional creado por la compañía japonesa Denso Wave, subsidiaria

de Toyota, en 1994. Se caracteriza por los tres cuadrados que se

encuentran en las esquinas y que permiten detectar la posición del código

al lector. La sigla “QR” se deriva de la frase inglesa Quick Response

(Respuesta Rápida en español)

Historia de los Códigos QR

Aunque inicialmente se usó para registrar repuestos en el área de la

fabricación de vehículos, hoy los códigos QR se usan

para administración de inventarios en una gran variedad de industrias.

Recientemente la inclusión de software que lee códigos QR en teléfonos

móviles japoneses ha permitido nuevos usos orientados al consumidor,

esto se manifiesta en comodidades como el dejar de tener que introducir

datos de forma manual en los teléfonos. Las direcciones URLS (links) se

están volviendo cada vez más comunes en revistas y anuncios japoneses.

El agregado de códigos QR en tarjetas de presentación también se está

haciendo común, simplificando en gran medida la tarea de introducir

detalles individuales de un nuevo cliente en la agenda de un teléfono

móvil. Los consumidores que cuenten con dispositivos y programas de

Page 27: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

11

captura pueden usar un escáner para leer los datos. A partir del 2003, en

Japón comenzaron a emplearse como etiquetas en las que la gente podía

leer con sus dispositivos móviles información relacionada con productos,

servicios y eventos. Actualmente el crecimiento se ha quedado algo

estancado, sobre todo en Europa, pero en 2010 se han notado algunos

tímidos repuntes.

¿Cómo leer los códigos QR?

Usando un dispositivo móvil o una aplicación que lea códigos QR se toma

una imagen y luego lo enviará a un texto o una página web, el destino del

código QR es controlada por el autor del código. De esta manera el

anunciante tiene una herramienta para innovar y poder salir de

la publicidad tradicional. Los códigos QR crecieron a un gran ritmo hace

unos años en Corea del Sur y Japón y ahora es cuando están comenzando a

hacerse populares en EEUU. Digitals ComScore ha realizado un análisis

en EE.UU sobre el uso de los códigos QR desde junio de 2011.

“Se estima que 14 millones de usuarios móviles, lo que representa el 6,2% del total, ha escaneado un código QR en su móvil. Casi la mitad de los usuarios de código QR los han escaneado en revistas o periódicos. A pesar del gran uso de códigos QR en medios impresos como revistas de moda, más del 60% de la población que escanean este tipo de códigos son hombres.” - http://www.dinaweb.net/marketing/codigos-qr-tecnologia-nfc/

(Ver anexo 1: Códigos QR a profundidad)

Smartphone

El Smartphone se diferencia del resto de los móviles debido a una serie de

características que hacen de él un teléfono inteligente. Entre las

características mencionadas se destaca su acceso y conectividad a Internet,

su soporte de clientes de correo electrónico, la eficaz administración de los

datos y contactos, entre otras.

Page 28: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

12

Por otra parte, el Smartphone ofrece la posibilidad de lectura de archivos

en diversos formatos de acuerdo a las aplicaciones previamente instaladas,

incluyendo las más conocidas suites ofimáticas, como es el caso de

Microsoft Office.

Tal es el caso de los equipos denominados Smartphone que no sólo sirven

como dispositivo de comunicación, sino que además son un completo

organizador personal y gracias a la amplia gama de aplicaciones el usuario

tiene la capacidad de ampliar las capacidades y funcionalidades del

equipo, más allá de cómo lo haya entregado el fabricante.

2.2.2. GESTIÓN TURÍSTICA

El Turismo es una actividad de gran importancia económica global, que

requiere de diversas áreas productivas como la Agricultura, la

Construcción, la Fabricación y de los Sectores Públicos y Privados, para

así proporcionar bienes y servicios para el disfrute de los turistas.

Hay que destacar que en Ecuador el turismo no es solo el responsable

de proporcionar grandes ganancias económicas y sociales, si no que sea

encargado de unir a las familias, comunidades y de dar a conocer

al mundo entero que es un país como cualquier otro, que posee ventajas y

desventajas al visitarnos. Pero que cada día que pasa esta luchando para

mejorar, con el fin de asegurarle a los turistas y a la sociedad en general un

excelente servicio.

Ventajas

� La Conservación de lugares Históricos y turísticos: Con el fin de

mejorar y de conservar, nuestra historia para el turista y la comunidad.

� Creación de nuevas infraestructuras: Este se lleva a cabo en todo lugar

que se desea utilizar como destino Turístico, ya que se hace necesario

la mejora de estos lugares, para así brindar un excelente servicio.

� La Integración de las familias: Esta es una de las mas importantes

generada por el turismo, puesto que permite el dialogo, la interacción y

el esparcimiento del núcleo familiar en determinadas ocasiones.

Page 29: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

13

� Aprovechamiento y Explotación de los recursos Naturales: este se

realiza con el fin de crecer y brindar nuevas alternativas para el turista,

teniendo siempre en cuenta la capacidad de carga que posee el lugar.

� Generación de empleos: Gracias a las grandes inversiones que se

realizan para llevar a cabo estos proyectos turísticos, muchas personas

se ven beneficiadas.

� Desarrollo de nuevas tecnologías: En Cada instante que pasa se crean

nuevas Herramientas tecnológicas, lo que hace necesario estar siempre

actualizados.

� Genera grandes cambios Sociales, Culturales y Religiosos: Este es un

factor muy contradictorio. Ya que es bueno interactuar con otras

personas y darnos a conocer, como gente que posee grandes

cualidades.

� Destinos para todos los Gustos y Exigencias: Gracias a la gran

variedad de destinos que podemos brindarle a todos los turistas ya sean

nacionales o internacionales, se logra una mayor cobertura y

satisfacción de los estos.

� Importancia de la Administración Turística y Hotelera: Para el buen

desarrollo del Turismo se hace necesario de especializar y utilizar todo

el recurso humano posible, con el fin de brindar un servicio de alta

calidad y así obtener reconocimiento por esto.

Desventajas

� La perdida cultural de las comunidades: En el momento del cambio al

que se ve sometido un lugar o una comunidad determinada, muchas

veces las costumbres se ven afectadas y la perdida de estas se hace

notoria.

� La Mala cobertura que posee el país; En temporada alta la cobertura

del transporte Terrestre, Aéreo Y Marítimo es muy deficiente, lo

que genera represamiento de turistas.

Page 30: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

14

� La Contaminación medioambiental: Este es un factor muy importante

ya que esta acabando con lugares y especies, muchas veces por el

mal uso de los turistas y encargados.

� La excesiva ocupación en las costas: Al implementar nuevos proyectos

se esta acabando con áreas naturales.

� La mala planificación de los lugares de temporada o el turismo sexual:

Este es un factor que afecta a todos, puesto que nuestras niñas y niños,

se han convertido en un producto más.

� La falta de concientización de la comunidad: Esto genera que la

comunidad en muchas ocasiones se aproveche de manera excesiva de

los turistas, sin tener en cuenta que gracias a ellos, obtenemos muchos

beneficios.

Turismo 2.0

El Turismo 2.0 es la evolución de los sitios de viajes en Internet que ha

surgido con la Web 2.0, la segunda generación de servicios y comunidades

web que incentivan la participación y colaboración entre los usuarios.

Con el Turismo 2.0 los sitios web de viajes, como portales, guías de

destinos online, proveedores de servicios y gestores de reservas, es que

ahora cuenta con la interacción directa del usuario, que genera un valor

único, a través de críticas, comentarios, sugerencias a servicios y productos

turísticos (líneas aéreos, hoteles, tours, destinos, restaurantes, etc.),

compartiendo experiencias, a través de blogs, videos y fotos, influenciando

directamente la percepción y decisión de otros usuarios y "viajeros

potenciales". A continuación se va a mencionar 6 factores críticos de éxito

para sacar el máximo provecho de la era de Turismo 2.0:

1. Escuchar: use los medios sociales para investigar, escuchar y conocer

más a los clientes.

2. Hablar : use las conversaciones para promover su negocio.

3. Crecer: identifique a los clientes entusiastas y úselos.

Page 31: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

15

4. Ayudar : construya lazos entre los clientes para que se ayuden unos a

otros

5. Mejorar : convertir a los clientes en una fuente invaluable de

innovación.

6. Compartir : divulgue historias y experiencias que merezcan ser

escuchadas

Atractivos turísticos de Quito

Quito, el distrito metropolitano se encuentra entre lo contemporáneo y lo

colonial, que se esté construyendo constantemente día a día.

La estructura moderna se mezcla con lo colonial donde los residentes

nacionales y los visitantes extranjeros encuentran siempre un lugar para

trabajar, gozar y recordar.

Quito, colmada de significados que la identifican y definen, ocupa laderas

o baja a los valles, serpentea a través de callejones y se abre en amplias

avenidas; zigzaguea, sorteando colinas y quebradas. Por esta belleza física,

sus tradiciones, rincones de misticismo y leyendas vigentes, es considerada

"Relicario del Arte en América". Estas fueron las características

principales para que, en noviembre de 1978, Quito fuera declarada por la

UNESCO "Patrimonio Cultural de la Humanidad".

2.3 FUNDAMENTACIÓN LEGAL.

Cualquier persona que realice un proyecto de cualquier índole deberá

regirse a las leyes y reglamentos vigentes en el país, es de vital

importancia conocerlas y saber como y donde aplicarlas ya que su

desconocimiento no implica que estas desaparezcan o no se puedan

incumplir.

2.3.1 LEY ORGÁNICA DE EDUCACIÓN SUPERIOR.

La LOES o ley orgánica de educación superior habla sobre los derechos

que poseen los estudiantes que empiezan o están cursando una enseñanza

Page 32: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

16

superior y gracias a esta ley tengan igualdad de oportunidades y garantías

individuales.

Art. 5 de la Ley Orgánica de Educación Superior literal: a

Art. 26 de la Ley Orgánica de Educación Superior

Art. 32 de la Ley Orgánica de Educación Superior

(Ver Anexo 2: Fundamentación legal)

2.3.2 LEY DE COMERCIO ELECTRÓNICO.

Esta ley trata sobre el libre intercambio de información, protección de los

datos, duplicación y veracidad de la información que se publique

realizando un proyecto disponible para todos los usuarios de la red

mundial internet.

Artículo 1.- Objeto de la Ley.

Artículo 4.- Propiedad Intelectual.

Artículo 9.- Protección de datos.

Artículo 12.- Duplicación del mensaje de datos.

Artículo 50.- Información al consumidor.

(Ver Anexo 2: Fundamentación legal)

2.3.3 LEY DE PROPIEDAD INTELECTUAL.

La ley de propiedad intelectual se enfoca en la protección de los derechos

de autor que le son otorgados a cualquier persona por haber concebido una

obra en cualquier ámbito, ya sea en el ámbito literario, artístico, programas

de ordenador o cualquier forma de expresión. Derechos que las demás

personas deberán respetar o someterse a varias acciones legales

correspondientes.

Sección V

Disposiciones Especiales sobre ciertas Obras Parágrafo Primero

De los Programas de Ordenador:

Art. 8. La protección del derecho de autor

Page 33: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

17

Literales: a, b, g, h, j, k y l

Art. 28. Los programas de ordenador

Art. 30. La adquisición de un ejemplar de un programa de ordenador

Literales: a, b y c

(Ver Anexo 2: Fundamentación Legal)

2.4 GLOSARIO DE TÉRMINOS.

Turismo 2.0.-segunda generación de servicios y comunidades web.

Código QR.- Quick Response Code, código de barra de respuesta rápida.

VCard o QR Card.- tarjeta de presentación o fidelización para los

clientes.

Smartphone.- teléfono móvil inteligente.

Paisajístico.- publicidad exterior o valla publicitaria.

Código Bidimensional.- código de barras que se puede grabar

información de forma horizontal y vertical.

Dirección URL.- (localizador de recursos uniforme) es una secuencia de

caracteres, que se usa para nombrar recursos en Internet para su

localización o identificación.

QR.- Quick response o respuesta rápida.

Escanear.- realizar, tomar una fotografía o reconocer una imagen.

Infraestructura .- soporte o equipo tecnológico básico.

Conservación.- cuidar o preservar los recursos no renovables.

Destino turístico.- lugar o sitio turístico.

Page 34: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

18

2.5 CARACTERIZACIÓN DE LAS VARIABLES.

Variables Definición

Independiente El objetivo del turismo es la conservación de lugares Históricos y turísticos, con el fin de mejorar y de conservar la historia para el turista y la comunidad. Gestión Turística

Dependiente Los Códigos QR son parecidos a los códigos de barras y de hecho cumplen la misma función. A través de un lector, normalmente un móvil, el usuario puede obtener información sobre un lugar al que corresponde cada código, mejoran el motor de búsqueda y ayudan a la optimización de los medios sociales a través de los links.

Tecnología QR

CUADRO N° 2

Titulo: Tabla de Caracterización de Variables

Fuente: Rafael Fueltala

2.6 PREGUNTAS DIRECTRICES DE LA INVESTIGACIÓN.

¿La implementación del proyecto impulsara el turismo en el centro Histórico de Quito?

¿La aplicación del proyecto posicionará a los atractivos y sitios importantes del Centro Histórico de Quito como destinos turísticos y difundirá el potencial turístico que oferta cada uno de ellos?

¿Con el sistema de administración de Tecnología QR se logrará impulsar el aprovechamiento y conocimiento de esta tecnología?

¿La ejecución y combinación de Tecnología QR con el sistema de administración de contenido, optimizara los procesos de búsqueda y entrega de información turística?

¿La aplicación y puesta en marcha del sistema le permitirá al turista conocer toda la información, eventos y lugares aledaños que posee un determinado sitio histórico-turístico?

Page 35: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

19

CAPÍTULO III

METODOLOGÍA DE LA INVESTIGACIÓN

3.1 TIPOS DE INVESTIGACIÓN.

3.1.1. INVESTIGACIÓN APLICADA.

La Tecnología QR aplicada al desarrollo del tema de proyecto de tesis

servirá como promotora de los atractivos del Centro Histórico de Quito,

mejorando el motor de búsqueda, ayuda a la optimización y difusión de

contenido informativo y multimedia o social a través de un link o URL.

La investigación aplicada es la respuesta efectiva y fundamentada a un

problema detectado, concentra su atención en las posibilidades de llevar a

la práctica las teorías generales, y destina sus esfuerzos a resolver los

problemas y necesidades que se plantea en sociedad. Es decir, se interesa

fundamentalmente por la propuesta de solución en un contexto físico-

social específico.

La utilización de Tecnología QR permite una variedad de usos muy

interesantes. Un código QR puede ser captado por la cámara de un

teléfono móvil e inmediatamente se mostrara la información encriptada

dentro de este código, gracias a esta tecnología las oportunidades de

campañas de mercadeo y publicidad se expanden. Siendo el campo

turístico uno de los campos de aplicación mejor explotados por esta

Tecnología QR.

Page 36: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

20

3.2 MÉTODOS Y TÉCNICAS DE INVESTIGACIÓN.

3.2.1 MÉTODO HISTÓRICO LÓGICO.

Gracias a esta investigación se hace posible revelar el historial, las etapas

principales y todo el desenvolvimiento que se haya tenido en las

actividades del desarrollo de la propuesta, además este método está

vinculado al conocimiento de las distintas etapas o fases de diseño,

programación y pruebas del sistema de Gestión turística y Software de

información turística para el Centro Histórico de Quito el cual incluirá un

sistema gestor de contenido web, reconocimiento de tecnología QR y

finalmente la correcta puesta en marcha del sistema con el objetivo de

promover el turismo.

3.2.2 MÉTODO ANALÍTICO – SINTÉTICO.

El método analítico-sintético se aplica al proyecto ya que se realiza un

análisis a profundidad de cada uno de los elementos que intervienen en el

desarrollo del sistema propuesto, es decir, una metodología de diseño de

base de datos y análisis de procesos para la capa de catos, los mismos que

incorporados a la capa de negocio y una capa de presentación van a

permitir la sistematización y promoción turística de los atractivos del

Centro Histórico de Quito; por otro lado, el realizar una síntesis de la

información teórica y conceptual permitirá reunir todos los argumentos

válidos a fin de restructurar toda lo lógica didáctica y conceptual de todo

elemento que interviene en el de Gestión turística y Software de

información turística para el Centro Histórico de Quito, pudiendo

concentrar el mayor esfuerzo en la búsqueda de información y análisis de

la misma pero únicamente con la justificación que sea aplicable

estrictamente al tema en ejecución.

Por consiguiente, el método analítico sintético tiene su fundamentación e

información teórica necesaria descrita en el capitulo segundo, Marco

Teórico, muy necesario para la estructuración de este tema de

implementación.

Page 37: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

21

3.2.3 MÉTODO INDUCTIVO.

Este método, se lo utilizará en la recolección de la información de manera

independiente de varias fuentes, las mismas que serán libros, direcciones

de Internet, asesorías a través de la observación y el registro de todos los

hechos.

También se llevara a cabo un acercamiento sobre el uso de la nueva

tecnología QR, aplicada a un caso práctico y real, que permita desarrollar

diversas estrategias de documentación y publicación de materiales

digitales con fines tecnológicos, de investigación universitaria o

explotación turística que se pudieran consultar, manipular y aplicar sobre

los atractivos histórico-turísticos Centro Histórico de Quito usando

dispositivos de fácil acceso a la información como es un Smartphone.

3.2.4 MÉTODO DEDUCTIVO.

Este método permite el desarrollo del trabajo investigativo realizado, se

inicia analizando los parámetros que conforman el desarrollo del proyecto,

a fin de optimizar el proceso, para el óptimo diseño, validación y

funcionamiento del sistema.

En el desarrollo del Sistema de Gestión turística y software de información

turística con reconocimiento de códigos QR para el Centro Histórico de

Quito, lo general constituye el almacenamiento de la información en una

base de datos, la misma que para su estructuración sigue un

procesamiento, análisis, diseño y definiendo ordenadamente los tipos de

datos a ser almacenados al igual que la información a ser receptada o

apropiadamente consultada.

3.3 POBLACIÓN Y MUESTRA.

El Centro Histórico de Quito posee una población cercana a los

39.620 habitantes y recibe en promedio cerca de 1200 visitantes

nacionales y extranjeros por día aunque en días festivos o feriados

Page 38: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

22

este número aumenta considerablemente, según informe del Inec.

También cabe recalcar que el crecimiento turístico es del 12% anual

lo cual lo hace un lugar adecuado para implantar o dar a conocer

nuevas opciones que permitan el desarrollo turístico del Centro

Histórico de Quito en general

Muestra

N n = -------------------

( N-1 ) E2 + 1

Donde:

N= Tamaño de la población= 1200

n = Tamaño de la muestra

E2 = Error máximo admisible= 0,08

En el cálculo de la muestra, se aplicó la fórmula de muestras en base a una

población, con el cálculo se puede obtener como resultado el total de

personas que se realizará la encuesta; para lo cual se tiene como datos lo

siguiente:

Resultado de la muestra:

� =1200

�1200 − 1��0,09� + 1�

� ≅ ��. �� = ��

Page 39: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

23

3.4 OPERACIONALIZACIÓN DE LAS VARIABLES.

Variables Dimensiones Indicadores

Gestión Turística - Turismo

- Información en

mapas turísticos

- Turismo 2.0

- Turismo en Ecuador

- Factores críticos de

éxito

- Ventajas

- Desventajas

- Atractivos turísticos

de Quito

Tecnología QR - Códigos QR

- Aplicación Móvil

- Historia

- Aplicación de

Códigos QR

- ¿Cómo leer

los códigos QR? - Smartphone

- Aplicaciones

CUADRO N° 3

Título: Operacionalización de las variables

Fuente: Rafael Fueltala

3.5 TÉCNICAS E INSTRUMENTOS DE RECOLECCIÓN DE DATOS.

3.5.1 OBSERVACIÓN.

Algunas de las observaciones que se puede destacar cuando se realiza una

visita turística actual independientemente del lugar es constatar si existe o

no contenido informativo, histórico, descriptivo e interactivo del lugar

visitado, en el caso de estudio del Centro histórico de Quito se puede

notar que existen pocos puntos de información turística, con reducido

contenido, se rigen por un horario estricto de funcionamiento y son

Page 40: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

24

difíciles de ubicar a simple vista, siendo este una desventaja ya que la

comunidad turística que visita el centro histórico de Quito necesita este

servicio las 24 horas del día durante los 365 días del año, ya que el turista

no puede conocer con exactitud su horario de llegada o arribo al centro

histórico de Quito. La presente propuesta busca poner énfasis y resolver

esta problemática aprovechando todos los recursos tecnológicos

disponibles como son la tecnología web móvil así como la búsqueda y el

acceso rápido a la información usando tecnología QR.

3.5.2 FICHA DE OBSERVACIÓN.

Lugar: Quito, Ecuador Sector: Centro Histórico de Quito Titulo : El turismo en el Centro Histórico de Quito

Fecha: 6/10/2012

Fuente: Internet Ficha N°: 1

Siendo el turismo una alternativa de desarrollo económico y social debe fundamentarse sobre criterios de sostenibilidad, es decir, que debe beneficiar a todos los actores involucrados, que sea viable económicamente y equitativo, comercialmente rentable, ecológicamente sostenible, socioculturalmente aceptable y que proporcione un alto grado de satisfacción al turista.

Al ser el Turismo Cultural una forma de turismo alternativo que apunta, entre otros fines, al conocimiento de sitios históricos, su desarrollo conlleva un efecto positivo sobre el medio cultural, dado que contribuye a su mantenimiento y protección, como condición básica y elemental para satisfacer sus propios fines. El Centro Histórico de Quito en la actualidad es un gran destino turístico, ya que por su clima cálido, la gente amable, diversidad de sitios turísticos culturales y sobretodo el fácil acceso a cada uno de ellos, hace que sea visitado por un gran porcentaje de turistas nacionales y extranjeros de esta manera dinamizando la actividad turística, acarreando un sinnúmero de beneficios para la ciudad.

CUADRO N° 4

Título: Ficha de Observación

Fuente: Rafael Fueltala

Page 41: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

25

3.5.3 ENTREVISTA.

Se desarrollara la entrevista a la Jefa de la Empresa Publica Metropolitana

Quito-Turismo, la Sra. Luz Elena Coloma, con el objetivo de conocer cada

una de las necesidades actuales y su opinión con respecto al manejo de la

información turística actual así como la aplicación de la Tecnología QR en

este ámbito, siendo esta técnica de recolección de información en el

proyecto de mucha importancia y transcendencia. La entrevista consistirá

fundamentalmente en un cuestionario, que contendrá un conjunto básico

de preguntas acerca de los aspectos a indagar, puntos de información

turística e incursión de la tecnología QR y móvil en el turismo. Así mismo

se procurara cualificar y analizar los criterios técnicos proporcionados en

las respuestas del entrevistado.

(Ver Anexo N° 3: Diseño y análisis de la Entrevista)

3.5.4 ENCUESTA.

Se encuestará a una muestra de los turistas extranjeros que visitan el

Centro Histórico de Quito, para conocer las opiniones y conocimientos

tecnológicos que poseen. Las preguntas elaboradas están conformadas por

ítems que buscarán establecer la conformidad de la comunidad turística

con respecto a los establecimientos y puntos de información turísticos

alrededor del Centro histórico de Quito. Los datos se obtendrán a partir de

realizar un conjunto de preguntas normalizadas dirigidas a un estudio,

formada a menudo por personas con el fin de conocer estados de opinión,

características o hechos específicos como son: Fortalezas y debilidades del

proceso de búsqueda y acceso a la información turística. Existencia e

inconvenientes en el manejo de teléfonos inteligentes o SmartPhones. Para

ello se selecciono las preguntas más convenientes, se las procederá a

elaborar mediante un análisis previo, referente a las personas involucradas

en el proyecto final de acuerdo con la naturaleza de la investigación.

(Ver Anexo N° 4: Diseño de la Encuesta)

Page 42: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

26

CAPÍTULO IV

ANÁLISIS E INTERPRETACIÓN DE RESULTADOS

4.1 RECOLECCIÓN Y PROCESAMIENTO DEL TRABAJO DE

CAMPO.

1.

¿Cuanta importancia asignaría usted a la presencia de un Centro Histórico en la Ciudad?

Ninguna 0%

Poca 1%

Mucha 98%

GRÁFICO N° 1

Título: Pregunta 1 de la Encuesta

Fuente: Rafael Fueltala

Análisis: Esta pregunta permite conocer la importancia que tiene el Centro

Histórico de Quito, según el grafico claramente se deduce que es muy

importante tener un lugar para recibir y promover el turismo en la ciudad

de Quito, y un muy reducido porcentaje índica que tiene poca importancia

porque a veces estos lugares están descuidados o no existe mucha

información para los visitantes.

Page 43: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

27

2.

¿En qué estado considera usted que se encuentran los Atractivos Turísticos del Centro Histórico de Quito?

Bueno 96%

Malo 4%

Deplorable 0%

GRÁFICO N° 2

Título: Pregunta 2 de la Encuesta

Fuente: Rafael Fueltala

Análisis: esta pregunta permite conocer en que estado se encuentran los

atractivos del centro histórico de Quito y al notar que se encuentran en

buen estado entonces se concluye que si es viable promocionar mediante

una aplicación turística.

3.

¿La información que usted obtiene sobre el Centro Histórico de Quito es?

Inexistente 10%

Escasa 30%

Suficiente 60%

GRÁFICO N° 3

Título: Pregunta 3 de la Encuesta

Fuente: Rafael Fueltala

Page 44: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

28

Análisis: esta pregunta permite conocer la existencia y la correcta difusión

de la información turística que debería haber en el Centro histórico de

Quito, que según la encuesta no existe la suficiente información para los

visitantes de los diferentes atractivos del Centro Histórico de Quito.

4.

Cree usted que la poca afluencia de visitantes a las Iglesias, museos, plazas del Centro Histórico de Quito se deba a

Falta de interés de las autoridades 2% Falta de interés de las operadoras de turismo 20% Falta de valoración de nuestra propia cultura 10%

Escasa difusión 53% Falta de mantenimiento de los atractivos 15%

GRÁFICO N° 4

Título: Pregunta 4 de la Encuesta

Fuente: Rafael Fueltala

Análisis: esta pregunta permite conocer cuál es el motivo más

sobresaliente que provoca poca afluencia de visitantes a los atractivos del

centro histórico de Quito, donde al parecer la falta de interés de las

empresas turísticas y la falta de puntos de información turísticos provoca

una escasa difusión.

Page 45: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

29

5.

¿Cuál cree usted que sería la mejor herramienta para brindar

información del Centro Histórico de Quito?

Trípticos 15%

Una Guía o Revista 20%

Paginas Web 25%

Circuitos Turísticos Guiados usando un Dispositivo móvil 40%

GRÁFICO N° 5

Título: Pregunta 5 de la Encuesta

Fuente: Rafael Fueltala

Análisis: esta pregunta permite conocer que hay preferencia por una Guía

turística del Centro histórico de Quito usando tecnología móvil ya que su

portabilidad y disponibilidad las 24 horas, es de vital importancia para la

comunidad turística.

Page 46: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

30

6.

¿En su visita al centro histórico de Quito encontró puntos de información turísticos?

Si 40%

No 60%

GRÁFICO N° 6

Título: Pregunta 6 de la Encuesta

Fuente: Rafael Fueltala

Análisis: los resultados indican que al visitar el centro histórico de quito

los puntos de información turísticos son poco visibles y de difícil

ubicación generando así una falta de información turística para el visitante.

7.

¿Cómo calificaría a la información turística entregada sobre

restaurantes, hoteles, cafeterías y demás lugares de interés del

Centro Histórico de Quito?

Inexistente 35%

Escasa 45%

Suficiente 25%

GRÁFICO N° 7

Título: Pregunta 7 de la Encuesta

Fuente: Rafael Fueltala

Page 47: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

31

Análisis: según los datos obtenidos se concluye que existe una importante

escases e inexistencia de información turística importante para el visitante

que necesariamente necesita conocer este tipo de información.

8.

¿Actualmente tiene o ha tenido un dispositivo de Telefonía móvil o Smartphone?

Si 40%

No 60%

GRÁFICO N° 8

Título: Pregunta 8 de la Encuesta

Fuente: Rafael Fueltala

Análisis: esta pregunta permite saber que hay un porcentaje medio de

visitantes del Centro Histórico de Quito disponen de un teléfono

inteligente (Smartphone) el cual es muy necesario para la aplicación

turística del presente trabajo de graduación.

9.

¿Para navegar o consultar información en internet usando su dispositivo móvil usted dispone de?

Plan controlado de datos 35%

Internet gratuito o Wi-Fi 40%

Ninguno 25%

GRÁFICO N° 9

Título: Pregunta 9 de la Encuesta

Fuente: Rafael Fueltala

Page 48: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

32

Análisis: según los datos mostrados en el grafico estadístico podemos

observar que la mayoría de visitantes del Centro Histórico de Quito utiliza

los puntos gratuitos de internet Wi-fi ubicados a lo largo del Centro

Histórico de Quito lo cual será beneficioso para la aplicación del presente

proyecto de tesis donde es de vital importancia que el visitante disponga de

conectividad a internet desde su SmartPhone.

10.

¿Usted alguna vez ha escuchado de la nueva Tecnología de los Códigos QR o sus aplicaciones?

Si 55%

No 25%

Nunca 20%

GRÁFICO N° 10

Título: Pregunta 10 de la Encuesta

Fuente: Rafael Fueltala

Análisis: con los datos recopilados claramente se observa que la

tecnología QR ya no es desconocida gracias a sus diferentes aplicaciones

tanto en la publicidad como en el turismo donde será altamente

aprovechada.

Page 49: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

33

4.2 RESPUESTAS A LAS INTERROGANTES DE LA

INVESTIGACIÓN.

¿La implementación del proyecto impulsara el turismo en el centro

Histórico de Quito?

El presente desarrollo e implementación del proyecto despertará un aire de

curiosidad por parte de la comunidad turística y su afán de conocer las

nuevas culturas y lugares turísticos, también esta abierto a conocer una

forma de aprovechamiento de la tecnología QR y móvil, las cuales se van a

usar en cada uno de los lugares del Centro histórico de Quito.

¿La aplicación del proyecto posicionará a los atractivos y sitios

importantes del Centro Histórico de Quito como destinos turísticos y

difundirá el potencial turístico que oferta cada uno de ellos?

Una vez conocida y aprovechando la curiosidad del turista por los

diferentes lugares turísticos del Centro Histórico de Quito, la tecnología

QR y sus aplicaciones entonces el presente proyecto de tesis podrá ser una

catapulta para difundir la respectiva información turística más relevante de

cada lugar del Centro Histórico de Quito.

¿Con el sistema de administración de Tecnología QR se logrará impulsar

el aprovechamiento y conocimiento de esta tecnología?

La tecnología QR al ser una tecnología prácticamente nueva y que esta

empezando a difundirse en gran o menor medida se logrará capturar el

interés de las personas por el conocimiento de esta tecnología gracias al

escáner de reconocimiento de códigos QR planteado como propuesta del

presente tema de investigación.

¿La ejecución y combinación de Tecnología QR con el sistema de

administración de contenido, optimizara los procesos de búsqueda y

entrega de información turística?

La tecnología QR como pionera en la “respuesta rápida” de la información

será un pilar fundamental para el acortado tiempo que posee un turista y

Page 50: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

34

como ventaja primordial se podría decir que la información estará siempre

al disponible y al alcance de la comunidad turística.

¿La aplicación y puesta en marcha del sistema le permitirá al turista

conocer toda la información, eventos y lugares aledaños que posee un

determinado sitio histórico-turístico?

Entre una de las varias necesidades de la comunidad turística, esta la de

recibir información sobre lugares para hospedarse, lugares para

alimentarse y como agregado principal una ruta o un mapa geo

referenciado de los mismos. Lo cual impulsara la afluencia y el

conocimiento de estos lugares de vital importancia por parte de la

comunidad turística.

Page 51: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

35

CAPÍTULO V

CONCLUSIONES Y RECOMENDACIONES

5.1 CONCLUSIONES Y RECOMENDACIONES.

5.1.1 CONCLUSIONES.

- En vista de que el turismo es un proceso social complejo, que involucra

diversos actores y que verifica impactos, se concluye que el turismo afecta

dimensiones que pueden calificarse como económicas, éticas, políticas,

culturales y educativas. A su vez, el turismo, como todo fenómeno social,

se encuentra inserto en diversas derivas histórico-políticas, en relación con

los contextos en los que se inserta (tanto locales como regionales,

nacionales o supranacionales). La propuesta e idea fundamental trata de

redefinir la práctica del turismo (y la calidad de la experiencia turística)

para desplazarla desde una relación de explotación y consumo superficial,

a una experiencia "etnográfica cultural social" o también denominado

Turismo 2.0 o, si se prefiere, de respetuosa relación interpersonal, una

experiencia de mutuo aprendizaje.

- Para la Tecnología QR se concluye que se debe primero superar uno de

los mayores obstáculos que impiden a las personas el uso de códigos QR,

se debe simplemente tomar conciencia de la tecnología, ya que puede ser

un muy buen promotor de marketing o simplemente una imagen blanca y

negra.

- Una de las ventajas de los códigos QR y la tecnología móvil es que el

usuario no tiene que depender de los horarios de cualquier Oficina de

Turismo que opere dentro del Centro histórico de Quito.

5.1.2 RECOMENDACIONES.

- En base a la investigación se recomienda primeramente realizar una

pregunta fundamental "¿para quién se hace turismo?" o, dicho de otro

Page 52: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

36

modo, "¿quiénes deberían ser los beneficiarios del turismo?" y "¿bajo que

condiciones el turismo es una práctica legítima, esto es, éticamente

sólida?". Estas son preguntas que conciernen, evidentemente, a todos los

actores de la práctica turista, en todos los niveles: desde las políticas

estatales hasta la "conciencia" de los turistas. Y las posibles respuestas han

de tener en cuenta que las comunidades receptoras han de ser los primeros

y principales actores, jueces y beneficiarios de cualquier práctica de

"Turismo 2.0" rectamente entendida.

- A partir de la idea de que para que una actividad turística pueda

desplegarse exitosamente - y desplegar sus beneficios a lo largo de un

tiempo prolongado - la misma ha de resultar "sostenible", se debe trabajar

desde la idea de una sustentabilidad "ampliada" que implica no sólo un uso

no depredatorio de los "recursos" sino también procesos de decisión

abiertos y consensuados, que disminuyan los riesgos, las fricciones y los

roces inherentes a las decisiones unilaterales, o impuestas de-arriba-a-

abajo, que suelen erosionar muchos proyectos, por más bienintencionados

que estos sean. Los actores involucrados en la primera y segunda de las

redes deben entender que su actividad es sólo posible a partir de la

existencia de la tercera de ellas, y que es esta cuyos derechos (a su

existencia y prosperidad en los términos por ella definidos) tienen

prioridad ética y política sobre el derecho de la primera de hacer dinero, o

de la segunda de consumir y divertirse.

Page 53: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

37

CAPÍTULO VI

LA PROPUESTA

6.1 ALCANCES Y DELIMITACIONES.

El Centro Histórico de Quito al encontrarse entre los mejor conservados y

de mayor extensión de Latinoamérica, y al ser el más concurrido por la

comunidad turística, atributos que le valieron para ser declarado

Patrimonio Cultural de la Humanidad por la UNESCO en 1978. Va a ser

tomado como eje central en el cual girará la propuesta, donde la

información de sus lugares plazas, iglesias, museos, hoteles, sitios

importantes y sus puntos gratuitos de internet, constituirán una pequeña

guía turística móvil disponible las 24 horas, con contenido actualizable,

social, cultural y especialmente adaptado para teléfonos inteligentes o

SmartPhones.

6.1.1 MÓDULO DE SEGURIDAD.

Por ser un sistema con acceso a información importante, este sistema será

manejado por perfiles de usuario, cuenta con registro de usuarios que

luego podrán generar una QR Card para mayor flexibilidad y seguridad al

momento del ingreso al sistema y manejo de la información.

6.1.2 MÓDULO REGLAS DEL NEGOCIO.

En este modulo el sistema gestionará las tareas relacionadas con los

procesos del negocio, operaciones y validación de información ingresada

al sistema, cabe mencionar que la integridad y la responsabilidad de la

información recae sobre el usuario que ingrese suba dicha información al

sistema.

Page 54: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

38

6.1.3 MÓDULO DE MANTENIMIENTO.

Para el tratamiento y manejo de la información el sistema administra los

sitios importantes por categoría, con la opción de realizar búsquedas agiles

así como su registro, edición y eliminación en la base de datos. Además a

cada sitio importante se le asignara información básica, administración de

imágenes, así como su Geolocalización y su asignación a un Código QR

que estará ligado a una URL para el ingreso a su propia web móvil

informativa y social.

6.1.4 MÓDULO WEB MÓVIL.

Para una mejor experiencia para el turista el sistema ordenará la

información de cada sitio importante en una página web móvil con

contenido audiovisual, social e informativo especialmente optimizado para

teléfonos inteligentes de última generación y con conectividad a una red

de datos (3G, Gprs, Wi-Fi).

6.1.5 DELIMITACIÓN.

Para el modulo web móvil, que está formado por contenido audiovisual,

informativo y mapas con datos de Geolocalización se hace necesario que

el turista, visitante o usuario posea un teléfono inteligente o Smartphone

con conectividad a internet, cámara, una aplicación para reconocer códigos

QR y un navegador web móvil sea este Safari, Opera mini, Firefox o

Chrome, estos requisitos serán fundamentales para una mejor experiencia

visual.

6.2. ESTRUCTURA ORGANIZACIONAL.

El presente proyecto está desarrollado con la finalidad de fomentar la

creación de una empresa que brinde este tipo de servicio turístico, por lo

tanto no se dispone aún de una estructura orgánica, considerando que la

misma se lo realizará una vez que se materialice la creación de la empresa,

por el momento se ha enfocado en desarrollar el sistema turístico y la

Page 55: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

39

aplicación de reconocimiento de códigos QR, sin embargo la propuesta

podría tener la siguiente estructura organizacional:

GRÁFICO N° 11

Título: Posible Organigrama Estructural

Fuente: Rafael Fueltala

6.3. INFRAESTRUCTURA INFORMÁTICA.

6.3.1. HARDWARE.

Características Ubicación Proceso

Intel Core i3 Desarrollo Para desarrollo y pruebas del sistema.

SmartPhone Lg Optimus

Desarrollo Para Pruebas del modulo web móvil.

Impresora Lexmark MP190

Desarrollo Para la impresión de los reportes y

códigos QR

CUADRO N° 5

Título: Hardware

Fuente: Rafael Fueltala

Page 56: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

40

6.3.2. SOFTWARE.

Software Ubicación Licencia

Windows 7, Office 2010 Equipo para desarrollo Si

Apache Servidor OpenSource

Office 2010 Homologación de equipos. Si

Php Programación OpenSource

MySQL Servidor remoto OpenSource

Dreamweaver Maquetación de CMS Crack

Motodev Programación Móvil OpenSource

CUADRO N° 6

Título: Software

Fuente: Rafael Fueltala

6.3.3. COMUNICACIONES.

Equipo Ubicación

Modem de Internet CNT Redes

Router de 16 puertos Redes

Firewall Redes

DNS Redes

Servidor Antivirus Redes

CUADRO N° 7

Título: Equipo de Comunicación

Fuente: Rafael Fueltala

Page 57: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

41

6.3.4. RECURSO HUMANO TÉCNICO.

Nombre Función Responsabilidad

Rafael Fueltala Investigador Desarrollador

Ing. Jaime Basantes

Docente Docente proyecto

Ing. Hugo Heredia Director Escuela Aprobación del plan de proyecto

Ing. William Cueva

Tutor Tutor del proyecto

CUADRO N° 8

Título: Recurso humano

Fuente: Rafael Fueltala

6.4. DESCRIPCIÓN DE ALTERNATIVAS.

A fin de poder evaluar las alternativas se han desarrollado unos ítems de

especificaciones técnicas, que se necesitan con la finalidad de

implementar el Software de Información Turística con Reconocimiento de

códigos QR para el Centro Histórico de Quito, también son necesarias

garantías, soporte técnico que se pueden ofrecer por cada uno de los

oferentes alternativas.

6.4.1. ALTERNATIVA 1: Cyberia Projects

La propuesta fue envía a una empresa desarrolladora de software, Cyberia

Projects, por poseer gente desarrolladora de software altamente

calificados. Ha realizado algunos proyectos los mismos que han sido

implementados en Instituciones Públicas. Estos aspectos representan una

gran ventaja ya que se sabe que tienen gran experiencia para el desarrollo

de software, por otro lado, el costo para realizar este sistema es demasiado

elevado, lo cual significa una desventaja, ya que cualquier empresa o

persona no cuenta con un presupuesto económico de esa magnitud

Page 58: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

42

Nombre Descripción Cumple No

Cumple Pesos

Arquitectura Tres capas � 10

Ambiente de desarrollo

Web � 5

Plataforma Android v4.0 � 20

Metodología RUP: (Rational Unificated Process)

� 8

Diseño

� Diagrama de casos de uso

� Diagrama de colaboración

� Diagrama de clases

� Modelo físico de BD

� Modelo lógico de BD

� Rational Rose

� 9

Front-end Java, Php � 5

Back-end Sqlite � 7

Pruebas de funcionamiento

� Prueba de Integración

� Prueba de Unidad

� Prueba de Validación

� Prueba del Sistema

� Prueba de Seguridad

� Prueba de Interfaces Graficas

9

Capacitación técnica

Administradores � 4

Manuales técnicos

• Diccionario de Datos

• Manual de Usuario

� 5

Page 59: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

43

Estándares

Base de Datos

� Tablas � Relaciones � PK � FK

Código de Programación

� Variables � Constantes � Controles

Visuales

� 7

Ambiente de Desarrollo

� Java Eclipse � Motodev

� 5

Costo

� Tiempo de Financiamiento

� Forma de Pago � Valor del

proyecto

� 7

Garantía Técnica / Tiempo

� Cobertura garantía

� Tiempo � 5

Soporte Técnico

� Realiza visitas técnicas

� 7

Total 100%

Valor Comercial Cyberia Projects Tiempo de Desarrollo 12 meses Garantía Técnica 6 meses Soporte Técnico 4 meses Costo $750,00

CUADRO N° 9

Título: Alternativa 1, Cyberia Projects

Fuente: Rafael Fueltala

Page 60: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

44

6.4.2. ALTERNATIVA 2: Global Sistemas.

La propuesta fue envía a una empresa desarrolladora de software Global

Sistemas en la cual se está estipulando los mismos parámetros de las

alternativas anteriores pero está no cumple con todos los ítems solicitados

porque es una empresa que se está iniciando en el desarrollo del software y

esto significa desventaja tanto para la empresa o entidad que envía la

propuesta.

Nombre Descripción Cumple No

Cumple Pesos

Arquitectura Tres capas � 15

Ambiente de desarrollo

Web � 6

Plataforma Android v4.0 � 20

Metodología RUP: (Rational Unificated Process)

� 8

Diseño

� Diagrama de casos de uso

� Diagrama de colaboración

� Diagrama de clases � Modelo físico de BD � Modelo lógico de

BD � Rational Rose

� 9

Front-end Java, Php � 5

Back-end Sqlite � 7

Pruebas de funcionamiento

� Prueba de Integración

� Prueba de Unidad � Prueba de

Validación � Prueba del Sistema � Prueba de Seguridad � Prueba de Interfaces

Graficas

9

Page 61: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

45

Capacitación técnica

Administradores � 4

Manuales técnicos

• Diccionario de Datos

• Manual de Usuario � 5

Estándares

Base de Datos

� Tablas � Relaciones � PK � FK

Código de Programación

� Variables � Constantes � Controles Visuales

� 7

Ambiente de Desarrollo

� Java Eclipse � Motodev

� 6

Costo

� Tiempo de Financiamiento

� Forma de Pago � Valor del proyecto

� 8

Garantía Técnica / Tiempo

� Cobertura garantía � Tiempo

� 4

Soporte Técnico

� Realiza visitas técnicas

� Número de Visitas � 10

Total 100%

Valor Comercial de Global Sistemas Tiempo de Desarrollo 6 meses Garantía Técnica 4 meses Soporte Técnico 2 meses Costo $ 450,00

CUADRO N° 10

Título: Alternativa 2: Global Sistemas

Fuente: Rafael Fueltala

Page 62: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

46

6.4.3. ALTERNATIVA 3: Propuesta de tema de Grado.

La propuesta del tema de grado en la cual se especifican cada una de las

características que ayudarán a desarrollar el software en el menor tiempo

posible ya que la metodología RUP busca dar y realizar los procesos

rápidamente a más de esto, es utilizada por ser un estándar en desarrollo de

sistemas y la calidad que tiene el software ya que cumple con todos los

requerimientos para esto, se estipulada en los siguientes parámetros para el

desarrollo del Sistema.

Nombre Descripción Cumple No

Cumple Pesos

Arquitectura Tres capas � 10

Ambiente de desarrollo

Web �

5

Plataforma Android v4.0 � 5

Metodología RUP: (Rational Unificated Process)

8

Diseño

� Diagrama de casos de uso

� Diagrama de colaboración

� Diagrama de clases

� Modelo físico de BD

� Modelo lógico de BD

� Rational Rose

9

Front-end Java, Php � 9

Back-end Sqlite � 7

Pruebas de funcionamiento

� Prueba de Integración

� Prueba de Unidad

7

Page 63: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

47

� Prueba de Validación

� Prueba del Sistema

� Prueba de Seguridad

� Prueba de Interfaces Graficas

Capacitación técnica

Administradores �

4

Manuales técnicos

• Diccionario de Datos

• Manual de Usuario

5

Estándares

Base de Datos

� Tablas � Relaciones � PK � FK

Código de Programación

� Variables � Constantes � Controles

Visuales

7

Ambiente de Desarrollo

� Java Eclipse � Motodev

5

Costo

� Tiempo de Financiamiento

� Forma de Pago � Valor del

proyecto

7

Garantía Técnica /

� Cobertura garantía

� 5

Page 64: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

48

Tiempo � Tiempo

Soporte Técnico

� Realiza visitas técnicas

� Número de Visitas

7

Total 100%

Valor Comercial Propuesta de tema de grado Tiempo de Desarrollo 7 meses Garantía Técnica 6 meses Soporte Técnico 3 meses Costo $ 0,00

CUADRO N° 11

Título: Alternativa 3, Propuesta de tema de Grado

Fuente: Rafael Fueltala

6.5. EVALUACIÓN Y SELECCIÓN DE ALTERNATIVAS.

Con la finalidad de poder evaluar las dos alternativas presentadas se

determinaron algunos parámetros para la calificación de cada uno de los

ítems presentados y de acuerdo a la importancia en la construcción de los

mismos, por consiguiente se determinaron de la siguiente manera:

1. Evaluación técnicas 70 %

2. Evaluación Económica 20 %

3. Garantía técnica 5 %

4. Soporte técnico 5 %

Nombre Descripción Pesos Cyberia Projects

Global Sistemas

Alumno

Arquitectura Tres capas 10 10 15 10

Ambiente de desarrollo

Web 5 4 4 5

Plataforma Android v4.0 5 5 4 5

Metodología RUP: (Rational Unificated Process)

8 2 7 8

Page 65: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

49

Diseño

� Diagrama de casos de uso

� Diagrama de colaboración

� Diagrama de clases

� Modelo físico de BD

� Modelo lógico de BD

� Rational Rose

9 3 8 9

Front-end Java, Php 9 6 8 9

Back-end Sqlite 7 7 7 7

Pruebas de funcionamiento

� Prueba de Integración

� Prueba de Unidad

� Prueba de Validación

� Prueba del Sistema

� Prueba de Seguridad

� Prueba de Interfaces Graficas

7 6 7 7

Capacitación técnica

Administradores 4 1 3 4

Manuales técnicos

• Diccionario de Datos

• Manual de Usuario

5 5 5 5

Estándares

Base de Datos

� Tablas � Relaciones � PK � FK

Código de Programación

7 6 7 7

Page 66: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

50

� Variables � Constantes � Controles

Visuales

Ambiente de Desarrollo

� Java Eclipse � Motodev

5 4 5 5

Costo

� Tiempo de Financiamiento

� Forma de Pago

� Valor del proyecto

7 6 7 7

Garantía Técnica / Tiempo

� Cobertura garantía

� Tiempo 5 5 4 5

Soporte Técnico

� Realiza visitas técnicas

� Número de Visitas

7 7 6 7

Total 100 72 94 100

CUADRO N° 12

Título: Evaluación de alternativas

Fuente: Rafael Fueltala

Tabla de costos

Empresa Costo Porcentaje Cyberia Projects $750.00 60% Global Sistemas $450.00 40% Alumno $0,00 0%

CUADRO N° 13

Título: Tabla de costos

Fuente: Rafael Fueltala

Page 67: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

51

Tabla de garantía

Empresa Tiempo Porcentaje Cyberia Projects 6 meses 50% Global Sistemas 5 meses 20% Alumno 6 meses 30%

CUADRO N° 14

Título: Tabla de garantías

Fuente: Rafael Fueltala

Tabla de soporte técnico

Empresa Tiempo Porcentaje Cyberia Projects 4 meses 20% Global Sistemas 3 meses 15% Alumno 3 meses 10%

CUADRO N° 15

Título: Tabla de soporte técnico

Fuente: Rafael Fueltala

Realizando la evaluación definitiva de las propuestas se puede concluir

claramente que para el software de la empresa Cyberia Projects alcanzo los

siguientes resultados, en la evaluación de las alternativas sumo 72%, en la

evaluación económica su costo es de 750,00 soporte técnico estará 4

meses garantía técnica del sistema es de 6 meses.

Para la empresa desarrolladora de software Global Sistemas alcanzo los

siguientes resultados, en la evaluación de las alternativas sumo 94%, en la

evaluación económica su costo es de 800,00 soporte técnico estará 3

meses garantía técnica del sistema es de 5 meses.

La propuesta a desarrollar alcanzo los siguientes resultados, en la

evaluación de las alternativas sumo 100%, en la evaluación económica su

costo es de 0,00 su soporte técnico estará hasta 3 de meses y la garantía

técnica del sistema es de 6 meses.

Page 68: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

52

Entonces se concluye que la propuesta del desarrollo del tema de grado es

la mas idónea superando a las demás alternativas comerciales y empresas

desarrolladoras.

6.6. FACTIBILIDAD TÉCNICA. Con los datos obtenidos en las alternativas para el desarrollo del software

se procede a realizar la evaluación para ver cuál de estas es la que ofrece

mayores beneficios.

La propuesta presentada para el desarrollo de grado es la escogida, ya que

es la más conveniente en la parte técnica, económica, garantía y soporte

El porcentaje, obtenido en la parte técnica es alto pues esta alternativa

cumple con todos los aspectos para el buen funcionamiento y seguridad

del Sistema.

Esta alternativa en la parte económica es la más aceptable y la que cuenta

con el mayor porcentaje lo que significa que gran parte de los recursos son

gratuitos, y otros tiene un costo mínimo que los pueden asumir.

El nivel de porcentaje en servicio técnico es el más alto pues el

desarrollador del software por el momento brindará el soporte técnico

apropiado.

Con la realización del proyecto es donde se va a dar a conocer este

aspecto.

Al final de esta evaluación se puede verificar que esta alternativa para

software ofrece mayor factibilidad para la implementación de este

proyecto.

6.7. DESCRIPCIÓN DE PROCESOS.

6.7.1. INGRESO AL SISTEMA.

Para el proceso de ingreso al sistema de una manera segura y confiable, se

digita el nombre de usuario y una clave los cuales deben ser entregados

con anterioridad por el administrador, para de esta forma para acceder al

sistema pero pasando primera por una verificación en la base de datos para

comprobar si la información ingresada es correcta.

Page 69: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

53

GRÁFICO N° 12

Título: Ingreso al sistema

Fuente: Rafael Fueltala

6.7.2 MANTENIMIENTO DE TABLAS DE BASE DE DATOS

El sistema permitirá generar un mantenimiento de las tablas de la base de

datos que solo podrá realizarlas el usuario administrador, los

mantenimientos que se podrán hacer a las tablas será el de ingreso,

modificación y eliminación lógica de los datos.

GRÁFICO N° 13

Título: Mantenimiento de tablas

Fuente: Rafael Fueltala

6.7.3 REGLAS DEL NEGOCIO.

Un usuario luego de ingresar al sistema va a poder administrar la

información registrando una categoría, luego registrando lugares

importantes a esa categoría y finalmente asignándole un código QR al

lugar importante.

Page 70: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

54

GRÁFICO N° 14

Título: Mantenimiento de tablas

Fuente: Rafael Fueltala

6.7.4 INGRESO AL SISTEMA POR USUARIO TURISTA.

Para este proceso el usuario turista escaneara un código QR el mismo que

lo redirigirá a una pagina web móvil la cual le presentara información de

tipo informativa, audio visual y la capacidad de opinar y encontrar otros

códigos QR aledaños.

: Administrador : Sistema3: Imprime Codigo Qr

1: Contenido Multimedia

2: Almacena contenido y Genera Url

Page 71: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

55

6.8 DESCRIPCIÓN DE METODOLOGÍA DE DESARROLLO RUP.

6.8.1. FASE DE INICIO.

Esta fase aplicada al proyecto determina la descripción del mismo, se

inicia con una investigación preliminar, una introducción, un

planteamiento del problema, una definición de objetivos y una serie de

investigaciones para alcanzar el suficiente know-how y empezar a realizar

la propuesta. Luego fue necesario la identificación de las principales

funciones del sistema para el usuario, para realizar esta actividad se la

realizo utilizando el modelo de casos de uso simplificado, en el mismo que

se determino las funciones mas criticas, para tener una idea de cuál podría

ser la arquitectura del sistema lo que se pudo estructurar en la realización

de un esbozo que nos muestra los sistemas más importantes igualmente se

pudo determinar los riesgos que tenemos que considerar para la

planificación detallada en la fase de elaboración.

CAPTURA DE REQUISITOS

En la fase de inicio el levantamiento de requerimiento es de mucha

importancia ya que se empieza a conocer el negocio, identificando los

diferentes requisitos de las variables independiente (Gestión Turística) y la

variable dependiente (Tecnología QR) por lo tanto se definieron

actividades entre el usuario turista y la programación sobre lo que debe

realizar el sistema para alcanzar el resultado.

6.8.2. FASE DE ELABORACIÓN.

Se realiza el plan de proyecto, donde se completan los casos de uso y se

mitigan los riesgos. Planificar las actividades necesarias y los recursos

requeridos, especificando las características y el diseño de la arquitectura.

En esta etapa el objetivo es determinar la arquitectura Óptima.

Page 72: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

56

6.8.2.1. DIAGRAMA DE CASOS DE USO.

Este diagrama se usa para definir forma gráfica como se realizan los

procesos e identificar cuál de estos puede o no ser automatizables para

poder implementarlos en el sistema. Este tipo de diagrama da un punto de

vista para conocer más a fondo los requisitos que deberá cumplir el

sistema.

(Ver Anexo 5: Casos de uso del sistema)

Análisis y Diseño En esta actividad se especifican los requerimientos y se

describen sobre cómo se van a implementar en el sistema. Transformar los

requisitos al diseño del sistema. Desarrollar una arquitectura para el

sistema. Adaptar el diseño para que sea consistente con el entorno de

implementación.

6.8.3 FASE DE CONSTRUCCIÓN.

Se basa en la elaboración de un producto totalmente operativo y en la

elaboración del manual de usuario. El cual se encuentra en los anexos, que

al ser un sistema de tipo tecnológico cuenta con un Manual de Usuario y

un Manual Técnico, con los cuales el sistema está listo para ser enviado a

la comunidad de usuarios. En esta etapa el objetivo es llevar a obtener la

capacidad operacional inicial.

Implementación Se implementan las clases y objetos en ficheros fuente,

binarios, ejecutables y demás. El resultado final es un sistema ejecutable.

Planificar qué subsistemas deben ser implementados y en qué orden deben

ser integrados, formando el Plan de Integración. Cada implementador

decide en qué orden implementa los elementos del subsistema. Si

encuentra errores de diseño, los notifica. Se integra el sistema siguiendo el

plan.

Page 73: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

57

6.8.3.1 DIAGRAMA DE CLASES.

Este diagrama se utiliza para representar las clases existentes, conforme el

diseño de la base de datos, estas clases utilizadas para desarrollo del

sistema donde cada clase se convertirá en una tabla física para la base de

datos utilizada en el sistema, estas clases constan de su nombre, atributos,

procedimientos o métodos así como sus respectivas relaciones.

(Ver Anexo 6: Diagrama de Clases)

6.8.3.2 DIAGRAMA DE SECUENCIA.

El presente diagrama es utilizado para indicar la secuencia que siguen los

objetos dentro de una actividad, y de esta forma poder observar si cumple

su objetivo todo esto mediante una línea de tiempo que muestra los

procesos y acciones que realizan los actores y objetos y comprobar si

cumplen con la meta para lo que fueron planteados.

(Ver Anexo 7: Diagrama de Secuencia)

6.8.3.3 DIAGRAMA DE COLABORACIÓN.

Este tipo de diagramas se utiliza para mostrar la secuencia organizada de

los objetos que toman parte de la actividad y los enlaces entre estos. A

diferencia de los diagramas de secuencia, los diagramas de colaboración

muestran las relaciones entre las actividades de los objetos. La secuencia

de los procesos de ejecución se representan mediante números

secuenciales los cuales son unidos mediante flechas que van de un emisor

a un receptor.

(Ver Anexo 8: Diagrama de Colaboración)

6.8.3.4 DIAGRAMA DE COMPONENTES.

Este diagrama fue utilizado para representar los componentes a ser

utilizados para la realización del proyecto un componente son tablas,

archivos de datos, documentos entre otros.

(Ver Anexo 9: Diagrama de componentes)

Page 74: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

58

6.8.3.5 DIAGRAMA DE DESPLIEGUE.

El Diagrama de Despliegue es un tipo de diagrama en cual se especifica el

hardware y los aspectos como la plataforma sobre la que se ejecutara el

software.

(Ver Anexo 10: Diagrama de despliegue)

6.8.4 ETAPA DE TRANSICIÓN.

El objetivo es llegar a obtener el producto final del proyecto. Se realiza la

instalación del producto en el cliente y se procede al entrenamiento de los

usuarios. Realizar la transición del producto a los usuarios, lo cual incluye:

manufactura, envío, entrenamiento, soporte y mantenimiento del producto,

hasta que el cliente quede satisfecho, por tanto en esta fase suelen ocurrir

cambios.

Despliegue Esta actividad tiene como objetivo producir con éxito

distribuciones del producto y distribuirlo a los usuarios. Las actividades

implicadas incluyen: Probar el producto en su entorno de ejecución final.

Empaquetar el software para su distribución. Distribuir el software.

Instalar el software. Proveer asistencia y ayuda a los usuarios. Formar a los

usuarios y al cuerpo de ventas. Migrar el software existente o convertir

bases de datos. Cada una de estas etapas es desarrollada mediante el ciclo

de iteraciones, la cual consiste en reproducir el ciclo de vida en cascada a

menor escala. Los objetivos de una iteración se establecen en función de la

evaluación de las iteraciones precedentes. A medida que se avanza en el

proyecto, es decir, cuando se va pasando de una fase a otra, la importancia

relativa de cada uno de los Flujos de Trabajo va cambiando. Así, en las

iteraciones de la Fase de Inicio el trabajo se centra principalmente en el

Modelamiento del Negocio y en la captura y especificación de requisitos.

Pero en la fase de Construcción el desarrollo está enfocado en la

Implementación (codificación) y, en menor medida, en el Diseño.

Page 75: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

59

6.9 MODELO CONCEPTUAL.

Es el proceso de construcción de un modelo de los datos utilizados en una

organización, independiente de las consideraciones físicas. Permite

identificar entidades, relaciones, asociación de los atributos con los tipos

de entidad y relación, determinar claves principales. Este diagrama nos

permite visualizar que cada uno de las clases consta con su nombre,

atributos en los cuales se especificó el tipo de dato independientemente de

la información que se vaya a utilizar, también se describen sus métodos los

cuales pueden ser públicos o privados. Una de las partes importantes que

se puede observar es la multiplicidad y el tipo de relación que existe entre

clases.

(Ver Anexo 11: Modelo Conceptual de la Base de Datos)

6.10 MODELO FÍSICO.

El modelo físico es el proceso de producir la descripción de la

implementación de la base de datos en memoria secundaria: estructuras de

almacenamiento y métodos de acceso que garantice un acceso eficiente a

los datos. El propósito del diseño físico es describir cómo se va a

implementar físicamente el modelo conceptual obtenido. En este modelo

destaca la tabla: sitioImportante sin las cuales las demás tablas no podrían

relacionarse a excepción de la tabla: usuario.

(Ver Anexo 12: Modelo Físico de la Base de Datos)

6.11 DICCIONARIO DE DATOS.

Un diccionario de datos contiene las características lógicas de los datos

que se van a utilizar en el sistema que se está desarrollando, incluyendo

nombre, descripción, alias (sobrenombres), contenido y organización.

Estos diccionarios se desarrollan durante el análisis de flujo de datos y

ayuda a los analistas que participan en la determinación de los

requerimientos del sistema, su contenido también se emplea durante el

diseño del proyecto. Identifica los procesos donde se emplean los datos y

Page 76: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

60

los sitios donde se necesita el acceso inmediato a la información, se

desarrolla durante el análisis de flujo de datos y auxilia a los analistas que

participan en la determinación de los requerimientos del sistema, su

contenido también se emplea durante el diseño.

(Ver Anexo 13: Diccionario de Datos)

6.12 ESTÁNDARES.

6.12.1 ESTÁNDAR DE DISEÑO.

El estándar ha ser utilizado en este proyecto en lo que conlleva al diseño

de el diagrama de clases se regirá a que la relación entre clases se denotará

por la utilización de (1.*), (*,*) dependiendo de la relación que exista entre

estas.

La clase será descrita de la siguiente manera:

� Superior: Contiene el nombre de la Clase

� Intermedio: Contiene los atributos (o variables de instancia) que

caracterizan a la Clase (pueden ser private, protected o public).

� Inferior: Contiene los métodos u operaciones, los cuales son la forma

como interactúa el objeto con su entorno.

6.12.2 ESTÁNDAR DE DESARROLLO.

Los estándares a seguir para la representación del sistema en el diagrama

de casos de uso será la siguiente:

� El nombre de los componentes que intervienen en el diagrama

llevarán su descripción en la parte inferior de su representación gráfica.

� Se respetarán todas las normativas impuestas por el lenguaje de

modelamiento (UML).

Page 77: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

61

6.12.3 ESTÁNDAR DE BASE DE DATOS.

Tablas.

El nombre de las tablas se escribirá en singular, la primera letra en

mayúscula y las demás en minúsculas, sin espacios, sin tildes ni la letra

“ñ”. Ejemplo:

Nombre Nomenclatura

Tabla de Usuario Usuario

Tabla de Categoría Categoria

CUADRO N° 16

Título: Estándares de Tablas

Fuente: Rafael Fueltala

Campos.

Los campos tendrán un formato las tres primeras letras del nombre de tabla

que pertenece, un guion bajo y el nombre del atributo. Ejemplo:

Nombre Nomenclatura

Nombre de usuario Usu_nombre

Apellido de usuario Usu_apellido

Dirección de usuario Usu_direccion

CUADRO N° 17

Título: Estándares de campos

Fuente: Rafael Fueltala

Relaciones

Las relaciones deben ser según los requerimientos que se encuentran en

cada tabla, especificar la clave foránea que es heredada y cómo se llama la

relación tanto de una tabla otra, especificando dicha relación.

Page 78: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

62

Nombre Nomenclatura

Relación entre Iglesia e Imagen fk_Iglesia__Imagen

Relación entre Imagen y

SitioImportante fk_Imagen__SitioImportante

CUADRO N° 18

Título: Estándares de Relaciones

Fuente: Rafael Fueltala

Claves.

Todas las claves primarias y foráneas deberán ser especificadas que tipo de

claves para poder identificar. Ejemplo:

Nombre Nomenclatura

Código de la Iglesia Igl_id PK

Código de la Imagen Img_id FK

CUADRO N° 19

Título: Estándares de Claves

Fuente: Rafael Fueltala

6.12.4 ESTÁNDARES DE PROGRAMACIÓN.

Dentro de la aplicación va a existir distintos tipos de objetos, pueden ser:

variables, constantes, procedimientos, botones, cajas de texto etc.; los

nombres de los mismos estarán compuestos de un prefijo seguido del

nombre del objeto.

Clases.

Los nombres de las clases poseen un sufijo en conjunto con el nombre

propio de la clase, el nombre es significativo y está en singular.

Page 79: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

63

Nombre Nomenclatura

Clase de Usuario Usuario.class

Clase de Imagen Imagen.class

CUADRO N° 20

Título: Estándares de Clases

Fuente: Rafael Fueltala

Nombre de las funciones y procedimientos.

El nombre de una función o procedimiento debe contener las siguientes

especificaciones: Inicia en mayúscula, Identifica claramente el contenido,

Inicia con un verbo.

Nombre Nomenclatura

Obtener Iglesia ObtenerIglesia()

Guardar Usuario GuardarUsuario ()

CUADRO N° 21

Título: Estándares de Funciones y Procedimientos

Fuente: Rafael Fueltala

Variables.

Las variables dependiendo de su alcance se dividen en globales y locales,

el nombre de la variable consta de un prefijo seguido del nombre de la

variable. El nombre debe de tener la siguiente sintaxis:

Nombre Nomenclatura

Variable Local Private $pass

Variable Publica Public $aux

CUADRO N° 22

Título: Estándares de Variables

Fuente: Rafael Fueltala

Page 80: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

64

Tipos De Datos

Tipo de Dato Cuando se debe utilizar

VARCHAR

Para campos de texto de tamaño variable de hasta 5000 caracteres. Siempre se utilizará VACHAR2 en lugar de VARCHAR.

CHAR Para campos de texto de tamaño fijo, por ejemplo para el uso de estados (SI/NO), (A/I).

NUMBER

Para campos numéricos. Siempre se especificará la precisión, por ejemplo para un número de 5 cifras enteras y 2 decimales será: NUMBER (7,2).

DATE Para campos de fecha y de fecha y hora. CLOB Para campos de texto de más de 5000 caracteres.

BLOB Para almacenamiento de archivos binarios, por ejemplo imágenes, archivos pdf, Word, etc.

XMLTYPE

Para campos en formato XML sobre los cuales se ejecutarán consultas con XPATH desde la Base de Datos. Si no se requerirá utilizar el motor de XML de la Base de Datos, es preferible utilizar un campo CLOB

CUADRO N° 23

Título: Tipos de datos

Fuente: Ing. Jaime Basantes

Controles Visuales.

Los controles visuales poseen un nombre estándar, el cual se identificara la

primera letra en mayúscula del control seguido con un prefijo todo en

minúscula después se identifica por el nombre del control.

Nombre Prefijo Ejemplo Label Lbl Lbl_Nombre TextBox Txt Txt_Telefono ComboBox Cbo Cbo_Categoria Table Tbl Tbl_Imagenes Button Btn Btn_Guardar RadioButton Opt Opt_Sexo

CUADRO N° 24

Título: Estándares de Controles Visuales Html

Fuente: Rafael Fueltala

Page 81: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

65

6.13 PANTALLAS Y REPORTES.

El presente proyecto de grado funciona a través de la web, el cual se puede

ingresar a través de un navegador web, se recomienda Google Chrome.

Ingrese a la siguiente dirección www.tuqrismo.netii.net para iniciar la

administración del sistema Quito Q-Rioso.

Cuando se termina de cargar la página se muestran 2 opciones para

ingresar al sistema, la primera forma escribiendo un usuario y una

contraseña y presionando el botón Ingresar.

La segunda forma, dando click en la burbuja celeste el cual activara la

cámara para que el usuario indique su QR Card para un acceso inmediato.

GRÁFICO N° 15

Título: Pantalla de Login

Fuente: Rafael Fueltala

En la pantalla de Login el administrador escribe su usuario de mínimo 12

caracteres y clave de mínimo 8 caracteres para ingresar, luego da clic en el

botón Ingresar, el mismo que permitirá el acceso si el usuario y clave

fueron ingresados correctamente.

Page 82: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

66

GRÁFICO N° 16

Título: Pantalla de Login manual (izq), Login QR (der)

Fuente: Rafael Fueltala

Si el Login fue correcto el administrador ingresa al menú para administrar

el contenido, la información y generar las páginas web.

GRÁFICO N° 17

Título: Pantalla de Inicio del sistema

Fuente: Rafael Fueltala

Al mismo tiempo luego del ingreso correcto al sistema, se presenta una

información de ingreso del usuario la misma que nos permitirá conocer la

fecha del último ingreso de un usuario y sus respectivas modificaciones

para registrarlas y así llevar una auditoria del sistema.

Page 83: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

67

GRÁFICO N° 18

Título: Nombre de usuario y notificaciones

Fuente: Rafael Fueltala

Para registrar un usuario clic en la opción Usuarios Registrados para

poder registrar otro usuario que pueda administrar el sistema así como

también gestionar a los usuarios que ya se encuentran registrados. Aquí se

encuentran los botones para modificar, eliminar o ver la QR Card del

usuario.

GRÁFICO N° 19

Título: Administración de usuarios

Fuente: Rafael Fueltala

A continuación se muestra una pagina para registro, la cual da una idea

general de la forma en que se puede ingresar la información al sistema, por

ejemplo para el registro de nuevos Usuarios del sistema, clic en la opción

Nuevo Usuario, del menú de la izquierda, luego se cargará la página para

registrar un usuario, luego de llenar los campos correspondientes presione

el botón Guardar para guardar los cambios y generar una QR Card.

Page 84: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

68

GRÁFICO N° 20

Título: Registro de usuarios

Fuente: Rafael Fueltala

GRÁFICO N° 21

Título: Modificación de usuario

Fuente: Rafael Fueltala

Page 85: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

69

Para la modificación de un usuario, clic en el icono del lápiz ( ) para

poder editar un usuario, clic en el icono de una X ( ) para eliminar al

usuario, en este formulario están las mismas validaciones que al momento

de crear un usuario, finalmente presione el botón actualizar ( ) para

guardar los cambios o cancelar ( ) para volver a ver los usuarios

registrados.

Validaciones.

Todos los formularios que requieran el ingreso de informacion para su

posterior almacenamiento, modificacion, busqueda y eliminacion cuentan

con su respectiva validacion y mensaje de error si los datos ingresados no

cumplen la condicion impuesta para ese campo de texto. Cabe mencionar

que todos los campos con un asterisco rojo (* ) son campos obligatorios y

la informacion no se guardara o actualizara hasta que se llene

correctamente dichos campos.

GRÁFICO N° 22

Título: Validación del campo de texto Apellido

Fuente: Rafael Fueltala

Paginación.

Para evitar el exceso de información mostrada en una sola página se utilizo

una paginación simple y así ordenar mejor la información mostrada. Como

se puede apreciar en el Grafico N° 23 de los sitios importantes registrados,

en la parte inferior derecha hay una paginación de color celeste para poder

ver una mini lista en cada pagina de todos los sitios registrados.

GRÁFICO N° 23

Título: Paginación simple

Fuente: Rafael Fueltala

Page 86: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

70

Señalamientos o Markers en Google Maps

Los mapas usados para indicar una localización de un sitio importante

constan de un marker o globo rojo que al dar clic sobre este despliegue una

pequeña viñeta o ventana pop up con información del sitio importante.

GRÁFICO N° 24

Título: Mapa con varios markers

Fuente: Rafael Fueltala

Códigos QR

A cada sitio importantes como a los usuarios registrados se les asigno su

respectivo código QR para un acceso veloz a su pagina web y al inicio del

sistema respectivamente, estos códigos QR pueden ser visualizados

cuando el usuario lo desee dando clic en el icono de un pequeño código

QR ( ) además de ser impresos desde el icono de una impresora ( ).

Page 87: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

71

GRÁFICO N° 25

Título: Código QR de un sitio importante y QR Card de usuario

Fuente: Rafael Fueltala

6.14 PRUEBAS Y DEPURACIÓN.

6.14.1. PRUEBAS DE UNIDAD.

Se concentra en la unidad más pequeña, el componente o modulo de

software. La verificación en el diseño se realizo verificando que exista la

persistencia en cada una de las clases la misma que permitirá mantener la

consistencia de los datos. También se determino las relaciones entre cada

una de las clases, su multiplicidad y el manejo de las características

propias de un diseño orientado a objetos. Es decir la presencia de herencia,

polimorfismo y encapsulamiento este tipo de prueba se lo realizo con

mayor énfasis en las clases que contienen información que permite la

interfaz entre la capa de la lógica de negocio (capaNegocio) y la capa de

datos (capaDatos).

Las pruebas de unidad se realizan en la capa de negocio, los procesos

internos que se relacionan con las acciones del sistema de reconocimiento

de códigos QR para el centro histórico de Quito, con la finalidad de que

este tipo de almacenamiento de la información pueda mantener una

estructura organizada y lógica. Esta prueba se realizo y el software

mantiene su lógica, se considero además que es capaz de mantener la

integridad de la información y sus datos poniéndose más énfasis en las

relaciones, claves primarias, claves foráneas del modelo lógico del

negocio.

Page 88: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

72

6.14.2 PRUEBAS DE INTEGRACIÓN.

Esta prueba se la realiza individualmente a cada uno de los componentes

del negocio clases, objetos y operaciones. Para ello fue necesaria la

generación de código de cada uno de los elementos que intervienen en

todo el sistema verificando visualmente que el código generado cumpla

con todos los parámetros establecidos de un buen programador.

La prueba de integración es una prueba para construir mientras que al

mismo tiempo se aplican las pruebas para descubrir errores asociados con

la interfaz. La integración de los datos, en la tabla de los usuarios,

determina la robustez del modelo, colocando especial énfasis en las

asociaciones de las clases que tienen relación con la información que

manda lo datos turístico de cada atractivo del Centro histórico de Quito.

6.14.3 PRUEBAS DE VALIDACIÓN.

Las pruebas de validación empiezan tras la culminación de la prueba de

integración, cuando se ha ejercitado los componentes individuales se ha

terminado de ensamblar el software como paquete y se ha corregido los

errores de la interfaz.

Este tipo de pruebas se realizo en el modulo de seguridad verificando que

el acceso al sistema mantenga los estándares ISO que permitan verificar la

seguridad y consistencia de la capa de presentación del sistema.

La prueba de concentra en las acciones visibles, que permita verificar el

encriptamiento de la información ingresada por teclado. En el desarrollo

de esta prueba se determinaron los criterios de validación es decir que el

sistema este manejando excepciones, ventanas de alerta, precaución,

mensajes de teclas permitidas y no permitidas.

Page 89: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

73

6.14.4 PRUEBAS DEL SISTEMA.

Al final del desarrollo del software se incorporara a los componentes del

sistema (software, hardware y personas) y se realiza una serie de pruebas

de integración y validación.

La carga de datos en el sistema constituye un factor determinante

especialmente al realizar migraciones de datos, restricciones de acceso al

sistema, versiones alfa, beta, gama, esta prueba concluye con la

verificación y consistencia de cada una de las capas que constituyen el

mismo, presentación, reglas del negocio y acceso a datos.

6.14.5 PRUEBAS DE SEGURIDAD.

La interrupción es uno de los componente que se aplica a este tipo de

prueba en las líneas de código, que consideramos como criticas en todo

modelo de negocio por lo tanto las interrupciones y depuración del sistema

se las ejecuta al inicio del desarrollo a la terminación del mismo.

6.14.6 PRUEBAS DE INTERFAZ GRÁFICA DE USUARIO.

Verifica la interacción del usuario con el software. La meta de las

pruebas de GUI es asegurar que la interfaz de usuario provea al usuario

el acceso apropiado para acceder y navegar por las funciones de la

aplicación. Además, las pruebas GUI asegura que los objetivos dentro

de la interfaz funcionen como se esperaba y conforme a los estándares.

Se realizó una prueba con la ejecución del manejo de los iconos de

acceso al sistema y la integración con la base de datos y el sistema de

información. Se verifico la facilidad de navegación mediante un

ejemplo de pantallazos de las funcionalidades. A través de los

pantallazos de ejemplo que cumplan los estándares de GUI además de

verificar el estándar de comunicación de datos.

Page 90: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

74

6.15 INSTALACIÓN DEL SISTEMA.

6.15.1. REQUISITOS DE INSTALACIÓN.

El sistema debe funcionar en un servidor web donde se disponga de una

conexión a internet, caso contrario se debe contratar un servicio de

alojamiento web o hosting. A modo de prueba y demostración se puede

instalar Quito Q-Rioso en una red local instalando el programa

WampServer, el mismo que consta de los siguientes programas y

servicios:

� Servidor http: Apache 1.13.19 o superior x.

� Servidor de bases de datos: MySQL 3.23.x o superior.

� Intérprete del lenguaje PHP 4.4.3 o superior.

Quito Q-Rioso puede ser usado con la mayoría de los navegadores:

Internet Explorer (versión 5.5 +), Firefox, Mozilla, Netscape, Opera,

Camino, Omniweb, Epiphany, Konqueror.

6.15.2. INSTALACIÓN DEL SERVIDOR LOCAL.

Es conveniente poder disponer de un servidor web para probar la

funcionalidad de Quito Q-Rioso, en este tema se muestra una instalación

en un equipo o red local, dentro de un entorno seguro y rápido. También se

describe los pasos para montar un servidor de base de datos con la

herramienta phpMyAdmin además de un intérprete del lenguaje PHP.

Instalación de WampServer.

Para el correcto funcionamiento de la administración de Quito Q-Rioso

son indispensables los siguientes componentes:

� Apache 2.2.x

� Php 5.x

� Mysql 5.5.x

� PhpMyadmin 3.3.x

Una vez tenemos descargado el software WampServer se inicia la

instalación ejecutando el archivo WampServer2.1e-x32.exe. Debe recordar

Page 91: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

75

que se tiene que arrancar el ejecutable como administrador, sino lo hace

así habrá errores en la instalación y seguramente en la ejecución posterior

de WampServer. Para instalar como administrador en el explorador de

archivos seleccione el archivo WampServer2.1e-x32.exe, pulse el botón

derecho del ratón, aparecerá un menú, y seleccionáis pulsando el botón

izquierdo del ratón la opción 'Ejecutar como administrador', como se

puede ver en la imagen.

GRÁFICO N° 26

Título: Instalar WampServer como administrador

Fuente: Rafael Fueltala

La primera ventana que se obtiene es la de bienvenida al Setup Wizard de

la instalación, pulse el botón para continuar.

GRÁFICO N° 27

Título: Pantalla de inicio de WampServer

Fuente: Rafael Fueltala

Page 92: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

76

La siguiente ventana muestra el acuerdo de licencia, seleccionamos – I

accept the agreement - y botón para continuar.

GRÁFICO N° 28

Título: Acuerdo de licencia WampServer

Fuente: Rafael Fueltala

En esta ventana tiene que determinar en que directorio se va a realizar la instalación, por defecto nos muestra una ruta pero si deseamos instalar en

otra localización pulsamos el botón , una vez tengamos el

directorio destino decidido pulsamos el botón para continuar.

GRÁFICO N° 29

Título: Directorio de trabajo de WampServer

Fuente: Rafael Fueltala

Page 93: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

77

En esta ventana seleccione los iconos que quiera crear el instalador

automáticamente, icono en el inicio rápido o/y icono en el escritorio,

pulsamos el botón para continuar.

GRÁFICO N° 30

Título: Accesos directos de WampServer

Fuente: Rafael Fueltala

Finalmente se obtiene una ventana con el resumen de las tareas que va a

realizar el Wizard de WampServer 2.1e, pulse el botón y la

instalación comenzará.

GRÁFICO N° 31

Título: Directorio de trabajo de WampServer

Fuente: Rafael Fueltala

Page 94: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

78

GRÁFICO N° 32

Título: Instalando WampServer

Fuente: Rafael Fueltala

Durante el proceso de instalación aparece el explorador de archivos para

que seleccionemos el navegador que va a utilizar, por defecto utilizará el

Internet Explorer de Microsoft, si desea utilizar otro debe buscar el

ejecutable y pulse el botón – Abrir - .

GRÁFICO N° 33

Título: Escogiendo un navegador web para WampServer

Fuente: Rafael Fueltala

Page 95: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

79

Pulsamos el botón Next para continuar. Bien ya se ha terminado la instalación, si deja chequeado – Launch WampServer 2 now – WampServer 2.1e arrancará una vez pulse el botón – Finish -

GRÁFICO N° 34

Título: Finalización de la estación de WampServer

Fuente: Rafael Fueltala

Arranque y Configuración de WampServer.

Una vez haya arrancado WampServer 2.1e, doble click sobre el icono del

escritorio, tendrá un icono en el área de notificación, parte derecha de la

barra de tareas, el icono tiene como imagen una W, si no lo visualiza es

por se ha quedado oculto, si pincháis sobre el botón con la flecha aparecerá

una ventana con los iconos ocultos.

GRÁFICO N° 35

Título: Ícono de WampServer

Fuente: Rafael Fueltala

Page 96: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

80

El siguiente paso que se va a realizar es la selección del idioma con el que

WampServer 2.1e quiere que trabaje, esto no aplica ni a MySQL, PHP o

Apache. Coloque el puntero del ratón sobre el icono de WampServer 2.1e y

pulse el botón derecho, aparecerá un menú y seleccione – Lenguage -, por

defecto el idioma seleccionado en el ingles, y seleccione – spanish.

GRÁFICO N° 36

Título: Elegir lenguaje de WampServer

Fuente: Rafael Fueltala

Administración de Wampserver.

WampSever incluye un menú emergente (panel de control) para poder

realizar las tareas de administración, para acceder a él ponga el puntero del

ratón sobre el icono de la barra de notificaciones y pulse el botón izquierdo

del ratón, aparece el panel de administración de WampServer que puede

ver en la imagen.

GRÁFICO N° 37

Título: Menú de WampServer

Fuente: Rafael Fueltala

Page 97: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

81

Desde aquí se administra todo el entorno de trabajo, puede arrancar, parar

los servicios de Apache y MySQL, puede administrar MySQL con

phpMyAdmin y muchas más tares específicas de cada componente.

6.15.3. INSTALACIÓN DE LA BASE DE DATOS.

Primero arranque phpMyAdmin, para ello utilice el navegador que

prefiera, una vez tenga el navegador en marcha teclee la siguiente URL en

el navegador: http://localhost/phpmyadmin

Ya tiene la pagina principal de phpMyAdmin, seleccione – Base de datos,

bien, lo primero que vera es una lista de las bases de datos que tenga

creadas, en la parte inferior se ve un cuadro - Crear nueva base de datos -

ahí introduzca el nombre de la nueva base de datos MySQL, escriba

tuqrismo - como nombre de base de datos, pulse el botón - Crear -

GRÁFICO N° 38

Título: Crear base de datos en phpMyAdmin

Fuente: Rafael Fueltala

Luego ingrese a la base de datos, de clic en la nueva base de datos creada

“ tuqrismo” y escoja la opción SQL para cargar el Script de la base de

datos.

Page 98: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

82

A continuación copie y pegue el script en el área de texto y pulse el botón

continuar, por ejemplo el script de la tabla categoría y lo pegamos en el

área de texto:

create table CATEGORIA ( CAT_ID int not null, CAT_DESCRIPCION varchar(300), CAT_ESTADO char, primary key (CAT_ID) ); Luego de pulsar el botón continuar se debe de haber creado la base de

datos y listado las tablas de la misma, en el lado derecho de la pantalla de

phpMyAdmin, lo cual demuestra que se creo exitosamente la base de

datos.

GRÁFICO N° 39 Título:

Tablas de la base de datos en phpMyAdmin

Fuente: Rafael Fueltala

Una vez instalado wampserver sin inconvenientes y subido la base de datos, se

procederá a copiar la carpeta llamada Tuqrismo dentro del directorio

c:\wamp\www\. Ahora en un navegador web escriba la siguiente dirección:

http://localhost/tuqrismo para asi iniciar la administración del sistema Quito Q-

Rioso.

Page 99: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

83

Instalación de aplicaciones en teléfono Android.

Para una mejor experiencia visual del modulo web móvil se recomienda

instalar un navegador web móvil, para esto se debera descargar un

navegador como Opera mini, ya sea desde el android market o desde una

Pc para su posterior instalación en el teléfono android a través de un cable

Usb. Lo primero que hay que hacer es bajar de internet el archivo con

extensión .apk que quiera instalar. Lo pasa al móvil mediante cable y luego

ir al menú de ajustes y pulse tal y como se ve en las siguientes imágenes.

Primero se abre el menú, se elige la opción Aplicaciones, luego se activa la

opción Orígenes desconocidos

GRÁFICO N° 40

Título: Menú de ajustes de Android

Fuente: Rafael Fueltala

Ahora sólo hay que ir con un navegador de archivos donde se haya

copiado los apk y lo ejecuta para empezar la instalación de la aplicación.

6.16 RECOPILACIÓN Y CARGA DE DATOS.

Para cargar los datos en el software el administrador será el encargado de

gestionar la información, se debe recopilar la información turística

Page 100: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

84

almacenada antes de implementar el sistema, se procederá a realizar la

respectiva migración, pero en este caso lamentablemente no existen

registros almacenados en una base de datos, esto implica que se debe

ingresar toda la información de forma manual ya que estos datos se

encuentran alojadas en trípticos y hojas volantes.

6.17 PRUEBAS Y DEPURACIÓN FINAL EN FUNCIONAMIENTO.

La información que se encontraba en hojas volantes y trípticos ahora están

alojados de manera segura en la base de datos de la plataforma virtual,

indicando que el software debe funcionar correctamente. Un ejemplo sería

que al momento de realizar el proceso de registro de Iglesias y sitios

importantes se necesita conocer la información y las validaciones de los

textos y números que se deben ingresar.

Las pruebas a realizar serán la creación y registros de las iglesias, museos,

plazas, hoteles, bares, bancos, etc del Centro Histórico de Quito, usando un

formulario de registro.

6.18 PUESTA EN MARCHA DEL SISTEMA.

Una vez que se instala y configura la Base de Datos en WampServer, se

tiene que definir el funcionamiento del sistema el presentara una pantalla

de inicio o Login donde el usuario Administrador ingresara su usuario y

clave para ingresar al menú y administrar la información de cada Sitio

importante del Centro Histórico de Quito.

Son todas aquellas actividades que tienen lugar para la ejecución del

sistema.

� Formación del equipo de trabajo

Las personas que intervendrán en la instalación del sistema serán el

administrador de la base de datos del instituto y el programador del

sistema a implementarse.

� Planificación de la implantación

Page 101: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

85

La fecha de la implantación se la deberá establecer de manera conjunta con

las personas que formaran parte del equipo de trabajo.

� Niveles de seguridad

Se utilizan 4 niveles para aseguramiento de la calidad: prueba,

verificación, validación y certificación.

� Prueba

Proceso de ejecutar un programa con la intención explícita de hallar

errores, es decir hacer que el programa falle.

� Verificación y Validación

La Verificación tiene la intención de hallar errores ejecutando un programa

en un ambiente simulado. La Validación se refiere al uso del software en

un ambiente no simulado para hallar errores.

� Certificación

Es la garantía de lo correcto de un programa.

� Estrategias de Prueba

� Un caso de prueba se diseña con la intención de encontrar errores

en la forma en que el sistema los procesará.

6.19 CAPACITACIÓN AL USUARIO TÉCNICO.

Para una posible capacitación al personal técnico se tomara en cuenta las

herramientas que se están utilizando se explicara cómo realizar las

interfaces de comunicación entre WampServer y el sistema la interfaz

gráfica. El personal técnico también será capacitado en la carga de los

datos, y en el manejo e impresión de los códigos QR.

Lugar de Capacitación:

� Instalaciones de la municipalidad del Centro histórico de Quito.

Tiempo de la Capacitación:

� 2 horas diarias por 3 días.

Temario de la Capacitación:

� Manejo del Sistema

Page 102: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

86

� Manejo de la Plataforma

� Manejo Base de Datos

� Manejo de Seguridades

Material de la Capacitación:

� Manual Técnico

� Proyector

� Pizarra

� Marcadores

Método de Capacitación

� Demostrativa

Evaluación de la Capacitación

� Evaluación sobre el sistema: practico

Cronograma de Capacitación

DÍA 1 DÍA 2 DÍA 3

Configuración del

servidor

Manejo de sistema:

Módulo de

mantenimiento

Módulo de seguridades

Manejo de la

Plataforma al 100%

Arquitectura del sistema Manejo de la base de

datos con phpMyAdmin

Manejo de la base de

datos al 100%

Introducción a los

códigos QR y Scanner

de códigos QR

Tips y generación de

los códigos QR

Generación,

impresión y

colocación de los

códigos QR

CUADRO N° 25

Título: Capacitación al usuario técnico.

Fuente: Rafael Fueltala

6.20 CAPACITACIÓN AL USUARIO FINAL.

El usuario posiblemente recibirá la capacitación en el departamento

tecnológico, se iniciara el mismo con la explicación de las tecnologías

utilizadas para el aplicativo, las ventajas y usos de la Tecnología QR y mas

Page 103: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

87

configuraciones sobre sus SmartPhones para una mejor experiencia. La

metodología aplicada en la capacitación al usuario final será demostrativa,

iniciando la misma con la interfaz que va a ocupar las transacciones,

realizando una explicación detallada de cada uno de los elementos que

interviene en el Sistema de manejo de contenido Turístico Virtual.

Lugar de Capacitación:

� Instalaciones de la Municipalidad del Centro Histórico de Quito

Tiempo de la Capacitación:

� 3 horas

Temario de la Capacitación:

� Manejo del Sistema

� Manejo del SmartPhone

Material de la Capacitación:

� Manual de Usuario � Proyector � Pizarra � Marcadores � SmartPhone

Método de Capacitación

� Demostrativa

HORA 1 HORA 2 HORA 3

Manejo del Módulo de seguridad

Manejo del Módulo de mantenimiento

Manejo del Módulo web móvil

Manejo sobre el sistema al 100%

Instalación de un navegador web móvil y un Scanner de códigos QR en sus SmartPhone

Ejecución y pruebas de la aplicación en el navegador a través del reconocimiento de códigos QR

Manejo de las aplicaciones para sus SmartPhones al 100%

CUADRO N° 26

Título: Capacitación al usuario técnico.

Fuente: Rafael Fueltala

Page 104: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

88

6.21 CONCLUSIÓN.

El despliegue de información de una manera ordenada, veloz y concreta

conjuntamente con la Tecnología QR que proporciona un atajo para

acceder a dicha información dieron como resultado un método muy eficaz

y accesible para todos los turistas y usuarios que deseen obtener

información del Centro Histórico de Quito. El desarrollo del sistema en 3

capas y la metodología RUP ayudaron a clarificar los procesos y el manejo

de la información alojada en la base de datos se la pueda realizar de una

manera rápida y eficaz. Las herramientas de desarrollo que se utilizaron

para el desarrollo del sistema permitieron crear una interfaz muy amigable

e interactiva para el usuario permitiendo de esta forma que el software sea

fácil de utilizar.

6.22 RECOMENDACIÓN.

Se recomienda mantener la integridad en la información turística, para no

perder la veracidad y la confianza en el sistema por parte de la comunidad

turística. Para ello se debe realizar capacitaciones a los usuarios sobre el

correcto uso del sistema para que así logren un mejor aprovechamiento del

sistema completo y sirva como herramienta para automatizar las tareas. Se

recomienda cuidar y proteger las QR Card generadas por el sistema ya que

un mal uso o pérdida de la misma podría conllevar a resultados y errores

no esperados e incalculables. Finalmente se recomienda hacer eco de los

comentarios recogidos por el sistema y dejados por el turista el cual deja

una sugerencia para poder mejorar no solo el sistema sino también la

calidad de la información y la infraestructura del Centro Histórico de

Quito.

Page 105: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

89

6.23. ASPECTOS ADMINISTRATIVOS.

6.23.1 CRONOGRAMA DE ACTIVIDADES.

Este cronograma fue utilizado para describir la programación de las

actividades básicas del proyecto y la distribución del tiempo estimado para

su cumplimiento. Constituye un recurso de ordenamiento y distribución

de la ejecución de las actividades del proyecto así como el control de

tiempo.

(Ver Anexo 14: Cronograma).

6.23.2 SOPORTE ECONÓMICO.

El soporte económico nos permite obtener una perspectiva general de los

valores económicos que se van a emplear para la investigación, ejecución

y puesta en marcha del proyecto, a continuación se muestra un cuadro en

el cual se describen dichos valores.

(Ver Anexo 15: Soporte económico).

6.24 BIBLIOGRAFÍA

Se ha consultado en mayor medida artículos publicados en congresos o

sitios web ya que éstos son el medio normal de difusión de los últimos

avances e investigaciones. Ello es debido en primer lugar a que la novedad

relativa de la tecnología de los Códigos QR no ha dado lugar todavía a una

extensa bibliografía editada.

1. PIMPLER, ERIC.(2009). “Mashup Mania with Google Maps.”, Estados

Unidos.

2. BUNGEMARIO, (2000), La Investigación Científica: Su Estrategia Y

Su Filosofía, Editorial Siglo XXI, 2 da Edición, México.

3. GIBSON, RICH, (2006),“Google Maps Hacks: Tips & Tools for

Geographic Searching and Remixing”, Estados Unidos

4. HEURTEL, O., (2010) “PHP 5.3 desarrollar un sitio web dinámico e

interactivo”, España

Page 106: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

90

5. FIRTMAN, MAXIMILIANO. (2004) “Programación para Celulares

con Java (J2ME)” .ISSN1988-7213, Argentina

6. MARCO, CALDAS. (1999), Preparación y evaluación de proyectos,

Edit.: Amazonas, Edic: 01,Quito Ecuador.

7. E. KENDALL, KENNETH Y E. KENDALL, JULIE, (2005), Análisis

y diseño de sistemas., Edit. “La Ceiba”, Edic: 06, Monterrey-México.

8. Slideshare (2010). Uso de normas para citas y referencias. Recuperado

el 07 de octubre del 2012 de http://www. slideshare.

net/renatarodrigues/uso-de-normas-apa-para-citas-y-referencias

9. Monografias.com (sin fecha). Principales tipos de Investigación.

Recuperado el 25 de junio del 2012 de http://www. monografías. com/

trabajos58 / principales – tipos- investigación / principales -tipos-

investigacion.shtml

10. Monografias.com (sin fecha). Metodología OMT (Object Modeling

Technique). Recuperado el 18 de julio del 2012 de

http://www.monografias.com/trabajos13/metomt/metomt.shtml

11. Desarrolloweb.com (2004). La plataforma .net. Recuperado el 14 de

mayo del 2012 de http://www.desarrolloweb.com/articulos/1704.php

12. IEPI (2000). Ley de propiedad intelectual. Recuperado el 3 de Junio del

2012 de http://www.iepi.gob.ec

13. Quito-Turismo (2007). Turismo Sostenible. Recuperado el 10 de

Septiembre del 2012 de http://www.quito-

turismo.gov.ec/index.php/estadisticas/seguridad-y-turismo

14. FayerWayer (1999). Aplicaciones de los códigos QR. Recuperado el 15

de octubre del 2012 de http://www.fayerwayer.com/los-codigos-qr-y-

por-que-debieran-importarnos/

15. ISO (2011). Estándar ISO/IEC 18004 para Captura de imagen y

Códigos QR. Recuperado el 12 de Agosto del 2012 de

http://raidenii.net/files/datasheets/misc/qr_code.pdf

Page 107: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

91

ANEXOS

Page 108: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

92

ANEXO 1: Códigos QR a profundidad

Un código QR es un tipo especial de código de barras porque se puede guardar

números, letras y caracteres japoneses. El código QR fue creado en 1994 por la

compañía japonesa Denso-Wave, la cual fue una subsidiaria de Toyota. El

estándar que usa es el ISO/IEC 18004. Los códigos QR tienen una licencia libre.

El código QR es una matriz de datos, la matriz mas pequeña tiene 21x21 pixeles y

la matriz más grande tiene 177x177 pixeles. Estos tamaños son llamados

versiones. La matriz de 21x21 es la versión 1, 25x25 es la versión 2 y así cada

versión va aumentado en 4 pixeles la matriz. La matriz 177x177 es la versión 40.

Adicionalmente los códigos QR incluyen una corrección de errores, cuando se

codifica un código QR también se crea algunos datos redundantes que ayudaran a

los lectores de códigos QR recuperar una parte del mensaje si estuvieren dañados.

Hay 4 niveles de corrección L (lowest, 7% de recuperación), M (Medium, 15% de

recuperación), Q (Quality, 25% de recuperación) y H (high, 30% de

recuperación). La capacidad de almacenamiento de un código QR depende de su

versión y su nivel de corrección de errores. Hay 4 tipos de datos que un código

QR puede codificar.

ESTRUCTURA DE UN CÓDIGO QR

La imagen de abajo es una estructura de un código QR en su versión 1. Los

pixeles en blanco y negro representan los patrones de búsqueda y los patrones de

tiempo. Los patrones de búsqueda son usados para ayudar a los programas de

decodificación sobre la posición de un código QR. Los patrones de tiempo son

usados para ayudar a los programas de decodificación a determinar las

coordenadas y posición del código QR. Las partes en amarillo son los datos

codificados incluyendo la corrección de errores almacenados. Y las partes en

celeste esta la información del nivel corrección de errores y la mascara con patrón.

Todo esto es llamado formato de la información.

Page 109: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

93

■ Datos codificados incluyendo la corrección de errores ■ Formato de la información

RESUMEN CODIFICACIÓN DE CÓDIGO QR

El primer paso para codificar un código QR es formar una cadena binaria de bits.

Esta cadena incluye los caracteres del mensaje original y también información

importante para un escáner de códigos QR.

Después de formar la cadena de bits, se usara esta para generar la corrección de

errores, esta corrección de errores usa el algoritmo de Reed-Solomon que es un

proceso complicado.

Después de generar la cadena de bits y la corrección de errores, se generan 8

diferentes códigos QR cada uno con un diferente mascara con patrón. Cada

mascara con patrón cambia los pixeles blancos y negros de acuerdo a su formula.

Después de determinar la mejor mascara con patrón se procede a generar el

código QR.

EJEMPLO

Capacidad: en la versión 1 y un nivel de corrección Q, se puede almacenar 27

caracteres numéricos y 16 caracteres alfanuméricos.

Codificación de los datos: se va a codificar la información ABCDE123 a un

código QR en su versión 1 con un nivel de corrección H.

Page 110: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

94

Indicador de modo: el indicador de modo tiene una longitud de 4 bits. Si los

datos son numéricos se usa 0001, si los datos son alfanuméricos se usa 0010, se

usara 0010.

Contador de caracteres: en la versión del 1-9 los datos numéricos tienen una

longitud de 10 bits si los datos son numéricos y una longitud de 9 bits si son datos

alfanuméricos. Como el ejemplo tiene 8 caracteres entonces se convierte el 8 en

su representación binaria de 9 bits que es 000001000

Codificando datos en binario: como son datos alfanuméricos se dividirá los

datos en grupos de 2 así: AB CD E1 23 donde cada letra y numero será convertido

a un valor equivalente según la siguiente tabla:

0 0 A 10

K 20

U 30

+ 40

1 1

B 11

L 21

V 31

- 41

2 2

C 12 M 22

W 32

. 42

3 3

D 13

N 23

X 33

/ 43

4 4

E 14

O 24

Y 34

: 44

5 5

F 15

P 25

Z 35 6 6

G 16

Q 26

[sp] 36

7 7

H 17

R 27

$ 37 8 8

I 18

S 28

% 38

9 9

J 19

T 29

* 39 Ahora se multiplica su valor equivalente por 45 y se suma el valor equivalente del segundo término.

"AB" "CD" "E1" "23" 45*10+11 45*12+13 45*14+1 45*2+3

461 553 631 93

Y luego se convierte cada resultado a binario de 11 bits así:

00111001101 01000101001 01001110111 00001011101

Finalizador: luego de esta conversión de los datos se agrega como un estándar

0000 al final de toda la cadena binaria.

Page 111: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

95

Codificar a palabras clave: como el código QR versión 1 con nivel de

corrección de errores H soporta 9 palabras clave se debe aumentar 11101100

como un estándar obteniendo así la cadena binaria final:

00100000 01000001 11001101 01000101 00101001 11011100 00101110

10000000 11101100

Ahora esta cadena binaria se convertirá a su equivalente decimal y así poder

generar la corrección de errores: 32 65 205 69 41 220 46 128 236

Corrección de errores: una vez obtenido estos coeficientes decimales se aplicara

el algoritmo Reed-Solomon para generar una cadena cíclica para poder recuperar

una parte de los datos almacenados, al ser un proceso complejo se omitirá este

proceso y se mostrara el resultado del algoritmo.

42 159 74 221 244 169 239 150 138 70 237 85 224 96 74 219 61

Mascaras con patrón Cada mascara con patrón usa una formula para determinar

si se cambia o no el color del bit o pixel. Se usa las coordenadas de la matriz en la

formula de la mascara usada y si el resultado es 0 se usara el bit opuesto en esa

coordenada. Por ejemplo si el bit de coordenadas (1,3) es 1, y la formula da como

resultado 0 para la coordenada, entonces se pondrá un 0 en la coordenada (1,3) en

lugar de 1.Aquí hay una lista de las formulas de las mascaras con patrón.

Numero de Mascara Formula para cambiar el bit

000 (y + x) mod 2 == 0

001 y mod 2 == 0

010 x mod 3 == 0

011 (y + x) mod 3 == 0

100 ( (y / 2) + (x / 3) ) mod 2 == 0

101 ((y * x) mod 2) + ((y * x) mod 3) == 0

110 ( ((y * x) mod 2) + ((y * x) mod 3) ) mod 2 == 0

111 ( ((y + x) mod 2) + ((y * x) mod 3) ) mod 2 == 0

Page 112: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

96

Se utilizara la mascara con patrón: 011

Formato de la información: se selecciona 10 por ser un nivel de corrección H

Finalmente se ubica el formato de la información y la cadena de datos en el código QR obteniendo el siguiente resultado:

Page 113: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

97

ANEXO 2: Descripción de Fundamentación legal

LEY ORGÁNICA DE EDUCACIÓN SUPERIOR

Art. 5.- Derechos de las y los estudiantes.- Son derechos de las y los estudiantes

los siguientes:

a) Acceder, movilizarse, permanecer, egresar y titularse sin discriminación

conforme sus méritos académicos

Art. 26 de la Constitución de la República del Ecuador establece que la educación

es un derecho de las personas a lo largo de su vida y un deber ineludible e

inexcusable del Estado. Constituye un área prioritaria de la política pública y de la

inversión estatal, garantía de la igualdad e inclusión social y condición

indispensable para el buen vivir. Las personas, las familias y la sociedad tienen el

derecho y la responsabilidad de participar en el proceso educativo;

Art. 32.- Programas informáticos.- Las empresas que distribuyan programas

informáticos tienen la obligación de conceder tarifas preferenciales para el uso de

las licencias obligatorias de los respectivos programas, a favor de las instituciones

de educación superior, para fines académicos.

LEY DE COMERCIO ELECTRÓNICO:

Artículo 1.- Objeto de la Ley .- Esta Ley regula los mensajes de datos, la firma

electrónica, los servicios de certificación, la contratación electrónica y telemática,

la prestación de servicios electrónicos, a través de redes de información, incluido

el comercio electrónico y la protección a los usuarios de estos sistemas.

Artículo 4.- Propiedad Intelectual.- Los mensajes de datos estarán sometidos a

las leyes, reglamentos y acuerdos internacionales relativos a la propiedad

intelectual.

Artículo 5.- Confidencialidad y reserva.- Se establecen los principios de

confidencialidad y reserva para los mensajes de datos, cualquiera sea su forma,

medio o intención. Toda violación a estos principios, principalmente aquellas

referidas a la intrusión electrónica, transferencia ilegal de mensajes de datos o

Page 114: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

98

violación del secreto profesional, será sancionada conforme a lo dispuesto en esta

Ley y demás normas que rigen la materia.

Artículo 9.- Protección de datos.- Para la elaboración, transferencia o utilización

de bases de datos, obtenidas directa o indirectamente del uso o transmisión de

mensajes de datos, se requerirá el consentimiento expreso del titular de éstos,

quien podrá seleccionar la información a compartirse con terceros.

La recopilación y uso de datos personales responderá a los derechos de

privacidad, intimidad y confidencialidad garantizados por la Constitución Política

de la República y esta Ley, los cuales podrán ser utilizados o transferidos

únicamente con autorización del titular u orden de autoridad competente.

No será preciso el consentimiento para recopilar datos personales de fuentes

accesibles al público, cuando se recojan para el ejercicio de las funciones propias

de la administración pública, en el ámbito de su competencia, y cuando se refieran

a personas vinculadas por una relación de negocios, laboral, administrativa o

contractual y sean necesarios para el mantenimiento de las relaciones o para el

cumplimiento del contrato.

Artículo 12.- Duplicación del mensaje de datos.- Cada mensaje de datos será

considerado diferente. En caso de duda, las partes pedirán la confirmación del

nuevo mensaje y tendrán la obligación de verificar técnicamente la autenticidad

del mismo.

Artículo 50.- Información al consumidor.- En la prestación de servicios

electrónicos en el Ecuador, el consumidor deberá estar suficientemente informado

de sus derechos y obligaciones, de conformidad con lo previsto en la Ley

Orgánica de Defensa del Consumidor y su Reglamento.

Cuando se tratare de bienes o servicios a ser adquiridos, usados o empleados por

medios electrónicos, el oferente deberá informar sobre todos los requisitos,

Page 115: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

99

condiciones y estricciones para que el consumidor pueda adquirir y hacer uso de

los bienes o servicios promocionados.

La publicidad, promoción e información de servicios electrónicos, por redes

electrónicas de información, incluida la Internet, se realizará de conformidad con

la Ley, y su incumplimiento será sancionado de acuerdo al ordenamiento jurídico

vigente en el Ecuador.

En la publicidad y promoción por redes electrónicas de información, incluida la

Internet, se asegurará que el consumidor pueda acceder a toda la información

disponible sobre un bien o servicio sin restricciones, en las mismas condiciones y

con las facilidades disponibles para la promoción del bien o servicio de que se

trate.

En el envío periódico de mensajes de datos con información de cualquier tipo, en

forma individual o a través de listas de correo, directamente o mediante cadenas

de mensajes, el emisor de los mismos deberá proporcionar medios expeditos para

que el destinatario, en cualquier tiempo, pueda confirmar su suscripción o solicitar

su exclusión de las listas, cadenas de mensajes o bases de datos, en las cuales se

halle inscrito y que ocasionen el envío de los mensajes de datos referidos.

La solicitud de exclusión es vinculante para el emisor desde el momento de la

recepción de la misma.

LEY DE PROPIEDAD INTELECTUAL:

Sección V

Disposiciones Especiales sobre ciertas Obras, Parágrafo Primero

De los Programas de Ordenador

Art. 8. La protección del derecho de autor recae sobre todas las obras del ingenio,

en el ámbito literario o artístico, cualquiera que sea su género, forma de expresión,

mérito o finalidad. Los derechos reconocidos por el presente Título son

independientes de la propiedad del objeto material en el cual está incorporada la

Page 116: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

100

obra y su goce o ejercicio no están supeditados al requisito del registro o al

cumplimiento de cualquier otra formalidad.

Las obras protegidas comprenden, entre otras, las siguientes:

a) Libros, folletos, impresos, epistolarios, artículos, novelas, cuentos, poemas,

crónicas, críticas, ensayos, misivas, guiones para teatro, cinematografía,

televisión, conferencias, discursos, lecciones, sermones, alegatos en derecho,

memorias y otras obras de similar naturaleza, expresadas en cualquier forma;

b) Colecciones de obras, tales como antologías o compilaciones y bases de datos

de toda clase, que por la selección o disposición de las materias constituyan

creaciones intelectuales, sin perjuicio de los derechos de autor que subsistan sobre

los materiales o datos;

g) Proyectos, planos, maquetas y diseños de obras arquitectónicas y de ingeniería;

h) Ilustraciones, gráficos, mapas y diseños relativos a, la topografía, y en general a

la ciencia;

j) Obras de arte aplicada, aunque su valor artístico no pueda ser disociado del

carácter industrial de los objetos a los cuales estén incorporadas;

k) Programas de ordenador; y,

l) Adaptaciones, traducciones, arreglos, revisiones, actualizaciones y anotaciones;

compendios, resúmenes y extractos; y, otras transformaciones de una obra,

realizadas con expresa autorización de los autores de las obras originales, y sin

perjuicio de sus derechos.

Sin perjuicio de los derechos de propiedad industrial, los títulos de programas y

noticieros radiales o televisados, de diarios, revistas y otras publicaciones

periódicas, quedan protegidos durante un año después de la salida del último

número o de la comunicación pública del último programa, salvo que se trate de

publicaciones o producciones anuales, en cuyo caso el plazo de protección se

extenderá a tres años.

Art. 28. Los programas de ordenador se consideran obras literarias y se protegen

como tales. Dicha protección se otorga independientemente de que hayan sido

incorporados en un ordenador y cualquiera sea la forma en que estén expresados,

ya sea en forma legible por el hombre (código fuente) o en forma legible por

Page 117: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

101

máquina (código objeto), ya sean programas operativos y programas aplicativos,

incluyendo diagramas de flujo, planos, manuales de uso, y en general, aquellos

elementos que conformen la estructura, secuencia y organización del programa.

Art. 29. Es titular de un programa de ordenador, el productor, esto es la persona

natural o jurídica que toma la iniciativa y responsabilidad de la realización de la

obra. Se considerará titular, salvo prueba en contrario, a la persona cuyo nombre

conste en la obra o sus copias de la forma usual. Dicho titular está además

legitimado para ejercer en nombre propio los derechos morales sobre la obra,

incluyendo la facultad para decidir sobre su divulgación. El productor tendrá el

derecho exclusivo de realizar, autorizar o prohibir la realización de

modificaciones o versiones sucesivas del programa, y de programas derivados del

mismo.

Art. 30. La adquisición de un ejemplar de un programa de ordenador que haya

circulado lícitamente, autoriza a su propietario a realizar exclusivamente:

Una copia de la versión del programa legible por máquina (código objeto) con

fines de seguridad o resguardo; Fijar el programa en la memoria interna del

aparato, ya sea que dicha fijación desaparezca o no al apagarlo, con el único fin y

en la medida necesaria para utilizar el programa; y, Salvo prohibición expresa,

adaptar el programa para su exclusivo uso personal, siempre que se limite al uso

normal previsto en la licencia. El adquirente no podrá transferir a ningún título el

soporte que contenga el programa así adaptado, ni podrá utilizarlo de ninguna otra

forma sin autorización expresa, según las reglas generales.

Page 118: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

102

ANEXO 3: Diseño y análisis de la entrevista

Entrevistado: Sra. Luz Elena Coloma

Entrevistador: Rafael Fueltala

1. ¿Cuál es la importancia de tener un punto de información turístico

virtual?

Respuesta: pienso que tener siempre a la mano un poco de información de un

lugar vuelve más atractivo al mismo porque es muy interesante conocer los inicios

o datos interesantes del lugar, especialmente cuando no está presente un guía

turístico o un historiador.

Análisis: Con la elaboración de la pregunta permite saber el nivel de importancia,

relevancia e interés que tiene un punto de información virtual.

2. ¿Qué clase de contenido le gustaría que se le brindara al momento de

indagar en un punto de información virtual?

Respuesta: Estaba pensando en un contenido visual más interactivo con

imágenes, animaciones y videos que me permita adentrarme más en conocer el

lugar que he venido a visitar.

Análisis: En esta pregunta se fundamentó para saber con qué clase de contenido

le gustaría contar a las personas, ya que de ahí se podría sacar una información de

más o menos lo que ellas requieren.

3. ¿Ha oído acerca de los Códigos QR, su función y sus aplicaciones?

Respuesta: Si, había escuchado sobre el tema además de ver videos en la web

pero desconozco de su funcionamiento y sus aplicaciones.

Análisis: Con la elaboración de la pregunta permite saber si las personas conocen

esta tecnología y sus aplicaciones lo que implica también a enfocarse en el

impacto que tendrá esta tecnología con todas sus aplicaciones.

Page 119: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

103

4. ¿Le gustaría que un lugar turístico se combine con esta tecnología para así

mostrar un contenido más dinámico e interactivo?

Respuesta: por supuesto sería un gran aprovechamiento de la tecnología y

desencadenaría un gran interés de las personas por los libros especialmente en los

estudiantes que les servirá de gran apoyo para su desarrollo visual y desarrollo de

su aprendizaje.

Análisis: Con la elaboración de la pregunta permite saber que esta tecnología será

el motor para llenar de conocimiento y recuperar la atención y fidelidad de los

turistas mediante más contenido visual e interactivo.

5. ¿Tiene un dispositivo móvil con conectividad a internet en este momento?

Respuesta: por supuesto tengo un Samsung Galaxy, con conectividad Wifi el cual

me permite navegar en internet en cualquier lugar y a cualquier hora.

Análisis: Con la elaboración de la pregunta sabemos que una persona promedio

que visita un lugar turístico si posee un dispositivo móvil con conectividad a

internet lo cual es un requisito indispensable para poder acceder al sistema virtual

y su contenido a través de los códigos QR.

Page 120: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

104

ANEXO 4: Diseño de la Encuesta

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

El cuestionario esta dirigido a los turistas del Centro Histórico de Quito tiene como finalidad diagnosticar la Situación actual de los Atractivos del Centro Histórico de Quito en tal virtud se le pide una respuesta sea sincera e imparcial.

Instrucciones: Marque con una X la respuesta que usted crea conveniente.

1. ¿Cuanta importancia asignaría usted a la presencia de un Centro Histórico

en la Ciudad de Quito?

• Ninguna ( )

• Poca ( )

• Mucha ( )

2. ¿En qué estado considera usted que se encuentran los Atractivos Turísticos

del Centro Histórico de Quito? seleccione una respuesta con una X

ATRACTIVOS BUENO MALO DEPLORABLE Iglesias y Conventos Museos Bibliotecas Plazas Hotel Hostal Teatro 3. ¿La información que usted obtiene sobre el Centro Histórico de Quito es?

• Inexistente ( )

• Escasa ( )

• Suficiente ( )

4. Cree usted que la poca afluencia de visitantes a las Iglesias, museos, plazas

del Centro Histórico de Quito se deba a:

• Falta de interés de las autoridades ( )

• Falta de interés de las operadoras de turismo ( )

• Falta de valoración de nuestra propia cultura ( )

• Escasa difusión ( )

• Falta de mantenimiento de los atractivos ( )

Page 121: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

105

5. ¿Cual cree usted que sería la mejor herramienta para brindar información

del Centro Histórico de Quito?

• Trípticos ( )

• Una Guía o Revista ( )

• Paginas Web ( )

• Circuitos Turísticos Guiados usando un Dispositivo móvil ( )

6. ¿En su visita al centro histórico de Quito encontró puntos de información

turísticos?

• Si ( )

• No ( )

7. ¿Cómo calificaría a la información turística entregada sobre restaurantes,

hoteles, cafeterías y demás lugares de interés del Centro Histórico de Quito?

• Inexistente ( )

• Escasa ( )

• Suficiente ( )

8. ¿Actualmente tiene o ha tenido un dispositivo de Telefonía móvil o

Smartphone?

• Si ( )

• No ( )

9. ¿Para navegar o consultar información en internet usando su dispositivo

móvil usted dispone de?

• Plan controlado de datos ( )

• Internet gratuito o Wi-Fi ( )

• Ninguno ( )

10. ¿Usted alguna vez ha escuchado de la nueva Tecnología de los Códigos

QR o sus aplicaciones?

• Si ( )

• No ( )

• Nunca ( )

Page 122: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

106

ANEXO 5: Casos de uso

Page 123: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

107

ANEXO 6: Diagrama de Clases

Escanea / Selecciona la informacion a visualizar

Pagina Web

Interfaz del software

<<extend>>

Smartphone

<<extend>>

<<extend>>

<<extend>>

IngresaUsuario

Descarga la aplicacion

<<include>>

Instala

<<include>>

Page 124: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

108

ANEXO 7: Diagramas de Secuencia

ANEXO 8: Diagrama de Colaboración

: Administrador : Administrador : Sistema : Sistema

1: Contenido Multimedia

2: Almacena contenido y Genera Url

3: Imprime Codigo Qr

: Administrador : Administrador : Sistema : Sistema : Usuario : Usuario

1: Contenido Multimedia

2: Almacena contenido y Genera Url

3: Descarga Aplicacion Smartphone

4: Instala Aplicacion

5: Inicia Aplicacion

6: Escanea codigo qr

7: Muestra Pagina Web del sitio

: Administrador : Sistema3: Imprime Codigo Qr

1: Contenido Multimedia

2: Almacena contenido y Genera Url

: Administrador : Sistema : Usuario

2: Almacena contenido y Genera Url 4: Instala Aplicacion

1: Contenido Multimedia 3: Descarga Aplicacion Smartphone

5: Inicia Aplicacion

6: Escanea codigo qr

7: Muestra Pagina Web del sitio

Page 125: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

109

ANEXO 9: Diagrama de componentes

ANEXO 10: Diagrama de despliegue

Page 126: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

110

ANEXO 11: Modelo Conceptual

ANEXO 12: Modelo Físico

Page 127: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

111

ANEXO 13: Diccionario de datos

ESQUEMA NOMBRE CODIGO

QR Auditoria AUDITORIA

QR Categoria CATEGORIA

QR Itinerario ITINERARIO

QR Det_Itinerario DETITINERARIO

QR Imagen IMAGEN

QR SitioImportante SITIOIMPORTANTE

QR Usuario USUARIO

ESQUEMA NOMBRE_CAMPO TABLA TIPO DE DATO TAMAÑO

QR aud_accion Auditoria Variable characters 100

QR aud_direccion_ip Auditoria Variable characters 30

QR aud_estado Auditoria Characters 1

QR aud_fecha_ingreso Auditoria Date & Time

QR aud_fecha_salida Auditoria Date & Time

QR aud_id Auditoria Integer

QR aud_modulo Auditoria Variable characters 200

QR aud_nombre_pag Auditoria Variable characters 300

QR cat_descripcion Categoria Variable characters 400

QR cat_estado Categoria Characters 1

QR cat_id Categoria Integer

QR cat_nombre Categoria Variable characters 100

QR img_direccion Imagen Variable characters 400

QR img_estado Imagen Characters 1

QR img_id Imagen Integer

QR sit_descripcion SitioImportante Variable characters 500

QR sit_direccion SitioImportante Variable characters 200

QR sit_estado SitioImportante Characters 1

QR sit_horario SitioImportante Time

QR sit_id SitioImportante Integer

QR sit_latitud SitioImportante Number

QR sit_longitud SitioImportante Number

QR sit_nombre SitioImportante Variable characters 100

QR sit_responsable SitioImportante Variable characters 100

QR sit_telefono SitioImportante Variable characters 15

QR usu_apellido Usuario Variable characters 100

QR usu_clave Usuario Variable characters 8

QR usu_direccion Usuario Variable characters 200

QR usu_estado Usuario Characters 1

QR usu_id Usuario Integer

QR usu_login Usuario Variable characters 50

QR usu_mail Usuario Variable characters 100

QR usu_nombre Usuario Variable characters 100

Page 128: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

112

QR usu_telefono Usuario Variable characters 15

QR Iti_id Itinerario Integer

QR Iti_nombre Itinerario Variable characters 300

QR Iti_num_visitas Itinerario Integer

QR Iti_fecha_creacion Itinerario Date

QR Iti_estado Itinerario Char

QR Det_id Detalle_itinerario Integer

QR Sit_id Detalle_itinerario Integer

QR Iti_id Detalle_itinerario Integer

QR Det_qr_path Detalle_itinerario Variable characters 350

QR Det_contador Detalle_itinerario Integer

QR Det_estado Detalle_itinerario Char

ESQUEMA NOMBRE TABLA 2 TABLA 1 QR Sitio_imagenes Imagen SitioImportante QR sitio_categoria SitioImportante Categoria QR Sitio_imagen Imagen SitioImportante QR usuario_auditoria Auditoria Usuario QR Itinerario_det_Itinerario DetItinerario Itinerario QR Sitio_det_Itinerario Itinerario SitioImportante

ANEXO 14: Cronograma

Page 129: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

113

Page 130: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

114

ANEXO 15: Soporte Económico

PRESUPUESTO INGRESOS $ Aporte personal $ 1.600,00 EGRESOS $ Estación de trabajo o portátil $ 700,00 Impresora Lexmark Mp190 $ 120,00 Útiles de oficina $ 180,00 Servicios básicos $ 70,00 Copias $ 10,00 Internet $ 120,00 Varios $ 300,00

TOTAL $ 1.500,00

Page 131: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

115

MANUAL DE USUARIO TURISTA

Page 132: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

116

OBJETIVO DEL MANUAL DE USUARIO TURISTA

El objetivo de hacer el manual de usuario turista servirá tanto para los turistas

como para los administradores del sistema ya que en todo momento se

recomienda ponerse de lado del turista para conocer cuales son sus necesidades y

así cumplir con la mayoría de sus expectativas. Durante el transcurso de este

manual se abordaran temas como requisitos para una visualización correcta del

sistema, conexión a internet, ingreso, comentarios, etc.

REQUISITOS FUNCIONALES PARA SMARTPHONES

Para una correcta experiencia en el uso y visualización del sistema se debe tomar

en cuenta los siguientes requisitos:

- Un SmartPhone de última generación con cámara, que soporte la

instalación de aplicaciones móviles, un navegador de internet móvil y

conectividad a internet inalámbrico Wi-Fi o paquete de datos.

- El SmartPhone deberá estar permanentemente conectado a internet, para

aprovechar el contenido multimedia y de Geolocalización, se recomienda

aprovechar los puntos gratuitos de internet (Wi-Fi) disponibles en el

Centro Histórico de Quito en las zonas de la Plaza de San Francisco, Plaza

del Teatro, Plaza de la independencia, Plaza interior del municipio entre

otras.

- Descargar o instalar cualquier aplicación que reconozca códigos QR como

lo es i-nigma, Quick Marck entre otras.

- Acceder a internet usando un navegador móvil, sea este Opera mini,

Firefox, Chrome o Safari para una mejor experiencia y velocidad.

INGRESO AL SISTEMA

Una vez cumplidos los requisitos en el SmartPhone inicie la aplicación de

reconocimiento de códigos QR que tenga disponible y escanee el código QR que

se encuentre en su recorrido por el Centro Histórico de Quito. Luego de escanear

este código QR y dependiendo de la aplicación, se abrirá un navegador web que lo

Page 133: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

117

llevara directamente a una pagina web móvil con información turística del sitio

donde se encuentra escaneando el código, por ejemplo la Catedral Metropolitana

de Quito.

Page 134: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

118

MANEJO DEL SITIO WEB MÓVIL

En esta página web móvil se encuentra varias opciones que se describen a

continuación:

BARRA DE OPCIONES

Información: es la página actual en la que se encuentra luego de escanear un

código QR, la cual consta de información importante sobre el lugar al cual le

pertenece el código QR.

Ruta QR: este botón al presionarlo informará sobre los demás sitios que forman

parte de una Ruta QR y de esta forma puede conocer los demás atractivos del

Centro Histórico de Quito que poseen más información interesante para el turista.

Cabe notar que cada sitio de la ruta esta calificado de 1 a 3 estrellas, esta

calificación se asigna dependiendo de la valoración del turista en su comentario.

Si presiona en el botón se re direccionará a una pagina con otra ruta QR

disponible. Y de igual manera se podrá visualizar la información turística de los

distintos lugares que formen parte de esa ruta.

Page 135: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

119

Buscar: al presionar buscar se redirigirá a otra pagina web en la que podrá buscar

lugares importantes aledaños ordenados por categoría. Y luego se podrá visualizar

estos lugares en un mapa para poder llegar y ubicarse.

Page 136: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

120

BOTONES DE AUDIO GUÍA

Botón Reproducir ( > ) / Pausar ( ii ): cuando un sitio importante conste de una

audio guía estos botones estarán disponibles para la reproducción o pausa del

sonido de la audio guía cuando lo desee, siempre y cuando este conectado a

internet.

Botón Detener ( <- ): este botón detendrá la reproducción del audio guía.

BOTONES PARA IMÁGENES Y OPINIONES

Botón Imágenes: cuando presione este botón se desplegara una pantalla para con

una galería de imágenes que tenga el sitio importante, con su respectiva

descripción y animación automática.

Botón Comentarios: al presionar este botón aparecerá un formulario donde el turista calificara al sitio (Regular, bueno, interesante) según la calidad de la

Page 137: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

121

información obtenida, las imágenes que observo, así como dejar una sugerencia y ver los comentarios que hicieran otros turistas que visitaron el lugar.

Finalmente si no se dispone de un código QR se puede ingresar a Quito Q-Rioso

escribiendo la siguiente URL en el navegador web del SmartPhone y en el cual

aparecerá la siguiente pantalla de inicio con las opciones ya antes vistas.

Page 138: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

122

MANUAL DE USUARIO ADMINISTRADOR

Page 139: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

123

OBJETIVO DEL MANUAL DE USUARIO ADMINISTRADOR

El objetivo principal es proporcionar una guía paso a paso, recorriendo todos y

cada uno de los módulos del sistema de manera clara mediante descripciones y

gráficos, de esta manera se entregará al usuario un manual fácil de entender

además de su interfaz flexible e intuitiva para el registro de información.

INGRESO AL SISTEMA

Para ingresar al sistema abrimos un navegador y digitamos la dirección

www.tuqrismo.netii.net o si se encuentra usando el sistema de forma local digite

la siguiente dirección http://localhost/tuqrismo.

Entonces se abre la pantalla de bienvenida al sistema Quito Q-Rioso para que

ingrese su usuario y su contraseña y presione el botón ingresar

u opcionalmente active la cámara e indique su QR Card

para ingresar de forma veloz al sistema.

k ff

Si obtiene un mensaje de a pesar de estar seguro

de haber ingresado bien sus datos, comuníquese con el administrador para la

verificación de los datos o solicitarle una nueva contraseña.

Page 140: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

124

INICIO DEL SISTEMA

Luego de haber pasado la verificación de su usuario y contraseña se mostrara el

inicio del sistema, en la parte izquierda consta el menú de administración y en la

parte derecha se cargaran todas las pantallas para el ingreso de la información.

MENÚ DE ADMINISTRACIÓN

El menú de administración esta dividido en 3 submenús expandibles, cada menú

se describe a continuación:

Inicio web: es la vista normal para la administración del sistema.

Inicio web móvil: es un simulador del modulo web móvil donde se apreciara las

paginas web de la misma manera en la que se observaría en el navegador de un

Smartphone.

Contáctame: muestra la información de contacto.

Ver Sitios de Interes: esta opción muestra una lista de sitios importantes del

Centro Histórico de Quito ordenada por categorías, además contiene las opciones

para agregar imágenes, información, generación del audio, búsqueda y

eliminación de los sitios importantes.

Page 141: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

125

Crear Sitios de Interes: esta opción permite agregar un nuevo sitio importante,

una vez ingresados todos los datos informativos y de Geolocalización estará listo

para asignarle un código QR y automáticamente generar una página web móvil.

Ver Categorías: esta opción del menú abrirá una página para administrar las

categorías registradas, para dar de alta o baja a una categoría.

Crear Categoría: esta opción permite crear una nueva categoría para organizar

los sitios importantes, además de contar con una imagen que identifique a la

categoría.

Ver Rutas QR: esta opción permite administrar una Ruta QR, una Ruta QR es un

conjunto de sitios importantes a los cuales se les ha asignado un código QR y de

esta forma poder controlar y generar una estadística dependiendo de las visitas y

comentarios de cada uno de los sitios importantes que conforman la Ruta QR.

Crear Ruta QR: esta opción permite crear una nueva Ruta QR, eligiendo un

nombre y escogiendo varios sitios importantes del Centro Histórico de Quito

ordenados por categorías. Después de la creación de la Ruta QR automáticamente

se crearan los códigos QR asignados a cada punto de la Ruta QR para poder

imprimirlos y colocarlos físicamente.

Ver usuarios: muestra la administración de los usuarios, edición y eliminación de

cada uno de ellos, además la posibilidad de imprimir su respectiva QR Card en

caso de daño o pérdida.

Crear Usuario: abre una pantalla para el registro de nuevos usuarios del sistema,

luego de completar el formulario de registro se generara automáticamente su QR

Card con la cual podrá ingresar al sistema tan solo indicando su QR Card a la

cámara.

Page 142: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

126

CATEGORÍAS

Para una mejor organización, búsqueda, filtro y clasificación de la información

Quito Q-Rioso dispone de la administración de categorías, así como una imagen

pequeña que la diferencia de las demás categorías. Más adelante se mostrara como

registrar un sitio importante y asignarle una categoría.

Crear Categoría en esta pantalla se ingresara un nombre o descripción corta para

la nueva categoría, además una imagen pequeña es requerida para distinguir una

categoría de otra. Nótese que los campos con un asterisco rojo (* ) son requeridos.

Ver Categorías en esta pantalla puede editar una categoría presionando el botón

o eliminar una categoría existente presionando el botón luego aparecerá un

cuadro de dialogo indicando si desea confirmar la eliminación de la categoría.

Page 143: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

127

Modificar una Categoría cuando presiona el icono de editar se abrirá una

nueva pantalla con los datos de la categoría para realizar los cambios que desee.

SITIOS IMPORTANTES

Crear Sitio Importante para la creación es indispensable tener a mano cierta

información obligatoria del sitio, como lo es su dirección y su ubicación en el

mapa para una mejor referencia para el turista, cuando ingrese una descripción del

lugar presione la opción Generar Audio para convertir su descripción a audio, lo

cual generará una audio guía cuando el visitante ingrese al sitio importante

utilizando su Smartphone. En el lado derecho Mapa también puede buscar calles y

lugares importantes, escribiendo una dirección o nombre y presionando el botón

si no encuentra el lugar que desea deberá seleccionar una ubicación

dando clic en el mapa hasta que aparezca un marker rojo. Finalmente presione el

botón para registrar el sitio importante.

Page 144: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

128

Nótese que los campos con un asterisco rojo (* ) son requeridos y ninguna

información será almacenada hasta que se llenen dichos campos.

Ver Sitios Importantes para ver los sitios importantes escoja una categoría de la

lista desplegable o si desea realizar una búsqueda del

lugar clic en la opción Buscar con un icono de una lupa . También se puede

editar un sitio importante presionando el botón o eliminar una categoría

existente presionando el botón luego aparecerá un cuadro de dialogo

indicando si desea confirmar la eliminación de la categoría.

Adicionalmente si desea conocer la ubicación en el mapa de los sitios

importantes, entonces presione el botón y se abrirá una nueva

página con un mapa mostrando todos los sitios importantes de la categoría y su

información. En el mapa se muestran varios markers (puntos o globos rojos)

indicando la posición de un lugar, si da clic en uno de ellos se abrirá una ventana

pop-up para ver la información de ese lugar, por ejemplo el Museo de la Ciudad:

Page 145: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

129

Si desea regresar a la lista de los sitios importantes ordenados por categorías

presione el botón superior derecho , o alternativamente también

podía cambiar y ver en el mapa los sitios importantes de otra categoría,

seleccionándola en la lista desplegable .

Page 146: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

130

IMÁGENES PARA EL SITIO IMPORTANTE

Es importante tener varias imágenes de referencia para cada sitio importante. En

el menú escoja la opción Ver Sitios de Interes, elija una categoría y presione el

botón para administrar las imágenes de cada sitio.

Agregar Imagen presione el botón para agregar las imágenes que desee que se

muestren en la página web móvil del sitio de interés. Aparece una pantalla donde

debe seleccionar una imagen y una descripción corta para dicha imagen.

Finalmente presione el botón para almacenar la información en el

servidor. “ Tome en cuenta que las imágenes no deben ser demasiado grandes

ni demasiados pequeñas ya que el navegador móvil tarda mucho en cargar o

distorsiona este tipo de imágenes.”

Imágenes de Museo de la Ciudad

Puede editar una imagen presionando el botón o eliminar una imagen existente

presionando el botón luego aparecerá un cuadro de dialogo indicando si desea

confirmar la eliminación de la imagen.

Page 147: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

131

RUTAS QR

Una ruta QR es un conjunto enlazado de sitios importantes de una sola o de varias

categorías y a los cuales se les asignará un código QR y que al estar enlazados y

formar parte de una ruta se evitará en parte que algunos sitios importantes sean

poco visitados. Cada ruta llevará un control estadístico de visitas, una calificación

usando estrellas de acuerdo a las calificaciones y comentarios obtenidos de parte

de la comunidad turística.

Crear Ruta QR Para la creación de una ruta QR se debe tener planeado los

lugares más interesantes y de los cuales también se desea obtener opiniones y

cantidad de visitas, hay que evitar en lo posible evitar las rutas demasiado largas y

demasiado cortas así como los lugares demasiado alejados uno de otro.

Para iniciar ingrese un nombre para la ruta y seleccione una categoría de la lista

desplegable a continuación se mostrarán los

lugares que conforman la ruta en otra lista.

En esta lista de lugares de Interes escoja o busque un lugar y presione el botón

para agregar al mapa dicho lugar para que forme parte de la ruta.

Page 148: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

132

En cualquier momento puede hacer zoom en el mapa para ver la distancia entre

los puntos de la ruta, para ver los puntos agregados clic en la pestaña Puntos de la

Ruta además de poder eliminarlos uno a uno dando clic en el botón .

Presione el botón para guardar la información, se generarán los

respectivos códigos QR para los sitios importantes que forman parte de la ruta

creada. Luego presione el botón para imprimir todos los códigos QR.

Page 149: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

133

USUARIOS

Por seguridad de la información el sistema ve la necesidad de manejar usuarios

los mismos que serán creados por un administrador encargado, el único que

también puede editar, eliminar, cambiar contraseña, generar e imprimir QR Card

para el usuario que lo solicite.

Crear Usuario por seguridad se debe registrar un usuario con sus datos

personales, tomando en cuenta que su nombre de Login no puede repetirse, la

información se guardara solo cuando todos los campos requeridos estén

completos. Una vez llena la información de contacto presione el botón

inmediatamente se almacenara la información y se

generara su QR Card respectiva. Si desea puede imprimirla en cualquier

momento, se recomienda un papel duro y no reflejante. Gracias a esta QR Card

podrá ingresar al sistema sin la necesidad de escribir su usuario y contraseña.

Page 150: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

134

Ver Usuarios elija en el menú izquierdo la opción ver usuarios donde aparecerá

una pantalla con varias opciones. Edite un usuario con el botón o elimine un

usuario existente presionando el botón luego aparecerá un cuadro de dialogo

indicando si desea confirmar la eliminación del usuario. Para visualizar la QR

Card de un usuario presione el botón y luego el botón para imprimir esta

QR Card.

Modificar Usuario para la modificación presione el botón , realice los cambios

respectivos y presione el botón

Page 151: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

135

ESTADÍSTICAS

Para un aprovechamiento de los códigos QR se lleva a cabo un conteo de visitas

globales y parciales de cada sitio y la generación de un cuadro estadístico para

tomar acciones o adecuaciones con los lugares que lo ameriten.

Ver Estadísticas en el menú izquierdo expanda el menú Rutas QR, elija la opción

Ver rutas QR y clic en el botón superior izquierdo Ver Estadísticas para

obtener una pantalla con un cuadro estadístico de visitas globales al Centro

Histórico de Quito. Es necesario que pase el mouse por cada una de las barras

estadísticas para ver su cantidad de visitas recibidas.

Para imprimir el grafico de clic en el botón ubicado en la parte superior

derecha del grafico o para guardarlo en su maquina como imagen o como pdf de

clic en el botón .

SALIR DEL SISTEMA

Para salir del sistema o cambiar de usuario clic en el botón y volverá a

la pantalla de Login del sistema.

Page 152: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

136

MANUAL TÉCNICO

Page 153: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

137

OBJETIVO DEL MANUAL TÉCNICO

El objetivo de este manual es el de proporcionar un breve resumen de la

composición técnica de cada modulo y pantalla de los detalles técnicos del

sistema de manera clara mediante descripciones y gráficos del sistema, de esta

forma se tendrá un mejor entendimiento y manipulación por parte de los usuarios

técnicos.

CAPA DE DATOS

Conexión.class.php <?php

class conexion

{

#tipo private para que no se puedan modificar

private $localhost = "localhost";

private $usuario = "root";

private $password = "12345";

private $database = "tuqrismo";

private $conexion="";

/* METODO PARA CONECTAR CON LA BASE DE DATOS*/

public function conectar()

{

//if(!isset($this->conexion)){

$this->conexion = (mysql_connect($this->localhost, $this->usuario,$this->password)) or die(mysql_error() );

mysql_select_db($this->database , $this->conexion) or die(mysql_error());

//}

}

// METODO PARA REALIZAR UNA CONSULTA

// INPUT: $q -> consulta

// OUTPUT: $result

public function consulta($q)

{

$resultado = mysql_query($q,$this->conexion);

if(!$resultado){

echo 'MySQL Error en la Consulta1: ' . mysql_error();

exit;

}

return $resultado;

}

Page 154: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

138

// METODO PARA CONTAR EL NUMERO DE FILAS DEVUELTAS

// INPUT: $r

// OUTPUT: numero de filas

function numero_de_filas($result){

if(!is_resource($result))

return false;

return mysql_num_rows($result);

}

}

?>

CAPA DE NEGOCIO categoria.class.php <?php

class Categoria extends conexion

{

private $id;

private $descripcion;

#Cuando se crea el objeto se realiza la conexion a la base de datos

public function __construct()

{

$this->conectar();

}

//Consulta general a la tabla categoria

public function listarCategoria($cod)

{

if($cod==0)

{

$resultado=$this->consulta("select * from categoria where cat_estado='A' order by cat_descripcion");

}else{

$resultado=$this->consulta("select * from categoria where cat_estado='A' and cat_id=$cod order by cat_descripcion");

}

return $resultado;

}

//Codigo autoincrementable

public function codigoCategoria()

{

//codigo autoincrementable

$resultado =$this->consulta("select max(cat_id)+1 as cod from categoria");

$cod=mysql_fetch_array($resultado);

Page 155: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

139

if($cod[0]==null){

$codigo=1;

}else{

$codigo = $cod[0];

}

return $codigo;

}

//comprobar si existe Categoria

public function existeCategoria($des)

{

$resultado=$this->consulta("select count(cat_id) from categoria where cat_descripcion='$des' and cat_estado='A'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

}

//Guardar categoria

public function insertarCategoria($op,$cod,$des,$img)

{

switch($op)

{

case 1: $query="Insert into categoria values ($cod,'$des','$img','A')";

break;

case 2: $query="Update categoria SET cat_descripcion='$des', cat_imagen='$img' WHERE cat_id=$cod";

break;

}

$resultado = $this->consulta($query);

if(!$resultado)

{

echo "error no se pudo Guardar la categoria";

}

}

public function mostrarCategoria()

{

$resultado = $this->listarCategoria(0); //0 para que liste todos las categorias

if(!$resultado)

{

echo "error de tabla categoria";

}else{

while($rseva=mysql_fetch_array($resultado))

{

Page 156: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

140

echo "<tr>

<td>$rseva[1]</td>

<td>

<a title='Editar' href='modificarCategoria.php?id=$rseva[0]'><img src='../img/icons/edit.png' alt='Editar' /></a>&nbsp;

<a title='Eliminar' href='eliminarCategoria.php?id=$rseva[0]' onclick=\"if(!confirm('Esta Seguro que desea eliminar la Categoria?'))return false\"><img SRC='../img/icons/icon_missing.png' alt='Eliminar' /></a>

</td>

</tr>";

}

}

}

//funcion para mostrar los usuarios

public function mostrarCategoria1()

{

$resultado = $this->listarCategoria(0); //0 para que liste todos las categorias

if(!$resultado)

{

echo "error de tabla categoria";

}else{

while($rseva=mysql_fetch_array($resultado))

{

echo "$cg->add(new jqmButton('', '', '', 'b', 'example-5.php#', '$rseva[1]', 'arrow-r', false));";

}

}

}

public function eliminarCategoria($id)

{

$resultado = $this->consulta("UPDATE categoria SET cat_estado='D' where cat_id='$id'");

if(!$resultado)

{

echo "Error al eliminar categoria";

}

}}?>

Sitio.class.php <?php

class Sitio extends conexion

Page 157: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

141

{

private $id;

private $cat_id;

private $nombre;

private $direccion;

private $descripcion;

private $responsable;

private $horario;

private $telefono;

private $latitud;

private $longitud;

public function __construct()

{

$this->conectar();

}

//Consulta general a la tabla categoria y sitio

public function listarSitio($cod)

{

if($cod==1000)

{

$resultado=$this->consulta("select * from sitioimportante where sit_estado='A' order by sit_nombre");

}else{

$resultado=$this->consulta("select * from sitioimportante where sit_estado='A' and cat_id=$cod order by sit_nombre");

}

return $resultado;

}

//Consulta general a la tabla categoria_sitio

public function consultarSitio($cod)

{

$resultado=$this->consulta("select * from sitioimportante where sit_estado='A' and sit_id=$cod");

return $resultado;

}

//Codigo autoincrementable

public function codigoSitio()

{

//codigo autoincrementable

$resultado =$this->consulta("select max(sit_id)+1 as cod from sitioimportante");

$cod=mysql_fetch_array($resultado);

if($cod[0]==null){

Page 158: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

142

$codigo=1;

}else{

$codigo = $cod[0];

}

return $codigo;

}

//comprobar si existe sitio importante

public function existeSitio($nomb)

{

$resultado=$this->consulta("select count(sit_id) from sitioimportante where sit_nombre='$nomb' and sit_estado='A'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

}

//Guardar el usuario

public function insertarSitio($op,$cod,$cat,$nom,$dir,$des,$res,$hor,$tel,$lat,$lon)

{

switch($op)

{

case 1: $query="Insert into sitioimportante values ($cod,$cat,'$nom','$dir','$des','$res','$hor','$tel',$lat,$lon,'A')";

break;

case 2: $query="Update sitioimportante SET cat_id=$cat, sit_nombre='$nom', sit_direccion='$dir', sit_descripcion='$des', sit_responsable='$res', sit_horario='$hor', sit_telefono='$tel',sit_latitud=$lat, sit_longitud=$lon WHERE sit_id=$cod";

break;

}

$resultado = $this->consulta($query);

if(!$resultado)

{

echo "error no se pudo Guardar el sitio";

}

}

//funcion para mostrar los sitios

public function mostrarSitio($cod)

{

$resultado = $this->listarSitio($cod); //0 para que liste todos los usuarios de la tabla

if(!$resultado)

{

echo "error de tabla sitioimportante";

}else{

Page 159: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

143

while($rseva=mysql_fetch_array($resultado))

{

echo "<tr>

<td>$rseva[2]</td>

<td>$rseva[3]</td>

<td>$rseva[5]</td>

<td>$rseva[6]</td>

<td>$rseva[7]</td>

<td>

<a title='Editar' href='modificarSitio.php?id=$rseva[0]'><img src='../img/icons/edit.png' alt='Editar' /></a>&nbsp;

<a title='Eliminar' href='eliminarSitio.php?id=$rseva[0]&cod=$cod' onclick=\"if(!confirm('Esta Seguro que desea eliminar el Sitio?'))return false\"><img SRC='../img/icons/icon_missing.png' alt='Eliminar' /></a>

</td>

</tr>";

}

}

}

//eliminar usuario

public function eliminarSitio($id)

{

$resultado = $this->consulta("UPDATE sitioimportante SET sit_estado='D' where sit_id='$id'");

if(!$resultado)

{

echo "Error al eliminar sitio importante";

}

}

//buscar codigo sitio por nombre

public function consultarCodigoSitio($nom)

{

$resultado=$this->consulta("select sit_id from sitioimportante where sit_estado='A' and sit_nombre like '$nom'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

}

}

?>

Login.class.php <?php

class Login extends conexion

Page 160: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

144

{

private $id;

private $usuario;

private $password;

#Cuando se crea el objeto se realiza la conexion a la base de datos

public function __construct()

{

$this->conectar();

}

//Consulta general a la tabla categoria_sitio

public function listarUsuario($cod)

{

if($cod==0)

{

$resultado=$this->consulta("select * from usuario where usu_estado='A' order by usu_apellido");

}else{

$resultado=$this->consulta("select * from usuario where usu_estado='A' and usu_id=$cod order by usu_apellido");

}

return $resultado;

}

//Codigo autoincrementable

public function codigoUsuario()

{

//codigo autoincrementable

$resultado =$this->consulta("select max(usu_id)+1 as cod from usuario");

$cod=mysql_fetch_array($resultado);

if($cod[0]==null){

$codigo=1;

}else{

$codigo = $cod[0];

}

return $codigo;

}

//comprobar si existe usuario y clave

public function existeUsuario($usu,$cla)

{

$resultado=$this->consulta("select count(usu_id) from usuario where usu_login='$usu' and usu_clave='$cla' and usu_estado='A'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

Page 161: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

145

}

//comprobar si existe usuario

public function existeLogin($usu)

{

$resultado=$this->consulta("select count(usu_id) from usuario where usu_login='$usu' and usu_estado='A'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

}

//comprobar si existe usuario

public function consultaUsuario($id)

{

$resultado=$this->consulta("select * from usuario where usu_id='$id' and usu_estado='A'");

return $resultado;

}

//Guardar el usuario

public function insertarUsuario($op,$cod,$nom,$ape,$dir,$tel,$mai,$log,$cla)

{

switch($op)

{

case 1: $query="Insert into usuario values ($cod,'$nom','$ape','$dir','$tel','$mai','$log','$cla',888,'A')";

break;

case 2: $query="Update usuario SET usu_nombre='$nom', usu_apellido='$ape', usu_direccion='$dir', usu_telefono='$tel', usu_mail='$mai', usu_login='$log', usu_clave='$cla' WHERE usu_id=$cod";

break;

}

$resultado = $this->consulta($query);

if(!$resultado)

{

echo "error no se pudo Guardar el usuario";

}

}

//funcion para mostrar los uduarios

public function mostrarUsuario()

{

$resultado = $this->listarUsuario(0); //0 para que liste todos los usuarios de la tabla

if(!$resultado)

{

echo "error de tabla usuario";

}else{

Page 162: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

146

while($rseva=mysql_fetch_array($resultado))

{

echo "<tr>

<td>$rseva[2]</td>

<td>$rseva[1]</td>

<td>$rseva[3]</td>

<td>$rseva[4]</td>

<td>$rseva[5]</td>

<td>$rseva[6]</td>

<td>

<a title='Ver QR Card' data-reveal-id='myModal-$rseva[0]' ><img src='../img/icons/codeqr.png' alt='Ver QR Card' height='17px' width='17px'/></a>&nbsp; <a title='Editar' href='modificarUsuario.php?id=$rseva[0]'><img src='../img/icons/edit.png' alt='Editar' /></a>&nbsp;

<a title='Eliminar' href='eliminarUsuario.php?id=$rseva[0]' onclick=\"if(!confirm('Esta Seguro que desea eliminar el Usuario?'))return false\"><img SRC='../img/icons/icon_missing.png' alt='Eliminar' /></a>

</td>

</tr>";

}

}

}

//eliminar usuario

public function eliminarUsuario($id)

{

$resultado = $this->consulta("UPDATE usuario SET usu_estado='D' where usu_id='$id'");

if(!$resultado)

{

echo "Error al eliminar usuario";

}

}

}

?>

Imagen.class.php <?php

class Imagen extends conexion

{

private $id;

private $descripcion;

#Cuando se crea el objeto se realiza la conexion a la base de datos

public function __construct()

Page 163: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

147

{

$this->conectar();

}

//Consulta general a la tabla imagen

public function listarImagen($cod)

{

if($cod==0)

{

$resultado=$this->consulta("select * from imagen where img_estado='A'");

}else{

$resultado=$this->consulta("select * from imagen where img_estado='A' and img_id=$cod");

}

return $resultado;

}

//Consulta general a la tabla imagen

public function listarImagenxId($codSit)

{

$resultado=$this->consulta("select * from imagen where img_estado='A' and sit_id=$codSit");

if(!$resultado)

{

echo "Error al eliminar Imagen";

}

return $resultado;

}

//Codigo autoincrementable

public function codigoImagen()

{

//codigo autoincrementable

$resultado =$this->consulta("select max(img_id)+1 as cod from imagen");

$cod=mysql_fetch_array($resultado);

if($cod[0]==null){

$codigo=1;

}else{

$codigo = $cod[0];

}

return $codigo;

}

//comprobar si existe Imagen

public function existeImagen($path)

Page 164: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

148

{

$resultado=$this->consulta("select count(img_id) from imagen where img_path='$path' and img_estado='A'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

}

//Guardar imagen

public function insertarImagen($op,$cod,$codSit,$des,$img)

{

switch($op)

{

case 1: $query="Insert into imagen values ($cod,$codSit,'$des','$img','A')";

break;

case 2: $query="Update imagen SET img_descripcion='$des', img_path='$img' WHERE img_id=$cod";

break;

}

$resultado = $this->consulta($query);

if(!$resultado)

{

echo "error no se pudo Guardar la imagen";

}

}

//funcion para mostrar los uduarios

public function mostrarImagen()

{

$resultado = $this->listarImagen(0); //0 para que liste todos las imagenes

if(!$resultado)

{

echo "error de tabla imagen";

}else{

while($rseva=mysql_fetch_array($resultado))

{

echo "<tr>

<td>$rseva[2]</td>

<td>

<a title='Editar' href='modificarImagen.php?codImg=$rseva[0]'><img src='../img/icons/edit.png' alt='Editar' /></a>&nbsp;

Page 165: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

149

<a title='Eliminar' href='eliminarImagen.php?codImg=$rseva[0]' onclick=\"if(!confirm('Esta Seguro que desea eliminar la Imagen?'))return false\"><img SRC='../img/icons/icon_missing.png' alt='Eliminar' /></a>

</td>

</tr>";

}

}

}

//eliminar categoria

public function eliminarImagen($id)

{

$resultado = $this->consulta("UPDATE imagen SET img_estado='D' where img_id='$id'");

if(!$resultado)

{

echo "Error al eliminar Imagen";

}

}

}

?>

Itinerario.class.php <?php

class Itinerario extends conexion

{

#Cuando se crea el objeto se realiza la conexion a la base de datos

public function __construct()

{

$this->conectar();

}

//Consulta general a la tabla itinerario

public function listarItinerario($cod)

{

if($cod==0)

{

$resultado=$this->consulta("select * from itinerario where iti_estado='A' order by iti_fecha_creacion");

}else{

$resultado=$this->consulta("select * from itinerario where iti_estado='A' and iti_id=$cod order by iti_fecha_creacion");

}

return $resultado;

}

//Codigo autoincrementable

Page 166: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

150

public function codigoItinerario()

{

//codigo autoincrementable

$resultado =$this->consulta("select max(iti_id)+1 as cod from itinerario");

$cod=mysql_fetch_array($resultado);

if($cod[0]==null){

$codigo=1;

}else{

$codigo = $cod[0];

}

return $codigo;

}

//comprobar si existe nombre del itinerario

public function existeItinerario($des)

{

$resultado=$this->consulta("select count(iti_id) from itinerario where iti_descripcion='$des' and iti_estado='A'");

$cod=mysql_fetch_array($resultado);

return $cod[0];

}

//Guardar categoria

public function insertarItinerario($op,$cod,$des,$cant)

{

$fecha=date("Y-m-d");

switch($op)

{

case 1: $query="Insert into itinerario values ($cod,'$des','$cant',0,'$fecha','A')";

break;

case 2: $query="Update itinerario SET iti_descripcion='$des' WHERE iti_id=$cod";

break;

}

$resultado = $this->consulta($query);

if(!$resultado)

{

echo "error no se pudo Guardar el itinerario";

}

}

//funcion para mostrar los uduarios

public function mostrarItinerario()

{

Page 167: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

151

$resultado = $this->listarItinerario(0); //0 para que liste todos las categorias

if(!$resultado)

{

echo "error de tabla itinerario";

}else{

while($rseva=mysql_fetch_array($resultado))

{

echo "<tr>

<td><strong>$rseva[1]</strong></td>

<td>$rseva[2]</td>

<td>$rseva[4]</td>

<td>

<a title='Mapa' href='mostrarMapa.php?id=$rseva[0]&sms=0&par=0'><img src='../img/icons/maps.png' alt='Ver Ruta en mapa' height='22px' width='22px' /></a>&nbsp;

<a title='Lugares' href='mostrarDetItinerario.php?id=$rseva[0]&sms=0&par=0'><img src='../img/icons/puntos.png' alt='Editar' height='20px' width='20px'/></a>&nbsp;

<a title='Editar' href='modificarItinerario.php?id=$rseva[0]'><img src='../img/icons/edit.png' alt='Editar' /></a>&nbsp;

<a title='Eliminar' href='eliminarItinerario.php?id=$rseva[0]' onclick=\"if(!confirm('Esta Seguro que desea eliminar la Ruta?'))return false\"><img SRC='../img/icons/icon_missing.png' alt='Eliminar' /></a>

</td>

</tr>";

}

}

}

//eliminar categoria

public function eliminarItinerario($id)

{

$resultado = $this->consulta("UPDATE itinerario SET iti_estado='D' where iti_id='$id'");

if(!$resultado)

{

echo "Error al eliminar el itinerario";

}

}

}

?>

Page 168: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

152

Detalle_itinerario.class.php <?php

class Detalle_itinerario extends conexion

{

private $id;

private $descripcion;

#Cuando se crea el objeto se realiza la conexion a la base de datos

public function __construct()

{

$this->conectar();

}

//Consulta general a la tabla itinerario

public function listarDetItinerario($cod)

{

if($cod==0)

{

$resultado=$this->consulta("select * from detalle_itinerario where det_estado='A' order by det_id");

}else{

$resultado=$this->consulta("select * from detalle_itinerario where det_estado='A' and iti_id=$cod");

}

return $resultado;

}

//Consulta general a la tabla itinerario

public function listarDetItinerarioxSit($cod)

{

$resultado=$this->consulta("select d.det_id, s.sit_nombre, d.iti_id, d.det_qr_path, d.det_contador, s.sit_id from detalle_itinerario d, sitioimportante s where det_estado='A' and iti_id=$cod and d.sit_id=s.sit_id");

return $resultado;

}

//Codigo autoincrementable

public function codigoDetItinerario()

{

//codigo autoincrementable

$resultado =$this->consulta("select max(det_id)+1 as cod from detalle_itinerario");

$cod=mysql_fetch_array($resultado);

if($cod[0]==null){

$codigo=1;

}else{

$codigo = $cod[0];

}

Page 169: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

153

return $codigo;

}

//Guardar detalle itinerario

public function insertarDetItinerario($op,$cod,$codSit,$codIti,$path,$cont)

{

$fecha=date("Y-m-d");

switch($op)

{

case 1: $query="Insert into detalle_itinerario values ($cod,$codSit,$codIti,'$path',0,'A')";

break;

case 2: $query="Update detalle_itinerario SET det_qr_path='$path', det_contador='$cont' WHERE det_id=$cod";

break;

}

$resultado = $this->consulta($query);

if(!$resultado)

{

echo "error no se pudo Guardar el detalle itinerario";

}

}

//funcion para mostrar los uduarios

public function mostrarDetItinerario($cod)

{

$resultado = $this->listarDetItinerarioxSit($cod); //0 para que liste todos las categorias

if(!$resultado)

{

echo "error de tabla detalle itinerario";

}else{

while($rseva=mysql_fetch_array($resultado))

{

echo "<tr>

<td>$rseva[1]</td>

<td>$rseva[4]</td>

<td>

<a title='Codigo QR' href='#' data-reveal-id='myModal-$rseva[0]'><img src='../img/icons/codeqr.png' height='19px' width='19px' alt='Ver en Mapa' /></a>&nbsp;

<a title='Comentarios' href='mostrarComentarios.php?id=$rseva[0]'><img src='../img/icons/comentarios.png' height='22px' width='22px' alt='Ver Comentarios' /></a>&nbsp;

<a title='Eliminar' href='eliminarDetItinerario.php?id=$rseva[0]&idIti=$rseva[2]'

Page 170: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

154

onclick=\"if(!confirm('Esta Seguro que desea eliminar el Punto del Itinerario?'))return false\"><img SRC='../img/icons/icon_missing.png' alt='Eliminar' /></a>

</td>

</tr>";

}

}

}

//eliminar categoria

public function eliminarDetItinerario($id,$idIti)

{

$resultado = $this->consulta("UPDATE detalle_itinerario SET det_estado='D' where det_id='$id'");

$resultado1 = $this->consulta("UPDATE itinerario SET iti_num_puntos=(iti_num_puntos-1) where iti_id='$idIti'");

if(!$resultado)

{

echo "Error al eliminar el detalle itinerario";

}

}

//contador de visitas

public function contarDetItinerario($id)

{

$resultado = $this->consulta("UPDATE detalle_itinerario SET det_contador=det_contador+1 where det_id='$id'");

if(!$resultado)

{

echo "Error al eliminar el detalle itinerario";

}

}

//Estadisticas totales

public function totalEstadistica($cod)

{

if($cod==0)

{

$resultado=$this->consulta("select sum(det_contador) from detalle_itinerario where det_estado='A'");

}else{

$resultado=$this->consulta("select sum(det_contador) from detalle_itinerario where det_estado='A' and iti_id=$cod");

}

return $resultado;

}

//Estadisticas de cada lugar

public function totalLugar($cod)

Page 171: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

155

{

if($cod==0)

{

$resultado=$this->consulta("select sum(det_contador) from detalle_itinerario where det_estado='A'");

}else{

$resultado=$this->consulta("SELECT sit_id, sum(det_contador) FROM detalle_itinerario where det_estado='A' GROUP BY sit_id");

}

return $resultado;

}}?>

Mensajes.class.php <?php

class Mensajes

{

private $op;

private $final;

public function mostrarMensaje($op,$categoria,$op1)

{

$errores=array("",

"Usuario o Contraseña incorrectos",

"Guardado Correctamente",

"Usuario ya Existe",

"Editado Correctamente",

"Eliminado Correctamente",

"Categoria ya Existe");

if($op!=0)

{

switch($op)

{

case 1:

$tipo="success";

$mensaje=$errores[$op1];

$final='<a href="nuevo'.$categoria.'.php">Agregar nuev@ '.$categoria.'.</a>';

break;

case 2:

$tipo="error";

$mensaje=$errores[$op1];

$final='<a href="nuevo'.$categoria.'.php">Intentar de nuevo.</a>';

break;

Page 172: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

156

case 3:

$tipo="info";

$mensaje=$errores[$op1];

$final="";

break;

case 4:

$tipo="warning";

$mensaje=$errores[$op1];

$final="";

break;

case 5:

$tipo="error";

$mensaje=$errores[$op1];

$final="";

break;

}

echo '<div class="status '.$tipo.'">

<p><img src=../img/icons/icon_'.$tipo.'.png /><span>¡'.$mensaje.'! </span>'.$final.'</p>

</div>';

} } } ?>

CAPA DE PRESENTACIÓN

INGRESO AL SISTEMA

login.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/login.class.php";

include "../../CapaNegocio/mensajes.class.php";

$mensajes=new Mensajes();

session_start();

$usuario=new Login();

//verificar respuesta y objeto

if(isset($_POST["btnIngresar"]))

{

$user=$_POST["txtUsuario"];

Page 173: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

157

$clave=$_POST["txtClave"];

if($usuario->existeUsuario($user,$clave)>0)

{

$_SESSION["user"] =$user;

header("location:../index.php");

}else{

header("location:login.php?sms=5&par=1&opc=0");

}

}

$sms=$_GET["sms"];

$par=$_GET["par"];

//login qr

if($_GET["opc"]==1)

{

$user=$_GET["user"];

$clave=$_GET["clave"];

if($usuario->existeUsuario($user,$clave)>0)

{

$_SESSION["user"] =$user;

header("location:../index.php");

}else{

echo $_GET["user"];

echo $_GET["clave"];

header("location:login.php?sms=5&par=1&opc=0");

}

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

Page 174: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

158

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | ¡Bienvenido!</title>

<!-- Theme Start -->

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/login.css" rel="stylesheet" type="text/css" />

<!-- Theme End -->

<!--inicio login qr-->

<script src="assets/js/jquery-1.7.1.min.js"></script>

<!--login qr scripts-->

<script type="text/javascript" src="loginQR/decode.js"></script>

<script type="text/javascript" src="loginQR/webcamqr.js"></script>

<script src="assets/fancybox/jquery.easing-1.3.pack.js"></script>

<script src="assets/fancybox/jquery.fancybox-1.3.4.pack.js"></script>

<script src="assets/webcam/webcam.js"></script>

<script src="assets/js/script.js"></script>

<link rel="stylesheet" type="text/css" href="assets/css/styles.css" />

<link rel="stylesheet" type="text/css" href="assets/fancybox/jquery.fancybox-1.3.4.css" />

<!--fin login qr-->

<!--validacion de los campos-->

<script type="text/javascript" src="../scripts/livevalidation_standalone.js"></script>

<script language="javascript" src="../scripts/validacion_letras_numeros.js"> </script>

<link rel="stylesheet" type="text/css" href="../styles/validacion.css"/>

<!--fin validacion de los campos-->

</head>

<body id="homepage" onload="load()">

<div id="header">

Page 175: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

159

<a href="" title=""><img SRC="../img/cp_logo.png" alt="Control Panel" class="logo" /></a></div>

<!--imagen de fondo-->

<div style="background-image:url(../img/bg11.jpg);position:absolute; z-index:-1; width:100%; height:100%"></div>

<!--login-->

<div id="logincontainer">

<div id="loginbox">

<div id="loginheader"><p>Ingreso al Sistema</p></div>

<div id="innerlogin">

<!-- MENSAJE -->

<?php

$mensajes->mostrarMensaje($sms,"Login",$par);

?>

<form action="login.php" method="post">

<p>Usuario</p>

<input type="text" class="logininput" name="txtUsuario" id="usuario" onkeypress="return val2(event);" />

<p>Contraseña</p>

<input type="password" class="logininput" name="txtClave" id="clave" onkeypress="return val2(event);" />

<input type="submit" class="loginbtn" value="Ingresar" name="btnIngresar" /><br />

</form>

<!--validacion cajas de texto-->

<SCRIPT type="text/javascript">

var usuario = new LiveValidation('usuario');

usuario.add( Validate.Presence);

usuario.add( Validate.Length,{minimum: 12});

var clave = new LiveValidation('clave');

Page 176: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

160

clave.add( Validate.Presence);

clave.add( Validate.Length,{minimum: 8});

</SCRIPT>

</div>

</div>

</div>

<!--inicio pop-up camara-->

<div id="camera">

<span class="tooltip"></span>

<span class="camTop" onClick="setwebcam()"></span>

<div id="mainbody">

<table class="tsel" border="0">

<tr>

<td colspan="2" align="center">

<div id="outdiv"></div> <!--capa contenedora de camara canvas-->

</td>

</tr>

</table> </div>

<canvas id="qr-canvas" width="320" height="240">Error no soporta canvas</canvas> <!--capa para la camara-->

</div><!--fin pop up camara-->

</body></html>

Loginqr.php

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<head>

<meta http-equiv="Content-type" content="text/html;charset=UTF-8">

<meta http-equiv="X-UA-Compatible" content="IE=Edge"/>

<title>Quito Q-Rioso | Login QR</title>

Page 177: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

161

<script type="text/javascript" src="decode.js"></script>

<script type="text/javascript" src="webcam.js"></script>

</head>

<body onload="load()">

<div id="main">

<div id="header">

<table border="0" width="100%">

<tr><td width="150px" align="center">

</td>

<td align="center" valign="bottom">

</td>

<td align="center" width="150px">

</td>

</tr>

</table>

</div>

<div id="mainbody">

<table class="tsel" border="0" width="100%">

<tr><td align="right" valign="top" width="25%">

</td>

<td valign="top" align="center" width="50%">

<table class="tsel" border="0">

<tr>

<td><img class="selector" id="webcamimg" src="webcam2.png" onclick="setwebcam()" align="left" /></td>

<td><img class="selector" id="qrimg" src="qrimg2.png" onclick="setimg()" align="right"/></td></tr>

<tr><td colspan="2" align="center">

<!--capa de camara canvas-->

<div id="outdiv"></div>

Page 178: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

162

</td></tr>

</table>

</td>

<td align="left" valign="top" width="25%">

</td></tr>

<tr><td colspan="3" align="center">

</td></tr>

<tr><td colspan="3" align="center">

<!--para ver qr decodificado-->

<div id="result"></div>

</td></tr>

</table>

</div>

</div>

<!--capa para la camara-->

<canvas id="qr-canvas" width="320" height="240">no soporta canvas</canvas>

</body>

</html>

Cerrar_sesion.php

<?php

if(!isset($_SESSION))

{session_start();}

$_SESSION["user"]=NULL;

unset($_SESSION["user"]);

$_SESSION["codigo"]=NULL;

unset($_SESSION["codigo"]);

header("location:login.php?sms=0&par=0&opc=0");

?>

INICIO DEL SISTEMA QUITO Q-RIOSO

Page 179: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

163

Index.php

<?php

if(!isset($_SESSION)) session_start();

if(isset($_SESSION["user"]))

{ $user=$_SESSION["user"];

}else{ header("location:login/login.php?sms=0&par=0&opc=0");

}?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Inicio</title>

<!-- Theme Start -->

<link href="styles/layout.css" rel="stylesheet" type="text/css" />

<link href="styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<link href="themes/blue/styles.css" rel="stylesheet" type="text/css" />

<script type='text/javascript' SRC="scripts/jquery.min.js"></script>

<script type='text/javascript' SRC="scripts/jquery-ui.min.js"></script>

<script type='text/javascript' SRC="scripts/jquery.wysiwyg.js"></script>

<script type='text/javascript' SRC="scripts/visualize.jQuery.js"></script>

<script type="text/javascript" SRC="scripts/functions.js"></script>

</head>

<body id="homepage">

<!--<div id="header">

<a href="" title=""><img SRC="img/cp_logo.png" alt="Control Panel" class="logo" /></a>

</div>-->

<!-- Top Breadcrumb Start

<div id="breadcrumb">

Page 180: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

164

<ul>

<li><img SRC="img/icons/icon_breadcrumb.png" alt="Location" /></li>

<li><strong>Usted esta aqui:</strong></li>

<li><a href="index.php" title="">Inicio</a></li>

<li>/</li>

<li class="current"></li>

</ul>

</div>

Top Breadcrumb End -->

<div id="rightside1" style="background-image:url(img/bg1.jpg);">

<!-- contenedor-->

<div class="contentcontainer">

<iframe scrolling="auto" src="intro/index.html" id="frm_contenido" frameborder="0" width="100%" height="660px" name="frm_contenido"></iframe>

</div>

<div style="clear:both;"></div>

<!-- Content Box Start --><!-- Content Box End -->

<div id="footer">

&copy; Derechos Reservados <strong>ITSCO 2012</strong> | <strong>Sitio optimizado para:</strong> Google Chrome, Mozilla Firefox | <strong>Resolucion de pantalla recomendada:</strong> 1024 x 768 o superior

</div>

</div>

</mu_>

<div id="leftside" >

<div class="user">

<img SRC="img/cp_logo.png" alt="Avatar" />

</div>

<div class="user">

Page 181: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

165

<img SRC="img/avatar.png" width="44" height="44" class="hoverimg" alt="Avatar" />

<p>Bienvenid@:</p>

<p class="username"><?php echo $user;?></p>

<p class="userbtn"><a href="login/cerrar_sesion.php" title="">Salir</a></p>

</div>

<div class="notifications">

<p class="notifycount"><a href="" title="" class="notifypop">3</a></p>

<p><a href="" title="" class="notifypop">Nuevas Notificaciones</a></p>

<p class="smltxt">(Click para ver notificaciones)</p>

</div>

<ul id="nav">

<li>

<ul class="navigation">

<li class="heading selected">Inicio Web</li>

<li><a href="index.php">Inicio Web</a></li>

<li><a href="#" title="" class="notifypop">Inicio Web Móvil</a></li>

<div id="contactame"></div>

<!--<li class="heading selected">Contactame</li>-->

<li><a href="contacto.php" target="frm_contenido" title="">Contáctame</a></li>

</ul>

</li>

<?php

if ($user=="administrador")

echo '<li>

<a class="collapsed heading">Sitios de Interes</a>

<ul class="navigation">

<li><a href="sitioImportante/mostrarSitio.php?sms=0&par=0&cod=0" title="" target="frm_contenido">Ver Sitios de Interes</a></li>

Page 182: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

166

<li><a href="sitioImportante/nuevoSitioImportante.php" rel="external" title="" target="frm_contenido">Crear Sitio de Interes</a></li>

<li><a href="categoria/mostrarCategoria.php?sms=0&par=0" target="frm_contenido">Ver Categorias</a></li>

<li><a href="categoria/nuevoCategoria.php" target="frm_contenido">Crear Categoria</a></li>

</ul>

</li>';

?>

<li><a class="collapsed heading">Rutas QR</a>

<ul class="navigation">

<li><a href="itinerario/mostrarItinerario.php?sms=0&par=0" target="frm_contenido" title="" class="likelogin">Ver Rutas QR</a></li>

<li><a href="itinerario/waypoint/waypoints.php" target="frm_contenido" title="">Crear Ruta QR</a></li>

</ul>

</li>

<?php

if ($user=="administrador")

echo '<li><a class="collapsed heading">Usuarios</a>

<ul class="navigation">

<li><a href="usuario/mostrarUsuario.php?sms=0&par=0" title="" target="frm_contenido">Ver Usuarios</a></li>

<li><a href="usuario/nuevoUsuario.php" title="" target="frm_contenido">Crear Usuario</a></li>

</ul>

</li>';

?>

</ul>

</div>

<div id="notificationsbox" style="background:none;">

<div style="z-index:1; position:absolute;">

Page 183: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

167

<img src="img/bgmovil.png" width="380" height="650" alt="movil" style="z-index:1;" />

</div>

<div style="z-index:2; position:relative; top:87px; left:54px;">

<iframe name="frm_movil" scrolling="auto" id="frm_movil" src="mobile/index.php" width="275" frameborder="0" height="420"/>

</div>

<!--<p class="loadmore"><a href="#" title="">Ver todas las notificaciones</a></p>-->

</div>

<a id="popupContactClose">X</a>

<h1>Quito Q-Rioso / Web Movil</h1>

<center>

<p id="contactArea">

<iframe name="frm_movil" id="frm_movil" src="mobile/index.php" width="270" frameborder="0" height="420"/>

<img src="img/bgmovil.png" width="365" height="624" alt="movil" />

</p>

</center>

</div>

<div id="backgroundPopup"></div>

</body>

</html>

SITIOS IMPORTANTES

Mostrarsitio.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/sitio.class.php";

include "../../CapaNegocio/categoria.class.php";

include "../../CapaNegocio/mensajes.class.php";

Page 184: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

168

$mensajes=new Mensajes();

$categoria=new Categoria();

$sitio=new Sitio();

session_start();

if(isset($_SESSION["user"]))

{

$user=$_SESSION["user"];

}else{

header("location:../login/login.php?sms=0&par=0");

}

//comprobar mensaje

$sms=$_GET["sms"];

$par=$_GET["par"];

$cod=$_GET["cod"];

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<title>Quito Q-Rioso | Sitios de Interes</title>

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<!-- Theme Start -->

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<!-- Theme End -->

<script type='text/javascript' SRC="../scripts/jquery.min.js"></script>

<script type='text/javascript' SRC="../scripts/jquery-ui.min.js"></script>

<script type='text/javascript' SRC="../scripts/jquery.wysiwyg.js"></script>

<script type='text/javascript' SRC="../scripts/visualize.jQuery.js"></script>

Page 185: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

169

<script type="text/javascript" SRC="../scripts/functions.js"></script>

<script type="text/javascript" src="../scripts/livevalidation_standalone.js"></script>

<script language="javascript" src="../scripts/validacion_letras_numeros.js"> </script>

<link rel="stylesheet" type="text/css" href="../styles/validacion.css"/>

<!--fin validacion de los campos-->

<script type="text/javascript" >

function recargar()

{

window.location.href="mostrarSitio.php?sms=0&par=0&cod="+document.getElementById('categoria').value;

}

</script>

</head>

<body>

<!-- Top Breadcrumb Start --><!-- Top Breadcrumb End -->

<div id="rightside" style="padding-top:10px; padding-left:10px">

<!-- MENSAJE -->

<?php

$mensajes->mostrarMensaje($sms,"Sitio",$par);

?>

<div class="contentcontainer">

<div class="headings altheading">

<h2>Sitios de Interes Registrados</h2>

</div>

<div class="contentbox">

<div class="extrabottom">

<ul>

<li><a href="nuevoSitio.php" target="frm_contenido"><img SRC="../img/icons/search.png" alt="Buscar" /> Buscar</a></li>

</ul>

Page 186: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

170

<div class="bulkactions">

<select name="cbo_Categoria" id="categoria" onchange="javascript:recargar();">

<option value="0">Seleccione una Categoria</option>

<?php

$resultado=$categoria->listarCategoria(0);

while($cat=mysql_fetch_array($resultado))

{

$total=mysql_num_rows($sitio->listarSitio($cat[0]));

?>

<option value="<?php echo $cat[0];?>" <?php if($cat[0]==$cod) {echo " Selected";}?>><?php echo $cat[1]." ( ".$total." ) "; ?></option>";

<?php

}

?>

</select>

<input id="ver" type="submit" value="Ver categoria en mapa" class="btn" onclick="MM_goToURL('self','preliminar.php?cod=<?php echo $cod?>');return document.MM_returnValue" />

</div>

</div>

<?php

include "paginacion.php"; /*$sitio->mostrarSitio($cod);*/

if($cod==0)

{

echo "<table width='100%'><tbody><tr><td colspan=6><b>Seleccione una Categoria...</b></td></tr></tbody></table>"; }

?>

<div style="clear: both;"></div>

Page 187: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

171

</div>

</div>

<div style="clear:both;"></div>

</body>

</html>

Nuevositioimportante.php

<?php

if(!isset($_SESSION)) session_start();

if(isset($_SESSION["user"]))

{ $user=$_SESSION["user"];

}else{

header("location:../login/login.php?sms=0&par=0&opc=0");

}

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/sitio.class.php";

include "../../CapaNegocio/categoria.class.php";

include "../../CapaNegocio/mensajes.class.php";

$mensajes=new Mensajes();

$categoria=new Categoria();

$sitio=new Sitio();

//boton guardar

if(isset($_POST["btnGuardar"]))

{

//proceso para guardar

$cod=$sitio->codigoSitio();

$codCat=trim($_POST["cboCategoria"]);

$nombre=trim($_POST["txtNombre"]);

$descripcion=trim($_POST["txtDescripcion"]);

$direccion=trim($_POST["txtDireccion"]);

Page 188: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

172

$responsable=trim($_POST["txtResponsable"]);

$horario=trim($_POST["txtHorario"]);

$telefono=trim($_POST["txtTelefono"]);

$lat=trim($_POST["txtLatitud"]);

$long=trim($_POST["txtLongitud"]);

if (($sitio->existeSitio($nombre))==0)

{

$sitio->insertarSitio(1,$cod,$codCat,$nombre,$direccion,$descripcion,$responsable,$horario,$telefono,$lat,$long);

//header("location:mostrarUsuario.php?sms=1&par=2");

header("location:mostrarSitio.php?cod=$cod&sms=1&par=2");

}else{

//echo "sitio ya existe";

header("location:mostrarSitio.php?sms=2&par=3");

} } ?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Sitio Importante</title>

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<!-- Theme Start -->

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<!-- Theme End -->

<!--scripts de la plantilla-->

<script type='text/javascript' SRC="../scripts/jquery.min.js"></script>

<script type='text/javascript' SRC="../scripts/jquery-ui.min.js"></script>

Page 189: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

173

<script type='text/javascript' SRC="../scripts/visualize.jQuery.js"></script>

<script type='text/javascript' SRC="../scripts/jquery.wysiwyg.js"></script>

<script type="text/javascript" SRC="../scripts/functions.js"></script>

<!--fin de script de plantilla-->

<!--validacion de los campos-->

<script type="text/javascript" src="../scripts/livevalidation_standalone.js"></script>

<script language="javascript" src="../scripts/validacion_letras_numeros.js"> </script>

<link rel="stylesheet" type="text/css" href="../styles/validacion.css"/>

<!--fin validacion de los campos-->

</head>

<body onload="load()" onunload="GUnload()">

<div id="rightside" style="padding-top:10px; padding-left:10px">

<!-- MENSAJE -->

<!-- <div class="status info">

<p><img SRC="../img/icons/icon_info.png" alt="Information" /><span>¡Editado Correctamente!</span></p>

</div>-->

<div class="contentcontainer med left" id="tabs">

<div class="headings alt">

<h2 class="left">Nuevo Sitio Importante</h2>

</div>

<div class="contentbox">

<div class="newsitem">

<form action="nuevoSitioImportante.php" method="post" enctype="multipart/form-data" id="formu">

<p>

<!--<label for="textfield"><strong>Categoria</strong> <font color="#FF0000">*</font></label>-->

Page 190: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

174

<select name="cboCategoria" id="cboCategoria" >

<option value="0">Seleccione una Categoria</option>

<?php

$resultado=$categoria->listarCategoria(0);

while($cat=mysql_fetch_array($resultado)) {

//$total=mysql_num_rows($sitio->listarSitio($cat[0])); ?> <option value="<?php echo $cat[0];?>" ><?php echo $cat[1]?></option>";

<?php } ?>

</select> </p> <p>

<label for="textfield"><strong>Nombre</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtNombre" name="txtNombre" class="inputbox" onkeypress="return val1(event)" /> </p> <p>

<label for="textfield"><strong>Responsable</strong></label>

<input type="text" id="txtResponsable" name="txtResponsable" class="inputbox" onkeypress="return val1(event)" /> </p> <p>

<label for="textfield"><strong>Direccion</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtDireccion" name="txtDireccion" class="inputbox" onKeyPress="return val3(event)"/> </p> <p>

<label for="textfield"><strong>Horario</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtHorario" name="txtHorario" class="inputbox" /></p> <p>

<label for="textfield"><strong>Telefono</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtTelefono" name="txtTelefono" class="inputbox smallbox" onKeyPress="return numeros(event)" /> </p> <p> <label for="textfield"><strong>Descripcion</strong> <font color="#FF0000">*</font> <a href="#" id="generar" >(Generar Audio)</a> <img SRC="../img/icons/loading.gif" id="loading" alt="Loading" /> </label>

<label for="textfield">

<!--botones de audio-->

Page 191: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

175

<img id="audio-play" src="../img/icons/play.png" width="20px" height="20px" alt="play" /><img id="audio-pause" src="../img/icons/pause.png" width="20px" height="20px" alt="pause" /> <img id="audio-stop" src="../img/icons/stop.png" width="20px" height="20px" alt="stop" />

<!--fin botones de audio-->

</label><textarea class="text-input textarea" id="txtDescripcion" name="txtDescripcion" rows="7" cols="84"></textarea>

</p> <p> <label for="textfield"><strong></strong> <font color="#FF0000">*</font> Campos Requeridos</label>

</p>

</div>

</div>

</div>

<div class="contentcontainer sml right">

<div class="headings">

<h2 class="left">Mapa</h2>

</div> <div class="contentbox" style="padding-left:5px;"> <p> <!--<label for="textfield"><strong>Direccion</strong> <font color="#FF0000">*</font></label>--> <input id="search" type="text" class="inputbox" onKeyPress="return val3(event)" />

<input id="btnsearch" value="buscar" type="button" onClick="showAddress(); return false" class="btn" />

<div id="message"></div> </p>

<!--capa de google maps-->

<div class="innernotice" id="map" style="width:94%;height:348px"></div>

<!--fin capa de google maps-->

<input type="submit" value="Guardar" class="btn" name="btnGuardar" />

<input name="Restablecer" type="reset" class="btnalt" value="Limpiar" /> <input name="cancelar" type="button" class="btn" value="+ Sitios Importantes" onclick="MM_goToURL('self','mostrarSitio.php?sms=0&par=0&cod=0');return document.MM_returnValue" />

</div>

<input id="txtLatitud" name="txtLatitud" size="20" type="hidden" /> <!--caja de latitud-->

Page 192: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

176

<input id="txtLongitud" name="txtLongitud" size="20" type="hidden" /> <!--caja de longitud-->

</form>

</div>

<!--reproductor de audio-->

<div id="demo1player"></div>

<!--fin de la voz-->

<audio id="9thwonder" controls="controls" style="display:none;">

<source id="origen" type="audio/mp3" src="<?php echo $sitio->codigoSitio().".mp3"?>"/>

Su navegador no soporta la Audio Guia.

</audio>

<SCRIPT type="text/javascript">

var categoria = new LiveValidation( 'cboCategoria');

categoria.add( Validate.Presence);

var nombre = new LiveValidation('txtNombre');

nombre.add( Validate.Presence);

nombre.add( Validate.Length,{minimum: 4});

var Direccion = new LiveValidation('txtDireccion');

Direccion.add( Validate.Presence);

Direccion.add( Validate.Length,{minimum: 4});

var Horario = new LiveValidation('txtHorario');

Horario.add( Validate.Presence);

Horario.add( Validate.Length,{minimum: 4});

var Telefono = new LiveValidation('txtTelefono');

Telefono.add( Validate.Presence);

var Descripcion = new LiveValidation( 'txtDescripcion');

Descripcion.add( Validate.Presence);

Descripcion.add( Validate.Length,{minimum: 4});

Page 193: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

177

$(document).ready(function(){

$("#formu").submit(function(){

var lat = $("#txtLatitud").val();

var cat = $("#cboCategoria").val();

if (lat=="") {

alert("Escoja una ubicacion en el mapa");

return false;

}else

return true;

})

$('#audio-play').hide();

$('#audio-pause').hide();

$('#audio-stop').hide();

$('#loading').hide();

});

$('#generar').click(function() {

$('#audio-play').hide();

$('#audio-pause').hide();

$('#audio-stop').hide();

$('#loading').hide();

var text=$("#txtDescripcion").val(); //obtener el valor del textarea

if (text!="")

{

//usuario 1: app: EVAL_2180664, pwd: vq2ki9ki

//usuario 2: app: EVAL_8911700, pwd: clga64su

//usuario 3: app: EVAL_8007271, pwd: m693tmv3

$('#loading').show();

$.ajax({

Page 194: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

178

url: "http://vaas.acapela-group.com/webservices/1-32-01-JSON/synthesizer.php?jsoncallback=?",

dataType: 'json',

data: {prot_vers: 2, cl_login: "EVAL_VAAS", cl_app: "EVAL_8911700", cl_pwd: "clga64su", req_voice:"antonio22k", req_text:text,req_vct:"102"},

async: false,

success: function(data)

{

$.post("subir.php",{url:data.snd_url,codSit:0},function(respuesta){

//$("#origen").attr("src",respuesta).detach().appendTo("#9thwonder");

$('#9thwonder')[0].pause();

$('#9thwonder')[0].currentTime = 0;

$('#audio-play').show();

$('#audio-stop').show();

$('#audio-pause').hide();

$('#loading').hide();

});

//$("#demo1player").html("<audio id='9thwonder' controls='controls' style='display:none;' ><source src='"+data.snd_url+"' type='audio/mp3' />Su navegador no soporta la Audio Guia.</audio>");

//$("#audio-download").attr("href", data.snd_url)

}

});

$('#loading').hide();

}else{

alert('ingrese minimo 10 caracteres en la descripcion')

$('#loading').hide();

} });

$('#audio-pause').hide();

Page 195: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

179

$('#pause').hide();

$('#audio-play').click(function() { $('#9thwonder')[0].play();

$('#audio-pause').show();

$('#audio-play').hide();

});

$('#audio-stop').click(function() {

$('#9thwonder')[0].pause();

$('#9thwonder')[0].currentTime = 0;

$('#audio-play').show();

$('#audio-pause').hide();

});

$('#audio-pause').click(function() {

$('#9thwonder')[0].pause();

$('#audio-play').show();

$('#audio-pause').hide();

});

$('#9thwonder').bind('ended', function() {

$('#audio-play').show();

$('#audio-pause').hide();

});

</script></body></html>

Eliminarsitio.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/sitio.class.php";

$sitio=new Sitio();

$id=$_GET["id"];

$cod=$_GET["cod"];

Page 196: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

180

$page=$_GET["page"];

$sitio->eliminarSitio($id);

header("Location:mostrarSitio.php?sms=4&par=5&page=$page&cod=$cod");

?>

CATEGORÍA

mostrarCategoria.php

<?php

include "../../CapaDatos/conexion.class.php";

//include "../../CapaNegocio/categoria.class.php";

include "../../CapaNegocio/mensajes.class.php";

$mensajes=new Mensajes();

//$categoria=new Categoria();

session_start();

if(isset($_SESSION["user"]))

{ $user=$_SESSION["user"];

}else{

header("location:../login/login.php");

}

//comprobar mensaje

$sms=$_GET["sms"];

$par=$_GET["par"];?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Categoria</title>

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<!-- Theme Start -->

Page 197: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

181

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<!-- Theme End -->

<script type='text/javascript' SRC="scripts/jquery.min.js"></script>

<script type='text/javascript' SRC="scripts/jquery-ui.min.js"></script>

<script type='text/javascript' SRC="scripts/jquery.wysiwyg.js"></script>

<script type='text/javascript' SRC="scripts/visualize.jQuery.js"></script>

<script type="text/javascript" SRC="scripts/functions.js"></script>

</head>

<body>

<div id="rightside" style="padding-top:10px; padding-left:10px">

<!-- MENSAJE -->

<?php

$mensajes->mostrarMensaje($sms,"Categoria",$par);

?>

<div class="contentcontainer">

<div class="headings altheading">

<h2>Categorias Registradas</h2>

</div>

<div class="contentbox">

<?php

$categoria->mostrarCategoria();

include "paginacion.php";

?>

<div style="clear: both;"></div>

</div> </div>

<div style="clear:both;"></div></div> </body></html>

nuevoCategoria.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/categoria.class.php";

Page 198: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

182

$categoria=new Categoria();

//comprobar sesion

session_start();

if(isset($_SESSION["user"]))

{ $user=$_SESSION["user"];

}else{ header("location:../login/login.php");

}

$nombre="";

//boton guardar

if(isset($_POST["btnGuardar"]))

{ //boton examinar

$nombre=$_FILES["file"]["name"];

if($nombre!="")

{ $destino="../img/markers/green/".$nombre;

if(copy($_FILES["file"]["tmp_name"],$destino))

{

//echo "Imagen Subida";

}else{

echo "Error";

}

}else{ echo "Seleccione un archivo:";

}

//fin boton examinar

//metodo guardar

$cod=$categoria->codigoCategoria();

$descripcion=trim($_POST["txtDireccion"]);

if (($categoria->existeCategoria($descripcion))==0)

{

$categoria->insertarCategoria(1,$cod,$descripcion,$nombre);

header("location:mostrarCategoria.php?sms=1&par=2");

Page 199: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

183

}else{

//echo "categoria ya existe";

header("location:mostrarCategoria.php?sms=2&par=6");

}}?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Nuevo Categoria</title>

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<!-- Theme Start -->

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<!-- Theme End -->

<!--validacion de los campos-->

<script type="text/javascript" src="../scripts/livevalidation_standalone.js"></script>

<script language="javascript" src="../scripts/validacion_letras_numeros.js"> </script>

<link rel="stylesheet" type="text/css" href="../styles/validacion.css"/>

<!--fin validacion de los campos-->

</head>

<body>

<div id="rightside" style="padding-top:10px; padding-left:10px">

<!-- MENSAJE -->

<!-- <div class="status info">

<p><img SRC="../img/icons/icon_info.png" alt="Information" /><span>¡Editado Correctamente!</span></p>

</div>-->

<!-- Blue Status Bar End -->

<!-- Alternative Content Box Start -->

Page 200: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

184

<div class="contentcontainer med left">

<div class="headings alt">

<h2>Nueva Categoria</h2>

</div>

<div class="contentbox">

<form action="nuevoCategoria.php" method="post" enctype="multipart/form-data">

<p>

<label for="textfield"><strong>Descripcion</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtDireccion" name="txtDireccion" class="inputbox" onkeypress="return val1(event)" />

</p> <p>

<label for="textfield"><strong>Imagen</strong> <font color="#FF0000">*</font></label>

<input type="file" name="file" id="imagen" class="inputbox" />

</p> <p>

<label for="textfield"><strong></strong> <font color="#FF0000">*</font> Campos Requeridos</label> </p>

<input type="submit" value="Guardar" class="btn" name="btnGuardar" />

<input name="Restablecer" type="reset" class="btnalt" value="Limpiar" /><input name="cancelar" type="button" class="btn" value="+ Categorias" onclick="MM_goToURL('self','mostrarCategoria.php?sms=0&par=0');return document.MM_returnValue" />

</form>

</div> </div> <div style="clear:both;"></div></div>

<SCRIPT type="text/javascript">

var apellido = new LiveValidation('txtDireccion');

apellido.add( Validate.Presence);

apellido.add( Validate.Length,{minimum: 4});

var imagen= new LiveValidation('imagen');

imagen.add( Validate.Presence);

</SCRIPT>

Page 201: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

185

</body></html>

eliminarCategoria.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/categoria.class.php";

$categoria=new Categoria();

$id=$_GET["id"];

$page=$_GET["page"];

$categoria->eliminarCategoria($id);

header("Location:mostrarCategoria.php?sms=4&par=5&page=$page");

?>

PUNTOS QR

Mostrarpuntos.php

<?php

if(!isset($_SESSION)) session_start();

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/mensajes.class.php";

include "../../CapaNegocio/itinerario.class.php";

$mensajes=new Mensajes();

$itinerario=new Itinerario();

$sms=$_GET["sms"];

$par=$_GET["par"];?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Rutas QR Creadas</title>

Page 202: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

186

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="rightside" style="padding-top:10px; padding-left:10px">

<?php $mensajes->mostrarMensaje($sms,"Usuario",$par); ?>

<div class="contentcontainer">

<div class="headings altheading">

<h2>Rutas Registradas</h2>

</div>

<div class="contentbox">

<div class="extrabottom">

<ul>

<li><a href="../estadistica/mostrarEstadistica.php?sms=0&par=0" target="frm_contenido"><img SRC="../img/icons/estadistica.png" alt="Buscar" width="20px" height="20px" />Estadisticas</a></li>

</ul>

</div>

<table width="100%">

<thead>

<tr>

<th width="25%">Nombre</th>

<th width="16%">N° Lugares</th>

<th width="14%">Fecha</th>

<th width="31%">Acciones</th>

</tr>

</thead>

<tbody>

<?php $itinerario->mostrarItinerario();?>

Page 203: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

187

</tbody>

</table>

<div style="clear: both;"></div>

</div> </div> <div style="clear:both;"></div></div>

</body></html>

nuevoPunto.php

<?php

if(!isset($_SESSION)) session_start();

include('../../../CapaDatos/conexion.class.php');

include('../../../CapaNegocio/categoria.class.php');

include('../../../CapaNegocio/sitio.class.php');

include('../../../CapaNegocio/itinerario.class.php');

$categoria=new Categoria();

$resultado=$categoria->listarCategoria(0);

$sitio=new Sitio();

$itinerario=new Itinerario();

unset($_SESSION["puntos"]); //para eliminar la session del itinerario

$_SESSION["puntos"]=null; //para eliminar la session del itinerario

if (isset($_POST["btnMapa1"]))

{

$cod=$itinerario->codigoItinerario();

$descripcion=trim($_POST["txtNombre"]);

$puntos=$_POST["puntos"];

for($i=0;$i<count($puntos);$i++)

{$_SESSION["puntos"][$i]=$puntos[$i]; }

if (($itinerario->existeItinerario($descripcion))==0)

{

$itinerario->insertarItinerario(1,$cod,$descripcion,count($puntos));

header("location: ../../qcode/index.php?cod=$cod");

Page 204: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

188

}else{ header("location:nuevoItinerario.php");

}}?>

<!DOCTYPE html>

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Nueva Ruta</title>

<script type="text/javascript" src="../../scripts/livevalidation_standalone.js"></script>

<script language="javascript" src="../../scripts/validacion_letras_numeros.js"> </script>

<link rel="stylesheet" type="text/css" href="../../styles/validacion.css"/>

<!--fin validacion de los campos-->

<!--para imprimir-->

<script type="text/javascript" src="js.js"></script>

<script type="text/javascript">

function imprSelec(nombre)

{

var ficha = document.getElementById(nombre);

var ventimp = window.open();

ventimp.document.write(ficha.innerHTML);

ventimp.document.close();

ventimp.print();

}

</script>

<link rel="stylesheet" type="text/css" href="jquery-ui-1.9.0.custom.css" />

<script src="site.js" type="text/javascript"></script>

<link rel="stylesheet" type="text/css" href="../msdropdown/dd.css" />

<script type="text/javascript" src="../msdropdown/js/jquery-1.6.1.min.js"></script>

<script type="text/javascript" src="../msdropdown/js/jquery.dd.js"></script>

<link rel="stylesheet" href="../../css/modal/style.css" />

<link rel="stylesheet" href="../../css/modal/growl.css" />

Page 205: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

189

<script type="text/javascript" src="../../scripts/growl.js"></script>

<script type="text/javascript">

jQuery(function($) {

$("#to2").bind("click",function(){

$.Growl.show("¡Revise los Puntos de la Ruta!", {

'title' : "Sitio de interes agregado",

'timeout': 3000

});

});

$("#trazar").bind("click",function(){

$.Growl.show("¡Revise el Mapa y las calles a seguir!", {

'title' : "Itinerario creado",

'timeout': 3000

});

});

});

</script>

<script src="../../scripts/dlbScriptCrossBrowser.js" language="javascript" type="text/javascript"></script>

<link href="../../css/styleLista.css" type="text/css" rel="Stylesheet">

<script type="text/javascript">

$( function (){

$("#btnMapa1").click( function (){

$('#puntos').empty(); //para vaciar la lista

$('#items select option').clone().appendTo("#puntos"); //para copiar SOLO los option de la lista

$("#enviar_puntos select option").attr('selected', 'selected'); //marcar todos los elementos de una lista

});

});

$(document).ready(function() {

Page 206: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

190

google.maps.event.trigger(map, 'resize');

try {

oHandler = $(".mydds").msDropDown().data("dd");

//oHandler.visible(true);

//alert($.msDropDown.version);

//$.msDropDown.create("body select");

$("#ver").html($.msDropDown.version);

} catch(e) {

alert("Error: "+e.message);

}

$('#loader').hide();

$('#enviar_puntos').hide();

$('#lista_puntos').hide();

$('#location').hide();

$('#optimise').hide();

$('#roundTrip').hide();

$('#routeType').hide();

$.post("../listarLugares.php", {

parent_id: $('#search_category_id').val(),

}, function(response){

finishAjax('show_sub_categories',escape(response));

});

$('#search_category_id').change(function(){

$('#loader').show();

$.post("../listarLugares.php", {

parent_id: $('#search_category_id').val(),

}, function(response){

setTimeout("finishAjax('show_sub_categories', '"+escape(response)+"')", 400);

});

Page 207: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

191

return false;

}); });

function finishAjax(id, response){

$('#loader').hide();

$('#show_heading').show();

$('#show_search').show();

$('#show_contador').show();

$('#'+id).html(unescape(response));

$('#'+id).fadeIn();

UpdateLabel("box1Group");

}

function alert_id()

{

if($('#sub_category_id').val() == '')

alert('Please select a sub category.');

else

alert($('#sub_category_id').val());

return false;

}

function selectAllOptions(selStr)

{

var selObj = document.getElementById(selStr);

for (var i=0; i<selObj.options.length; i++)

{

selObj.options[i].selected = true;

}

}

function busqueda()

{

var sitio = document.getElementById('sub_category_id');

Page 208: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

192

var location= document.getElementById('location');

location.value=sitio.options[sitio.selectedIndex].value+", Pichincha, Ecuador"; //pasar valores de la lista al textbox para la busqueda

//alert(lista.options[lista.selectedIndex].value);

}

</script>

<script type='text/javascript'>

$(document).ready(function() {

$(".contenido_tab").hide(); //Ocultar capas

$("ul.tabs li:first").addClass("activa").show(); //Activar primera pestaña

$(".contenido_tab:first").show(); //Mostrar contenido primera pestaña

$("ul.tabs li").click(function() {

$("ul.tabs li").removeClass("activa"); //Borrar todas las clases "activa"

$(this).addClass("activa"); //Añadir clase "activa" a la pestaña seleccionada

$(".contenido_tab").hide(); //Ocultar todo el contenido de la pestaña

var activatab = $(this).find("a").attr("href"); //Leer el valor de href para identificar la pestaña activa

$(activatab).fadeIn(); //Visibilidad con efecto fade del contenido activo

return false;

});

});

</script>

<link href="../../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<link href="../../themes/blue/styles.css" rel="stylesheet" type="text/css" />

</head>

<body>

<div id="rightside2" style="background-image:url(../../img/bg1.JPG);">

<!-- MENSAJE -->

<div class="contentcontainer">

Page 209: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

193

<div class="headings altheading">

<h2>Nueva Ruta</h2>

</div>

<div class="contentbox">

<form action="waypoints.php" name="form1" id="form1" method="post" enctype="multipart/form-data">

<input type="button" onclick="MM_goToURL('self','waypoints.php');return document.MM_returnValue" class="btnalt" value="Nuevo Itinerario"/> <input type="submit" onclick="GetDirections()" name="btnMapa1" class="btn" id="btnMapa1" value="Guardar" /><input type="button" id="trazar" class="btnalt" onclick="MM_goToURL('self','../mostrarItinerario.php?sms=0&par=0');return document.MM_returnValue" value="+ Rutas QR"/><!--<input type="button" name="btnImprimir" class="btn" value="Imprimir Mapa de Ruta" onClick="javascript:imprSelec('qrtag_div')"/>-->

<br clear="all" /><br clear="all" />

<h3>Nombre de la Ruta <font color="#FF0000">*</font></h3>

<input type="text" id="txtNombre" name="txtNombre" class="inputbox" onkeypress="return val1(event)" />

<br clear="all" /><br clear="all" />

<div class="Content">

<div id="box1Group" class="both">

<h4>Categoria <font color="#FF0000">*</font></h4>

<select name="search_category" id="search_category_id" style="width:300px;" class="mydds" >

<option value="110" selected="selected" style="background:#333;color:#fff">-Seleccione una Categoria-</option>

<?php

while ($rows = mysql_fetch_array(@$resultado))

{?>

<option title="../../img/markers/green/<?php echo $rows['2'];?>" value="<?php echo $rows['0'];?>"><?php echo $rows['1'];?></option>

<?php

}?>

</select>

<br clear="all" />

Page 210: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

194

<h4 id="show_heading">Lugares de Interes <font color="#FF0000">*</font></h4>

<div id="show_search" align="center" class="both">

<span>Buscar: </span><input type="text" name="filter"><button type="button" name="clear">X</button>

<button id="to2" type="button" style="width:78px;" onclick="busqueda();AddLocation()">Agregar</button>

<br clear="all" />

</div>

<div id="show_sub_categories" align="center">

<img src="loader.gif" style="margin-top:8px; float:left" id="loader" alt="" />

</div>

<span id="show_contador" class="countLabel">Mostrando 16 de 16</span>

<select name="storage" class="storageBox"></select>

</div>

<button id="to22" type="button" style="width:39px;" onclick="busqueda();AddLocation()">></button>

<button id="allTo2" type="button" style="width:41px; ">>></button>

<button id="allTo1" type="button" style="width:41px; "><<</button>

<button id="to1" type="button" style="width:39px; "><</button>

<div id="box2Group" class="both" style="padding-top:24px"> <div id="items">

<select name="view" multiple="multiple" style="height:220px;width:300px;" id="lista_puntos" >

<?php

if(isset($_SESSION["puntos"]))

{

for($k=0;$k<count($_SESSION["puntos"]);$k++)

{

$cod=$_SESSION["puntos"][$k];

$listar=$sitio->consultarSitio($cod);

$imp=mysql_fetch_array($listar);

Page 211: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

195

echo "<option value=".$cod.">".$imp['2']."</option>";

}

}

?>

</select>

</div>

<select name="storage" class="storageBox"></select>

<ul class="tabs">

<li><a href="#tab1">Mapa</a></li>

<li><a href="#tab2">Puntos del Itinerario</a></li>

<li><a href="#tab3">Calles a Seguir</a></li>

<li><a href="#tab4">Ayuda</a></li>

</ul>

<div class="contenedor_tab">

<div id="tab1" class="contenido_tab" >

<div id="qrtag_div" style="width : 450px; height : 370px;">

<div id="map" style="width: 450px; height:370px; text-align:center;"></div>

</div>

</div>

<div id="tab2" class="contenido_tab" >

<table id="locations" style="width:100%;">

<tbody>

<tr>

<td colspan="3">&nbsp;</td>

</tr>

</tbody>

</table>

</div>

<div id="tab3" class="contenido_tab">

<span id="distance"></span> <span id="duration"></span>

Page 212: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

196

<div id="directions"></div>

</div>

</div>

<div style="clear:both;"></div>

</div>

<br clear="all" /><br clear="all" />

<div id="enviar_puntos">

<select name="puntos[]" multiple="MULTIPLE" id="puntos" style="height:220px;width:300px;" >

</select>

</div>

</div>

</div>

<div class="realContent">

<!--capa del mapa

<div id="qrtag_div" style="width : 500px; height : 400px; border: solid 1px #ccc; text-align : center;">

<span style="color:Gray;">Mapa del Itinerario</span>

<div id="map" style="width: 450px; height:370px; text-align:center;">

<span style="color:Gray;">Cargando mapa...</span>

</div>

</div>

fin capa del mapa-->

<div>

<div>

<input type="text" id="location" style="width:400px;" />

</div>

<table>

<tr>

<td>

Page 213: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

197

<input type="checkbox" id="optimise" checked />

</td>

</tr>

<tr>

<td>

<input type="checkbox" id="roundTrip" />

</td>

</tr>

<tr>

<td>

<select id="routeType">

<option>Auto</option>

<option selected>A Pie</option>

<option>Transporte Publico</option>

<option>Bicicleta</option>

</select>

</td>

</tr>

</table>

</div>

<script src="http://maps.google.com/maps/api/js?libraries=places&amp;sensor=false" type="text/javascript"></script>

</div>

</div>

</form>

</div>

</div>

</div>

<div class="Footer"> </div>

Page 214: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

198

<script type="text/javascript">

var nombre = new LiveValidation('txtNombre');

nombre.add( Validate.Presence);

nombre.add( Validate.Length,{minimum: 4});

</script>

</body>

</html>

Eliminarpunto.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/itinerario.class.php";

$itinerario=new Itinerario();

$id=$_GET["id"];

$itinerario->eliminarItinerario($id);

header("Location:mostrarItinerario.php?sms=4&par=5");

?>

Page 215: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

199

USUARIOS

mostrarUsuario.php

<?php

session_start();

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/login.class.php";

include "../../CapaNegocio/mensajes.class.php";

$mensajes=new Mensajes();

$usuario=new Login();

$datosUsu=$usuario->listarUsuario(0);

if(isset($_SESSION["user"]))

{

$user=$_SESSION["user"];

}else{

header("location:../login/login.php?sms=0&par=1&opc=0");

}

//comprobar mensaje

$sms=$_GET["sms"];

$par=$_GET["par"];

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Usuario</title>

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" href="../css/reveal.css">

Page 216: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

200

<script type="text/javascript" src="../scripts/jquery-1.7.1.min.js"></script>

<script type="text/javascript" src="../scripts/jquery.reveal.js"></script>

<script type="text/javascript">

function imprSelec(nombre)

{

var ficha = document.getElementById(nombre);

var ventimp = window.open();

ventimp.document.write(ficha.innerHTML);

ventimp.document.close();

ventimp.print();

var i = 0;

while (i < 100000)

{i++;}

ventimp.close();

}

</script>

</head>

<body>

<?php

while($rseva=mysql_fetch_array($datosUsu))

{

?>

<div id="myModal-<?php echo $rseva[0]?>" class="reveal-modal">

<h1>QR Card</h1>

<p><div id="qrtag_div-<?php echo $rseva[0]?>">

<table width="370px" border="1" cellspacing="0" cellpadding="5" style="font-family:Arial, Helvetica, sans-serif; font-size:12px">

<tr>

<td width="170px"><img align="left" src="../qcode/users/<?php echo $rseva[6]?>.png" width="170px" height="170px"/></td>

Page 217: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

201

<td><h4><?php echo $rseva[1]?> <?php echo $rseva[2]?></h4>

<img height='16px' width='16px' src='../img/icons/direccion.png'/> <?php echo $rseva[3]?></br>

<img height='16px' width='16px' src='../img/icons/mail.png'/> <?php echo $rseva[5]?></br>

<img height='16px' width='16px' src='../img/icons/usuario.png'/> <?php echo $rseva[6]?>

</td>

</tr>

</table></div>

</p>

<a href="#" onClick="javascript:imprSelec('qrtag_div-<?php echo $rseva[0]?>')"><img src="../img/icons/printer.png" width="16px" height="16px"> Imprimir</a>

<a class="close-reveal-modal">&#215;</a>

</div>

<?php

}

?>

<div id="rightside" style="padding-top:10px; padding-left:10px">

<!-- MENSAJE -->

<?php

$mensajes->mostrarMensaje($sms,"Usuario",$par);

?>

<div class="contentcontainer">

<div class="headings altheading">

<h2>Usuarios Registrados</h2>

</div>

<div class="contentbox">

<table width="100%">

<thead>

<tr>

Page 218: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

202

<th width="12%">Apellido</th>

<th width="12%">Nombre</th>

<th width="15%">Direccion</th>

<th width="13%">Telefono</th>

<th width="13%">E-mail</th>

<th width="15%">Usuario</th>

<th width="15%">Acciones</th>

</tr>

</thead>

<tbody>

<?php $usuario->mostrarUsuario();?>

</tbody>

</table>

<div style="clear: both;"></div>

</div>

</div>

<div style="clear:both;"></div>

</body>

</html>

nuevoUsuario.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/login.class.php";

$usuario=new Login();

session_start();

if(isset($_SESSION["user"]))

{

$user=$_SESSION["user"];

}else{

Page 219: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

203

header("location:../login/login.php?sms=0&par=0&opc=0");

}

//boton guardar

if(isset($_POST["btnGuardar"]))

{

$cod=$usuario->codigoUsuario();

$nombre=trim($_POST["txtNombre"]);

$apellido=trim($_POST["txtApellido"]);

$direccion=trim($_POST["txtDireccion"]);

$telefono=trim($_POST["txtTelefono"]);

$mail=trim($_POST["txtEmail"]);

$user=trim($_POST["txtUsuario"]);

$clave=trim($_POST["txtClave"]);

if (($usuario->existeLogin($user))==0)

{

$usuario->insertarUsuario(1,$cod,$nombre,$apellido,$direccion,$telefono,$mail,$user,$clave);

header("location:../qcode/indexUsuario.php?cod=$cod&sms=1&par=2");

}else{

//echo "usuario ya existe";

header("location:mostrarUsuario.php?sms=2&par=3");

}

}

?>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Quito Q-Rioso | Nuevo Usuario</title>

Page 220: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

204

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

<link href="../styles/wysiwyg.css" rel="stylesheet" type="text/css" />

<link href="../themes/blue/styles.css" rel="stylesheet" type="text/css" />

<script type="text/javascript" src="../scripts/livevalidation_standalone.js"></script>

<script language="javascript" src="../scripts/validacion_letras_numeros.js"> </script>

<link rel="stylesheet" type="text/css" href="../styles/validacion.css"/>

</head>

<body>

<div id="rightside" style="padding-top:10px; padding-left:10px">

<div class="contentcontainer med left">

<div class="headings alt">

<h2>Nuevo Usuario</h2>

</div>

<div class="contentbox">

<form action="nuevoUsuario.php" method="post">

<p>

<label for="textfield"><strong>Nombre</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtNombre" name="txtNombre" class="inputbox" onkeypress="return val(event)" />

</p> <p>

<label for="textfield"><strong>Apellido</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtApellido" name="txtApellido" class="inputbox" onkeypress="return val(event)" />

</p> <p>

<label for="textfield"><strong>Direccion</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtDireccion" name="txtDireccion" class="inputbox" onkeypress="return val1(event)" />

</p> <p>

<label for="smallbox"><strong>Telefono</strong> </label>

Page 221: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

205

<input type="text" id="txtTelefono" name="txtTelefono" class="inputbox smallbox" onKeyPress="return numeros(event)"/>

</p><p>

<label for="textfield"><strong>E-mail</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtEmail" name="txtEmail" class="inputbox" />

</p><p> <label for="textfield"><strong>Usuario</strong> <font color="#FF0000">*</font></label>

<input type="text" id="txtUsuario" name="txtUsuario" class="inputbox" onkeypress="return val2(event);" />

</p><p> <label for="textfield"><strong>Contraseña</strong> <font color="#FF0000">*</font></label>

<input type="password" id="txtClave" name="txtClave" class="inputbox smallbox" onkeypress="return val2(event);" />

</p><p> <label for="textfield"><strong>Repetir Contraseña</strong> <font color="#FF0000">*</font></label>

<input type="password" id="txtClave1" name="txtClave1" class="inputbox smallbox" onkeypress="return val2(event);" />

</p><p> <label for="textfield"><strong></strong> <font color="#FF0000">*</font> Campos Requeridos</label>

</p><input type="submit" value="Guardar y Generar QR Card" class="btn" name="btnGuardar" />

<input name="Restablecer" type="reset" class="btnalt" value="Limpiar" /><input name="cancelar" type="button" class="btn" value="+ Usuarios" onclick="MM_goToURL('self','mostrarUsuario.php?sms=0&par=0');return document.MM_returnValue" />

</form> </div> </div><div style="clear:both;"></div></div>

<SCRIPT type="text/javascript">

var nombre = new LiveValidation('txtNombre');

nombre.add( Validate.Presence);

nombre.add( Validate.Length,{minimum: 4});

var apellido = new LiveValidation('txtApellido');

apellido.add( Validate.Presence);

apellido.add( Validate.Length,{minimum: 4});

var apellido = new LiveValidation('txtDireccion');

Page 222: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

206

apellido.add( Validate.Presence);

apellido.add( Validate.Length,{minimum: 4});

var mail = new LiveValidation('txtEmail');

mail.add( Validate.Presence);

mail.add( Validate.Email);

var usuario = new LiveValidation( 'txtUsuario');

usuario.add( Validate.Presence);

usuario.add( Validate.Length,{minimum: 12});

var clave = new LiveValidation( 'txtClave');

clave.add( Validate.Presence);

clave.add( Validate.Length,{minimum: 8});

var confirmar = new LiveValidation('txtClave1');

confirmar.add( Validate.Confirmation, { match: 'txtClave' } );

confirmar.add( Validate.Presence);

confirmar.add( Validate.Length,{minimum: 8});

</SCRIPT>

</body>

</html>

eliminarUsuario.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/login.class.php";

$usuario=new Login();

$id=$_GET["id"];

$usuario->eliminarUsuario($id);

header("Location:mostrarUsuario.php?sms=4&par=5");?>

WEB MÓVIL

Index.php

<!DOCTYPE html>

Page 223: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

207

<html>

<head>

<title>Quito Q-Rioso</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.1.min.css" />

<link rel="stylesheet" href="custom.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>

<div data-role="page">

<div data-role="content">

<div id="branding">

<h1>Quito Q-Rioso</h1>

</div>

<ul data-role="listview" data-inset="true" data-theme="a">

<li data-icon="grid"><a href="mostrarItinerario.php" id="itinerario" data-icon="custom">Rutas QR</a></li>

<li data-icon="search"><a href="mostrarCategoria.php" data-icon="custom" >Buscar</a></li>

<li data-icon="gear"><a href="#" id="app" data-icon="custom" >Contactame</a></li>

</ul></div><!-- /content --></div><!-- /page --></body></html>

mostrarPuntosqr.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/itinerario.class.php";

include "../../CapaNegocio/detalle_itinerario.class.php";

Page 224: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

208

include "../../CapaNegocio/sitio.class.php";

include "../../CapaNegocio/opinion.class.php";

header('Content-Type: text/html; charset=iso-8859-1');

$cod=$_GET["cod"];

$itinerario=new Itinerario();

$sitio=new Sitio();

$opinion=new Opinion();

$datosItinerarios=mysql_fetch_array($itinerario->listarItinerario($cod));

$detItinerario=new Detalle_itinerario();

?>

<!DOCTYPE html>

<html>

<head>

<meta charset="UTF-8">

<title>Quito Q-Rioso | Puntos</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.1.min.css" />

<link rel="stylesheet" href="custom.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>

<div id="choisir_restau" data-role="page">

<div data-role="header">

<h1>Quito Q-Rioso</h1>

<a href="mostrarItinerario.php" data-iconpos="notext" data-role="button" data-icon="grid" data-theme="a" ></a>

Page 225: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

209

</div>

<div data-role="content">

<div class="choice_list">

<ul data-role="listview" data-theme="d" data-divider-theme="d">

<li data-role="list-divider"><?php echo $datosItinerarios[1]?><span class="ui-li-count"><?php echo $datosItinerarios[2]?></span></li>

<?php

$datosPuntos=$detItinerario->listarDetItinerario($datosItinerarios[0]); //consulta para obtener los puntos de cada ruta

while($puntos=mysql_fetch_array($datosPuntos))

{

$sitios1=$sitio->consultarSitio($puntos[1]); //consulta para obtener nombre y direccion del sitio

$datosSitio=mysql_fetch_array($sitios1);

?>

<li><a href="preliminar.php?cod=<?php echo $puntos[1]?>&codIti=<?php echo $puntos[2]?>&codDet=<?php echo $puntos[0]?>" rel="external" >

<h3><?php echo $datosSitio[2]?></h3>

<p><?php echo $datosSitio[3]?></p><p>

<?php

$op=round($opinion->calificarOpinion($puntos[1]));

switch($op){

case 1: echo '<p class="classement one">1 estrella</p>'; break;

case 2: echo '<p class="classement two">2 estrellas</p>'; break;

case 3: echo '<p class="classement three">3 estrellas</p>'; break;

}?></p></a></li><?php }?></ul></div><br/></div></div><!-- /page --></body></html>

Preliminar.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/sitio.class.php";

Page 226: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

210

include "../../CapaNegocio/detalle_itinerario.class.php";

header('Content-Type: text/html; charset=iso-8859-1');

$cod=$_GET["cod"]; //codigo del sitio importante

$codIti=$_GET["codIti"]; //codigo del itinerario

$codDet=$_GET["codDet"]; //codigo del detalle

$detItinerario=new Detalle_itinerario();

$detItinerario->contarDetItinerario($codDet);

$sitio=new Sitio();

$datos=mysql_fetch_array($sitio->consultarSitio($cod));

?>

<!DOCTYPE html>

<html>

<head>

<title>Quito Q-Rioso | Informacion</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.1.min.css" />

<link rel="stylesheet" href="custom.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>

<link href="css/jquery-mobile.css" type="text/css" rel="stylesheet" />

<link href="css/photoswipe.css" type="text/css" rel="stylesheet" />

<script type="text/javascript" src="js/klass.min.js"></script>

<script type="text/javascript" src="js/code.photoswipe.jquery-3.0.5.min.js"></script>

<script type="text/javascript">

(function(window, $, PhotoSwipe){

$(document).ready(function(){

Page 227: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

211

$('div.gallery-page')

.live('pageshow', function(e){

var currentPage = $(e.target), options = {}, photoSwipeInstance = $("ul.gallery a", e.target).photoSwipe(options, currentPage.attr('id'));

return true;})

.live('pagehide', function(e){

Var currentPage = $(e.target), photoSwipeInstance = PhotoSwipe.getInstance(currentPage.attr('id'));

if (typeof photoSwipeInstance != "undefined" && photoSwipeInstance != null) {

PhotoSwipe.detatch(photoSwipeInstance);

}

return true; });

});

}(window, window.jQuery, window.Code.PhotoSwipe));

</script>

</head>

<body>

<div id="choisir_restau" data-role="page">

<div data-role="header" id="header">

<h1>Quito Q-Rioso</h1>

<div data-role="navbar" data-iconpos="top">

<ul>

<li><a href="#" data-icon="info" data-rel="dialog" >Informacion</a></li>

<li><a href="detalleItinerario.php?cod=<?php echo $codIti?>" data-icon="grid" >Ruta QR</a></li>

<li><a href="mostrarCategoria.php" data-icon="search" data-rel="dialog" >Buscar</a></li>

</ul>

</div><!-- /navbar -->

Page 228: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

212

</div><!-- /header -->

<div data-role="content">

<div data-role="controlgroup" data-type="horizontal" data-mini="true">

<a data-role="button" data-theme="a" >AudioGuia</a>

<a id="audio-play" data-role="button" data-theme="e" data-icon="arrow-r" >&nbsp;</a>

<a id="audio-pause" data-role="button" data-theme="e" data-icon="info" >&nbsp;</a>

<a id="audio-stop" data-role="button" data-theme="e" data-icon="back" >&nbsp;</a>

</div>

<div id="demo1player"></div>

<audio id="9thwonder" controls="controls" style="display:none;">

<source src="<?php echo "../sitioImportante/mp3/".$cod.".mp3"?>" type="audio/mp3" />Su navegador no soporta la Audio Guia.

</audio>

<script type="text/javascript">

$('#audio-pause').hide();

$('#pause').hide();

$('#audio-play').click(function() {

$('#9thwonder')[0].play();

$('#audio-pause').show();

$('#audio-play').hide();

});

$('#audio-stop').click(function() {

$('#9thwonder')[0].pause();

$('#9thwonder')[0].currentTime = 0;

$('#audio-play').show();

$('#audio-pause').hide();

});

$('#audio-pause').click(function() {

$('#9thwonder')[0].pause();

$('#audio-play').show();

Page 229: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

213

$('#audio-pause').hide();

});

$('#9thwonder').bind('ended', function() {

$('#audio-play').show();

$('#audio-pause').hide();

});

</script>

<h3><?php echo $datos[2]?></h3>

<p align="justify"><?php echo $datos[4]?></p>

<h4>Horario de atenci&oacute;n:</h4>

<p><?php echo $datos[6]?></p>

<h4>Direcci&oacute;n</h4>

<p><?php echo $datos[3]?>.</p>

<div data-role="controlgroup" data-type="horizontal" data-mini="true">

<a href="preliminarImg.php?cod=<?php echo $cod ?>&codIti=<?php echo $codIti?>&codDet=<?php echo $codDet?>" data-role="button" data-theme="a" data-icon="check" >Imagenes</a>

<a href="comentarios.php?codSit=<?php echo $cod ?>" data-role="button" data-theme="b" data-icon="star" data-rel="dialog" >Comentarios</a>

</div>

</div><!-- /content -->

</div><!-- /page -->

</body>

</html>

Comentario.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/opinion.class.php";

$opinion=new Opinion();

$codSit=$_GET["codSit"];

$datos=$opinion->listarOpinion($codSit);

Page 230: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

214

?>

<!DOCTYPE html>

<html>

<head>

<title>Quito Q-Rioso | Comentarios</title>

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

<meta name="apple-mobile-web-app-capable" content="yes" />

<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.1.min.css" />

<link rel="stylesheet" href="custom.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>

</head>

<body>

<div id="choisir_restau" data-role="page">

<script type="text/javascript">

function resetTextFields()

{

$("#postContent").val("");

}

function onSuccess(data, status)

{

resetTextFields();

$("#notification").fadeIn(2000);

data = $.trim(data);

if(data == "SUCCESS")

{

$("#notification").css("background-color", "#ffff00");

$("#notification").text("¡Gracias por opinar!");

Page 231: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

215

$('#comentario').listview('refresh');

$('#comentario1').collapsibleset('refresh');

}else{

$("#notification").css("background-color", "#ff0000");

$("#notification").text(data);

}

$("#notification").fadeOut(4000);

}

$(document).ready(function() {

$("#submit").click(function(){

var formData = $("#newPostForm").serialize();

$.ajax({

type: "POST",

url: "nuevoComentario.php",

cache: false,

data: formData,

success: onSuccess

});

return false;

});

});

</script>

<div data-role="header" id="header" data-position="fixed">

<h1>Quito Q-Rioso</h1>

</div><!-- /header -->

<div data-role="content">

<form id="newPostForm">

<div data-role="fieldcontain">

Page 232: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

216

<textarea name="postContent" id="postContent" placeholder="Escribe un comentario, opinion iou sugerencia..."></textarea><input type="hidden" name="codSit" id="codSit" value="<?php echo $codSit?>" />

<br/><label for="select-choice-0" class="select"><strong>Califica el lugar:</strong></label>

<select name="note_utilisateur" id="note_utilisateur" data-native-menu="false" data-theme="c" >

<option value="1" class="one">Regular</option>

<option value="2" class="two">Bueno</option>

<option value="3" class="three">Interesante</option>

</select>

<br/><div data-role="controlgroup" data-type="horizontal" data-mini="true">

<button data-theme="b" id="submit" type="submit" data-inline="true" data-mini="true" data-icon="check">Enviar</button>

<a href="#" data-role="button" data-theme="a" data-icon="delete" data-rel="back">Cancelar</a>

</div>

<h3 id="notification"></h3> <!--aqui se escribe el resultado-->

</div></form>

<div data-role="collapsible-set" data-theme="b" data-content-theme="d" data-inset="false" id="comentario1">

<div data-role="collapsible">

<h2>Ver Comentarios</h2>

<ul data-role="listview" data-theme="d" data-divider-theme="d" id="comentario">

<?php

while($filas=mysql_fetch_array($datos))

{

?>

<li>

<p><?php echo $filas[2]?></p>

<p class="ui-li-aside"><strong><?php echo $filas[4]?></strong></p>

</li>

<?php }?></ul></div></div></div><!-- /content --></div><!-- /page --></body></html>

Page 233: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

217

Mapa.php

<?php

include "../../CapaDatos/conexion.class.php";

include "../../CapaNegocio/sitio.class.php";

include "../../CapaNegocio/categoria.class.php";

header('Content-Type: text/html; charset=iso-8859-1');

$categoria=new Categoria();

$sitio=new Sitio();

$cod=$_GET["codCat"];

$category=mysql_fetch_array($categoria->listarCategoria($cod));

$locations =$sitio->listarSitio($cod);

$nr_locations = mysql_num_rows($locations);

?>

<!DOCTYPE html>

<html>

<head>

<title>Quito Q-Rioso | Buscar por Categoria</title>

<link rel="stylesheet" href="css/themes/default/jquery.mobile-1.1.1.min.css" />

<link rel="stylesheet" href="custom.css" />

<script type="text/javascript" src="js/jquery.js"></script>

<script type="text/javascript" src="js/jquery.mobile-1.1.1.min.js"></script>

<link href="../styles/layout.css" rel="stylesheet" type="text/css" />

</head>

<body onLoad="initialize(); addMarkers()">

<div data-role="page">

<div data-role="header">

<a href="mostrarCategoria.php" data-iconpos="notext" data-role="button" data-icon="back" data-theme="a"></a>

<h1>Quito Q-Rioso</h1>

</div>

Page 234: INSTITUTO TECNOLÓGICO SUPERIOR “CORDILLERA” CARRERA DE

INSTITUTO TECNOLÓGICO SUPERIOR CORDILLERA

218

<div data-role="content">

<div data-role="collapsible">

<h2>Lugares</h2>

<ul data-role="listview" data-autodividers="true" data-theme="d" data-divider-theme="d">

<?php

while ($locat = mysql_fetch_array($locations))

{

// add lcoation data to info strings

$lats .= $locat[8].";;";

$lngs .= $locat[9].";;";

$addresses .= $locat[3].";;";

$names .= $locat[2].";;";

$descrs .= $locat[4].";;";

$photos .= $locat[5].";;";

$user_names .= $locat[7].";;";

$user_locs .= $locat[6].";;";

?>

<li><a style="cursor:pointer" onMouseOver="highlightMarker(<?php echo $i;?>)"><?php echo $locat[2];?></a></li>

<?php $i++; } ?>

</ul> </div>

<div class="noticeboxalt" >

<div class="innernotice" id="map_canvas"></div>

</div>

<!--fin capa de google maps-->

</div> <!--fin de content-->

</div> <!--fin de page-->

</body>

</html>