OneVet_Store es una tienda virtual educativa creada para la actividad del Módulo 2, Clase 15, donde se trabajó el uso de HTML, CSS, Bootstrap, jQuery y manipulación del DOM.
El proyecto está inspirado en el enfoque One Health, que relaciona la salud animal, la salud humana y el ambiente. Quise personalizar la tienda hacia mis intereses personales: medicina veterinaria, prevención de zoonosis, tenencia responsable y bienestar animal.
La página simula una tienda veterinaria donde se muestran productos y servicios relacionados con el cuidado responsable de distintos tipos de animales, incluyendo animales menores, mayores, exóticos y fauna silvestre desde una mirada educativa.
No quise hacer una tienda común, sino una propuesta que también entregue información preventiva. Por eso cada producto o servicio incluye una pequeña explicación educativa relacionada con salud, bienestar o prevención.
En este proyecto se implementó:
- Página principal con diseño responsivo.
- Navbar con enlaces a las secciones principales.
- Carrusel realizado con Bootstrap.
- Catálogo con productos y servicios veterinarios.
- Botón para agregar productos a favoritos.
- Botón para agregar productos o servicios al carrito.
- Contador de favoritos.
- Contador de productos en el carrito.
- Lista dinámica del carrito.
- Cálculo del total en pesos chilenos.
- Botón para vaciar el carrito.
- Mensajes dinámicos para informar las acciones del usuario.
- Uso de jQuery para manejar eventos y modificar elementos del DOM.
- HTML5
- CSS3
- Bootstrap
- Bootstrap Icons
- jQuery
- JavaScript
- Visual Studio Code
ONEVET_STORE/
│
├── index.html
├── README.md
│
├── css/
│ └── style.css
│
├── js/
│ └── script.js
│
└── img/
├── fondo-onevet.png
└── productos/
Enfoque personal del proyecto
El proyecto fue desarrollado con una temática veterinaria porque me interesa la prevención de zoonosis, la tenencia responsable y el bienestar animal.
La idea principal es mostrar que una tienda veterinaria también puede cumplir un rol educativo. Por ejemplo, no solo se ofrece una consulta, una vacunación o un producto de higiene, sino que también se explica por qué estas acciones pueden ayudar a prevenir enfermedades y mejorar la relación entre animales, personas y ambiente.
Relación con One Health
One Health significa comprender que la salud de los animales, las personas y el ambiente están conectadas.
En Chile existen enfermedades y riesgos sanitarios donde este enfoque es importante, como la hidatidosis, leptospirosis, hantavirosis y la rabia asociada a murciélagos. Por eso, la página busca reforzar la importancia de prevenir, consultar a tiempo y mantener buenas prácticas de cuidado.
Uso de jQuery
En el archivo script.js se usó jQuery para:
Detectar clics en los botones de favoritos.
Detectar clics en los botones del carrito.
Cambiar estilos de las tarjetas.
Actualizar contadores.
Agregar elementos a la lista del carrito.
Mostrar mensajes dinámicos.
Vaciar el carrito.
Controlar algunas acciones del carrusel.
Esto permite que la página sea más interactiva y que el usuario vea cambios inmediatos al usar la tienda.
Diseño visual
El diseño fue pensado con colores pasteles, verde veterinario y tonos lilas, buscando que la página se vea profesional, ordenada y cercana.
También se agregó una imagen de fondo personalizada para reforzar la identidad propia visual del proyecto y representar variedad de fauna.
Conclusión
Se realiza practicar el uso de Bootstrap y jQuery en una página web interactiva.
También pude unir los contenidos técnicos de la clase con un tema de interés personal, creando una tienda virtual con sentido educativo y preventivo.
OneVet_Store representa una propuesta simple, pero con una idea clara: cuidar animales también es cuidar personas, hogares y comunidades.
Realizado por Jannabitte Pino,2026
Estudiante Medicina Veterinaria.
Estudiante Desarrolo Java Full Stack,Talento Digital.