Proyecto WEB

Proyecto 1: Sistema básico de inventario

Este proyecto te ayudará a aplicar todos los conocimientos básicos adquiridos en HTML, CSS, JavaScript, PHP, SQL, Git/GitHub y diseño en Figma. La idea es desarrollar un sistema web sencillo para gestionar un inventario de productos, que incluya la creación, edición, eliminación y visualización de productos almacenados en una base de datos.

---

🎯 Objetivo

Crear una aplicación web con las siguientes funcionalidades:

• Agregar productos con nombre, cantidad y precio.
• Editar productos existentes.
• Eliminar productos por su identificador.
• Mostrar el inventario completo en una tabla dinámica.
• Buscar productos por nombre.
• Calcular el valor total del inventario.
• Gestionar el proyecto usando Git y alojar el código en GitHub.
• Diseñar prototipos y mockups de la interfaz en Figma.

---

🧱 Estructura del proyecto

El proyecto estará dividido en varios módulos y tecnologías, a integrar paso a paso:

• Frontend: HTML y CSS para la estructura y diseño visual de la página.
• Interactividad: JavaScript para validaciones, búsqueda en vivo y manipulación dinámica del DOM.
• Backend: PHP para manejar la lógica del servidor, procesar formularios y comunicarse con la base de datos.
• Base de datos: SQL para crear y gestionar las tablas que almacenan la información de productos.
• Control de versiones: Git para versionar el código y GitHub como repositorio remoto para alojar el proyecto.
• Diseño: Figma para crear prototipos, wireframes y mockups antes de codificar la interfaz.

---

🔧 Detalles técnicos

• Base de datos: MySQL o MariaDB, con una tabla productos que tenga columnas: id (clave primaria), nombre, cantidad y precio.
• PHP: Scripts para CRUD (Crear, Leer, Actualizar, Eliminar) productos en la base de datos usando sentencias preparadas para seguridad.
• HTML/CSS: Formularios para agregar y editar productos, tabla para mostrar inventario con estilo responsivo.
• JavaScript: Validaciones de formulario, búsqueda en tiempo real dentro de la tabla, confirmación antes de eliminar.
• Git/GitHub: Configuración inicial del repositorio, commits descriptivos, push al repositorio remoto.
• Figma: Creación de prototipos navegables con flujo de usuario para la aplicación.

---

📋 Recomendaciones para el desarrollo

• Planifica la estructura de tu base de datos y diseña un esquema antes de comenzar.
• Desarrolla primero el frontend estático (HTML + CSS) antes de integrar PHP y base de datos.
• Utiliza JavaScript para mejorar la experiencia de usuario sin recargar la página.
• Realiza commits frecuentes y con mensajes claros para facilitar el seguimiento en Git.
• Comparte el repositorio en GitHub para tener copia remota y posibilidad de colaboración.
• Diseña interfaces y prototipos en Figma para visualizar y ajustar el diseño antes de codificar.
• Prueba todas las funcionalidades con distintos casos y datos.

---

🎒 Reto adicional

Al terminar la versión básica, intenta:

• Implementar autenticación de usuario para restringir el acceso al sistema.
• Agregar categorías para los productos y filtros en la tabla.
• Crear reportes exportables en PDF o Excel.
• Mejorar el diseño con frameworks CSS como Bootstrap o Tailwind.

---

🎬 Recursos para el proyecto

• Tutorial de HTML
• Tutorial de CSS
• Tutorial de JavaScript
• Manual de PHP
• MySQL
• Libro oficial de Git
• Figma

---

📎 Descarga del código base

Cuando estés listo para comenzar, puedes descargar una plantilla base para este proyecto que incluye la estructura inicial en HTML, CSS y PHP con conexión a base de datos: Descargar código base

➡️ SOLUCIÓN