PDF de programación - Comparación de herramientas creative cloud para diseño web enfocado en la creación de un sitio sobre patrimonio cultural

ESCUELA SUPERIOR POLITÉCNICA DE CHIMBORAZO

FACULTAD DE INFORMÁTICA Y ELECTRÓNICA

ESCUELA DE DISEÑO GRÁFICO



” COMPARACIÓN DE HERRAMIENTAS CREATIVE CLOUD

PARA DISEÑO WEB ENFOCADO EN LA CREACIÓN DE UN

SITIO SOBRE PATRIMONIO CULTURAL”



Tesis de grado previo a la obtención del título de:

INGENIERO EN DISEÑO GRÁFICO



Autor: CRISTIAN PAUL PALTAN PALTAN

MIGUEL ANGEL ORTIZ FONSECA



Tutor: ING. MIGUEL DUQUE VACA

Riobamba - Ecuador

2016



AGRADECIMIENTO

Agradezco a Dios por su infinita bondad y por haber estado conmigo en los momentos que más

lo necesitaba, por darme salud, fortaleza, responsabilidad y sabiduría, por haberme permitido

culminar un peldaño más de mis metas.

A mis padres Carlos y Norma por ser los mejores, por haber estado conmigo apoyándome y por

dedicar tiempo y esfuerzo a ser un hombre de bien. A mis hermanas que con ejemplo y dedicación

me han instruido para seguir adelante en mi vida profesional.

De todo corazón a aquella mujer muy especial, a quien amo mucho, mi enamorada Alicia que con

su valor y entrega ha sido una persona incondicional en mi vida, que ha sido mi apoyo, mi soporte,

mi luz, mi día. Por haber estado conmigo apoyándome en los momentos más difíciles.

Al Ingeniero Miguel Duque por su colaboración y sabiduría por ser un excelente guía de esta

investigación.

Cristian Paltán.



A Dios, por ser quien me ha permitido llegar hasta el lugar en el que estoy, ya que sin Él nada

podría ser.

A mi madre, Georgina Fonseca por ser un apoyo fundamental e incondicional en mi vida, por

enseñarme a ser una persona de bien y darme aliento para continuar cuando me creía vencido.

A mis hermanos, por todo el cariño y comprensión que me han ofrecido durante este largo camino.

De manera especial al Ingeniero Miguel A. Duque por todo el apoyo brindado durante el

desarrollo de este trabajo de grado.

A mis maestros por haberme otorgado los conocimientos necesarios que hoy se ven cristalizados

al obtener mi Título Profesional.

A todas aquellas personas que de una u otra manera me han ayudado durante mi vida estudiantil.

Miguel Ortíz





DEDICATORIA

Dedico mi tesis a Dios, a mis extraordinarios padres por su noble dedicación y amor, por guiarme

siempre y ser la voz de bendición de Dios.

A mi enamorada Alicia Cabay por ser mi apoyo fundamental, incondicional en los momentos más

difíciles de mi vida, por haber dedicado tiempo y esfuerzo para culminar una meta más en mi

vida.

Cristian Paltán.



A Dios, ser Supremo y maravilloso que me ha regalado la sabiduría para que este sueño se hiciera

realidad.

De manera especial a mi madre, Georgina Fonseca por todos los esfuerzos y sacrificios que ha

hecho por mí y por cada uno de sus hijos, por ser una madre abnegada y maravillosa.

A mis amados hijos, Miguel Alexander y Emily Kristel Ortiz Orna, que con su sola existencia

fortalecen mi vida, por ser el motor que me impulsa a ser cada día un hombre mejor.

Miguel Ortíz



ESCUELA SUPERIOR POLITÉCNICA DE CHIMBORAZO

FACULTAD DE INFORMÁTICA Y ELECTRÓNICA

ESCUELA DE DISEÑO GRÁFICO



El Tribunal de Tesis certifica que: El trabajo de investigación” COMPARACIÓN DE

HERRAMIENTAS CREATIVE CLOUD PARA DISEÑO WEB ENFOCADO EN LA

CREACIÓN DE UN SITIO SOBRE PATRIMONIO CULTURAL”, de responsabilidad de los

señores PALTÁN PALTÁN CRISTIAN PAÚL y ORTÍZ FONSECA MIGUEL ÁNGEL, ha sido

minuciosamente revisada por los Miembros del Tribunal de Tesis, quedando autorizada su

presentación.



NOMBRE



FIRMA



FECHA

Dr. Miguel Tasambay

DECANO FACULTAD

…………………….……

…………………….……

INFORMÁTICA

Y ELECTRÓNICA



Dis. Mónica Sandoval

DIRECTORA DE LA …………………….…… …………………….……

ESCUELA DE DISEÑO

GRÁFICO



Ing. Miguel Duque …………………….…… …………………….……

DIRECTOR DE TESIS



Lic. Pablo Rosas …………………….…… …………………….……

MIEMBRO DEL

TRIBUNAL



DOCUMENTALISTA …………………….…… …………………….……

SISBIB ESPOCH



AUTORÍA



“Nosotros Cristian Paúl Paltán Paltán y Miguel Ángel Ortíz Fonseca, somos responsables de las

ideas, doctrinas y resultados expuestos en esta Tesis de Grado y el patrimonio intelectual de la

misma pertenecen a la Escuela Superior Politécnica de Chimborazo”.



------------------------------------------------ ------------------------------------------------

Cristian Paúl Paltán Paltán Miguel Angel Ortíz Fonseca



DECLARACIÓN DE AUTENTICIDAD



Nosotros, Cristian Paúl Paltán Paltán y Miguel Ángel Ortíz Fonseca declaramos que la presente

tesis de grado es de nuestra autoría y que los resultados del mismo son auténticos y originales.

Los textos constantes en el documento que provienen de otra fuente están debidamente citados y

referenciados.



Como autores, asumimos la responsabilidad legal y académica de los contenidos de esta tesis de

grado.



Riobamba, 07 de marzo del 2016

------------------------------------------------ ------------------------------------------------

Cristian Paúl Paltán Paltán Miguel Angel Ortíz Fonseca

Cédula de Identidad: 060381254-6 Cédula de Identidad: 060417766-7



TABLA DE CONTENIDO



PORTADA…………………………………………………………………………………..…..ii

AGRADECIMIENTO……………………………………………………………………..…..iii

DEDICATORIA……………………………………………………………………………......iv

FIRMAS RESPONSABLES………………………………………………………………..…..v

RESPONSABILIDAD DEL AUTOR………………………………………………………....vi

ÍNDICE GENERAL…………………………………………………………………………...vii

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

INDICE DE FIGURAS…………………………………………………………………...……ix

INDICE DE TABLAS…………………………………………………………………….…….x

RESUMEN………………………………………………………………………….......………xi

SUMMARY…...………………………………………………………………………..………xii

INTRODUCCIÓN……………………………………………………………………………….l



CAPITULO I

1. MARCO TEORICO

1.1. Diseño y comunicación……………………………………………………………..…25

1.1.1. Diseño Gráfico en la comunicación…………………………………………..……….25

1.2. Diseño web…………………………………………………………………...……….26

1.2.1. Interfaz web……………………………………………………………………...……26

1.3. Usabilidad web………………………….…………………………………...………..35

1.3.1. Beneficios de la evaluación de usabilidad en sitios web……………………...…...….35

1.4. Responsive Web Design………………………………………………………...…….37

1.5. Arquitectura de la información………….…………………………….……………….37

1.6. Diseño web centrado en el usuario………………………………………………….….38

1.6.1. Metodología de trabajo del Diseño Centrado en el Usuario……………...……...….....38

1.7. Patrimonio Cultural………………………………………………………..………..….46

1.7.1. Arquitectura………………………………………………………………...…………..46

1.7.2. Leyendas………………………………………………………………...……….…….52

1.7.3. Parques…………………………………………………………………………..….…55

1.7.4. Gastronomía……………………………………………………………………..….…60

1.7.5. Personajes……………………………………………………………………..….…....64

1.8. Suite Adobe Creative Cloud…………………………………………………..….……67

1.8.1. Generalidades …………………………………………………………………...…….67

1.8.2. Aplicaciones que forman parte de ACC………………………………………..….…..68

1.8.3. Programas para la aplicación web………………………………………..……………69



CAPITULO II

2. METODOLOGIA PARA LA SELECCIÓN DE LA HERRAMIENTA IDONEA PARA

UN SITIO WEB

2.1. Valoración de los nuevos programas de Creative Cloud para la Web…...…..……….71

2.1.1. Introducción……………………………………………………………...…………...71

2.1.2. Adobe Muse………………………………………………………….……..………...72

2.1.3. Adobe Edge Animate………………………………………………………………...78

2.1.4. Estudio Comparativo……………………………………………………..…………..82

2.1.4.1. Prueba de Aplicación………………………………………………………..……......82

2.1.5. Resultados…………...…………………………………………………………..…...93



CAPITULO III

3. CREACIÓN DE UN SITIO WEB DEL PATRIMONIO CULTURAL DE LA CIUDAD

DE RIOBAMBA.

3.1. Estrategia………………………………….……………………….………………..….96

3.1.1. Briefing……….…………………………………………………………………..…….97

3.1.2 Brenchmarking…….……………………………………………………………..…….98

3.2

Estudio del comportamiento del usuario……………………………...………..……..109

3.2.1 Personas y Escenarios…………………………………………………………..……..109

3.3

Conceptualización…………………….…………………………………...…..……...113

3.3.1 Card Sorting……..………………………………....................……...………………..113

3.3.2 Arquitectura de la información….………………....................……...………………..130

3.3.3 Mapa de navegación……………………………....................……...……….………..131

3.4.

Prototipado………………………………………………...……...…………………..131

3.4.1. Boceto a bajo nivel………………………………………...……...…………………..131

3.4.2. Wireframe…………………………..………………………...……...………………..143

3.4.3. Diseño Gráfico……………………………………………...……...………………….165

3.5

Test de Usuarios...……………………………………………......…...………………176



CONCLUSIONES

RECOMENDACIONES

GLOSARIO TÉCNICO

ANEXOS

BIBLIOGRAFÍA



LISTA DE ABREVIATURAS



CC:



Creative Cloud

HTML:

HyperText Markup Language (lenguaje de marcas de hipertexto)

FTP:

File Transfer Protocol (Protocolo de Transferencia de Archivos)

WYSiWYG:

What You See is What You Get (lo que ves es lo que obtienes)

SEO:



Search Engine Optimization (optimización para los motores de búsqueda)

CMS:

Content Management System (Sistema de gestión de contenidos)

API:

Application Programming Interface (Interfaz De Programación De Aplicaciones)

SVG:



Scalable Vector Graphics (Gráficos Vectoriales Redimensionables)

JPEG: