carrera de diseÑo grÁfico la tecnologÍa y el diseÑo
Post on 21-Jul-2022
12 Views
Preview:
TRANSCRIPT
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
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
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.
Í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
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.
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
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.
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
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.
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
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.
Í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
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.
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
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.
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
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.
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
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.
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
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.
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:
publiventas39@hotmail.com - info@publiventasecuador.com
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
2
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.
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
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.
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
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.
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
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.
CAPÍTULO II
ANÁLISIS DE INVOLUCRADOS
2.1 Identificación de involucrados
Figura Nº 1
Elaborado por: Patricio Pilacuán S.
6
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.
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
Elaborado por: Patricio Pilacuán S.
7
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.
CAPÍTULO III
PROBLEMAS Y OBJETIVOS
3.1 Árbol de problemas
Figura Nº 2
Elaborado por: Patricio Pilacuán S.
8
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.
3.2 Árbol de objetivos
Figura Nº 3
Elaborado por: Patricio Pilacuán S.
9
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.
CAPÍTULO IV
ANÁLISIS DE ALTERNATIVAS
4.1 Acciones e identificación de alternativas
Figura Nº 4
Elaborado por: Patricio Pilacuán S.
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
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.
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
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.
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
Elaborado por: Patricio Pilacuán S.
12
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.
4.6 Diagrama de estrategias
Figura Nº 5
Elaborado por: Patricio Pilacuán S.
13
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.
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
Elaborado por: Patricio Pilacuán S.
14
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.
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
Finalidad F4. Incremento
de clientes Ganar nuevos
clientes X - X X X 4 Si
Finalidad F5. Ventas altas Mejorar
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
Elaborado por: Patricio Pilacuán S.
15
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.
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
empresa Observación
Simple
verificación 6 meses Empresa
Finalidad
F3. Afianzar
Posicionamiento
en el mercado
Confianza del
grupo
objetivo en la
empresa
Datos de la
empresa Observación
Simple
verificación 1 año Empresa
Finalidad F4. Incremento
de clientes
Ganar nuevos
clientes
Datos de la
empresa Observación
Simple
verificación 1 año Empresa
Finalidad F5. Ventas altas Mejorar
Ganancias
Datos de la
empresa Observación
Simple
verificación 1 año Empresa
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
empresa Observación
Simple
verificación 6 meses Empresa
Componente
C2. Incorporar
estrategias de
Marketing
Mejorar las
ventas
Datos de la
empresa Observación
Simple
verificación 6 meses Empresa
Componente
C3. Mejorar
imagen
corporativa
Mejorar la
identidad
corporativa
Bibliografía Encuesta Estadística 1 año Empresa
Componente C4. Aumentar
presupuesto
Medios para
financiar
Datos de la
empresa Observación
Simple
verificación 3 meses Empresa
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
empresa Observación
Simple
verificación 3 meses Empresa
Actividad A2. Aumentar
Publicidad de la
empresa
Aumentar cantidad de
clientes
Datos de la
empresa Observación
Simple
verificación 6 meses Empresa
Elaborado por: Patricio Pilacuán S.
16
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.
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
Componente C4. Aumentar
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
Elaborado por: Patricio Pilacuán S.
17
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.
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
Elaborado por: Patricio Pilacuán S.
18
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.
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
19
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.
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
20
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.
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
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.
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
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.
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
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.
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.
24
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.
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
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.
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
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.
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 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.
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
Elaborado por: Patricio Pilacuán S.
28
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.
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
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.
Figura Nº 7: Pantalla Principal
Elaborado por: Patricio Pilacuán S.
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
Elaborado por: Patricio Pilacuán S.
30
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.
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
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.
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:
Elaborado por: Patricio Pilacuán S.
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
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.
Opciones destacadas:
Figura Nº 10
Opciones destacadas pulsadas:
Figura Nº 11
Elaborado por: Patricio Pilacuán S.
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
Elaborado por: Patricio Pilacuán S.
33
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.
Botón enviar del formulario: Sirve para enviar la información de los clientes a
nuestras cuentas de correo electrónicas.
Figura Nº 13
Elaborado por: Patricio Pilacuán S.
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
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.
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
Elaborado por: Patricio Pilacuán S.
35
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.
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
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.
Inicio o Index
Figura Nº 15
Elaborado por: Patricio Pilacuán S.
37
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.
Nosotros – Quienes somos
Figura Nº 16
Elaborado por: Patricio Pilacuán S.
38
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.
Nosotros – Visión y Misión
Figura Nº 17
Elaborado por: Patricio Pilacuán S.
39
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.
Nosotros – Filosofía
Figura Nº 18
Elaborado por: Patricio Pilacuán S.
40
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.
Nosotros – Nuestros clientes
Figura Nº 19
Elaborado por: Patricio Pilacuán S.
41
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.
Nosotros – Alianza estratégica
Figura Nº 20
Elaborado por: Patricio Pilacuán S.
42
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.
Servicios – Publicidad
Figura Nº 21
Elaborado por: Patricio Pilacuán S.
43
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.
Productos – Implementos de limpieza
Figura Nº 22
Elaborado por: Patricio Pilacuán S.
44
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.
Productos – Productos de limpieza
Figura Nº 23
Elaborado por: Patricio Pilacuán S.
45
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.
Productos – Productos químicos
Figura Nº 24
Elaborado por: Patricio Pilacuán S.
46
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.
Contáctenos – Formulario de contactos
Figura Nº 25
Elaborado por: Patricio Pilacuán S.
47
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.
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
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.
}
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
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.
_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()"
onmouseover="MM_swapImage('Image20','','images/index_1_04.jpg',1)"><img
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
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.
<li><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image21','','images/index_1_05.jpg',1)"><img
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>
<li><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image22','','images/index_1_06.jpg',1)"><img
src="images/index_06.jpg" width="137" height="82" id="Image22"
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>
<li><a href="#" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image23','','images/index_1_07.jpg',1)"><img
src="images/index_07.jpg" width="146" height="82" id="Image23"
border="0"/></a>
<ul>
<li><a href="contactos.php">Formulario de contacto</a></li>
51
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.
</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" />
<!-- Esta etiqueta param indica a los usuarios de Flash Player 6.0 r65 o posterior
que descarguen la versión más reciente de Flash Player. Elimínela si no desea que
los usuarios vean el mensaje. -->
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- La siguiente etiqueta object es para navegadores distintos de IE. Ocúltela a
IE mediante IECC. -->
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="anime.swf" width="960"
height="438">
<!--<![endif]-->
<param name="quality" value="high" />
<param name="wmode" value="opaque" />
<param name="swfversion" value="8.0.35.0" />
52
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.
<param name="expressinstall" value="Scripts/expressInstall.swf" />
<!-- El navegador muestra el siguiente contenido alternativo para usuarios con
Flash Player 6.0 o versiones anteriores. -->
<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>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</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()"
onmouseover="MM_swapImage('Image30','','images/index_1_12.jpg',1)"><img
src="images/index_12.jpg" width="181" height="199" id="Image30" /></a><a
href="implemento1.html" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image31','','images/index_1_13.jpg',1)"><img
53
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.
src="images/index_13.jpg" width="182" height="199" id="Image31" /></a><a
href="productoqui.html" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image32','','images/index_1_14.jpg',1)"><img
src="images/index_14.jpg" width="183" height="199" id="Image32" /></a><a
href="publicidad.html" onmouseout="MM_swapImgRestore()"
onmouseover="MM_swapImage('Image33','','images/index_1_15.jpg',1)"><img
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
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.
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
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.
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
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.
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
Elaborado por: Patricio Pilacuán S.
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
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.
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.
Elaborado por: Patricio Pilacuán S.
58
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.
Diseño del Roll up:
Figura Nº 27
Elaborado por: Patricio Pilacuán S.
59
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.
Diseño del Flayer:
Figura Nº 28
Elaborado por: Patricio Pilacuán S.
60
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.
Diseño de Banner para internet
Figura Nº 29
Elaborado por: Patricio Pilacuán S.
61
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.
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
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.
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
Elaborado por: Patricio Pilacuán S.
63
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.
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
Elaborado por: Patricio Pilacuán S.
64
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.
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
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.
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
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.
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.
top related