i
PONTIFICIA UNIVERSIDAD CATÓLICA DEL ECUADOR SEDE SANTO DOMINGO
Dirección Académica - Escuela Diseño
CREACIÓN DE UN SITIO WEB COMO MEDIO DE COMUNICACIÓN COMERCIAL DE PRODUCTOS Y SERVICIOS DE LA EMPRESA EMPROSERVIS DE LA CIUDAD DE SANTO DOMINGO DE LOS TSÁCHILAS, AÑO 2014.
Disertación de Grado previa a la obtención del título de Diseñadoras con Mención en Comunicación Visual
Línea de Investigación: Creación de Propuestas Interactivas orientadas a la Generación de Aprendizaje Significativos en el Entorno Social y Empresarial.
Autoras: Tutillo Tutillo Mirian Pilar Vera Zambrano Disney Estefany
Director: Gonzalo Abraham Viñán Carrasco
Santo Domingo – Ecuador Febrero, 2015
ii
PONTIFICIA UNIVERSIDAD CATÓLICA DEL ECUADOR SEDE SANTO DOMINGO
Dirección Académica - Escuela Diseño HOJA DE APROBACIÓN
CREACIÓN DE UN SITIO WEB COMO MEDIO DE COMUNICACIÓN COMERCIAL DE PRODUCTOS Y SERVICIOS DE LA EMPRESA EMPROSERVIS DE LA CIUDAD DE SANTO DOMINGO DE LOS TSÁCHILAS, AÑO 2014
Línea de Investigación: Creación de Propuestas Interactivas orientadas a la Generación de Aprendizaje Significativos en el Entorno Social y Empresarial.
Autoras: Tutillo Tutillo Mirian Pilar Vera Zambrano Disney Estefany
Mg. Gonzalo Abraham Viñán Carrasco DIRECTOR DE LA DISERTACIÓN DE GRADO
Mg. Cristóbal Oswaldo Mayorga Vivanco CALIFICADOR
Mg. José Ángel Gonzales Ricardo CALIFICADOR
Mg. Cristóbal Oswaldo Mayorga Vivanco DIRECTOR DE LA ESCUELA DE DISEÑO Santo Domingo – Ecuador Febrero, 2015
iii
DECLARACIÓN DE AUTENTICIDAD Y RESPONSABILIDAD
Tutillo Tutillo Miriam Pilar portador de la cédula de ciudadanía Nº 0503244691 y Disney Estefany Vera Zambrano portadora de la cédula de ciudadanía Nº 1724652860 declaro que los resultados obtenidos en la investigación que presento como informe final, previo a la obtención del Grado de Diseñadoras con Mención en Comunicación Visual son absolutamente originales, auténticos y personales.
En tal virtud, declaro que el contenido, las conclusiones y los efectos legales y académicos que se desprenden del trabajo propuesto de investigación y luego de la redacción de este documento son y serán de mi sola y exclusiva responsabilidad legar y académica.
Tutillo Tutillo Miriam Pilar CI 0503244691
Vera Zambrano Disney Estefany CI 1724652860
iv
AGRADECIMIENTO Agradecemos a todas las personas que han contribuido de una u otra forma durante el desarrollo del presente proyecto, de la misma manera a todos nuestros docentes por compartirnos todos sus conocimientos, experiencias y de esta manera dotarnos de sabiduría para el desarrollo de nuestras vidas profesionales.
A nuestra querida PUCE SD, del cual estamos agradecidas por la formación integra que hemos recibido en el transcurso de la carrera, también de una manera especial queremos agradecer a nuestro tutor Mg. Abraham Viñan, por su guía y paciencia en el desarrollo de la disertación.
A las personas que nos ayudaron en el proceso de validación de metodología- prototipo, Lcdo. Juan Pablo Ruiz, PHD. Rafael Cañadas, Mg. Cristóbal Mayorga, gracias a su participación la presente disertación muestra un trabajo real e investigado que permite ser un legado para docentes y futuros estudiantes del Diseño y la Comunicación Visual en Santo Domingo.
v
DEDICATORIA Este trabajo lo dedico a todas las personas que formaron parte de este proyecto, de una manera especial a mis padres por ser el pilar funadmental en el crecimiento de mi vida personal y profesional, a todos quienes me brindaron su apoyo en la consecución de la presente etapa de mi vida. A los jovenes interesados en la planificación, diseño y creación de sitios web, que este documento sirva de legado para futuros proyectos en la linea de investigación referente a diseño web. Tutillo Tutillo Miriam Pilar.
A Dios, guía de mi vida, quien me ha brindado dotes de sabiduría para alcanzar el título de Diseñadora con mención en comunicación visual, a mis padres, que a través de sus enseñanzas y apoyo, siempre han confiado en mi capacidad para lograr mis metas propuestas. A mi hijo ya que él es la esencia principal de haber fomentado en mí el deseo de superación y el anhelo de triunfo en la vida. A mis Hermanos porque siempre he contado con ellos para todo, gracias a la confianza que siempre nos hemos tenido; por el apoyo y amistad, a todos mis familiares que me resulta muy difícil poder nombrarlos en tan poco espacio, sin embargo ustedes saben quiénes son y a mi compañera y amiga de tesis, Pilar Tutillo, por ser el apoyo y la compañía perfecta, en el transcurso de ésta experiencia. Vera Zambrano Disney Estefany.
vi
RESUMEN El presente proyecto de investigación aborda como tema la creación de un sitio web como medio de comunicación comercial de productos y servicios de la empresa EMPROSERVIS de la ciudad de Santo Domingo en el año 2015. Mediante este proyecto se permite dar solución a la falta de comunicación a través de un sitio web que va a permitir estrechar lazos entre empresa-cliente.
El proyecto está fundamentado por el desarrollo teórico de temas que hacen referencia generalmente a internet y sitios web. Para el desarrollo de la investigación se aplicó un enfoque cuantitativo que permitió obtener resultados a través de técnicas e instrumentos de recogida de datos como: Encuesta, entrevista, observación. Además cabe mencionar que para el proceso de diseño fue primordial el desarrollo del Brief y diseño del sitio web para lograr el resultado del prototipo final.
En cuanto a los resultados se puede destacar que el sitio web cumple con parámetros de uso y función de elementos. Es importante mencionar que el proyecto ha sido validado por expertos en el área, lo cual ratifica la eficacia del proyecto que va a permitir a mediano plazo establecer canales de comunicación comercial entre empresa-cliente. Por ende se invita a personas intestados en diseño web a explorar este proyecto y además que sea un legado para estudiantes y profesionales del diseño y la Comunicación Visual. Palabras claves: TeamViewer, Cuantitativo, On line, Educación Virtual
vii
ABSTRACT This research project presents as topic, the creation of web site as a means of business products and services of the company EMPROSERVIS of the Santo Domingo city in the year 2015; it will be guaranteed by the mentioned company which expects to strengthen the business links whit the customers, through the use of a web site that allows providing a solution for the business of products and services focused on the automotive area.
For the development of this research, a qualitative focus was applied which allowed getting relevant information through techniques and instruments of data collection as: survey, interview and observation. The results are organized according to the design process elaborated for the project, which was validated by two teachers of the Design School.
As main results of the research it is possible to emphasize that the web site has use and function parameters like utility, browsing and interactivity, as well as it is important to mention the project has been validated by experts of the field, which ratifies the efficacy of the project which will allow establishing communication channels in mid-term whit companies-customers. Key words: Team Viewer. Quantitative, on line, Virtual Education.
viii
ÍNDICE CONTENIDOS
1.
INTRODUCCIÓN .......................................................................................................... 1
2.
PLANTEAMIENTO DEL PROBLEMA ....................................................................... 3
2.1.
Antecedentes ................................................................................................................... 3
2.2.
Problema de investigación .............................................................................................. 4
2.3.
Justificación de la investigación ..................................................................................... 5
2.4.
Objetivos de investigación .............................................................................................. 7
2.4.1. Objetivo General ............................................................................................................. 7 2.4.2. Objetivos Específicos...................................................................................................... 7 3.
MARCO REFERENCIAL .............................................................................................. 9
3.1.
Rancho San Fernando. .................................................................................................. 11
3.1.1. Análisis del Sitio Web .................................................................................................. 11 3.2.
Toyota ........................................................................................................................... 12
3.2.1. Análisis del Sitio Web .................................................................................................. 12 3.3.
Apple ............................................................................................................................. 13
3.3.1. Análisis del Sitio Web .................................................................................................. 13 3.4.
Diseño orientado a la web ............................................................................................. 14
3.5.
La Internet ..................................................................................................................... 15
3.6.
WWW (World Wide Web) ........................................................................................... 16
3.6.1. Evolución de la World Wide Web ................................................................................ 16 3.7.
Multimedia .................................................................................................................... 18
3.7.1. Tipos de elementos multimedia .................................................................................... 19 3.8.
Sitios Web ..................................................................................................................... 20
3.8.1. Hosting .......................................................................................................................... 20 3.8.2. Dominio ........................................................................................................................ 21 3.8.3. Páginas Web.................................................................................................................. 22 3.8.4. Sitios Estáticos .............................................................................................................. 23
ix
3.8.5. Sitios Dinámicos ........................................................................................................... 24 3.8.6. Herramientas ................................................................................................................. 25 3.9.
Objetivos del Sitio Web ................................................................................................ 25
3.9.1. Accesibilidad................................................................................................................. 25 3.10. Aspectos recomendados para el desarrollo de un Sitio Web ........................................ 28 3.10.1. Contenido ..................................................................................................................... 28 3.10.2. Tipografía en la Web ................................................................................................... 29 3.10.3. Alineación de texto ...................................................................................................... 30 3.10.4. Gama cromática de la interfaz web .............................................................................. 31 3.10.5. Sobriedad ..................................................................................................................... 31 3.10.6. Botones e iconos .......................................................................................................... 34 3.11. Navegabilidad ............................................................................................................... 35 3.11.1. Menús despegables ...................................................................................................... 35 3.11.2. Barra de desplazamiento .............................................................................................. 36 3.11.3. Hipervínculos ............................................................................................................... 37 3.12. Estilos de páginas (CSS) ............................................................................................... 37 3.13. Herramientas de desarrollo para un Sitio Web ............................................................. 38 3.14. Herramientas de apoyo para la creación de un Sitio Web ............................................ 38 3.15. Programación ................................................................................................................ 39 3.15.1. Html ............................................................................................................................. 39 3.15.2. Php... ....................................................................................................................... ….39 3.15.3. Java Script .................................................................................................................... 40 3.15.4. Asp ............................................................................................................................... 40 3.15.5. Cold fusión ................................................................................................................... 40 3.16. Proceso de desarrollo de un Sitio Web ......................................................................... 41 3.16.1. Conceptualización ........................................................................................................ 41 3.16.2. Diseño de mapa de navegación .................................................................................... 41 3.16.3. Diseño de construcción de la interfaz Web.................................................................. 42 3.16.4. Prototipo....................................................................................................................... 44 3.16.5. Producto final ............................................................................................................... 44 3.17. Emproservis .................................................................................................................. 46 3.17.1. Historia del grupo “EMPROSERVIS” ........................................................................ 46 3.17.2. Misión .......................................................................................................................... 47
x
3.17.3. Visión ........................................................................................................................... 47 3.17.4. Valores corporativos .................................................................................................... 47 3.17.5. Portafolio de productos y servicios .............................................................................. 48 3.17.6. Líneas de negocios ....................................................................................................... 48 4.
METODOLOGÍA DE LA INVESTIGACIÓN ............................................................ 49
4.1.
Diseño ........................................................................................................................... 49
4.2.
Tipo de investigación .................................................................................................... 49
4.3.
Población / Universo ..................................................................................................... 50
4.4.
Técnicas e instrumentos de recogida de datos .............................................................. 52
4.4.1. Encuestas....................................................................................................................... 52 4.4.2. Entrevista Estructurada ................................................................................................. 55 4.4.3. Observación estructurada .............................................................................................. 57 4.5.
Técnicas de Análisis de Datos ...................................................................................... 58
4.6.
Plan de diseño para el Sitio Web .................................................................................. 59
4.6.1. Información ................................................................................................................... 59 4.6.2. Análisis y organización ................................................................................................. 59 4.6.3. Desarrollo del plan de diseño ........................................................................................ 60 4.6.4. Implementación y control ............................................................................................. 61 5.
Resultados ..................................................................................................................... 62
5.1.
Análisis y Discusión de los resultados .......................................................................... 62
5.2.
Información ................................................................................................................... 62
5.2.1. Investigación ................................................................................................................. 63 5.3.
Desarrollo ...................................................................................................................... 87
5.3.1. Modelo Mental .............................................................................................................. 87 5.4.
Bocetaje - Digitalización............................................................................................... 88
5.5.
Creación del sitio web ................................................................................................... 90
5.5.1. Descripción del Sitio Web ............................................................................................ 94 5.5.2. Conclusión .................................................................................................................... 98 5.6.
Análisis semiótico ......................................................................................................... 99
5.6.1. Semántico...................................................................................................................... 99 5.6.2. Sintáctico....................................................................................................................... 99 5.6.3. Pragmático .................................................................................................................. 100 5.7.
Validación ................................................................................................................... 101
xi
5.7.1. Validación del prototipo dirigida a profesionales del área de diseño. ........................ 101 5.7.2. Validación del prototipo dirigida al personal que forma parte de la empresa. ........... 104 5.7.3. Conclusión de la validación del prototipo. ................................................................. 105 5.7.4. Presentación de producto final .................................................................................... 106 5.8.
Implementación y control ........................................................................................... 111
5.8.1. Manual de usuario del sitio web ................................................................................. 111 5.8.2. Diseño de mapa de navegación (Ver Tabla No. 54) .................................................. 119 6.
CONCLUSIÓN ........................................................................................................... 120
7.
RECOMENDACIÓN ................................................................................................. 122
8.
LISTA DE REFERENCIAS ....................................................................................... 123
8.1.
Fuentes de Información............................................................................................... 123
8.1.1. BIBLIOGRAFÍA ........................................................................................................ 123 8.1.2. Documental ................................................................................................................. 124 8.1.3. Lincografía .................................................................................................................. 124 9.
GLOSARIO ................................................................................................................ 126
10.
ANEXOS .................................................................................................................... 128
xii
ÍNDICE TABLAS
Tabla 1 Matriz de Relación…………….…………………………...……………...………...08 Tabla 2 Marco Referencial…….……..………………………….………………...………...10 Tabla 3 Web Estática….....………………………………………………………...………...17 Tabla 4 Web Dinámica...……...…………………………………………………...………...17 Tabla 5 Web Semántica…......……………………………………………………...………..18 Tabla 6 Tipos de Multimedia…………..…………………………………………...………..19 Tabla 7 Tipos de Hosting (Ventaja y Desventajas)…….…………………………...………..21 Tabla 8 Parte del Dominio del Sitio Web ………………………….…………………….......22 Tabla 9 Herramientas…….……………………………………………………...…………..25 Tabla 10 Ventajas de la Accesibilidad Web……..………….……….…………...……….....26 Tabla 11 Navegabilidad Web……………………...…………………………......……….....27 Tabla 12 Clases de Tipografía …………………………….……………………...………....29 Tabla 13 Tamaño de Texto……….………………………………….……..….....……….....30 Tabla 14 Alineación de Texto……………………………………….……………………….30 Tabla 15 Gama Cromática……………...………………………………………...……….....31 Tabla 16 Botones …………….…………………………………………………..……….....35 Tabla 17 Herramientas de Desarrollo para un Sitio Web ……………...………....……….....38 Tabla 18 Herramientas de apoyo ………………………………………………...……….....39 Tabla 19 Conceptualización…………………………….………………………..……….....41 Tabla 20 Mapa de Navegación……………...………….………………………...……….....42 Tabla 21 Muestreo……...………………………………………………………...……….....51 Tabla 22 Muestreo Aleatorio Estratificado Proporcionado ……………………...……….....51 Tabla 23 - 24 Estructura de la Encuesta …………………………………….............…..53 - 54 Tabla 25 Estructura de la Entrevista ...………………………...………...………...………...56
xiii
Tabla 26 Observación...…………………………………………………………...………...58 Tabla 27 Matriz de Planificación……..………………………….………………...………...61 Tabla 28 Matriz de Planificación / Propuesta de intervención ...…………………..………...62 Tabla 29 - 44 Tabulación...…………………… …………………..………….………...63 - 78 Tabla 45 Observación……………….…………………………………………...……….....82 Tabla 46 Observación (Tecnología)……………………………………………...……….....82 Tabla 47 – 49 Brief………………...………………………………………...……….....84 - 86 Tabla 50 Modelo Mental Empresa…..…………………………………………...……….....87 Tabla 51 – 52 Validación Sitio Web (Objetivo del Sitio Web)…………………………......102 Tabla 53 Validación Sitio Web (Objetivo del Sitio Web)………………………...………...105 Tabla 54 Diseño de Mapa de Navegación ………………………………………..………...119 Tabla 55 – 56 Glosario…………………………………………………...…………...126 - 127
xiv
ÍNDICE FIGURA
Figura 1 Antecedentes de la Empresa Local …………..…...……………………...………...11 Figura 2 Antecedentes de la Empresa Nacional………………...……….………...………...12 Figura 3 Antecedentes de la Empresa Multinacional……………...……………...………...13 Figura 4 Pagina Web Estática …………………………………………..…..........................23 Figura 5 Pagina Web Dinámica …………………………………………..............………...24 Figura 6 Contenido ……………………………………………...……………………….....28 Figura 7 Sobriedad……………………………………………...…………….…………….32 Figura 8 Peso de Imagines ……………………………………………………......………...33 Figura 9 Mapa de Bits ………………………………………………...…………..………...33 Figura 10 Formato de Imágenes……………………...………...............................................34 Figura 11 Menú Desplegables………….………………………....................………...….....36 Figura 12 Desplazamiento…………………………………………………..……………....36 Figura 13 Hipervínculos ….………………...………………………...………………….....37 Figura 14 Diseño y Estructura…………………...…………………………….....……….....43 Figura 15 Producto Final……………………………..……..........................................….....35 Figura 16 Producto Final Estudios ……………………..…………………..........……….....45 Figura 17 Producto Final Nuestra Sede…………………...………………...……...…….....46 Figura 18 – 33 Tabulaciones ……………………………...…...…………...……….....63 – 78 Figura 34 – 36 Propuestas …………………………………...……………...……….....88 – 89 Figura 37 – 40 Creación del Sitio Web...……………………...…...………..……….....90 – 93 Figura 41 – 46 Descripción del Sitio Web……………………...…………...……….....94 – 98 Figura 47 – 51 Presentación Producto Final……………………...……...…………...106 – 110 Figura 52 – 59 Manual de Usuario del Sitio Web ………………...………………...111 – 118 Figura 60 – 75 Anexos …………………………………………......…………...…...128 – 143
1
1.
INTRODUCCIÓN
En la actualidad, el uso avasallante de internet como red mundial para trasmitir información está activando nuevas y mejores maneras de comunicación a nivel cultural, social y sobre todo en el ámbito comercial ya que permite establecer una relación de oferta y demanda entre cliente y empresa para obtener beneficios y satisfacer sus necesidades, mediante la construcción o el uso de diferentes canales de interacción navegables acordes al perfil del publico destinatario.
Uno de los denominados canales de comunicación es el sitio web que se constituye en un instrumento indispensable para los espacios en
Internet, especialmente
para aquellos
destinados a los servicios comerciales, por lo tanto la funcionalidad visibilizada en criterios como
usabilidad, navegabilidad e interactividad
del sitio web
se convierten en
especificaciones de vital importancia que la empresa debe gestionar para estrechar sus lazos con el cliente.
Así mismo en la construcción de un sitio web el diseño gráfico aporta criterios conceptuales, estéticos, creativos y comunicativos que le otorgan identidad visual a la institución en su proceso de comercialización de productos y servicios desde la preventa, venta, gestión del servicio al cliente hasta la postventa, conjugando así funcionalidad con comunicación visual en la comercialización en el internet.
La presente disertación de grado previo a la obtención del título de Diseñadoras con Mención en Comunicación Visual trata sobre la creación de un sitio web como medio de comunicación comercial de productos y servicios de la empresa EMPROSERVIS de la ciudad
2
de Santo Domingo de los Tsáchilas en el año 2014 en la cual se aborda una fundamentación teórica en la que se puede resaltar aspectos como: Antecedentes del problema, el cual se presenta de manera ordenada, jerarquizada y se caracteriza la importancia del estudio.
En el marco referencial se presenta fundamentos teóricos que deben visibilizarse en el proyecto orientado al desarrollo de un sitio web y sustento de los resultados que sirvieron para el desarrollo de la investigación. En cuanto a lo metodológico se sigue un enfoque cuantitativo con un tipo de investigación correlacional y las técnicas de recolección de datos, las cuales guiaron el logro de los resultados obtenidos en la etapa de investigación del sitio web de la empresa EMPROSERVIS.
Finalmente para el desarrollo del proyecto fue fundamental fuentes de información que se detallan como: bibliográficas, lincografícas, hemerograficas, entre otros. Las cuales sirvieron para obtener resultados que validan un trabajo de investigación real y fidedigno.
3
2. 2.1.
PLANTEAMIENTO DEL PROBLEMA
Antecedentes
El Grupo Empresarial Dueñas Gutiérrez fue fundado por el Señor José Dueñas Cedeño y su esposa, iniciando sus pasos en el año 1983 con la distribución de llantas y líneas afines para Santo Domingo, con el nombre de Súper Llanta. El negocio tuvo un crecimiento sostenido por la seriedad y efectividad en su gestión administrativa y comercial, lo cual permitió incrementar nuevas líneas
de productos para el manejo comercial de los
Lubricantes Valvoline para la zona Noroccidental del Ecuador. Luego el grupo emprendió a nivel nacional la importación directa de fábrica de llantas Bridgestone Firestone.
EMPROSERVIS, a lo largo de su trayectoria ha aplicado mecanismos y estrategias comerciales convencionales, lo cual ha dado resultados satisfactorios para el posicionamiento de mercado que la empresa ha alcanzado a nivel provincial y nacional a través de las ventajas competitivas implementadas, respecto a sus competidores. Por tal razón EMPROSERVIS, ubicada en Santo Domingo de los Tsáchilas, como líder en ventas dentro de la provincia, pretende fortalecer los lazos de comunicación comercial con sus clientes mediante el uso de un sitio web que le permita como un primer esfuerzo crecer y liderar en el País la comercialización de productos y servicios enfocados al sector Automotriz.
Esta empresa actualmente cuenta con un sitio web que se encuentra elaborada con un programa llamado Joombla el cual impide la interactividad y limita el dinamismo como principal problema que debe abordar esta investigación. Adicional la carencia de recursos conceptuales, estéticos y creativos como ejes del diseño gráfico limita la comunicación con el cliente al no presentar adecuadamente los productos y servicios que oferta la empresa.
4
Este problema agudiza más debido a que la estructura de su sitio web no presta información completa sobre el proceso de comercialización de productos y servicios desde la preventa, venta, gestión del servicio al cliente hasta la postventa, y por ello se dejan interrogantes y vacíos en el proceso comunicativo empresa cliente perdiendo así la oportunidad de ampliar su cartera de clientes en la Provincia y el País. Por todos los antecedentes expuestos es importante abordar el proyecto que permita establecer un canal de comunicación y comercialización empresa clientes de manera asertiva para que EMPROSERVIS obtenga en esta primera etapa un sitio web que cumpla estándares de funcionalidad y de Diseño.
2.2.
Problema de investigación
El proyecto está destinado a
la implementación de un Sitio Web
para la empresa
EMPROSERVIS de la ciudad de Santo Domingo. Por tanto se pretende que la investigación de campo sirva de apoyo para determinar los requerimientos técnicos y conceptuales a implementar en dicho sitio, con la finalidad de fortalecer la comunicación y comercialización de productos y servicios empresa cliente y viceversa.
En conclusión, se cree que es necesario la creación de un Sitio Web que dé respuestas al problema de investigación que atraviesa la empresa al contar con un sitio web deficiente en funcionalidad y diseño, por lo que se plantean las siguientes interrogantes claves que guiaran el desarrollo del proyecto: ¿Qué información requieren conocer los clientes de EMPROSRVIS sobre la cartera de productos y servicios?
5
¿Qué modelo de sitio web se debe desarrollar en EMPROSERVIS para establecer un canal de comunicación comercial, empresa, clientes? ¿Qué elementos de diseño en un sitio web, se deben tener en cuenta a la hora de promocionar los productos de una empresa? ¿Cómo estructurar un documento que guie la gestión del sitio web de EMPROSERVIS?
2.3.
Justificación de la investigación
La construcción de un sitio web como canal de interacción para la comunicación comercial, debe enfocarse al intercambio de ideas entre cliente y empresa ya que su finalidad es realizar con éxito una venta, por lo tanto la información se selecciona de manera que el lenguaje se adapte al tipo de receptor, despertando en él, interés y una actitud previa de receptividad; esta propuesta de sitio web pretende ubicar a EMPROSEVIS como líder a nivel local y nacional.
Según Tuxtla Gutiérrez, Chiapas (2013) “Las empresas vinculadas a diversos sectores se incorporan cada vez más a las modernas tecnologías de la información y la comunicación (TIC), como parte de una estrategia empresarial. Una de las herramientas tecnológicas utilizadas en la actualidad son los sitios Web, ya que éste permite a la empresa ampliar su mercado y mejorar aspectos como la visibilidad e imagen de la misma.” Por tal razón como resultado de la integración de nuevas tecnologías entre empresas -usuarios, EMPROSERVIS requiere crear un sitio web como medio de comunicación comercial con miras a ampliar su cartera de clientes satisfaciendo sus necesidades de información mediante el ingreso, visita, conocimiento e interacción con la empresa por medio de la red.
6
Además se enfatiza la importancia del proyecto no solo como una forma de satisfacer las necesidades de la empresa también desde el ámbito académico es vital explorar esta temática ya que permitirá activar la línea de investigación denominada “Creación de Propuestas Interactivas Orientadas a la Generación de Aprendizaje significativos en el Entorno Social y Empresarial” de la escuela de Diseño de la PUCESD, a través del desarrollo de un trabajo real e investigativo que sea un legado para docentes y futuros estudiantes y profesionales del Diseño y la Comunicación Visual en Santo Domingo.
Lo anterior se complementa en la contribución del proyecto al Plan Nacional del Buen Vivir, objetivo 11, que manifiesta el “Establecer un sistema económico social, solidario y sostenible" mediante el desarrollo de un sitio web que permita establecer un canal de comunicación y comercialización de productos y servicios de la empresa, desde la preventa, venta, gestión del servicio al cliente hasta la postventa, y conjugue la funcionalidad con comunicación visual para satisfacer al usuario y producto de ello alcanzar una forma del buen vivir.
Para el cumplimiento de los objetivos de la Disertación de grado se cuenta con el apoyo de la empresa EMPROSERVIS, así como de la Escuela de Diseño de la PUCE SD en el marco de las asignaturas de IA3 e IA4 respectivamente, quienes a su vez serán los beneficiarios. El impacto de la propuesta que emanara el proyecto permitirá a corto plazo que la empresa cuente con un canal de comunicación comercial, a largo plazo el afianzar y potenciar los lazos con sus clientes, siendo esta una acción que conlleve a un futuro posicionamiento nacional.
Como conclusión se recalca que académicamente este proyecto de disertación de grado está encaminado a la obtención del título de Diseñadoras con Mención en Comunicación Visual por
7
lo que las investigadoras abordaron cada parte del proyecto de manera responsable y considerando la ética como eje para alcanzar los resultados.
2.4.
Objetivos de investigación
2.4.1.
Objetivo General
Crear
un
sitio
web
como
medio
de
comunicación
comercial
para
la
empresa EMPROSERVIS de la ciudad de Santo Domingo de los Tsáchilas, año 2014.
2.4.2.
Objetivos Específicos
Diagnosticar los requerimientos de información que necesitan los clientes de EMPROSERVIS respecto a sus productos y servicios, previo al proceso de compra. Determinar el diseño del sitio web que se desarrollará en EMPROSERVIS para el establecimiento de un canal de comunicación comercial, empresa, cliente. Validar el uso y función de los elementos del sitio web Elaborar un manual de uso del sitio web que permita su correcta gestión durante la implementación, seguimiento y control. (Ver Tabla No. 1)
8
1 TABLA
N
PREGUNTAS
OBJETIVOS
1
¿Qué información requieren conocer los clientes de EMPROSRVIS sobre la cartera de productos y servicios?
Diagnosticar los requerimientos de información que necesitan los clientes de EMPROSERVIS respecto a sus productos y servicios, previo al proceso de compra.
2
¿Qué modelo de sitio web se debe desarrollar en EMPROSERVIS para establecer un canal de comunicación comercial, empresa, clientes?
Determinar el diseño del sitio web que se desarrollará en EMPROSERVIS para el establecimiento de un canal de comunicación comercial, empresa, clientes.
3
¿Qué elementos de diseño en un sitio web, se deben tener en cuenta a la hora de promocionar los productos de una empresa?
Validar el uso y función de los elementos del sitio web
¿Cómo estructurar un documento que guie la gestión del sitio web de EMPROSERVIS?
Elaborar un manual de uso del sitio web que permita su correcta gestión durante la implementación, seguimiento y control
4
Titulo: Matriz de Relación NOTA: Elaborado por: Tutillo Miriam, Disney Vera
9
3.
MARCO REFERENCIAL
Como parte de la argumentación se exponen los aspectos teóricos que deben visibilizarse en el proyecto orientado al desarrollo de un Sitio web, que servirá como medio de comunicación comercial para la empresa EMPROSERVIS. El presente apartado está organizado en temas principales y secundarios que toman en cuenta las teorías, conceptos, contextos y metodologías de los temas más relevantes del proyecto, como: Diseño orientado a la web, La internet, WWW, Multimedia, Sitios Web, Proceso de desarrollo de un sitio web.
Se utilizó como fuentes de información bibliografía, documentales, revistas, lincografía, que ayudaron al conocimiento, búsqueda y acceso a la información, los mismos que aportaron con criterios de autores reconocidos dentro de la temática de estudio, tales como Robin Landan, Eduardo Bertoni, Joan Costa, Cristóbal Cobo entre otros. Por último, para una mejor usabilidad por parte del lector, se incorporaron a las secciones de información textual, contenidos gráficos y esquemas que ayudan a comprender los conceptos y estructura de la investigación planteada. (Ver Tabla No. 2)
10
2 TABLA
MARCOREFERENCIAL Creación De Un Sitio Web Como Medio De Comunicación Comercial De Productos Y Servicios De La Empresa Emproservis. DISEÑO ORIENTADO A LA WEB
LA INTERNET WWW (WORLD WIDE WEB)
MULTIMEDIA
05
SITIOS WEB
PROCESO DE DESARROLLO DE UN SITIO WEB
EMPROSERVIS
NOTA:
Tipos de elementos de multimedia
Páginas web Sitios estáticos Sitios Dinámicos Herramientas Objetivos Aspectos recomendados para el desarrollo de un Sitio Web. Navegabilidad Estilos de Página (CSS) Herramientas de Desarrollo para un sitio web Herramientas de apoyo para la creación de un sitio Web Programación Conceptualización Arquitectura de Software y hardware Diseño del mapa de navegación Diseño y construcción del interfaz web Prototipo Producto final
Historia del grupo “EMPROSERVIS” Misión Visión Valores corporativos Portafolio de productos y servicios Líneas de negocio
Titulo: Marco Referencial Elaborado por: Tutillo Miriam, Disney Vera
A continuación como antecedentes se presenta empresas que comercializan sus productos y servicios a nivel local, nacional e internacional a través de un sitio web.
11
3.1.
Rancho San Fernando.
Es un club de reconocido prestigio local y nacional, que ha manteniendo la vanguardia de un servicio de excelente calidad, que da a conocer sus instalaciones a través de un canal online por el cual se puede apreciar servicios tales como: laguna, sala de eventos, canchas de fútbol, de tenis, piscina, restaurante, bares y mucho más. A continuación se presenta el sitio web como ejemplo de buen servicio, elegancia y confort. (Ver Figura No. 1)
La compañíaQUALITYVIP S.A. concibióy construyóduranteel año 2011, el Club RanchoSan Fernando,ubicadoen el kilómetro 7 de la vía Santo Domingo – Chone, con la finalidad de brindar a sus usuarios un ambiente de relajación, esparcimiento, diversión, encuentro con amigos, deportes al aire libre, en un área de 9396 metros cuadrados.
1 FIGURA Titulo: Antecedentes de Empresa Local NOTA: Fuente: http://www.rsf.ec/ Elaborado por: Tutillo Miriam, Disney Vera
3.1.1.
Análisis del Sitio Web
El Club Rancho San Fernando brinda una dinámica relación entre las necesidades de sus socios y los servicios prestados, por ende la creación del sitio web es factible para la comunicación directa entre cliente-empresa. También es importante destacar la creatividad, simplicidad y elegancia con la que cuenta el sitio web que a su vez brinda una experiencia maravillosa de principio a fin, transmitiendo información de manera clara, elegante y bien estructurada.
12
3.2.
Toyota
Toyota con 54 años en Ecuador se ajusta a los requerimientos y demandas de un país en desarrollo, el cual se orienta a tecnología, la misma que ha sido beneficiada para estrechar lazos de comunicación alrededor del mundo. A continuación se presenta el sitio web, el cual da a conocer información referente a la empresa y a los productos en línea. (Ver Figura No. 2)
El 18 de mayo de 1966 se funda Autoamérica S.A. con el objeto social de importar, distribuir y comercializar repuestos y partes para diferentes tipos de vehículos de la industria automotriz.
2 FIGURA Titulo: Antecedentes de Empresa Nacional NOTA: Fuente: http://www.rsf.ec/ Elaborado por: Tutillo Miriam, Disney Vera
3.2.1.
Análisis del Sitio Web
Al interactuar con el sitio web se ve reflejado la confianza que este trasmite, así mismo conserva la estética, elegancia y dinamismo entre usuario-empresa, además es importante rescatar la calidad de elementos multimedia con los que cuenta el sitio. Todos estos atributos permiten al usuario, navegar e interactuar de manera clara y ordenada.
13
3.3.
Apple
Es una empresa multinacional estadounidense que diseña y produce equipos electrónicos y software, además ofrece servicios de alta calidad en tecnología que brinda estilos de vida saludables. Con el desarrollo de la tecnología se ha establecido diferentes medios de comunicación, uno de ellos es el Sitio Web, A continuación se presenta la página de APPLE, considerado una de las mejores empresas en diseño, elegancia y tecnología. (Ver Figura No. 3)
Apple Computer, Inc., es una empresa estadounidense de tecnología informática fundada en 1976 por Steve Jobs y Steve Wozniak. 3 FIGURA Titulo: Antecedentes de Empresa Multinacional NOTA: Fuente: http://www.rsf.ec/ Elaborado por: Tutillo Miriam, Disney Vera
3.3.1.
Análisis del Sitio Web
Apple cuenta con un diseño impecable en su sitio web hace referencia al arte contemporáneo a través del movimiento Post- minimalismo, transmitiendo elegancia y simplicidad, además cuenta con un mapa de navegación claro y sencillo, que permite al cibernauta interactuar con el sitio.
14
3.4.
Diseño orientado a la web
El diseño gráfico es el desarrollo y ejecución de mensajes visuales que contemplan aspectos informativos, estilísticos, de identidad, de persuasión, tecnológicos, productivos y de innovación. Además se lo considera como una disciplina “multidisciplinaria” porque es una profesión imprescindible para el funcionamiento y proyección de grandes ideas para luego materializarse.
Dentro del campo de diseño existen diferentes áreas entre las cuales se encuentra: Editorial, Envase y embalaje, Fotografía, Ilustración, Imagen corporativa, Señalética, Exposiciones, Multimedia y Diseño Web. Sin embargo con el pasar del tiempo el desarrollo tecnológico, las telecomunicaciones, internet e información han ido evolucionando, guiando a las empresas a establecer canales de comunicación mediante el uso de las TICS.
Uno de los canales de comunicación es el sitio web, que consiste en estructurar elementos gráficos para expresar estéticamente la identidad visual de una empresa. Así mismo en la construcción de un sitio web el diseño gráfico aporta criterios conceptuales, estéticos, creativos y comunicativos que le otorgan identidad visual a empresa en el proceso de comercialización de productos y servicios desde la preventa, venta, gestión del servicio al cliente hasta la postventa, conjugando así funcionalidad con comunicación visual en la comercialización en el internet.
Hidalgo, (2007) afirma: El diseño web, es una actividad que consiste en planificación, diseño e implementación de sitios web y pagina web. Requiere tener en cuenta la
15
navegabilidad, interactividad, usabilidad, organización de la información y la interacción de medios con el audio, texto, imagen y video. Es una amplia área de aplicación del diseño gráfico en la cual se integran conocimientos propios del diseño como son la composición, el uso de color y la tipografía, con conocimientos técnicos del medio como son el lenguaje de programación. La unión de un buen diseño con una jerarquía bien elaborada de contenidos, aumenta la eficiencia del sitio web, como canal de comunicación. (p.26)
3.5.
La Internet
Yanguas, J (2012) afirma: “Internet tiene sus orígenes en el año 1969 con el nacimiento de ARPANET(Advanced Research Projects Agency Networks), una red construida con el fin de interconectar los ordenadores de varias universidades de los EEUU, que posteriormente se convirtió en un proyecto militar”(p.90). Actualmente es un conjunto de redes de varias empresas interconectadas; denominado a cada una de esas redes Sistemas Autónomos.
Es una red informática mundial, formada por la conexión directa entre computadoras u ordenadores mediante un protocolo especial de comunicación que se encuentran distribuidas alrededor del mundo, a través de esta red se puede acceder a información en un entorno multimedia por medio de páginas, sitios o software. Internet más que una tecnología es un medio de comunicación, en la cual las computadoras comparten el mismo protocolo es decir que hablan el mismo lenguaje para contactarse con otras máquinas. Internet utiliza protocolos para llevar a cabo las comunicaciones, está compuesta por un conjunto de redes locales conectadas entre sí por medio de un ordenador que se encuentra en cada red. En la actualidad, es un medio de comunicación pública y autosuficiente en términos económicos, accesible a
16
cientos de millones de personas además tiene como beneficio ampliar los conocimientos sobre algún tema en particular.
3.6.
WWW (World Wide Web)
Hidalgo, P (2007) afirma: “La World Wide Web es un sistema de navegador web que sirve para extraer elementos de información” (p, 10). Es la distribución de información basada en hipertexto o hipermedios enlazados y accesibles a través de Internet, además es la forma más moderna de ofrecer información y el medio más potente. Sin embargo se puede referir a una web como página, sitio o conjunto de sitios que son accesibles a través de un navegador que es un software o programa capaz de interpretar de manera gráfica o visible la información que se obtiene del Internet.
3.6.1.
Evolución de la World Wide Web
Jenkins, (2008) afirma: “En la década de los 90 empezaran a proliferar las páginas webs, la Word Wide Web creada por el programador inglés Tim Berners-Lee en 1989 en el CERN.” El avance tecnológico ha permitido la evolución en la web. A continuación mencionaremos las etapas de acuerdo a su evolución.
3.6.1.1. Web 1.0: Web estática Se denominan webs estáticas y no permiten la interacción del usuario, sin embargo permitía leer información pero no cambiar o aportar contenidos, su tecnología se asocia a HTML, GIF y su discurso es lineal (Emisor- Receptor). (Ver Tabla No. 3).
17
3 TABLA
WEB 1.0 (1995-2000) Titulo: Web Estática NOTA: Fuente: http://nalole81.blogspot.com/2009/10/web-1-web-2-web-3.html Elaborado por: Tutillo Miriam, Disney Vera
3.6.1.2. Web 2.0: La Web dinámica Se denominan webs estáticas y no permiten la interacción del usuario, sin embargo permitía leer información pero no cambiar o aportar contenidos, su tecnología se asocia a HTML, GIF y su discurso es lineal (Emisor- Receptor). (Ver Tabla No. 4).
4 TABLA
WEB 2.0 (2000-2007) Titulo: Web Dinámica NOTA: Fuente: http://nalole81.blogspot.com/2009/10/web-1-web-2-web-3.html Elaborado por: Tutillo Miriam, Disney Vera
3.6.1.3. Web 3.0: La Web semítica Son plataformas o herramientas online que permite la conversación e interacción entre usuarios, se refiere al uso de un lenguaje más natural en la red, donde las personas se conectan a aplicaciones que les permite enriquecer conocimientos, experiencias, a través de redes sociales entre otros. (Ver Tabla No. 5)
18
5 TABLA
WEB 3.0 (2007-2015)
Titulo: Web Semántica NOTA: Fuente: http://nalole81.blogspot.com/2009/10/web-1-web-2-web-3.html Elaborado por: Tutillo Miriam, Disney Vera
3.7.
Multimedia
Ojeda, N (2012) afirma: “La multimedia puede definirse como una combinación de informaciones visuales y auditivas , presentadas de manera secuenciada, ya sea estática o dinámica, coordinadas por medio de la computadora u otros medios electrónicos” (p.45).
Consiste en el uso de varios medios para presentar información. Estos medios pueden ser texto, gráficas, audio y video que pueden ser incluidos en las páginas web, mediante hipervínculos, que se combinan con el ordenador para formar una presentación que permita la visualización del usuario. Es importante mencionar que la multimedia permite enriquecer la experiencia del usuario o receptor, logrando una comprensión más fácil y rápida referente a la información presentada. A continuación se detallan Tipos de Elementos Multimedia (Ver Tabla No. 6)
19
6 TABLA
TIPOS TEXTO GRÁFICOS IMÁGENES ANIMACIONES VIDEO AUDIO
FORMATOS
LINEAL E HIPERTEXTO
Titulo: Tipos de Multimedia NOTA: Fuente: http://wiki-tic-cervantes.wikispaces.com/Multimedia+Tipos+de+informacion+multimedia Elaborado por: Tutillo Miriam, Disney Vera
3.7.1.
Tipos de elementos multimedia
Texto: Códigos digitales que son la forma habitual de comunicación entre personas y ordenadores. Gráficos: Se representa a través de esquemas, planos, dibujos lineales que contienen una semántica que debe ser interpretada antes de presentar la información al observador. Imágenes: Son documentos formados por píxeles, cuando se hace referencia a imagen nos referimos a mapa de bits. Animación: Es la presentación de un número de gráficos por segundo que genera en el observador la sensación de movimiento. Vídeo: Pueden ser sintetizadas o captadas, se basan en la técnica de imágenes consecutivas y en las técnicas de interpolación Sonido: Es un ruido que puede ser representado mediante el habla, música u otros sonidos.
20
3.8.
Sitios Web
Es el Conjunto organizado y coherente que tiene como función ofrecer, informar, publicitar o vender contenidos, productos y servicios al resto del mundo. Es una combinación de Páginas Web y archivos que se visualizan como una unidad de presencia Web bajo el mismo nombre de Dominio. (Viteri J, 2010, p. 1)
Es un conjunto de archivos electrónicos y páginas Web que se accede por medio de un software denominado navegador que incluye una página inicial de bienvenida, generalmente denominada home page, con un nombre de dominio y dirección en Internet, estos pueden ser de diversos géneros como: sitios de negocios, servicio, comercio electrónico en línea, imagen corporativa, entretenimiento y sitios informativos.
3.8.1.
Hosting
Es un servicio que se presta para alojar webs, bases de datos, aplicaciones y correo electrónico a través de servidores que mantienen esta información en Internet disponible todo el tiempo.
3.8.1.1. Tipos de Hosting A continuación se detallan las ventajas y desventajas de los tipos de Hosting (Ver Tabla Nº 7).
21
7 TABLA Ventajas
TIPOS DE HOSTING
HOSTING GRATUITO
1
• Gratis
HOSTING COMPARTIDO
2
• Precio bajo • Administrado
HOSTING RESELLER
3
• Beneficios • Precio
Desventajas
• Muy Limitado • Fiable • Incorporan Publicidad • No puedes instalar programas • Compartes recursos • Vecinos que pueden perjudicar
• No administrado • Responsabilidad ante terceros
4
• Precio aceptable • Escalabre • Puedes instalar aplicaciones • Alta disponibilidad
• No administrado
5
• Puedes instalar aplicaciones
• No administrado • Precio alto • Poco escalable
HOSTING EN LA NUBE
6
• Precio • Escalable • Seguridad • Transparencia
• Poco difundido • Sin geolocalización
HOSING O COLOCACIÓN
7
• Precio en grandes volúmenes
• No administrado • Personal cualificado • Servidores propios
SERVIDOR VIRTUAL DEDICADO
SERVIDOR DEDICADO
Titulo: Ttipos de Hosting/ Ventajas y Desventajas NOTA: Fuente: http://carlosherreroa.es/tipos-de-hosting-ventajas-desventajas/ Elaborado por: Tutillo Miriam, Disney Vera
3.8.2.
Dominio
Es la dirección que brinda la localización única de un Sitio Web, además es el factor principal por medio del cual los motores de búsqueda encuentran el sitio.
Los dominios poseen una estructura y una sintaxis propia. Las partes estructurales están separadas por un punto. (Ver Tabla No 8)
22
8 TABLA EL TIPO Identifica la finalidad del sitio
PAÍS
http://www.me.gov.ar EL PREFIJO www no es en realidad parte del dominio sino que es la clave que le indica al navegador que visitaremos a una página web.
EL NOMBRE Es el cuerpo principal del dominio, o sea la palabra que se denomina nuestra página web.
Titulo: Parte del Dominio del Sitio Web NOTA: Fuente:http://escritorioalumnos.educ.ar/datos/recursos/arquitectura_web_1.pdf Elaborado por: Tutillo Miriam, Disney Vera
Existen varios tipos de identidad pero los más comunes son: com: Identifica páginas comerciales. gov: Identifica páginas gubernamentales. org: Identifica páginas de organizaciones no gubernamentales. edu: Identifica páginas con fines educativos. net: Identifica páginas relacionadas con internet y telecomunicaciones.
3.8.3.
Páginas Web
Se define como un documento electrónico que se presenta a manera de texto, imágenes, sonidos, videos entre otros y puede ser accesible mediante el uso de navegadores. La página
23
web forma parte de una lista de elementos que se conoce como sitio web, su creación y desarrollo se realiza bajo un lenguaje de programación capaz de ser interpretado a través de los navegadores de internet.
3.8.4.
Sitios Estáticos
López, Jiménez, Verde & Sánchez (2012) afirman: “Este tipo de aplicaciones suele realizarse utilizando el lenguaje HTML exclusivamente para la organización visual de la información” (p, 16). Además permite exponer textos, imágenes, videos, es una opción para aquellos que simplemente ofrecen la descripción de su empresa.
La principal ventaja de este tipo de páginas es lo económico que pueden resultar, sin embargo pueden con toda seguridad llenar las expectativas deseadas, con un diseño elegante, moderno y funcional incluyendo las imágenes y el texto con el cual se desea mantener informados a nuestros clientes en todo momento. (Ver figura No. 4)
4 FIGURA Titulo: Pagina Web Estática NOTA: Fuente: http://www.sativajardiners.com/ Elaborado por: Tutillo Miriam, Disney Vera
24
3.8.5.
Sitios Dinámicos
López, Jiménez, Verde & Sánchez (2012) afirman: “Los lenguajes involucrados en este tipo de aplicaciones incluyen, entre, otros, HTML, CSS, o las múltiples variaciones de JavaScript” (p, 16). El término dinámico hace referencia a que la página web se construye al momento en que es visitada por el usuario. Es decir, su contenido no es fijo, se construye de acuerdo a la interacción con el usuario.
Sus ventajas y posibilidades son infinitas, con este tipo de página se puede hacer todo lo que se desee, desde una simple web informativa, hasta una potente herramienta de trabajo variada en contenido dinámico, además puede ser manipulada y actualizada incluso por el propietario de la web sin la intervención de un programador. (Ver Figura No. 5)
5 FIGURA Titulo: Pagina Web Dinámica NOTA: Fuente: http://mikedascola.com/ Elaborado por: Tutillo Miriam, Disney Vera
25
3.8.6.
Herramientas
El desarrollo de sitio web existen herramientas que ayudan en su creación, y se especializan en diferentes áreas el diseño, maquetación y programación. Todas las herramientas que se utiliza son de gran importancia para su proceso de creación. (Ver Tabla No. 9)
9 TABLA HERRAMIENTAS ADECUADAS PARA EL DISEÑO Y DESARROLLO DE UN SITIO WEB 0.1
0.2
DISEÑO
0.3 PROGRAMACIÓN CLIENTE
MAQUETACIÓN
Consiste en la conceptualización, bocetaje y finalmente la utilización de herramientas graficas como Ilustrador, Photoshop.
Consiste en convertir los esbozos en plantillas en HTML. 0.4
PROGRAMACIÓN SERVIDOR Se desarrolla junto a un lenguaje de servidor, como puede ser PHP, ASP .
Consiste básicamente en la programación de Javascript. 0.5
DEPURACIÓN
Consiste en revisar y analizar si la sintaxis de un programa creado es correcta o genera errores al ejecutarlo.
Titulo: Herramientas NOTA: Fuente:Fuente:http://www.webtaller.com/maletin/articulos/herramientas-adecuadas-diseno-desarrollo-sitio-web.php Elaborado por: Tutillo Miriam, Disney Vera
3.9.
Objetivos del Sitio Web
3.9.1.
Accesibilidad
Según Segovia, C (2008) afirma: “Accesibilidad significa proporcionar flexibilidad para acomodarse a las necesidades de cada usuario y sus preferencias” (p, 24). Se refiere a la capacidad de acceso a la web y a todos sus contenidos, sin embargo no solo implica la necesidad
26
de facilitar acceso, sino también la de facilitar el uso y accesibilidad para todos los usuarios. En definitiva, se hace referencia a un diseño que va a permitir que los usuarios puedan percibir, comprender, navegar e interactuar con la Web, aportando a su vez contenidos, pero también es importante preguntarse ¿Por qué debe ser mi página web accesible? . A continuación ventajas de la accesibilidad web. (Ver taba No. 10)
10 TABLA ACCESIBILIDAD WEB
Simplifica El Desarrollo Web. Aumenta El Público Objetivo.
Ahorra Costes.
Mejora El Acceso En General.
Objetivo
Mejora La Usabilidad De Las Páginas Web.
Facilita La Independencia De Dispositivo
Mejora La Indexación De La Página Web En Buscadores.
Titulo: Ventajas de la Accesibilidad Web NOTA: Fuente: Julián Camarillo-Accesibilidad Web. Elaborado por: Tutillo Miriam, Disney Vera
Finalmente las ventajas de la accesibilidad web nos aproximan a la nueva evolución de la red, la web 2.0. Es necesario que nuestro diseño web se adapte a los nuevos estándares y modelos establecidos, que ofrece un nuevo concepto de red de redes y una nueva forma de acceso a la información.
3.9.1.1. Usabilidad. Según Manchón, Savall & Cuenca. (2008) afirman: “Se define coloquialmente como facilidad de uso, ya sea de una página web, una aplicación informática o cualquier otro sistema que interactúe con un usuario.” Es un atributo de calidad que hace referente a la
27
claridad y elegancia con que se diseña la interacción de un sitio web, que permite interactuar de una forma más fácil, cómoda e intuitiva.
3.9.1.2. Interactividad Según Rost, A (2011) afirma: “Funciona como puente semántico entre medios y lectores en el entorno digital. Permite analizar las posibilidades de participación de los usuarios en el medio, ya sea en la selección de contenidos como en las opciones de comunicación.” También es importante mencionar que para convertir un sitio web interactivo han surgido lenguajes específicos de programación, que permite al usuario interactuar con el sitio.
3.9.1.3. Navegabilidad. Teknokultura (2008) afirma: “Capacidad que tiene el usuario de desplazarse por un sitio web” (p, 5). Para lograr este objetivo se debe considerar aspectos fundamentales, debe ser clara, sencilla, comprensible, que ofrezca al usuario una experiencia satisfactoria. Lograr una navegabilidad óptima es una tarea complicada, pero cuando se consigue, el sitio alcanza un alto valor añadido. (Ver Tabla No. 11)
11 TABLA
NAVEGABILIDAD
WEB
LA ESTRUCTURA DEL SITIO
LA LOCALIZACIÓN EL CONTEXTO
Titulo: Navegabilidad Web NOTA: Fuente: Sebastián Otero, Carla Maglione- Arquitectura de sitio web Elaborado por: Tutillo Miriam, Disney Vera
3
1
2
28
3.10.
Aspectos recomendados para el desarrollo de un Sitio Web
3.10.1. Contenido Independientemente del programa, se usa para la creación de Sitios Web, éstas pueden contener los mismos elementos. Se componen por cabeza cuerpo y pie (Ver Figura No. 6). Cabeza.- Puede ser estática al momento de ser visualizada. Cuerpo.- Conformado por encabezado, texto y vínculos. Pie.- Contiene información muy concreta.
1
ENCABEZADO
2
3
CUERPO
PIÉ DE PÁGIN A
6 FIGURA Titulo: Contenido NOTA: Fuente: http://www.arteegusto.it Elaborado por: Tutillo Miriam, Disney Vera
Finalmente el pie que contiene información muy concreta. Se debe recalcar que una página es valiosa cuando se exhibe texto inédito que enriquece el conocimiento del lector.
29
3.10.2. Tipografía en la Web La tipografía tiene un papel importante en el proceso de comprensión acerca de los contenidos, además abarca todo lo referente a la información, pero a su vez no se habla tan solo de lo verbal sino también de líneas o figuras dentro de la composición, las fuentes se describen en términos de: forma, estilo, tamaño y color. Todos estos atributos se pueden utilizar como cualidades editables dentro de la etiqueta tipográfica.
3.10.2.1. Clases de tipografías o fuentes. Las tipografías o fuentes son fundamental en el diseño web, por ende se debe considerar aspectos como: tamaño, color, alineación. Existen dos clases de fuentes como son las Serif y Sans-Serif. (Ver tabla No. 12)
12 TABLA Fuentes con terminaciones, generalmente son utilizadas para bloques de textos grandes en el diseño editorial.
SERIF
Fuentes sin terminaciones, son utilizadas para texto cortos ya sea títulos, subtítulos o frases.
SANSSERIF
Aa
Georgia
Aa
Times New Roman
Aa Arial
Aa
Impact
Titulo: Clase de Tipografías NOTA: Fuente: Julián Camarillo-Accesibilidad Web. Elaborado por: Tutillo Miriam, Disney Vera
3.10.2.2. Tamaño de texto Para determinar el tamaño del texto puede ser a través de porcentajes o establecer un fontsize básico para el documento y utilizar tamaños como: (Ver tabla No. 13)
30
13 TABLA
ABSOLUTO
%
EM
PX
PT
xx-small
-5em
50%
9px
9pt
x-small
-7em
70%
12px
12pt
small
-9em
90%
14px
14pt
medium
1em
100%
18px
18pt
large
1.5em
150%
24px
24pt
x-large
2em
200%
36px
36pt
xx-large
3em
300%
48px
48pt
Titulo: Tamaño de Texto NOTA: Fuente: http://mejoreslinks.masdelaweb.com/color-y-tamano-de-texto-pequeno-en-html/ Elaborado por: Tutillo Miriam, Disney Vera
Es importante señalar que en diseño no es estético utilizar variedades de fuentes ya que esto ocasionaría dificultad hacia los usuarios y no asimilaran completamente el contenido.
3.10.3. Alineación de texto Uno de los puntos importante en la implementación del texto es que sea claro y conciso, por eso se debe convertir la disposición del texto a un formato agradable. El texto justificado muchas veces resulta mas estetico sin embargo se debe tener precausiòn con las lineas encogidas o muy separadas. (Ver tabla No. 14)
14 TABLA
El primer tipo de alineacion que nos ofrece la barra de herramienta formato es la alineacion IZQUIERDA que es la que estamos utlizando en este fragmento
El primer tipo de alineacion que nos ofrece la barra de herramienta formato es la alineacion CENTRADA que es la que estamos utlizando en este fragmento
El primer tipo de alineacion que nos ofrece la barra de herramienta formato es la alineacion DERECHA que es la que estamos utlizando en este fragmento
El primer tipo de alineacion que nos ofrece la barra de herramienta formato es la alineacion JUSTIFICADA que es la que estamos utlizando en este fragmento
Titulo: Alineación de Texto NOTA:
Fuente: http://www.ite.educacion.es/formacion/materiales/180/cd/m2_04/barra_de_herramientas_formato.html
Elaborado por: Tutillo Miriam, Disney Vera
31
3.10.4. Gama cromática de la interfaz web Es sustancial la utilización de la gama cromática en la web, principalmente para que el usuario con una visita y en cuestión de segundos decida si se queda o no dentro en la página, afortunadamente podemos a través del color transmitir sensaciones, emociones, atracción o rechazo. Dentro de la gama cromática el modelo RGB es el adecuado para representar imágenes que posteriormente serán visualizadas en monitor. (Ver Tabla No. 15).
15 TABLA GAMA CROMÁTICA DE LA INTERFAZ WEB
+ R
+ G
Iniciales (R= red, G= green, B=blue), son los colores luz que se utilizan en la interfaz Web. La suma de los tres colores, en la misma proporción, forma el color luz blanco. Y las combinaciones de rojo, verde y amarillo forman las distintas gamas de color.
= B
BLANCO
Titulo: Gama Cromática NOTA: Fuente: Xiomara Guerrero- Síntesis del color. Elaborado por: Tutillo Miriam, Disney Vera
3.10.5. Sobriedad Se define a sobriedad como un factor primordial, se refiere al equilibrio que guardan los elementos que compone la página. También permite que la lecturabilidad sea eficaz en los sitios web, por lo cual es importante espacios de descanso visual que faciliten la comprensión de información del usuario. (Ver Figura No. 7)
32
7 FIGURA Titulo: Sobriedad NOTA: Fuente http://blesen.com/wp-content/uploads/2012/08/web_girasol.jpg Elaborado por: Tutillo Miriam, Disney Vera
3.10.5.1. Uso de imágenes Las imágenes son utilizadas en diferentes clases, desde ilustraciones, diagramas, hasta multimedia, estas agradan y entretienen a los beneficiarios, sin embargo en la web es importante limitar los gráficos.
3.10.5.2. Peso de imágenes Al momento de hablar de imágenes lo que primero que se debe considerar es el tamaño y el peso en la web, porque mediante la imagen o fotografía se puede representar un fondo estético por ende este no debe estar pixelado, ni distorsionado al momento de ser visualizado en la Web. (Ver figura No. 8)
33
8 FIGURA Titulo: Peso de Imagenes NOTA: Fuente http://i.emezeta.com/weblog/optimizar-imagenes/peso-imagenes-pagina-web.png Elaborado por: Tutillo Miriam, Disney Vera
Según Gonzales. (2010) “Al reducir de peso las imágenes (de mapa de bits) hacemos que tengan menos bytes y, por tanto, que: Ocupen menos espacio en un dispositivo de almacenamiento.” (Ver Figura No. 9)
9 FIGURA Titulo: Mapa de Bits NOTA: Fuente http://androidayuda.com/content/uploads/2012/09/pixel-1.jpg Elaborado por: Tutillo Miriam, Disney Vera
34
3.10.5.3. Formato de imágenes Dentro del sitio web es recomendable utilizar siempre el formato JPG para fotografías, o a su vez el formato del GIF para un adecuado tamaño del archivo, es necesario que la resolución de la imagen este comprimida para no perjudicar la calidad de la fotografía. Es importante mencionar que la imagen debe ser en alta de resolución. (Ver Figura No. 10)
JPG
Formatos que son útiles para manipular imágenes con bloques de colores planos.
Formato que sirve para manipulary compartir archivos de imagen de tipo fotográfico.
GIF
10 FIGURA Titulo: Formato de Imágenes NOTA: Fuente h ttp ://c a r m e lita s tic .f ile s .w o r d p r e s s .c o m /2 0 1 2 / 1 1 /e je m p lo .p n g Elaborado por: Tutillo Miriam, Disney Vera
3.10.6. Botones e iconos Según Isin (2011,p.40) “Los botones e iconos gràficos son elementos exclusivos de las aplicaciones informàticas, en las que tienen basicamente la misiòn de capturar eventos realizados por el usuario para lanzar acciones de respuestas adecuadas”.
Su uso es la
representaciòn de opciones en el menu de navegaciòn y suelen estar formados por enlaces textuales . (Ver Tabla No. 16)
35
16 TABLA
BOTONES
Facebook Son parte esencial en el diseño de web y aplicaciones en general, sin ellos, los usuarios simplemente no sabrían dónde tienen que hacer
Google Twitter
Click para realizar diferentes operaciones.
Titulo: Botones NOTA: Fuente: http://webgenio.com/page/102/ Elaborado por: Tutillo Miriam, Disney Vera
3.11.
Navegabilidad
Las aplicaciones de multimedia se basan en la interacción del usuario con todos los elementos, de manera que se pueda acceder a la información. Entre los elementos interactivos se encuentran:
3.11.1. Menús despegables Son listas de instrucciones o elementos multimedia que se extienden en la pantalla para facilitar a elección del usuario, además utiliza poco espacio para las condiciones que estructuran un sitio web. (Ver Figura No. 11)
36
MENร S DESPEGABLES
Permite ordenar opciones en un reducido tiempo,es muy recomendable para webs de software. 11 FIGURA
Titulo: Menu Desplegables NOTA: Fuente http://www.pucesd.edu.ec/ Elaborado por: Tutillo Miriam, Disney Vera
3.11.2. Barra de desplazamiento Permite al usuario recorrer vertical o horizontalmente mediante barras que se encuentran ubicadas en la parte inferior de la pantalla, ademรกs permiten al usuario desplazarse por los contenidos de la pรกgina. (Ver Figura No. 12)
Constan de una barra horizontal o vertical con dos extremos con flechas que apuntan en sentidos contrarios. 12 FIGURA Titulo: Desplazamiento
NOTA: Fuente: http://www.pucesd.edu.ec/ Elaborado por: Tutillo Miriam, Disney Vera
37
3.11.3. Hipervínculos Son enlaces que conectan entre si diferentes elementos de una presentación multimedia. (Ver Figura No. 13)
13 FIGURA Titulo: Hipervínculos NOTA: Fuente: http://www.pucesd.edu.ec/ Elaborado por: Tutillo Miriam, Disney Vera
3.12.
Estilos de páginas (CSS)
La página CSS (Cascading Style Sheets) es un mecanismo que da descripción a como se muestra la información en la pantalla. Se utiliza para dar forma a documentos representado con HTML y XML.
38
3.13.
Herramientas de desarrollo para un Sitio Web
Programas que son de gran utilidad en la creación de un sitio web como: Dreamweaver, Joomla, Adobe Muse. (Ver Tabla No. 17)
17 TABLA
ADOBE DREAMWEAVER
Permite el diseño y edición de sitios web de forma gráfica y dispone de funciones para acceder al código HTML , y permite la conexión a un servidor, ademas soporta gran cantidad de tecnología y es fácil de usar.
JOOMLA
Es un sistema gestor de contenidos dinámico que permite crear sitios web de alta interactividad, profesionalidad y eficiencia, ademas permite modificar, agregar, o eliminar contenidos sin tener conocimientos técnicos conociendo Word o algún editor de textos.
ADOBE MUSE
Crea y publica sitios web dinámicos para ordenadores y dispositivos móviles, ademas no es necesario escribir el código. Aporta interactividad fácilmente, incluidas presentaciones de diapositivas, formularios y otros elementos.
Titulo: Herramientas de Desarrollo para un Sitio Web NOTA: Fuente: http://www.cidisoft.com.ar/pack2014/AdobeTotalCC8EspanolAgosto2014.htm Elaborado por: Tutillo Miriam, Disney Vera
3.14.
Herramientas de apoyo para la creación de un Sitio Web
Herramientas primordiales para el desarrollo del Sitio Web como: Ilustrador, Photoshop, Fhash. (Ver Tabla No. 18)
39
18 TABLA HERRAMIENTAS PARA EL DISEÑO DE PÁGINAS WEB. ADOBE PHOTOSHOP CS6
ADOBE ILUSTRATOR CS6
ADOBE FLASH CS6
Esta herramienta permite editar fotos y es dedicada para el retoque, tratamiento o manipulación de imágenes (mapa de bits)
Es una herramienta vectorial que representar símbolos, esquemas, dibujos lineales y crear una pieza gráfica completa de principio a fin.
Se basa en el lenguaje Script y permite realizar todo tipo de animación, está integrado con sonido, video e interactúa con una diversidad de contenidos completos.
Titulo: Herramientas de Apoyo NOTA: Fuente: http://www.adobe.com/ Elaborado por: Tutillo Miriam, Disney Vera
3.15.
Programación
3.15.1. Html El lenguaje HTML es uno de los puntales de la web. Desde hace más de dos décadas ejerce una función primordial en el proceso de distribuir información a través de internet, esta nueva versión del lenguaje básico de la web proporciona la inclusión de elementos multimedia. (Franganillo, 2011, p.261-265)
3.15.2. Php Cobo, Gòmez, Perez & Rocha. (2005) afirman: “Permite a los usuarios aprovechar las ventajas de estas tecnologías sin necesidad de tener grandes conocimientos sobre su
40
funcionamiento y sintaxis de los lenguajes” (p, 3). Es un lenguaje informático de código abierto que se utiliza para el desarrollo de sitios Web dinámicos, que puede ser incluido fácilmente dentro de HTML y habilita una serie de funcionalidades, esto ha permitido posesionarse como el preferido de los programadores web.
3.15.3. Java Script Cobo, Gòmez, Perez & Rocha. (2005) afirman: “Es un lenguaje interpretado basado en guiones que son integrados directamente en el código HTML” (p, 18). Es explicado en el cliente por el navegador al momento de cargarse la página, es multiplataforma, encaminada a eventos con manejo de objetos, cuyo código se incluye directamente en el mismo documento HTML. La aparición del JavaScript produjo una importante revolución, ya que dio al usuario la posibilidad de crear aplicaciones "on-line"
3.15.4. Asp Es una herramienta más reconocida para crear todo lo referente a la web basada en Windows, es eficientemente desarrollada para crear aplicaciones web interactivas con calidad profesional, estable y orientada a datos. Esta programación ha sido elaborada por programadores y diseñadores expertos en web.
3.15.5. Cold fusión Cobo, Gòmez, Perez & Rocha. (2005) afirman: “Es una tecnología desarrollada por Allarie, que en la actualidad pertenece a Macromedia” (p,22). Es un entorno de programación que tiene como objetivo crear aplicaciones dinámicas de Internet y acceder a bases de datos desde la
41
Web, mediante el uso de esta herramienta, se puede distribuir información, ya que permite conectar una base de datos al interior de una red más amplia, es importante mencionar que la programación es mínima, y genera páginas web dinámicas. La instalación de Cold Fusion es muy sencilla y similar a la de otros programas que usan una interfaz gráfica estándar.
3.16.
Proceso de desarrollo de un Sitio Web
3.16.1. Conceptualización Se detallan objetivos básicos y se establecen las características que tendrá la página, tanto en su contenido como en su estética. Podemos dividirla en cinco componentes: objetivos, público, contenidos, estructuras y visualización. Estos interactúan entre si y se condicionan mutuamente. (Ver Tabla No. 19)
19 TABLA
Titulo: Conceptualización NOTA: Fuente: http://www.aniel.es/desarrollo-web/conceptualizacion-web/ Elaborado por: Tutillo Miriam, Disney Vera
3.16.2. Diseño de mapa de navegación Se considera ideal maquetar los diagramas con todas las pantallas que tendrá el sitio, de esta manera será posible que diseñadores y desarrolladores tengan un manual concreto de trabajo,
42
a través del cual resuelvan todas las dudas de los elementos que compone la página web. No cabe duda que el trabajo resulta tedioso sin embargo su ventaja es que ningún elemento en las páginas quede puesto al azar sino que responde a necesidades precisas que se han detectado y que se resuelvan a través del mapa de navegación. (Ver Tabla No. 20)
20 TABLA Resultados
Buscador
Inicio Correo Electronico Empresa
Contacto
Productos
Carpetas Productos
Fotos Empresa
Gráfico Venta
Titulo: Mapa de Navegación NOTA: Fuente: http://www.limonpublicidad.com/diseno-web-granada-diagramacion-y-funcionalidades/ Elaborado por: Tutillo Miriam, Disney Vera
3.16.3. Diseño de construcción de la interfaz Web El diseño de la interfaz es importante porque hace referencia a la distribución de los elementos gráficos en la página del sitio web, y permite al usuario acceder a los contenidos, navegar e interactuar con el sitio además debe ser un diseño armónico que ayude a la afectividad de la comunicación.
43
Independientemente del programa que se use para la creación de páginas Web, éstas pueden contener los mismos elementos. (Ver Figura No. 14)
SECCIONES
IMÁGENES
FONDO BACKGROUND
ANIMACIONES
DESCANSOS VISUAL
ICONO
14 FIGURA Titulo: Diseño Y Estructura NOTA: Fuente: http://www.pucesd.edu.ec/ Elaborado por: Tutillo Miriam, Disney Vera
Icono.- Es un símbolo pequeño y de imagen fácilmente reconocible que permite acceder de manera rápida, precisa y sirve para activar un enlace. Secciones.- Permite a la página presentarse en diferentes escenas o secciones Imágenes.- La imagen es la representación visual de un elemento y capta la atención del usuario además brindan un lenguaje visual correcto.
44
Animaciones.- Es un proceso para dar sensación de movimiento que permite que la página sea dinámica e interactiva para el usuario causando mayor impacto en el mismo. Descansos visuales.-Son los espacios en blanco que permiten al usuario concentrar su atención en lo más relevante del sitio web y son lo que previenen la saturación de la página. Fondo/ Background: Son los colores que representan la identidad corporativa, pero cuando hablamos de fondo en los documentos HTML del diseño web se debe tomar en cuenta conceptos de legibilidad, usabilidad, accesibilidad.
3.16.4. Prototipo Es la representación limitada de un producto, que permite probar y explorar su uso, creando así un proceso de insistencia que genera calidad en el diseño, también son útiles para comunicar, discutir y puntualizar ideas entre diseñador-cliente, y además evalúan los productos, y clarifican requisitos de usuario.
3.16.5. Producto final Se ha tomado como ejemplo el sitio de la PUCESD. (Ver figura No. 15, 16, 17)
45
15 FIGURA Titulo: Producto Final NOTA: Fuente: http://www.pucesd.edu.ec/ Elaborado por: Tutillo Miriam, Disney Vera
16 FIGURA Titulo: Producto Final-estidos NOTA: Fuente: http://www.pucesd.edu.ec/index.php/estudios.html Elaborado por: Tutillo Miriam, Disney Vera
46
17 FIGURA Titulo: Producto Final-Nuestra Sede NOTA: Fuente: http://www.pucesd.edu.ec/index.php/nuestra-sede.html Elaborado por: Tutillo Miriam, Disney Vera
3.17.
Emproservis
3.17.1.
Historia del grupo “EMPROSERVIS”
El Grupo Empresarial Dueñas Gutiérrez fue fundado por el Señor José Dueñas Cedeño y su esposa, iniciando sus pasos en el año 1983 con la distribución de llantas y líneas afines para Santo Domingo, con el nombre de Súper Llanta. El negocio tuvo un crecimiento sostenido por la seriedad y efectividad en su gestión administrativa y comercial, lo cual permitió incrementar nuevas líneas de productos con cobertura nacional y representaciones directas con los fabricantes Super Dealer Cía. Ltda. Fue fundada para el manejo de la concesión de Ford Motor Company en Santo Domingo en el año 1995, luego esta marca fue reemplazada por la distribución e Importación de Camiones HINO. Los Centros de Servicio de Llanta Bridgestone se convirtieron en su segunda línea comercial como tiendas y tecnicentros multimarca para atender a nuestros clientes finales. En la actualidad cuenta con más de 634 distribuidores en
47
todo el país y tiene tres concesionarios, dos centros de colisiones y es la empresa de mayor crecimiento del Grupo enfocados al sector automotriz.
3.17.2. Misión Somos un Grupo Empresarial que importa y comercializa camiones, automóviles, repuestos, servicio post- venta, equipos de saneamiento ambiental, llantas, lubricantes y productos & servicios complementarios al sector automotriz, con calidad y excelencia.
3.17.3. Visión Consolidar al Grupo Dueñas Gutiérrez entre los primeros del sector automotriz en el Ecuador, con presencia internacional.
3.17.4. Valores corporativos Pertenencia Espíritu de equipo Responsabilidad Humildad Solidaridad Honor
48
3.17.5. Portafolio de productos y servicios En la línea de negocios EMPROSERVIS se encuentra divide en la exhibición y venta de vehículos Kia, Repuestos y talleres. Adicional a esto la empresa importadora de servicios automotrices cuenta con lubricantes, llantas, gasolineras, centro de servicio camionero.
3.17.6. Líneas de negocios Distribuidor de fábrica para todo el Ecuador de Lubricantes Valvoline Importador de llantas Bridgestone- Firesteone para todo Ecuador. Estacion de servicios Terpel Tecnicentro camionero Truck Stop.
49
4.
METODOLOGÍA DE LA INVESTIGACIÓN
La presente investigación aborda la construcción de un Sitio Web como medio de comunicación comercial para la empresa EMPROSERVIS de la ciudad de Santo Domingo. Para lo cual se empleó el enfoque cuantitativo en el proceso investigativo desde la recolección de datos estructurados hasta el análisis y presentación de los resultados que dio respuesta a las preguntas de investigación previamente planteadas.
4.1.
Diseño
El diseño que se aplicó en la investigación es no experimental- transversal, que corresponde al enfoque cuantitativo, pues no se someterá a los empleados de EMPROSERVIS a ninguna situación específica y mucho menos se influyó en su comportamiento para obtener los resultados. Además toda la investigación se realizó en un periodo determinado de tiempo, buscando analizar la situación problema, mediante técnicas pre estructuradas, que permitieron claridad y trasparencia en la información que se obtuvo. Cabe resaltar que los resultados de este trabajo pueden ser utilizados por los dueños de la empresa para mejorar el servicio y satisfacer adecuadamente las necesidades de los usuarios del Sitio Web.
4.2.
Tipo de investigación
El presente estudio se basa en la investigación correlacional, que requiere de un conocimiento profundo, la misma que tiene como propósito fundamental, mostrar o examinar la relación entre las variables de un problema, valiéndose de los instrumentos de recogida de datos, el análisis estadístico y las conclusiones de relación. Este tipo de investigación permitió
50
guiar al proyecto en la construcciĂłn del sitio web, aportando aspectos claves para la soluciĂłn al problema de investigaciĂłn.
4.3.
PoblaciĂłn / Universo
Se calcula que la poblaciĂłn estĂĄ compuesta aproximadamente por 634 distribuidoras a nivel nacional y 1.500 clientes directos, la suma de estos datos nos dan un total de 2.134 clientes, razĂłn por la cual es necesario calcular una muestra para poder trabajar con un nĂşmero mĂĄs reducido de la poblaciĂłn a investigar, siendo necesario calcular la muestra mediante la aplicaciĂłn de la siguiente formula.
−đ?‘ľ=
đ?’ đ?&#x;? đ?’™ đ?‘ˇđ?‘¸ đ?’†đ?&#x;?
SimbologĂa:
Remplazando: (1,96)2 đ?‘Ľ (0,5)(0,3) đ?‘ 0 = (0,05)2
N = tamaĂąo de la poblaciĂłn: 2.134 e = error mĂĄximo aceptable: 5%
đ?‘ 0 =
n = porcentaje estimado de la muestra: 50%
đ?‘ 0 =
1 - ∞ = Nivel de confianza: 95%
đ?‘ 0 =
384 đ?‘Ľ 0, 25 0,0025 0,96 0,0025
đ?‘ 0 = đ?&#x;‘đ?&#x;–đ?&#x;’
đ?‘› 384 384 384 đ?‘ 0 = đ?‘ 0 = đ?‘ 0 = 1 + 383 1 + 179 (đ?‘› − 1) (384 − 1) 1+ đ?‘ 1 + 2,134 2,134 0,179
đ?‘ 0 =
384 = 180 1,179
đ?‘ 0 = đ?&#x;‘đ?&#x;?đ?&#x;“.
51
Luego de aplicar la formula se obtuvo una muestra de 325. A continuación se presenta la estratificación de la muestra. (Ver Tabla No. 21)
21 TABLA Muestreo Estratificado Estrato línea de negocio
A
- Distribuidoras a nivel local.
B
- Comerciantes de Lubricantes Valvoline - Comerciantes de Llantas Briggestone -Firestone
C
Técnica de Investigación
Número
Encuesta Estructurada
- Lavadora de Carros. - Comerciantes de Repuestos. - Servicios Terpel.
NOTA:
100
Encuesta Estructurada
100
125
Observación Estructurada
Titulo: Muestreo Elaborado por: Tutillo Miriam, Disney Vera
Sustento: El tamaño de la muestra de cada estrato es proporcional al tamaño de la población del estrato si se compara con la población total, esto significa que cada estrato tiene la misma fracción de muestreo. Es importante mencionar que el estrato utilizado para la investigación son clientes que están inmersos con EMPROSERVIS, por este motivo se utilizó este tipo de muestreo estratificado. . (Ver Tabla No. 22)
22 TABLA Estrato
A
B
C
Tamaño de la población
100
100
125
Fracción del muestreo
1/2
1/2
1/2
Tamaño final de la muestra
50
50
63
NOTA:
Titulo: Muestreo Aleatorio Estratificado Proporcionado Elaborado por: Tutillo Miriam, Disney Vera
52
4.4.
Técnicas e instrumentos de recogida de datos
4.4.1.
Encuestas
Por tratarse de un diseño de investigación cuantitativo, se realizó dos tipos de encuesta que fueron realizadas en la ciudad de Santo Domingo en la Av. Esmeralda y Av. Quevedo. La primera fue dirigida a distribuidores de Santo Domingo que comercializan productos enfocados en la línea de Lubricantes Valvoline, Llantas Bridgestone-Firesteone con la finalidad de determinar el conocimiento de los habitantes de Santo Domingo acerca de Sitios Web y la segunda a distribuidores a nivel local, con el propósito de determinar la experiencia que han adquirido como clientes acerca de la comunicación comercial de productos y servicios que brinda Santo Domingo.
4.4.1.1. Instrumento El cuestionario es el instrumento que se utilizó para la encuesta el cual se elaboró a base de preguntas dicotómicas, este tipo de preguntas fueron de gran utilidad porque permitió identificar claramente la opinión de las personas a quienes se realizó las encuestas. También se aplicó preguntas politómicas que brindan una serie de opciones que permite identificar las preferencias por parte de la persona encuestada. Es importante mencionar que este tipo de preguntas sirvieron para profundizar sobre el uso de la internet y la comunicación comercial de productos y servicios a cerca de EMPROSSERVIS. (Ver Tabla No 23, 24)
53
23 TABLA
PONTIFICIA UNIVERSIDAD CATÒLICA
Sede Santo Domingo de los Tsachilas ENCUESTA DIRIGIDA A COMUNIDAD OBJETIVO: Determinar el nivel de conocimiento acerca de Sitio Web que tienen los habitantes de la ciudad Santo Domingo y determinar las dudas que existen con relación al tema. La presente encuesta, tiene como finalidad conocer la opinión acerca de los sitios web en la ciudad de Santo domingo. Se requiere sinceridad a la de responder las preguntas que posteriormente serán analizadas minuciosamente para un análisis estadístico, de ante mano se agrade su tiempo y comprensión. A continuación se detalla un concepto que servirá de apoyo en el desarrollo de la encuesta “Los sitios web son estrategias on-line que sirven como medio de comunicación comercial de productos y servicios para empresas de Santo Domingo”
Presentación e introducción al tema.
1. ¿CONOCE USTED QUE ES UN SITIO WEB? Preguntas de Introducción. 2. ¿CON QUÉ FRECUENCIA UTILIZA LA INTERNET? • • • •
A diario Semanalmente 1-2 veces por semana 1 vez al mes
POLITÒMICAS : Preguntas de varias alternativas.
3. SI TUVIERA QUE ELEGIR UNO DE LOS CANALES DE COMUNICACIÓN PARA NUTRIRSE DE LOS PRODUCTOS QUE EMPROSERVIS OFRECE. ¿CUÁL SERÍA?
Opción múltiple
• • • • •
Radio Tv Sitios web Prensa Publicidad Rodante.
4. ¿ AL MOMENTO DE INGRESAR A UN SITIO WEB QUE ES LO QUE MÁS LE LLAMA LA ATENCIÓN?
• • •
Calidad de Diseño Aspecto Formal Concepto
5. ¿ES CONVENIENTE QUE EMPROSERVIS UTILICE SITIO WEB COMO UN CANAL DE COMUNICACIÓN A SUS CLIENTES? DICOTÒMICAS: Indicadores SI o NO
Pregunta Cerrada Se obtiene respuestas específicas.
6. ¿CONOCE USTED EL SITIO WEB DE EMPROSERVIS?
Si su respuesta es SI, continuar con la pregunta numero 7, caso contratio se da por finalizada la encuesta 7. ¿COMO CALIFICA DEL 1 AL 10 LA COMERCIALIZACIÓN DE LOS PRODUCTOS QUE OFRECEN EMPROSERVIS POR MEDIO ON-LINE? • • •
NOMINALES ORDINALES
Pésimo Escasa informaciòn Poca interactividad
Se clasifica en un conjunto o categoría. Ordena los datos por jerarquías
DICOTÒMICAS Preguntas cerradas
NOTA:
Titulo: Estructura de la Encuesta Elaborado por: Tutillo Miriam, Disney Vera
54
24 TABLA
PONTIFICIA UNIVERSIDAD CATÒLICA
Sede Santo Domingo de losTsachilas ENCUESTA DIRIGIDA A COMUNIDAD OBJETIVO: Determinar la experiencia que han adquirido como clientes acerca de la comunicación comercial de productos y servicios que brinda la empresa en la ciudad de Santo Domingo. La presenteencuesta, tiene como finalidadconocer la opiniónacerca de los sitios web en la ciudad de Santo domingo.Se requieresinceridada la de responderlas preguntasque posteriormenteserán analizadas minuciosamente para un análisis estadístico, de ante mano se agrade su tiempo y comprensión. A continuación se detalla un concepto que servirá de apoyo en el desarrollo de la encuesta “Los sitios web son estrategias on-line que sirven como medio de comunicación comercial de productos y servicios para empresas de Santo Domingo”
Presentación e introducción al tema. Preguntas de Introducción.
1. ¿COMO ES LA ATENCIÓN QUE EMPROSERVIS LE HA BRINDADO DURANTE EL TIEMPO QUE HA SIDO CLIENTE?
Preguntas de Clasificación Preguntas Específicas Preguntas de Clasificación POLITÒMICAS: Preguntas de varias alternativas.
Opción múltiple
DICOTÒMICAS: Indicadores SI o NO Pregunta Cerrada Se obtiene respuestas específicas.
Excelente (
)
Buena (
)
Regular (
)
2. ¿QUÉASPECTOS TOMA EN CUENTA AL MOMENTO DE ELEGIR UNA EMPRESA?
Beneficios (
)
Marca (
)
Garantía (
)
3. ¿COMO CONSIDERA USTED LA COMERCIALIZACIÓN DE PRODUC TOS Y SERVICIOS QUE HA TENIDO EMPROSERVIS A LOS LARGO DE ESTETIEMPO? Excelente ( ) Buena ( ) Regular ( )
4. ¿QUÉ ES LO QUE MÁS LEAGRADA AL MOMENTO DE INGRESARA UN SITIOWEB? • • • •
Cromática Imágenes Contenido Animación
5. ¿CONOCE USTED EL SITIOWEB DE EMPROSERVIS Y COMO LO CALIFICARÍA? Si (
)
No (
)
Si su repuesta es si contestar
Excelente (
)
Buena (
)
Regular (
)
6. CONSIDERA USTED NECESARIO QUE LA EMPRESA DEBE MEJORAR LA DISTRIBUCIÓN DE SUS PRODUCTOS ON-LINE
7. QUÉ ESTRATEGIA CONSIDERA ADECUADA PARA MEJORAR LA COMUNICACIÓN CON LOS CLIENTES DE EMPROSE RVIS A TRAVÉS DEL SITIOWEB. • • •
Redes Sociales Canal deYouTube Galeria de Imagenes
8. QUE LE MOTIVA A SEGUIR DISTRIBUYENDO PRODUC TOS Y SERVICIOS DE EMPROSERVIS. • • • • •
Precios Servicio al cliente Garantía Experiencia Marca
NOMINALES Se clasifica en un conjunto o categoría. CLASIFICACIÓN Se obtiene respuestas específicas. DICOTÒMICAS Preguntas cerradas
NOTA:
Titulo: Estructura de la Encuesta Elaborado por: Tutillo Miriam, Disney Vera
55
4.4.1.2. Validación de las encuestas Se realizó dos tipos de encuesta una fue dirigida a comerciantes a nivel local y otra a Comerciantes de lubricantes Valvoline y llantas
Bridgestone. Para este proceso los
cuestionarios fueron validados por el Ing. Alex Venegas docente de la PUCESD quien cuenta con la experiencia necesaria en temas de investigación y además actualmente ejerce su trabajo en el área de administración. El docente menciono que el contenido metodológico cumple con todos los requisitos técnicos y académicos para continuar con el desarrollo de la presente disertación. Ver anexo validación (1) ficha y carta de respaldo. Figura (60) Pág. (128)
4.4.2.
Entrevista Estructurada
La entrevista se realizó en la empresa matriz de la ciudad de Santo Domingo al Ing. Diego Dueñas gerente de EMPROSERVIS, en la cual se mencionó las expectativas que el cliente tiene respecto al sitio web para la comercialización de productos y servicios que ofrece la empresa, lo cual aporto con información relevante en la elaboración brief.
4.4.2.1. Instrumento Para la entrevista se utilizó como instrumento un formato de preguntas de relato y específicas, estas se utilizó para conocer acerca de los requerimientos que debe llevar el sitio web. (Ver Tabla No 25)
56
25 TABLA
PONTIFICIA UNIVERSIDAD CATÒLICA
Sede Santo Domingo de los Tsachilas ENTREVISTA DIRIGIDA A GERENTE DE EMPRESA EMPROSERVIS OBJETIVO: Conocer acerca de los requerimientos que debe llevar el sitio web con la finalidad de aportar al usuario una página interactiva entre empresa-cliente.
DATOS DE LA EMPRESA
Presentación e introducción al tema.
Preguntas Específicas
Preguntas de Relato
NOMBRE DEL GERENTE Ing. Diego Dueñas E-mail Email: diego@duenas gutierrez.com
EMPRESA Emproservis TELÉFONOS 0994304092/02-3711000
1. ¿Cuál es el Público objetivo con el que desea comunicarse? Edad, género, lugar de origen, gustos, actitudes, estilo de vida. 2. ¿Cuándo le gustaría lanzar el sitio? Está trabajando en un marco de tiempo estricto o tiene una fecha de lanzamiento obligatoria
Preguntas Específicas
3. ¿Existe algún sitio web de referencia a lo que está buscando en cuánto a estética o funcionalidad?
Preguntas de Relato
4. ¿Tiene definida la estructura de contenidos y de qué tipo se trata? Nota Aclaratoria: Qué secciones tendrá el sitio y si el contenido serán textos, fotos o videos.
Preguntas de Relato
Preguntas de Relato Preguntas Específicas Preguntas de Relato
NOTA:
5. Especifique qué funcionalidades debe tener su sitio web (es decir: qué deben poder hacer los visitantes / usuarios, aparte de navegar por sus páginas y consultar su información?) Nota Aclaratoria: El diseño funcional consiste en las funcionalidades que el sitio web debe tener para sus usuarios, Ejemplos: registrarse en la web y acceder a información confidencial, hacer pedidos o solicitudes específicas desde formularios web, realizar pagos online, suscribirse a las novedades con su email, etc.
6. ¿Necesita fotografías, ilustraciones, videos o algún tipo de creatividad? 7. Indicar el nombre de dominio que desea vincular a su web (aclarando si ya lo tiene registrado o desea que nosotros gestionemos a su nombre su registro) 8. Indica si ya tiene un servicio de hosting (alojamiento web) contratado. ¿Tiene un presupuesto designado para este proyecto?
Titulo: Estructura de la Entrevista Elaborado por: Tutillo Miriam, Disney Vera
57
4.4.2.2. Validación de la Entrevista Previamente se validó el instrumento. Este proceso fue validado por el Ing. Alex Venegas docente de la PUCESD, quien luego de haber verificado el contenido metodológico valido los requerimientos técnicos para el desarrollo de la investigación. Ver anexo validación (1) ficha y carta de respaldo. Figura (60) Pág. (128)
4.4.3.
Observación estructurada
La observación estructurada se realizó a clientes de EMPROSERVIS que comercializan la línea de negocio como: Lavadoras de carros, comerciantes de repuestos, estación Terpel. En los cuales se observó aspectos claves sobre el manejo de la imagen institucional a nivel interno y externo, aplicaciones corporativas, página web, y otras que tengan influencia en su proceso de comercialización.
4.4.3.1. Instrumento Como instrumento se utilizó Fichas descriptivas pre-estructuradas en las cuales se destacan los detalles más importantes de la observación que facilitaron su posterior análisis. (Ver Tabla No 26)
58
26 TABLA
1. Existe el logotipo de la empresa en los locales que distribuyen los productos y servicios de EMPROSERVIS 2. La cromática del logotipo de la empresa estuvo presente en los locales 3. Se visualizó el uso de aplicaciones 4. Se observó la imagen institucional a nivel interno y externo
5. se observó la adaptación de la marca a diferentes soportes 6. La atención es agradable a la hora de interactuar con los dueños del local TECNOLOGÍA 1. Presencia de tecnología 2. Existe conexión a la Internet
NOTA:
Titulo: Observación Elaborado por: Tutillo Miriam, Disney Vera
4.4.3.2. Validación de la observación En la observación estructurada el proceso fue validado por el Mg. Cristóbal Mayorga docente y director de la Escuela de Diseño de la PUCESD que cuenta con la experiencia necesaria en el área de Diseño e investigación. Gracias a su aporte validó el uso correcto de la escala de Likert, para llevar acabo la identidad gráfica y posicionamiento que tiene EMPROSERVIS en la ciudad de Santo Domingo Ver anexo validación (2) ficha y carta de respaldo. Figura (61) Pág. (129)
4.5.
Técnicas de Análisis de Datos
Las técnicas para el análisis de datos facilitaron la investigación y comprensión de la información recabada.
59
Análisis Bibliográfico y documental: Sirvieron para seleccionar las ideas relevantes del marco referencial y parte de la metodología a fin de expresar su contenido sin ambigüedades. Análisis estadístico e interpretación de los datos: Permitió a través del software Excel, realizar una estadística descriptiva de las situaciones que se presentaron una vez realizada las encuestas.
4.6.
Plan de diseño para el Sitio Web
4.6.1.
Información
Por medio de las técnicas de investigación realizadas en el desarrollo del proyecto para la empresa EMPROSERVIS ubicada en la cuidad de Santo Domingo , y gracias a la experiencia personal de ser ciudadana de Santodomingueña, se recopiló toda la información necesaria que nos sirvió como marco referencial para la creación de un sitio web como medio de comunicación comercial, que permite establecer un canal de comercialización de productos y servicios, mediante el ingreso, visita, e interacción con la empresa por medio de la internet.
4.6.2.
Análisis y organización
Una vez obtenida la recopilación de información, se procedió al desarrollo de un análisis minucioso para determinar la conceptualización del sitio web en la cual se resalta los datos más relevantes que sirvieron para crear soluciones a través de brief, brainstorming y bocetaje, de esta manera se puede definir cuál es el diseño y construcción de la interfaz web más apropiada para la empresa EMPROSERVIS.
60
4.6.3.
Desarrollo del plan de diseño
Comprende tres fases principales a seguir para el diseño de un sitio web.
4.6.3.1. Conceptualización Se detallan objetivos básicos y se establecen las características que tendrá la página, tanto en su contenido como en su estética. Podemos dividirla en cinco componentes: objetivos, público, contenidos, estructuras y visualización. Estos interactúan entre si y se condicionan mutuamente satisfaciendo una necesidad determinada de forma exitosa,
logrando
concordancia entre los clientes y la empresa
4.6.3.2. Diseño y construcción del interfaz web. Hace referencia a la distribución de los elementos gráficos en las páginas del sitio web, y permite al usuario acceder a los contenidos, navegar e interactuar con el sitio además debe ser un diseño armónico que genere una comunicación efectiva entre el cliente y la empresa.
4.6.3.3. Prototipo. En esta fase, se procede a construir y presentar los prototipos que permitan probar y explorar su contenido, creando así un proceso de insistencia que genera calidad en el diseño, también son útiles para comunicar, discutir y puntualizar ideas entre diseñador-cliente, y además evalúan los productos, y clarifican requisitos de usuario.
61
4.6.4.
Implementación y control
Para que este proyecto
sea considerado
se realizó una “entrevista a profundidad”,
recopilando información en forma veraz, fidedigna y oportuna. Por otro lado para mantener un control después de la ejecución de este proyecto es necesario contar con un manual de usuario para uso del sitio web en la entidad empresarial, cuya función es proporcionar una herramienta completamente funcional que permita la interacción entre usuario- cliente y además que sirva como canal de comercialización de productos y servicios que ofrece EMPROSERVIS. (Ver Tabla No 27)
27 TABLA CREACIÓN DE UN SITIO WEB COMO MEDIO DE COMUNICACIÓN COMERCIAL DE PRODUCTOS Y SERVICIOS DE LA EMPRESA EMPROSERVIS DE LA CIUDAD DE SANTO DOMINGO DE LOS TSÁCHILAS, AÑO 2014. IMPLEMENTACIÓN Y DESARROLLO VALIDACIÓN INFORMACIÓN CONTROL Validación Prototipo
Modelo Mental Investigación situada en la ciudad de Santo Domingo Empresa EMPROSE RVIS.
Investigación CUANTI TATIVO
1.- Encuesta 2.- Entrevista 3.- Observación 4.- Frief
Control
Bocetaje - Digitalización Creación del Sitio Web
Validación del prototipo dirigida a profesionales del área de diseño.
Descripción Análisis Semiótico
Validación del prototipo dirigida al personal que forma parte de la empresa.
Semántico Sintáctico Pragmático
Manual de usuario del sitio web Diseño del navegación
Ajustes Presentación de producto final
RECURSOS DOCUMEN TOS Material bibliográfico y digital, folletos bitácora, útiles de oficina
NOTA:
RECURSOS TECNOLÓGICOS Computadora, cámara fotográfica, flash memori, impresora, filmadora
SOFTWARE Microsoft o ffice, Adobe CS6,
Titulo: Matrìz de Planificaciòn Elaborado por: Tutillo Miriam, Disney Vera
Ver anexo validación (3) ficha y carta de respaldo. Figura (62) Pág. (130)
mapa
de
62
5. 5.1.
Resultados
Análisis y Discusión de los resultados
Para organizar los resultados se ha establecido un proceso de diseño el cual está señalado en la metodología que ha sido especificado con etapas que permitieron guiar la investigación y el desarrollo de la propuesta. A continuación se presentan los resultados de la disertación de grado titulada “Creación de un Sitio Web como medio de comunicación comercial de productos y servicios de la empresa EMPROSERVIS de la ciudad de Santo Domingo de los Tsáchilas, año 2014” en el cual se puede visibilizar a través del proceso de diseño como se van alcanzando cada uno de los objetivos. (Ver Tabla No 28)
28 TABLA CREACIÓN DE UN SITIO WEB COMO MEDIO DE COMUNICACIÓN COMERCIAL DE PRODUCTOS Y SERVICIOS DE LA EMPRESA EMPROSERVIS DE LA CIUDAD DE SANTO DOMINGO DE LOS TSÁCHILAS, AÑO 2014. OBJETIVOS
RESULTADOS
Diagnosticar los requerimientos de información que necesitan los clientes de EMPROSERVIS respecto a sus productos y servicios, previo al proceso de compra.
NOTA:
5.2.
INFORMACIÓN
DESARROLLO
Determinar el diseño del sitio web que se desarrollará en EMPROSERVIS para el establecimiento de un canal de comunicación comercial, empresa, clientes.
VALIDACIÓN
Validar el uso y función de los elementos del sitio web
IMPLEMEN TACIÓN Y CONTROL
Elaborar un manual de uso del sitio web que permita su correcta gestión durante la implementación, seguimiento y control
Titulo: Matrìz de Planificaciòn Propuesta de Intervención Elaborado por: Tutillo Miriam, Disney Vera
Información
La investigación se ha realizado en la ciudad de Santo Domingo de los Tsáchilas en la empresa “EMPROSERVIS” bajo la muestra de 325 informantes divididos en estratos para la ejecución de las encuestas, entrevista y observación que dio como resultado final un diagnóstico de la empresa que guio el proceso de diseño del sitio web.
63
5.2.1.
Investigación
5.2.1.1. Encuestas Se determinó el nivel de conocimientos acerca de sitio web a los clientes de EMPROSERVIS, para ello se realizó el modelo de dos encuestas que fueron dirigida a diferentes clientes de la línea de negocio. Toda la información recolectada sirvió para obtener resultados estadísticos que representan diferentes puntos de vista de los clientes a nivel local.
Encuesta N.1.- Tabulación de encuesta para distribución a nivel local
29 TABLA Variable Excelente Buena Regular TOTAL
NOTA:
Número 40 50 10 100
Porcentaje 40% 50% 10% 100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
18 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 90% de clientes directos a nivel local comentaron lo satisfecho que se sienten por la atención brindada por parte de EMPROSERVIS, mientras un 10% consideran que la atención es regular.
64
30 TABLA Variable Beneficios M arca Garantia TOTAL
NOTA:
N úme ro 30 20 50 100
Porce ntaje 30% 20% 50% 100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
19 FIGURA
NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 50% de los clientes consideran que la garantía es primordial a la hora de elegir una empresa, mientras un 30% creen que los beneficios que ofrece la empresa son fundamental y un 20% elije la marca como razón principal.
65
31 TABLA V a ria ble Exce le nte B ue na R e gula r TO TAL
NOTA:
N ú m e ro 0 60 40 100
Po rc e nta je 0% 60% 40% 100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
20 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: Un 60% cree que es buena sin embargo recomienda mejorar la presentación de productos de la empresa, mientras un 40% considera que la comercialización es regular en los últimos tiempos.
66
32 TABLA Variable C romática Imágenes C ontenido
N úme ro 26 30 23 21 100
A n i m a ci ó n
TO TAL
NOTA:
Porce ntaje 26% 30% 23% 21% 100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
21 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 30% comentaron que las imágenes es importante a la hora de navegar en un sitio web ya que les permite visualizar detalladamente los productos, un 26% considera que la cromática y el contenido es lo que más llama la atención al momento de visitar un sitio web, mientras un 23% les agrada el contenido y a un 21% la animación.
67
33 TABLA
Variable Si No TO TAL
NOTA:
N 煤me ro 65 45 100
Porce ntaje 65% 45% 100%
Titulo: Tabulaci贸n Elaborado por:Tutillo Miriam, DisneyVera
22 FIGURA NOTA:
Titulo: Tabulaci贸n Elaborado por: Tutillo Miriam, Disney Vera
Interpretaci贸n: Se concluye que un 65% de clientes si conocen el sitio web de la empresa, mientras un 45% no lo conocen.
68
34 TABLA Variable Exce le nte B ue na R e gular TOTAL
NOTA:
N úme ro 0 15 55 65
Porce ntaje 0% 15% 55% 65%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
23 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: La mayor parte de los clientes manifestaron que el sitio web no es agradable y además no cuenta con acceso a redes sociales, también mencionaron sobre la falta ortográfica que existe, se concluye mencionando la poca información con la que cuenta la empresa.
69
35 TABLA
Variable SI No TO TAL
NOTA:
N úme ro 55 10 65
Porce ntaje 55% 10% 65%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
24 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: Un 55% manifestó que sería próspero mejorar la distribución on-line porque les ahorraría tiempo al momento de elegir los productos, mientras un 10% consideran que no es necesario mejorar.
70
36 TABLA Variable Redes S ociales C anal de YouTube Galería de imágenes TO TAL
NOTA:
N úme ro 40 15 10 65
Porce ntaje 40% 15% 10% 65%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
25 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 40% cree indispensable la conexión con redes sociales porque les permite estar informados a través de sus cuentas personales, por otra parte un 15% considera que sería bueno la incrementación de videos, mediante canales de YouTube y un 10% creen que la galería de imágenes es importante porque detallan y pueden ver las características de los productos que desean adquirir.
71
37 TABLA Variable Precios Servicio al cliente Garantía Experiencia Marca TOTAL
NOTA:
Número 10 35 20 20 15
Porcentaje 10% 35% 20% 20% 15%
100
100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
26 FIGURA
NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 35% de clientes consideran que el servicios al cliente son razones por las cuales continúan siendo parte de la empresa, mientras un 2O% comentan que la garantía y la experiencia han sido importantes en la distribución de productos, así mismo un 15% menciono sobre la importancia de la marca el prestigio de ser parte de EMPROSERVIS y un 10% en los precios.
72
Encuesta N.2.- Tabulación de encuesta a comerciantes de lubricantes valvoline y comerciantes de llantas Briggestone-Frirestone.
38 TABLA
NOTA:
Variable SI NO
Número 83 17
Porcentaje 83% 17%
TOTAL
100
100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
27 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: La investigación ha demostrado que un 83% conoce acerca de los sitios web, por esta razón es importante fortalecer la comunicación y comercialización de productos y servicios on-line entre empresa cliente y viceversa, sin embargo un 17% no identifica que son los sitios web, pero han navegado con frecuencia en la Internet.
73
39 TABLA
Variable
Número
Porce ntaje
A diario
68
82%
1-2 vece s por semana
12
14%
1 vez al mes
3
4%
TOTAL
83
100%
NOTA:
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
28 FIGURA
NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: Como conclusión podemos decir que un 82% de clientes navegan a diario en la internet por esta razón es necesario que EMPROSERVIS se una a estrategias on-line donde los clientes tendrán acceso de manera rápida a información a través de Smartphone, laptop, Tablet, SmartWatch etc. En estos tiempos los consumidores utilizan aplicaciones móviles comerciales y esto beneficia a empresas que quieren comercializar sus productos a través de la Internet, solo un 14% utiliza internet 1-2 veces por semana y un 4% una vez al mes.
74
40 TABLA V ariable
N úmero
Porcentaje
Radio
10
12%
Tv
17
20%
Sitios web
53
64%
Prensa
3
4%
Publicidad Rodante
0
0%
TO TAL
83
100 %
NOTA:
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
29 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 64% eligieron los sitios web como canal de comunicación porque son clientes que navegan diariamente en la web y les gustaría mantenerse informados de productos y servicios que ofrece la empresa, un 20% por televisión, mientras un 12% por medio de la radio y un 4% a través de la prensa y se concluye con un 0% de publicidad rodante.
75
41 TABLA
Variable Calidad de Diseño
Número 22
Porcentaje 23%
Aspecto Formal
35
35%
Concepto
26
27%
TOTAL
83
100%
NOTA:
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
30 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: Un 42% considera que lo más impactante en un sitio web es el aspecto formal de la página, y un 31% reflexiona que el concepto es indispensable, mientras que un 27% visualiza la calidad de diseño. Por esto se recomienda a EMPROSERVIS trabajar en un buen diseño que tenga equidad y además que resalte la marca que identifica a su empresa.
76
42 TABLA
NOTA:
Variable
Número
Porcentaje
Si
60
72%
No
23
28%
TOTAL
83
100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
31 FIGURA NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Interpretación: El 72% de los clientes están de acuerdo en un sitio web como canal de comunicación además esta estrategia mejoraría el proceso de comercialización de productos y servicios desde la preventa, venta, gestión del servicio al cliente hasta la postventa, mientras un 28% no lo considera oportuno.
77
43 TABLA
NOTA:
Variable
Número
Porcentaje
SI
54
54%
No
29
29%
TOTAL
100
100%
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
32 FIGURA
NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Resultado: Un 65% de los clientes a nivel local conoce el sitio web de la empresa y un 35% no lo conoce. El mejoramiento del sitio web de EMPROSERVIS innovaría a clientes a visitar y conocer acerca de las promociones de sus productos y esto sería de interés para quienes no lo conocen y les da la oportunidad de familiarizarse con el medio on-line.
78
44 TABLA
Variable
Número
Porcentaje
Poca Interactividad
31
62%
Es cas a Información
20
33%
Pés imo
3
5%
TOTAL
54
100%
NOTA:
Titulo: Tabulación Elaborado por:Tutillo Miriam, DisneyVera
33 FIGURA
NOTA:
Titulo: Tabulación Elaborado por: Tutillo Miriam, Disney Vera
Resultado: El 62% lo califica como un sitio web no interactivo entre empresa-cliente ya que no contiene galería de fotos, videos, e información de la empresa, mientras un 33% considera que el diseño no es estético y un 5% lo califica pésimo por la falta ortográfica que contiene el sitio web. Entonces EMPROSERVIS debe contar con un sitio web que cumpla estándares de funcionalidad y de Diseño dando la oportunidad de ampliar su cartera de clientes en la Provincia y el País.
79
Conclusiones de la encuesta Con la experiencia obtenida gracias a la investigación documentada se concluye afirmando que el 83% de la cartera de clientes con los que cuenta EMPROSERVIS tienen conocimientos del sitio web de la empresa, lo cual es favorable para la investigación y por otro lado reafirma la importancia de este tipo de estrategias para la comercialización. Se determinó que el 82% de los clientes navegan en internet diariamente, es decir tienen acceso a tecnología por lo cual es primordial aplicar estrategias on-line que sirvan para estrechar lazos empresa-cliente. El 72% de clientes consideran que es conveniente que EMPROSERVIS utilice un sitio web como canal de comunicación para el proceso de comercialización de productos y servicios desde la preventa, venta, gestión del servicio al cliente hasta la postventa. Se concluye afirmando que el 75% de clientes considera indispensable aplicar herramientas de comunicación como redes sociales porque les permite estar informados a través de sus cuentas personales, además incrementar el nivel de confianza hacia los productos y servicios que ofrece EMPROSERVIS.
5.2.1.2. Entrevista La entrevista estuvo guiada por el cuestionario que previamente fue validado y se encuentra en la parte de metodología. A continuación se presenta un estrato de los puntos más relevantes que se abordaron en la entrevista. Al finalizar con las técnicas de investigación fue necesario e indispensable la entrevista con el cliente, el Ing. Diego Dueñas gerente de EMPROSERVIS, quien supo describir sus
80
requerimientos de manera clara y explicando puntos importantes para la comodidad del usuario en el sitio web. ¿Cuál es el Público objetivo con el que desea comunicarse? El cliente manifestó que desea llegar a personas que tengan interés en conocer productos y servicios enfocados al sector automotriz. ¿Existe algún sitio web de referencia a lo que está buscando en cuánto a estética o funcionalidad? El Ing. Diego fue claro en mencionar que se debe tomar como referencia al sitio web de Grupo Mavesa, también las paginas principales de sus productos estrellas Valvoline, Bridgestone, Firestone. Especifique qué funcionalidades debe tener su sitio web (es decir: qué deben poder hacer los visitantes / usuarios, aparte de navegar por sus páginas y consultar su información?) El sitio web de ser informativo que los usuarios puedan observar detalladamente los productos y servicios que ofrece la empresa. Además en la página debe existir un ícono acerca de la bolsa de empleo, así el aspirante podrá dejar su currículo para formar parte de EMPROSERVIS.
Conclusiones de la entrevista El hacer un proyecto para EMPROSERVIS dio la oportunidad de compartir con el Ing. Diego Dueñas gerente de la empresa, quien menciono sus inquietudes y las expectativas hacia
81
lo que será su nueva estrategia on-line ya que el 83% de sus clientes apoyan a la oportunidad de comercializar productos y servicios a través de un sitio web. Uno de los puntos fundamentales fue el abordar sobre el concepto generador en torno al minimalismo encaminado a concebir un producto gráfico que refleje la identidad, coherencia visual y comunicativa al diseño del sitio web, el mismo que servirá como herramienta de comunicación empresa-cliente. Entre los principales requerimientos manifestados por el cliente se encuentran: información completa de productos y servicios, cromática en la cual se combine gris, azul y rojo como parte de su marca, páginas de referencia, en cuanto al presupuesto no existen limitantes, y sobre todo manifestó su interés en que el sitio web debe funcionar como
estrategia que difunda y
comercialice sus productos y servicios. Es necesario mencionar que fue importante realizar previamente la encuesta ya que con esos resultados se pudo guiar adecuadamente la entrevista con el cliente, en el cual se determinó que el 75% de clientes consideran las redes sociales como estrategias de comunicación lo cual fue analizado por el gerente de la empresa quien no dudo en considerar que en su página web debe existir un vínculo hacia las redes sociales, que permita comodidad al usuario al momento de interactuar con el sitio web.
5.2.1.3. Observación Para el desarrollo del proyecto fue fundamental las técnicas de investigación entre ellas la observación estructurada que se aplicó para observar la identidad gráfica y posicionamiento que tiene EMPROSERVIS a través de clientes que comercializan sus productos. (Ver Tabla No 45, 46)
82
45 TABLA 1. Existe el logotipo de la empresa en los locales que distribuyen los productos y servicios de EMPROSERVIS
Interpretación: Gracias a la observación estructurada, se pudo observar gran parte de la identidad gráfica de la empresa entre ello el logotipo. Se concluye afirmando que el 60% de los distribuidores a nivel local cuentan con la identificación del logotipo de EMPROSERVIS
2. La cromática del logotipo de la empresa estuvo presente en los locales
Como conclusión podemos decir que el 80% de clientes a nivel local cuentan con la cromática de la empresa, es decir los colores de EMPROSERVIS estuvo presente en los locales.
3. Se visualizó el uso de aplicaciones
El 60% de los clientes conservan el uso de aplicaciones corporativas, gracias a esto se deduce afirmando que la imagen de EMPROSERVIS está presente dentro de los clientes a través de sus diferentes aplicaciones.
4. Se observó la imagen institucional a nivel interno y externo
Dentro de los clientes se pudo observar que el 40% mantiene la imagen institucional a nivel interno y externo, mientras un 60% conserva la imagen por medio de aplicaciones corporativas.
5. se observó la adaptación de la marca a diferentes soportes
El 40% de los clientes conservan la marca de la empresa en diferentes soportes con la finalidad de llegar al consumidor por medio de la imagen.
6. La atención es agradable a la hora de interactuar con los dueños del local
El 80% de los distribuidores a nivel local se mostrador cordiales a la hora de interactuar con sus clientes, se puede añadir que la atención que dan es un plus para sus clientes potenciales.
NOTA:
Titulo: Observación Elaborado por: Tutillo Miriam, Disney Vera
Tecnología 46 TABLA
1. Presencia de tecnología
2. Existe conexión a la Internet
NOTA:
El 80% de los locales cuentan con la presencia de la tecnología, muchos de ellos manifestaron que es primordial y necesario contar con equipos que ayuden a promocionar los productos y servicios que ofrecen
La conexión de la internet es indispensable en los últimos tiempos, gracias a la investigación se confirma que el 80% de los clientes de EMPROSERVIS cuentan con un servicio de Internet.
Titulo: Observación Elaborado por: Tutillo Miriam, Disney Vera
83
Conclusión de la Observación Se puede evidenciar que el 40% de clientes a nivel local no identifican la identidad grafica de EMPROSERVIS, por esto es importante presentar la marca a través de un sitio web que además permita comercializar los productos y servicios. En el análisis que se realizó a cada uno de los clientes de EMPROSERVIS a nivel local se tiene como resultado que el 80% de ellos cuentan con la presencia de tecnología, por esta razón es importante persuadir estrategias on-line que permiten al cliente mantener contacto con la empresa a través de dispositivos electrónicos. Luego de realizar la observación estructurada a 125 clientes, se pude notar que el 80% de locales cuentan con conexión a la Internet, por ende es importante resaltar la comunicación a través de un sitio web que será un instrumento primordial para presentar y posicionar la identidad gráfica de EMPROSERVIS.
5.2.1.4. Brief A continuación se presenta el Brief que ha sido desarrollado fruto de los resultados obtenidos luego de aplicar la encuesta, entrevista, observación. Es importante mencionar que el Brief tiene el aval del Ing. Diego Dueñas gerente de la empresa EMPROSERVIS de la ciudad de Santo Domingo. (Ver Tabla No. 47, 48, 49)
84
47 TABLA
B R IE F
DATOS DEL CLIENTE
Nombre de la empresa: EMPROSERVIS Dirección: Av. Quevedo 1229 y Av. Puerto ILA. Persona de contacto: Ing. Diego Dueñas Gutiérrez Información de contacto: Teléfono: 0994304092/02-3711000 Email: diego@duenas gutierrez.com
INFORMACIÓN PRELIMINAR EMPROSERVIS, es una empresa comercial que distribuye productos y servicios enfocados al sector automotriz ubicada en la ciudad de Santo Domingo de los Tsáchilas. El Grupo Empresarial Dueñas Gutiérrez fue fundada por el Señor José Dueñas Cedeño y su esposa, iniciando sus pasos en el año ¿Cuál es la historia de su 1983 con la distribución de llantas y líneas afines para Santo empresa? Domingo, con el nombre de Súper Llanta Misión: Somos un Grupo Empresarial que importa y comercializa camiones, automóviles, repuestos, servicio post- venta, equipos de saneamiento ¿Cuál es la misión, visión de la ambiental, llantas, lubricantes y productos & servicios empresa? complementarios al sector automotriz, con calidad y excelencia. Visión: Consolidar al Grupo Dueñas Gutiérrez entre los primeros del sector automotriz en el Ecuador, con presencia internacional. En su línea de negocio se encuentran: Distribuidor de fábrica para todo el Ecuador de Lubricantes Valvoline Importador de llantas Bridgestone- Firesteone para todo Ecuador. Describa sus productos o servicios. Estación de servicios Terpel Tecnicentro camionero Truck Stop. Concesionario de las marcas Chery y Dongfeng para las provincias de Santo Domingo, Los Rios y Esmeraldas. Importador de llantas Bridgestone- Firesteone para todo Ecuador. Dentro de su línea de negocio. Distribuidor de fábrica para todo el Ecuador de Lubricantes ¿Cuál es su producto estrella? Valvoline Emproservis está enfocado al mercado automotriz. Segmentación del mercado. IMAGEN CORPORATIVA Dentro del logotipo, tiene un lema “ Importador Automotriz” ¿Tiene su empresa un lema corporativo? ¿Cuál es? Si, tiene un logotipo también conservan el diseño vectorizado pero ¿Tiene su empresa logotipo?, ellos desean mantener su imagen ¿Necesita de un rediseño o vectorizado? ¿Cuál es la actividad de la empresa y el sector donde se encuentra?
Titulo: Brief NOTA: Fuente: Investigación de campo Elaborado por: Tutillo Miriam, Disney Vera
85
48 TABLA
¿Cuál o cuáles son sus colores corporativos? ¿Sigue un manual de identidad corporativa de manera rigurosa? ¿Han realizado o poseen fotografías, video corporativos para promocionar productos /servicios? ¿De qué otro material de imagen corporativa disponen? ¿Cuál es su target? Área geográfica.
Azul, blanco, gris, rojo No cuenta con un manual de uso de imagen. Por ahora no poseen fotografías ni videos de alta calidad sin embargo el cliente supo manifestar que tienen como proyecto crear un video corporativo que permita visualizar los productos y servicios que ofrecen. Señalética. COMUNICACIÓN EMPROSERVIS, es una empresa mayorista con sucursales a nivel nacional, su target son clientes enfocados al sector automotriz, distribuidores, consumidores. Si, la publicidad de EMPROSERVIS es corporativa realizada en medios impresos y en radio.
¿Hacen publicidad? ¿En qué medios? ¿Tienen asignado un presupuesto Para el presupuesto del proyecto la empresa tiene convenio con anual para el mantenimiento del otras empresas a nivel nacional en el área de Web. sitio web? REQUERIMIENTO DEL SITIO WEB-CLIENTE Debe ser un diseño de líneas rectas, estético. Su estilo es ¿Busca líneas curvas o líneas minimalista rectas en su diseño? ¿Qué colores y motivos preferiría Gris, blanco, plateado y que resalte como detalles el rojo, azul. para su web? El cliente tiene como referencia la página de Valvoline , Según su organización y navegación, ¿Qué webs considera Bridgestone, Firesteone y principalmente la de su competidor Grupo de referencia? Mavesa ¿Disponen de todo el contenido (redacción) para su web? En tal El contenido no es un problema, ya que la empresa nos solicitara caso, ¿Pueden preparar todo ese esta información (fotos, videos, contenido) contenido en un documento digital ( word, pdf… )? En fotografía cuentan con fotos principales de sus productos, sin ¿Disponen de todo el contenido de embargo el cliente manifestó que se encargaran de entregarnos un imágenes para su web? material de alta calidad si el caso lo amerita. Cuentan con una página mal estructurada con poca información ¿Tienen actualmente presencia online? ¿En qué consiste su además de ello tiene falta ortográfica, también cuentan con una red presencia online? social la cual no es actualizada. La empresa tiene presencia en las Si, cuentan con Facebook que es una red social que no es redes sociales administrada hace dos años. Aparecer en las primeras posiciones de los buscadores Que sea accesible para todo el mundo y cualquier tecnología Requerimientos que debe llevar el Que sea intuitiva, fácil de usar y llamativa estéticamente sitio web. Que permita a los visitantes participar en ella Debe tener una opción en donde el usuario tenga la opción de enviar su currículo para ofertas laborales. Titulo: Brief Acontinuación NOTA: Fuente: Investigación de campo Elaborado por: Tutillo Miriam, Disney Vera
86
49 TABLA REQUERIMIENTOS DEL PUBLICO OBJETIVO-ENCUESTA ESTRUCTURADA El 85% de los clientes manifestaron que el sitio web no es agradable y no cuentan con acceso a redes sociales, además mencionaron sobre la falta ortográfica que existe, se concluye mencionando la poca información con la que cuenta la empresa.
¿Cómo calificaría usted e l sitio web de EMPROSERVIS?
¿Conside ra uste d nece sario que la Un 55% manifestó que sería próspero mejorar la distribución on-line e mpre sa de be me jorar la porque les ahorraría tiempo al momento de elegir los productos, distribución de sus productos oncabe resaltar que sería de comodidad para el usuario. line? El 72% de los clientes están de acuerdo en un sitio web como canal ¿Es conve nie nte que Emprose rvis de comunicación además esta estrategia mejoraría el proceso de utilice un sitio we b como canal de comercialización de productos y servicios desde la preventa, venta, comunicación a sus clie nte s? gestión del servicio al cliente hasta la postventa Entre las estrategias se ha considerado; galería de imágenes, ¿Qué e strate gia conside ra revista digital, Redes sociales, gracias a la investigación se afirma ade cuada para mejorar la comunicación con los clie nte s de que el 75% cree indispensable la conexión con redes sociales Emprose rvis a través de l Sitio porque les permite estar informados a través de sus cuentas we b? personales.
REQUERIMIENTOS DEL PUBLICO OBJETIVO-OBSERVACIÓN ESTRUCTURADA El 80% de los locales cuentan con la presencia de la tecnología, muchos de ellos manifestaron que es primordial y necesario contar con dispositivos electrónicos que ayuden a promocionar los productos y servicios que ofrecen. La conexión de la internet es indispensable en los últimos tiempos, ¿Existe cone xión de inte rnet? gracias a la investigación se confirma que el 80% de los clientes de EMPROSERVIS cuentan con un servicio de Internet. ¿Existe e l logotipo de la empresa Gracias a la observación estructurada, se pudo observar gran parte de la identidad gráfica de la empresa entre ello el logotipo. Se e n los locale s que distribuye n productos, servicios de concluye afirmando que el 60% de los distribuidores a nivel local EMPROSERVIS? cuentan con la identificación del logotipo de EMPROSERVIS. ¿Cue ntan con la pre sencia de tecnología e n los locale s que distribuyen los productos de Emprose rvis?
REQUERIMIENTOS TECNICOS ¿Qué programa va a utilizar al re alizar e l sitio web?
Dreamweaver Cs6 es un programa que pertenece a la familia de Adobe, que permite realizar sitios web de alta calidad con diseños personalizados, además facilita la aplicación de efectos con Jquery que será fundamental en la galería de imágenes.
¿Qué tipos de contenido multime dia va a contener e l sitio we b?
Video, imágenes, texto, animación.
NOTA: En este documento se expresa los requerimientos que se va a llevar a cabo en el sitio web de EMPROSERVIS. Santo Domingo 23 de septiembre del 2014
Ing. Diego Dueñas GERENTE DE EMPROSERVIS Titulo: Brief Acontinuación NOTA: Fuente: Investigación de campo Elaborado por: Tutillo Miriam, Disney Vera
87
5.3.
Desarrollo
5.3.1.
Modelo Mental
A continuación se presenta la estructura del modelo mental, por el cual se procede a elaborar un esquema que facilite la comprensión de los conceptos que se utilizaron para definir el estilo que se desarrolló en la creación del sitio web de la empresa EMPROSERVIS. (Ver Tabla No. 50)
50 TABLA TEMA: CREACIÓN DE UN SITIO WEB COMO MEDIO DE COMUNICACIÓN COMERCIAL DE PRODUCTOS Y SERVICIOS DE LA EMPRESA EMPROSERVIS DE LA CIUDAD DE SANTO DOMINGO DE LOS TSÁCHILAS AÑO, 2014.
DESARROLLO MENTAL - EMPRESA PERCEPCIÓN
Pregnancia, smplicidad, continuidad, elegancia.
LINE A
Dirección recta, extremos rectos, homógenea.
CON TORNO
Cuadrado, rectángulo, polyart, circulos.
GRÁFICOS
Logotipo, iconos, galería de fotos.
TECNOLOGÍ A
Jquer y, efectos sutiles, transparencia, compartir (redes sociales)
SERIEDAD
Respeto, exactitud, trabajo, fomalidad.
SIMETRÍ A
Niveles, sensatez, equilib rio, perfección, igualdad, armonía
CROMÁTIC A
Negro, gris, azul, rojo ESTILO
Un sitio web minimalista puede ser fácilmente moderno, fresco y limpio, reservado y sofisticado, elegante y refinado, basado únicamente en sus detalles como: - Tipografía y el trazo fino entre los elementos, hacen que se destaquen los contenidos en este diseño Web. - Las flechas de navegación para el portafolio, diseñadas con imágenes y las sutiles sombras alrededor de las imágenes son detallas importantes que aumentan el atractivo visual de la página Web. - Los suaves tonos azules ponen de relieve las zonas y contenidos destacados, sobre un diseño web basado en el negro, blanco y gris Titulo: Modelo Mental- Empresa NOTA: Fuente: Investigación de campo Elaborado por: Tutillo Miriam, Disney Vera
88
5.4.
Bocetaje - Digitalización
Para el desarrollo del sitio web fue fundamental realizar esquemas que permiten comprender la estructura del diseño de acuerdo al modelo mental del cliente que se ajusta al estilo elegido, el Minimalismo.
A continuación se presentan bocetos de la maquetación a lápiz y la digitalización del mismo, que brinda una apreciación clara de cómo se encuentra estructurado el sitio web a través de la cromática, imagen, tipografía. (Ver Figura No. 34, 35, 36)
ESQUEM A
DIGITAL
34 FIGURA NOTA:
Titulo: Propuesta #1 Elaborado por: Tutillo Miriam, Disney Vera
89
ESQUEM A
DIGITAL
35 FIGURA NOTA:
Titulo: Propuesta #2 Elaborado por: Tutillo Miriam, Disney Vera
ESQUEMA
DIGITAL
LUBRICANTES
NUESTRAS MARCAS
SERVICIOS
CORPORATIVO
CONTACTO
Copyright ©2014 Emproservis R eser v ados - SantoDomingodelos
36 FIGURA NOTA:
Titulo: Propuesta #3 Elaborado por: Tutillo Miriam, Disney Vera
Todos los Derechos Tsáchilas
LLANTAS
AUTOS
CAMIONES
AFINES
90
5.5.
Creación del sitio web
A continuación se presenta capturas del sitio web en la cual se demuestra gráficamente el proceso que se realizó para su creación, cabe mencionar que para ello se utilizó Dreamweaver y PHP que sirvió para el desarrollo del lenguaje de programación como HTM5, reglas CSS3, y JavaScript. A través del sitio web también se puede observar el uso fundamental de elementos visuales como: fotografías, tipografía, cromática. (Ver Figura No. 37, 38, 39, 40)
PÁGINA PRINCIPAL
37 FIGURA NOTA:
Titulo: Creación del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
91
NUESTRAS MARCAS
SERVICIOS
38 FIGURA
NOTA:
Titulo: Creaci贸n del Sitio Web Acontinuaci贸n Elaborado por: Tutillo Miriam, Disney Vera
92
COORPORATIVO
COORPORATIVO
39 FIGURA
NOTA:
Titulo: Creaci贸n del Sitio Web Acontinuaci贸n Elaborado por: Tutillo Miriam, Disney Vera
93
OFERTA LABORAL
MAPA DE SITIO
40 FIGURA NOTA:
Titulo: Creaci贸n del Sitio Web Acontinuaci贸n Elaborado por: Tutillo Miriam, Disney Vera
94
5.5.1.
Descripción del Sitio Web
Para el desarrollo del sitio web se utilizó Dreamweaver que es una herramienta de software que sirve para esbozar sitios web y además integra el diseño visual con herramientas de codificación. A través de Dreamweaver se ha desarrollado un lenguaje de programación HTML5, JavaScript incluyendo PHP, CSS que permiten interactuar con los usuarios a través de un sitio dinámico que se puede previsualizar casi en todos los navegadores web.
Fotografía: Para el desarrollo del proyecto también fue indispensable fotografías HD de alta definición, que visualmente brindan elegancia e impacten al usuario cuando este interactúe con el sitio web. En este proceso se seleccionó fotografías plano detalle que demuestran de manera clara, estética los productos y servicios con los que actualmente cuenta EMPROSERVIS. (Ver Figura No. 41, 42, 43)
41 FIGURA NOTA:
Titulo: Fotografía Página Principal Elaborado por: Tutillo Miriam, Disney Vera
95
42 FIGURA NOTA:
Titulo: Fotografía Página Principal Elaborado por: Tutillo Miriam, Disney Vera
96
43 FIGURA NOTA:
Titulo: Fotografía Servicios Elaborado por: Tutillo Miriam, Disney Vera
Gracias al estilo aplicado para el sitio web que es el minimalismo se pudo utilizar tendencias como el efecto parallax y jQuery para la galería de imágenes, entonces para este proceso fue primordial el uso de fotografías HD que permiten un contacto directo e interactivo entre usuario- empresa.
97
Tipografía: El minimalismo tiene como característica utilizar tipografías limpias, por esta razón se utilizó la familia Century Gothic tipografía palo seco sencilla y con alto nivel de legibilidad, también se usó el color basado en un diseño que transmita frescura y que sea estéticamente agradable sin distraer la vista del usuario. (Ver Figura No. 44)
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz
1234567890
44 FIGURA NOTA:
Titulo: Tipografía Elaborado por: Tutillo Miriam, Disney Vera
Cromática: El uso del código cromático es primordial en un diseño minimalista se caracteriza por el uso de negro, blanco o tonos grises. Para la creación del sitio web se utilizó la misma cromática que forma parte de la identidad corporativa de la empresa como el azul, gris, blanco que son parte de la clasificación de colores fríos que representa la seriedad de EMPROSERVIS. (Ver Figura No. 45)
AZUL #001E7E R:0 G:30 B:126
NOTA:
GRIS
ROJO #BE0A13 R:190 G:10 B:19
#545454 R:84 G:84 B:84
45 FIGURA
Titulo: Cromática Elaborado por: Tutillo Miriam, Disney Vera
BLANCO-HUESO #EFEEEE R:239 G:238 B:238
98
Es importante resaltar que el gris y blanco son colores primordiales a la hora de realizar diseños minimalistas porque representan limpieza, estética y ayuda a evitar la distracción del usuario para enfocarse en la información preliminar. Gracias al color azul se resalta el contenido del sitio web sobre un diseño basado en un código cromático blanco y gris.
Revista: Se utilizó ISSUU una plataforma web gratita que permite subir revistas de una manera rápida y cómoda para que sean visibles dentro del sitio web, estas revistas contienen información detallada de los productos que ofrece la empresa. Además el usuario tendrá la posibilidad de compartir el documento a través de sus redes, logrando con esto interacción entre el usuario y el sitio web. (Ver Figura No. 46)
46 FIGURA NOTA:
5.5.2.
Titulo: Revistas Elaborado por: Tutillo Miriam, Disney Vera
Conclusión
Se concluye afirmando la importancia de elementos visuales como imagen (fotografía), tipografía y cromática que logran aportar visualmente brindando elegancia, estética al diseño del sitio web, además gracias a dichos elementos se consigue el contacto directo entre usuario-
99
empresa. Finalmente se da a conocer el uso de revistas virtuales que permite de manera rápida y cómoda ser visibles dentro del sitio web la cual detalla los productos de EMPROSERVIS.
5.6.
Análisis semiótico
5.6.1.
Semántico
Como parte de la comunicación de empresa-cliente la semántica sirvió para relacionar el mensaje a través del sitio web que tiene por finalidad mejorar la calidad lingüística y contribuir al desarrollo de comunicación comercial, como lenguaje visual que concede la conexión del mensaje para el usuario.
El diseño minimalista fue el estilo elegido para el desarrollo del sitio web, que tiene como características guiar la lectura visual utilizando únicamente elementos necesarios para que el usuario pueda navegar sin confundirse, perderse, ni distraerse. Gracias al minimalismo se presenta la usabilidad web de manera clara, elegante que permite trasmitir la información que se presenta sin interferencias.
5.6.2.
Sintáctico
A través de la sintáctica se articuló elementos gráficos que fueron funcionales en el uso de signos que conforman la identidad del diseño y forman parte de la estructura para llegar al mensaje visual a través de signos extraídos de un código visual determinado. Código Cromático: El estilo aplicado en el sitio web es el Minimalismo, se utilizó colores como; azul, gris, principalmente el blanco que ayudo a resaltar los elementos restantes de la
100
página. La cromática que se utilizó forma parte de la identidad corporativa de la empresa, la cual se usó de dos a tres colores con esto se intenta reducir la distracción del contenido para que el usuario se sienta cómodo y centre su atención en el menú de navegación.
Código Icónico: Se representa la imagen institucional de la empresa de manera limpia, estética eliminando toda alusión simbólica y se centra en el contenido visual concreto que aborda la simplicidad, sin distracciones, mostrando solo lo importante y funcional. Además los iconos del sitio web fueron realizados con diseños minimalistas que está destinado a ser calmado y llevar la mente del observador a lo básico de la pieza gráfica, para establecer una relación semántica entre un signo gráfico y un signo perceptivo.
Código Lingüístico: Mediante este código se reforzó el mensaje a través de tipografía palo seco que es un distintivo del minimalismo, además cumple un alto nivel de legibilidad que completa una lectura clara que se centra en la información necesaria, evitando la sobreutilización innecesaria de la misma.
5.6.3.
Pragmático
En la creación del prototipo final se puede reflejar el contenido tanto semántico como sintáctico que ayudaron a profundizar el diseño minimalista creando interacción entre empresacliente. El Sitio web se ha desarrollado en un lenguaje de programación que permite facilitar la navegación y comunicación de los usuarios a través de un diseño estético. El minimalismo engloba la claridad y facilidad de uso, además contiene elementos
101
interactivos y una buena sección de imágenes que captan la atención del usuario, esto es gracias a los efectos aplicados en el sitio web que muestran productos y servicios que ofrece la empresa para su posterior comercialización.
5.7.
Validación
5.7.1.
Validación del prototipo dirigida a profesionales del área de diseño.
La presente investigación aborda la construcción de un sitio web que servirá como medio de comunicación comercial de productos y servicios de la empresa EMPROSERVIS de la ciudad de Santo Domingo.
5.7.1.1. Instrumento Como parte del instrumento se realizó fichas descriptivas pre-estructuradas en las cuales se destacan los criterios a evaluar como: objetivos del sitio web, elementos visuales, lenguaje de programación, diagramación. Es importante mencionar que dichas fichas facilitaron el posterior análisis referente al sitio web.
5.7.1.2. Validación sitio web. Para el desarrollo de la investigación fue fundamental realizar la validación del sitio web, este proceso fue validado por profesionales en el área de Diseño; Dr. Rafael Cañadas, Mg. Cristóbal Mayorga y Lcdo. Juan Pablo Ruiz docentes de la PUCE SD. Gracias a su aporte se validó el uso y función de elementos del sitio web que servirán como medio de comunicación entre empresa-cliente de la ciudad de Santo Domingo.
102
Ver anexo validación (6) ficha y carta de respaldo. Figura (65) Pág. (123)
5.7.1.3. Resultados. A continuación se presenta un esquema con preguntas de los criterios a evaluar que son parte de la validación del prototipo del sitio web. (Ver Tabla No. 51, 52)
51 TABLA
OBJETIVOS DEL SITIO WEB
1. Accesibilidad:
Interpretación: Gracias a la validación se pudo obtener resultados mediante una escala de Likert. Se concluye afirmando que la accesibilidad permite comprender, navegar e interactuar con el sitio web sin ninguna dificultad, teniendo como calificación BUENA.
2. Usabilidad:
Interpretación: Interpretación: Como conclusión se puede afirmar que el sitio web cumple con parámetros de usabilidad dando como calificación un resultado BUENO.
3. Interactividad:
Interpretación: Su calificación es BUENA, ya que permite al usuario interactuar entre empresa - cliente. Gracias a esto se deduce afirmando el correcto uso del lenguaje de programación.
4. Navegabilidad:
Interpretación: Dentro de los criterios a evaluar se pudo obtener la calificación de MUY BUENA, ya que cumple con los parámetros de navegación.
ELEMENTOS VISUALES DEL SITIO WEB.
5. Imagen
6. Cromática
NOTA:
Interpretación: La calificación es considerada como BUENA, porque se demuestra de manera clara y estética las fotografías y gráficos que permite acceder e identificar de manera rápida la simbología del sitio web. Interpretación: El minimalismo se lo represento con los colores que forman parte de la identidad corporativa. Gracias a la investigación se confirma el correcto uso de representar colores de manera estética, elegante y además la elección del color ayudo a evitar la distracción por parte del usuario, su calificación fue BUENA.
Titulo: Validación Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
103
52 TABLA
7. Tipografía:
Interpretación: Como conclusión se afirma el uso correcto de la tipografía Century Gothic ya que tiene un alto nivel de legibilidad, dando como calificación de MUY BUENA.
LENGUAJE DE PROGRAMACIÓN
8. Su interfaz es minimalista.
Interpretación: Interpretación: Se concluye determinando la interfaz como muy BUENA. Además es importante mencionar que cumple con características de la interfaz web entre ellas la menor cantidad de botones y colores para no saturar la vista del usuario.
9. HTML 5.
Interpretación: Interpretación: La calificación es considerada como MUY BUENA porque la estructura del sitio web es correcta.
10. CSS.
Interpretación: Gracias a la validación se pudo obtener como resultadode BUENOal uso de CSS, porque da estilo a la página con una interfaz más intuitiva que ayuda a mejorar la usabilidad del sitio web.
11. JavaScript.
Interpretación:El resultadoes BUENO.Se utilizó J- Query para la galeríade imágenesque ayudana interactuarcon el usuariode manera gráfica. DIAGRAMACIÓN
DIAGRAMACIÓN
12. Descanso Visual
Interpretación:Dentro del descanso visual se pudo observar el correctouso de elementosque permitieronal usuario concentrar su atención en lo más relevante del sitio web. Se concluye afirmando la calificación de BUENO.
12. Jerarquía
Interpretación: Correcto uso del diagrama de contenidos y organizaciónde elementosdel sitio web, dando como resultado una calificación de BUENO.
12. Selección de contenidos
Interpretación:La calificaciónes BUENA,el uso considerado de elementos facilita la legibilidad del usuario dentro del sitio web.
SITIO WEB DE EMPROSERVIS
13. Calificación del Sitio Web:
NOTA:
Interpretación: Se concluye la calificación del prototipo
como MUY BUENO, ya que cumple con parámetros de uso y función de los elementos del sitio web.
Titulo: Objetivos Del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
104
5.7.2.
Validación del prototipo dirigida al personal que forma parte de la empresa.
La presente investigación aborda la construcción de un sitio web que servirá como medio de comunicación comercial de productos y servicios de la empresa EMPROSERVIS de la ciudad de Santo Domingo.
5.7.2.1. Instrumento Para el instrumento se realizó fichas descriptivas pre- estructuradas las cuales sirvieron para evaluar parámetros del Sitio Web. Es importante mencionar que dichas fichas facilitaron el posterior análisis referente al desarrollo del proyecto.
5.7.2.2. Validación sitio web. Como parte de la investigación se realizó la validación del sitio web, este proceso fue validado por el personal que forma parte de la empresa EMPROSERVIS quienes participaron de forma desinteresada en la navegación del sitio web. Es importante resaltar que para este proceso se eligió a una persona de cada sucursal, Chery, Dongfeng, Emproservis (matriz), Tecnicentro, Gasolinera. Gracias a su aporte se validó el uso y función de elementos del sitio web que servirán como medio de comunicación entre empresa-cliente en la ciudad de Santo Domingo.
5.7.2.3. Resultados. A continuación se presenta un esquema de los criterios a evaluar que son parte de la validación del prototipo del sitio web. (Ver Tabla No. 53)
105
53 TABLA
1. Accesibilidad:
Interpretación: Gracias al tipo de instrumento elegido se determinó la calificación como MUY BUENA. Se concluye afirmando que la accesibilidad permite al usuario comprender, navegar e interactuar con el sitio web sin ninguna dificultad.
2. Interactividad:
Interpretación: Su calificación es MUY BUENA, ya que permite al usuario interactuar con la empresa. Gracias a esto se afirma el correcto uso del lenguaje de programación.
3. Navegabilidad:
Interpretación: El sitio web facilita al usuario su correcta y fácil navegación, calificándolo como MUY BUENO.
SITIO WEB DE EMPROSERVIS
4. Información del sitio web
5. Calificación del Sitio Web
NOTA:
5.7.3.
Interpretación: La calificación es muy MUY BUENA, porque cumple con una estructura agradable y además cumple la satisfacción del usuario. Interpretación: Se concluye la calificación del prototipo como MUY BUENO, ya que cumple con parámetros de uso y función de los elementos del sitio web hacia el usuario.
Titulo: Objetivos Del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
Conclusión de la validación del prototipo.
El hacer un proyecto para EMPROSERVIS dio la oportunidad de compartir con el personal que labora en la empresa, quienes formaron parte de la experiencia de navegar e interactuar con el Sitio Web. Las personas que forman parte de la empresa calificaron MUY BUENA el uso y función de los elementos, los mismos que permitieron comprender e interactuar y hacer fácil su navegación. Se concluye afirmando la importancia de contar con canales de comunicación para estrechar lazos entre empresa-cliente.
106
En el análisis que se realizó a los profesionales del área de Diseño los resultados son calificados como MUY BUENO, ya que el sitio web cumple con parámetros que son importantes para realización de dicho proyecto como: Objetivos del sitio web, elementos visuales, lenguaje de programación, diagramación. Gracias a los elementos utilizados se puede contribuir al desarrollo de la teoría de comunicación, para que exista conexión del sitio web hacia el usuario. (Ver Figura No. 47, 48, 49, 50, 51)
5.7.4.
Presentación de producto final
47 FIGURA NOTA:
Titulo: Presentación de Producto Final Elaborado por: Tutillo Miriam, Disney Vera
CORPORATIVO
NUESTRAS MARCAS
PÁGINA PRINCIPAL
107
48 FIGURA
NOTA:
Titulo: Creación del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
CONTﾃ，TANOS
AV .P
UE
RTO
AV. QUEVEDO
Ver direcciﾃｳn: EMPROSERVIS
ILA
Pontificia Universidad Catﾃｳlica Ecuador Sede Santo Domingo San Cristobal
VEDO AV. QUE
CONTACTOS
SERVICIOS
108
EMPROSERVIS
DE LOS CALCHA QUIES De los Mayas
REVISTA-LUBRICANTES
De los Aztecas
49 FIGURA
NOTA:
Titulo: Creaciﾃｳn del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
REVISTA-CAMIONES
REVISTA-AUTOS
REVISTA-LLANTAS
109
50 FIGURA NOTA:
Titulo: Creaci贸n del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
MAPA DE NAVEGACIÓN
OFERTA LABORAL
110
51 FIGURA NOTA:
Titulo: Creación del Sitio Web Elaborado por: Tutillo Miriam, Disney Vera
111
5.8.
Implementación y control
5.8.1.
Manual de usuario del sitio web
A continuación se presenta capturas del manual, que sirve como guía para resolver las necesidades de quienes administren el sitio web.
INTRODUCCIÓN
3
PROPÓSITO DEL MANUAL
4
MAPA DE SITIO
5
MANUAL DEL USUARIO
6
ELEMENTOS GENERALES
7
CABECERA – HEADER
7
TIPOGRAFÍA
8
COLOR
9
MENÚ
10
MENÚ HORIZONTAL
10
MENÚ VERTICAL
14
MAPA DE SITIO EN CÓDIGO
17
CONCLUSIÓN
18
Los sitios web son un elemento fundamental para la interacción con los usuarios, quienes buscan a través de internet involucrarse con
INTRODUCCIÓN
nuevas y mejores maneras de comunicación a nivel cultural, social y sobre todo en el ámbito comercial con el fin de satisfacer necesidades del cliente. Este documento es realizado para apoyar la labor de la empresa en el ámbito comercial brindando un canal de comunicación que
permita visibilizar criterios como usabilidad, navegabilidad e interactividad. Es importante mencionar que de esta manera se presenta una cercanía con el usuario mediante un sitio web.
El Manual de Estilo para Manejo del Sitio Web de la empresa EMPROSERVIS, es una guía sencilla que resuelve las necesidades de
quienes operan estos medios, encaminados a administrar la información referente a productos y servicios de la empresa. Este presente manual se aplica a recursos tecnológicos y también
contiene las formas en donde el administrador podrá proceder en las diversas publicaciones.
3
52 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
112
La utilización de sitios web tiene como propósito generar relación entre
PROPÓSITO DEL MANUAL
cliente - empresa, con el fin de estrechar lazos de comunicación que se adapte al tipo de receptor, despertando en él, interés y una actitud previa
de receptividad. El desarrollo del sitio web busca establecer un canal de comunicación y comercialización de productos y servicios de la empresa que conjugue la funcionalidad con comunicación visual al usuario y producto de ello alcanzar identidad visual a la empresa en su proceso de comercialización.
El Manual de Estilo busca facilitar una herramienta que permita unificar criterios para el uso del sitio web de EMPROSERVIS, con el fin de que se
conviertan en un efectivo puente de comunicación entre cliente-empresa.
4
Js j-query
Nuestras Marcas
Js j-query
Servicios
Corporativo
Valvoline
Alineación
Firestone
Balanceo
Bridgestone
Cambio de
Chery
Aceite
Dongfeng
Enllantaje
Mrf
Lavado de Carro
Energía Total
Mecánica
Atlas Tires
Suspensión
Contacto
MISIÓN
RESPONSABILIDAD SOCIAL
RESPONSABILIDAD AMBIENTAL VISIÓN
Dirección
Teléfono
Easydry
Revistas Bolsa de Empleo Mapa de Sitio
MAPA DE SITIO
Redes Sociales
La navegación que esta detallada en el mapa del sitio es la que se encuentra en la parte superior de este texto, comenzando con la index que permite navega
5
53 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
MANUAL DEL USUARIO
113
A continuación se presenta capturas del manual, que sirve como guía para resolver las necesidades de quienes administren el sitio web.
CATEGORIA. Son dos categorías que se desplazan, el menú horizontal y el vertical.
6
ELEMENTO GENERALES
Cabecera – Header
La cabecera del sitio web de EMPROSERVIS está elaborada con el menú a la izquierda tanto como en l aparte superior, es decir está diseñada en forma de “L”.
7
54 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
114
La tipografía
que se empleó pertenece
a: Familia
Tipográfica Century Gothic tipografía palo seco sencilla y con alto nivel de legibilidad. El estilo de la letra que se utilizó por defecto en los contenidos es Century Gothic regular.
ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcdefghijklmnñopqrstuvwxyz 1234567890 ABCDEFGHIJKLMNÑOPQRSTUVWXYZ abcde fghijklmnñopqrstuvwxyz 1234567890
8
La gama de colores del sitio web de la empresa es: AZUL #001E7E R:0 G:30 B:126
ROJO #BE0A13 R:190 G:10 B:19
GRIS #545454
BLANCO-HUESO #EFEEEE
R:84 G:84 B:84
R:239 G:238 B:238
El color que forma parte de la identidad corporativa de la empresa es el
mismo que se utilizó para el diseño del sitio web, azul, gris, blanco son colores que representa la seriedad de EMPROSERVIS. Es importante resaltar que el estilo que se eligió para el diseño es el “Minimalismo”, que tiene como característica presentar diseños limpios, estéticos que ayudan a evitar cualquier tipo de distracción por parte del usuario.
9
55 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
115
El Menú del sitio web contiene dos categorías. Estas son: menú vertical y
menú horizontal en la cual se distribuye todo el contenido. Cabe mencionar que los elementos utilizados en el sitio web pueden ser cambiados en un futuro por el administrador Web, para ello se debe
ingresar al div que le corresponde.
Dentro del Menú horizontal, se encuentran los productos que ofrece la empresa, redes sociales entre otros. Estos iconos se encuentran en la parte superior, en el cetro de una mancha de color gris que pertenece
al menú horizontal.
10
Lubricantes.
En
Lubricantes
encuentra
una
se
Autos
revista
En el icono de Autos a
digital que da a conocer
través
todos los productos de la
digital se da a conocer los
marca Valvoline.
productos Llantas
de
una
revista
de la marca
Cherry.
Dentro del icono llantas se encuentra
un
catálogo
que muestra los productos enfocados Bridgestone.
56 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
en la marca
11
116
Camiones En
este
icono
se
encuentra
un
catálogo virtual de productos de la marca Dongfeng.
Baterías Como parte del icono de batería se encuentra
una
revista
digital
que
muestra claramente los productos con
los que cuenta la empresa, que son de la marca Energía Total.
12
Redes Sociales
Oferta Laboral
Aquí encontramos dos iconos
En este icono se encuentra un formulario
en
la
cual
que son Facebook y twitter los
el
mismos que al dar click nos
usuario tendrá la oportunidad de enviar
sus datos
enlazaran con la cuenta de
para
la empresa.
formar parte de la empresa,
este icono se encuentra en el menú horizontal. Mapa de Sitio
Este icono contiene una lista de las páginas
del
sitio
web,
que
se
encuentran diseñado como especie de índice para los buscadores.
13
57 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
117
Menú vertical. Como parte del icono principal del menú vertical se encuentra icono home, navegación y footer, estos se pueden borrar, cambiar y aumentar códigos, si
el administrador web así lo quisiera.
Navegación Dentro de navegación se encuentran
secciones del menú vertical como: Nuestras Marcas, Servicios, Corporativo,
Contacto,
Footer.
Estas
se
encuentran al lado izquierdo de la página, en la mancha de color gris que es parte del menú vertical.
14
Icono Home El icono sirve para orientar al usuario y pueda navegar sin confundirse, perderse, ni distraerse. El icono Home
se encuentra en la parte superior del lado izquierdo de la página web, en una mancha de color gris que es parte del menú vertical. Nuestras Marcas Se encuentran todas las marcas con las que
actualmente
trabaja
la
empresa
entre
ellas:
Valvoline, Firestone, Bridgestone, Cherry, Dongfeng, MRF, Energía Total, Atlas Tires, EasyDry.
Servicios En este sector se encuentra los servicios que ofrece la
empresa a los clientes de EMPROSERVIS, entre ellos: Alineación, balanceo, Cambio de aceite, Enllantaje, lavado de carros, Mecánica y Suspensión.
15
58 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
118
Corporativo Se
encuentra
conceptos
fundamentales
como
misión, visión de la empresa y además el compromiso
con la ciudadanía como: Responsabilidad Social y Responsabilidad Ambiental.
Contacto Formulario de contacto a través del cual el usuario podrá encontrar información referente a sucursales
de la empresa, además el usuario podrá enviar mensajes a la empresa.
Footer El pie del sitio web se estructura de la siguiente
manera: Se encabeza con información
referente
a los
derechos reservados, se encuentra al lado izquierdo de la página dentro de la barra gris del menú vertical.
CONCLUSIÓN
16
El manual
cumple todos los estándares establecidos que ayudara a
gestionar de manera ágil y sencilla el trabajo que se realice una vez entregado al administrador web. Se concluye mencionando que el software de Dreamweaver es un programa que nos benefició en
la
programación porque a través de ello se creó soluciones gráficas que estarán visibles para todos los usuarios que visiten el sitio web.
17
59 FIGURA Titulo: Manual de suario del Sito Web NOTA: Elaborado por: Tutillo Miriam, Disney Vera
119
5.8.2. Dise帽o de mapa de navegaci贸n (Ver Tabla No. 54) 54 TABLA
NOTA:
Titulo: Dise帽o de Mapa de Navegaci贸n Elaborado por: Tutillo Miriam, Disney Vera
120
6.
CONCLUSIÓN
1. El resultado obtenido a través de técnicas cuantitativas demostraron la importancia de un proyecto destinado a la creación de un Sitio web que servirá para fortalecer la comunicación y comercialización de productos, servicios entre la empresa-cliente. Para esto, fue primordial un análisis coherente y fundamental que sirvió para sustentar el contenido que tendrá el sitio web.
2. EMPROSERVIS es una empresa que importa y comercializa productos y servicios, por ende fue indispensable establecer un canal de comercialización que permita el ingreso, visita e interacción con la empresa por medio la internet a través de un sitio web.
3. Por medio del modelo mental se pudo identificar el estilo a aplicar y resultado de ello, definir los elementos gráficos que conforman el diseño del sitio web.
4. El Minimalismo engloba la claridad y facilidad de uso, permitiendo facilitar la navegación y comunicación de los usuarios a través de un diseño estético.
5. La validación se la realizo a profesionales del área de Diseño quienes con su aportación validaron parámetros importantes como: Objetivos del sitio web, elementos visuales, lenguaje de programación, diagramación. Gracias a este proceso de validación se puede ratificar que el proyecto cumple con parámetros de accesibilidad, usabilidad, interactividad y navegabilidad lo cual hace que el proyecto cumpla con normas estandarizadas de acuerdo a su uso y función de elementos.
6.
El realizar este proyecto dio la oportunidad de compartir con docentes del área de Diseño la experiencia de navegar e interactuar con el sitio web, el mismo que cumple con parámetros que ayudan a contribuir la comunicación, para lograr que exista conexión entre usuario - empresa.
121
7. Para este proyecto se consideró un manual de usuario en el cual se recopilo información en forma veraz, fidedigna y oportuna la misma que servirá como guía para orientar en el lenguaje de programación, resolviendo las necesidades de quienes operan estos medios encaminados a administrar la información referente a productos y servicios de EMPROSERVIS.
8. El desarrollo de un manual de usuario permite mantener un control después de la ejecución del presente proyecto, el mismo que servirá para el uso del Sitio Web en la entidad empresarial, cuya función es proporcionar una herramienta completamente funcional al administrador del Sito web.
9.
El hacer un proyecto para EMPROSERVIS significa una gran responsabilidad ya que es una empresa que cuenta con sucursales a nivel nacional, para lo cual se realizó una investigación en cuanto al modelo mental de la empresa, este proceso facilito el desarrollo del diseño del sitio web.
122
7.
RECOMENDACIÓN
Para futuros proyectos referentes a diseño se recomienda que la institución beneficiaria del proyecto delegue a una persona que facilite la información como parte de la investigación a la construcción del sitio web. Al ser un proyecto de cooperación institucional se recomienda a la institución beneficiaria mantener un compromiso y participación oportuna en el proceso investigativo que ayude a la correcta elección de conceptos y elementos del diseño para la construcción del sitio web. Se recomienda que para la implementación del proyecto, se considere personal capacitado para el manejo de redes sociales, esto se lo realizara con la finalidad de estrechar lazos de comunicación entre empresa – cliente y de al mismo tiempo mantener en contacto a los usuarios mediante sus cuentas personales. Es indispensable entablar una entrevista con el cliente, en la cual se realice la validación del prototipo para garantizar la correcta ejecución del proyecto. Es recomendable contar con un manual de identidad corporativa para facilitar la elección del modelo mental de la empresa (cliente) y además para facilitar su análisis semiótico referente al sitio web. Es recomendable la implementación del Sitio Web porque servirá para fortalecer la comunicación y comercialización de productos y servicios entre empresa-cliente.
123
8.
LISTA DE REFERENCIAS
8.1.
Fuentes de Información
8.1.1.
BIBLIOGRAFÍA
Acosta, J (1994) “Imagen Global”. España.- Barcelona: Grupo Editorial Ceac, S.A. Cobo, Pardo (2007).”Planeta Web 2.0.” México. Barcelona / México DF: Grup de Recerca 'Interaccions Digitals, Universitat de Vic.Flacso Hembree R, (2008) “Entender el diseño Gráfico y la Comunicación Visual”. EspañaBarcelona: Editorial Blume Hernàn B. (2011). “PHP creación de páginas web dinámica”. Argentina: Editorial, Grupo Alfaomega. Landan, R. (2008) “Propósitos de los sitios web”; Editorial “ANAYA MULTIMEDIA” López Sanz M, Vara Mesa J, Verde Marín J, Sánchez Fuquene D, Jiménez Hernández J, Castro Martínez V. (2012). “Desarrollo Web en entorno servidor”. Editorial, RA-MA. Luzardo, A (2009) “Diseño de la Interfaz Gráfica”; Caso de estudio: diarios digitales. Buenos Aires- Argentina: Editorial. Meloni, J. (2012) HTML5, CSS3 Y JAVA SCRIPT: Editorial, Anaya Multimedia. MILLÁN TEJEDOR, R.J. (2008). “Posicionamiento web”. Bit: COIT/AEIT. Ojeda, N (Año 2012) “Introducciòn a la multimedia.” Mexico: Editorial Red de tercer Milenio.
124
8.1.2.
Documental
Grupo Empresarial que importa y comercializa productos enfocados al sector automotriz. Universidad de Palermo (2011) “Centro de Estudios en Diseño y Comunicación”. Ciudad Autónoma de Buenos Aires, Argentina: Editorial.
8.1.2.1. Revistas Alonso, J (2008). “Comunicar en el Web: Propuesta de Criterios para Analizar Hartson, H.R. (1998). Human-computer interaction: Interdisciplinary roots and trends. En: Journal of Systems and Software, Noviembre 1998, v. 43, n. 2, pp. 103-118. Sitios en Internet. Teknokultura: Revista On-line, Vol.7.
8.1.3.
Lincografía
Gonzales, A (2010) “Tamaño y peso de las imágenes”, CRIF “Las Acacias”. Recuperado de : https://sites.google.com/site/ticvalcarcel/optimizacion-de-imagenes-parainternet/tamano-y-peso-de-las-imagenes Kioskea.net. Gestión de relaciones con el cliente CRM. Mayo 2014 http://es.kioskea.net/contents/197-gestion-de-relaciones-con-el-cliente-crm Manchón, Savall y Cuenca. (2008) “Usabilidad e Interactividad.” http://abelsuing.wordpress.com/2008/08/04/apuntes-de-usabilidad-e-interactividad/
125
Yanguas, J (2012) “Internet, ¿Qué es y cómo funciona?” Madrid- España. http://jdiezfoto.es/informatica/internet-que-es-y-como-funciona/ Rost, A (2011) “La interactividad.” General Roca- Argentina. http://periodismoyotrasyerbas.blogspot.com/2011/10/definicion-y-tipos-deinteractividad.html Viteri, J (Año 2010) “Sitio Web.” http://repositorio.utc.edu.ec/bitstream/27000/460/1/T-UTC-1029.pdf Yanguas, J (2012) “Internet, ¿Qué es y cómo funciona?” Madrid- España. http://jdiezfoto.es/informatica/internet-que-es-y-como-funciona/
126
9.
GLOSARIO 55 TABLA
PALABRA
FUENTE
ABSTRAC
Es un breve, apropiado y comprensivo resumen documental que representa de manera objetiva y precisa el contenido de un documento académico o científico.
http://www.ipnm.edu.pe/we b/images/stories/publicacio nes/Abstract.pdf
CÓDIGO
Conjunto de instrucciones que hace en un sistema operativo determinado la capacidad de codificar y descodificar los datos.
http://www.mastermagazine .info/termino/4320.php
CROMÁTICA
Ordena y clasifica las diferentes posibilidades cromáticas que se observan en el universo a partir de la presencia de luz u oscuridad, son especialmente utilizadas por científicos y artistas y son realizables de muchas maneras y formas diferentes
HOSTING
Servicio ofrecido por muchas compañías mediante el cual podemos poner una página web o un conjunto de datos en un servidor remoto para que puedan ser usados y/o consultados por usuarios de internet.
IDENTIDAD
NOTA:
DEFINICIÓN
Conjunto de características propias de una persona o un grupo y que permiten distinguirlos del resto. También hace referencia a la información o los datos que identifican y distinguen oficialmente a una persona de otra.
Titulo: Glosario Elaborado por: Tutillo Miriam, Disney Vera
http://www.definicionabc.c om/general/circulo-cromati co.php
http://www.mastermagazine .info/termino/5272.php
http://www.significados.co m/identidad/
127
56 TABLA
PALABRA
LECTURABILIDAD
MINIMALISMO
DEFINICIÓN facilidad que ofrecen los textos escritos para ser comprendidos sin necesidad de realizar grandes esfuerzos, la lecturabilidad depende de diversos factores, como la habilidad lectora de quien lee. Es una filosofía de vida que propugna centrarse en lo importante y eliminar o descartar lo innecesario para ser feliz y alcanzar la realización personal.
FUENTE http://www.cuadernointercu ltural.com/lecturabilidad-le gibilidad-comprension-lect ora/
http://www.minimoblog.co m/2010/11/que-es-el-minim alismo.html
Primera versión o modelo del producto, en que se han incorporado algunas características del producto final.
https://emprendedores.fund acionbankinter.org/Conoci miento/Indice/Informaci%C 3%B3nparaEmprendedores/ Prototipo/%C2%BFQu%C3 %A9esunprototipo.aspx
La descripción RGB (del inglés Red, Green, Blue; "rojo, verde, azul") de un color hace referencia a su composición de la intensidad de los colores primarios
http://www.cristalab.com/tu toriales/que-es-rgb-red-gree n-blue-c47782l/
ILUSTRACIÓN
Acción y efecto de ilustrar (dibujar, adornar). El término permite nombrar al dibujo, estampa o grabado que adorna, documenta o decora un libro.
http://definicion.de/ilustraci on/
TIPOGRAFÍA
arte y técnica de impresión a través de formas con relieve que reciben el nombre de tipos, los cuales, hechos de plomo, una vez entintados serán aplicados sobre el papel .
http://www.definicionabc.c om/general/tipografia.php
PROTOTIPO
RGB
NOTA:
Titulo: Glosario Elaborado por: Tutillo Miriam, Disney Vera
128
10.
ANEXOS
60 FIGURA NOTA:
Titulo: Anexo #1 Validaci贸n Encuesta / Entrevista Elaborado por: Tutillo Miriam, Disney Vera
129
PONTIFIC A UNIVERSIDAD C ATÓLICA SEDE SAN TO DOMINGO DE LOS TSÁCHILAS.
ESPECIFICACIONESPARA LA OBSERVACIÓN ESTRUCTURADA 1. Tipo de instrumento: Escala de Likert
OBJETIVO:Observarel manejoy adopciónde la tecnologíaa clientes que comercializan la línea de negocio como: lavadoras de carros, comerciantes de repuestos, estaciónTerpel. INDICADOR Nº 1 Presencia de tecnología
1 2 3 4 5
2 Existe conexión a la Internet
1 2 3 4 5
EVALUACIÓN
PONTIFICIA UNIVERSIDAD CATÓLICA SEDE SANTO DOMINGO DE LOSTSÁCHILAS EVALUACIÓN MODELO
PARA LA OBSE RVACIÓN ESTRUCTURADA
DOCENTE E VALUADOR: Mg. Cristobal Mayo rga FECHA: 31/07/2014
PONTIFIC A UNIVERSIDAD C ATÓLIC A SEDE SAN TO DOMINGO DE LOS TSÁCHILAS.
ESPECIFICACIONES PARA LA OBSERVACIÓN ESTRUCTURADA 1. Tipo de instrumento: Escala de Likert OBJETIVO:Observarla identidadgráficay posicionamientoque tiene EMPOSERVIS a través de clientes que comercializan la línea de negocios como: lavadoras de carros, comerciantes de repuestos, estaciónTerpel Nº
INDICADOR
EVALUACIÓN
Existe el logotipo de la empresa en los locales que
1 distribuyen los productos y servicios de
1 2 3 4 5
EMPROSE RVIS La cromática del logotipo de la empresa estuvo presente
2 en los locales
1 2 3 4 5
3 Se visualizó el uso de aplicaciones
1 2 3 4 5
4
Se observó la imagen institucional a novel interno y externo
5 Se observó la adaptación de la marca a diferentes soportes
6
61 FIGURA NOTA:
Titulo: Anexo #2 Observación Estructurada Elaborado por: Tutillo Miriam, Disney Vera
La atención es agradable a la hora de interactuar con los dueños del local
1 2 3 4 5
1 2 3 4 5 1 2 3 4 5
130
62 FIGURA NOTA:
Titulo: Anexo #3 Validaci贸n Plan de Dise帽o Elaborado por: Tutillo Miriam, Disney Vera
131
PONTIFICIA UNIVERSIDAD CATÒLICA
Sede Santo Domingo de los Tsachilas ENTREVISTA DIRIGIDA A GERENTE DE EMPRESA EMPROSERVIS
OBJETIVO: Conocer acerca de los requerimientos que debe llevar el sitio web con la finalidad de aportar al usuario una página interactiva entre empresa-cliente.
ENTREVISTA ESTRUCTURADA EMPRESA: Emproservis PERSONA DE CONTACTO: Ing. Diego Dueñas, gerente de Emproservis DIRECCIÓN: Av. Quevedo 1229 y Av. Puerto ILA.
Miriam: Buenas tardes Ing. Diego, mi compañera Disney y yo nos encontramos aquí para realizarle ciertas preguntas que son parte de la entrevista estructurada, en este caso con el gerente de
la Empresa. Disney: Si, son preguntas referentes al sitio web de la empresa, necesitamos saber inquietudes y expectativas hacia la página. Diego: Muy bien chicas entonces empecemos, ¿Tienen algún formato de preguntas o cómo? Miriam: Claro, con mi compañera hemos desarrollado preguntas que son fundamentales para la elaboración del Brief que se le entregara más adelante. Disney, Miriam: Entonces empecemos.
1. ¿Cuál es el público objetivo con el que desea comunicarse? Diego: Verán chicas la intención del sitio web, es que esta página pueda ser vista por todas las personas, pero claro debe ser un poco enfocada a las personas con vehículos o que estén interesados en el sector automotriz. 2. ¿Cuándo le gustaría lanzar el sitio web? Diego: Lo más pronto posible, mientras más pronto terminen es mejor. 3. ¿Existe algún sitio web de referencia a lo que está buscando en cuanto a estética o funcionalidad? Diego: Si, acérquense un poco para que vean. Pueden tomar como referencia a las páginas principales de nuestros productos estrellas, Valvoline, Bridgestone, Firestones, pero básicamente chicas enfóquense en cómo estas páginas muestran sus productos al usuario. 4. ¿Tiene definida la estructura de contenido y de qué tipo se trata? Miriam: Ing. Es decir las secciones que tendrá el sitio web, si contendrán texto, videos, fotos. Diego: Justo como me llamaron ayer me imagine que necesitaban las secciones pero si tengo, este es un borrador que me gustaría que ustedes me ayudaran armar o corregir con la experiencia que tienen ustedes como estudiantes.
63 FIGURA NOTA:
Titulo: Anexo #4 Estructura de la Entrevista Elaborado por: Tutillo Miriam, Disney Vera
132
PONTIFICIA UNIVERSIDAD CATÒLICA
Sede Santo Domingo de los Tsachilas ENTREVISTA DIRIGIDA A GERENTE DE EMPRESA EMPROSERVIS OBJETIVO: Conocer acerca de los requerimientos que debe llevar el sitio web con la finalidad de aportar al usuario una página interactiva entre empresa-cliente.
Disney: Si, entonces empezamos en la misma hoja o en el borrador que usted tiene. Diego: Empecemos aquí con lo que yo tengo. 5. Especifique qué funcionalidades debe tener su sitio web (es decir: qué deben poder hacer los visitantes / usuarios, aparte de navegar por sus páginas y consultar su información?) Miriam: El diseño funcional consiste en las funcionalidades que el sitio web debe tener para sus usuarios, Ejemplos: registrarse en la web y acceder a información confidencial, hacer pedidos o solicitudes específicas desde formularios web, realizar pagos online, suscribirse a las novedades con su email, etc. Diego: Si, la funcionalidad que debe tener el sitio web es muy importante, principalmente en la sección de oferta laboral, porque necesito que el usuario pueda enviar su currículo sin ningún problema. Además me gustaría fotos y la descripción de los productos porque eso es lo que a los usuarios les interesa, también que el usuario tenga la facilidad de descargar un catálogo de los productos de la empresa. 6. ¿Necesita fotografías, ilustraciones, videos o algún tipo de creatividad? Diego: Si, claro fotografías de los productos y sería bueno que esté un video en la página pero a eso aún, no nos metamos. 7. Indicar el nombre de dominio que desea vincular a su web (aclarando si ya lo tiene registrado o desea que nosotros gestionemos a su nombre su registro) Disney: ¿En el dominio van a utilizar el mismo que ya tienen en su página actual? Diego: Eso aún no lo sé, primero enfoquémonos en el diseño de la página. 8. Indica si ya tiene un servicio de hosting (alojamiento web) contratado. ¿Tiene un presupuesto designado para este proyecto? Diego: En Emproservis tenemos contacto con empresas dedicadas a estos servicios. Por eso no se preocupen Disney: Bueno, Ing Diego entonces esto sería todo cuando tengamos los primeros borradores de la página le estamos llamando para confirmar otra cita. Muchas gracias. Diego: De nada, me llaman un día antes y listo.
64 FIGURA NOTA:
Titulo: Anexo #5 Estructura de la Entrevista Elaborado por: Tutillo Miriam, Disney Vera
133
65 FIGURA
NOTA:
Titulo: Anexo #6 Validaci贸n Prototipo Elaborado por: Tutillo Miriam, Disney Vera
134
66 FIGURA NOTA:
Titulo: Anexo # 7 Validaci贸n Prototipo Elaborado por: Tutillo Miriam, Disney Vera
135
67 FIGURA
NOTA:
Titulo: Anexo #8 Carta Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
136
68 FIGURA NOTA:
Titulo: Anexo # 9 Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
137
69 FIGURA
NOTA:
Titulo: Anexo # 10 Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
138
70 FIGURA
NOTA:
Titulo: Anexo # 11 Carta Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
139
71 FIGURA NOTA:
Titulo: Anexo #12 Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
140
72 FIGURA NOTA:
Titulo: Anexo #13 Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
141
73 FIGURA NOTA:
Titulo: Anexo #14 Validaci贸n de Prototipo Elaborado por: Tutillo Miriam, Disney Vera
142
74 FIGURA
NOTA:
Titulo: Anexo #15 FotografĂas Elaborado por: Tutillo Miriam, Disney Vera
143
75 FIGURA
NOTA:
Titulo: Anexo #16 FotografĂas Elaborado por: Tutillo Miriam, Disney Vera
144
76 FIGURA NOTA:
Titulo: Anexo #17 Carta Impacto Elaborado por: Tutillo Miriam, Disney Vera