Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/eugenia1984/todo-para-tu-compu
Trabajo integrador del curso FullStack en CILSA - Desarrollo de un sitio web para una tienda online
https://github.com/eugenia1984/todo-para-tu-compu
bootrsap css3 html5 javascript
Last synced: about 2 months ago
JSON representation
Trabajo integrador del curso FullStack en CILSA - Desarrollo de un sitio web para una tienda online
- Host: GitHub
- URL: https://github.com/eugenia1984/todo-para-tu-compu
- Owner: eugenia1984
- Created: 2024-07-25T16:14:18.000Z (5 months ago)
- Default Branch: main
- Last Pushed: 2024-08-02T16:11:41.000Z (5 months ago)
- Last Synced: 2024-08-03T13:08:20.900Z (5 months ago)
- Topics: bootrsap, css3, html5, javascript
- Language: HTML
- Homepage: https://eugenia1984.github.io/todo-para-tu-compu/
- Size: 583 KB
- Stars: 0
- Watchers: 2
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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 `id`en 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](https://www.linkedin.com/in/maria-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](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
---