UNIVERSIDAD PRIVADA FRANZ TAMAYO

FACULTAD DE DISEÑO GRÁFICOY TECNOLOGIAS

CROSSMEDIA
CARRERA DE DISEÑO GRÁFICO Y PRODUCCIÓN
CROSSMEDIA

“DISEÑO DE UN SITIO DE VENTAS EN LÍNEA

PARA LA EMPRESA SHOCKPROTEIN
BOLIVIA DE LA CIUDAD DE COCHABAMBA
EN LA GESTIÓN 2024”
PROYECTO DE GRADO PARA
OPTAR AL GRADO DE
LICENCIATURA EN DISEÑO
GRÁFICO Y PRODUCCIÓN
CROSSMEDIA.
POSTULANTE: Estefani Garcia Cepeda
TUTOR: Juan Cristóbal Ortega Rios
Cochabamba – Bolivia
2024
 ÍNDICE DE CONTENIDO

INTRODUCCIÓN................................................................................................... Página 1

Antecedentes generales..................................................................................Página 2

Antecedentes específicos.................................................................................Página 2

PLANTEAMIENTO DEL PROBLEMA........................................................................Página 3

Identificación del problema..............................................................................Página 3

Formulación del problema...............................................................................Página 5

OBJETIVOS........................................................................................................... Página 5

Objetivo general............................................................................................... Página 5

Objetivos específicos.......................................................................................Página 5

JUSTIFICACIÓN..................................................................................................... Página 6

MARCO METODOLÓGICO.....................................................................................Página 7

Tipo de investigación.......................................................................................Página 7

Enfoque de investigación.................................................................................Página 8

Métodos de investigación.................................................................................Página 8

Técnicas de investigación................................................................................Página 8

ALCANCE.......................................................................................................... Página 8

Alcance Temático......................................................................................... Página 8

Alcance Espacial...........................................................................................Página 9

Delimitación Temporal..................................................................................Página 9

ESTADOS DE LA INVESTIGACIÓN.........................................................................Página 9

CAPITULO I

MARCO CONCEPTUAL

INTRODUCCION………………………………………………………………………………………………………………. Página 17
Diseño web................................................................................................. Página 17

Desarrollo web............................................................................................Página 17

Diseño UX................................................................................................... Página 18

 Diseño UI.................................................................................................... Página 18

Diseño responsive......................................................................................Página 19

Usabilidad................................................................................................... Página 19

Accesibilidad............................................................................................... Página 19

Interfaz....................................................................................................... Página 20

Mapa de sitio.............................................................................................. Página 20

Wireframes................................................................................................. Página 21

Prototipo..................................................................................................... Página 21

Avatar: El público ideal...............................................................................Página 22

Usuario....................................................................................................... Página 22

Viaje de usuario..........................................................................................Página 22

Pagina web................................................................................................. Página 23

Sitio web..................................................................................................... Página 23

Tienda en línea...........................................................................................Página 24

HTML.......................................................................................................... Página 24

CSS............................................................................................................. Página 25

JavaScript................................................................................................... Página 25

PHP............................................................................................................. Página 25

CMS............................................................................................................ Página 26

WordPress.................................................................................................. Página 26

Tema.......................................................................................................... Página 27

Maquetador web.........................................................................................Página 27

Site Buder................................................................................................... Página 28

Dominio...................................................................................................... Página 28

Hosting....................................................................................................... Página 29

Panel de control..........................................................................................Página 29

SSL............................................................................................................. Página 29

Backups............................................................................................................. Página 30

Comersialización digital.....................................................................................Página 30
Google my Business..........................................................................................Página 30

SEO................................................................................................................... Página 31

SEM................................................................................................................... Página 31

CAPITULO II
INVESTIGACION
Identidad Institucional………………………………………………………………………………….…….…………… Página 33
Imagen Institucional ………………………………………………………………………………….……….………..… Página 37
Comunicación Institucional………………………………………………………………………………………….……Página 46
Realidad Institucional……………………………………………………………….………………………………..…… Página 47

INDICE DE IMÁGENES
IMAGEN No. 1
ÁRBOL DE PROBLEMAS……………………………………………………….
…………………………………… Pág. 3

GRAFICA ESTADÍSTICA………………………………………………………………………..……………………………..……………….. Pág. 9

DEDICATORIA
Ante todo doy gracias a Dios por ser fuente de sabiduría, por ser mi guía y fortaleza
durante este trayecto continuo de aprendizaje y crecimiento. A mis padres Freddy
Garcia Vásquez y María Tereza Cepeda Copa, quienes con su apoyo y sacrificio me
brindaron las herramientas necesarias para culminar este recorrido, a ellos dedico este
logro, fruto de esfuerzo y compromiso. A mis docentes, quienes con pasión y entrega
compartieron conmigo sus conocimientos y me guiaron en este proceso de
aprendizaje, abriendo las puertas de un mundo lleno de posibilidades.
A cada uno de ustedes mi más sincero agradecimiento por ser parte fundamental de
este logro.

RESUMEN DE TRABAJO
El presente proyecto de grado se estructura en cuatro capítulos que a continuación se
estarán desglosando , el capítulo uno del presente proyecto introduce al tema de
estudio, presentando una contextualización general del proyecto a tratar, el
planteamiento y formulación del problema de investigación y se establecen los
objetivos, generales y específicos, que busca responder la pregunta de investigación
planteada, así mismo la justificación del estudio destaca la relevancia de la
investigación, como también se expone la metodología y técnicas de estudio que se
abordaran para recolectar y analizar los datos y por último se delimita el alcance en
tres aspectos: temático, espacial y temporal.

El segundo capítulo se focaliza en la elaboración del marco teórico del proyecto, que
lleva consigo conceptos bajo las cuales se basa el proyecto, permitiendo identificar,
definir y analizar los conceptos clave que forman el soporte conceptual sólido y
coherente de esta investigación.

El capítulo tres presenta el desarrollo de la propuesta, materializando la información

que se recopilo con la metodología y técnicas de investigación en un producto que
cumpla con los objetivos planteados y necesidades del usuario. El sitio de ventas en
línea, se detalla el proceso de desarrollo que abarca desde el diseño inicial, tomando
en cuenta criterios técnicos, la maquetación, prototipado, la integración de plugins,
dominio y hosting entre otros aspectos técnicos que forman parte de la creación del
sitio. Este capítulo demuestra la capacidad de implementar los conocimientos
adquiridos en un producto que cumpla las necesidades de los usuarios.

El cuarto y último capítulo, constituye la culminación del proceso investigativo con la

respectiva conclusión, en la que se sintetiza los hallazgos más relevantes de la
investigación, continuando con las recomendaciones del proyecto y por ultimo los
anexos que apoyan los resultados de la investigación, los cuales ofrecen una base
documental que sostiene los resultados de la investigación.
INTRODUCCION

El actual panorama en la que estamos viviendo, denota al comercio en línea como una
instancia fundamental para la economía de las empresas, en nuestro ámbito regional el
comercio en línea sea expandido en gran manera estos últimos años por lo cual, en
este contexto ShockProtein siendo una empresa reconocida a nivel nacional en el rubro
de alimentos saludables, no es extraña a esta realidad, en un mercado donde las
empresas están en constante competencia por visibilidad y reconocimiento de su
marca, muchas son opacadas por la desactualización y falta de estrategias de ventas
en línea.

El propósito del proyecto tiene como principal objetivo diseñar una tienda virtual para
la empresa ShockProtein tomando en cuenta los criterios técnicos y de diseño web
necesarios para la implementación exitosa de una tienda en línea.

La propuesta de desarrollo de un sitio de ventas en línea tendrá dos características la

flexibilidad y la accesibilidad, la primera permitirá realizar actualizaciones de
información y productos de manera rápida y sencilla, y la segunda que los clientes
puedan realizar compras en cualquier momento del día de forma cómoda y
conveniente, que en conjunto ayudará a la empresa a expandir su alcance a nivel
nacional y a fortalecer su posicionamiento en el mercado y patrimonio económico.

El desarrollo del sitio de ventas en línea partirá de las necesidades e intereses del
público objetivo que son personas que protegen su salud y la ingesta de alimentos
saludables altos en proteína, para ello se hará una investigación sobre sus necesidades
e interés, se recabara tal información por medio de metodologías apropiadas, el tipo de
investigación será de carácter descriptivo que nos proporcionara herramientas para la
recopilación de información sobre las variables de público objetivo y la detección de
fortalezas y debilidades de la competencia en el ámbito del comercio virtual.

La investigación también tendrá de un enfoque de investigación mixto para recolectar

información precisa y un método de investigación empírico para obtener una
comprensión más completa sobre las experiencias, creencias y motivaciones del
público a estudiar y técnicas de investigación como la encuesta y un grupo focal para
la recopilación de datos relevantes, de opiniones y perspectivas del público objetivo

1
que ayuden al desarrollo de la tienda en línea de Shock Protein que sea funcional y
atractiva.

ANTECEDENTES

Antecedentes generales

Cuando hablamos de un sitio de ventas en línea debemos partir de la idea que este sea
fácil de navegar, accesible para todos los usuarios, brindar una experiencia agradable,
concretar con sus objetivos y satisfacer los requerimientos de tener una interfaz
atractiva que transmita la identidad de la empresa o marca, mediante el uso de paleta
de colores, tipografía e iconografía. La interfaz web, compuesta por la interacción entre
la experiencia de usuario (UX) y la interfaz de usuario (UI), desempeña un rol
importante en la navegabilidad del usuario, de forma resumida la UX se centra en la
usabilidad, la accesibilidad y la funcionabilidad, por el contrario, la UI se encarga de la
estética visual. Un diseño web efectivo debe integrar armoniosamente ambos aspectos
para crear una experiencia online memorable y que pueda ser autoadministrable.

Antecedentes específicos

En la era tecnológica actual, donde la competencia entre empresas por conseguir

visibilidad es cada vez más fuerte, el diseño web se ha trasformado en un agente
importante para del éxito online. Los sitios web ya no son simples escaparates
virtuales, sino interfaces interactivas que compiten por la atención de un público cada
vez más demandante. Shock Protein, fundada por el licenciado Alejandro Martin
Larrain, es una empresa comprometida a la elaboración y producción de alimentos
nutritivos a base de maní, entre sus principales productos esta la barra proteica de
maní, las galletas proteicas y la crema de maní, la empresa se encuentra presente
dentro el mercado desde el 2019, la dirección donde se elabora los productos y el
envasado es en la Av. Decima S/N Zona Esmeralda Norte Av. Villazón km 6.5, la
tienda física está ubicada en la ciudad de Cochabamba en la Av. Heroínas y Antezana,
además que cuenta con puntos de venta autorizados en los departamentos de Santa
Cruz, Beni, Potosí, La Paz, Oruro y Sucre, las ventas que realiza es a través de pedidos
por mayor por medio de sus redes sociales: Facebook, Instagram y WhatsApp.

Shock Protein que en castellano es proteínas de choque, “Pertenecen a un grupo de

proteínas que ayudan a proteger las células del estrés que les producen elementos
como el calor, calor y las cantidades bajas de oxígeno o glucosa” (Diccionario de

2
 Cáncer NCI, 2011). La empresa tiene una inactiva participación en el mercado digital
que afecta significativamente al reconocimiento de la marca y posición comercial, en
este sentido la presente investigación busca la implementación de un sitio de ventas
en línea que llegara a fortalecer su marca e impulsar la comercialización de sus
productos con mayor facilidad, automatizando sus ventas y otorgándoles mayor
presencia online y profesionalismo.

PLANTEAMIENTO DEL PROBLEMA

Identificación del problema

La información digital de la empresa Shock Protein s es que no cuenta con un sitio web
que permita agrupar sus redes sociales para una menor demora de atención al cliente
que ocasiona en muchos casos el abandono y desanimo por parte de los consumidores
finales, que coyunturalmente afecta no solo a su limitada presencia en el mercado
virtual, sino fundamentalmente a una mayor posibilidad de generar mayores ingresos.

Árbol de Problemas
Gráfico N°1

Tácticas de Desconocimiento de Empresa poco visible Carece a tener un

marketing digital la marca en el ante un mercado alcance significativo
poco relevantes. ámbito online. online saturado. en sus redes sociales.

Efectos

Limitada presencia en el mercado de ventas en línea de la

Problema
empresa Shock Protein en la ciudad de Cochabamba,
2024.

Causas

Ausencia de un
Poca importancia a la Poca constancia de
departamento Alta competencia en
publicidad en sus publicidad en sus
dedicada al el rubro.
redes sociales. redes sociales.
marketing digital.
Fuente: elaboración propia, 2024

3
EFECTOS

Tácticas de marketing digital poco relevantes: Las acciones de publicidad digital no

están alineadas con los objetivos de la marca, ni con las necesidades del público
objetivo, lo que ocasiona poco interés al contenido de la empresa por parte de los
consumidores.

Desconocimiento de la marca en el ámbito online: La empresa tiene una escaza

visibilidad en redes sociales, lo que limita el alcance de la marca y reduce las
oportunidades de generar ventas.

Empresa poco visible ante un mercado online saturado: La alta competencia en el

mercado en línea dificulta a la empresa Shock Protein a ser percibida como una opción
sobresaliente por parte de los consumidores, esto puede llegar a afectar directamente
a los ingresos económicos hacia la empresa.

Carece a tener un alcance significativo en sus redes sociales: La empresa no ha llegado

a consolidar una comunidad solida en sus redes sociales, por tal motivo impide su
capacidad para interactuar con los clientes.

CAUSAS

Ausencia de un departamento dedicada al marketing digital: La falta de un equipo

dedicado especialmente al área, impide la creación estratégica de acciones que
comuniquen la presencia constante en línea de la empresa ShockProtein.

Poca importancia a la publicidad en sus redes sociales: La empresa no designa los

elementos requeridos para el desarrollo de estrategias y campañas publicitarias
efectivas en las redes sociales, lo que limita la presencia de la marca.

Alta competencia en el rubro: El mercado en el que opera ShockProtein tiene una gran
presencia en línea, donde todas las empresas compiten por el reconocimiento de su
marca, por lo que ShockProtein debe ofrecer una propuesta de valor única, a través de
estrategias de marketing que logre diferenciarse de la competencia.
Poca constancia de publicidad en sus redes sociales: ShockProtein no sostiene una
constante frecuencia de difusión de contenido en sus redes sociales, la falta de
constancia dificulta el alcance y la interacción con los consumidores.

4
Formulación del problema/pregunta

¿Qué aspectos técnicos y de diseño se deben implementar en el desarrollo de una

tienda en línea para estar presente en el mercado virtual de forma competitiva?

OBJETIVOS

Objetivo general

Diseñar una tienda virtual para la empresa Shock Protein tomando en cuenta los
criterios técnicos y de diseño web, diseño UI/UX principalmente, necesarios para la
implementación exitosa de una tienda en línea.

Objetivos específicos

- Estudiar las necesidades e intereses del público objetivo en el ámbito

demográfico, geográfico y psicográfico.
- Estudiar el comportamiento y características de las plataformas virtuales de la
competencia.
- Explorar nuevas tendencias y actualizaciones en el campo del Diseño de
web y Diseño UI/UX para diseñar una interfaz intuitiva y una experiencia de
usuario optima que ayude a la navegación e interacción con el sitio.
- Implementar plugins de seguridad para prevenir ataques de hackers y proteger
la proteger la información.
- Implementar un plan de marketing en línea, dar a conocer el sitio de ventas en
línea y generar tráfico.

JUSTIFICACION

Justificación académica

5
Este proyecto forma parte del pensum de la carrera de Diseño Gráfico y producción
Crossmedia, por ende, aplicare mis conocimientos obtenidos en la carrera, lo que me
permitirá consolidar mi formación como profesional.

Las materias formativas para el desarrollo del proyecto son plataformas web, diseño y
maquetación web y lenguajes de programación que forman las bases esenciales sobre
las cuales se edificará este proyecto, a ello se suma mi experiencia vivida en la materia
de Proyecto Intermedio Integrador que puso en práctica mis conocimientos sobre
diseño UI/UX y permitirá desarrollar una propuesta innovadora, estética y sobre todo
funcional.

Justificación profesional

La formación en la carrera de Diseño Gráfico y Producción Crosmedia, proporciono

herramientas y conocimientos para la implementación de un proyecto de este tipo, la
percepción estética y de comprensión sobre los principios del diseño, diseño UI/UX
permitirán crear una interfaz intuitiva, estética y funcional, alineados con la identidad
de la marca. En este sentido la creación de este sitio de ventas impulsara al
crecimiento económico de la empresa, contribuirá a la marca con posicionamiento
digital dentro el mercado y automatizara la venta de sus productos.

Justificación técnica y administrativa

Para la creación del sitio web se utilizarán herramientas de desarrollo “frond End”, el
cual brindara una experiencia de usuario optima, que interactúe con los usuarios a
través de los elementos que compongan el sitio de ventas y conocimientos de diseño
gráfico, en cuanto a composición y jerarquización de elementos del sitio de ventas para
retención de la audiencia por medio de la estética visual de la interfaz. La elección del
CMS como WordPress para el desarrollo del sitio de ventas en línea nace de la idea de
que este sea autoadministrable, lo que permitirá a la empresa a gestionar de manera
autónoma su información y contenido de su tienda en línea, de tal modo que reduce la
dependencia de terceros para realizar actualización o modificaciones.

Justificación económica

6
La creación de un sitio de ventas en línea para la empresa Shock Protein representa
una inversión estratégica para la expansión del mercado a nivel nacional, superando
las limitaciones geográficas, lo que se traduce en consolidación de marca en nuevos
mercados, llegar a una audiencia más extensa y aumento potencial de ventas.

Justificación social

El proyecto tendrá un impacto positivo en la sociedad, mediante la plataforma en línea

se fomentará la mejora de hábitos alimenticios saludables, pues se facilitará el acceso
al consumo de alimentos saludables y altos en proteína, contribuyendo al consumo de
productos de origen nacional.

MARCO METODOLÓGICO

Tipo de investigación

La creacion de una tienda digital requiere la comprensión profunda del público objetivo
y el comportamiento de los competidores en las plataformas virtuales, por ello se
decidió utilizar la clase de investigación descriptiva ya que que nos proporcionara
herramientas necesarias para la recopilación de información valiosa relacionada a la
creación del sitio web. Así mismo nos ayudara a reconocer las fortalezas y debilidades
de la competencia en las plataformas virtuales y por último facilitara la investigación
de tendencias en cuanto al diseño web (Diseño UX y Diseño UI) para brindar una mejor
experiencia más moderna, atractiva y funcional a los usuarios.

Enfoque de investigación

Para el presente proyecto del primer objetivo específico se determinó utilizar un

enfoque mixto el cual responderá a un enfoque cuantitativo como cualitativo, con el
objetivo de describir y recolectar información de las variables estudiadas a través de
datos numéricos y así mismo comprender de forma más amplia y detallada información
más contextualizada a partir de la investigación del público objetivo estudiado.

Método de investigación

7
Para este proyecto se definió el método de investigación empírica, esta es una
herramienta que permitirá comprender el significado profundo de los datos debido a
que transciende más allá de una simple descripción de lo que se observa y se enfoca
en comprender las experiencias, motivaciones y valores del público objetivo a estudiar
que nos ayudará a obtener una comprensión completa y precisa los resultados que se
está investigando.

Técnicas de investigación

Para profundizar en la investigación del proyecto en marcha se decidió utilizar una

combinación de dos técnicas de investigación que son: encuesta y grupo focal, la
primera permitirá recopilar datos relevantes para la investigación, obteniendo una
visión general y cuantitativa de las opiniones y comportamiento de un amplio
segmento del público objetivo, respecto a la utilización de plataformas virtuales para la
compra de productos nutritivos. La segunda, complementara a la primera técnica, con
la diferencia de que con esta obtendremos una riqueza de información, más detallada
y profunda sobre las opiniones y perspectivas del grupo seleccionado de personas.

ALCANCE

Delimitación temática

Para la creación de un sitio de ventas se tomará en cuenta criterios de Diseño UX/UI,

que tiene que ver con la funcionabilidad y la estética del sitio, la importancia radica en
que este proyecto facilitara la búsqueda de información y compra de productos de la
marca. El desarrollarlo del sitio de ventas en línea utilizará un CMS específicamente
WordPress y el maquetador Divi para crear una interfaz de usuario personalizada,
también se hará uso del plugin WooCommerce, imprescindible para gestionar el
catálogo de productos y el proceso de compra. En síntesis, la plataforma diseñada es
un CMS autoadministrable, es decir que la empresa podrá actualizar y modificar la
información del sitio de manera autónoma sin la necesidad de terceros.

Delimitación espacial

La propuesta del proyecto se llevara a cabo en la ciudad de Cochabamba - Bolivia,

ShockProtein es una empresa que cuenta con una planta de producción ubicada la Av.

8
Decima S/N Zona Esmeralda Norte Av. Villazón km 6.5, así mismo cuenta con un punto
de venta físico, ubicada en la Av. Heroínas y Antezana y con otras 7 sucursales en
diferentes departamentos del país, por tanto, el sitio de ventas en línea tendrá un
alcance global, permitiendo a la empresa tener un alcance sin restricciones
geográficas.

Delimitación temporal

El proyecto del sitio de ventas en línea se desarrollará durante un periodo de dos

semestres académicos del mes de marzo a diciembre en la gestión 2024. Dentro de
este periodo se desarrollará la interfaz a lineados con los objetivos del proyecto.

ESTADOS DE LA INVESTIGACIÓN

Fuente: elaboración propia, 2024

1. Análisis del comportamiento de compra online – 10%

I
2. Proyectos de desarrollo de un prototipo de aplicación web – 30%

3. Proyectos de diseño de una plataforma web – 30%

4. Plan de negocio para el desarrollo de una interfaz web – 20%

5. Influencia de las redes sociales – 10%

9
A partir de la investigación bibliográfica se identificó seis áreas de producción
académica en torno al desarrollo de un sitio web. La primera área, que representa el
mayor porcentaje con un 30% tiene que ver con proyectos de desarrollo de prototipo
de aplicación web, la segunda área también con un 30% trata sobre el diseño e
implementación de una plataforma web, incluyendo aspectos como la interfaz de
usuario, la experiencia de usuario y la gestión de contenido, la tercera área con un
20% trata sobre un plan de negocio para el desarrollo de una interfaz web, en la cual
determina la factibilidad y viabilidad de dicho proyecto.

Así mismo un proyecto relacionado con el comportamiento de compra online y

finalizando un proyecto sobre la influencia de las redes sociales, ambos proyectos
representan un 10%. Estas áreas de estudio proporcionaran una base sólida para el
desarrollo del proyecto que se está llevando a cabo.

Área uno: Proyectos de desarrollo de un prototipo de aplicación web

En esta línea de trabajo se encuentran tres proyectos de investigación que abordan

proyectos de desarrollo de aplicación web. El primer trabajo corresponde a Daniel
Arcos Alvarado (2023) titulado “Desarrollo de un prototipo de aplicación web para
promover una alimentación saludable a través de la recomendación de alimentos y
retos nutricionales”. El problema plantea la interrogante: ¿Qué estrategias se llevarán
a cabo para desarrollar una app Nutri-Doc para que fomente hábitos de alimentación
saludable?

La investigación tiene como objetivo general: Crear una aplicación web mediante el
framework Next Is para dar información de alimentacion nutricional de calidad. La
perspectiva teórica del trabajo aborta las diferentes herramientas y metodologías que
se utilizaron para desarrollar la aplicación web, así mismo se menciona las ventajas de
Kanban sobre Scrum, la definición de un framework y las ventajas de usar React,
Next.js y material UI. Se utilizó la metodología Kanban que se basa en la presentación
continua de valor al cliente y utiliza tableros visuales para gestionar el flujo de trabajo.

La investigación concluye con la aplicación Nutri-Doc que es una plataforma de

aplicación innovadora que ofrece una solución tecnológica personalizada para brindar
sugerencias alimenticias especializadas en la prevención de enfermedades crónicas no
transmisibles, a través de una aplicación intuitiva que permite a los usuarios registrar
su consumo de alimentos, generar planes alimenticios personalizados y monitorear su

10
progreso, todo esto de manera segura, resguardando su información y brindando una
experiencia fluida.

El segundo trabajo corresponde a Oscar Junior Calvo titulado “Intervención de una

progresiva web app para la promoción de hábitos saludables en preescolares”. El
problema plante la interrogante: ¿Qué herramientas tecnológicas se necesitan para
ayudar a los padres con el control de la alimentación de sus hijos? Por su parte, el
objetivo general responde el problema de la siguiente manera: Valorar el impacto de la
calidad alimentaria de una aplicación web avanzada para la promoción de hábitos de
niños en edad preescolar.

La perspectiva teórica del trabajo aborda, por un lado, el desarrollo de la web progresa
que proporciona capacidades adicionales como soporte fuera de línea, lo cual se
consideró como una alternativa adecuada para este proyecto, y por otro lado, se
realizó una investigación sobre la alimentación de este segmento preescolar, recetas
saludables, envió de loncheras y actividad física de los pequeños. Las herramientas
investigación que se usaron fueron encuestas a padres sobre la ingesta de alimentos
de sus hijos en edad preescolar.

A manera de conclusión este estudio muestra que la aplicación web progresiva tuvo un
efecto en la mejora de conducta alimentaria en la dieta de preescolares, en la
composición de la lonchera y aumento de actividad física.

El tercer trabajo corresponde a Ollague Mosquera Mildred Lissette (2017) titulado

“Prototipo de aplicación web para el control de nutrición de niños de 1 a 10 años”. El
problema plantea la interrogante: ¿Qué estrategias se llevarán a cabo para el
desarrollo del prototipo de aplicación web para el control de nutrición de niños de 1 a
10 años? Al tomar en cuenta el objetivo general: Proponer un aplicativo web de control
de nutrición y crecimiento para niños de 1 a 10 años de edad. La perspectiva del
trabajo aborda el tema del uso de tecnología para el campo de la salud en este caso
para el registro de la alimentación por medio de teléfonos inteligentes, que facilitan dar
un servicio rápido, técnico, investigativo y de un fácil manejo.

La metodología utilizada en el área de técnicas de investigación fue de modo

cuantitativo, a ello se suma con un alto poder de importancia la información primaria a
través de las encuestas realizadas personas de sexo femenino y masculino de 18 años

11
y padres de familia que se preocupan en llevar un seguimiento sobre la alimentación
nutricional y desarrollo de sus hijos.

Finalizando como conclusión se arroja la siguiente evidencia: es indispensable una

aplicación web que facilite a los padres de familia y personal de pediatría a tener
control de la ingesta de alimentos en niños, enfatizando más niños de 1 a 10 años por
ser una edad en la que se fortalecen tanto físicamente y mentalmente para que más
adelante ellos puedan llevar un estado de vida saludable que permita rendir su
capacidad física e intelectual en diferentes áreas, con total normalidad y libre de
cualquier problema relacionado con la nutrición y crecimiento.

Área dos: Proyectos de diseño de una plataforma web

En esta línea de trabajo se encuentran tres proyectos de investigación que abordan

proyectos de diseño de plataformas web, incluyendo aspectos como la interfaz de
usuario, la experiencia de usuario y la gestión de contenido.

El primer trabajo corresponde a Davit Martínez Canet (2018) titulado “Diseño e

implementación de una plataforma web para la publicación y consulta de recetas de
cocina”. El problema enuncia de la siguiente manera: ¿Qué tecnologías se necesitarán
para compartir recetarios de comida de chefs de todo el mundo? Por su parte el
objetivo general responde: Desarrollar una plataforma digital para la difusión y
asesoría de recetas de cocina. La perspectiva teoría da a conocer de la siguiente
manera la etapa número uno es de análisis de los puntos que se deben cumplir para la
realización de este proyecto, a continuación, se hace un levantamiento de datos del
público meta, en base a ello se toman decisiones para la elaboración del prototipo web
y por último pasa por una revisión, se hizo verificaciones de usuario y se subsanaron
fallas detectadas.

El segundo trabajo corresponde a Roció Teodora, Berrospi Meza, Marco Antonio,

Hernández Mendoza, Julio César Ramírez Villegas, Osmer André Blas Minaya (2023)
titulado “Plataforma digital SanoYa de alimentos saludables para Lima”. El problema
formula la siguiente cuestionante: ¿De qué manera se utilizarán las tecnologías
digitales para facilitar la adquisición de productos saludables? El objetivo general
responde de la siguiente manera: La plataforma busca ser una alternativa innovadora,
ágil y efectiva en la atención, presentándose al usuario como una aplicación que ofrece
opciones de alimentación saludable para el desayuno, el almuerzo y cena.

12
La perspectiva que aborda por un lado la investigación de mercado sobre el bienestar y
alimentación de la población peruana a raíz de la pandemia, el aumento de sobrepeso
y por otro lado una investigación que abarca el desarrollo de plataformas digitales
relacionadas con salud y nutrición. La metodología abarca un modo de investigación
descriptiva debido a que se necesita analizar atributos del púbico de estudio, por ende,
se realizaron encuestas para el levantamiento de datos. Este proyecto concluye que el
88% de las personas encuestadas emplearían la aplicación con una frecuencia de
cuatro veces a la semana.

El tercer proyecto corresponde a David Josué Bone Lapo y Dennis Leonardo Decimavilla
Quimis (2022) titulado “Prototipo web para el diseño de un sistema de recomendación
inteligente de dieta saludable post COVID-19 bajo condiciones de incertidumbre
neutrosoficas”. El problema plantea la siguiente cuestionante: ¿Cómo un prototipo web
de sugerencias para dietas saludables después del COVID-19 basado en la
incertidumbre neutrosofica, contribuirá al monitoreo de una alimentación adecuada?
Por su parte, el objetivo general responde: Desarrollar un sistema de sugerencias para
una dieta saludable post covid-19 a través de un prototipo web, con el fin de promover
una alimentación adecuada y prevenir posibles problemas de salud derivados de la
pandemia.

La perspectiva teórica aborda una investigación de antecedentes del estudio a tratar,

sobre el uso de la neutrosofia y sistemas de sugerencias en la salud, como también se
realizó una investigación sobre la inteligencia artificial y las técnicas que conforma
para su utilización en el desarrollo de plataformas web. Se optó por llevar a la practica
la metodología KDD Knowledge Discovery in DataBases, el cual se puede obtener
conocimiento desde agrupación de datos. Concluyendo, la información obtenida fue de
contribución para la investigación de sistemas de recomendación y neutrosofia, así
mismo la metodología Knowledge Discovery in DataBases los cuales fueron la base de
todo este proyecto.

Área tres: Plan de negocio para el desarrollo de una interfaz web

En esta línea de trabajo se encuentran dos trabajos de investigación que abordan

proyectos relacionado con plan de negocio para la creación de una interfaz web, lo que
conlleva determinar la viabilidad y factibilidad de dichos proyectos.

13
El primer trabajo corresponde a Angelica María Flores Fuentes – Karina Pedraza
Maquera – Jessica Elina Vargas Ore (2020) titulado “Plan de negocio para diseño y
desarrollo de aplicación móvil de bienestar nutricional”. El problema plantea sobre que
herramientas tecnológicas se utilizaran para incentivar el consumo de alimentos sanos
en la ciudadanía peruana que padece de diabetes mellitus. Por su parte, el objetivo
general consiste en establecer un plan de negocios para el desarrollo de un aplicativo
móvil que contribuya con el asesoramiento de alimentación nutricional virtual y
personalizada. La perspectiva teórica que aborda es inicialmente la investigación sobre
la diabetes, ya que existe un alarmante asenso de población diabética peruana, por tal
motivo se realizó un levantamiento de datos al público objetivo que ayudo a poder
hacer factible este proyecto. La metodología usada considero técnicas de entrevista a
expertos en salud, grupo objetivo de personas diabéticas y un focus group a clientes
potenciales.

Concluyendo, se evidencio que hay una creciente solicitud en la ciudadanía por

optimizar sus hábitos alimenticios y de acuerdo a los resultados obtenidos de la
investigación se ultima que es factible establecer un plan de negocios para el
desarrollo de KawsayFit, la aplicación móvil de recomendación alimenticia, que está
dispuesto a optimizar los hábitos alimenticios del grupo poblacional con diabetes y
motivando a tener una ingesta de alimentos sanos que como resultado se tenga un
óptimo desempeño y mejora de vida para la población peruana.

El segundo trabajo pertenece a Hllen Heriburg Gallegos Moreno (2021) titulado “Plan
de negocio para determinar la viabilidad de una tienda online de alimentos saludables
en Lima Metropolitana”. El problema plantea sobre cómo solucionar la desinformación
que existe sobre los beneficios y tabla nutricional de los alimentos envasados nutritivos
en la ciudad de Lima Metropolitana. Por su parte, como objetivo general se tiene
analizar la viabilidad comercial, operativa, económica y financiera de una tienda en
línea dedicada a la distribución de productos saludables en Lima Metropolitana.

La perspectiva teórica aborda inicialmente la investigación empleando recursos

secundarios para conocer las novedades en el ámbito de productos alimenticios a nivel
global, por otro lado, se realiza una investigación de mercado que incluyo una
investigación cualitativa, por medio de entrevistas a profundidad con profesionales que
puedan contribuir la creación de la propuesta de negocio mediante encuestas en linea
para ver los requerimientos del público meta. Concluyendo, excelente ocasión para
desarrollar este plan de negocios, al impacto que genero la pandemia del Covid-19 que

14
ha afectado a las personas en diferentes ámbitos, como la alimentación, ya que un
débil sistema inmunológico puede afectar en gran medida la estabilidad física de
individuo y esto debido a la poca importancia que se le da a la alimentación saludable.

Área cuatro: Análisis del comportamiento de compra online

En esta línea de trabajo se encuentra una investigación que aborda un proyecto

relacionado con el comportamiento de compra online de alimentos saludables es un
fenómeno complejo y en constante evolución. Las empresas que comprendan y se
adapten a las nuevas tendencias y comportamiento de los consumidores tendrán un
mayor porcentaje de éxito en el mundo digital actual en el que nos movemos.

Este proyecto pertenece a Luis Vincenzo De Martis Catter – Fadwa Salhi Polanco (2020)
titulado “Análisis del comportamiento de compra online de alimentos saludables en
consumidores de Lima Metropolitana”. El problema de este proyecto plantea sobre la
conducta de compra en línea de alimentos saludables de la población de Lima
Metropolitana, el cual tiene como objetivo general reconocer como es la conducta de
compra en línea de alimentos saludables de las personas de esta ciudad.

La perspectiva teórica aborda la investigación del comportamiento de compra online

en este país, lo cual por medio de técnicas de investigación se recolecta datos del
público objetivo y en base a ello se realiza dicho proyecto. Se usaron las siguientes
técnicas de investigación: Un cuestionario realizado a personas de 18 a 55 años
ciudadanos de Lima, el segundo instrumento que se uso fue una entrevista a
profundidad a un experto especialista en el análisis de comportamiento humano, por
último, con el uso de la tecnología se hizo un seguimiento ocular (eyetracking) para
analizar patrones visuales con la web de dos ofertantes de alimentos saludables.

En conclusión, las tiendas virtuales de alimentos saludables tienen un gran potencial

para convertirse en líderes en el mercado de alimentos saludables. Al enfocarse en las
necesidades de sus clientes, ofrecer una experiencia de compra superior y aprovechar
las ventajas del comercio electrónico, estas tiendas pueden alcanzar un crecimiento
significativo y una rentabilidad sostenida.

Área cinco: Influencia de las redes sociales

15
En este trabajo se encuentra una investigación que aborda sobre el poder genera las
redes sociales en la alimentación saludable, este tema es complejo y tiene dos caras, si
bien pueden ser una herramienta valiosa para promover hábitos alimenticios positivos,
también pueden tener un impacto negativo en nuestras elecciones alimentarias.

Este proyecto corresponde a Laura Miguiez Fernandez (2019) titulado “Influencia de las
redes sociales en la alimentación saludable”. El problema plantea sobre que
instrumentos se emplearan para analizar el dominio que tienen las cuentas de comida
saludable en el comportamiento de la ingesta alimenticia en sus seguidores.

Como objetivo general se tiene el observar e interpretar la respuesta de los usuarios en

redes sociales al ver los contenidos de alimentos saludables, por otra parte, la
perspectiva teórica aborda por un lado la investigación acerca de las causas, efectos
de la alimentación y cómo influye las redes sociales en el comportamiento del
consumidor, así mismo se exponen los datos recopilados tras la ejecución de una
encuesta al público objetivo.

La técnica de investigación que implementa es una encuesta que consiste en varias

cuestionantes que se distribuyeron de forma online a través de la red social Facebook y
otras plataformas. Concluyendo que cuentas de comida saludable juegan un papel
crucial en la promoción de hábitos alimenticios nutritivos, especialmente entre los
adolescentes. Es importante fomentar el seguimiento de estas cuentas para mejorar la
salud alimenticia de la población.

16
 CAPITULO I
CAPITULO I
MARCO CONCEPTUAL

El marco conceptual se basa en los principales conceptos relacionados con el proyecto

presente, que van ligados con la creación de un sitio de ventas en línea así como el
desarrollo técnico que corresponde y de igual manera la experiencia del usuario, que
en conjunto forma una base sólida para la comprensión de este proyecto.

1.1. Diseño Web

Islas (2022) dice:

El diseño web consiste en planificar y organizar el contenido de una página para
compartirlo en Internet. Combina elementos estéticos y funcionales, definiendo
cómo se verá el sitio web, incluyendo colores, fuentes y gráficos. También
influye en la estructura del sitio y en la experiencia del usuario.

El diseño web es aquello que vemos y experimentamos al navegar en un sitio web,

tiene que ver con la parte estética y funcional, como el estilo gráfico, contenido
multimedia, elementos interactivos, leyes de Gestalt, la accesibilidad y interacción que
estas tienen con el usuario.

17
1.2. Desarrollo web

Coppola (2023) dice:

Se conoce como desarrollo web al proceso de crear y mantener un sitio web
que sea funcional en internet, a través de diferentes lenguajes de
programación, según el modelo y la parte de la página que corresponda… el
desarrollo web va de la mano del backend, Se asegura de que le código que
sostiene la estructura sea funcional y a la vez lógico.

El desarrollo web es lo que va detrás del sitio web, todo aquel código que no es visible,
la cual utiliza un lenguaje programación para construir sitios funcionales, tiene como
objetivo principal responder de forma correcta las interacciones que vaya realizando el
usuario.
1.3. Diseño UX

Norman, D., & Nielsen, J. (1998) dice:

El primer requisito para una experiencia de usuario ejemplar es satisfacer las
necesidades exactas del cliente, sin complicaciones ni molestias. A
continuación, vienen la simplicidad y la elegancia que dan lugar a productos
que son un placer poseer y un placer usar. La verdadera experiencia de usuario
va mucho más allá de ofrecer a los clientes lo que dicen que quieren o de
proporcionar funciones de lista de verificación. Para lograr una experiencia de
usuario de alta calidad en las ofertas de una empresa, debe haber una fusión
perfecta de los servicios de múltiples disciplinas, entre ellas la ingeniería, el
marketing, el diseño gráfico e industrial y el diseño de interfaces.

Es el proceso de crear plataformas que tengan facilidad de uso, intuitivos y eficientes,

que el recorrido del usuario sea fluido, sin complicaciones, que se sienta cómodo y
confiado al navegar en el sitio, por tanto, el UX apela lo emocional, la manera en el que
el usuario genere sentimiento al navegar por el sitio, de modo que pueda tener un
resultado de experiencia satisfactoria.

1.4. Diseño UI

Edu.ar, (2024) dice:

18
 Situamos el diseño UI en la fase de implementación, esta es la etapa donde las
ideas y prototipos de los diseñadores UX cobran vida. Cuando hablamos de
diseño UI (user interface design), nos referimos al diseño de la interfaz de usuario
y, por lo tanto, a la experiencia estética que resulta de ella.” La transformación
digital y el diseño UX/UI: un poco de contexto.

El diseño UI es el responsable de darle vida a la interfaz, es aquello con el que el

usuario interactúa, donde se combina la estética y la funcionalidad, este comprende
todos los elementos que se pueden visualizar en un sitio web o aplicación como los
botones de llamada a la acción, controles deslizantes, campos para añadir textos,
paleta de colores, tipografía, armonía visual y demás elementos con los que se
relaciona, logrando que el usuario de siente confortable, lo que asegura que el
recorrido sea visualmente atractivo y fácil de usar.
1.5. Diseño responsive

Adsmurai.com. (2024) dice:

El diseño responsive es una técnica de diseño web, que busca que un sitio web
o aplicación se adapte y responda de manera efectiva a diferentes dispositivos
y tamaños de pantalla. Con este diseño, un sitio web o aplicación puede ajustar
tu diseño y contenido para proporcionar una experiencia de usuario óptima en
una amplia gama de dispositivos, como por ejemplo ordenadores, tablets,
móviles, etc.

El diseño responsive es un sitio web accesible y adaptable a diferentes formatos y

orientaciones de pantalla, (monitores, celulares, tablet) esto significa que todos los
elementos que conforman (Tipografía, botones, imágenes, iconos) se adaptaran a la
medida de pantalla en la que se visualice, el beneficio que se obtine al contar con un
diseño responsive es que enriquece la experiencia del usuario, asegurando una
navegación sencilla y acorde al dispositivo en el que se opera.

1.6. Usabilidad

Burriel (2018) dice:

“La usabilidad se circunscribe en lo tangible que afecta a los primeros niveles de
la interacción de las personas con los artefactos digitales… la usabilidad se
centra en lo funcional.”

19
La usabilidad se enfoca en la comodidad que experimenta un usuario al interactuar con
un producto digital, como un sitio o plataforma en linea, la usabilidad tiene como
objetivo cumplir las siguientes características: facilidad de intuición, facilidad de
comprensión y facilidad de realizar acciones de manera rápida y eficiente.

1.7. Accesibilidad

Tim Berners-Lee (2024) dice:

“El poder de la web está en su universalidad. Que todo el mundo pueda acceder,
a pesar de la discapacidad, es un aspecto esencial.”

La accesibilidad web es la práctica de asegurar que un sitio web pueda ser utilizado por
cualquier tipo de personas, sin importar el estado físico en el que este, la importancia
de la accesibilidad radica en la práctica de la inclusión e igualdad de oportunidades
que es un derecho esencial de todas las personas y por lo cual mejora
significativamente la experiencia del usuario.

1.8. Interfaz

Porto, J. P., & Merino, M. (2011) dice:

La interfaz, por lo tanto, es una conexión entre dos máquinas de cualquier tipo,
a las cuales les brinda un soporte para la comunicación a diferentes estratos. Es
posible entender la interfaz como un espacio (el lugar donde se desarrolla la
interacción y el intercambio), instrumento (a modo de extensión del cuerpo
humano, como el mouse que permite interactuar con una computadora) o
superficie (el objeto que aporta información a través de su textura, forma o
color).

Definimos como interfaz a la interacción y el intercambio de información entre dos

componentes, ya sea usuario y sistema o sistema y sistema, a través de una interfaz
física que vendría siendo objetos y comandos que permiten añadir datos y controlar la
computadora, como el ratón o el teclado y la interfaz gráfica que interactúa
directamente con la computadora mediante ventanas e iconos.

1.9. Mapa de sitio

¿Qué es un mapa de sitio? (s/f) dice:

20
 Los mapas de sitio son archivos que proporcionan información sobre las
páginas, los videos y otros elementos de tu sitio, así como la relación entre
ellos. Los motores de búsqueda, como Google, leen este archivo para rastrear
tu sitio de manera más eficiente. Un mapa del sitio les indica a los motores de
búsqueda qué páginas y archivos de tu sitio consideras que son importantes, y
proporciona información valiosa sobre esos archivos.

Un mapa de sitio es una herramienta que da a conocer la estructura y organización del

contenido de forma jerárquica para guiar los usuarios y motores de búsqueda al
momento de explorar por el sitio y así lograr entender fácilmente como está
compuesto.

1.10. Wireframes

Herranz (2018) dice:

Los wireframes son el esqueleto del diseño. Se caracterizan por tener una baja
fidelidad visual, representando la interfaz en escala de grises y sin dedicar
demasiado tiempo al aspecto o estética del diseño. Se utilizan escalas de grises
con el propósito de que no haya un excesivo diseño visual o gráfico que pueda
distraer la discusión de lo realmente importante en un wireframe: el concepto,
la estructura y los componentes básicos del diseño.

Los Wireframes son el esqueleto de un sitio web, es una representación visual de cómo
se ira estructurando la información y la ubicacion de los elementos en la pantalla, todo
esto en una escala de grises para no distraer de lo que es más importante, la
información y elementos básicos, lo que quiere decir que no se tomara en cuenta
aspectos como el color, tipografía, o imágenes.

1.11. Prototipos

What are Prototypes? (2019) dice:

Los prototipos son modelos iniciales de un producto que simulan su diseño y
funcionalidad. Se crean para probar conceptos, recopilar comentarios e iterar
sobre el diseño antes de desarrollar el producto final.

Por otra parte, la creación de prototipos es el proceso experimental de creación

de prototipos. Los equipos construyen prototipos con distintos grados de

21
 fidelidad, desde prototipos en papel de baja fidelidad hasta modelos digitales de
alta fidelidad que se asemejan mucho al producto final.

El prototipo es una versión de muestra de cómo se vería el sitio web finalizado, en la

cual se puede observar y experimentar como interactuaría el producto concluido con el
usuario y todos los elementos que la componen e inclusive con pequeños efectos
visuales y animaciones, esto ya depende del grado de fidelidad que se le da al
prototipo, y todo ello para validar a funcionabilidad antes de su lanzamiento.

1.12. Avatar: el público ideal

Revella (2011) dice:

Es un arquetipo, un compuesto imagen de las personas reales que compran o
podrías comprar productos como los que tu vendes. Es un avatar que creas a
partir de lo que se aprende en entrevistas directas con tantos compradores
como sea posible.

El avatar es una representación del cliente ideal, construida a base de datos

demográficos, psicográficos, comportamiento, valores y creencias, que están generado
acorde a los objetivos de la empresa, contar con un avatar nos permite crear diseños
más personalizados y efectivos en base a las necesidades que demanda.

1.13. Usuario

Bembibre (2009) dice:

Para la informática es un usuario aquella persona que utiliza un dispositivo o un
ordenador y realiza múltiples operaciones con distintos propósitos. A menudo
es un usuario aquel que adquiere una computadora o dispositivo electrónico y
que lo emplea para comunicarse con otros usuarios, generar contenido y
documentos, utilizar software de diverso tipo y muchas otras acciones posibles.

Es importante definir al usuario como esa persona que interactúa con dispositivos
electrónicos, como tv, computadora, celular o tablets, la cual realiza acciones como la
creación de contenidos, acceder a información, enviar y recibir mensaje y muchas
otras de acuerdo a las necesidades que cada individuo tiene, con el fin de atender sus
necesidades y alcanzar sus metas.

22
1.14. Viaje de usuario
Worstell, (2023) dice:
El viaje del usuario es un término de marketing digital que se refiere al proceso
o ruta que sigue un usuario mientras interactúa con un sitio web, una aplicación
u otras plataformas digitales. Abarca múltiples puntos de contacto y etapas,
desde descubrir la plataforma hasta completar una acción deseada, como
comprar un producto o registrarse en un servicio. Comprender los recorridos de
los usuarios ayuda a los especialistas en marketing a crear estrategias efectivas
para interactuar con los usuarios, optimizar su experiencia y, en última
instancia, fomentar las conversiones o los resultados deseados.

El viaje del usuario son las acciones que realiza en la plataforma desde el primer
contacto, la lectura de información, el click a las secciones y demás operaciones hasta
el movimiento de interacción final con el sitio web. En síntesis es el recorrido que sigue
el usuario para encontrar lo que está buscando.

1.15. Página web

Definicion de Pagina Web, Que es, Significado y Concepto (s/f) dice:

Una página Web es la unidad básica del World Wide Web, o simplemente Web,
como se le llama comúnmente. El Web está integrado por sitios web y éstos a
su vez por páginas web… Una página de Internet o página Web es un
documento electrónico adaptado particularmente para el Web, que contiene
información específica de un tema en particular y que es almacenado en algún
sistema de cómputo que se encuentre conectado a la red mundial de
información denominada Internet.

La página web es una sección que corresponde a un sitio web, que enlaza a los
usuarios con contenido util, en la cual se puede visualizar mediante un navegador,
donde se combina textos, gráficos, elementos multimedia, elementos dinámicos,
dando como resultado transmitir información e interacción con el usuario

1.16. Sitio web

Sitio web: Definición, características, tipos y funcionamiento (2024) dice:

Un sitio web es un conjunto de páginas interconectadas alojadas en un dominio
específico y accesibles a través de internet. Estas estructuras permiten mostrar

23
 información, vender productos, ofrecer servicios y prácticamente cualquier otra
cosa que sean capaces de imaginar. Es decir, sirven como plataforma para que
tener presencia en línea y poder alcanzar a una audiencia global para
proporcionarle información de interés sobre sus actividades, productos o
servicios.
Un sitio web es un espacio virtual accesible a través de internet que contiene
información y recursos organizados en diferentes páginas alojadas en un servidor web,
el objetivo de un sitio web es brindar información, servicio o producto según la
empresa.

1.17. Tienda en línea

Galicia (2024) dice:

Una tienda online es un sitio web diseñado con el objetivo de vender productos
o servicios a través de herramientas de comercio electrónico. Funciona
mediante un catálogo de productos, un carrito de compras y un sistema de
pago en línea, que juntos facilitan las transacciones digitales.

Una tienda en línea representa la evolución del comercio tradicional, actualizado a las
demandas de un mercado cada vez más digitalizado, es un canal de distribución de un
catálogo digital de productos y servicios, donde el usuario por medio de un carrito de
compras puede elegir, adquirir y pagar por su producto de manera segura y sencilla.

1.18. Lenguajes de etiquetado

1.18.1 HTML

Gauchat (2017) dice:

HTML (HyperText Markup Language) es un lenguaje compuesto por un grupo de
etiquetas definidas con un nombre rodeado de paréntesis angulares. Esta
estructura define el espacio dentro el documento donde el contenido estático y
dinámico es posicionado y es la plataforma básica para toda aplicación. Para
crear un sitio o una aplicación web, lo primero que debemos hacer es
programar el código HTML que define la estructura de cada una de las páginas
que lo componen. (p.6)

24
Es un lenguaje de marcado empleado para establecer la estructura básica de una
página web, es aquí donde se define y se organiza toda la información que integra,
como párrafos, contenido multimedia, enlaces y otros elementos que componen una
página web, todos ellos de modo básico y estático.

1.18.2. CSS

Gauchat (2017) dice:

CSS (Cascading Style Sheets) es un lenguaje que se utiliza para definir los
estilos de los elementos HTML, como el tamaño, el color, el fondo, el borde, etc.
Aunque todos los navegadores asignan estilos por defecto a la mayoría de los
elementos, estos estilos generalmente están lejos de lo que queremos para
nuestro sitio web. (p.7)

Lenguaje de marcado que se utiliza para añadir el diseño estético y atractivo de la

página web, con el CSS se puede observar cómo se verá el sitio en base a la estructura
que se realizó con HTML, se puede añadir color, fuentes tipográficas, el diseño de
página, inclusive el diseño responsive que adapta el sitio a diferentes pantallas y por
otro lado se puede realizar animaciones sencillas y efectos visuales.

1.19. Lenguajes de Programación

1.19.1. JavaScript

Gauchat (2017) dice:

“JavaScript difiere de los demás lenguajes en que puede realizar tareas
personalizadas, desde almacenar valores hasta calcular algoritmos complejos,
incluida la capacidad de interactuar con los elementos del documento y procesar
su contenido dinámicamente.” (p.8)

Es un lenguaje de programación que da vida a la página web, une el lenguaje de

etiquetado HTML y CSS para hacerlos interactivos, realiza una personalización mucho
más compleja de interacciones como elementos dinámicos, botones, clics, menús
desplegables entre muchos más, permitiendo responder a las acciones del usuario.

25
 1.19.2. PHP

Niebla (2014) dice:

PHP es un lenguaje interpretado, es decir, que se traduce y se ejecuta en la
aplicación en el momento de usarse en lugar de compilarse en un archivo
ejecutable. Se utiliza principalmente en el lado del servidor y su objetivo
principal
es la creación de páginas web con contenido dinámico.

El PHP es otro lenguaje de programación que permite crear diversas aplicaciones web
desde blogs hasta paginas mucho más complejas, lo que permite crear sitios dinámicos
e interactivos.

1.20. CMS

Ortegón (2007) dice:

Es un sistema que permite actualizar el contenido de una página Web sin
involucrar especialistas ni conocimiento técnico, donde el administrador de
contenido permite adaptarse a las tendencias en Internet donde se está
pasando de tener contenidos estáticos a contenidos dinámicos y sitios
interactivos.

Un CMS se puede definir como una herramienta informática que se logra desarrollar sin
un profundo conocimiento técnico debido a la facilidad de uso que este tiene, se puede
administrar y modificar el contenido de manera intuitiva, por tanto un CMS permite el
almacenamiento, la actualización y visualización de los contenidos, con un adecuado
uso del CMS se puede llegar a un nivel alto de personalización y dinamismo esto
gracias a los plugins y plantillas que se le añaden.

1.21. WordPress

Manual de Uso de WordPress (2024) dice:

Wordpress fue creado como software para blogueo. Los blogs son una forma de
Content Management System (CMS) (Sistema de gestión de contenidos), es
decir, un sistema que facilita el acceso a la publicación de contenidos a un
rango mayor de usuarios. Tanto blogs como Sistemas de gestión de contenidos
pueden desempeñar un rol en un sitio web. Un sitio puede pensarse como una

26
 colección de artículos e información acerca de un tema, servicio o producto en
específico. Más recientemente, el rol de WordPress se ha expandido, y los
desarrolladores de WordPress han comenzado a utilizar el término más general
de sitio, en lugar de blog.

WordPress es un CMS dedicado a la desarrollo de sitios web, es una plataforma versátil

que se ajusta a los requerimientos de diversos tipos de proyectos como blogs
personales, sitios web para negocios pequeños así como sitios web mucho más
complejas, que requieran de diferentes componentes para un óptimo funcionamiento,
actualmente WordPress se ha consolidado como una plataforma destacada en creación
de sitios web esto debido a la facilidad de gestión, administración y actualización del
contenido de la plataforma por medio de la integración plugins que mejoran el
funcionamiento y estética de un sitio web y demás beneficios que ofrece.

1.21.1. Tema

Lanas (2017) dice:

Si lo que deseamos es una personalización que va más allá de que hemos visto,
si lo que buscamos es una personalización a la carta, entonces tenemos tres
vías alternativas entre si… Estas tres soluciones son: comprar un tema con un
margen de parametrización lo suficientemente amplio como para que satisfaga
nuestras demandas, crear un tema desde cero y, por último, adaptar uno ya
existente.

Un tema en WordPress es el estilo que se le da al sitio web, la apariencia que esta

tendrá, como la organización de elementos, tipografía, colores e iconos, de la misma
manera también incluyen elementos adicionales como sliders, botones, galerías,
formularios entre muchos más. Los temas pueden ser de paga, se pueden generar
desde cero o bien buscar algún tema ya diseñado y modificarlo acorde a tus objetivos.

1.21.2. Plugins

Blog HostingTG (2024) dice:

Los plugins representan una herramienta clave en el mundo digital, funcionando
como componentes adicionales que enriquecen y expanden las capacidades de
programas y plataformas. Su uso se extiende a través de una variedad de
aplicaciones, desde navegadores web hasta software de diseño y aplicaciones

27
 móviles. Ofrecen funcionalidades variadas, que van desde mejoras estéticas
hasta complejas integraciones de sistemas.

Los plugins son herramientas que añaden nuevas funciones de acuerdo a los
requerimientos puntuales de cada usuario, pueden ser plugin para seguridad que
resguarde la información de la empresa y usuarios, hasta plugins que dan un toque
más estético y personalizado.

1.22. Maquetador web

Emagister (2021) dice:

El maquetador web le da vida, de forma técnica, al diseño de la página web
creada por el diseñador gráfico. Esto significa que los traduce a un lenguaje de
marca y estilo como HTML (HyperText Markup Language) y CSS (Cascading
Stylesheets), respectivamente; con el propósito de que puedan ser
interpretados por navegadores de la talla de Google Chrome y Firefox.

Un maquetador web es el profesional quien se encarga de transformar el diseño de una

página web a un leguaje de código, como HTML, CSS y JavaScript el cual se añade un
editor de código fuente, para ser visible en un navegador, la función del maquetador
web consiste en organizar y estructurar el contenido presente en el sitio deforma
atractiva y además funcional a las interacciones del usuario.

1.23. Site Builder

Vasca (2024) dice:

Es una herramienta en línea que permite a los usuarios crear sitios web o
tiendas online, sin necesidad de tener conocimientos avanzados en
programación o diseño web. Estas herramientas suelen ser intuitivas y ofrecen
una simple interfaz de arrastrar y soltar elementos, lo que facilita la creación de
un sitio web atractivo y funcional en poco tiempo.

Site Builder es una herramienta para gestionar sitios web de forma sencilla y veloz sin
la complicación de tener amplio conocimiento en lenguajes de programación, esta
herramienta ofrece plantillas prediseñadas la cual se puede se modificando acorde a
los objetivos, sin poner en riesgo la estética y el aspecto funcional del sitio.

28
1.24. Dominio

Netuy.net (2024) dice:

“Un dominio es el nombre único e irrepetible que recibe cada sitio web. Técnicamente
es la dirección de un sitio web con la que los usuarios van a poder ingresar
directamente a tu web.”

El dominio es la identidad única de un sitio web en internet, irrepetible, es decir que

nadie más lo puede tener, al contar con un dominio este facilita la búsqueda de un sitio
web debido a que un dominio está conformado por dos cosas, uno el nombre o
identificador de la empresa y una extensión esto da a entender el tipo de institución o
país en el cual se encuentra el sitio web, por tanto es localizado fácilmente por el
usuario.

1.25. Hosting

Gustavo (2018) dice:

Un hosting es un servicio de alojamiento web que te permite publicar un sitio
web o aplicación en Internet. Cuando contratas un servicio de hosting,
básicamente alquilas un espacio en un servidor físico donde puedes almacenar
todos los archivos y datos necesarios para que tu sitio web funcione
correctamente.

Un hosting es la adquisición de un espacio donde se alberga los archivos que compone

un sitio web, como códigos, imágenes, videos y textos, esto para que el sitio sea visible
para cualquier usuario.

1.25.1. Panel de control

Porto y Gardey (2013) dice:

En un servidor web, el panel de control es la interfaz que permite administrar
los diferentes servicios y otorgar permisos a los usuarios. A través de estos
paneles, por lo general es posible crear un subdominio para unsitio web, saber
cuánta gente visitó una publicación o crear una cuenta de correo electrónico.
Es una interfaz que concede realizar configuraciones de todos los servicios y recursos
que están dentro de un servidor, como la gestión de sitio web, manejo de base de

29
datos, monitorear el rendimiento y configuración de seguridad, todo ello para facilitar
tareas complejas y ahorro de tiempo.

1.25.2. SSL

¿Que son SSL, TLS y HTTPS? (s/f) dice:

SSL es una tecnología estandarizada que permite cifrar el tráfico de datos entre
un navegador web y un sitio web (o entre dos servidores web), protegiendo así
la conexión. Esto impide que un hacker pueda ver o interceptar la información
que se transmite de un punto a otro, la cual puede contener datos personales o
financieros.

SSL es un protocolo de seguridad que se emplea en establecer una conexión entre el

servidor web y un navegador, este se encarga de proteger la información que se
transmite en ambas partes, protege los datos personales, contraseñas y numero de
cuentas bancarias, esta herramienta garantiza la seguridad de las Comunicaciones en
línea.

1.25.3. Backups

¿Qué es un Backup? (2023) dice:

Copia de seguridad de los datos realizada en un soporte de almacenamiento
adecuado (un disco duro externo, por ejemplo). Al hacer un backup, se crea una
copia de seguridad de los datos a partir de la cual se pueden restaurar
posteriormente en caso de pérdida.

Backup es una copia de datos que protege la información de posibles pérdidas, daños o
ataques externos, el cual ayuda a recuperar información en caso de Perdida y restaurar
datos tras alguna falla ocasionada de hardware o errores humanos. Este procedimiento
debe hacerse con continuidad pues no se sabe en qué momento el sitio web pueda
caer ya sea por virus o falta de actualización de los plugins utilizados.

1.26. Comercialización Digital

Armstrong y Kotler (2013) dice:

30
 El marketing online es la forma de más rápido crecimiento del marketing
directo. Internet permite a los consumidores y a las empresas tener acceso y
compartir grandes cantidades de información a través de sus computadoras,
teléfonos inteligentes, tablets y otros dispositivos. A su vez, Internet ha dado a
los mercadólogos una forma del todo nueva para crear valor para los clientes y
construir relaciones con ellos. Es difícil encontrar hoy una empresa que no
tenga una presencia sustancial de marketing online.

El Marketing digital consiste en un conjunto de tácticas para promover un producto o

servicio de forma online, de modo rápido y eficiente, conectando con los usuarios a
través de diferentes medios y redes sociales, cuenta con amplios beneficios a
diferencia del marketing convencional, como la evaluación exacta de resultados,
segmentación del público, además de una interacción más directa con los usuarios.

1.26 Google My Business

Moya (2020) dice:

Google My Business es una herramienta gratuita que facilita Google para
ayudar a las empresas a gestionar su presencia online. Lo que permite es
establecer una vinculación directa del negocio con el entorno donde desarrolla
su actividad más cercana.

Es un recurso que posibilita a las empresas a administras su presencia en línea, facilita

a la empresa a ser visible en los motores de búsqueda mediante Google y Google
maps, por ende, mejora el posicionamiento local del sitio web y atrae a clientes
cercanos.

1.25.2. SEO

Lanas (2017) dice:

SEO es el acrónimo inglés de Search Engine Optimization lo que en español
conocemos como el conjunto de técnicas para la optimización en motores de
búsqueda o, sencillamente, posicionamiento en buscadores. Sea como fuere, el
objetivo es hacer todo aquello que facilite la correcta indexación de nuestra
web por los motores de búsqueda y, de ese modo, aparecer bien posicionados
en las búsquedas orgánicas.

31
El SEO es una agrupación de técnicas a realizar para que un sitio web sea fácil de
identificar mediante los motores de búsqueda, estos procedimientos abarcan
diferentes operaciones como la utilización de palabras clave, la correcta estructura de
contenidos, la velocidad de carga entre otras que incrementan el posicionamiento y
logra que el usuario encuentre fácilmente dicho sitio de forma orgánica.

1.25.3. SEM

Rosa (2024) dice:

“El Search Engine Marketing, o SEM, es una técnica de marketing digital que
busca mejorar la visibilidad de los sitios web en las páginas de resultados de los
motores de búsqueda (SERP) a través de la publicidad pagada.”

El SEM es una herramienta de Marketing en línea la cual se basa en la publicidad a

través de métodos de pago para mejorar la presencia en los buscadores, lo que facilita
el dar a conocer un sitio de forma rápida como también atraer mayor cantidad de
tráfico, logra segmentar la publicidad al público objetivo y entre muchos beneficios que
ofrece.

CAPITULO II
INVESTIGACIÓN

32
INTRODUCCIÓN

El presente capitulo se dedica al desglosamiento teórico de las cuatro dimensiones

institucionales propuestas por Norberto Chávez que son: Identidad Institucional,
Imagen Institucional, Comunicación Institucional y Realidad Institucional, los cuales son
esenciales para comprender de manera integral el funcionamiento y diagnostico
interno y externo de la marca ShockProtein, que en conjunto pueden aportar a los
objetivos principales que tiene la empresa, como es el caso del posicionamiento y
presencia de la marca en el comercio digital al momentos de haber culminado la
creación del sitio de ventas en línea.

Iniciamos con la Identidad institucional que hace referencia a la personalidad de la

empresa en ella abarca la historia, misión y visión, valores y filosofía de la empresa,
que en conjunto definen la propuesta de valor de una empresa. Seguidamente
corresponde la imagen institucional, que se refiere a la manera en la que la empresa se
proyecta ante el mercado y la interpretación que construye el público objetivo.

Como tercera dimensión mencionamos a la comunicación institucional que se entiende

al medio y canales de comunicación por los cuales la empresa transmite su identidad al
público, la táctica de comunicación utilizada debe ser coherente y asertiva, logrando
así que el mensaje pueda ser transmitido eficientemente al público objetivo. Por último,
la realidad institucional, es la forma en la que la empresa manifiesta en la práctica
aquellos valores inicialmente definidos, como el ambiente laboral de los empleados, el
trato hacia los clientes, la infraestructura y mobiliario de la empresa.

2.1. IDENTIDAD INSTITUCIONAL

2.1.1. Historia

ShockProtein es una reconocida empresa boliviana que comenzó su trayectoria en

2019, dedicada a la elaboración de productos proteicos a base de maní. Fundada por
Alejandro Martínez Larraín, un ingeniero industrial con una visión clara de iniciar un
proyecto que promueva la salud y bienestar de todo el país. Desde sus inicios
Alejandro se sumergió en la investigación y análisis del mercado, enfocándose
específicamente en el nicho del fitness, donde identifico una valiosa oportunidad, con
constancia, pasión e innovación, ShockProtein ha logrado posicionarse como un

33
referente en la industria, consolidándose en estos seis años como una de las marcas
destacadas en Bolivia.

Hoy en día, ShockProtein no solo se centra en ofrecer productos de calidad, sino

también en fomentar un estilo de vida saludable entre sus consumidores, lo cual
contribuye al crecimiento de sector fitness en Bolivia, inspirando a muchos a adoptar
hábitos más saludables y activos. Con una visión clara hacia el futuro, la empresa sigue
trabajando para ser un líder en el mercado, promoviendo el bienestar integral de la
población boliviana.

2.1.2. Misión

Nuestro objetivo es ser líder en el mercado nacional, concentrándonos cada día más en
la calidad y variedad de nuestros productos que ofrecemos, prestando atención a cada
detalle para llegar al éxito aspirado, al mismo tiempo que contribuimos a nuestro país
y cuidamos el medio ambiente.

2.1.3. Visión

Proporcionar a nuestros clientes productos alimenticios de la más alta calidad,

mejorando continuamente, incorporando tecnologías innovadoras y capacitando a
nuestro equipo para alcanzar la excelencia, convirtiéndonos en la mejor opción
preferida para su elección futura.

2.1.4. Valores

Nuestro personal es el bien más valioso de ShockProtein. Creemos firmemente que el

triunfo de nuestra empresa se fundamenta en el compromiso y la dedicación todos de
nuestros colaboradores, por ellos, promovemos y perpetuamos valores fundamentales
que guían nuestras acciones que son: El cuidado, la filantropía hacia la sociedad, la
resiliencia y la pasión por el trabajo.

2.1.5. Cuidado

Atención y respeto que tiene la empresa hacia su personal, sus productos y sus
consumidores, implica también crear un ambiente laborar seguro y saludable, donde
cada empleado se sienta valorado y respaldado, así mismo existe un compromiso de

34
ofrecer productos que priorizan la salud y bienestar de los clientes, asegurando que
cada producto elaborado cumpla con los más elevados estándares de calidad y
requerimiento nutricional.

2.1.6. Filantropía a la sociedad

La filantropía a la sociedad destaca a responsabilidad social que ShockProtein asume

en su entorno. Esto implica contribuir activamente al bienestar de la comunidad,
promoviendo la educación sobre la nutrición y el fitness, y colaborando con
organizaciones que trabajan en favor del desarrollo social.

2.1.7. Pasión por el trabajo

La pasión por el trabajo refleja el entusiasmo y la dedicación que el equipo de

ShockProtein aporta a sus actividades diarias, este valor se traduce en un compromiso
inquebrantable por la calidad, el crecimiento y el perfeccionamiento constante. La
pasión por el trabajo no solo impulsa el crecimiento de la empresa, sino que también
crea un ambiente inspirador y colaborativo entre equipo de trabajo.

2.1.8. Resiliencia

La resiliencia para la empresa ShockProtein se traduce a la capacidad de los

empleados a adaptarse y recuperarse ante desafíos, adversidades que surgen dentro y
fuera del área laboral, mediante ello aprender y fortalecerse como equipo, la clave
importante de este valor es la comunicación y apoyo mutuo entre el personal.

En conjunto, estos valores fortalecen nuestra identidad como empresa, así como
también son la base que tenemos como misión que es fomentar hábitos de vida sanos
y productivos para toda la sociedad boliviana.

2.2. Logo

35
El isologo de ShockProtein está diseñado con una tipografía serif gruesa, que
impone fuerza, seriedad y calidad, de igual manera está acompañada de un icono
de rayo que simboliza poder y energía, la paleta de colores elegida, un tono
amarillo saturado refuerza la imagen de la marca al transmitir sensaciones de
energía, vitalidad y dinamismo.

En conjunto, todos los elementos mencionados se pueden decir que el identificador

de marca comunica de manera efectiva, conceptos de calidad, fuerza y energía.
Esta coherencia visual no solo atare la atención del público, sino que también
establece una conexión emocional que resuena con los valores de la marca.

2.3. Paleta de colores

#000000 #fff10a

La paleta de colores utilizada por ShockProtein se compone de tonos saturados,

destacando un amarillo vibrante que evoca sensaciones de energía vitalidad y
dinamismo. Este color no solo se eligió por su atractivo visual, sino también por su
capacidad de captar la atención de los espectadores de manera efectiva.

Al incorporar este tono saturado, ShockProtein logra transmitir una sensación de

movimiento y actividad, sugiriendo que sus productos están diseñados para
impulsar el rendimiento y el bienestar.

Por otro lado, el uso de colores saturados ayuda a que la marca destaque en un
mercado competitivo, facilitando su reconocimiento. En conjunto, la elección de
este color no solo refuerza la identidad visual de ShockProtein, sino que también
establece un vinculo emocional con el público, inspirando confianza y energía en
cada interacción.

2.4. Tipografía

36
 La tipografía utilizada en el logotipo de la marca es National Champion Bold, una
fuente con serifas que se distingue por su grosor y presencia visual. Esta tipografía
comunica sensaciones de poder, liderazgo y fortaleza, elementos esenciales para
conectar con un público que prioriza su salud y bienestar.

3. IMAGEN INSTITUCIONAL

De acuerdo a las reuniones sostenidas con el gerente de ShockProtein y los hallazgos

derivados de la investigación en sus redes sociales, así como las respuestas obtenidas
de la encuesta realizada a los consumidores de productos de la marca, se puede
afirmar que ShockProtein goza de una sólida reputación en el mercado. La marca es
reconocida como una empresa seria y comprometida son la salud y la alimentación de
sus consumidores.

Los clientes valoran demasiado la transparencia de ShockProtein, destacando la

importancia de recibir información detallada de los productos que ofrecen. Este
enfoque no solo genera confianza, sino que también fortalece la relación cercana entre
la marca y su comunidad.

Por otro lado, ShockProtein ha formado una comunidad fiel que respalda la marca y
comparte su filosofía de bienestar, aunque la empresa actualmente cuenta con una
gama limitada de tres productos, estos han demostrado ser altamente demandados, la
calidad de estos productos ha superado las expectativas del cliente, quienes se sientes
satisfechos y leales a la marca. La imagen de ShockProtein se fundamenta en la
seriedad, la calidad de sus productos y el estrecho vínculo que ha logrados establecer
con su comunidad de clientes, lo que la posiciona como un referente en el sector
fitness en Bolivia.

3.1. Resultados obtenidos de la encuesta al gerente de ShockProtein

Bolivia

37
4. ¿Tienes algún sitio web de referencia que te resulte especialmente atractivo? 2
respuestas
Montecristo srl
Montecristo srl

38
6. ¿Cuáles son tus principales referentes en cuanto a la competencia dentro de tu
sector? 2 respuestas
Animal
Animal

39
11. ¿Qué información adicional le gustaría encontrar en un sitio web de
ShockProtein? 2 respuestas
Biografía de la empresa
Biografía de la empresa

12. ¿Al finalizar el sitio de ventas quien será el encargado para gestionar la tienda
en línea? 2 respuestas
Equipo de marketing
El área de marketing

40
3.2. Resultados obtenidos de la encuesta a clientes de ShockProtein
Bolivia

41
42
43
12. ¿Qué información adicional le gustaría encontrar en el sitio web de
ShockProtein? 22 respuestas
Recetas
Redes sociales de la marca
Ubicación de la tienda, redes sociales de la marca.
ubicacion de tiendas fisicas (si es que aplica), soporte al cliente.
Información nutricional en que nos ayuda consumir el producto en porcentajes
Promociones, y tiendas físicas donde venden el producto
Beneficios nutricionales
Resetas de como podemos usar el producto
Beneficios de los productos
Dinámicas en el exterior para que las personitas conozcan el producto 🥰
.

44
 Promociones
Valor nutricional
Promociones
puntos de venta, conexión con gimnasios
Códigos de descuento
Historia de la marca y creación
Puntos de venta, promociones y patrocinios
Descuentos para los caseritos.. posdata barras espaciales.
Que tenga combos
Promociones, tips de alimentación entre otros.

4. COMUNICACIÓN INSTITUCIONAL

ShockProtein ha establecido una sólida presencia en redes sociales, Instagram,

Facebook, Tik tok y WhatsApp, a través de los cuales comunica su mensaje y conecta
con su audiencia.

La empresa cuenta con una línea grafica definida que incorpora los colores de la
marca: amarillo y negro, utilizando tonalidades más saturadas y oscuras, además, se
estableció iconos, recursos visuales y tipografías específicas que fortalecen su
identidad visual, lo que se traduce en un crecimiento constante de su número de
seguidores en estas plataformas.

4.1. Instagram

Es su principal canal de comunicación, donde genera mayor interacción con los

clientes, actualmente cuenta con 1,762 seguidores y 140 publicaciones, este medio es
fundamental para la empresa, ya que recibe mayor cantidad de reacciones,
comentarios y compartidos a diferencia de las demás plataformas. Las historias son
una parte vital de su estrategia, destacándose las que involucran a los usuarios al
etiquetar la marca, esta práctica fomenta un vínculo cercano con su comunidad,
creando una atmosfera de confianza y cercanía.

4.2. Facebook

45
En Facebook, ShockProtein cuenta con 1,100 seguidores, aunque las publicaciones son
menos frecuentes, cada post proporciona información sobre los productos, incluyendo
número de contacto para realizar pedidos. Sin embargo, la interacción del publico en
esta red social es limitada, a pesar de esto la empresa utiliza Facebook para subir
historias al igual que en Instagram, manteniendo así a sus seguidores informados y
comprometidos con su labor como empresa en el rubro fitness y nutrición.

4.3. Tik tok

La cuenta de tik tok se lanzó recientemente, por lo cual cuenta con 212 seguidores y 8
publicaciones hasta la fecha, el contenido es variado entre entretenimiento,
informativo y promocional, a pesar de que la cuenta no ha generado muchas vistas, ni
recciones, es un espacio en crecimiento donde la marca busca experimentar y conectar
con una audiencia más joven y dinámica.

4.4. WhatsApp

WhatsApp Bussines se ha transformado en un recurso fundamental para la atención al

cliente de ShockProtein, a través de este medio, los usuarios tienen la posibilidad de
ingresar a un catálogo digital de los productos de la marca, así como utilizar un carrito
de compras que facilita la adquisición de los productos. Por este medio la atención a
los clientes es rápida y personalizada.

5. REALIDAD INSTITUCIONAL

La empresa de ShockProtein tiene su fábrica de producción situada en la Av. Decima

S/N zona Esmeralda Norte Av. Villazón km. 6.5, además ShockProtein ha expandido su
presencia abriendo sucursales en 7 departamentos, lo que demuestra el compromiso
por llevar sus productos a una audiencia más amplia.

La tienda principal en Cochabamba está ubicada en la Av. Heroínas y Antezana, a

primera vista se puede observar que la tienda refleja la identidad visual de la marca,
con un diseño que incorpora de manera efectiva los colores corporativos, amarillo y
negro, la puerta principal y las paredes están uniformemente decoradas, creando un
ambiente acogedor y llamativo que atrae a clientes.

46
Dentro de la tienda física se puede encontrar mostradores y estanterías bien
organizadas que exhiben los productos de ShockProtein, un aspecto fundamental de la
experiencia de compra es la atención al cliente, que se caracteriza por ser amable y
personalizada, el personal está capacitado para brindar información específica de los
productos ayudando a los clientes a tomar decisiones informadas, además, los
empleados visten uniformes que llevan el identificador de la marca, lo que refuerza la
identidad de la empresa y fortalece su presencia en el mercado.

CAPITULO III
DISEÑO DE LA INTERVENCIÓN

INTRODUCCIÓN

47
En el presente capítulo se abordará el proceso de desarrollo del sitio web, desde el
surgimiento de las primeras ideas hasta la implementación final. Iniciando con la
elaboración del mapa de sitio, en el cual se definieron las páginas que conformarían la
estructura básica del sitio. A continuación, se desarrolló el wireframe utilizando la
herramienta de Balsamiq, donde se fue organizando y estructurando el contenido del
sitio.
Una vez definida esta base, se realizo un prototipo de media fidelidad en Figma, en el
que se comenzó a dar forma visual al sitio mediante la integración de los colores
corporativos, tipografía y demás elementos visuales esenciales.
Así mismo, en este capitulo se abordará el proceso de adquisición de del hosting y
dominio, así como las primeras configuraciones realizadas en el CMS de WordPress, la
instalación de plugins fundamentales para el proyecto y el desarrollo de las páginas
que componen el sitio. A continuación, se desglosarán en detalle cada una de estas
etapas.

3.1 MAPA DE SITIO

Para el desarrollo y la definición estructural del sitio web, se elaboro un mapa de sitio,
el cual establece las páginas y secciones que compondrán, este mapa fue creado
tomando como base los resultados obtenidos a través de encuestas realizadas tanto al
gerente de la empresa como a los clientes de ShockProtein de los diferentes
departamentos del país, los datos recabados proporcionaron la orientación necesaria
para tomar decisiones clave sobre la organización y contenido del sitio.

A partir de esta información, se decidió estructurar el sitio web en cinco paginas

principales: INICIO, NOSOTROS, PRODUCTOS, NUESTRAS SUCURSALES, BLOG Y
CONTACTOS. Estas secciones fueron consideradas las mas relevantes y representativas
para cubrir las necesidades informativas y funcionales de los usuarios, asegurando una
experiencia fluida y coherente con los objetivos de la empresa.

3.2 WIREFRAMES EN BALSAMIQ

En esta etapa del proceso de diseño, se desarrollo la estructura y composición el

contenido del sitio web mediante el uso de la herramienta Blasamiq. Los wireframes
creados en esta fase tienen como objetivo plasmar de manera visual la disposición y

48
organización de elementos visuales y otros recursos gráficos que permitieron definir la
estructura general de cada una de las páginas, sin entrar aun en detalles de diseño
visual avanzado.

Los wireframes fueron elaborados para todas las paginas que conforman el sitio,
incluyendo tanto la versión de escritorio como la versión adaptada a dispositivos
móviles. Se tiene este enfoque, ya que se previo que el público objetivo son jóvenes
que en su mayoría se le es mas factible el acceso desde sus dispositivos móviles. De
este modo, la versión móvil permitió visualizar como se distribuiría el contenido en
pantallas mas pequeñas, asegurando que la experiencia de usuario fuera más fluida.

El diseño de los wireframes no solo sirvió para establecer la estructura, sino también
para anticipar posibles interacciones del usuario y asegurar que todas las páginas del
sitio estuvieran correctamente organizadas para facilitar la navegabilidad. Con esta
etapa, se pudo obtener una representación clara de cómo se desarrollaría la
experiencia del usuario, sentando las bases para las siguientes etapas del diseño e
implantación del sitio.

3.3 PROTOTIPO DEL SITIO EN FIGMA

En este punto, se procedió a desarrollar el diseño detallado del sitio web utilizando la
herramienta de Figma, una plataforma especializada en la creación de prototipos web,
a través de esta herramienta, se dio forma visual al sitio, integrando el estilo grafico de
la marca, con los colores corporativos, la tipografía y demás elementos visuales. Para
la determinación del estilo visual que tendría el sitio se fundamentó en las respuestas
obtenidas mediante las encuestas al gerente y clientes de ShockProtein, en este caso,
se optó por un diseño minimalista, caracterizado por un estilo limpio y atractivo a la
vista.

Además de desarrollaron las versiones tanto para escritorio como para móvil, siendo
este aun un prototipo se implementaron efectos interactivos, como el efecto hover en
los botones y el scroll dinámico en las secciones de “Testimonios” y “Nuestras
sucursales”, lo que añadió dinamismo al sitio. Todo esto, junto con la navegación fluida
entre las diferentes páginas, permitió crear un prototipo funcional y visualmente
coherente con la identidad de la marca.

49
Ahora en cuanto al desarrollo de las paginas empezando con la de “INICIO” se
incorporó una pequeña sección representativa de cada una de las paginas principales
del sitio, con el fin de ofrecer al usuario un viaje general del contenido que podría
encontrar en las páginas de “NOSOTROS”, “PRODUCTOS”, “NUESTRAS SUCURSALES”,
“BLOG” y “CONTACTOS”, también se incluyó una sección de “TESTIMONIOS DE
CLIENTES”, con el objetivo de generar confianza y crear una mayor cercanía con los
usuarios, adicionalmente, se añadió un mapa interactivo con la ubicación de las
sucursales, para facilitar a los usuarios la localización de las tiendas físicas.

En las páginas específicas, el contenido se desarrollo de acuerdo con la naturaleza de

cada una correspondientemente.
En” NOSOTROS”, se incorporaron detalles sobre la historia de la empresa, su misión,
visión y valores, además de incluir fotografías del equipo de trabajo y una sección de
preguntas frecuentes.
En la pagina de “PRODUCTOS”, se detallaron los tres productos principales:
Chocomaní, galleta con proteína y mantequilla de maní, siguiendo las sugerencias
obtenidas en las encuestas, con descripciones detalladas de cada uno de ellos.
A petición de la gran parte de clientes, se creó la página de “NUESTRAS SUCURSALES”,
debido a que muchos desconocían la existencia de tiendas físicas en diferentes
departamentos, esta sección incluye información detallada sobre horarios de atención,
ubicaciones exactas y un mapa interactivo de Google Maps para facilitar la localización.
En la página de “BLOG”, se incluyeron temas relacionados con recetas que utilizan los
productos de ShockProtein, así como consejos sobre buena alimentación, siguiendo las
respuestas y sugerencias obtenidas de la encuesta.
Finalmente, la página de “CONTACTOS”, se incorporó un formulario para consultas o
dudas, una sección de redes sociales y la ubicación física de la empresa.

3.4 HOSTING Y DOMINIO

Para el desarrollo del sitio web, es fundamental contar con dos elementos esenciales:
el hosting que es el alojamiento del sitio. Permite almacenar y hacer accesible elsitio
en internet y el dominio que es el nombre único mediante la cual los usuarios pueden
acceder al sitio web.

La adquisición de estos servicios se realizó a través de la plataforma de “Host Bolivia”,

donde se opto por el plan individual con un costo de Bs.297. Este plan fue considerado
adecuado para la empresa, ya que ofrece una solución básica y económica, ideal para

50
iniciarse en el mundo de las ventas en línea, un área clave para ShockProtein en la
actualidad.
EL dominio se registro con el nombre de “shockproteinbolivia.com”, el cual
afortunadamente estaba disponible, la razón por la que se eligió la extensión”.com” es
debido a su popularidad y reconocimiento global, así mismo esta elección también
responde a la visión a largo plazo que tiene la empresa, que espera expandirse sin
restricciones geográficas.
Estas dos herramientas, el hosting y el dominio, son la base fundamental para dar
inicio a la creación de un sitio web profesional y con proyección.

3.5 INSTALACIÓN DE WORDPRESS

Para la instalación de WordPress, en primer lugar, se accedió al cPanel y se dirigió a la

sección de “Software”, donde se seleccionó “Softaculous Apps Installer”, dentro de
esta herramienta, se localizó la opción de WordPress y se hizo clic en el botón de
“Instalar”. Tras la instalación, se completaron los datos requeridos, incluyendo el
correo electrónico, la contraseña del sitio y el nombre del mismo.

Una vez finalizado el proceso de instalación, se proporciono un enlace para acceder al

sitio dentro de WordPress y a partir de este momento, se podrá comenzar con el
desarrollo del proyecto en línea.

IMAGEN N. 1
Ingreso al cPanel

51
IMAGEN N. 2
Ingresar a “Softaculous Apps Installer”

IMAGEN N.3
Configuraciones de WordPress

3.6 CONFIGURACIÓN INICIAL DE WORDPRESS

Durante la fase de configuración inicial de WordPress para el sitio web de ShockProtein,

se realizaron diversos ajustes clave para establecer una estructura funcional y alineada
con la identidad de la empresa.

En primer lugar, se configuraron los parámetros generales del sitio, como el título y
una breve descripción del mismo. En la sección de “Ajustes de Medios”, se modificaron
los tamaños de las imágenes para asegurar una visualización adecuada en todo el sitio.

52
Posteriormente, en la sección “Apariencia” “Personalizar”, se realizaron ajustes
adicionales en la apariencia del sitio, se añadió el favicon, que es la miniatura que
aparece en la pestaña del navegador, y se incorporaron los colores de la marca y la
tipografía, reforzando la identidad visual de la empresa, en la misma sección de
”Apariencia”, se accedió a “Menús”, donde se procedió a la creación de todas las
páginas necesarias, tales como INICIO, NOSOTROS, PRODUCTOS, NUESTRAS
SUCURSALES, BLOG y CONTACTO, organizando el contenido de manera que los
usuarios pudieran navegar de forma intuitiva.

Concluyendo con la configuración de WordPress se dio inicio a subir el tema de Divi y

añadir plugins que se usarán en el sitio web, que en el siguiente subtitulo se irán
desglosando.

IMAGEN N. 4

Parámetros generales del sitio

IMAGEN N. 5

Configuración de colores de marca

53
IMAGEN N. 6

Creación de páginas del sitio

3.7 CONFIGURACIÓN INICIAL DE DIVI

Una vez instalado WordPress, el siguiente paso fue agregar el tema Divi, el cual ofrece
una amplia variedad de opciones para personalizar el diseño del sitio. Para integrar Divi
a la plataforma, se accedió a “Apariencia” y luego nos dirigimos a “Temas”, donde se
subió el archivo del tema, quedando listo para ser activado.
Una vez activado el tema, se dirigió a “Divi” y se seleccionaron las “Opciones del tema
Divi”, en esta sección, se configuraron aspectos esenciales como la definición de los
colores del sitio, así como los “Ajustes generales” y las configuraciones del

54
“Constructor Divi”. Estos pasos fueron realizados para establecer una base sólida y
coherente en el diseño, lo que facilitaría el desarrollo posterior del sitio sin
complicaciones.

IMAGEN N. 7

Instalación de Divi

IMAGEN N. 8

Opciones de tema en Divi

55
IMAGEN N. 9

Configuración del constructor

3.8 Desarrollo del sitio de ventas ShockProtein con Divi

3.8.1 Header y footer

El desarrollo del sitio web de ventas de ShockProtein se realizó utilizando el tema Divi.
El proceso comenzó con la creación del header y el footer.
En el header, se incorporó el logotipo de la empresa y los menús correspondientes para
facilitar la navegación entre las distintas páginas del sitio. Además, se añadieron los
íconos de redes sociales en la versión de escritorio, los cuales fueron eliminados en la
versión móvil para optimizar el uso del espacio disponible.

En el footer, se dividió en tres secciones. La primera sección incluye nuevamente el

logotipo de la empresa junto a una breve descripción de ShockProtein, destacando lo
que representa y su compromiso con la calidad. En la segunda sección, se incorporó un
menú para redirigir a los usuarios a otras páginas importantes del sitio. Por último, en
la tercera sección se añadieron los enlaces a las redes sociales de la empresa, junto
con un correo electrónico de contacto y la dirección de la tienda matriz ubicada en la
ciudad de Cochabamba.
Y todo diseñado con la línea grafica de la marca, paleta de colores, tipografía y demás
elementos que son parte de la identidad de ShockProtein.

56
IMAGEN N. 10

Desarrollo del Header

IMAGEN N. 11

Desarrollo del Footer

3.8.1 Página de inicio

La página de inicio de ShockProtein sirve como un resumen integral de todo lo que los
usuarios encontrarán en el sitio web, actuando como un puente entre las distintas
secciones y generando una conexión clave para la navegación. Debido a su
importancia, la estética visual de esta página es crucial, ya que los usuarios tomarán la
decisión de qué página visitar en función de su presentación.
La página se inicia con un slider que muestra los productos destacados de
ShockProtein, acompañado de un copy atractivo y un botón de llamada a la acción que
dirige directamente a la sección de productos.

IMAGEN N. 12

Página de inicio-banner principal

57
A continuación, se presenta una breve descripción de la página "Nosotros" en donde se
resalta su identidad como empresa.
Seguido de esto, se encuentra la sección "Nuestros productos", que incluye una breve
descripción del producto estrella (barrita de maní), con su imagen respectiva y un
botón de acceso al producto. Luego, una sección de “promociones”, que se destaca un
banner que resalta la oferta de la temporada, invitando a los usuarios a aprovechar
descuentos y promociones especiales.

IMAGEN N. 13

Seccion – Nuestras sucursales

La página continúa con la sección "Nuestras sucursales", donde mediante un carrusel

permite a los usuarios visualizar las ubicaciones de las tiendas físicas, brindando
información relevante sobre cada una. Posteriormente, en la sección de “Blog”, un

58
banner animado resalta un artículo más llamativo del blog, con una breve descripción y
un botón que redirige a los usuarios hacia esa página para explorar más contenido.

IMAGEN N. 14

Seccion – Blog

A continuación, se presenta un carrusel automático que destaca la propuesta de valor

de la empresa y del sitio de ventas, mostrando de manera clara lo que diferencia a
ShockProtein en el mercado. La sección de “testimonios de clientes” proporciona una
sensación de cercanía y confianza, al compartir las experiencias de quienes ya han
probado los productos.

IMAGEN N. 15

Seccion – Testimonios

59
Finalmente, la página de inicio concluye con la ubicación de la tienda central de
ShockProtein, integrada mediante Google Maps, para facilitar a los usuarios encontrar
la tienda física en la ciudad de Cochabamba.
En resumen, la página de inicio está diseñada de manera que, a través de contenido
visualmente atractivo y bien estructurado, los usuarios puedan navegar fácilmente
hacia las páginas que más les interesen. A continuación, se detallará cada una de estas
paginas para profundizar en su contenido y funcionalidad.

3.8.2 Páginas internas

3.8.2.1 Pagina Nosotros

En la página "Nosotros", los usuarios son recibidos con un banner superior que, a
través de un texto, indica su ubicación dentro del sitio, facilitando la navegación. Justo
debajo, se presenta la historia de la empresa, narrando su evolución desde sus inicios
hasta el momento actual, destacando el crecimiento y los logros alcanzados a lo largo
de los años.

A continuación, se exponen la misión y visión de ShockProtein, ofreciendo una clara

visión de los objetivos y el propósito que guían a la empresa. Debajo de estas, se
muestran los valores que fundamentan cada acción y decisión dentro de la compañía,
todos reflejados con la identidad visual de la marca.

Un carrusel dinámico sigue a esta sección, presentando al equipo que conforma la

empresa, dividido por áreas de trabajo, para que los usuarios puedan conocer a las
personas detrás de ShockProtein.

Por último, se incluye una sección de preguntas frecuentes, diseñada para resolver las
dudas más comunes que los usuarios puedan tener, proporcionando respuestas claras
y directas a sus inquietudes.

IMAGEN N. 16

Seccion – Historia, misión y visión

60
IMAGEN N. 17

Seccion – Valores de la empresa

IMAGEN N. 18

Seccion – Nuestro equipo

BIBLIOGRAFÍA

61
Adsmurai. (s/f). Diseño Responsive: La Clave para una Experiencia de Usuario Perfecta
en Todos los Dispositivos - Adsmurai.com. Recuperado el 22 de septiembre de 2024,
https://www.adsmurai.com/es/articulos/dise%C3%B1o-responsive-la-clave-para-una-
experiencia-de-usuario-perfecta-en-todos-los-dispositivos

ARMSTRONG y PHILIP KOTLER, G. (2013). Fundamentos de marketing. Naucalpan de

Juárez, Estado de México. Pearson Educación de México, S.A.

Bembibre, V. (enero, 2009). Definición de Usuario. Significado.com. Desde

https://significado.com/usuario/

Burriel, D. T. (2018). USABILIDAD DEJA DE SUFRIR. Calle San Ignacio Luca de Tena, 15
28027 Madrid Ediciones. Anaya Multimedia (grupo Anaya, S.A).

Coppola, M. (2023, mayo 2). Desarrollo web: qué es, etapas y principales lenguajes.
Hubspot.es. https://blog.hubspot.es/website/que-es-desarrollo-web

Definición de Página Web, Qué es, Significado y Concepto. (s/f). Com.mx. Recuperado
el 1 de octubre de 2024, de https://www.informaticamilenium.com.mx/es/temas/que-
es-una-pagina-web.html

Emagister, B. (2021, diciembre 21). Maquetador web-Guía de la profesión. Blog

Emagister; Emagister. https://www.emagister.com/blog/maquetador-web/

Galicia, F. P. L. (2024, julio 30). ¿Qué es una tienda virtual/online? Guía completa de
conceptos para principiantes. GoDaddy Resources - LATAM; GoDaddy.
https://www.godaddy.com/resources/latam/stories/que-es-una-tienda-virtual

Gauchat, J. D. (2017). El gran libro de HTML5, CSS3 y JavaScript. 2017. Gran Via de les
Corts Catalanes,594 Barcelona. Marcombo,S.A.

Google for Developers. ¿Qué es un mapa del sitio? (s/f). Recuperado el 30 de

septiembre de 2024, de
https://developers.google.com/search/docs/crawling-indexing/sitemaps/overview?
hl=es-419

62
Gustavo, B. (2018, junio 8). ¿Qué es un hosting y cómo funciona? Tutoriales Hostinger.
https://www.hostinger.es/tutoriales/que-es-un-hosting

Herranz, S. (2018, marzo 9). Wireframe, Mockup y Prototipos: en busca de sus

diferencias. Rocket Studio UX. https://medium.com/rocket-studio-ux/wireframe-
mockup-y-prototipos-en-busca-de-sus-diferencias-23a03bcbdb69

Islas, D. S. (2022, diciembre 15). Qué es el diseño web: todo lo que necesitas
saber. Blog de Wix. https://es.wix.com/blog/diseno-web

Julián Pérez Porto y Ana Gardey. Actualizado el 13 de febrero de 2022. Panel de control
- Qué es, definición y concepto. https://definicion.de/panel-de-control/

Julián Pérez Porto y María Merino. Actualizado el 8 de marzo de 2022. Interfaz - Qué es,
definición y concepto. Disponible en https://definicion.de/interfaz/

Norman, D., & Nielsen, J. (1998, agosto 8). The definition of User experience (UX).
Nielsen Norman Group. https://www.nngroup.com/articles/definition-user-experience/

La transformación digital y el diseño UX/UI: un poco de contexto. Edu.ar. Recuperado el

20 de septiembre de 2024,
https://perio.unlp.edu.ar/catedras/ecal/wp-content/uploads/sites/125/2023/02/Diseno-
UX-UI.pdf

Lanas, A. C. (2017). WordPress Profesional Edicion 2017. Desarrollo de proyectos par

emprendedores. Calle Jarama, 3A, Poligono Industrial Igarsa. Ra-Ma Editorial.

Moya, F. (2020, agosto 5). ¿Qué es Google My Business y cómo funciona? Clavei |
Software solutions for business. https://www.clavei.es/blog/que-es-google-my-business-
y-como-funciona/

Niebla, M. P. (2014). Creacion y diseño web edicion 2014. Juan Ignacio Lúea de Tena,
15 28027 Madrid. EDICIONES ANAYA MULTIMEDIA (GRUPO ANAYA, S.A.), 2013.

63
Ortegón V. Contendo CMS Administración de contenidos Web [consultado: 1 de abril de
2009]. Disponible en: http://www.ensitech.com/contendo-cms.html

Principiantes, D. E. P. (s/f). ¿Qué es un dominio de internet? Netuy.net. Recuperado el

22 de septiembre de 2024, de
https://www.netuy.net/bootcamp/Guias/Guia_Dominios.pdf

Qué es un plugin y para qué se utiliza. (2024, enero 23). Blog HostingTG.
https://www.hostingtg.com/blog/que-es-un-plugin/

Revella, A. (2011). The Buyer Persona Manifesto: John R. Harris.

Rosa. (2024, julio 15). ¿Qué es el SEM y cómo llevarlo a cabo? Aula Creactiva.
https://www.aulacreactiva.com/que-es-sem/

Sitio web: Definición, características, tipos y funcionamiento. (2024, junio 27).

GoDaddy Resources LATAM; GoDaddy.
https://www.godaddy.com/resources/latam/emprender/que-es-un-sitio-web

Updated 2024. (2019, octubre 17). What is a Prototype? The Interaction Design
Foundation; Interaction Design Foundation.
https://www.interaction-design.org/literature/topics/prototypes

Vasca, N. (2024, julio 24). Qué es un Website Builder y cómo funciona. Neolo Blog;
Neolo. https://www.neolo.com/blog/que-es-website-builder-y-como-funciona.php

Worstell, T. (2023, septiembre 27). Viaje del usuario. Adogy.

https://www.adogy.com/es/terms/user-journey/

W3C Web Accessibility Initiative (WAI). (s/f). Introducción a la Accesibilidad Web. Web
Accessibility Initiative (WAI). Recuperado el 29 de septiembre de 2024, de
https://www.w3.org/WAI/fundamentals/accessibility-intro/es
Wordpress, M. de U. (s/f-b). Manual de uso de Wordpress. Educativa.com. Recuperado
el 20 de septiembre de 2024, de
https://manuales.educativa.com/estable/wordpress/back/es/pdf/manual_wordpress_es.p
df

64
¿Qué son SSL, TLS y HTTPS? (s/f). Digicert.com. Recuperado el 2 de octubre de 2024,
de https://www.digicert.com/es/what-is-ssl-tls-and-https

¿Qué es un Backup? (2023, septiembre 7). IONOS Digital Guide; IONOS.

https://www.ionos.com/es-us/digitalguide/servidores/seguridad/que-es-un-backup/

65