Diseño de Tienda Virtual Para La Comercialización de Repuestos de

Autos de la Empresa Punto de Mil  

Marcos Heredia  1, Camilo Hernández2, Nelson Escarraga3, Abraham Cardenas4, Santiago

Guatavita5, Sebastián Gaitan6  

1: Ingeniería de Sistemas, Universidad Piloto de Colombia Seccional del Alto Magdalena 1. Girardot,
Colombia

Marcos-heredia@upc.edu.co, Camilo-hernandez3@upc.edu.co ,Nelson-escarraga@upc.edu.co, Abraham-
cárdenas @upc.edu.co, Santiago-guatavita @upc.edu.co, Sebastian-gaitan @upc.edu.co 

Resumen
En el presente proyecto se plantea el Desarrollo e implementación de una página web de una tienda de repuestos, la
idea es dar a conocer los productos de la empresa Ventas Punto Mil de la ciudad de Girardot, de esta manera se plantea
el modelo de una página fácil y sencilla de utilizar, ya que puede visualizar los productos y categorías sin ningún tipo de
falencia y de forma ordenada, teniendo en cuenta que si el usuario tiene alguna duda o inquietud podrá comunicarse con
los asesores a través de las redes sociales que se encuentran en la página. 

figura 1. Página productos y categorías (Fuente propia)

por otra parte, el desarrollo de la página se realiza basándose en varios aspectos, por ejemplo, la página es
accesible a cualquier navegador o dispositivo, ya que se utilizó varios lenguajes que permiten acoplar la página y sus
componentes de la mejor manera, con el propósito de llamar la atención de los clientes. De forma general, se puede
notar que la página web presenta servicios automotrices que persigue un único objetivo que es satisfacer las
necesidades del cliente sin dejar a un lado la garantía del producto ofrecido reduciendo al máximo costo, de esta manera
se creó esta página web como tarjeta personal digital para así ofrecer los productos y llegar adquirir reconocimiento en
Girardot y toda la zona del alto magdalena

figura 2. Página administrativa punto de venta mil (Fuente propia)

Palabras clave: HTML, CSS, PHP, SQL, Java script, base de datos, pagina web, empresa, tienda virtual. 

Abstract
The project consists of the Development of a web page for a spare parts store, the idea is to make our products known to
the public. In this way we create this page easy and simple to use so as not to confuse our consumers, since you can view
the products without any kind of flaw and if the user has any questions or concerns they can contact our advisors through
the social networks found on the page.

figura 3. Página productos y categorías (Fuente propia)

This page is accessible to any browser or device, since several languages were used in order to be able to dock the
page in the best way in this way to attract the attention of customers. In general, it can be seen that the website presents
automotive services that it pursues A single objective that is to satisfy the needs of the client without leaving aside the
guarantee of the offered product, reducing the maximum cost in this way, this website was created as a digital personal
card in order to offer the products and get recognition in Girardot mainly and in other places.

figura 4. Página administrativa punto de venta mil (Fuente propia)

Keywords: HTML, CSS, PHP, SQL, Java script, database, web page, business, On-line shop. 

1 INTRODUCCIÓN
El internet es una red global que tiene como objetivo acceder y compartir información, noticias, comunicación
de negocios y entretenimiento. Todo esto es posible a través de los sitios WEB que son como vitrinas de lo
que se quiere presentar en la internet. Las páginas web son como un documento o fuente de información
adaptada para la web, generalmente en formato HTML, compuesta con otras aplicaciones que la hace más
interactiva como los son CSS, PHP, Java script entre otras que permiten establecerla en la internet de
manera adecuada. Una página WEB es en esencia una tarjeta de presentación digital, ya sea para
empresas, organizaciones, personas, etc. Permitiendo buscar crear e interactuar de manera online entre
varios usuarios para así lograr un objetivo ya sea para beneficio de una persona o un grupo ya que facilita el
aprendizaje o ayuda a conseguir lo que necesitan de manera autónoma.

figura 5. Página bienvenida punto de Venta Mil (Fuente propia)

por otra parte, la implementación de una tienda virtual, tiene como resultado una aplicación web,
mediante la cual lo que se busca es que las empresas puedan ampliar su rango de alcance y por
consiguiente sus ventas, mediante el comercio electrónico, lo cual hoy en día es una de las mejores
opciones para ofrecer sus productos.

2 PROBLEMA

2.1 Ubicación del problema en un contexto

Pese a que, en lo últimos años, el avance tecnológico ha sido verdaderamente alto, aun son muchas las
empresas que ignorar su uso como herramienta en el campo laboral, no obstante, esto ha sido la causa por
la cual, medianas y pequeñas empresas tiendan a desaparecer o terminen siendo absorbidas por otras, ya
que al no contar con un sistema de información que maneje de forma detallada la estadísticas de la
empresa, no tienen la capacidad de tomar la mejores decisiones a nivel general de la empresa, lo cual
genera que puedan haber perdidas en las ventas y por consiguiente termina con en el cierre de las
empresas.

figura 6. Página Empresa punto de venta mil (Fuente propia)

 por tal razón, medianas y pequeñas empresas que comercializan repuestos de autos, se han visto
seriamente afectada, ya que además de haber mucha competencia, dada la situación de confinamiento
generada por la expansión del coronavirus, las ventas se han visto disminuidas de forma exponencial,   no
obstante, como respuesta a dichas problemáticas se han aplicado estrategias como son la vinculación de
tecnologías que permitan dar a conocer sus productos y llevar una estadística completa que permita tomar
las mejores decisiones, de tal manera que la perspectiva con la que se planteó este proyecto fue en
búsqueda de brindar una herramienta para la administración de la empresa Punto de Venta Mil de la ciudad
de Girardot.

figura 7. Página Ubicación Empresa punto de venta mil (Fuente propia)

2.2 Situación conflicto

Visto desde la perspectiva general del proyecto, el principal inconveniente es la construcción física y lógica
de un modelo de página web de fácil uso y que sea atractivo para los clientes, ya que muchas veces dichos
sistemas resultan difíciles de administrar, y por consecuencia generan termina en la perdida de interés por
parte de los clientes hacía los productos y servicios ofrecidos por dicho sitio.

figura 8. Situación conflicto del proyecto[ CITATION Dib15 \l 3082 ]

2.3 Causas y consecuencias del problema
De acuerdo al abordaje del problema desde distintas perspectivas y basados en (ventajas de la tecnología
en las empresas, 2016), la principal causa y consecuencia del no implementar herramientas tecnológicas en
las empresas como son las páginas web son las siguientes:

Tabla 1. Causas y consecuencias problemática [ CITATION ven16 \l 3082 ]

Causas Consecuencias
Falta de inversió n de las empresas en Baja productividad, poco incremento de
sistemas tecnoló gicos. clientes y la posibilidad de ser absorbido por
otra empresa.

Por otra parte, el no implementar las tecnologías en el campo laboral, limita enormemente la empresa, ya
factores como son la gestión de la información y potencia de innovación, se verán limitados a un modelo
tradicional, lo cual muchas veces conlleva perdidas.

2.4 Planteamiento de la pregunta

Una vez definido el problema, su contexto y sus consecuencias, se plantearon las preguntas de acuerdo a la
definición del problema y el contexto de aplicación, con el objetivo de poder dar una base constituyente para
el planteamiento de un modelo de software para el Sistema de productos online de la empresa Punto de
Venta Mil Girardot.

 ¿Cuáles son los principales inconvenientes a los que se enfrentan las personas al realizar este
tipo de proyectos?

 ¿Cómo influye las tecnologías en las empresas?

3 JUSTIFICACIÓN
Mediante el desarrollo de nuevas tecnologías y el advenimiento de la inteligencia artificial, el hombre ha
logrado la vinculación de las máquinas y demás sistemas tecnológicos en los sectores, sociales y
económicos, permitiendo llevar una logística y contabilidad más exacta de sus procesos administrativo.

figura 9. Automatización de tareas [CITATION Cóm17 \l 3082 ]

Por lo tanto, la implementación de un sitio web es una excelente opción, ya que permite que las
empresas tengan la posibilidad de ofrecer sus productos o servicios en un rango geográfico mucho mayor,
por otra parte, desde el punto de vista administrativo,  permite la automatización de procesos como son los
inventarios, logísticas y ventas en línea, esto es muy importante, ya que al hacer uso de este tipo de
herramientas se presentará un ahorro significativo, ya que los productos y servicios podrán ser ofrecidos y
actualizados constantemente y esto hará que el uso de otras herramientas como carteleras informativas no
tan necesarias.
4 METODOLOGÍA

Es claro que existen especificaciones y conceptos de manera que se pueda dar el funcionamiento más
óptimo para el desarrollo de páginas web; De forma general este proyecto se trabaja mediante dos
secciones, primero la parte estratégica, donde se investiga el propósito de la página y sus
correspondientes funcionalidades, además de sus formas de modelación, porque si bien en la actualidad
hay miles de plantillas para trabajar paginas prediseñadas, no todas favorecen o se acoplan al objetivo
de este proyecto, lo que podría generar conflictos entre la relación “vendedor – cliente”; esta parte se
explicará detalladamente con autores que corroboren lo dicho y por ello es importante trabajar la página
sin la necesidad de usar plantillas sino a puro código; la segunda parte consiste en la construcción de la
página web, haciendo alusión a la codificación de la misma mediante tres herramientas fundamentales
de desarrollo como lo son HTML, CSS y JAVASCRIPT las cuales permiten una modelación limpia y que
cumple con los estándares actuales.

figura 9. Automatización de tareas [ CITATION con19 \l 3082 ]

Para abordar un estudio sobre la algoritmia usada la página, se hará una distinción declarando que
existen diferentes tipos de páginas las cuales se van a exponer más detalladamente en posteriores
secciones.

4.1 Tipo de investigación

En este proyecto denominado Diseño de Tienda Virtual Para La Comercialización de Repuestos de Autos
de la Empresa Punto de Mil, por la modalidad corresponde a un proyecto de desarrollo aplicado que tiene
como objetivo el desarrollo de una página web que permita ofrecer los productos de una forma adecuada
y sencilla a los clientes y que además sea una herramienta administrativa y de toma de decisiones para el
propietario.

figura 20. Metodología de investigación aplicada[ CITATION Inv12 \l 3082 ]

 Existen ciertas metodologías para desarrollar un sistema como este y más desde que este campo
se potencializa cognitivamente a través de la investigación de Ludwig Von (Bertalanffy) en su obra: Teoría
General de los Sistemas. Basados en los 7 pasos de la metodología de Hall y Jenking, se busca
desarrollar un correcto proyecto respetando los parámetros que conllevan a ello:
Se definió el problema, se eligieron los correspondientes objetivos, se planteó una síntesis del
sistema para su posterior análisis y así mismo seleccionar el sistema, ya con lo anterior se empezó a
desarrollar el sistema y examinar su ingeniería.

figura 30. Teoría General de sistemas

Por otra parte, desde el desarrollo del software, se implementó otra metodología, la cual es la
metodología XP, ya que la construcción de la estructura física y lógica del proyecto se encuentran
basados en los requerimientos y funcionalidades que el cliente requiere para su empresa. Cabe
mencionar que en esta metodología se realiza el proceso denominado planning games, lo cual hace
referencia al cumplimiento, entrega y alcance funcional del proyecto, por ejemplo, el proceso de entrega
de avances del proyecto al cliente en donde, donde se da constancia de la funcionalidad del software
terminado y la respectiva retroalimentación.

figura 41. Proceso de la Metodología Xp[CITATION 1505 \l 3082 ]

4.2 Página web
Hoy en día, la tecnología se ha convertido en una de las herramientas más comunes y usadas por
el hombre en su diario vivir, ya que ha permitido realizar tareas que antes resultaban difíciles de ejecutar e
incluso imposible. Una de las aplicaciones de esta rama ha sido el comercio virtual mediante el uso
de páginas web.  según (Diccionario de la lengua española 23.ª Ed, 2020) una página web es un
“Documento electrónico que puede contener cualquier tipo de contenido (texto, sonido, vídeo, programas,
enlaces, imágenes, etc.), desarrollado mediante un lenguaje de programación, generalmente el HTML, y
que puede ser interpretado por un navegador.”

4.3 Tipo de páginas web

Las páginas web pueden ser clasificadas de múltiples formas, a continuación, se describen las principales
clasificaciones:

4.3.1 Páginas web estáticas

Este tipo de páginas se caracterizan porque muestran una información permanente en la que el usuario no
puede interactuar con la página excepto para leer el contenido.

figura 52. Web estática[ CITATION Web17 \l 3082 ]

4.3.2 Páginas dinámicas
Al contrario que las páginas webs estáticas, en las webs dinámicas los contenidos pueden ser modificados
por parte de los usuarios que las visitan y se les permite crear o modificar el aspecto de la misma a través de
la misma navegación con formularios, texto, imágenes, vídeos, etc.

figura 63. Web dinámica [ CITATION Web17 \l 3082 ]

4.3.3 Tiendas online
Los ecommerces o tiendas online son sitios webs en los que se comercializan productos o servicios.

figura 72. Ejemplo tienda online [ CITATION pen17 \l 3082 ]

4.3.4 Sitios educativos

La formación online o e-learning, ha tomado una gran importancia en los últimos años y ya es extraño no
encontrar a alguna persona que no haya realizado algún curso a distancia a través de Internet.

figura 83. Estructura página educativa [ CITATION mor18 \l 3082 ]

4.4 Importancia de las páginas web

Con el transcurso de los años las TIC han tomado gran trascendencia en muchos ámbitos de la vida, desde
situaciones básicas como comprar algún producto de una marca en específico lo cual tiene relación con el
marketing y estrategias de comercializacion hasta estudiar de forma virtual mediante una página web
alojada en un hosting online. Lo anterior se sustenta en lo dicho por (Barzabal, 2005) en un documento
acerca de las páginas web afirmando que:
 “los nuevos elementos de información y los canales de comunicación se van introduciendo en todas
las clases de entornos. Cada vez se están empleando más programas formativos en Internet, es por ello,
que las páginas Web de interés educativo, comercial y demás.
Lo anterior explicado se relaciona con la forma en que una página web es trascendental para la
sociedad en la medida que ésta sea dinámica y amigable a la hora de usar por cualquier tipo de usuario; por
lo tanto, se entiende que un sitio web debe ser susceptible de valoraciones respecto a diferentes
características como lo son el diseño gráfico, la imagen, el texto, los sonidos y demás factores que se
relacionen de forma directa con el que está del otro lado de la pantalla.
otro de los motivos del porqué es importante tener un sitio web es que la mayoría de los usuarios lo
visitan antes de comprarlo. antes de que una persona vaya a su tienda física, mira su sitio web en busca de
confianza que lo empuje al siguiente paso que es la venta. Además, tenga en cuenta que su competencia ya
está promocionándose en el internet, por lo tanto, no se quede un paso atrás 
4.5 Diseño de un sitio web
Hoy en día existen muchos tipos de páginas web, las cuales fueron diseñadas bajo unos requerimientos de
cliente, con lo que se busca ofrecer un servicio o producto de una empresa a uno o más sectores de la
sociedad, durante el desarrollo de una página web, se deben seguir varios pasos a fin de que el resultado
sea óptimo, a continuación, se mencionan dichas etapas:

Tabla 2. Causas y consecuencias problemática [ CITATION ven16 \l 3082 ]

Planificación Se plantean las herramientas de desarrollo, requerimientos, diseño general de la

página web

Propósito del Se plantea el porqué de la página, que problema busca solucionar.

sitio web
 

Creación del Se realizan gráficos necesarios para empezar a realizar la programación

sitio web
 

Orientación Se plantea la ubicación de los archivos, imágenes y demás recursos necesarios para
del sitio el proyecto.

 Programació Se realiza la codificación de cada una las paginas, las pruebas de software y
n y pruebas hardware, a fin de verificar que el posicionamiento sea optimo en la web y que los
buscadores puedan encontrarlo de forma sencilla

Publicación Se realiza el montaje del proyecto al hosting o dominio.

de página
web
 

Documentaci Se describe detalladamente las especificaciones desde el punto de vista técnico y de

ón usuario.
5 RESULTADOS Y DISCUSIÓN
En esta sección se procederá a describir los resultados obtenidos durante el desarrollo del proyecto:

5.1 Pruebas de software

Una vez finalizada la fase de codificación del proyecto, se procede a realizar las respectivas pruebas de
software desde el punto de vista funcional y lógico, a continuación, se especifican los resultados obtenidos:

5.1.1 Pruebas de html

Para realizar la prueba del código Html se hizo uso de la herramienta W3C, la cual permite revisar la
existencia de posibles errores sintácticos de lógica que haya en el proyecto, como resultado se obtuvo
algunos errores de sintaxis, los cuales fueron corregidos, una vez realizadas las modificaciones se sometió
nuevamente a prueba la página y como resultado se obtuvo lo siguiente.

figura 14. Pruebas de código Html (Elaboración propia)

5.1.2 Pruebas de css

Para realizar las pruebas en las hojas de estilos CSS, también se hizo uso del validador W3C, en este caso
como resultado no se obtuvieron errores de ninguna clase, lo cual indica que se hizo uso correcto de su
estructura sintáctica.

figura 15. Pruebas de código css (Elaboración propia)

5.1.3 Pruebas de PHP
En el proyecto, se hizo uso del lenguaje PHP, para realizar acciones como son el envío de datos de un
formulario a otro, conexiones a base de datos, manipulación de sesiones y otros procesos internos que van
tanto de la parte del usuario como del administrador, en este caso al someter el código a prueba en los
validadores no se obtuvieron errores.

figura 16. Pruebas de código PHP (Elaboración propia)

5.1.4 Pruebas de JavaScript

En este caso, el JavaScript se usó para realizar acciones, como son la inserción, modificación o eliminación
de elementos en el DOM, para acciones, con el objetivo que la página sea responsiva y para asignar
eventos a los botones o inputs y otros procesos. En este caso se obtuvieron algunos errores sintácticos los
cuales fueron corregidos.

figura 17. Pruebas de código JavaScript (Elaboración propia)

5.2 Funcionamiento de la página cliente:
Para verificar el correcto funcionamiento de la página web tanto del lado del cliente como del administrador,
se realizó el proceso de adquisición de productos y validación de datos, para asegurar que su manejo sea
sencillo y que no haya errores.

figura 18.  Funcionamiento página principal (Elaboración propia)

En primer lugar, se verificó que los componentes de cada una de las páginas funcionaran de forma
correcta, de igual manera, se verificó que tanto las categorías como los productos de dichas categorías sean
los correctos y que al momento de adquirirlos no haya inconvenientes.

figura 19.  Funcionamiento página de productos (Elaboración propia)

5.3 Funcionamiento de la base de datos
Para medir que el correcto funcionamiento de la base de datos y sus respectivas tablas, se realizaron
inserciones de usuarios y empleados, en donde se verificó que tanto las relaciones entre tablas como las
conexiones con las paginas es de forma correcta. por otra parte, se debe tener en cuenta que el al estar
alojado en un hosting gratuito el almacenamiento es un poco limitado, por lo cual se sugiere que si el
proyecto va a ser implementado a mayor escala se migre a un dominio con mayor almacenamiento.

figura 20.  Funcionamiento base de datos (Elaboración propia)

5.4 Funcionamiento de la página administrador

para medir el funcionamiento de la página web desde el punto de vista administrativo, se realizó el proceso
de login de empleados, lo que se busca con esta sección, es que la empresa cuente con una herramienta
administrativa, para llevar los procesos internos y externos de una forma mucho más sencilla y ordenada,
como resultado se obtuvo que su funcionamiento es el adecuado y es de fácil manejo.

figura 21.  Funcionamiento modulo administrador (Elaboración propia)

6 CONCLUSIONES Y RECOMENDACIONES

6.1 Conclusiones
En conclusión, el desarrollo de esta página web promueve el acercamiento a clientes ya que se presenta un
medio publicitario llamativo que se encarga de crear una cara pública online. Por otro lado, esta página es
muy flexible para los usuarios ya que se puede comunicar por medio de las redes sociales de la empresa así
tener más información sobre el producto que ellos necesiten y su debida accesoria.
Por otra parte, se puede evidenciar que el uso de esta página es muy fácil y sencillo ya que se
distribuye adecuadamente para así no confundir a los clientes con lo que están buscando. Los clientes
pueden visualizar el producto por medio de imágenes de esta manera   escoger lo que estén solicitando.
Cabe aclarar que para lograr la finalidad de la página se tuvo que pasar por muchos inconvenientes
como lograr adaptarlo a todos los dispositivos, acoplar un buen tamaño de visibilidad para la letra e
imágenes hasta elegir los colores adecuados para así llamar la atención de los usuarios. Esto se resolvió
con la accesoria del profesor en clase de esta manera se logró la finalidad de la página de manera
adecuada.

6.2 Recomendaciones
Como es un hosting gratuito el almacenamiento que este tiene va hacer limitado. De esta manera si se
quiere implementar a mayor escala, se recomienda migrar la página a otro dominio, ya que el actual cuenta
con un almacenamiento limitado y mucha publicidad.

7 VENTAJAS Y DESVENTAJAS DEL HOSTING

6.1 Desventajas

 Tiene poco almacenamiento y es muy limitado 
 Se presentan Muchos anuncios 
 La página suele ser lenta. 
 No cuenta con un buen posicionamiento en la web. 

6.1 Ventajas
 Es fácil de usar ya que está bien distribuida 
 Su diseño es vistoso las imágenes y el texto expresa lo que se quiere informar a los navegantes 
 Todas las herramientas se encuentran fácilmente 
 Fáciltr6 comunicación con los usuarios 
 Referencias
Cómo facilitar el trabajo automatizando tareas. (16 de 11 de 2017). Obtenido de
https://www.comunidadbaratz.com/blog/como-facilitar-el-trabajo-del-bibliotecario-
automatizando-algunas-de-sus-tareas/

Cruz, D. (13 de 02 de 2016). Finalidad de la TGS. Obtenido de

https://sites.google.com/site/cruzdanielsistemas/teoria-general-de-sistemas/1-1-2-finalidad-
de-la-tgs

Rodríguez Moreno, M. L. (2017). APLICACION DE LA TEORIA GENERAL DE SISTEMAS.

Obtenido de file:///C:/Users/user/Downloads/70012-Text%20de%20l'article-86673-1-10-
20071002.pdf

Galán, J. (28 de jun de 2017). josegalan.es. Obtenido de

https://www.josegalan.es/tipos-de-paginas-web/
Bertalanffy, L. V. (s.f.). Teoría General de los Sistemas.

Barzabal, L. M. (25 de enero de 2005). Depósito de investigación Universidad de Sevilla.

Obtenido de Deposito de investigación Universidad de Sevilla:
https://idus.us.es/bitstream/handle/11441/45591/file_1.pdf?sequence=1&isAllowed=y

revho.com. (s.f.). Obtenido de https://www.revho.com/es/la-importancia-de-tener-un-sitio-web-hoy-

en-dia/