Trabajo integrador

Proyecto: Desarrollo de un sitio web para una tienda online

---

CONSIGNA:

Descripción del Proyecto:

Desarrollar un sitio web responsivo para una tienda online que permita a los usuarios explorar los productos desde diferentes dispositivos, como computadoras de escritorio, tablets y celulares (3 resoluciones).

Características del Sitio Web:

- Frontend:

-Diseño responsivo utilizando Bootstrap para garantizar una experiencia de usuario consistente en diferentes dispositivos y tamaños de pantalla.

-Página principal que muestra los productos destacados y las promociones actuales de la tienda.

-Páginas de categorías que permiten a los usuarios explorar productos por categorías específicas (definan máximo 2 categorías)

-Página de detalles del producto que muestra información detallada sobre un producto seleccionado (pueden trabajar con un máximo de 3 productos por categoría).

- Git:

• Utilización de Git para el control de versiones del código fuente del proyecto.

• Implementación de ramas para trabajar en diferentes características o correcciones de forma aislada.

• Uso de commits descriptivos y mensajes claros para documentar los cambios realizados.

-Entrega del Proyecto:

• Desarrollo del sitio web completo, incluyendo frontend responsivo y optimizado para distintos dispositivos y orientaciones.

• Documentación del código que explique la estructura del proyecto, las decisiones de diseño y las funcionalidades implementadas. Implementación de Git para el control de versiones del código y la colaboración entre los miembros del equipo.

---

TECNOLOGÍAS UTILIZADAS:

HTML5

CSS3

BOOTSTRAP

JAVASCRIPT

---

¿ CÓMO ME ORGANICÉ ?

• Cree issues para cada tarea.

• En base a cada issue se crea una branch desde la branch main:

• Una vez que se completa una de las tareas se crea el pull request para poder hacer el merge con la branch main.

Al tener que realizar sola el trabajo, no tuve tanto tiempo, entonces en vez de crear un trello, utilice los mismos issue y en ellos hice una mini histori ode usuario con los criterios de aceptación, como se ve en el siguiente ejemplo:

---

ESTRUCTURA DEL PROYECTO

En al carpeta assets se guardaron todas las imagenes de los productos que se utilizan en la web.

En la carpeta data de creoa el archivo products.json con toda la informacón de los productos, para poder mostrar las páginas dinámicamente, creando parte del HTML con JavaScript, para no tener que repetir tanto cédigo de HTMl y no tener tantos archivos, como el caso del detalle del producto que mediante un parámetro de iden la URL se carga el producto correspondiente al id, reutilizndo el mismo archivo product.html para el detalle de todos los productos.

Pra hacer el proyecto escalable, se creo un archivo de .css para cada una de las páginas, en vez de tenerlo todo junto en un archivo, lo mismo con los archivos de javascript.

/tODO-PARA-TU-COMPU
│
├── /assets  // Para guardar imagenes
│   └── img // Todas las imagenes del proyecto
│
├── /css  // CSS personalizado
│   └── contact.css
│   └── home.css
│   └── product.css
│   └── products.css
│   └── styles.css    
│
├── /data // El archivo JSON que tiene la informacion de los productos
│   └── products.json
│
├── /js
│   └── contact.js // Archivo JavaScript personalizado para la página de contact
│   └── main.js // Archivo JavaScript personalizado para la home page
│   └── product.js // Archivo JavaScript personalizado para la página del detalle del producto
│   └── products.js // Archivo JavaScript personalizado para la página de productos
│
│
├── contact.html       // Página de contacto
├── index.html         // Página principal
├── products.html      // Página de productos
├── product.html       // Página de detalles de producto
└── README.md          // Documentación del proyecto

---

INTEGRANTE DEL PROYECTO:

• María Eugenia Costa

---

DISEÑO

En cuanto al diseño me inspirés en las páginas de Nike, Adidas o Apple, donde utilizan principalmente los colores Blancos y Negros, y a veces destacan algún título con color.

Quería que sea una página sencilla, para que el usuario no se pierda entre tantas cosas e intuitivamente la pueda utilizar facilmente.

---

DEMO

Se puede ver en: eugenia1984.github.io/todo-para-tu-compu

• Página principal - Modo Desktop:

• Página principal - Modo Mobil / Tablet con tema oscuro:

En la parte de productos destacados el botón de Más info lleva a al página de detalle del producto.

• Página de productos:

Haciendo click en el boton de Más info se va a la página del detalle del producto.

• Página de detalle del producto:

• Página de contacto:

Con las validaciones necesarias

---