carrera de diseÑo grÁfico la tecnologÍa y el diseÑo

CARRERA DE DISEÑO GRÁFICO

LA TECNOLOGÍA Y EL DISEÑO ESPECIALIZADO, CREACIÓN DE UNA

PÁGINA WEB PARA LA EMPRESA PUBLIVENTAS, UBICADA EN

EL DISTRITO METROPOLITANO DE QUITO; AÑO 2013.

Proyecto de investigación previo a la obtención del título de

Tecnólogo en Diseño Gráfico

Autor: Pilacuán Salazar Jorge Patricio

Tutor: Arq. Iván Cruz

Quito, Octubre 2013

i

LA TECNOLOGÍA Y EL DISEÑO ESPECIALIZADO, CREACIÓN DE UNA PÁGINA WEB PARA LA

EMPRESA PUBLIVENTAS, UBICADA EN EL DISTRITO METROPOLITANO DE QUITO; AÑO 2013.

ii



DECLARATORIA

Declaro que la investigación es absolutamente original, auténtica, personal, que se

han citado las fuentes correspondientes y que en su ejecución se respetaron las

disposiciones legales que protegen los derechos de autor vigentes. Las ideas,

doctrinas resultados y conclusiones a los que he llegado son de mi absoluta

responsabilidad.

Jorge Patricio Pilacuán Salazar

C.I. 0702428764

iii



CONTRATO DE CESIÓN SOBRE DERECHOS PROPIEDAD

INTELECTUAL

Comparecen a la celebración del presente contrato de cesión y transferencia de

derechos de propiedad intelectual, por una parte, el estudiante PILACUÁN

SALAZAR JORGE PATRICIO, por sus propios y personales derechos, a quien en

lo posterior se le denominará el “CEDENTE”; y, por otra parte, el INSTITUTO

TECNOLÓGICO SUPERIOR CORDILLERA, representado por su Rector el

Ing. Ernesto Flores Córdova, a quien en lo posterior se le denominará el

“CESIONARIO”. Los comparecientes son mayores de edad, domiciliados en esta

ciudad de Quito Distrito Metropolitano, hábiles y capaces para contraer derechos y

obligaciones, quienes acuerdan al tenor de las siguientes cláusulas:

PRIMERA: ANTECEDENTE.- a) El cedente dentro del pensum de estudio en la

carrera de Diseño Gráfico que imparte el Instituto Tecnológico Superior Cordillera, y

con el objeto de obtener el título de tecnólogo en DISEÑO GRÁFICO el estudiante

participa en el proyecto de un grado denominado “LA TECNOLOGÍA Y EL

DISEÑO ESPECIALIZADO. CREACIÓN DE UNA PÁGINA WEB PARA LA

EMPRESA PUBLIVENTAS, UBICADA EN EL DISTRITO

METROPOLITANO DE QUITO, AÑO 2013” Por iniciativa y responsabilidad

del Instituto Tecnológico Superior Cordillera se desarrolla la creación de programa

de ordenador motivo por el cual se regula de forma clara la cesión de los derechos de

autor que genera la obra literaria y que es producto del proyecto de grado, el mismo

que culminado es de plena aplicación técnica, administrativa y de reproducción.

iv



SEGUNDA; CESIÓN Y TRANSFERENCIA.- Con el antecedente indicado, el

Cedente libre y voluntariamente cede y transfiere de manera perpetua y gratuita

todos los derechos patrimoniales de programa de ordenador descrito en la cláusula

anterior a favor de Cesionario, sin reservarse para sí ningún privilegio especial,

(código fuente, código objeto, diagramas de flujo, planos, manuales de uso, etc.). El

Cesionario podrá exportar el programa de ordenador por cualquier medio o

procedimiento tal cual lo establece el artículo 20 de la Ley de Propiedad Intelectual,

esto es, realizar, autorizar o prohibir, entre otros: a) La reproducción del programa de

ordenador por cualquier forma o procedimiento; b) La comunicación pública de

software; c) La distribución publica de ejemplares o copias, la comercialización,

arrendamiento o alquiler del programa de ordenador; d) Cualquier transformación o

modificación del programa de ordenador; e) La protección y registro en el IEPI el

programa del ordenador a nombre del Cesionario : f) Ejercer la protección jurídica

del programa de ordenador; g) Los demás derechos establecidos en la Ley de

Propiedad Intelectual y otros cuerpos legales que normen sobre la cesión de derechos

de autor y derechos patrimoniales.

TERCERA; OBLIGACIÓN DEL CEDENTE.- El cedente no podrá trasmitir a

ningún tercero los derechos que conforman la estructura, secuencia y organización

de programa de ordenador que es objeto del presente contrato, como tampoco

emplearlo o utilizarlo a título personal ya que siempre se deberá guardar la

exclusividad del programa de ordenador a favor de Cesionario.

v



CUARTA: CUANTÍA.- La cesión objeto del presente contrato, se realiza a título

gratuito y por ende el Cesionario ni sus administradores deben cancelar valor alguno

o regalías por este contrato y por los derechos que se derivan del mismo.

QUINTA; PLAZO.- La vigencia del presente contrato es indefinida.

SEXTA; DOMICILIO, JURISDICCIÓN Y COMPETENCIA.- Las partes fijan

con su domicilio la ciudad de Quito. Toda controversia o diferencia derivada de este,

será resuelta directamente entre las partes y, si esto no fuere factible, se solicitará la

asistencia de un Mediador de Centro de Arbitraje y Mediación de la Cámara de

Comercio de Quito. En el evento que el conflicto no fuere resuelto mediante este

procedimiento, en el plazo de diez días calendario desde su inicio, pudiendo

prorrogarse por mutuo acuerdo este plazo, las partes someterán sus controversias a la

resolución de un árbitro, que se sujetará a lo dispuesto en la Ley de Arbitraje y

Mediación, EL Reglamento de Centro del Arbitraje y Mediación de la Cámara de

Comercio de Quito, y las siguientes normas: a) El árbitro será seleccionado

conforme a lo establecido en la Ley de Arbitraje y Mediación: b) Las partes

renuncian a la jurisdicción ordinaria, se obligan a acatar el laudo arbitral y se

comprometen a no interponer ningún tipo de recurso en contra del laudo arbitral; c)

Para la ejecución de medidas cautelares, el árbitro está facultado para solicitar el

auxilio de los funcionarios públicos, judiciales, policiales y administrativos, sin que

sea necesario recurrir a un juez ordinario alguno: d) El procedimiento será

confidencial y en derecho; e) El lugar de arbitraje serán la instalaciones del centro

del arbitraje y medición de la Cámara de comercio de Quito; f) El idioma de

vi



arbitraje será el español; y , g) La reconvención, caso de haberla, seguirá los mismos

procedimientos antes indicados para el juicio principal.

SÉPTIMA; ACEPTACIÓN.- Las partes contratantes aceptan el contenido del

presente contrato, por ser hecho en seguridad de sus respectivos intereses.

En aceptación firman a los 24 días del mes de Septiembre del dos mil trece.

C.I. 070242876-4 Instituto Tecnológico Superior Cordillera

CEDENTE CESIONARIO

vii



AGRADECIMIENTO

Un agradecimiento especial a la empresa PUBLIVENTAS y sobre todo al Sr.

Patricio Marcelo Ponce Flores - Gerente Propietario, por las facilidades prestadas.

Proporcionando la información, comentarios, ideas y recursos que permiten culminar

con éxito el proyecto.

De igual manera al Ing. Santiago Castillo Pilacuán, por las aportaciones y

enseñanzas compartidas en cuanto al diseño y programación html lo que me sirvió

para poder alcanzar el normal desarrollo de la página web.

viii



DEDICATORIA

A mi padre por ser mi ejemplo a seguir

A mis hermanos y familiares por su apoyo incondicional

A mis profesores por sus enseñanzas

Al Instituto Cordillera por ser mi segundo hogar en estos años

ix



ÍNDICE GENERAL

Página

Declaración de aprobación tutor y lector i

Declaratoria de autoría del estudiante ii

Declaratoria de cesión de derechos a la institución iii

Agradecimiento vii

Dedicatoria viii

Índice General ix

Índice de tablas xii

Índice de figuras xiii

Capítulo I 1

Antecedentes 1

1.1 Contexto 1

1.1.1 Datos Informativos 1

1.1.2 Resumen del Proyecto 1

1.2 Justificar 2

1.3 Definición del problema central 4

Capítulo II 5

Análisis de involucrados 5

2.1 Identificación de Involucrados 5

2.2 Análisis y Selección con los involucrados 6

Capítulo III 7

Problemas y objetivos 7

3.1 Árbol de problemas 7

x



Página

3.2 Árbol de objetivos 8

Capítulo IV 9

Análisis de alternativas 9

4.1 Acciones e identificación de alternativas 9

4.2 Tamaño del proyecto 9

4.3 Localización del proyecto 10

4.4 Análisis Ambienta 10

4.5 Análisis de alternativas 11

4.6 Diagrama de Estrategias 12

4.7 Construcción de Matriz de Marco Lógico 13

Capítulo V 18

La Propuesta 18

5.1 Antecedentes de la herramienta del perfil de la Propuesta 18

5.1.1 Multimedia 18

5.1.2 El Diseño Web 18

5.2 Descripción de la Herramienta 19

5.2.1 Adobe Photoshop 19

5.2.2 Adobe Ilustrator 21

5.2.3 Adobe Flash 22

5.2.4 Adobe Dreamweaver 23

5.2.5 FileZilla 23

5.3 Formulación del proceso de aplicación 24

5.4 Planificación 24

xi



Página

5.4.1 Propósito 25

5.4.2 Usuario 25

5.5 Herramientas 25

5.5.1 Desarrollo 25

5.5.2 Contenidos 26

5.5.3 Mapa de Contenidos 27

5.5.4 Diseño de Interfaz 28

5.5.5 Imagen Corporativa 29

5.5.6 Colores 30

5.5.7 Tipografías 30

5.5.8 Botones 31

5.5.9 Retículas 33

5.6 Producción 35

5.6.1 Programación 47

5.6.2 Navegación – Interactividad 54

5.6.3 Servicios 54

5.6.4 Diseño y Producción 55

5.6.5 Imágenes 56

5.7 Marketing y Difusión 56

Capítulo VI 61

Aspectos administrativos 61

6.1 Recursos 61

6.2 Presupuesto 62

xii



Página

6.3 Cronograma 63

Capítulo VII 64

Conclusiones y Recomendaciones 64

7.1 Conclusiones 64

7.2 Recomendaciones 65

7.3 Referencias Bibliográficas 66

7.4 Anexos 66

ÍNDICE DE TABLAS

Página

Tabla Nº 1: Análisis y Selección con los involucrados 6

Tabla Nº 2: Análisis de alternativas 11

Tabla Nº 3: Revisión de Criterios para Indicadores 13

Tabla Nº 4: Selección de Indicadores 14

Tabla Nº 5: Medios de Verificación 15

Tabla Nº 6: Supuestos 16

Tabla Nº 7: Matriz Marco Lógico 17

Tabla Nº 8: Marketing y Difusión 57

Tabla Nº 9: Presupuesto 62

Tabla Nº 10: Cronograma 63

xiii



ÍNDICE DE FIGURAS

Página

Figura Nº 1: Identificación de Involucrados 4

Figura Nº 2: Árbol de problemas 6

Figura Nº 3: Árbol de objetivos 7

Figura Nº 4: Acciones e identificación de alternativas 8

Figura Nº 5: Diagrama de Estrategias 11

Figura Nº 6: Mapa de Contenidos 26

Figura Nº 7: Pantalla Principal 27

Figura Nº 8: Logotipo 28

Figura Nº 9: Menú principal 30

Figura Nº 10: Opciones Alternativas 30

Figura Nº 11: Botones adelantar y retroceder 31

Figura Nº 12: Opciones Alternativas Pulsadas 31

Figura Nº 13: Botón enviar formulario 31

Figura Nº 14: Retícula 33

Figura Nº 15: Pantalla Index 34

Figura Nº 16: Pantalla Quienes somos 35

Figura Nº 17: Pantalla Visión y Misión 36

Figura Nº 18: Pantalla Filosofía 37

Figura Nº 19: Pantalla Nuestros Clientes 38

Figura Nº 20: Pantalla Alianza estratégicas 39

Figura Nº 21: Pantalla Publicidad 40

Figura Nº 22 : Pantalla Implementos de limpieza 41

xiv



Página

Figura Nº 23: Pantalla Productos de limpieza 42

Figura Nº 24: Pantalla Productos químicos 43

Figura Nº 25: Pantalla Formulario de contactos 44

Figura Nº 26: Foto animación principal 53

Figura Nº 27: Marketing y difusión – Diseño de roll up 58

Figura Nº 28: Marketing y difusión – Diseño de flayer 59

Figura Nº 29: Marketing y difusión – Diseño de banner 60

xv



RESUMEN EJECUTIVO

Este proyecto ha podido realizarse gracias a una investigación del entorno y de la

actividad de la empresa PUBLIVENTAS, luego de identificar algunos de los

problemas como son la falta de clientes y ventas bajas que afectan a la entidad se

procedió a formular y establecer objetivos para encontrar las soluciones más idóneas.

Valiéndonos de métodos y técnicas de investigación hemos podido establecer una

herramienta que buscará solucionar los problemas detectados, es así que se

estableció la creación e implementación de una página web que permitirá a la

empresa ser más reconocida en el mercado y que aumenten sus clientes lo que

definitivamente incrementarán las ventas que servirán de beneficio para la empresa y

todo su entorno.

Esta herramienta es de gran aceptación y ha permitido a otras empresas alcanzar

éxito y reconocimiento en el mercado, solucionando los problemas y mejorando la

situación. Por eso este proyecto permitirá mejorar notablemente muchos de los

problemas que en la actualidad tiene la entidad.

xvi



ABSTRACT

This project has been able to be carried out thanks to an investigation of the

environment and of the activity of the company PUBLIVENTAS, after identifying

some of the problems like they are the lack of clients and low sales that affect to the

entity you proceeded to formulate and to establish objectives to find the most

suitable solutions.

Being worth us of methods and technical of investigation we have been able to a tool

that will look for to solve the detected problems, to settle down it is so the creation

and implementation of a page web that it will allow to the company to be more

grateful in the market settled down and that their clients increase that that

definitively will increase the sales that will serve as benefit for the company and all

its environment.

This tool is of great acceptance and it has allowed to other companies to reach

success and recognition in the market, solving the problems and improving the

situation. For that reason this project will allow to improve notably many of the

problems that at the present time has the entity.

xvii



INTRODUCCIÓN

Este proyecto sintetiza y aplica los conocimientos académicos que hemos adquirido

en estos tres años de carrera; la manera de organizar, planificar, diseñar e implantar

un sitios web; la facilita de acceso y finalmente, la experiencia que vive el usuario o

potencial cliente que visita y utiliza el sitio.

Por lo tanto este proyecto aborda los desafíos que hay y las maneras de enfrentarlos,

dependiendo de las metas y objetivos que se deseen alcanzar.

La creación de la página web para la empresa PUBLIVENTAS es de gran

importancia para el entorno y todos los involucrados. Ya que al mejorar la situación

de la empresa todos tendrán mejores opciones. Este proyecto trata de solucionar no

solo la situación de la entidad sino también la de los empleados, así como del

público y hasta del entorno o medio ambiente.

Al final todos obtendrán beneficios directos e indirectos, ya que el proyecto

implementado en un corto plazo tendrá los resultados para los que fue creado.

Se ha tratado de alcanzar todos los objetivos y solucionar un sinnúmero de obstáculo

que fueron apareciendo durante este tiempo de desarrollo, al final creo que este

proyecto es viable y permitirá mejorar la situación de la empresa, y con seguridad

tendrá una mejor imagen de su marca, así como mejorar el posicionamiento en el

mercado lo que lleva a ganar clientes y aumentar sus ventas.

1



CAPÍTULO I

ANTECEDENTES

1.1 Contexto

1.1.1 Datos informativos

Nombre del responsable o interlocutor:

Patricio Marcelo Ponce Flores - Gerente Propietario

Dirección de la organización:

Juan Galindez Nº111 y Av. 10 de Agosto

Teléfonos:

3069009 / 0987-999-243

Dirección electrónica:

[email protected] - [email protected]

1.1.2 Resumen del proyecto

La empresa Comercial PUBLIVENTAS ubicada en el sector norte del Distrito

Metropolitano de Quito, se dedica a la venta de productos e implementos de

limpieza en general, además de servicios de publicidad. Desde hace algunos años

atrás; esta viene funcionando en el mercado promocionándose con medios

publicitarios tradicionales, lo que ha provocado poco impacto visual y

desconocimiento en el grupo objetivo. Razón por la cual busca contar con

mailto:[email protected]

2



herramientas actualizadas y adecuadas de difusión; para dar a conocer sus

actividades y servicios, buscando de esta manera ganar un espacio en el mercado

actual que es muy competitivo.

La empresa PUBLIVENTAS viene experimentado ausencia de clientela y el no

crecimiento en las ventas lo cual perjudica de manera significativa el desarrollo

normal de sus objetivos dentro del mercado, en tales circunstancias se ha buscado

alternativas idóneas que le permitan tomar decisiones prácticas y aplicables para

solucionar esta problemática existente, y así seguir de forma exitosa en sus

actividades.

1.2 Justificar

En el transcurso de nuestra vida académica en el instituto hemos adquirido y

afianzados los conocimientos suficientes para poderlos aplicar en el presente

proyecto. Para así demostrar y ayudar al desarrollo de todos los entes involucrados.

Así mismo se justifica la realización del proyecto en razón de que una vez detectado

el problema se desea dar solución al mismo. Si bien es cierto hoy en día existe un

incremento de empresas cuyo objetivo es alcanzar éxito en el mercado buscando

movimiento económico y desarrollo social. Por lo que es indispensable dar

soluciones viables a los problemas que aquejan el desenvolvimiento normal de estas

empresas.

3



En el Plan Nacional del Buen vivir, que el presente gobierno busca llevar adelante

como algo fundamental para el país. Uno de sus objetivos principales dice:

Objetivo 11 : Establecer un sistema económico social, solidario y sostenible

Construimos un sistema económico cuyo fin sea el ser humano y su buen

vivir. Buscamos equilibrios de vida en condiciones de justicia y soberanía.

Reconocemos la diversidad económica, la recuperación de lo público y la

transformación efectiva del Estado.1

El proyecto a desarrollarse es muy relevante porque contribuirá significativamente

en el progreso social y económico del sector y de la provincia, al generar

movimiento de capitales así como de fuentes de empleo en razón de que si se

incrementa las ventas puede ser que se necesite un mayor número de personas para

que trabajen en esta empresa. En lo que concierne a la factibilidad del proyecto se

puede decir que involucra factores de carácter social, económico, tecnológico,

educativo permitiendo de esta manera llegar a consolidarlo de modo adecuado y

considerando las necesidades mutuas de empresario y clientes.

Por todo lo expuesto anteriormente el proyecto es totalmente justificado en el cien

por ciento pues la empresa carece de un medio de publicidad y difusión más

actualizado.

1 http://plan.senplades.gob.ec/web /guest/objetivo-11

4



1.3 Definición del problema central

El diseño e implantación de una página web para la empresa, permitirá afianzar y

aumentar su posicionamiento en el mercado, de esta forma lograr sus objetivos y

buscar mejoras en todos los individuos involucrados en la labor, tales como la

empresa, empleados, clientes, proveedores, y comunidad en general.

5



CAPÍTULO II

ANÁLISIS DE INVOLUCRADOS

2.1 Identificación de involucrados

Figura Nº 1

Elaborado por: Patricio Pilacuán S.

6



2.2 Análisis y selección con los involucrados

Tabla Nº 1

Actores

involucrados

Interés sobre

el problema

Problemas

percibidos

Recursos,

mandatos y

capacidades

Interés sobre el

proyecto

Conflictos

potenciales

Gestor Diseñar la página web

Poca difusión de la empresa y desconocimiento por parte del grupo objetivo

Se cuenta con recursos tecnológicos, capacidades intelectuales y las leyes que rigen el

proyecto

Que se ponga en práctica el proyecto por parte de la empresa

Que la empresa no ponga en práctica el proyecto

Empresa

Tener una página web para poder

promocionar a la empresa

Ninguna promoción a través de medios

tecnológicos y modernos

Se dispone de

recursos tecnológicos, financieros, leyes que rigen el proyecto y capacidades intelectuales

Implementar y promocionarse a través de la página web

No contar con los recursos económicos suficientes para implementar la página web

Clientes Conocer a la empresa

Escasas

alternativas para poder conocer a la empresa y sus actividades

Información de las necesidades

Encontrar a través

de la página web información de los productos y sus ofertas

Que la página web sea poco atractiva y no ofrezca la información necesaria

Proveedores Conocer sus requerimientos para proveerla

Medio y formas para poder localizarla y contactarla

Aportes de información sobre el proyecto

Poder ofrecer sus líneas de productos o servicios

Mejorar calidad y precios de productos y evitar competencia

Comunidad

Por esta vía la comunidad

conocerá más a la empresa

Que solo tenga interés lucrativo

y no aporte nada a la comunidad

Aportes de información sobre el proyecto

Contar con una empresa

reconocida en el sector

Ningún beneficio para la comunidad

Leyes

Que la página

web cumpla con los estándares vigentes

Mala interpretación de las leyes

Leyes que rigen el proyecto

Que el proyecto

haga cumplir la leyes vigentes en el tema de página web

Mala

aplicación de la ley e incluso piratería o ilegalidades


7



CAPÍTULO III

PROBLEMAS Y OBJETIVOS

3.1 Árbol de problemas

Figura Nº 2


8



3.2 Árbol de objetivos

Figura Nº 3


9



CAPÍTULO IV

ANÁLISIS DE ALTERNATIVAS

4.1 Acciones e identificación de alternativas

Figura Nº 4


4.2 Tamaño del proyecto

La empresa PUBLIVENTAS implementará una página web, la misma que es parte

del proyecto de investigación que realizamos previo a recibirnos de diseñadores

gráficos. Este elemento de diseño tiene un propósito importante, ya que es un medio

10



de difusión de gran alcance, pudiendo llegar al mercado local como es la ciudad de

Quito, así como a nivel nacional (todo el Ecuador) e incluso internacionalmente ya

que las páginas pueden ser vistas por cualquier usuario en cualquier parte del mundo.

4.3 Localización del proyecto

Está ubicada en el Distrito Metropolitano de Quito, en las calles Juan Galindez

Nº111 y Av. 10 de Agosto, en la parroquia Iñaquito con una población de 44.149

habitantes, empresa dedicada a la distribución y venta de materiales para

mantenimiento y limpieza así también brinda el servicio de publicidad.

4.4 Análisis Ambiental

Impactos Negativos:

Químicos utilizados en materiales publicitarios.

Radiaciones de algunas técnicas y acabados gráficos.

Utilización de algunos componentes tóxicos para el ambiente como

solventes.

11



Consumo de energía generadas a base de combustibles.

Contaminación visual del Internet.

Impactos positivos:

Utilización de materiales biodegradables que no afecten el medio ambiente.

Material reutilizables.

Compromiso y campana a favor del medio ambiente.

Concientizar a los usuarios acerca de la importancia del medio ambiente para

todo el mundo.

4.5 Análisis de alternativas

Tabla Nº 2

Objetivos

Impacto

sobre el

propósito

Factibilidad

técnica

Factibilidad

financiera

Factibilidad

social

Factibilidad

política Total Categoría

Promocionar y difundir a

la empresa

5 4 4 5 3 21 Alto

Incorporar estrategias

de Marketing

5 3 4 5 3 20 Alto

Aumentar Presupuesto

5 4 3 5 3 20 Alto

Mejorar imagen

Corporativa 5 4 4 5 3 21 Alto

Interés por otros medios publicitarios

5 4 4 5 3 21 Alto


12



4.6 Diagrama de estrategias

Figura Nº 5


13



4.7 Construcción de matriz de marco lógico

Tabla Nº 3: Revisión de criterios para indicadores

NIVEL RESUMEN

NARRATIVO INDICADOR

META

CANTIDAD CALIDAD TIEMPO LUGAR GRUPO

SOCIAL

Finalidad F1. Interés del

grupo objetivo

Clientes

informados 100%

Clientes

satisfechos 6 meses

Centro

Norte

D.M.Q.

Adultos

Finalidad

F2. Conocer los

servicios de la

empresa por

parte de los

proveedores

Proveedores

informados 100%

Disponibilidad

de mercadería 6 meses

Centro

Norte

D.M.Q.

Adultos

Finalidad

F3. Afianzar

Posicionamiento

en el mercado

Confianza del

grupo objetivo

en la empresa

100% Posicionamiento

de la imagen 6 meses

Centro

Norte

D.M.Q.

Adultos

Finalidad F4. Incremento

de clientes

Ganar nuevos

clientes 100%

Incremento de

ventas 6 meses

Centro

Norte

D.M.Q.

Adultos

Finalidad F5. Ventas altas Mejorar

Ganancias 100% Más utilidades 6 meses

Centro

Norte

D.M.Q.

Adultos

Propósito

P1. Crear e

implantar una

Página Web

Página Web

de la empresa 1

Difusión de la

empresa 6 meses

Centro

Norte

D.M.Q.

Adultos

Componente

C1.

Promocionar y

difundir a la

empresa

Ganar

mercado 100%

Reconocimiento

del público 6 meses

Centro

Norte

D.M.Q.

Adultos

Componente

C2. Incorporar

estrategias de

Marketing

Mejorar las

ventas 100%

Buen servicio al

público 6 meses

Centro

Norte

D.M.Q.

Adultos

Componente

C3. Mejorar

imagen

Corporativa

Mejorar la

identidad

corporativa

100% Reconocimiento

del público 6 meses

Centro

Norte

D.M.Q.

Adultos

Componente C4. Aumentar

presupuesto

Medios para

financiar 100%

Buscar recursos

económicos 6 meses

Centro

Norte

D.M.Q.

Adultos

Componente

C5. Interés por

otros medios

publicitarios

Mejorar

Publicidad 100%

Nuevos medios

de publicidad 6 meses

Centro

Norte

D.M.Q.

Adultos

Actividad

A1. Buscar

fuentes de

financiamiento

Créditos

bancarios 100%

Disponibilidad

de dinero 6 meses

Centro

Norte

D.M.Q.

Adultos

Actividad

A2. Aumentar

publicidad de la

empresa

Aumentar

cantidad de

clientes

100%

Optimizar la

identidad de la

empresa

6 meses

Centro

Norte

D.M.Q.

Adultos


14



Tabla Nº 4: Selección de indicadores

NIVEL RESUMEN

NARRATIVO INDICADOR

CLASIFICADOR DE

INDICADOR PUNTAJE SELECCIÓN

A B C D E

Finalidad F1. Interés del grupo objetivo

Clientes informados

X - X X X 4 Si

Finalidad

F2. Conocer los servicios de la empresa por parte de los proveedores

Proveedores informados

X - X X X 4 Si

Finalidad F3. Afianzar

Posicionamiento en el mercado

Confianza del grupo objetivo en la empresa

X - X X X 4 Si


de clientes Ganar nuevos

clientes X - X X X 4 Si


Ganancias X - X X X 4 Si

Propósito P1. Crear e

implantar una Página Web

Página Web de la empresa

X - X X X 4 Si

Componente C1. Promocionar

y difundir a la empresa

Ganar mercado

X - X X X 4 Si

Componente C2. Incorporar estrategias de

Marketing

Mejorar las ventas

X - X X X 4 Si

Componente

C3. Mejorar

imagen corporativa

Mejorar la

identidad corporativa

X - X X X 4 Si

Componente C4. Aumentar Presupuesto

Medios para financiar

X - X X X 4 Si

Componente C5. Interés por otros medios publicitarios

Mejorar publicidad

X - X X X 4 Si

Actividad A1. Buscar fuentes de

financiamiento

Créditos bancarios

X - X X X 4 Si

Actividad A2. Aumentar

publicidad de la empresa

Aumentar cantidad de

clientes X - X X X 4 Si

A: Es claro

D: La tarea de recolectar datos está al alcance y no requiere

expertos

B: Existe información disponible

E: Es epresentativo

C: Es tangible y se puede observar


15



Tabla Nº 5: Medios de Verificación

NIVEL RESUMEN

NARRATIVO INDICADOR

MEDIOS DE VERIFICACIÓN

FUENTES DE

INFORMACIÓN

MÉTODOS DE

RECOLECCIÓN

MÉTODOS DE

ANÁLISIS

FRECUENCIA

DE

RECOLECCIÓN

RESPONSABLE

Finalidad F1. Interés del

grupo objetivo

Clientes

informados

Datos de la

empresa Observación

Simple

verificación 6 meses Empresa

Finalidad

F2. Conocer los

servicios de la

empresa por

parte de los

proveedores

Proveedores

informados

Datos de la


Simple


Finalidad

F3. Afianzar

Posicionamiento

en el mercado

Confianza del

grupo

objetivo en la

empresa

Datos de la


Simple

verificación 1 año Empresa


de clientes

Ganar nuevos

clientes

Datos de la


Simple



Ganancias

Datos de la


Simple


Propósito

P1. Crear e

implantar una

Página Web

Página Web

de la empresa Bibliografía Observación

Simple

verificación 1 mes Investigador

Componente

C1. Promocionar

y difundir a la

empresa

Ganar

mercado

Datos de la


Simple


Componente

C2. Incorporar

estrategias de

Marketing

Mejorar las

ventas

Datos de la


Simple


Componente

C3. Mejorar

imagen

corporativa

Mejorar la

identidad

corporativa

Bibliografía Encuesta Estadística 1 año Empresa


presupuesto

Medios para

financiar

Datos de la


Simple


Componente

C5. Interés por

otros medios

publicitarios

Mejorar

Publicidad Bibliografía Encuesta Estadística 6 meses Empresa

Actividad

A1. Buscar

fuentes de financiamiento

Créditos

bancarios

Datos de la


Simple


Actividad A2. Aumentar

Publicidad de la

empresa

Aumentar cantidad de

clientes

Datos de la


Simple



16



Tabla Nº 6: Supuestos

NIVEL RESUMEN

NARRATIVO SUPUESTOS

FACTORES DE RIESGO

FINANCIERO POLÍTICO SOCIAL AMBIENTAL LEGAL

Finalidad F1. Interés del grupo objetivo

Afluencia de clientes

Falta de recursos

Escaso apoyo

a la pequeña empresa

Desinterés

de las personas

Papeles de

publicidad desechados en

la calle

Reglamentar

ley de defensa al

consumidor

Finalidad

F2. Conocer los

servicios de la

empresa por

parte de los

proveedores

Afluencia de

proveedores

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Desinterés

de los

proveedores

Papeles de

publicidad

desechados en

la calle

Reglamentar

ley de

defensa al

consumidor

Finalidad

F3. Afianzar

Posicionamiento

en el mercado

Seguridad del

grupo objetivo

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Clientes

insatisfechos

Poca cultura

con los

desechos de

las compras

Reglamentar

ley de

defensa al

consumidor

Finalidad F4. Incremento de

clientes

Clientes bien

atendidos

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Mal servicio

al cliente

Poca cultura

con los

desechos de

las compras

Reglamentar

ley de

defensa al

consumidor

Finalidad F5. Ventas altas

Bienestar

económico de

la empresa

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Clientes y

empleados

insatisfechos

Falta de

reciclaje de

elementos o

desperdicios

de la empresa

Reglamentar

ley para la

pequeña

empresa

Propósito

P1. Crear e

implantar una

Página Web

Muchas visitas

de internautas

Falta de

recursos

Falta de apoyo a la pequeña

empresa para

la creación de

proyectos

Sitio web

que no

interese a las

personas

Mayor utilización de

energía

eléctrica de

las personas

Reglamentar leyes para

apoyo de

proyectos

para

empresas

Componente

C1. Promocionar

y difundir a la

empresa

Ampliar

cobertura

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Personas sin necesidad de

nuestros

productos

Papeles de publicidad

desechados en

la calle

Reglamentar ley de

defensa al

consumidor

Componente

C2. Incorporar

estrategias de

Marketing

Sistema de

ventas óptimo

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Mala

atención al

cliente

Papeles de

publicidad

desechados en

la calle

Reglamentar

ley para la

pequeña

empresa

Componente

C3. Mejorar

imagen

corporativa

Clientes que

nos recuerden

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Ningún

interés de

las personas

en nuestra

marca

Papeles de

publicidad

desechados en

la calle

Reglamentar

ley de

defensa al

consumidor


presupuesto

Disponibilidad

de circulante

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Ausencia de

clientes y

ventas

Falta de

reciclaje de

elementos o

desperdicios

de la empresa

Reglamentar

ley para la

pequeña

empresa

Componente

C5. Interés por

otros medios

publicitarios

Ampliar

horizontes de

la empresa

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Rechazo de

nuestros

servicios por

parte de las

personas

Papeles de

publicidad

desechados en

la calle

Reglamentar

ley de

defensa al

consumidor

Actividad

A1. Buscar

fuentes de

financiamiento

Fuentes

adicionales de

circulante

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

Ningún

apoyo de

entidades de

crédito

Falta de

reciclaje de

elementos o

desperdicios

de la empresa

Reglamentar

ley para la

pequeña

empresa para

créditos

Actividad

A2. Aumentar

publicidad de la

empresa

Clientela fiel y

satisfecha

Falta de

recursos

Escaso apoyo

a la pequeña

empresa

La

competencia

desleal

Poca cultura

con los

desechos de

las compras

Reglamentar

ley de

defensa al

consumidor


17



Tabla Nº 7: Matriz Marco Lógico

RESUMEN

NARRATIVO INDICADOR

MEDIOS DE VERIFICACIÓN

SUPUESTOS FUENTES DE

INFORMACIÓN

MÉTODOS DE

ANÁLISIS

F1. Interés del grupo

objetivo

F1.1 Clientes

informados

F1.2 Datos de la

empresa

F1.3 Simple

verificación

F1.4 Afluencia de

clientes

F2. Conocer los servicios

de la empresa por parte

de los proveedores

F2.1 Proveedores

informados

F2.2 Datos de la

empresa

F2.3 Simple

verificación

F2.4 Afluencia de

proveedores

F3. Afianzar

Posicionamiento en el

mercado

F3.1 Confianza del

grupo objetivo en la

empresa

F3.2 Datos de la

empresa

F3.3 Simple

verificación

F3.4 Seguridad del

grupo objetivo

F4. Incremento de

clientes

F4.1 Ganar nuevos

clientes

F4.2 Datos de la

empresa

F4.3 Simple

verificación

F4.4 Clientes bien

atendidos

F5. Ventas altas F5.1 Mejorar

Ganancias

F5.2 Datos de la

empresa

F5.3 Simple

verificación

F5.4 Bienestar

económico de la

empresa

P1. Crear e implantar

una Página Web

P1.1 Página Web de la

empresa P1.2 Bibliografía

P1.3 Simple

verificación

P1.4 Muchas visitas

de internautas

C1. Promocionar y

difundir a la empresa C1.1 Ganar mercado

C1.2 Datos de la

empresa

C1.3 Simple

verificación

C.1.4 Ampliar

cobertura

C2. Incorporar

estrategias de Marketing

C2.1 Mejorar las

ventas

C2.2 Datos de la

empresa

C2.3 Simple

verificación

C2.4 Sistema de

ventas óptimo

C3. Mejorar imagen

corporativa

C3.1 Mejorar la

identidad corporativa C3.2 Bibliografía C3.3 Estadística

C3.4 Clientes que

nos recuerden

C4. Aumentar

presupuesto

C4.1 Medios para

financiar

C4.2 Datos de la

empresa

C4.3 Simple

verificación

C4.4 Disponibilidad

de circulante

C5. Interés por otros

medios publicitarios

C5.1 Mejorar

publicidad C5.2 Bibliografía C5.3 Estadística

C5.4 Ampliar

horizontes de la

empresa

A1. Buscar fuentes de

financiamiento

A1.1 Créditos

bancarios

A1.2 Datos de la

empresa

A1.3 Simple

verificación

A1.4 Fuentes

adicionales de

circulante

A2. Aumentar Publicidad

de la empresa

A2.1 Aumentar

cantidad de clientes

A2.2 Datos de la

empresa

A2.3 Simple

Verificación

A2.4 Clientela fiel y

satisfecha


18



CAPÍTULO V

LA PROPUESTA

5.1 Antecedentes de la herramienta del perfil de la propuesta

5.1.1 Multimedia

Es cualquier combinación de texto, arte gráfico, sonido, animación y vídeo

que llega a nosotros por computadora u otros medios electrónicos. Es un tema

presentado con lujos de detalles. Cuando conjuga los elementos de

multimedia (fotografías y animación deslumbrantes, mezclando sonido, vídeo

clips y textos informativos) puede electrizar a su auditorio; y si además le

da control interactivo del proceso, quedarán encantado. Multimedia estimula

los ojos, oídos, yemas de los dedos y, lo más importante, la cabeza. Y se

compone, como ya de describió, de combinaciones entrelazadas de elementos

de texto, arte gráfico, sonido, animación y vídeo.2

5.1.2 El Diseño Web

El diseño web es una actividad que consiste en la planificación, diseño e

implementación de sitios web. No es simplemente una aplicación del diseño

convencional, ya que requiere tener en cuenta la navegabilidad, interactividad,

2 http://www.monografias.com/trabajos10/mmedia/mmedia.shtml#quees

http://www.monografias.com/trabajos13/libapren/libapren.shtml

http://www.monografias.com/Arte_y_Cultura/index.shtml

http://www.monografias.com/trabajos5/elso/elso.shtml

http://www.monografias.com/trabajos15/computadoras/computadoras.shtml

http://www.monografias.com/trabajos14/medios-comunicacion/medios-comunicacion.shtml

http://www.monografias.com/trabajos14/control/control.shtml

http://www.monografias.com/trabajos14/administ-procesos/administ-procesos.shtml#PROCE

http://es.wikipedia.org/wiki/Sitio_web

http://es.wikipedia.org/wiki/Navegabilidad_web

http://es.wikipedia.org/wiki/Interactividad

http://www.monografias.com/trabajos10/mmedia/mmedia.shtml#quees

19



usabilidad, arquitectura de la información y la interacción de medios como el audio,

texto, imagen, enlaces y vídeo. Se lo considera dentro del diseño multimedia.

La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta

la eficiencia de la web como canal de comunicación e intercambio de datos, que

brinda posibilidades como el contacto directo entre el productor y el consumidor de

contenidos, característica destacable del medio.

El diseño web ha visto amplia aplicación en los sectores comerciales de Internet

especialmente en la World Wide Web. Asimismo, a menudo la web se utiliza como

medio de expresión plástica en sí. Artistas y creadores hacen de las páginas en

internet un medio más para ofrecer sus producciones y utilizarlas como un canal más

de difusión de su obra.

El diseño de páginas web se trata básicamente de realizar un documento con

información hiperenlazado con otros documentos y asignarle una presentación para

diferentes dispositivos de salida (en una pantalla de computador, en papel, en un

teléfono móvil, etc.).

5.2 Descripción de la Herramienta

5.2.1 Adobe Photoshop

Este programa es elaborado por la compañía Adobe System y puede ser usado tanto

en Windows como en computadoras Mac. Su nombre en español significa “Taller de

http://es.wikipedia.org/wiki/Usabilidad

http://es.wikipedia.org/wiki/Arquitectura_de_la_informaci%C3%B3n

http://es.wikipedia.org/wiki/Audio

http://es.wikipedia.org/wiki/Texto

http://es.wikipedia.org/wiki/Imagen

http://es.wikipedia.org/wiki/Hiperenlace

http://es.wikipedia.org/wiki/V%C3%ADdeo

http://es.wikipedia.org/wiki/Dise%C3%B1o_multimedia

http://es.wikipedia.org/wiki/Comunicaci%C3%B3n

http://es.wikipedia.org/wiki/Consumidor

http://es.wikipedia.org/wiki/World_Wide_Web

http://es.wikipedia.org/wiki/Computador

http://es.wikipedia.org/wiki/Papel

http://es.wikipedia.org/wiki/Tel%C3%A9fono_m%C3%B3vil

20



fotos” y su complejidad varía de acuerdo al uso que le quieras dar: si bien cuenta con

funciones altamente complejas, utilizadas por profesionales, no necesitas ser un

experto para poder utilizarlo, pues con saber emplear herramientas básicas puedes

modificar las fotos que desees.

Photoshop puede ser una herramienta muy importante para la elaboración de

publicidades, fotos institucionales y la elaboración de tu logo y marca. Toda foto

siempre tiene algo por mejorar y eso es lo que hace de este programa una

herramienta importante.

Puedes realizar creaciones artísticas y hacer una compilación de fotos o imágenes

para llevar a cabo una composición en la cual se publicite tu negocio o marca.

Además, te permite quitar los horribles ojos rojos que aparecen en algunas fotos,

cortar imágenes para que sólo salga lo que desees, extraer sólo una cosa u objeto de

una imagen, realizar retoques de color para aclarar mas la foto u oscurecerla, darle

más brillo, entre otras cosas. Son experimentaciones digitales que pueden generar

grandes composiciones y ser bastante atractivas para elaborar mensajes.

Puedes usar Photoshop de varias maneras, sólo tienes que darle un buen uso y

emplearlo en tu negocio. También puedes retocar las fotos de tu equipo de trabajo o

de tu oficina, lo que no quiere decir crear una falsa realidad, sino simplemente

retocar puntos que en una foto normal no suelen salir muy bien por diversos factores.

21



5.2.2 Adobe Ilustrator

Es una aplicación en forma de taller de arte que trabaja sobre un tablero de dibujo,

conocido como "mesa de trabajo" y está destinado a la creación artística de dibujo y

pintura para Ilustración (Ilustración como rama del arte digital aplicado a la

ilustración técnica o el diseño gráfico, entre otros).

Es desarrollado y comercializado por Adobe Systems Incorporated y ha definido en

cierta manera el lenguaje gráfico contemporáneo mediante el dibujo vectorial. Adobe

Ilustrator contiene opciones creativas, un acceso más sencillo a las herramientas y

una gran versatilidad para producir rápidamente gráficos flexibles cuyos usos se dan

en (Maquetación-Publicación) impresión, vídeo, publicación en la Web y

dispositivos móviles. Esta aplicación es más reconocida por la impresionante

calidad y nivel artístico de las ilustraciones allí creadas más que por cualquier otra

cosa, siendo frecuentemente utilizado por artistas muy experimentados.

Adobe Ilustrator le proporciona precisión y potencia gracias a herramientas de

dibujo sofisticadas, pinceles realistas y expresivos, opciones que permiten

ahorrar tiempo e integración con los servicios en línea de Adobe CS Live*.

Entre sus muchas funciones del entorno de gráficos vectoriales se encuentran

el dibujo en perspectiva, el pincel de cerdas, los trazos de anchura variable y

la herramienta Creador de formas. Gracias a la mejora de la integración entre

los distintos productos de Adobe, puede cambiar fácilmente entre Ilustrator y

22



otros productos como Adobe Flash donde puede mejorar la interacción de sus

diseños.3

5.2.3 Adobe Flash

Las posibilidades de Flash son extraordinarias, con cada nueva versión se han

mejorado y simplificado las herramientas, y cada vez es posible lograr mejores

efectos con menos trabajo.

Aunque su uso más frecuente es el de crear animaciones sus usos son muchos más.

Son tantos, que todos los diseñadores web deberían saber utilizar Flash.

Durante mucho tiempo, Flash consiguió hacer posible lo que más se echa en falta en

Internet: Dinamismo, y con dinamismo no sólo nos referimos a las animaciones, sino

que Flash permite crear aplicaciones interactivas que permiten al usuario ver la web

como algo atractivo, no estático. Con Flash podremos crear de modo fácil y rápido

desde animaciones simples para lograr algunos efectos visuales, hasta aplicaciones

complejas, como juegos.

Además sus desarrolladores están apostando muy fuerte por ActionScript, el

lenguaje de programación Flash. A cada versión se mejora y ofrece un abanico de

posibilidades cada vez mayor, por lo que además de dinamismo, Flash nos ofrece la

posibilidad de ser la plataforma para aplicaciones web de un modo real.

3 Adobe Systems Incorporated. (2010). Uso de Adobe Ilustrator CS5. Pág.1.

23



5.2.4 Adobe Dreamweaver

Adobe Dreamweaver es una aplicación en forma de estudio enfocada a la

construcción y edición de sitios y aplicaciones Web basados en estándares. Creado

inicialmente por Macromedia (actualmente producido por Adobe Systems). Es el

programa de este tipo más utilizado en el sector del diseño y la programación web,

por sus funcionalidades, su integración con otras herramientas como Adobe Flash y,

recientemente, por su soporte de los estándares del World Wide Web Consortium.

Adobe Dreamweaver permite crear sitios de forma totalmente gráfica, y dispone de

funciones para acceder al código HTML generado. Permite la conexión a un

servidor, a base de datos, soporte para programación en ASP, PHP, Javascript,

cliente FTP integrado, etc.

5.2.5 FileZilla

FileZilla es uno de los más conocidos y empleados clientes FTP. Y la razón de ello

es sencilla: es excelente. Posee múltiples funcionalidades que permiten un manejo

completo de los archivos de sitios web, incluyendo la edición de los mismos.

FileZilla es un cliente FTP, es decir, un programa que utiliza el protocolo FTP para

transferir archivos entre un ordenador y un servidor. Es bastante frecuente observar

que muchos programas y sistemas operativos cuentan con algún servicio que permite

la transferencia de archivos con un servidor, pero por lo general, no cuentan con

todas las funcionalidades que tiene un programa especialmente diseñado para ello.

http://www.lawebera.es/de0/cliente-ftp.php

http://www.lawebera.es/alojamiento-web/eleccion-del-proveedor-de-hosting.php

24



Muchos de los clientes FTP que se ofrecen en el mercado, cuentan con licencias que

permiten su uso en forma gratuita. Uno de ellos, el más difundido y quizá uno de los

mejores, es FileZilla. Este proyecto, que nació como una clase de programación, se

ha convertido en nuestros días en una poderosa herramienta que cuenta con múltiples

funcionalidades.

5.3 Formulación del proceso de aplicación

Diseño Web

5.4 Planificación

Con la finalidad de lograr el objetivo y entregar un proyecto que realmente alcance el

éxito para el que fue creado, nos valemos de una serie de herramientas. Ya que una

página web es un elemento de diseño gráfico nos hemos valido de todos los

instrumentos y conocimientos que nos permitan idear, planificar, diseñar, desarrollar,

crear e implantar a la misma.

La página web se ha venido diseñando y confeccionando desde hace semanas,

tiempo en el cual se ha ido recopilando información acerca de los servicios y de los

productos de la empresa, así como sus aspectos más relevantes como institución.

Para la planificación de este proyecto se analizó los problemas y necesidades de la

empresa y se llegó a la conclusión de que un sitio web sería una alternativa idónea

25



para solucionar sus problemas. Ya que por este medio el grupo objetivo podría

encontrar y satisfacer sus necesidades o requerimientos.

5.4.1 Propósito

El presente proyecto tiene como propósito difundir y hacer conocer la marca e

imagen de la empresa, así como sus actividades. De esta forma afianzarse en el

mercado como una empresa seria y de prestigio, que brinda buenos productos y un

excelente servicio a sus clientes.

5.4.2 Usuario

Está dirigida al público de la ciudad de Quito, aunque con el alcance de la web

podría llegar a tener clientes que sean de otros sitios del ecuador y porque no del

mundo. Nuestros usuarios serán todas aquellas personas que necesiten los productos

y servicios que brindamos, es decir aquellos que necesiten comprar productos e

implementos de limpieza y también requieran servicios de publicidad.

5.5 Herramientas

5.5.1 Desarrollo

Para el desarrollo de la página web hemos que tenido que realizar el siguiente

proceso:

26



Contar con un buen computador y un sistema operativo confiable.

Disponer del sistema Adobe con la versión con la que mejor se adapte el

diseñador, en este caso escogimos el CS6.

A continuación realizamos todos los elementos vectorizados en Ilustrator.

Tales como logos, dibujos, botones que se empleará, en el diseño de la web.

Así mismo realizamos las animaciones que llevará la página en el programa

Flash.

Luego de tener todos los elementos diseñamos las plantillas en Photoshop,

dándole un diseño acorde a la identidad y necesidad de la empresa, este

diseño será seccionado y grabado para posteriormente ser utilizados en

Dreamweaver.

Llevamos todos estos elementos a Dreamweaver que es donde se realizará los

archivo html que finalmente serán subidos al internet a través del programa

FileZilla.

5.5.2 Contenidos

La página web ofrecerá los productos y servicios que la empresa PUBLIVENTAS

tiene para sus clientes, con la finalidad de mantenerlos informados de la variedad,

precios y promociones que se ofrezcan. La información contenida en este elemento

de diseño gráfico la clasificamos en tres grupos:

Enlaces Internos: Nos llevarán a conocer aspectos importantes y especiales de la

empresa para tener clara su organización, estos enlaces los encontraremos dentro de

27



la opción nosotros del menú, donde tendremos datos tales como quienes somos,

misión y visión, filosofía, nuestros clientes, alianza estratégica.

Enlaces Externos: También se contará con enlaces a las redes sociales tales como

Facebook y Twiter para tener un acercamiento más directo al grupo objetivo. Donde

tendremos publicidad constante, lo que generará acogida de los clientes.

Enlaces de Información: Donde trataremos de informar a los usuarios de los

productos y servicios que dispone la empresa. Esto lo realizaremos de dos formas, la

una a través de imágenes (fotos) y de Contenidos escritos (texto). Con un diseño

atractivo trataremos que estos elementos cautiven a los clientes y al mismo tiempo

mantengan informados a los usuarios de todo lo que la empresa ofrece.

5.5.3 Mapa de Contenidos

Figura Nº 6


28



5.5.4 Diseño de Interfaz

Para el diseño del interfaz de la página web se tomo en cuenta la imagen de la

empresa por tanto se utilizaron los colores corporativos de la misma además de

colores que combinen y contrasten pero que den una apariencia muy buena y que

impacte al usuario, también se da énfasis en los productos y servicios que se

ofrecen. Tomando en cuenta estos elementos se procedió a diseñar el interfaz que

trata de mostrar una imagen fresca y cautivadora al usuario que visite la página

mostrando las características de la empresa.

El interfaz general para todas las páginas que conforman nuestro proyecto son de un

tamaño de 960 ancho x 1010 pixeles de alto, la estructura tiene claramente 6

secciones horizontales:

Encabezado: Donde destaca el logotipo.

Menú: Que tiene un diseño de menú desplegable con subopciones internas.

Banner- Contenido: La parte donde destaca una animación flash o contenidos

informativos de la empresa, productos y servicios.

Barra título: Con mensajes alusivos a la empresa y su actividad.

Contenido: Botones o Animaciones dependiendo de la opción escogida.

Pie: Con información para contactar a la empresa y opciones para redes sociales.

29



Figura Nº 7: Pantalla Principal


5.5.5 Imagen Corporativa

El Logotipo es parte fundamental del diseño de la página web, ya que hemos tomado

colores y elementos del mismo para incorporarlos a la web.

Figura Nº 8


30



5.5.6 Colores

Valiéndonos de los colores corporativos de la empresa queremos cautivar al usuario

queriendo transmitir sensaciones que lo harán sentir identificado con la empresa.

Los colores empleados para el diseño de la página son dos, con variaciones de

degradados y se emplean para mantener la identidad corporativa de la empresa:

5.5.7 Tipografías

La tipografía utilizada para el diseño de la web, es la Arial con algunas de sus

opciones como son la Regular, Bold y Black, se ha utilizado esta fuente por ser recta

y sobria lo que permite mostrar un diseño simple pero elegante y distinguido.

Arial (Regular, Bold, Black)

ABCDEEFGHIJKLMNÑOPRSTUVWXYZ

abcdeefghijklmnñoprstuvwxyz

123456789''¿+´{}-.:[]*¨¡?=)(/&%$#"!

31



5.5.8 Botones

En el diseño de la página web hemos utilizados algunas variaciones de botones para

que el usuario tenga múltiples alternativas para poderse informar, a continuación

detallamos las variedades que dispone la página:

Botones principales o menú: Lo conforman una barra de opciones que utilizar

botones de sustitución pero que en realidad es un menú desplegable con

subopciones, donde podemos acceder a todas y cada una de las opciones que

presenta la página.

Figura Nº 9

Opciones Principales:

Opciones Principales Pulsadas:


Botones de productos y servicios: Solo están en la pantalla principal o Index, nos

permiten ir directamente a los cuadros informativos de los productos y servicios sin

necesidad de ir al menú principal, es una alternativa adicional que le damos al

usuario para poder navegar por el sitio.

32



Opciones destacadas:

Figura Nº 10

Opciones destacadas pulsadas:

Figura Nº 11


Botones adelantar y retroceder: Se los utiliza dentro de las páginas que tienen

cuadros para adelantar y retroceder los cuadros y ver la información de los productos

y servicios.

Figura Nº 12


33



Botón enviar del formulario: Sirve para enviar la información de los clientes a

nuestras cuentas de correo electrónicas.

Figura Nº 13


5.5.9 Retículas

Así como hay medidas estándar para impresión, en el mundo web existen también

algunas medidas según los monitores (1024×768, 1280×1024, 1600×1200) y aquí es

donde se presenta el problema para decidir las medidas del diseño que tendrá el sitio

web. De hecho creo que a veces ni tomamos en cuenta las diferentes medidas de las

pantallas, simplemente nos centramos en nuestra computadora y si en la nuestra se

ve bien seguro se verá excelente en las demás.

El diseño del sitio web en cuestión podrá ser tan largo según lo que se requiera, lo

normal es hacer scroll hacia abajo, pero deberemos tener cuidado en lo ancho de éste

si no queremos hacer scroll a los lados (aunque hay excepciones de sitios que

funcionan de manera horizontal) . Si al abrir Photoshop y decimos que nuestro ancho

o width será de unos 1500px, eso seguro hará un horrible y molesto scroll horizontal

cuando el sitio esté programado.

34



Para esto contamos con 960 Grid System que busca no salvarnos la vida, sino

ayudarnos y enseñarnos a trabajar de manera ordenada y proporcionada, con un

sistema de columnas (12, 16 y 24) en una base de 960 px de ancho (que podríamos

decir es el ancho estándar para monitores de 1024 px en adelante).

Port esta razón para el diseño de nuestras plantillas que conforman nuestra página

web, se ha tomado en cuenta una plantilla 960_grid_16_col, es decir una retícula de

16 columna en un ancho de pantalla de 960 px para distribuir de manera ordenada y

organizada todos los elementos que serán parte del diseño web.

Figura Nº 14


35



5.6 Producción

La página web para la empresa PUBLIVENTAS, en realidad es un sistemas

integrado de datos conformado por un conjunto de archivos html, psd, jpeg, php, css,

swf, xls, doc entre otros que permiten armar todas y cada una de las retículas que

conformarán al final la web.

Está formada por muchos archivos enlazados entre sí, empezando por el principal o

llamado INDEX, desde este enlazamos a los demás html, a los cuales presentamos a

continuación:

36



Inicio o Index

Figura Nº 15


37



Nosotros – Quienes somos

Figura Nº 16


38



Nosotros – Visión y Misión

Figura Nº 17


39



Nosotros – Filosofía

Figura Nº 18


40



Nosotros – Nuestros clientes

Figura Nº 19


41



Nosotros – Alianza estratégica

Figura Nº 20


42



Servicios – Publicidad

Figura Nº 21


43



Productos – Implementos de limpieza

Figura Nº 22


44



Productos – Productos de limpieza

Figura Nº 23


45



Productos – Productos químicos

Figura Nº 24


46



Contáctenos – Formulario de contactos

Figura Nº 25


47



5.6.1 Programación

Para la estructuración y creación de la página web se utilizó el programa

Dreamweaver, el que nos permite crear los archivos html, pudiendo hacerlo desde

los asistentes propios de programas o valiéndonos directamente de la programación o

código html. A continuación detallaremos la programación del archivo index.html.

<!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">

<script src="SpryAssets/SpryMenuBar.js" type="text/javascript"></script><head>

<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

<title>Documento sin título</title>

<script src="Scripts/swfobject_modified.js" type="text/javascript"></script>

<script type="text/javascript">

function MM_swapImgRestore() { //v3.0

var i,x,a=document.MM_sr; for(i=0;a&&i<a.length&&(x=a[i])&&x.oSrc;i++)

x.src=x.oSrc;

}

function MM_preloadImages() { //v3.0

var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();

var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length;

i++)

if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}

48



}

function MM_findObj(n, d) { //v4.01

var p,i,x; if(!d) d=document; if((p=n.indexOf("?"))>0&&parent.frames.length) {

d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);}

if(!(x=d[n])&&d.all) x=d.all[n]; for (i=0;!x&&i<d.forms.length;i++)

x=d.forms[i][n];

for(i=0;!x&&d.layers&&i<d.layers.length;i++)

x=MM_findObj(n,d.layers[i].document);

if(!x && d.getElementById) x=d.getElementById(n); return x;

}

function MM_swapImage() { //v3.0

var i,j=0,x,a=MM_swapImage.arguments; document.MM_sr=new Array;

for(i=0;i<(a.length-2);i+=3)

if ((x=MM_findObj(a[i]))!=null){document.MM_sr[j++]=x; if(!x.oSrc)

x.oSrc=x.src; x.src=a[i+2];}

}

</script>

<link href="css/template.css" rel="stylesheet" type="text/css" />

<link rel="stylesheet" type="text/css" href="css/estilos.css">

</head>

<body

onload="MM_preloadImages('images/index_1_03.jpg','images/index_1_04.jpg','ima

ges/index_1_05.jpg','images/index_1_06.jpg','images/index_1_07.jpg','images/index

49



_1_12.jpg','images/index_1_13.jpg','images/index_1_14.jpg','images/index_1_15.jpg'

,'images/index_1_18.jpg','images/index_1_19.jpg')">

<div id="contenedor">

<div id="cabeza"><img src="images/index_01.jpg" width="960" height="164"

/></div>

<div id="menu1"><ul style="border:none" class="menu">

<li><img src="images/index_02.jpg" width="120" height="82" /></li>

<li><a href="index.html" onmouseout="MM_swapImgRestore()"

onmouseover="MM_swapImage('Image19','','images/index_1_03.jpg',1)"><img

src="images/index_03.jpg" width="118" height="82" id="Image19"

border="0" /></a></li>

<li><a href="#" onmouseout="MM_swapImgRestore()"


src="images/index_04.jpg" width="159" height="82" id="Image20" border="0"

/></a>

<ul>

<li><a href="quienes.html">Quienes somos</a></li>

<li><a href="visionmision.html">Visión y Misión</a></li>

<li><a href="filosofia.html">Filosofía</a></li>

<li><a href="clientes.html">Nuestros clientes</a></li>

<li><a href="alianza.html">Alianza Estratégica</a></li>

</ul>

</li>

50





src="images/index_05.jpg" width="152" height="82" id="Image21" border="0"

/></a>

<ul>

<li><a href="publicidad.html">Publicidad</a></li>

</ul>

</li>




border="0"/></a>

<ul>

<li><a href="implemento1.html">Implementos de limpieza</a></li>

<li><a href="producto1.html">Productos de limpieza</a></li>

<li><a href="productoqui.html">Productos químicos</a></li>

</ul>

</li>




border="0"/></a>

<ul>

<li><a href="contactos.php">Formulario de contacto</a></li>

51



</ul>

</li>

<li><img src="images/index_08.jpg" width="128" height="82" /></li>

</ul></div>

<div id="banner">

<object id="FlashID" class="flash" classid="clsid:D27CDB6E-AE6D-11cf-96B8-

444553540000" width="960" height="438">

<param name="movie" value="anime.swf" />

<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="swfversion" value="8.0.35.0" />



<param name="expressinstall" value="Scripts/expressInstall.swf" />





<object type="application/x-shockwave-flash" data="anime.swf" width="960"

height="438">



<param name="quality" value="high" />

<param name="wmode" value="opaque" />

<param name="swfversion" value="8.0.35.0" />

52



<param name="expressinstall" value="Scripts/expressInstall.swf" />



<div>

<h4>El contenido de esta página requiere una versión más reciente de Adobe

Flash Player.</h4>

<p><a href="http://www.adobe.com/go/getflashplayer"><img

src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif"

alt="Obtener Adobe Flash Player" /></a></p>

</div>



</object>



</object>

</div>

<div id="titulo">

<img src="images/index_10.jpg" width="960" height="58" />

</div>

<div id="contenido"><img src="images/index_11.jpg" width="112" height="199"

/><a href="producto1.html" onmouseout="MM_swapImgRestore()"


src="images/index_12.jpg" width="181" height="199" id="Image30" /></a><a

href="implemento1.html" onmouseout="MM_swapImgRestore()"

53




href="productoqui.html" onmouseout="MM_swapImgRestore()"



href="publicidad.html" onmouseout="MM_swapImgRestore()"


src="images/index_15.jpg" width="182" height="199" id="Image33" /></a><img

src="images/index_16.jpg" width="120" height="199" /></div>

<div id="pie"><img src="images/index_17.jpg" width="749" height="69" /><a

href="https://www.facebook.com/" target="_blank"

onmouseover="MM_swapImage('Image36','','images/index_1_18.jpg',1)"

onmouseout="MM_swapImgRestore()"><img src="images/index_18.jpg"

width="55" height="69" id="Image36" /></a><a href="https://twitter.com/"

target="_blank"

onmouseover="MM_swapImage('Image37','','images/index_1_19.jpg',1)"

onmouseout="MM_swapImgRestore()"><img src="images/index_19.jpg"

width="156" height="69" id="Image37" /></a></div>

</div>

</body>

</html>

54



5.6.2 Navegación – Interactividad

El sistema que hemos diseñado e implantado en la página web permite realizar una

serie de actividades al usuario para que tenga alternativas con respecto a la

información de la empresa.

En la web puede conocer acerca de la empresa, su actividad y referencia en general,

así como su filosofía, visión y misión. También puede conocer el respaldo y

confianza que tienen los clientes, así como las alianzas estratégicas que tenemos para

siempre contar con lo que el cliente requiere.

Muestra la información detallada en tablas de los productos que dispone así como los

servicios que presta, información relevante para dar a conocer todos y cada una de

las alternativas además de fotografías que muestran claramente lo que se ofrece. Y

una opción de contacto donde nos pueden consultar novedades o requerimientos,

solo con enviar un mail con la novedad, inmediatamente se responderá y dará

solución a las necesidades del cliente.

5.6.3 Servicios

Además de las opciones que ya mencionamos el proyecto contará a un futuro

inmediato con opciones de actualidad y noticia referente a los productos y

actividades de la empresa.

55



5.6.4 Diseño y Producción

Cada una de las etapas para el diseño de la página tiene la característica de agrupar

una serie de tareas y elementos que al llevarse a cabo, permiten alcanzar los

objetivos que se plantean. Es importante llevar a cabo los pasos que se plantean, de

esa manera se podrá obtener el aporte que cada uno, por eso hemos realizado los

siguientes:

Definir: En esta etapa determinamos las características básicas del proyecto que se

creará, a partir de los objetivos que se espera alcanzar a través de su desarrollo. En

esta etapa será también indispensable contar con información general que se utilizará

en el proyecto con respecto de las necesidades de los usuarios y que puedan ser

satisfechas por el producto o proyecto a realizar.

Analizar y seleccionar: Escogeremos y organizamos todo los que no tiene que con

textos, imágenes y también en caso de utilizar audio, video. Para tener claro los

contenidos que se aplicarán en la siguiente etapa.

Diseñar: Se aplicará y diagramará los contenidos que se obtuvieron en las etapas

anteriores, lo importante dentro de esta etapa es considerar que los contenidos que se

ofrecen sean digitales y reales, aparte de presentar un diseño atractivo y que cautive

al usuario para que visite nuestra web y no pierda interés en la misma.

56



5.6.5 Imágenes

En el presente proyecto se aplicaron un conjunto de fotos que fueron proporcionadas

por la empresa, donde están elementos, implementos y artículos que muestran y dan

a conocer los productos y servicios que la empresa dispone. Estas fotos fueron

editadas en Photoshop, donde algunas fueron recortadas, otras retocadas las

imperfecciones, se cambiaron tono de colores, otras se juntaron y formaron otras

fotos en conjunto como la que presentamos a continuación:

Figura Nº 26


5.7 Marketing y Difusión

Para la difusión y el posicionamiento de la página web y la empresa, platearemos y

podremos en marcha una estrategia de marketing adecuada valiéndonos de un medio

como la publicidad con el fin de dar a conocer los productos y servicios de la

57



empresa y su sitio web. A continuación detallamos las etapas, el tiempo y elementos

para poder alcanzar un resultado a un tiempo cercano.

Tabla Nº 8

ETAPA TIEMPO PIEZAS

Lanzamiento

Esta etapa será para

informar y dar a conocer

al grupo objetivo la página

web de la empresa, y su

periodo no será mayor a

tres meses.

* Se realizará un evento de

lanzamiento del sitio web con

invitados especiales.

* Se difundirá la página web

con una campaña de emailing,

con flayers digitales.

Posicionamiento

Se crearán ofertas de

promoción por tiempo

limitado para atraer la

atención del grupo

objetivo, y su tiempo de

duración será de 3 meses.

* Promocionarse a través de

redes sociales.

* Flayers publicitarias del sitio

web y la empresa con

promociones.

Mantenimiento

Lograr que el grupo

objetivo retenga la imagen

de la marca en su

memoria. Eso se lo

realizara en un periodo de

seis meses en adelante.

* Realizar ventas directas

formando un departamento de

venta o promoción que

constarán con Brochure así

como flayers publicitarios

(Volantes) del sitio web y la

empresa.

* Implementar roll up

publicitarios del sitio y la

empresa.


58



Diseño del Roll up:

Figura Nº 27


59



Diseño del Flayer:

Figura Nº 28


60



Diseño de Banner para internet

Figura Nº 29


61



CAPÍTULO VI

ASPECTOS ADMINISTRATIVOS

6.1 Recursos

Los recursos utilizados en el desarrollo del proyecto de la página web para la

empresa PUBLIVENTAS son los que se detallan a continuación:

Humano: El diseñador y todas las personas que de alguna manera han aportado en

el desarrollo y puesta en marcha del proyecto.

Tecnológico: Los elementos de tecnología que utilizamos tales como un computador

Intel I3, sistema operativo Windows XP, Paquete de Software Adobe CS6, Oficce

2007, e implementos como impresoras, teléfonos celulares, internet entre otros.

Materiales: Los recursos que nos ayudan a complementar y poner en marcha el

proyecto tales como libros, cuadernos, lápices, plumas .

Económicos: Las aportaciones económicas que el alumno y la empresa aportan para

llevar adelante el proyecto, en este caso parte del proyecto está siendo financiado por

la empresa que pondrá la propuesta en uso.

62



6.2 Presupuesto

Tabla Nº 9

PRESUPUESTO

INGRESOS VALOR

Aportes Personales 570,00

Aportes Familiares 400,00

TOTAL 970,00

EGRESOS

Elaboración del Proyecto 150,00

Material de Escritorio 25,00

Material Bibliográfico 50,00

Copias 10,00

Equipos 525,00

Transporte 30,00

Internet 60,00

Servicios Básicos 40,00

Refrigerios 50,00

Imprevistos 30,00

TOTAL 970,00


63



6.3 Cronograma

Tabla Nº 10

CAPÍTULO FECHA MES

JUNIO JULIO AGOSTO SEPTIEMBRE OCTUBRE

Antecedentes 24/06/2013

Análisis de involucrados 15/07/2013

Problemas y Objetivos 12/08/2013

Análisis de alternativas 26/08/2013

Propuesta 23/09/2013

Aspectos administrativos 04/10/2013

Conclusión y

Recomendaciones 04/10/2013

Corrección final 11/10/2013

Entrega Final 17/10/2013


64



CAPÍTULO VII

CONCLUSIONES Y RECOMENDACIONES

7.1 Conclusiones

Al llegar a la culminación del proyecto y después de cumplir con el cronograma

establecido concluyo que una página web permitirá:

1. Que los clientes tengan interés y estén mejor informados de la actividad de la

empresa.

2. Por este medio será más fácil para que los proveedores atiendan las necesidades

de la empresa.

3. La empresa ganará posicionamiento en el mercado y confianza del grupo

objetivo.

4. Con este elemento se permitirá cautivar y ganar nuevos clientes.

5. Con la debida acogida del sitio y el incremento de nuevos clientes se asegura un

aumento de las ventas de la empresa.

6. Que implementar un sitio web permite alcanzar algunas metas u objetivos

empresariales.

7. Para el buen funcionamiento en las actividades de una empresa se debe contar

con estrategias de Marketing para tener una mejor aceptación del mercado.

8. Que tener elementos de difusión modernos y actuales permite que el grupo

objetivo tenga una mejor imagen de la empresa.

65



9. Hay que contar con rubros o fuentes de financiamiento para mejorar la imagen y

difusión de la empresa esto permitirá llegar de mejor manera al grupo objetivo.

10. Además del sitio web es bueno tener medios publicitarios que lleguen a los

potenciales clientes para que siempre estén bien informados de las actividades,

ofertas y sugerencias de productos que la empresa tiene.

11. Por último el desarrollo y puesta en marcha de una página web, me ha permitido

aplicar todos los conocimientos aprendidos durante estos años de estudio en el

ITSCO.

7.2 Recomendaciones:

Que la Empresa ponga en funcionamiento la página web y que esta cumpla

el fin para la que fue creada.

También que las estrategias de marketing y difusión sean aplicados por la

empresa para que la página llegue a alcanzar éxito y consiga el objetivo que

es ganar mercado y posicionamiento.

Además que la página tenga actualizaciones cada cierto tiempo donde se

agreguen nuevas opciones y se actualice la información que contiene.

Que se mantenga el sitio y que el hosting y el dominio sea renovado cada

año para el normal funcionamiento del mismo.

Por último recomiendo que este tipo de proyectos sean evaluados

constantemente y se haga seguimiento para observar que tan exitoso ha sido

su aplicación.

66



7.3 Referencias Bibliográficas

1. Adobe Systems Incorporated. (2010). Uso de Adobe Dremweaver CS5. (Edición

Actualizada).

2. Adobe Systems Incorporated. (2010). Uso de Adobe Flash CS5. (Edición

Actualizada).

3. Adobe Systems Incorporated. (2010). Uso de Adobe Ilustrator CS5. (Edición

Actualizada).

4. Adobe Systems Incorporated. (2010). Uso de Adobe Photoshop CS5. (Edición

Actualizada).

5. Juan Carlos Camus (1984) , Tienes cinco segundos, Santiago-Chile.

6. Samara Timothy (2008), Los elementos del diseño, Barcelona-España.

7. Phil Baines y Andrew Haslam, ( 2005), Tipografía, Barcelona-España.

8. Fernando Rodríguez (2008), Crear una Web desde cero.

7.4 Anexos

Anexo cotizaciones de Hosting y Dominios donde detallan los costos y

características técnicas del sitio de alojamiento donde se pondrá la página web.

carrera de diseÑo grÁfico la tecnologÍa y el diseÑo

Documents