TECNOLOGÍA EN DISEÑO GRÁFICO Y MULTIMEDIA

PASEO VIRTUAL MULTIMEDIA APLICANDO VISTA

360º PARA PROMOCIONAR CENTROS
ARQUITECTÓNICOS CULTURALES DE LA CIUDAD
DE LOJA

Proyecto de Grado previo a la obtención del

Título de Tecnólogo en Diseño Gráfico y Multimedia

Darío Ismael Arévalo Ordóñez

Ing. María Cristina Carrillo Martínez

i
 CERTIFICACIÓN

Ing.

María Cristina Carrillo Martínez

DIRECTORA DEL PROYECTO DE GRADO

CERTIFICA:

Que el presente Proyecto de Grado titulado “ Paseo virtual multimedia aplicando vista 360º
para promocionar centros arquitectónicos culturales de la ciudad de Loja ”, por el estudiante
Dario Ismael Arévalo Ordóñez, ha sido orientado y revisado durante su ejecución, ajustándose
a las normas establecidas por el Instituto Tecnológico Superior Daniel Álvarez Burneo, por lo
que autorizo su presentación.

Loja, julio 2018

……………………………………………….
Ing. María Cristina Carrillo Martínez

DIRECTORA DEL PROYECTO DE GRADO

ii
 CESIÓN DE DERECHOS

Yo Dario Ismael Arévalo Ordóñez declaro ser autor del presente Trabajo de Proyecto de Grado:
“Paseo virtual multimedia aplicando vista 360º para promocionar centros arquitectónicos
culturales de la ciudad de Loja”, de Tecnólogo en Diseño Gráfico y Multimedia, siendo la Ing.
María Cristina Carrillo Martínez directora del presente trabajo; y eximo expresamente al
Instituto Tecnológico Superior Daniel Álvarez Burneo y a sus representantes legales de
posibles reclamos o acciones legales.

Loja, julio 2018

F ................................

Dario Ismael Arévalo Ordóñez

C.I.: 110449816-5

iii
 AUTORÍA

Las ideas y contenidos expuestos en el presente informe son de exclusiva responsabilidad

del autor.

Loja, julio 2018

F ................................

Dario Ismael Arévalo Ordóñez

C.I.: 110449816-5

iv
 DEDICATORIA

A mí madre, que con su apoyo me dio la fortaleza de cumplir este objetivo, sufriendo mis
ausencias y prestándome su comprensión en todo tiempo; a mis hermanos, quienes han sido
un ejemplo y un pilar fundamental de superación.

El Autor

v
 AGRADECIMIENTO

Expreso mi agradecimiento al personal docente y administrativo del Instituto Tecnológico

Superior Daniel Álvarez Burneo, por la oportunidad brindada para el mejoramiento y
formación profesional.

El Autor

vi
ÍNDICE DE CONTENIDOS

Carátula ……………………………………………………………………………………………. i

Certificación………………………………………………………………………………………… ii

Cesión de derechos ………………………………………………………………………………. iii

Autoría ……………………………………………………………………………………………… iv

Dedicatoria ………………………………………………………………………………………… v

Agradecimiento ……………………………………………………………………………………. vi

Índice de contenidos …………………………………………………………………………….... vii

Resumen ………………………………………………………………………………………….... 1

Palabras Clave ……………………………………………………………………………………... 1

Abstrac ………………………………………………………………………………………………. 3

Key Words ………………………………………………………………………………………… 3

INTRODUCCIÓN …………………………………………………………………………………. 5

CAPÍTULO I: MARCO TEÓRICO………………………………………………………………… 7

1.1 Aspectos generales de la ciudad de Loja…………………………………………………… 9

1.2 Centros arquitectónicos culturales de la ciudad de Loja …………………………………… 9

1.2.1 San Juan del Valle…………………………………………………………………………… 9

1.2.2 San Francisco ………………………………………………………………………………... 10

1.2.3 Iglesia Catedral ………………………………………………………………………………. 11

1.2.4 La Puerta de la Ciudad…………………………………………………………………….. 12

1.2.5 Iglesia de Santo Domingo………………………………………………………………….. 13

1.2.6 Santuario de San Sebastián y Plaza de la Independencia……………………………… 14

1.3 Fundamentos del diseño gráfico …………………………………………………………….. 16

1.3.1 Elementos Conceptuales ………………………………………………………………….. 16

1.3.2 Elementos Visuales…………….…………………………… ……………………………… 17

1.3.3 Elementos de Relación ……………………………………………………………………. 17

vii
1.4 La Fotografía…………………………………………………………………………………… 19

1.4.1 Planos fotográficos…………………………………………..………………………………. 19

1.4.2 Composición fotográfica ……………………………………………………………………. 20

1.4.3 Fotografía 360º……………………………………………………………………………….. 21

1.4.4 Retoque fotográfico………………………………………………………………………….. 22

1.4.5 Retoque fotográfico para un paseo virtual………………………………………………… 22

1.5 Recorrido virtual …………………………………………………………………………………22

1.6 Diseño web……………………………………………………………………………………… 23

1.6.1 Dominios………………………………………………………………………………………. 23

1.6.2 Hosting………………………………………………………………………………………… 24

1.6.3 Colores web………………………………………………………………………………….. 24

1.6.4 Tipografía web……………………………………………………………………………….. 25

1.6.5 Estilos CSS ……………………………………………………………………………………25

1.6.6 Sistema de navegación…………………………………….………………………………...26

1.6.7 Html5………………………………………………………………………………………….. 26

1.6.8 JavaScript …………………………………………………………………………………… 27

1.7 Herramientas de diseño ……………………………………………………………………… 27

1.7.1 Adobe Photoshop ……………………………………………………………………………. 27

1.7.2 Pano2VR……………………………………………………………………………………… 28

1.7.3 Adobe Illustrator……………………………………………………………………………… 28

1.7.4 Adobe Dreamweaver………………………………………………………………………… 28

1.7.5 PanoramaStudio Pro………………………………………………………………………. 28

CAPÍTULO II: DESARROLLO DE LA PROPUESTA…………………………………………... 29

2.1 Contexto ………………………………………………………………………………………… 31

2.2 Metodología…………………………………………………………………………………….. 32

2.2.1 Fase uno: planificación y análisis para el recorrido 360 ………………………………….32

viii
2.2.2 Fase dos: proceso de diseño del recorrido 360 ………………………………………….. 32

2.2.3 Fase tres: desarrollo del contenido del recorrido 360 …………………………………… 32

2.2.4 Fase cuatro: validación y socialización del recorrido 360 ………………………………. 32

2.3 Proceso…………………………………………………………………………………………. 33

2.3.1 Fase 1: planificación y análisis para el recorrido 360 ………………..…………………. 33

2.3.1.1 Investigación de campo ……………………………………………………………………33

2.3.1.2 Investigación bibliográfica …………………………………………………………………33

2.3.1.3 Observación y encuesta ……………………………………………………………………36

2.3.1.4 Análisis de resultados ………………………………………………………………………36

2.3.2 Fase 2: proceso de diseño del recorrido 360 ………………………………………………40

2.3.2.1 Boceto para identificadores ……………………………………………………………….40

2.3.2.2 Boceto de mapa de navegación…………………………………………………………. 41

2.3.2.3 Boceto del sitio web ………………………………………………………………………..42

2.3.2.4 Determinar puntos estratégicos………………………………………………………….. 44

2.3.2.5 Elección de cámara………………………………………………………………………... 47

2.3.2.6 Color y tipografía para los identificadores, logos y sitio web …………………………..48

2.3.2.7 Fondos del Sitio web ……………………………………………………………………….50

2.3.3 Fase 3: desarrollo de contenido del recorrido 360………………… …………………… 53

2.3.3.1 Fotografía de cada centro arquitectónico……………………………………………….. 55

2.3.3.2 Galería de fotográfica de cada centro arquitectónico …………………………………..55

2.3.3.3 Creación de panorama y edición fotográfica…………………………………………… 70

2.3.3.4 Creación de recorrido virtual HTML ………………………………………………………79

2.3.3.5 Mapa de navegación y sitio web ………………………………………………….. …..…83

2.3.3.6 Tipo de sitio………………………………………………………………………………… 89

2.3.3.7 Objetivos……………………………………………………………………………………. 90

2.3.3.8 Estabilidad………………………………………………………………………………….. 90
ix
2.3.3.9 Definición del diseño ……………………………………………………………………….90

2.3.3.10 Diseño de sitio con sus secciones ………………………………………………………90

2.3.4 Fase4: validación y socialización ………………………………………………………… 100

2.3.4.1 Testeo……………………………………………………………………………………… 100

2.3.4.2 Cambios al sitio ……………………………………………………………………………101

2.3.4.3 Publicación.………………………………………………………………………………. 102

2.3.4.4 Socialización……………………………………………………………………………… 102

CONCLUSIONES Y RECOMENDACIONES…………………………………………………. 103

BIBLIOGRAFÍA……………………………………………………………………………………. 106

ANEXOS.……………………………………………………………………………………………109