EcoMarket es el resultado del Entregable 2 del curso Frontend Developer en SENATI, aplicando principios de frontend para mejorar la experiencia del usuario (UX) y la interfaz de usuario (UI). El sitio web ha sido desarrollado para ofrecer una experiencia de compra optimizada, intuitiva y responsiva, satisfaciendo las necesidades de consumidores conscientes interesados en mejorar su bienestar personal y contribuir al cuidado del planeta.
- Interfaz Responsiva: Adaptación para dispositivos móviles utilizando Bootstrap y JavaScript.
- Interactividad: Funciones dinámicas que mejoran la experiencia del usuario, como un carrito de compras interactivo.
- Formulario de Contacto: Permite a los usuarios enviar sus opiniones y consultas de manera fácil y rápida.
- Catálogo de Productos: Muestra una variedad de productos orgánicos con opciones para agregar al carrito.
- HTML5: Estructura semántica de la página.
- CSS3: Estilos personalizados y Bootstrap para un diseño responsivo.
- JavaScript: Funcionalidades interactivas, incluyendo la gestión del carrito de compras.
- Bootstrap: Framework CSS para diseño responsivo y estilizado.
/EcoMarket
│ ├── index.html # Página principal
│ ├── Abarrotes.html # Página de productos
│ ├── Frescos.html # Página de productos
│ ├── HigieneBelleza.html # Página de productos
│ ├── VitaminasSuplementos.html # Página de productos
│
├── styles
│ ├── bootstrap.min.css # Bootstrap CSS
│ └── style.css # CSS personalizado
│
├── scripts
│ └── script.js # JavaScript para interactividad
│
└── assets
└── imgs # Imágenes utilizadas en el proyecto
Para ejecutar el proyecto localmente, sigue estos pasos:
- Clona el repositorio:
git clone https://github.com/tu_usuario/EcoMarket.git
- Navega al directorio del proyecto:
cd Entregable_1_Ecomarket - Abre
index.htmlen tu navegador.
- Navega por el sitio para explorar los productos.
- Utiliza el carrito de compras para agregar y gestionar productos.
- Completa el formulario de contacto para enviar tus opiniones o preguntas.
Puedes comunicar las contribuciones que quieres hacer por el grupo de WhatsApp
TEMA: Restructuración de sitio web actual para mejorar la experiencia del usuario y la funcionalidad.
Al finalizar el módulo formativo, el aprendiz estará en la capacidad de diseñar y desarrollar páginas web mediante HTML5, CSS y JS a medida, considerando el diseño responsive web.
El presente proyecto busca el planteamiento de propuestas de los participantes durante el módulo a desarrollar. Estas se fundamentarán con el conocimiento de las tareas con sus respectivas operaciones que se describen a continuación:
-
Tarea 01: Desarrolla página web utilizando principios del frontend.
- Web estándar vs semántica.
- HTML5, estructura web.
- Etiquetas de cabecera, cuerpo y final de página.
- Manejo de listas.
- Etiquetas DIV.
-
Tarea 02: Utiliza el lenguaje de estilos CSS y frameworks CSS.
- Composición de una web estática y dinámica.
- Vinculando hojas de estilos con páginas web.
- CSS3, estructura de una hoja de estilo.
- Framework CSS.
-
Tarea 03: Desarrolla aplicaciones interactivas utilizando JavaScript.
- ¿Qué es JavaScript?
- Tipos de datos.
- Manejo de operadores.
- Funciones, tipos, estructura.
- Funciones predeterminadas.
- Integración JavaScript con HTML5.
-
Tarea 04: Desarrolla página web comercial incluyendo formulario de contacto.
- ¿Qué es un formulario?
- Elementos de un formulario.
- Validando los botones de acción en un formulario.
La empresa "EcoMarket" es una tienda en línea de renombre que se especializa en la venta de una amplia variedad de productos orgánicos de alta calidad. Su catálogo incluye alimentos orgánicos, desde frutas y verduras frescas hasta productos no perecederos como granos, semillas y legumbres. EcoMarket se dedica a satisfacer las necesidades de consumidores conscientes que buscan mejorar su bienestar personal y contribuir al cuidado del planeta mediante la elección de productos orgánicos y sostenibles.
En los últimos meses, la tienda ha identificado tres fallas principales en su sitio web actual que afectan la experiencia del usuario y la funcionalidad:
- Diseño Desactualizado y No Responsivo: El sitio web tiene un diseño antiguo y no se adapta correctamente a dispositivos móviles.
- Falta de Interactividad: Los usuarios encuentran la navegación y la búsqueda de productos tediosa y poco interactiva.
- Proceso de Contacto Complicado: El formulario de contacto es confuso y difícil de usar, lo que genera una alta tasa de abandono.
- Realizar el diseño del sitio web de "EcoMarket" aplicando principios de frontend para mejorar la experiencia del usuario (UX) y la interfaz de usuario (UI). El sitio debe incluir una página principal dinámica, páginas de productos detalladas y un flujo de usuario optimizado que guíe a los clientes desde la búsqueda inicial hasta la compra final.
- Utilizar hojas de estilo en cascada (CSS) y frameworks CSS, específicamente Bootstrap, para desarrollar un sitio web responsivo y estilísticamente coherente.
- Desarrollar funcionalidades interactivas avanzadas mediante el uso de JavaScript para mejorar la usabilidad y la experiencia del usuario en el sitio web de "EcoMarket".
- Crear un formulario de contacto eficiente y fácil de usar que permita a los clientes de "EcoMarket" comunicarse de manera rápida y sencilla con el equipo de atención al cliente.