codesystem2022 / aliwood

E-commerce de ventas de mueble de Alibaba

AliWood - Muebles de Algarrobo

Este proyecto está siendo desarrollado por un grupo de estudiantes de la carrera Tecnicatura Universitaria en programación, equipo AlíBabá de la Universidad Tecnológica Nacional de San Rafael, Mendoza, Argentina.

AliWood es una empresa dedicada a la fabricación y venta de muebles de algarrobo de la más alta calidad.

Descripción del Proyecto

Para abordar el proyecto en el 2023, nos proponemos implementar un sitio web que muestre toda la información de nuestro negocio en lo relacionado con productos y precios, contacto a través de Whatsapp y correo electrónico, compra y seguimiento logístico.

---

CUADRO DE INTEGRANTES QUE NO HAN CUMPLIDO CON LAS ISSUES EN TIEMPO Y FORMA:

	INTENGRANTE	Nº DE SEMANA	ISSUE REASIGNADA A:	OBSERVACIONES
❌	________	1-10	________	______________

---

Tecnologías Utilizadas

Para la realización de AliWood, utilizaremos las siguientes tecnologías (sujetas a modificaciones):

     

   

Características Clave

Nuestro e-commerce será escalable para conseguir objetivos más superadores en el futuro:

• Un sitio web de alto rendimiento que sea seguro, rápido y respaldado por una infraestructura robusta de servidores y una base de datos eficiente.
• Implementación de un software de gestión de contenido y un sistema de carrito de compras confiable.
• Compatibilidad con dispositivos móviles y una interfaz de usuario intuitiva.

Contribuyentes

Gabriel Beltrado	Matías Carballo	Ángel Escobar

Denise Germiniani	Pablo Gutierrez	Osman Herrera

Jorge Huamán	Sebastián Lerotich	Juan Murúa

aliwood's Issues

Crear Slider de promoción

El integrante del grupo, deberá crear el archivo slider-promocion.html y slider-promocion.css, ambos archivos deberán ir a sus respectivas carpetas, luego deberá seguir las siguientes instrucciones

• Diseñar un slider interactivo y atractivo que sea compatible con la estética de nuestro sitio web.

• Permitir que el slider muestre al menos 3 imágenes diferentes con mensajes promocionales.

• Asegurarse de que el slider sea completamente responsive y se vea bien en dispositivos móviles y de escritorio.

• Agregar controles de navegación (flechas izquierda/derecha) y puntos indicadores para que los usuarios puedan navegar por las imágenes del slider.

• Implementar una transición suave entre las imágenes.

Se adjunta Imagen ilustrativa

Documentación : Proporcionar documentación clara en el código

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre slider-promocion-01.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear la pagina de Catalogo

El integrante del grupo, deberá crear el archivo de catalogo.html, luego deberá seguir las siguientes instrucciones

• crear 3 botones con el nombre de cocina, baño y living, que tengan el siguiente código de color #0CC0DF

• crear un total de 18 cards, en lo cual cada sección(cocina, baño y living) contara con 6 cards.

• agregar una imagen y un titulo en cada card

• crear botones en la cual contengan como nombre comprar

• crear un botón flotante, que deberá tener como icono un carrito de compras

• crear un contador que refleje la cantidad productos que ha seleccionado el usuario

• crear un modal que refleje cada articulo que ha seleccionado el usuario

Documentación : Proporcionar documentación clara en el código

Nota: cada botón de compra deberá tener el siguiente código de color #00BF63

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre catalogo-01.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear Footer con Bootsrap

El integrante del grupo, deberá crear el archivo footer.html, dicho archivo deberá agregarse en la carpeta Pages, luego deberá seguir las siguientes instrucciones.

• Utilizar las clases de Bootsrap para dar estilo y estructura al footer
• Agregar enlaces y texto informativo

Se adjunta Imagen ilustrativa

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre footer-01.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Nuevo Integrante

El integrante del grupo, deberá seguir las siguientes instrucciones

• Agregar el Nombre & Apellido del Nuevo Integrante del Integrante del Grupo(Osman Herrera)

• Agregar Foto del Nuevo integrante

• Agregar Redes sociales del Nuevo integrante ( LinkedIn & GitHub)

Implementación de Sistema de Navegación por Pestañas en JavaScript (jQuery Opcional)

• Implementar la funcionalidad de cambio de pestaña: Utilizando JavaScript puro (sin bibliotecas externas como jQuery), implementar la lógica que permita cambiar entre las pestañas cuando un usuario hace clic en ellas. Deberíamos poder cambiar de una pestaña a otra sin recargar la página. (Nota: jQuery es opcional y puede usarse si es preferido, pero no es obligatorio para esta tarea).

• Gestionar el contenido de cada pestaña: Asegurarse de que el contenido de cada pestaña se muestre y se oculte correctamente según la pestaña seleccionada. Esto debe hacerse de manera eficiente y sin problemas visuales.

• Manejar eventos de clic de manera adecuada: Asegurarse de que los eventos de clic se manejen de manera eficiente y que se prevenga cualquier comportamiento inesperado.

• Documentación : Proporcionar documentación clara en el código JavaScript

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre navegacion-por-pestaña-02.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear validación de formulario de Registro

• Email

• Asegurar que esté en formato de correo electrónico válido para fines de recuperación de contraseña.

• Campos Nombre y Apellido:

• No dejar los campos vacíos.

• Permitir solo letras en los campos de Nombre y Apellido.

• Permitir más de una palabra si es necesario.

• Contraseña:

• Asegurarse de que la contraseña tenga al menos 8 caracteres.

• Incluir al menos una letra mayúscula en la contraseña.

• Incluir al menos una letra minúscula en la contraseña.

• Incluir al menos un símbolo en la contraseña.

• Incluir al menos un número en la contraseña.

• Confirmar Contraseña:

• Verificar que el contenido en el campo de Contraseña y el campo de Confirmar Contraseña sea idéntico para validar que la información es correcta.

Documentación : Proporcionar documentación clara en el código JavaScript

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre formulario-registro-02.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear la pagina de Mi Cuenta

El integrante del grupo, deberá ingresar al archivo mi-cuenta, luego deberá seguir las siguientes instrucciones

• agregar la imagen de usuario
• agregar la imagen de lapiz
• crear el párrafo con el nombre de editar
• crear el campo donde se reflejara el Nick del usuario
• crear el campo donde se reflejara el nombre del usuario
• crear el campo donde se reflejara el apellido del usuario
• crear el campo donde se reflejara el email del usuario
• crear el campo donde se reflejara la contraseña del usuario
• crear un subtitulo que diga Datos de Perfil
• crear un campo para que el usuario coloque el código posta
• crear un campo para que el usuario coloque el celular
• crear un campo para que el usuario coloque la dirección
• crear un campo para que el usuario coloque el DNI
• crear un campo para que el usuario coloque la dirección de envió
• crear un campo para que el usuario coloque la Preferencias de contacto
• crear un campo para que el usuario coloque la localidad
• crear un campo para que el usuario decida cerrar sesión
• crear un campo para que el usuario decida eliminar al cuenta

Se deja adjuntado la siguiente imagen ilustrativa

Documentación : Proporcionar documentación clara en el código

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre mi-cuenta-01.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear formulario de Inicio de Sesión

El integrante del grupo, deberá crear un archivo registro.html & registro.css, ambos archivos deberán ir a sus respectivas carpetas, luego deberá seguir las siguientes instrucciones

• Crear un titulo que diga (Quienes somos?)

• Agregar el siguiente párrafo(Somos Aliwood una empresa con mas de 20 años de trayectoria en el mercado, nos dedicamos a
  la venta de diferentes tipos de muebles de algarrobo, con envíos a toda la provincia )

• Poner el titulo y el párrafo al lado izquierdo

• Crear el formulario de Inicio de sesión, que contenga lo siguiente

                - Email
                - Contraseña 
  

• Agregar el siguiente párrafo (¿Eres Nuevo?)

• Agregar una ruta de archivo html y que contenga lo siguiente (Ingresa Aquí)

• Crear el botón de Ingresar

• Poner el formulario de Inicio de sesión del lado derecho

  Se deja adjuntado la siguiente imagen ilustrativa

• Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre formulario-inicio-sesion

Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear validación de formulario de Inicio de Sesión

• Email:

• No permitir que el campo esté vacío.

• Realizar una consulta en la base de datos y verificar que el email esté correctamente registrado en la misma. Es decir, verificar que el email ingresado sea igual al email registrado. En caso contrario, informar que el email es incorrecto.

• Contraseña:

• No permitir que el campo esté vacío.

• Realizar una consulta en la base de datos y verificar que la contraseña ingresada coincida con la contraseña asociada al email ingresado en el campo anterior. En caso contrario, informar que la contraseña es incorrecta.

Documentación : Proporcionar documentación clara en el código JavaScript

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre formulario-inicio-sesion-02.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear la pagina de soporte (Utilizando Bootstrap)

El integrante del grupo, deberá seguir las siguientes instrucciones

• Crear soporte.html y soporte.css

• Deberá agregar el archivo soporte.html dentro de la carpeta pages

• Deberá agregar el archivo soporte.css dentro de la carpeta css

• Crear Accordion con 9 secciones, cada sección deberá tener una pregunta como titulo y la respuesta de la pregunta que deberá ser proporcionada en el cuerpo de la sección

• Las preguntas que deberá agregar, son:

• ¿Cuál es el estado de mi pedido y cuándo puedo esperar recibirlo?

• ¿Cómo puedo realizar una devolución o cambio de un producto?

• ¿Cuál es la política de garantía o devoluciones de su empresa?

• ¿Pueden proporcionarme más detalles sobre los costos de envío y los tiempos de entrega?

• ¿Qué métodos de pago aceptan en su tienda en línea?

• ¿Tienen un programa de recompensas o descuentos para clientes frecuentes?

• ¿Pueden proporcionar asistencia técnica si tengo problemas para navegar o utilizar su sitio web?

• ¿Ofrecen servicios de atención al cliente 24/7 o tienen horarios específicos de atención?

• ¿Tienen un programa de servicio al cliente premium o suscripciones VIP?

• Las respuesta que deberá proporcionada en el cuerpo de la sección, son :

• Al momento de relizar la compra, se le enviara un correo electronico con el estado de su pedido y la fecha estimada de entrega.

• Para realizar una devolución o cambio de un producto, debe comunicarse con nosotros a traves de nuestro correo electronico o por medio de nuestro numero de telefono.

• La politica de garantia de nuestra empresa es de 30 dias, en caso de que el producto no funcione correctamente, se le devolvera el dinero o se le cambiara el producto.

• Los costos de envio y los tiempos de entrega se le proporcionaran al momento de realizar la compra.

• Por el momento solo aceptamos pagos por medio de Mercado Pago.

• Por el momento no contamos con un programa de recompensas o descuentos para clientes frecuentes.

• Si, puede comunicarse con nosotros a traves de nuestro correo electronico o por medio de nuestro numero de telefono.

• Nuestro horario de atencion es de 8:00 am a 20:00 pm.

• Por el momento no contamos con un programa de servicio al cliente premium o suscripciones VIP.

Nota: se deberá subir en la rama test

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre soporte-01.

Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Creacion de Carpetas y archivos

Clonar el repositorio en la PC dentro de ella realizar las siguientes actividades

dentro de Aliwood crear carpetas

• media
• js
• css
• conexion

Crear los Archivos necesarios siguiendo este orden de estructura

Estructura de Carpetas:

Aliwood/
|____media
|____conexion
|── index.html
├── css/
│ └── styles.css
├── js/
│ └── main.js

Crear Barra de Navegación

El integrante del grupo, deberá crear el archivo html y css con el nombre barra-de-navegacion, una vez hecho deberá colocarlos en sus respectivas carpetas, luego deberá proceder a crear la barra de navegación, en el lado derecho deberá crear un buscador interno, en el lado derecho del buscador deberá integrar el icono de la lupa que esta alojado en el siguiente link Aliwood y abajo de dicho buscador deberá tener 6 secciones, y deberán ser nombradas como Inicio, Novedades, Catalogo, Registro, Iniciar sesión y Mi cuenta.

La Sección Mi Cuenta deberá quedar no visible y solo deberá aparecer las demás secciones

La sección Registro se deberá crear como botón Registro y deberá tener el siguiente código de color #FF5757

En la sección Inicio deberá tener un hipervínculo interno que deberá ser identificado como #Inicio y las demás secciones deberán tener su ruta por defecto y con un salto de pagina.

En el lado izquierdo de la pagina deberá tener el logo del E-commerce, dicho logo se podrá obtener en el siguiente link Aliwood

Se deja adjuntado imagen ilustrativa

Documentación : Proporcionar documentación clara en el código

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre barra-de-navegación.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Crear card de información

El integrante del grupo, deberá crear el archivo encabezado.html y encabezado.css, ambos archivos deberán ir a sus respectivas carpetas, luego deberá seguir las siguientes instrucciones

• Deberá linkear los siguientes archivos css, styles.css y encabezado.css

• Deberá crear una card, dentro de la card deberá contener la imagen de juego-comedor.svg que se encuentra en el siguiente link Aliwood

• Agregar y alinear el párrafo abajo de la imagen, dicho párrafo si mostrara a continuación ( Los muebles de algarrobo son piezas de mobiliario fabricadas principalmente a partir de la madera de algarrobo, un árbol que crece en regiones cálidas de América del Sur. Estos muebles son conocidos por su resistencia y durabilidad debido a la densidad y calidad de la madera de algarrobo. Tienen un
  aspecto rústico y natural, con tonos cálidos que varían desde el amarillo claro hasta el marrón oscuro, lo que les confiere un encanto campestre.)

• Crear el botón de Mas Información y alinearlo debajo del párrafo, dicho botón deberá tener el siguiente código de color #FF5757

Se deja adjuntado imagen ilustrativa

Documentación : Proporcionar documentación clara en el código

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre card-info-01.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

sistema de navegacion por pestaña

El integrante del grupo, deberá crear el archivo navegacion-pestaña.html y navegacion-pestaña.css, ambos archivos deberán ir a sus respectivas carpetas, luego deberá seguir las siguientes instrucciones

• Crear 3 botones que llevaran los siguientes nombres, Cocina, Baño y Living

• Agregar 6 cards con imágenes de las siguientes secciones Cocina, Baño y Living, en la cual seria 2 de cada una

• Deberá poner las cards de Baño y Living de manera que no estén visibles

• Agregar botón que diga Comprar y poner un salto de pagina

• Los botones de Baño, living y cocina deberá tener el fondo el siguiente código de color #24252A y las palabras deberán tener el siguiente código de color #A0A0A0, al momento de que el puntero se posicione en el botón, el botón deberá tener en el fondo un degradado lineal utilizando el color rojo(E70B25) y la palabras deberá tener el color blanco(#FDFDFD)

• El botón de compra deberá tener en el fondo el siguiente código de color #24252A y las palabras deberán tener el siguiente código de color #A0A0A0, al momento de que el puntero se posicione en el botón, el botón deberá tener en el fondo un degradado lineal utilizando el color rojo(E70B25) y la palabras deberá tener el color blanco(#FDFDFD)

• Las cards y el botón de compra deberán estar alineados como se representa en la siguiente imagen ilustrativa
  

Documentación : Proporcionar documentación clara en el código

Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre navegacion-por-pestaña-01.
Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.

Modificar el Readme

El integrante del Grupo, deberá agregar el logo de Aliwood y una breve descripción de lo que se tratara el E-commerce, luego hará una sección en el cual se reportara el incumplimiento de algún integrante con la issue que le fue asignada y quien fue su suplente, por ultimo deberá agregar los nombres, fotos y redes de los integrantes que estarán participando en el E-commerce de Aliwood.

Comitear y hacer el push a la rama test, la Pull Request en Github y avisar al Scrum Master.

Crear base de datos AliwoodBd

Crear el formulario de Registro

El integrante del grupo, deberá crear un archivo registro.html & registro.css, ambos archivos deberán ir a sus respectivas carpetas, luego deberá seguir las siguientes instrucciones

• Crear un titulo que diga (Quienes somos?)

• Agregar el siguiente párrafo(Somos Aliwood una empresa con mas de 20 años de trayectoria en el mercado, nos dedicamos a
  la venta de diferentes tipos de muebles de algarrobo, con envíos a toda la provincia )

• Poner el titulo y el párrafo al lado izquierdo

• Crear el formulario de registro, que contenga lo siguiente
  - Nombre
  - Apellido
  - Email
  - Contraseña
  - Confirmar contraseña

• Agregar el siguiente párrafo (¿Ya era miembro?)

• Agregar una ruta de archivo html y que contenga lo siguiente (Ingresa Aquí)

• Crear el botón de Registrate

• Poner el formulario de registro del lado derecho

  Se deja adjuntado la siguiente imagen ilustrativa

• Una vez realizado deberá hacer un commit siguiendo los Commits Convencionales y luego crear un tag con el nombre formulario-registro

Hacer el push correspondiente.
Generar la PR y notificar al SM para su revisión.