Como parte del examen final del curso Comunicación Web Interactiva (semestre 2026-1), los estudiantes desarrollaron una aplicación web estática que simula el funcionamiento de un sistema de comercio electrónico. Este proyecto integrador tuvo como objetivo principal demostrar el dominio de HTML5 para la estructura semántica y de Bootstrap 5 para el diseño visual y la maquetación responsive, sin recurrir a JavaScript ni a lenguajes del lado del servidor.
Un reto técnico enfocado en los fundamentos web
El ejercicio planteó un escenario desafiante: construir una tienda web completamente funcional a nivel de interfaz y navegación utilizando únicamente atributos nativos de HTML5 e hipervínculos. Esto permitió que los alumnos se concentraran en los fundamentos del desarrollo web, reforzando buenas prácticas de estructura, validación de formularios y experiencia de usuario.
Cada estudiante eligió el giro de su tienda —como supermercados, veterinarias, tiendas de ropa o tecnología— y desarrolló una aplicación compuesta por cuatro secciones obligatorias, conectadas entre sí mediante una navegación clara y coherente.
Estructura de los proyectos
La aplicación inicia con una página de login, donde se implementaron formularios centrados con validaciones HTML5 para correo electrónico y contraseña. A partir de ahí, el usuario accede a un dashboard administrativo, que funciona como eje principal del sistema e incluye un menú de navegación y tarjetas de acceso rápido a las demás secciones.
En la sección de crear producto y catálogo, los estudiantes diseñaron formularios validados para dar de alta productos ficticios, así como una vista visual en forma de grid responsivo con tarjetas que muestran imágenes, nombres y precios. Finalmente, la página de estadísticas presentó tablas estilizadas con Bootstrap, organizadas correctamente con thead y tbody, mostrando datos simulados de ventas o inventario.
Organización, diseño y experiencia de usuario
Uno de los aspectos más relevantes del proyecto fue la organización del código y de las carpetas, siguiendo una estructura clara en directorios como /css, /pages y /media. Además, se evaluó la correcta implementación de componentes de Bootstrap como navbars, cards, formularios y tablas, así como la coherencia visual, el uso de paletas de color y la limpieza general del diseño.
La rúbrica de evaluación valoró no solo el cumplimiento técnico, sino también la usabilidad, la navegación intuitiva y la estética general, fomentando propuestas visualmente atractivas y funcionales.
Resultados y aprendizaje
Los proyectos finales reflejan el esfuerzo de los estudiantes por comprender cómo funcionan las interfaces web desde su base estructural. Este ejercicio permitió consolidar conocimientos clave sobre diseño web responsivo, validaciones nativas y arquitectura de información, demostrando que es posible crear experiencias web claras y profesionales incluso sin lógica de programación avanzada.
Sin duda, este proyecto representó un paso importante en la formación de los alumnos en el ámbito del diseño y la comunicación web interactiva, preparándolos para retos más complejos en futuros cursos.
Fuente: Curso de Diseño de Aplicaciones con Multimedia
Ingeniería en Sistemas Computacionales
Más noticias sobre Ingeniería en Sistemas Computacionales…
