diseño y desarrollo de un aplicativo web para optimizar la
TRANSCRIPT
1
Diseño y desarrollo de un aplicativo web para optimizar la gestión comercial, imagen
publicitaria y atención al cliente de la empresa Suculenta Villavicencio
Modalidad de grado - Análisis sistemático de literatura
Nathaly Martínez Baquero
Programa de Ingeniería de sistemas, Universidad Cooperativa de Colombia, Sede
Villavicencio
Ing. Carlos Ignacio Torres, Ing. Francy Yaneth Patiño
Villavicencio – Meta
Noviembre 2021
2
Dedicatoria
A mí misma, Nathaly Martínez Baquero, a todo lo que soy yo, porque todo lo que soy y
una muestra de lo que puedo lograr lo he dejado en este proyecto y a lo largo de estos cinco años
de carrera.
A mi madre Dennys Nathaly Baquero Bonilla y mi hermana Laura Nathalia
Mondragón Baquero, a ellas que han dado todo por mí y mi carrera, son mi mayor orgullo y
apoyo incondicional.
Nathaly Martínez Baquero.
3
Agradecimientos
Agradezco enormemente a mis mascotas, mi perro Lucas Ramón Martínez Baquero y mi
gata Moon Alejandra Baquero Bonilla, a ellos por estar ahí siempre conmigo, por ser mis
terapeutas y apoyo emocional infinito, por no juzgarme, desconfiar o decepcionarse de mí, por
estar siempre orgullosos de todo lo que soy sin importar cuantas veces llegué a odiarme por eso.
Agradezco especialmente a mi mejor amiga Daniela Cruz Narváez que pese a la distancia
siempre ha estado al pendiente de todo en mi vida, siempre ha sido la bomba de energía y
motivación que necesito cuando toco fondo, porque sin ella no estaría en este momento escribiendo
esto y por ello le estoy eternamente agradecida.
Agradezco especialmente a mis amigas Karen Luz Alicia Ortiz Mariño, Katherine Buitrago
Ávila, Nicoll Fernanda Gómez Rojas, Laura Juliana Bejarano Bermúdez y Gabriela Sánchez
Cárdenas, por ser voces de ánimo y comprensión en mis momentos de estrés y colapso.
Agradezco la existencia del equipo de voleibol UCC Villavicencio y a mi entrenador
Andrés David Ávila Aldana por demostrarme que la universidad no tiene que ser hostigante,
aburrida ni solamente enfocada al estudio, que hay tiempo para todo y eso es muy divertido.
Agradezco especialmente a mis amigos Edduin Herney Abril Reyes, Juan Felipe Gonzales
y Mario Leandro Salomón León por ser lo más cercano que he llegado a tener en cuanto a mejor
amigo se trata, por sus consejos y apoyo durante mi carrera y vida personal.
Agradezco especialmente a mis compañeros de carrera y amigos Cristian Miguel Castro
Baquero, César Daniel Díaz Fernández y Daniel Leandro Muñoz Castañeda, por su apoyo durante
todo este camino y hacerme ver que tener únicamente compañeros hombres durante toda mi carrera
no fue tan malo como lo llegué a pensar.
Agradezco especialmente a Kevin Alexander Sánchez Cobaleda (QEPD) por demostrarme
que la programación tiene su lado hermoso, que el programar es un arte al que debes entregar
cuerpo y alma, gracias por mostrarme lo bella que puede ser esta carrera y la vida misma.
Agradezco a todos los docentes que durante mi carrera me brindaron infinidad de
conocimientos, motivación y apoyo en todo momento.
Nathaly Martínez Baquero.
4
Resumen
Actualmente la información se genera rápidamente, el buen manejo de esta logra la
confiabilidad y soporte de la misma, por ello el tener las herramientas que permitan estas dos
características se hace indispensable para cualquier negocio independiente o empresa formal, este
es el motivo por el cual las tiendas online y plataformas de ventas web son día a día más
importantes y necesarias para el sector empresarial y comercial; este proyecto tiene como finalidad
el diseño y desarrollo de una tienda virtual para la empresa Suculenta Villavicencio, además de
lograr una herramienta como solución a las problemáticas de la empresa, busca resaltar conceptos
relacionados dentro del mundo del ecommerce y marketing digital que debe estar enmarcado
dentro del orden de generar beneficios económicos para la empresa, así mismo destacar cada una
de las fases de desarrollo dentro de un proyecto de software y lograr la aplicación de lo aprendido
durante la carrera de Ingeniería de sistemas.
5
Abstract
Currently the information is generated quickly, the good management of it achieves the
reliability and the support of the same, therefore having the tools that allow these two
characteristics is essential for any independent business or formal company, this is the reason why
which online stores and web sales platforms are day by day more important and necessary for the
business and commercial sector; This project aims to design and develop a virtual store for the
company Suculenta Villavicencio, in addition to achieving a tool as a solution to the problems of
the company, it seeks to highlight related concepts within the world of ecommerce and digital
marketing that must be framed within in the order of generating economic benefits for the
company, likewise highlighting each of the development phases within a software project and
achieving the application of what was learned during the Systems Engineering career.
6
Tabla de contenido
1. Definición del tema ................................................................................................................. 10
1.1. Tema .................................................................................................................................. 10
1.2. Descripción del problema ................................................................................................ 10
2. Objetivos .................................................................................................................................. 12
2.1. Objetivo general ............................................................................................................... 12
2.2. Objetivos específicos ........................................................................................................ 12
3. Justificación ............................................................................................................................. 13
3.1. Antecedentes ..................................................................................................................... 13
3.2. Importancia....................................................................................................................... 13
3.3. Beneficios........................................................................................................................... 13
4. Marco de referencia ................................................................................................................ 14
4.1. Literatura sobre casos análogos ...................................................................................... 14
4.2. Marco teórico .................................................................................................................... 17
4.3. Marco legal........................................................................................................................ 19
5. Diseño metodológico ............................................................................................................... 21
5.1. Metodología....................................................................................................................... 21
5.2. Implementación de la metodología ................................................................................. 22
5.3. Desarrollo y modelado ingenieril .................................................................................... 28
6. Resultados ................................................................................................................................ 41
7. Análisis y discusión ................................................................................................................. 43
8. Conclusiones ............................................................................................................................ 46
Referencias................................................................................................................................... 47
Anexos .......................................................................................................................................... 49
7
Lista de ilustraciones
Ilustración 1. Proyecto www.shoppingimmersion.com............................................................... 15
Ilustración 2. Proyecto de integración e-commerce .................................................................... 16
Ilustración 3. Proyecto la Huerta en Casa ................................................................................... 17
Ilustración 4. Backend WordPress .............................................................................................. 18
Ilustración 5. Proceso SCRUM ................................................................................................... 21
Ilustración 6. Cronograma generado por la herramienta Planner ................................................ 23
Ilustración 7. Tienda Virtual Suculenta Villavicencio en Planner .............................................. 24
Ilustración 8. Diagrama de casos de uso ..................................................................................... 30
Ilustración 9. Modelo entidad-relación ....................................................................................... 37
Ilustración 10. Diagrama de clases .............................................................................................. 38
Ilustración 11. Arquitectura Cliente-Servidor aplicada en Wordpress ........................................ 39
Ilustración 12. Estructura WordPress .......................................................................................... 40
Ilustración 13. Resultado página de inicio .................................................................................. 41
Ilustración 14. Resultado página Tienda ..................................................................................... 42
Ilustración 15. Resultado página Carrito ..................................................................................... 42
Ilustración 16. Distribución estadística de los sitios web que usan CMS ................................... 43
Ilustración 17. Comparativa de popularidad entre los CMS. ...................................................... 45
8
Lista de tablas
Tabla 1. Roles SCRUM del proyecto........................................................................................... 22
Tabla 2. Product Backlog ............................................................................................................. 24
Tabla 3. Sprint Planning............................................................................................................... 26
Tabla 4. Sprint 1 ........................................................................................................................... 27
Tabla 5. Sprint 2 ........................................................................................................................... 27
Tabla 6. Sprint 3 ........................................................................................................................... 28
Tabla 7. Caso de uso número 1 .................................................................................................... 31
Tabla 8. Caso de uso número 2 .................................................................................................... 31
Tabla 9. Caso de uso número 3 .................................................................................................... 32
Tabla 10. Caso de uso número 4 .................................................................................................. 32
Tabla 11. Caso de uso número 5 .................................................................................................. 33
Tabla 12. Caso de uso número 6 .................................................................................................. 33
Tabla 13. Caso de uso número 7 .................................................................................................. 34
Tabla 14. Caso de uso número 8 .................................................................................................. 34
Tabla 15. Caso de uso número 9 .................................................................................................. 35
Tabla 16. Caso de uso número 10 ................................................................................................ 35
Tabla 17. Caso de uso número 11 ................................................................................................ 36
Tabla 18.Caso de uso número 12 ................................................................................................. 36
Tabla 19. Caso de uso número 13 ................................................................................................ 37
9
Lista de anexos
Anexo A. Entrevista a Laura Mondragón – Propietaria de Suculenta Villavicencio ................... 49
Anexo B. Código CSS para el diseño base de las páginas de la tienda virtual ............................ 50
Anexo C. Diseño base para la tienda virtual ................................................................................ 51
Anexo D. Diseño base del inicio de sesión ................................................................................... 52
Anexo E. Modelo Canvas de Suculenta Villavicencio ................................................................. 53
Anexo F. Especificación de requerimientos funcionales ............................................................. 54
10
1. Definición del tema
1.1. Tema
La temática que trata este documento y la base de este proyecto investigativo es el
ecommerce, ya que éste permite a los consumidores una respuesta más rápida a sus solicitudes y
la costumbre de estos a lo que es el entorno y manejo de herramientas digitales. Además el
ecommerce ofrece los procedimientos de pago de manera segura y confiable gracias a los
diferentes sistemas que se han estado desarrollando desde hace varios años para lograrlo (tales
como PSE, PayPal, etc).
El marketing digital, el ecommerce, diseño de interfaces y ofrecer una navegación segura
por internet hace que los clientes busquen cada vez más y más las tiendas virtuales de sus marcas
favoritas, por ello en pleno siglo XXI la tecnología sigue avanzando de tal forma que los negocios
deben sí o sí digitalizarse para poder expandirse y llegar a más y más clientes, no sólo por la parte
comercial sino también tomando muy en cuenta la parte social.
Dentro de las tiendas virtuales se pueden emplear demasiadas herramientas para que la
experiencia del cliente sea lo más cercano a un encuentro físico posible donde esté sienta el ser
atendido con gusto, de manera inmediata y que sus preguntas tengan una respuesta clara y concisa.
1.2. Descripción del problema
Suculenta Villavicencio es una empresa llanera cuyo objetivo es la preparación,
decoración y entrega de desayunos sorpresa y detalles románticos dentro de la zona de
Villavicencio/ Meta/ Colombia. Así como muchas otras empresas, su propietaria se adapta a los
cambios tecnológicos y de marketing que vienen con el pasar de los años para lograr el máximo
aprovechamiento de los recursos digitales con el objetivo de potenciar su negocio.
Con los hechos ocurridos en 2019 y la llegada de la pandemia por el Covid 19, la
competencia para el campo que abarca la empresa incrementó en más de un 30% a comparación
del 6% de años anteriores, de igual forma el campo para el marketing digital y el ecommerce
incrementó hasta en un 50% debido a la cuarentena obligatoria y el no poder realizar ventas de
forma presencial.
11
Bajo estas estadísticas, la empresa necesita una forma de digitalizar su atención a los
clientes y el control de pedidos sin recaer en la saturación que ya se tiene mediante la atención por
medio de Whatsapp y demás redes sociales.
12
2. Objetivos
2.1. Objetivo general
Diseñar y desarrollar una página web como solución a las problemáticas existentes para
la empresa Suculenta Villavicencio.
2.2. Objetivos específicos
• Identificar los problemas presentes en la empresa.
• Establecer los requerimientos deseados por la propietaria.
• Implementar metodologías de desarrollo de software.
• Diseñar las diferentes interfaces para cada espacio dentro de la página.
• Agilizar el proceso de solicitud de pedidos por los clientes.
• Mejorar el servicio al cliente a través de la recepción de pedidos por otro canal.
• Desarrollar y verificar el funcionamiento de la página web.
13
3. Justificación
3.1. Antecedentes
Suculenta Villavicencio es una empresa oriunda del Meta, fundada en el año 2016 con el
objetivo de alegrar a los Villavicenses con la entrega de los detalles. Toman en cuenta las fechas
festivas para realizar detalles temáticos y a su vez lanzar diferentes promociones para tener la
mejor relación con los clientes.
Cuentan con diferentes proveedores que brindan desde los elementos de decoración, hasta
los ingredientes para la preparación de los alimentos incluidos en los detalles y desayunos, también
se ofrece el servicio de decoración para fechas especiales y demás. Nunca se había contemplado
la idea de una tienda virtual como expansión de la empresa, pero debido a los hechos del 2020, se
vio en la obligación de adaptarse al cambio y poner el plan en marcha. (Mondragón, 2021)
3.2. Importancia
La importancia de este proyecto para la empresa Suculenta Villavicencio y para su
propietaria es de gran magnitud debido a que éste significa una evolución para la empresa, un paso
adelante para seguir creciendo, adaptándose a las nuevas tecnologías y herramientas que existen
dentro del mercado digital para algún día llegar a una expansión enorme y ¿quién sabe? Quizá a
todo el territorio nacional.
3.3. Beneficios
Tomando los objetivos de este proyecto los cuales no son más que las diferentes
problemáticas que tiene esta empresa los beneficios para esta con el desarrollo del proyecto son:
• Respuesta inmediata a los clientes.
• Nuevo canal de atención y ventas.
• Muestra de productos de manera inmediata.
• Expansión de la empresa a un nuevo medio de venta.
14
4. Marco de referencia
4.1. Literatura sobre casos análogos
El desarrollo de este proyecto es ejecutado dentro de un CMS, el cual es un sistema de gestión de
contenidos, más específicamente Wordpress; fuera del proyecto desarrollado, existen otros
previamente desarrollados que son similares en funcionamiento, estructura o diseño:
• Construcción de un portal de compra colectiva, multitienda con WordPress
“www.shoppingimmersion”:
“A lo largo del proyecto se creará una tienda online, que aglutinará diferentes
tipos de negocios ya sean de venta de productos o de servicios, ofreciendo a los clientes
finales importantes descuentos respecto al precio original. Esta reducción del precio se
debe a la venta por volumen, o compra colectiva. El portal se establecerá como el nexo de
unión entre negocios tradicionales, que apenas tienen presencia en Internet, con clientes
que usan este medio como herramienta habitual. De esta manera se logrará que los
pequeños comercios potencien su marca y lleguen a un mayor número de clientes
potenciales, abaratarán costes y encontrarán un nuevo espacio desconocido en muchos
casos para estos. Mientras el consumidor final logrará una mayor rapidez de compra, así
como la posibilidad de eliminar los desplazamientos para la realización de sus
transacciones. Se ofrecerán productos y servicios de todo tipo, desde packs vacacionales,
hasta productos típicos de la zona (vinos blancos, marisco, etc.). Se aplicarán diferentes
métodos de pago, así como diferentes maneras de canjes de cupones”. (Sánchez, 2021)
15
Nota. Por: (Sánchez, 2021)
• Integración y extensión de funcionalidades de plataformas e-commerce:
“En el actual entorno empresarial, altamente digitalizado y global, el rápido
avance de las tecnologías hace que la competitividad en los comercios electrónicos sea
cada vez mayor. Existen multitud de soluciones estándar que permiten construir de manera
rápida servicios ecommerce con los que satisfacer modelos de negocio comunes. Sin
embargo, las empresas con una fuerte base tecnológica, como KirolDNA, requieren de
soluciones personalizadas para satisfacer sus modelos de negocio. Muchas veces no son
creaciones de software completas, sino que se trata de aplicaciones basadas en otros
softwares usados comúnmente en sus modelos de negocios. La personalización o extensión
de funcionalidades es la parte decisiva para la obtención de ventajas competitivas en
determinadas ´áreas de mercado. El objetivo de este proyecto no es mostrar con detalle
todas las tareas desarrolladas para satisfacer el modelo de negocio de nuestra empresa,
Ilustración 1. Proyecto www.shoppingimmersion.com
16
sino dar una visión global de varios aspectos relacionados con la construcción de un
modelo de negocio digital, y como se han desarrollado”. (Barquín, 2021)
Nota. Por: (Barquín, 2021)
• Marketplace La huerta en casa:
“El proyecto del presente Trabajo de Fin de Grado Multimedia sigue el itinerario
profesional marcado en el plan de estudios. El objetivo marcado a la finalización del
Proyecto es la creación de un portal de compraventa colectiva, enfocado primordialmente
a los agricultores que deseen vender sus productos directamente al consumidor. Se
pretende crear un modelo de negocio sostenible, dónde los clientes finales obtengan la
posibilidad de obtener productos frescos obtenidos directamente desde la huerta y a la vez
que el agricultor tenga la posibilidad de llegar al público final, evitando intermediarios
tradicionales pudiendo obtener un mayor valor por su producto de una forma sencilla y
Ilustración 2. Proyecto de integración e-commerce
17
cómoda para ambas partes. Los dos pilares en que se basará el proyectos serán por un
lado, una tecnología eficaz y accesible y usable; y por otro lado un negocio basado en la
conjunción del comercio tradicional con el comercio electrónico. Será por lo tanto
imprescindible incluir en el proyecto no sólo la parte técnica/tecnológica necesaria para
el correcto desarrollo de este, sino que se incluirá la estrategia de marketing online, la
analítica web y la política de medio sociales que se desarrollará. El proyecto es una web
completa donde se gestionará la compraventa de productos agrícolas directamente entre
el consumidor y el agricultor. Además es un proyecto replicable puesto que podría
utilizarse por una cooperativa o asociación de agricultores para vender los productos de
sus socios”. (Doménech, 2021)
Nota. Por: (Doménech, 2021)
4.2. Marco teórico
Dentro del desarrollo de este documento y del proyecto como tal se tomaron en cuenta los
siguientes conceptos bases para el entendimiento del lector en el tema tratado y trabajado por la
autora:
Ilustración 3. Proyecto la Huerta en Casa
18
• Wordpress:
WordPress es un sistema de gestión de contenidos, está creado con PHP y MySQL,
y sujeto a la licencia GPLv2. Es también la plataforma que ha elegido más del 42% de
todos los sitios de la web. Combina la simplicidad para los usuarios y editores con la
complejidad para los desarrolladores. (WordPress, 2021)
Nota. Por: (WordPress, 2021)
• CMS:
Un sistema de gestión de contenidos o CMS es un software desarrollado para que
cualquier usuario pueda administrar y gestionar contenidos de una web con facilidad y sin
conocimientos de programación Web. Previamente un programador deberá desarrollar la
página web en base al CMS más apropiado para el tipo de web, dejando las tareas
posteriores de gestión en manos del usuario final. (Ideamos Web, 2021)
Ilustración 4. Backend WordPress
19
• Ecommerce:
También llamado comercio electrónico es la práctica de comprar y vender
productos a través de internet. También se llama "ecommerce" a cada tienda online que se
dedica a este negocio. (Cardona, 2021)
• Marketing digital:
Es el conjunto de estrategias volcadas hacia la promoción de una marca en el
internet. Se diferencia del marketing tradicional por incluir el uso de canales y métodos
que permiten el análisis de los resultados en tiempo real. (Rdstation, 2021)
4.3. Marco legal
Como marco legal, se toman algunas leyes y normativas vigentes en Colombia, que se
tuvieron en cuenta para el desarrollo del proyecto:
• Ley 527 de 1999. “Por medio de la cual se define y reglamenta el acceso y uso de los
mensajes de datos, del comercio electrónico y de las firmas digitales, y se establecen las
entidades de certificación y se dictan otras disposiciones.” (Función Pública, 2021)
• Ley 1273 de 2009. Delitos informáticos. “Por medio de la cual se modifica el Código
Penal, se crea un nuevo bien jurídico tutelado - denominado "de la protección de la
información y de los datos"- y se preservan integralmente los sistemas que utilicen las
tecnologías de la información y las comunicaciones, entre otras disposiciones.” (Alcaldía
de Bogotá, 2021)
• Ley 1266 de 2008. Habeas Data. “Por la cual se dictan las disposiciones generales del
hábeas data y se regula el manejo de la información contenida en bases de datos
personales, en especial la financiera, crediticia, comercial, de servicios y la proveniente
de terceros países y se dictan otras disposiciones.” (Interseguridad, 2021)
20
• Decreto 3466 de 2008. “Por el cual se dictan normas relativas a la idoneidad, la calidad,
las garantías, las marcas, las leyendas, las propagandas y la fijación pública de precios
de bienes y servicios, la responsabilidad de sus productores, expendedores y proveedores,
y se dictan otras disposiciones.” (Función Púlbica, 2021)
• Artículo 1. Aplicabilidad de la ley comercial. “Los comerciantes y los asuntos
mercantiles se regirán por las disposiciones de la ley comercial, y los casos no regulados
expresamente en ella serán decididos por analogía de sus normas.” (INCP, 2021)
• Artículo 2. Aplicación de la legislación civil. “En las cuestiones comerciales que no
pudieren regularse conforme a la regla anterior, se aplicarán las disposiciones de la
legislación civil.” (INCP, 2021)
• Ley 1341 de 2009. Ley de TIC y Sociedad de la información. “Por la cual se definen
principios y conceptos sobre la sociedad de la información y la organización de las
Tecnologías de la Información y las Comunicaciones TIC, se crea la Agencia Nacional del
Espectro y se dictan otras disposiciones.” (Función Pública, 2021)
21
5. Diseño metodológico
5.1. Metodología
Las metodologías de desarrollo de software se utilizan para, como su nombre lo indica, el
buen desarrollo de un proyecto software, además de estas existen también los conocidos marcos
de trabajo que se basan en los conceptos ingenieriles y que se tienen del proyecto a desarrollar,
tomando esto en cuenta para el presente proyecto se tomó el marco de trabajo SCRUM, ya que
este, por medio de iteraciones frecuentes, permite asegurar el alcance de los objetivos presentes en
el proyecto, además de que dentro de cada una de sus fases permite una buena planeación y
desarrollo:
Nota. Por: (Netmind, 2021)
Características de SCRUM:
• El producto software se desarrolla con un enfoque iterativo + incremental.
• Flexible a los cambios en los requisitos y mejora la gestión de riesgos
• Las funcionalidades presentes en cada entrega parcial (incremento de la iteración) serán
priorizadas.
• Se realizarán reuniones frecuentes a lo largo de todo el proyecto.
Ilustración 5. Proceso SCRUM
22
Scrum es una metodología ágil para el desarrollo de proyectos que requieren mayor rapidez
y adaptabilidad en sus resultados. Los ejecutivos que la aplican en sus organizaciones tienen dos
objetivos principales: brindar un mayor valor de productos finales para sus consumidores y
potenciar la flexibilidad en sus procesos. El Scrum está basado en Sprints, intervalos establecidos
que plantea la empresa para generar un producto entregable. En cada uno de ellos se desarrollan
mini proyectos que sirven para mejorar la eficacia del proyecto principal. Estas son las principales
etapas del Scrum: planificación del sprint, etapa de desarrollo, revisión del sprint y
retroalimentación. (Conexión ESAN, 2021)
5.2. Implementación de la metodología
Tabla 1. Roles SCRUM del proyecto
Product Owner Scrum Master Equipo de desarrollo
Suculenta Villavicencio –
Laura Mondragón
Nathaly Martínez Baquero
Nota. Por: Creado por la autora.
• Descripción de roles:
- Product Owner: el cual es el cliente a quién se le está realizando el proyecto, en este
caso es la empresa Suculenta Villavicencio cuya propietaria es Laura Nathalia
Mondragón.
- Scrum Máster: quien se encarga del correcto desarrollo y liderazgo del proyecto, así
como la correcta recolección de información y voz principal en las iteraciones con el
Product Owner, en este caso el cargo es para la estudiante Nathaly Martínez Baquero.
- Equipo de desarrollo: encargados del desarrollo de objetivos y del producto como tal,
en este caso correspondiente a la estudiante Nathaly Martínez Baquero.
23
• Cronograma del proyecto:
El cronograma del proyecto se realizó a partir de los objetivos planteados con base
en las problemáticas halladas en la empresa, estos fueron registrados dentro de una tabla la
cual se aprecia a continuación:
Nota. Por: Creador por la autora.
Ilustración 6. Cronograma generado por la herramienta Planner
24
Para el desarrollo del cronograma se utilizó la herramienta Planner, brindada por
Microsoft Office 365 cuyos permisos fueron otorgados gracias a la cuenta estudiantil de la
Universidad Cooperativa de Colombia, en ella se llevó la fecha inicio y la fecha límite de
cada uno de los objetivos a cumplir, así como la importancia de cada uno, etc.
Nota. Por: Creación de la autora.
• Product Backlog:
Ilustración donde se registran los puntos específicos a desarrollar del producto a
entregar, de manera que estos se puedan clasificar por medio de su nivel de prioridad dentro
del producto y su dependencia con los demás objetivos.
Tabla 2. Product Backlog
ID Título Descripción Prioridad Dependencia Prueba de
aceptación
REQ
01
Módulo de
Registro de
usuarios
La tienda
virtual permitirá
el registro de
nuevos clientes
previo a la
verificación en
Alta -
La tienda virtual
debe contar con
un login para
mayor seguridad
y analizar que los
Ilustración 7. Tienda Virtual Suculenta Villavicencio en Planner
25
la base de datos
de clientes.
usuarios creados
sean válidos y
mandar mensaje
de error en caso
de ingreso de
valores erróneos. REQ
02
Módulo de
inicio
(login)
La tienda
virtual contará
con un login
para los
usuarios
registrados que
permitirá la
compra de
productos.
Muy Alta REQ 01
REQ
03
Módulo de
catálogo de
productos
La tienda
virtual mostrará
al visitante y al
cliente el
catálogo de
productos.
Alta REQ 02
Se visualiza los
productos
disponibles para
añadir al carrito
de compras con su
valor unitario.
REQ
04
Módulo
carrito de
compras
Permite añadir
productos al
carrito, esto
dará
continuación al
proceso del
pedido.
Muy Alta REQ 03
Mostrará la
cantidad de
productos
agregados y su
total acumulado
del pedido en
tiempo real.
REQ
05
Módulo de
pedidos
Cada usuario
registrado
contará con un
historial de
pedidos.
Alta REQ 04
Se visualiza el
historial de
pedidos y
compras
realizadas
ordenadas
cronológicamente.
REQ
06
Módulo
finalizar
compra
Permite elegir
el método de
pago, muestra
la factura y
permite el pago
del pedido
Muy Alta REQ 02
Verifica el
pedido, su método
de pago y se
suministra la
información
necesaria para la
factura y entrega
del pedido.
REQ
07
Página
política de
privacidad
e
información
La tienda
virtual mostrará
al usuario la
información
básica de la
empresa, la
política de
Alta REQ 01
Todo usuario que
desee registrarse
deberá leer los
términos y
condiciones para
aceptar el
26
de la
empresa
privacidad y
tratamiento de
la información
suministrada
por el cliente.
tratamiento de
datos.
Nota. Por: Creación de la autora.
• Sprint Planning
Ilustración donde se muestra la planeación de los diferentes Sprints dentro del
proyecto, también conocido como la parte de Planificación de tareas:
Tabla 3. Sprint Planning
ID Prioridad Ejecutor Descripción
1 Muy Alta
Nathaly Martínez
Baquero
Identificación de los
problemas de la empresa
2 Alta Levantamiento de requerimientos
3 Alta Elaboración del modelado del producto
4 Media Definición de metodología y arquitectura a
implementar en el proyecto
5 Media Implementación de redes sociales
6 Muy Alta Página de inicio
7 Alta Módulo de registro
8 Alta Módulo catálogo de productos
10 Alta Módulo de pedidos
11 Muy Alta Módulo carrito de compras
12 Alta Módulo finalizar compra
13 Alta Implementación del Chatbot
14 Muy Alta Configuración del sistema de pagos
15 Muy Alta Pruebas de los módulos
Nota. Por: Creación de la autora.
27
• Sprints
Tabla 4. Sprint 1
SPRINT 1 Inicio: Marzo
(mes 1)
Fin: Mayo
(mes 3)
Duración: 2
meses
Backlog ID Tarea Tipo Estado Responsable
HT1
Revisar las
herramientas
necesarias para
la creación de la
tienda virtual
Investigativo Completado
Nathaly
Martínez
Baquero HT2 Análisis de
requerimientos Investigativo Completado
HT3 Definir la
arquitectura del
aplicativo web
Diseño Completado
Nota. Por: Creación de la autora
Tabla 5. Sprint 2
SPRINT 2 Inicio: Mayo
(mes 3)
Fin: Julio
(mes 5)
Duración: 2
meses
Backlog ID Tarea Tipo Estado Responsable
HT1 Diagramas Documental Completado
Nathaly
Martínez
Baquero
HT2 Diseño del
chatbot Diseño Completado
HT3 Diseño y
muestra del
login
Diseño Completado
HT4 Diseño y
muestra de la
página de inicio
Diseño Completado
Nota. Por: Creación de la autora.
28
Tabla 6. Sprint 3
SPRINT 3 Inicio: Julio
(mes 5)
Fin: Octubre
(mes 8)
Duración: 3
meses
Backlog ID Tarea Tipo Estado Responsable
HT1
Diseño y
muestra del
Módulo catálogo
de productos
Diseño Completado
Nathaly
Martínez
Baquero
HT2
Diseño y
muestra del
módulo de
pedidos
Diseño Completado
HT3
Diseño y
muestra del
Módulo carrito
de compras
Diseño Completado
HT4 Configuración
del sistema de
pagos
Diseño Completado
HT5
Diseño y
muestra del
módulo
Finalizar compra
Diseño Completado
HT6 Pruebas de los
módulos Testeo Completado
Nota. Por: Creación de la autora.
5.3. Desarrollo y modelado ingenieril
• Requerimientos funcionales:
La tienda virtual Suculenta Villavicencio Web permitirá realizar las siguientes funciones:
- Administrar pedidos: El administrador del sistema podrá gestionar los pedidos
dentro del SVW (organizar, buscar, eliminar).
- Administrar productos: El administrador del sistema podrá gestionar los
productos dentro del SVW (agregar, modificar, eliminar, buscar).
- Administrar usuarios: El administrador del sistema podrá gestionar los
usuarios dentro del SVW (agregar, modificar, eliminar, buscar).
29
- Compras: Proceso por el cual el cliente realizará el pago de su producto
mediante los medios de pago establecidos en el SVW.
- Generación de estadísticas: Proceso por el cual, para vista del administrador,
se generarán estadísticas de las ventas de los productos y el número de pedidos
y registros.
- Generación de notificaciones: Proceso por el cual el SVW notificará al cliente
y al administrador de cualquier pedido realizado.
- Navegación: Acto de indagación por parte de los visitantes dentro del SVW.
- Publicación de Información: El administrador del sistema actualizará la
información general dentro del SVW (productos, información de la empresa,
festividades, fechas especiales, etc).
- Registro: Proceso por el cual los visitantes pueden registrarse en el SVW y así
realizar compras.
- Chatbot: Permitir la comunicación de los clientes con un sistema de IA
(Chatbot) para cualquier inquietud que estos presenten.
• Requerimientos no funcionales:
- Aplicación de la usabilidad para visitantes y usuarios.
- Contar con un dispositivo el cual tenga acceso a internet.
- La tienda virtual deberá estar en capacidad de dar respuesta a todos los usuarios.
- La tienda virtual deberá ser diseñada y construida con los niveles mínimos de
flexibilidad y adaptabilidad.
- La solución debe tener interfaces gráficas claras de operación.
30
• Diagrama de casos de uso:
Ilustración 8. Diagrama de casos de uso
Nota. Por: Creación de la autora.
31
- Descripción de los casos de uso:
Tabla 7. Caso de uso número 1
Caso de uso Registrar Usuario
Identificador 1
Descripción El visitante registra sus datos en la tienda
virtual para lograr obtener su sesión como
usuario y posteriormente cliente.
Actor principal Visitante
Actor secundario Administrador
Precondiciones Ingresar a la tienda virtual
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte Mi cuenta
3- Ingresar datos
4- Ingresar Usuario
5- Ingresar contraseña
6- Validar datos
7- Sesión iniciada
Post condiciones Tener una sesión de usuario registrada
Flujos alternativos Error en el ingreso de datos
Error en la verificación de datos
Error al cargar la tienda virtual.
Nota. Por: Creación de la autora.
Tabla 8. Caso de uso número 2
Caso de uso Visualizar catálogo de productos
Identificador 2
Descripción El visitante (ya sea como visitante o
cliente con cuenta registrada) podrá ver
los diferentes productos ofrecidos por la
empresa en la tienda virtual
Actor principal Visitante
Actor secundario Cliente
Precondiciones Ingresar a la tienda virtual
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Tienda
3- Visualizar los diferentes productos
ofrecidos
Post condiciones Lograr identificar y conocer cada uno de
los productos disponibles dentro de la
tienda virtual
Flujos alternativos Error al cargar la página de Tienda
Nota. Por: Creación de la autora.
32
Tabla 9. Caso de uso número 3
Caso de uso Iniciar sesión
Identificador 3
Descripción El visitante deberá registrarse para poder
iniciar su sesión y categorizarse como
cliente, así mismo el cliente podrá iniciar
sesión en el momento que lo desee.
Actor principal Cliente
Actor secundario Visitante
Precondiciones Haber registrado un usuario y contraseña
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Mi cuenta
3- Ingresar usuario
4- Ingresar contraseña
5- Validar datos
6- Sesión iniciada en la tienda virtual
Post condiciones Lograr el inicio de sesión
Flujos alternativos Error en el ingreso de usuario o
contraseña
Error al cargar la página Mi cuenta.
Nota. Por: Creación de la autora.
Tabla 10. Caso de uso número 4
Caso de uso Agregar pedido
Identificador 4
Descripción El cliente podrá agregar los pedidos que
desee a su cuenta parcial o total.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión con su usuario y
contraseña
Flujo principal 1- Entrar a la tienda virtual
2- Realizar el inicio de sesión
3- Ir a la parte de Tienda
4- Escoger un producto
5- Agregar el pedido al Carrito
Post condiciones Lograr agregar un pedido al Carrito para
la cuenta total o parcial del cliente.
Flujos alternativos Error en el inicio de sesión.
Error al cargar la página Tienda.
Error al agregar un pedido al Carrito.
Nota. Por: Creación de la autora.
33
Tabla 11. Caso de uso número 5
Caso de uso Modificar Pedido
Identificador 5
Descripción El cliente podrá realizar la modificación
de su pedido siempre y cuando este no
haya finalizado.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado un pedido al Carrito.
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Carrito
3- Seleccionar el pedido a modificar
4- Modificar lo que se quiera
modificar
5- Validar datos
Post condiciones Pedido deseado modificado
Flujos alternativos Error en el inicio de sesión
Error al cargar la página de Carrito
Error al agregar pedido
Error al modificar pedido
Nota. Por: Creación de la autora.
Tabla 12. Caso de uso número 6
Caso de uso Visualizar pedidos
Identificador 6
Descripción El cliente podrá visualizar los pedidos
realizados justo antes de finalizar la
compra
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado pedidos al Carrito.
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Carrito
3- Visualizar los pedidos realizados
Post condiciones Lograr la visualización de pedidos antes
de finalizar la compra
Flujos alternativos Error en al iniciar sesión
Error al cargar la página de Carrito
Error al visualizar pedidos.
Nota. Por: Creación de la autora.
34
Tabla 13. Caso de uso número 7
Caso de uso Eliminar pedido
Identificador 7
Descripción El cliente podrá eliminar el pedido que
desee siempre y cuando este no haya
finalizado su compra.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado pedidos al Carrito
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Carrito
3- Agregar pedidos al Carrito
4- Visualizar los pedidos realizados.
5- Eliminar el pedido escogido
Post condiciones Lograr la eliminación del pedido no
deseado.
Flujos alternativos Error al iniciar sesión
Error al agregar pedidos al Carrito
Error al visualizar los pedidos
Error al eliminar el pedido deseado.
Nota. Por: Creación de la autora.
Tabla 14. Caso de uso número 8
Caso de uso Visualizar historiales
Identificador 8
Descripción El cliente podrá visualizar el historial de
compra registrado a su usuario y sesión.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber realizado y finalizado pedidos en la
tienda virtual.
Flujo principal 1- Entrar a la tienda virtual
2- Ir a la parte de Mi cuenta
3- Ir a la parte de Pedidos
4- Visualizar el historial de pedidos
realizados
Post condiciones Lograr visualizar el historial de pedidos
finalizados.
Flujos alternativos Error al iniciar sesión
Error al cargar la página Mi cuenta
Nota. Por: Creación de la autora.
35
Tabla 15. Caso de uso número 9
Caso de uso Finalizar compra
Identificador 9
Descripción El cliente podrá finalizar su compra a
través de la tienda virtual
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber agregado un pedido al Carrito
Flujo principal 1- Entrar a la tienda virtual
2- Agregar un pedido al carrito
3- Ir a la parte de Finalizar compra
4- Ingresar los datos requeridos
5- Finalizar la compra pagando por
medio de las formas de pago
disponibles
Post condiciones Lograr la finalización de la compra
Flujos alternativos Error al iniciar sesión
Error al agregar pedido
Error al finalizar compra.
Nota. Por: Creación de la autora.
Tabla 16. Caso de uso número 10
Caso de uso Descargar
Identificador 10
Descripción El cliente podrá realizar la descarga de su
comprobante de compra si así lo quiere.
Actor principal Cliente
Actor secundario Administrador
Precondiciones Haber iniciado sesión
Haber finalizado al menos una compra
Flujo principal 1- Entrar a la tienda virtual
2- Agregar un pedido al carrito
3- Finalizar pedido
4- Descargar el recibo de compra.
Post condiciones Lograr la descarga del o los recibos de
compra.
Flujos alternativos Error al iniciar sesión
Error al finalizar la compra
Error al generar recibo y descarga.
Nota. Por: Creación de la autora.
36
Tabla 17. Caso de uso número 11
Caso de uso Agregar productos
Identificador 11
Descripción El administrador de la tienda virtual podrá
agregar los productos que desee.
Actor principal Administrador
Actor secundario Administrador secundario
Precondiciones Haber iniciado sesión con el usuario del
administrador
Flujo principal 1- Entrar a la tienda virtual
2- Iniciar sesión bajo el usuario
administrador
3- Agregar productos.
Post condiciones Lograr agregar los productos que se
deseen a la tienda virtual
Flujos alternativos Error al iniciar sesión
Error al agregar productos.
Nota. Por: Creación de la autora.
Tabla 18.Caso de uso número 12
Caso de uso Modificar productos
Identificador 12
Descripción El administrador podrá realizar la
modificación de los productos según estos
varíen en su precio, cantidad, tamaño, etc.
Actor principal Administrador
Actor secundario Administrador secundario
Precondiciones Haber iniciado sesión bajo el usuario del
administrador
Tener productos agregados los cuales
poder modificar
Flujo principal 1- Entrar a la tienda virtual
2- Iniciar sesión con el usuario
administrador
3- Agregar al menos un producto a la
tienda virtual
4- Modificar el producto existente
Post condiciones Lograr la modificación del producto
deseado.
Flujos alternativos Error al iniciar sesión
Error en la modificación del o los
productos.
Nota. Por: Creación de la autora.
37
Tabla 19. Caso de uso número 13
Caso de uso Eliminar productos
Identificador 13
Descripción El administrador podrá eliminar los
productos que desee siempre y cuando
estos ya existan dentro de la tienda virtual.
Actor principal Administrador
Actor secundario Administrador secundario
Precondiciones Haber iniciado sesión con el usuario
administrador
Tener productos existentes dentro de la
tienda virtual
Flujo principal 1- Entrar a la tienda virtual
2- Iniciar sesión bajo el usuario del
administrador
3- Visualizar los productos existentes
4- Eliminar el producto escogido
Post condiciones Lograr eliminar uno o más productos.
Flujos alternativos Error al iniciar sesión
Error al eliminar productos
Nota. Por: Creación de la autora.
• Modelo entidad – relación:
Nota. Por: Creación de la autora.
Ilustración 9. Modelo entidad-relación
38
• Diagrama de clases:
Ilustración 10. Diagrama de clases
Nota. Por: Creación de la autora.
• Arquitectura del proyecto:
Tomando que la arquitectura es: “la arquitectura de un sistema de software (en un
punto determinado) es la organización o la estructura de los componentes importantes del
sistema que interactúan mediante interfaces, con componentes compuestos de interfaces y
componentes cada vez más pequeños”. (CGRW01, 2021)
Se desarrolló dentro de este proyecto:
- Arquitectura cliente servidor:
En un sistema con arquitectura cliente-servidor, la información está almacenada
y gestionada en el servidor, y los clientes hacen peticiones, en este caso a través de
39
Internet, para recibirla. En el caso de los Gestores de Contenidos como WordPress, al
funcionar con páginas dinámicas con el lenguaje de programación PHP, el proceso
tiene algunos pasos más. De forma simplificada lo podemos describir en estos pasos:
Nota. Por: (Digital Learning, 2021)
- Arquitectura del CMS Wordpress:
Los themes WordPress utilizan varios archivos a la vez para formar una página,
que son llamados por funciones específicas de la plataforma para facilitar el proceso.
Estos son similares a la función include de PHP y evitan tener que escribir la misma
porción de código en varias plantillas. Por ejemplo, la sección del encabezado del sitio
siempre es igual, llevará un logo y unos botones que no se cambiará; en un sitio
construido íntegramente en HTML se debe copiar este código en cada una de las
páginas.
En cambio, en WordPress bastará con escribir todo el código del encabezado
dentro de header.php y luego solicitar el encabezado en cada sección que se requiera.
El proceso es igual para la barra lateral (sidebar.php) y el pie de página (footer.php).
De ese modo cuando se lista el index de un sitio WordPress, éste estará compuesto de
los archivos header.php, index.php, sidebar.php y footer.php.
Ilustración 11. Arquitectura Cliente-Servidor aplicada en Wordpress
40
“ Para el caso de listar una página los archivos serán: header.php, page.php,
sidebar.php y footer.php. Se diferencia en que el inicio utiliza index.php para mostrar
su contenido principal y una página utiliza el archivo page.php.” (Aguilar, 2021)
Nota. Por: (Aguilar, 2021)
Ilustración 12. Estructura WordPress
41
6. Resultados
Se tomó en cuenta todo aquello que la propietaria veía como necesario para el resultado
final de la tienda virtual, adicionando las iteraciones y reuniones que hubo con ella, se logró
establecer un diseño base trabajado con CSS y HTML, para proceder con una versión beta de lo
que es la tienda y las funciones de esta.
Se adecuó el CMS al diseño establecido, además de añadir el código fuente CSS y PHP
para que el diseño al ser pasado a WordPress quedará mejor aplicado.
Como resultado final se obtiene la página principal de la tienda virtual, el carrito de compra,
la página de la tienda donde se muestran los productos y la página de Mi cuenta que permite al
cliente ver su historial de compra y datos de envío establecidos dentro de la página.
Nota. Por: Creación de la autora.
Ilustración 13. Resultado página de inicio
42
Nota. Por: Creación de la autora.
Nota. Por: Creación de la autora.
Ilustración 14. Resultado página Tienda
Ilustración 15. Resultado página Carrito
43
7. Análisis y discusión
Analizando los diseños bases establecidos para trabajar en la versión beta de la tienda
virtual y haciendo la comparación con los resultados finales, la satisfacción por parte de la
propietaria de la empresa es del 97%, esto enfatizando que el resultado final sigue abierto a
cambios constantes debido a que solo es la versión beta del producto fina. Con la flexibilidad de
desarrollo de WordPress, se logró implementar el código CSS y esto permite igualdad entre el
diseño establecido previamente en Visual Studio Code y el presentado funcional en el CMS
WordPress.
Nota. Por: (BuiltWith, 2021)
WordPress es el CMS más utilizado dentro del mundo de los CMS, como fue mencionado
es fácil de mantener y actualizar. Es versátil ya que logra implementar una apariencia más visual
y, así mismo, muchas características e integrar contenidos de diferentes sistemas.
Para este proyecto se eligió este CMS porque es fácil de crear temas y complementos
personalizados, además de permitir la inyección de código abierto para mayor precisión en el ajuste
Ilustración 16. Distribución estadística de los sitios web que usan CMS
44
de lo deseado por el usuario; respecto a este punto surgieron dudas sobre ¿Por qué no usar Wix
como CMS principal si se habla de la sencillez en cuanto a la personalización de la tienda virtual?
“ Bueno esto se contempla desde el punto de que la plataforma que se elija debería
ofrecerte suficientes opciones para que puedas crear cualquier tipo de sitio web que quieras. Wix
no se queda atrás en cuanto a la personalización. Te permite agregar una gran cantidad de
funciones útiles a tu sitio web, como secciones de comentarios, foros, chat en vivo e incluso tiendas
online, del mismo modo, la plataforma ofrece muchas opciones de estilo, incluidos los temas y las
herramientas que necesitarás para editar la apariencia y el diseño de tu sitio. ¿Y WordPress?
Podemos empezar diciendo que WordPress está en una liga propia en cuanto a personalización.
Cuando utilizas esta plataforma, obtienes acceso a miles de Plugins y temas. Estos pueden alterar
dramáticamente la apariencia y la funcionalidad de tu sitio, permitiéndote crear sitios web únicos
con casi cualquier función que puedas imaginar. Lo mejor es que muchos de los mejores Plugins
de WordPress son gratuitos, lo que significa que puedes instalar una función avanzada sin tener
que gastar tu presupuesto.
Es común que, independientemente de lo que quieras agregar a tu sitio, exista un plugin
para ayudarte a hacerlo. Finalmente, también vale la pena recordar que WordPress es una
plataforma de código abierto. Esto significa que si te inclinas por el lado técnico, puedes editar
cualquier aspecto del código, alterar su funcionalidad y aspecto manualmente. Si tienes alguna
experiencia en desarrollo web o estás dispuesto a aprender de las guías que hay en internet,
puedes crear sitios web de WordPress con características que Wix no puede igualar. Por esas
razones, tenemos que dar como claro ganador a WordPress en cuanto a las opciones de
personalización. El sitio de WordPress es más fácil de usar cuando lo comparas con Wix. La
plataforma de blogs tiene todas sus necesidades en un solo lugar.” (Hostinger, 2021)
Además, el punto clave de este proyecto es la correcta administración de la tienda virtual,
por ende se busca el buen control de pedidos, control de usuarios, control de inventario y
WordPress es más conveniente para usar el complemento de Woocomerce; ¿bajo qué comparativa
se llegó a la conclusión de Wordpress como principal herramienta en comercio electrónico?
“ Hoy en día, la gente está vendiendo más y más productos en línea. Veamos cómo se
compara cada plataforma en la configuración de una tienda en línea. Con Wix, tienes la opción
de agregar una tienda en línea a tu sitio web, sin embargo, solo puedes agregar comercio
45
electrónico con un plan pago. Los planes de comercio electrónico de Wix vienen con todas las
características que necesitarás para vender productos, sin embargo, es un poco sencillo en
comparación con otros complementos, como Shopify. WixStores acepta tarjetas de crédito o
débito, con la excepción de UnionPay solo disponible para algunos usuarios. PayPal u otros
pagos no mencionados en el sitio Wix no son aceptados.
El creador de sitios web de WordPress, por otro lado, es compatible con sitios de comercio
electrónico y el complemento gratuito de WordPress Woocomerce ya está siendo utilizado por el
26% del 1 millón de sitios principales que usan comercio electrónico. WordPress tiene otros
complementos gratuitos de comercio electrónico disponibles para ayudar a los usuarios a vender
todo, desde servicios, productos, suscripciones, eventos, etc. Todavía tendrás que pagar una tarifa
de transacción, pero los complementos son de instalación gratuita. Algunos complementos
conocidos de WordPress son Woocomerce, BigCommerce y Shopify. Cuando se trata de comercio
electrónico, es fácil ver que WordPress es el camino por seguir. Con numerosas opciones de
Plugins gratuitos, te permite tener más flexibilidad y opciones. Mientras que con Wix, deberás
registrarte en el plan de pago de ecommerce para recibir los mismos beneficios.” (Hostinger,
2021)
Por último, WordPress tiene un buen soporte y los materiales se encuentran fácilmente en
línea y también es conveniente para la optimización de motores de búsqueda (SEO).
Nota. Por: (BuiltWith, 2021)
Ilustración 17. Comparativa de popularidad entre los CMS.
46
8. Conclusiones
El implementar la tienda virtual a la empresa Suculenta Villavicencio teniendo en cuenta
que la evolución del comercio electrónico dio un salto exponencial a causa de la situación
provocada por el COVID 19, es un avance significativo para la empresa para su publicidad y
mejora en calidad, puesto que todo se realizó con el fin de cumplir con los objetivos establecidos
por la propietaria y buscar solución a las problemáticas establecidas.
Entrando en conclusiones técnicas, se escogió el desarrollo en CSS debido a que es el
lenguaje para describir la presentación de las páginas web, incluidos los colores, el diseño y las
fuentes. Permite adaptar la presentación a diferentes tipos de dispositivos, como pantallas grandes,
pantallas pequeñas o impresoras.
CSS es independiente de HTML y se puede utilizar con cualquier lenguaje de marcado
basado en XML. La separación de HTML de CSS hace que sea más fácil mantener los sitios,
compartir hojas de estilo entre páginas y adaptar las páginas a diferentes entornos. Esto se conoce
como la separación de la estructura (o: contenido) de la presentación.
Así mismo se escogió HTML para describir la estructura de las páginas web, esto puesto
que permite publicar documentos en línea con encabezados, texto, tablas, listas, fotos, etc;
recuperar información en línea a través de enlaces de hipertexto, con solo hacer clic en un botón.
Permite el diseño de formularios para la realización de transacciones con servicios remotos, para
su uso en la búsqueda de información, realización de reservas, pedido de productos, etc.
Con HTML, se logra describir la estructura de las páginas mediante la marcación de los
elementos del lenguaje que se etiquetan como partes de contenido tales como párrafo, lista, tabla
y esto da un punto a favor enorme en cuanto a la organización del código.
47
Referencias
Aguilar, J. (26 de 11 de 2021). WordPress Content. Obtenido de https://www.jose-
aguilar.com/blog/wp-content/uploads/2012/11/layout.jpg
Alcaldía de Bogotá. (26 de 11 de 2021). Normas. Obtenido de
https://www.alcaldiabogota.gov.co/sisjur/normas/Norma1.jsp?i=34492
Barquín, F. M. (03 de 12 de 2021). Repositorio UNICAN. Obtenido de
https://repositorio.unican.es/xmlui/bitstream/handle/10902/9380/Mangas%20Barquin%2
0Francisco.pdf?sequence=1&isAllowed=y
BuiltWith. (2021). CMS. Retrieved from https://trends.builtwith.com/cms
Cardona, L. (26 de 11 de 2021). Cyberclick. Obtenido de https://www.cyberclick.es/numerical-
blog/que-es-un-ecommerce-tipos-como-crearlo-y-ejemplos
CGRW01. (26 de 11 de 2021). Conceptos. Obtenido de
https://cgrw01.cgr.go.cr/rup/RUP.es/SmallProjects/core.base_rup/guidances/concepts/sof
tware_architecture_4269A354.html
Conexión ESAN. (26 de 11 de 2021). Etapas SCRUM. Obtenido de
https://www.esan.edu.pe/apuntes-empresariales/2018/10/las-etapas-del-scrum-como-
aplicar-este-metodo/
Digital Learning. (26 de 11 de 2021). Cliente Servidor CMS. Obtenido de
http://www.digitallearning.es/wp-content/uploads/2017/08/ClienteServidorCMS_2.png
Doménech, P. F. (03 de 12 de 2021). Open Access UOC. Obtenido de
http://openaccess.uoc.edu/webapps/o2/bitstream/10609/45186/4/pauferrerTFG0116memo
ria.pdf
Función Pública. (26 de 11 de 2021). Gestor Normativo. Obtenido de
https://www.funcionpublica.gov.co/eva/gestornormativo/norma.php?i=4276
Función Pública. (26 de 11 de 2021). Gestor Normativo. Obtenido de
https://www.funcionpublica.gov.co/eva/gestornormativo/norma.php?i=36913
Función Púlbica. (26 de 11 de 2021). Gestor Normativo. Obtenido de
https://www.funcionpublica.gov.co/eva/gestornormativo/norma.php?i=2764
Hostinger. (2021). Hostiger. Retrieved from Wix vs Wordpress. Obtenido de
https://www.hostinger.com.ar/tutoriales/wix-vs-wordpress
Ideamos Web. (26 de 11 de 2021). Ideamos Web. Obtenido de https://ideamosweb.com/que-es-
un-cms-y-que-ventajas-
tiene/#:~:text=CMS%20son%20las%20siglas%20de,sin%20conocimientos%20de%20pr
ogramaci%C3%B3n%20Web.
48
INCP. (26 de 11 de 2021). Legislativa. Obtenido de
https://incp.org.co/Site/productosyservicios/legislativa/410/l1410.htm
Interseguridad. (26 de 11 de 2021). Normativa Habeas Data. Obtenido de
https://interseguridad.org/normatividad-habeas-data-y-manejo-de-informacion/
Malavida. (24 de 11 de 2021). Malavida. Obtenido de
https://imag.malavida.com/mvimgbig/download-fs/joomla-702-2.jpg
Malavida. (26 de 11 de 2021). Malavida. Obtenido de
https://imag.malavida.com/mvimgbig/download-fs/joomla-702-2.jpg
Mondragón, L. (11 de 04 de 2021). Problemáticas de Suculenta Villavicencio. (N. M. Baquero,
Entrevistador)
Netmind. (26 de 11 de 2021). SCRUM. Obtenido de https://netmind.net/es/wp-
content/uploads/2020/12/MicrosoftTeams-image-37.png
Rdstation. (26 de 11 de 2021). Marketing Digital. Obtenido de
https://www.rdstation.com/es/marketing-digital/
Sánchez, J. P. (03 de 12 de 2021). Open Access UOC. Obtenido de
http://openaccess.uoc.edu/webapps/o2/bitstream/10609/42262/8/jpeinadosTFG0615mem
oria.pdf
Soluciones. (s.f.). Solucines.
Solucionex. (26 de 11 de 2021). Solucionex. Obtenido de
https://www.solucionex.com/sites/default/files/posts/imagen/drupal_2.png
Wikipedia. (26 de 11 de 2021). Wikipedia. Obtenido de https://es.wikipedia.org/wiki/Joomla
Wikipedia. (26 de 11 de 2021). Wikipedia. Obtenido de https://es.wikipedia.org/wiki/Drupal
Wikipedia. (26 de 11 de 2021). Wikipedia. Obtenido de
https://es.wikipedia.org/wiki/PrestaShop#/media/Archivo:Prestashop-logo-vector.png
Wikipedia. (26 de 11 de 2021). Wikipedia. Obtenido de https://es.wikipedia.org/wiki/PrestaShop
WordPress. (26 de 11 de 2021). WordPress. Obtenido de https://es-co.wordpress.org/about/
WordPress. (26 de 11 de 2021). WordPress. Obtenido de https://s.w.org/images/home/screen-
themes.png?3
49
Anexos
Anexo A. Fragmento entrevista a Laura Mondragón – Propietaria de Suculenta Villavicencio
N: ¿Cuál diría que es el mayor problema presente en la empresa?
L: En definitiva la saturación de pedidos en ciertos días, en este ámbito laboral hay días de días,
días en los cuales pueden escribir solo dos personas o días en los que escriben entre treinta o
cuarenta personas.
N: Para los días de alta actividad, ¿diría que la gestión es correcta?
L: No realmente, pese a que Whatsapp Bussines ayuda etiquetando los chats para realizar la
organización de estos, siempre puede haber error humano y que se pase uno que otro pedido por
medio de esta herramienta de trabajo.
50
Anexo B. Código CSS para el diseño base de las páginas de la tienda virtual
Nota. Por: Creación de la autora.
51
Anexo C. Diseño base para la tienda virtual
Nota. Por: Creación de la autora
52
Anexo D. Diseño base del inicio de sesión
Nota. Por: Creación de la autora.
53
Anexo E. Modelo Canvas de Suculenta Villavicencio
Nota. Por: Creación de la autora.
54
Anexo F. Especificación de requerimientos funcionales
Nota. Por: Creación de la autora.