bolivariana de venezuela universidad dr. rafael …

BOLIVARIANA DE VENEZUELA UNIVERSIDAD DR. RAFAEL BELLOSO CHACÍN FACULTAD DE CIENCIAS DE LA INFORMÁTICA

ESCUELA DE DISEÑO GRÁFICO

DISEÑO DE UNA APLICACIÓN PARA DISPOSITIVOS MÓVILES ORIENTADA A PROMOVER EL TRABAJO DE LOS DISEÑADORES GRÁFICOS DE

MARACAIBO

TRABAJO ESPECIAL DE GRADO PARA OPTAR AL TÍTULO DE LICENCIADOS EN DISEÑO GRÁFICO

PRESENTADO POR:

Lcda. FERNÁNDEZ, JENNY Bch. REVEROL, HUMBERTO Bch. RODRÍGUEZ, JOSEPH

ASESORADO POR: Msg. ERNESTO VARGAS

Msg. JANETT PIRELA

MARACAIBO, JULIO 2012

DISEÑO DE UNA APLICACIÓN PARA DISPOSITIVOS MÓVILES ORIENTADA

A PROMOVER EL TRABAJO DE LOS DISEÑADORES GRÁFICOS DE

MARACAIBO

vi

A Dios en primera instancia, por permitirnos llegar al final de nuestra

carrera universitaria. Anuestras familias y seres más queridos, quienes nos

acompañaron a lo largo de toda la carrera, brindándonos la fuerza necesaria para

continuar en los momentos más difíciles. Y a nosotros mismos, por nunca perder el norte en este trabajo especial de grado.

vii

AGRADECIMIENTO

Es nuestro deseo hacer público un sincero reconocimiento a nuestro tutor académico, Msg. Ernesto Vargas, y nuestra tutora metodológica, Msg. Janett Pirela, quienes creyeron en nuestro proyecto a pesar de las vicisitudes que pudieron presentarse. Gracias por su constante orientación,paciencia y temple en aquellos momentos donde requeríamos de su determinación; les estaremos siempre agradecidos por contribuir en nuestra formación integral como hombres y mujeres profesionales del ahora y mañana.

viii

Fernández Pantoja, Jenny Stefanía. Reverol Calabria, Humberto Darío, Rodríguez Angulo, Joseph Manuel. Diseño de una aplicación para dispositivos móviles orientada a promover el trabajo de los diseñadores gráficos de Maracaibo. Universidad Dr. Rafael Belloso Chacín. Facultad de Ciencias de la Informática. Escuela de Diseño Gráfico. Maracaibo, 2012.

RESUMEN

El presente trabajo especial de grado se basa en el diseño de una aplicación para dispositivos móviles, orientada a promover el trabajo de los diseñadores gráficos de Maracaibo, a modo de generar la publicación de críticas culturales y profesionales en un colectivo gráfico digital. Se toma en cuenta el estudio de Christopher Alexander (1964) para el enfoque teórico en el cual se basa esta investigación, en donde a través de sus seis etapas (definición del problema, lista de exigencias, determinación de soluciones, análisis y descomposición, diagrama de resoluciones y síntesis formal) se plantea la creación, diseño y estructuración de una aplicación de dispositivos móviles para diseñadores marabinos. En el capítulo 1, denominado “Definición” se plantea el problema y las razones por las cuales surge la necesidad de crear una aplicación para diseñadores marabinos. En el capítulo 2, “Desarrollo”, se establecen las bases teóricas requeridas para preparar los contenidos del tema a profundidad. Para el capítulo 3, “Organización”, se selecciona el método de estudio y se determinan los criterios de diseño , como paleta de colores, texturas, hipervínculos, diagramación, fondos, trama, entre otros. Y finalmente en el capítulo 4, “Culminación”, se describe detalladamente el producto finalizado en la memoria descriptiva, mostrando por primera vez el diseño en un dispositivo móvil. Las plataformas de desarrollo utilizadas en el proyecto son los programas de diseño Adobe Illustrator y Photoshop, con los cuales se crea el concepto gráfico de la aplicación, prometiendo una calidad excelente en resultados finales, los cuales se destacan en las recomendaciones al final de este trabajo. Palabras Claves: aplicación web, red social, diseño gráfico, portafolio, mensajería , fotografía.

ix

Fernández Pantoja, Jenny Stefanía. Reverol Calabria, Humberto Darío, Rodríguez Angulo, Joseph Manuel. Designof an application for mobile devices oriented to promote the work of graphic designers of Maracaibo. Dr. Rafael Belloso Chacín University. Faculty of Computer Science. School of Graphic Design. Maracaibo, 2012.

ABSTRACT

This thesis degree is based on the design of an application for mobile devices, designed to promote the work of graphic designers from Maracaibo, Venezuela, with the purpose of generate cultural and professionals critics published in a digital graphiccollective. It takes into matter the study of Christopher Alexander (1964) for the theoretical approach in which is based this research, where through the six stages (problem definition, list of requirements, identifying solutions, analysis and decomposition, diagram of resolutions and formal synthesis) is represented the creation, design and structure of a mobile application for designers of Maracaibo. In Chapter 1, entitled "Definition", the problem is specified, as well as the reasons why there is a need to create an application for designers Maracaibo. Chapter 2, "Development", provides the theoretical basis required to prepare the contents of the subject in depth. For Chapter 3, "Organization", the method of study is selected and the design concept is determined, like the palette of colors, textures, hyperlinks, layouts, backgrounds, diagramming, among others. And finally Chapter 4, "Culmination", it describes in detail the finished product specifications, showing the design for the first time on a mobile device. The development platforms used in the project are the design programs Adobe Illustrator and Photoshop, which create the graphic concept of the application, promising an excellent quality for final results. Keywords: web application, social network, graphic design, portfolio, messaging, photography.

x

ÍNDICE GENERAL

Pág.

CONSTANCIA DE APROBACIÓN iii

DEDICATORIA vi

AGRADECIMIENTO vii

RESUMEN viii

ABSTRACT ix

ÍNDICE GENERAL x

ÍNDICE DE GRÁFICOS xviii

INTRODUCCIÓN 1

CAPÍTULO I. DEFINICIÓN 5

1. DESCRIPCIÓN SITUACIÓN OBJETO DE ESTUDIO 5

2. OBJETIVOS DE LA INVESTIGACIÓN 12

2.1 OBJETIVO GENERAL 12

2.2 OBJETIVOS ESPECÍFICOS 12

3. JUSTIFICACIÓN 13

4. DELIMITACIÓN 15

CAPÍTULO II. DESARROLLO 16

1. BASES TEÓRICAS 16

xi

1.1DISEÑO GRÁFICO 16

1.2 CONCEPTO GRÁFICO 17

1.3 COMPOSICIÓN 19

1.4 ELEMENTOS DE DISEÑO 20

1.4.1 PUNTO 20

1.4.2 LÍNEA 21

1.4.3 PLANO 21

1.4.4 ESPACIO 21

1.4.5 FIGURA 21

1.4.6 TAMAÑO 21

1.4.7 COLOR 22

1.4.8 TEXTURA 22

1.4.9 DIRECCIÓN 22

1.4.10 POSICIÓN 22

1.4.11 VOLUMEN 22

1.4.12 GRAVEDAD 23

1.5 LÍNEA 23

1.6 TIPOGRAFÍA 24

1.7 FUENTE 25

1.8 COLOR 26

1.8.1 PALETA DE COLORES 27

1.8.2 SISTEMAS DE COLORES EN COMPUTADORA 28

xii

1.8.2.1 RGB (RED, GREEN, BLUE) 28

1.8.2.2 CMYK (CYAN, MAGENTA, YELLOW, BLACK) 29

1.8.2.3 PANTONE 30

1.8.3 RUEDA CROMÁTICA 31

1.9 PERCEPCIÓN 32

1.10 CONTRASTE 33

1.11 SOFTWARE 34

1.12 HARDWARE 35

1.13 MULTIMEDIA 36

1.13.1 TIPOS DE MULTIMEDIA 38

1.13.1.1 MULTIMEDIA OFF-LINE 38

1.13.1.2 MULTIMEDIA ON-LINE 38

1.13.2 ELEMENTOS DEL MULTIMEDIA 39

1.13.2.1 TEXTO 39

1.13.2.2 IMAGEN 40

(A) TIPOS DE IMAGEN 41

(a) MAPA DE BITS 41

(b) VECTORES 42

(B) FORMATOS DE IMAGEN 44

(a) GIF 44

(b) JPEG (JOINT PHOTOGRAPHIC

EXPERTS GROUP)

45

xiii

(c) PNG (PORTABLE NETWORK GRAPHICS

SPECIFICATION)

46

1.13.2.3 SONIDO 48

(A)FORMATOS DE AUDIO 48

(a) WAV (WAVEFORM AUDIO FORMAT) 49

(b) MIDI (MUSICAL INSTRUMENT DIGITAL

INTERFACE)

49

(c) MP3 (MPEG-1 AUDIO LAYER 3) 51

1.13.2.4 VIDEO 52

(A) FORMATOS DE VIDEO 53

(a) AVI (WINDOWS AUDIO VIDEO

INTERLEAVED FORMAT)

53

(b) DVD (DIGITAL VERSATILE DISC) 54

(c) QUICKTIME 55

(d) MPEG (MOVING PICTURE EXPERTS

GROUP)

56

1.13.2.5 ANIMACIÓN 57

1.14 INTERFAZ 58

1.15 HIPERMEDIA 59

1.16 INTERNET 60

1.17 WWW (WORLD WIDE WEB) 61

1.18 SITIO WEB 62

xiv

1.19 HTML (HYPER TEXT MARK UP LANGUAGE) 64

1.20 NAVEGADOR 65

1.21 MAPA DE NAVEGACIÓN 66

1.21.1 JERÁRQUICA 67

1.21.2 LINEAL 68

1.21.3 LINEAL JERÁRQUICA 68

1.21.4 RED 69

1.22 HIPERTEXTO 69

1.23 ENLACE 71

1.24 APLICACIÓN 72

1.25 WEB 2.0 73

1.26 RED SOCIAL 75

1.27 DISPOSITIVO MÓVIL 77

1.28 CHAT 78

1.29 BLOG 81

2. BASES LEGALES 83

3. CASOS DE ESTUDIO 87

3.1. CASO DE ESTUDIO 1 87





xv

4. MÉTODOS DE DISEÑO 111

4.1 MÉTODO ARCHER 111

4.1.1 FASE ANALÍTICA 111

4.1.2 FASE CREATIVA 111

4.1.3 FASE EJECUTIVA 112

4.2 MÉTODO ASIMOW 112

4.3 MÉTODO MUNARI 113

4.4 MÉTODO ALEXANDER 114

4.5 MÉTODO FRASCARA 116

CAPÍTULO III. ORGANIZACIÓN 117

1. DETERMINANTES DEL PROYECTO 117

1.1 CROMA 117

1.2 PALETA DE COLORES 118

1.3 HIPERVÍNCULOS 119

1.4 TEXTO 120

1.5 FUENTES 120

1.6 IMÁGENES 121

1.7 RESOLUCIÓN 122

1.8 FORMATO DE IMÁGENES 123

1.9 SONIDO 123

1.9.1 TAMAÑO DEL CLIP DE SONIDO 123

xvi

1.9.2 NÚMERO DE CANALES 123

1.9.3 PROFUNDIDAD DE BIT 124

1.9.4 TASA DE MUESTREO 124

1.10 FORMATO DE SONIDOS 124

1.11 VIDEO 125

1.11.1 DURACIÓN 125

1.11.2 TAMAÑO DE FOTOGRAMA 125

1.11.3 TASA DE FOTOGRAMAS 125

1.11.4 CALIDAD 125

1.11.5 PROFUNDIDAD DE BIT DE COLOR 125

1.12 FORMATO DE VIDEO 126

1.13 RITMO 126

1.14 NAVEGACIÓN 127

2. CRITERIOS DEL PROYECTO 128

2.1 CROMA 128

2.2 PALETA DE COLORES 128

2.3 HIPERVÍNCULOS 129

2.4 TEXTO 130

2.5 FUENTES 130

2.6 IMÁGENES 131

2.7 RESOLUCIÓN 131

2.8 FORMATO DE IMÁGENES 132

xvii

2.9 SONIDO 132

2.10 FORMATO DE SONIDOS 132

2.11 VIDEO 133

2.12 FORMATO DE VIDEO 133

2.13 RITMO 134

2.14 NAVEGACIÓN 134

3. MÉTODO DE DISEÑO SELECCIONADO 137

4. SOPORTE Y FORMATO DEL PROYECTO 138

CAPÍTULO IV. CULMINACIÓN 139

1. DESARROLLO DEL PROYECTO 139

2. MEMORIA DESCRIPTIVA 148

CONCLUSIONES 154

RECOMENDACIONES 156

BIBLIOGRAFÍA 158

xviii

ÍNDICE DE GRÁFICOS

Pág.

Gráfico N°1, Estructura Jerárquica 67

Gráfico N°2, Estructura Lineal 68

Gráfico N°3, Estructura Lineal Jerárquica 68

Gráfico N°4, Estructura Tipo Red 69

Gráfico N°5. Artículo Qué es web 2.0. (O’Reilly) 75

Gráfico N°6, Caso de Estudio 1 (Gráfico 1) 88














xix






Gráfico N°25, Métodos de Diseño (Archer) 112

Gráfico N°26, Métodos de Diseño (Asimow) 113

Gráfico N°27, Métodos de Diseño (Munari) 114

Gráfico N°28, Métodos de Diseño (Alexander) 115

Gráfico N°29, Métodos de Diseño (Frascara) 116

Gráfico N°30, Fuentes Utilizadas: Myriad Pro y Arial Black 130

Gráfico N°31, Método de Diseño Seleccionado (Alexander) 137

Gráfico N°32, Prototipos de identificadores para aplicación 142

Gráfico N°33, Bocetos para isologo de Cubículo 13 142



Gráfico N°36, Isologo de Cubículo 13 145

Gráfico N°37, Mapa de Navegación de Cubículo 13 146

Gráfico N°38, Evolución de Concepto Gráfico 147

Gráfico N°39, Características de Diagramación 149

Gráfico N°40, Mi Cubículo 150

Gráfico N°41, Retículas de Diagramación 151

xx

Gráfico N°42, Empleo de la tipografía 152

Gráfico N°43, Botones 152

Gráfico N°44, Imágenes en Interfaz 153

INTRODUCCIÓN

Actualmente, la necesidad de publicar y leer información en línea es

ineludible. Siendo el internet uno de los más grandes medios de

comunicación con los que dispone la sociedad, hoy en día resulta casi

imposible no encontrar algún tema en común que no se ofrezca en una

aplicación para los dispositivos móviles; ya sean teléfonos inteligentes,

laptops o tabletas digitales, todas permiten navegar en web mediante el

explorador establecido en su sistema.

Las aplicaciones web son medios multidisciplinarios por excelencia;

cualquiera puede ingresar en ellas desde cualquier sitio con conexión a red,

posibilitando en buena medida la integración de las comunicaciones a nivel

mundial, en cualquier ámbito, permitiendo que cada información llegue

correctamente al usuario, independientemente del dispositivo desde el cual

se transmita o las características del usuario que la consulte.

Estas razones suponen una gran responsabilidad para diseñadores

gráficos, quienes se encuentran en una lucha por la supervivencia dentro del

mercado laboral en cuanto a la creación de conceptos innovadores dentro

del diseño, con lo que se llega la elección del tema de esta investigación.

2

Se tiene pues, como finalidad principal, el promover el trabajo de los

diseñadores gráficos marabinos, y facilitarles el camino a la incursión del

gremio profesional a través de un sistema organizado en línea que le permita

exponer sus habilidades, sus proyectos realizados y otros aspectos de su

perfil personal y profesional.

Es así como se planteará el objetivo general de diseñar una aplicación

para dispositivos móviles orientada a promover el trabajo de los diseñadores

gráficos de Maracaibo.

Para ello se establecerán entre los objetivos específicos: identificar los

elementos técnicos y de interacción que debe poseer una aplicación,

establecer el concepto creativo para el diseño de una aplicación que

promueva el trabajo de diseñadores marabinos, establecer posteriormente el

concepto gráfico, y finalmente desarrollar el diseño del producto como tal.

Ahora bien, para obtener los resultados deseados con la creación e

implementación de esta investigación, se dividirán sus contenidos teóricos en

4 capítulos: definición, desarrollo, organización y culminación, dentro de los

cuales se explicará el paso a paso del diseño de la aplicación y cómo se

construirá en una plataforma especialmente para dispositivos móviles.

3

Para el capítulo 1, Definición, se describirá la situación del objeto de

estudio, y se establecerá como objetivo principal la creación y desarrollo de

una aplicación para dispositivos móviles orientada a promover el trabajo de

los diseñadores gráficos de Maracaibo. Posterior a ello se justificarán las

razones por las cuales se considera necesario el desarrollo de esta

investigación y los beneficios significativos que podría aportar a la comunidad

marabina en su desarrollo como medio de exposición profesional.

En el capítulo 2, se comenzarán a desarrollar las bases teóricas y

legales que se deberán considerar para empezar a idear el concepto de la

aplicación. Adicionalmente, se estudiarán diversos casos como antecedentes

a este trabajo, para tener una referencia del funcionamiento de aplicaciones

web. Se propondrán varios métodos de diseño para desenvolver el concepto

gráfico, la diagramación y los contenidos de la aplicación.

En el capítulo 3, denominado "Organización", se plantearán las

determinantes del proyecto en función a las bases teóricas descritas en el

capítulo 2, tales como tipografía, imágenes, patrones de fondo, paleta de

colores, contenidos informativos, entre otros. Asimismo se establecerán los

criterios de dichas determinantes y se seleccionará uno de los métodos de

diseño propuestos. Por último se describirá breve pero detalladamente el

formato y soporte del proyecto.

4

En el cuarto y último capítulo se describirá el desarrollo del proyecto

como tal; cada uno de los pasos que llevarán a la culminación de la

aplicación. De igual manera, se explicará el concepto gráfico final en una

memoria descriptiva que englobará todos los aspectos que van a conformar

el diseño establecido.

Finalmente, se llegará a ciertas conclusiones de acuerdo a los

resultados obtenidos en base a los objetivos propuestos para esta

investigación, y se establecerán ciertas recomendaciones para el mejor

provecho en la utilización de una aplicación de dispositivos móviles dirigida a

diseñadores gráficos de la ciudad de Maracaibo.

Este proyecto se enmarcará dentro de una investigación de carácter

descriptivo y gráfico, con el propósito general de analizar parámetros de

funcionamientos en los diferentes componentes del sistema Web, utilizando

componentes de aplicaciones.

El diseño de esta investigación permitirá desarrollar una aplicación en

línea que agrupe en una red social a un colectivo de profesionales del área

de diseño, lo cual les permitirá compartir recursos, información y proyectos

en común.

bolivariana de venezuela universidad dr. rafael …

Documents