Cervecería Le Soacha: dos estilos, una experiencia digital
Samuel Esteban Benjumea Beltran y Juan Esteban Oicata Tibata· Universidad Central · Trabajando con la IA generativa · Periodo 2026-2 · Docente: Magíster Ingeniero Carlos Pinzón
Proyecto académico. Marca, productos, precios, ingredientes y pedidos son ficticios. Demostración: no envía pedidos ni guarda datos. El exceso de alcohol es perjudicial para la salud. Prohíbase el expendio de bebidas embriagantes a menores de edad.
Resumen
Le Soacha es una cervecería artesanal ficticia de Bogotá. Su problema simulado es concreto: las personas no entienden las diferencias entre estilos y piden ayuda para elegir una mezcla para reuniones o regalos entre adultos. Construimos un sistema pequeño y conectado: una página web funcional, un prototipo móvil de cinco pantallas (también empaquetado como APK instalable en Android) y dos videos. Usamos IA generativa en tres capacidades (texto, diseño/construcción y video) y documentamos qué generó, qué falló, cómo lo mejoramos y qué cambiamos nosotros. Este artículo reúne el brief, el proceso, las pruebas, la demostración y las conclusiones.
1. El reto
Empresa: Cervecería Le Soacha (ficticia, Bogotá). Público simulado: adultos de 21 a 35 años que organizan reuniones o buscan un detalle. Ajustamos el rango de 18–35 de la guía a 21–35 porque el producto es alcohol; la prohibición legal se refiere a menores de edad.
Tres necesidades y cómo las resolvimos:
| Necesidad | Solución |
|---|---|
| 1. Explicar la oferta | Catálogo con perfiles de amargor (IBU), graduación (ABV), color, cuerpo y maridajes de ejemplo |
| 2. Ayudar a elegir | Guía «Arma tu Six-Pack»: exactamente seis botellas, mínimo una de cada estilo |
| 3. Preparar una solicitud sin perder información | Formulario con validación, resumen y confirmación simulada; la mezcla pasa de la web al móvil por la URL |
Catalogo simulado
| Producto | Perfil | Precio (COP, simulado) |
|---|---|---|
| Golden Ale de Frutos Amarillos | 4,8 % ABV · 20 IBU | $9.500 por botella |
| Stout de Cacao y Café | 5,8 % ABV · 32 IBU | $11.000 por botella |
| Pack Mixto «Probadora» | 3 Golden + 3 Stout + vaso | $72.000 por pack |
El personalizado es una modalidad, no un cuarto producto: seis botellas exactas, mínimo una de cada estilo, precio por suma y sin vaso (3+3 = $61.500; 4+2 = $60.000). Si se modifica Probadora, pasa a personalizado y pierde el vaso.
Recorrido previsto: video promocional → web (catálogo y detalle) → guía para elegir → móvil (revisión) → confirmación simulada → regreso al catálogo.
2. Qué construimos
2.1 Página web
Cuatro secciones con navegación real: inicio/propuesta de valor, catálogo de tres productos, guía para elegir y solicitud simulada. Cada botón de producto abre su detalle o carga una selección. El formulario valida campos vacíos, cantidades y límite del mensaje, muestra un resumen local y avisa «Demostración: no envía pedidos ni guarda datos». No hay pagos, correos ni base de datos.
2.2 Prototipo móvil de cinco pantallas
Bienvenida → catálogo → detalle → «Arma tu Six-Pack» (con revisión integrada) → confirmación, con regreso al catálogo. Incluye mensaje de error («Te faltan 2 botellas para completar seis») y estado vacío. Todo es simulado.
2.3 Dos videos con propósito
- Video 1, promoción (30 s): presenta la marca y Probadora e invita a explorar el catálogo.
- Video 2: enseña el recorrido móvil: cargar Probadora, cambiar a 4 Golden + 2 Stout ($60.000 sin vaso), revisar y confirmar.
Ambos son MP4 H.264 a 1280×720 y 24 fps, con textos y subtítulos integrados y las dos leyendas de alcohol visibles en todas las escenas. No usan voces, música ni rostros.
3. De prototipo web a APK de Android
La guía pidió entregar la versión móvil como APK instalable. Como el prototipo es HTML, CSS y JavaScript sin servidor, lo empaquetamos con Capacitor (Android, WebView) en lugar de reescribirlo.
Qué hicimos:
- Preparamos una carpeta
wwwcon el prototipo. El móvil quedó como página de entrada (index.htmlabremovil.html) y la web completa pasó aweb.html; se corrigieron los enlaces cruzados. - Creamos el proyecto con Capacitor 6 (
npm install,npx cap add android,npx cap sync android) con idcom.lesoacha.demoy nombre «Le Soacha». - Compilamos con Gradle (
./gradlew assembleDebug) y obtuvimosapp-debug.apk.
Problemas reales y cómo se resolvieron:
| Problema | Causa | Solución |
|---|---|---|
Unsupported class file major version 70/69 | Gradle usaba Java 26/25 del equipo y esas versiones no son compatibles | Instalar JDK 17 (Temurin) y fijar org.gradle.java.home en gradle.properties |
SDK location not found | El Android SDK no estaba instalado | Instalarlo desde Android Studio (API 34, Build-Tools, Platform-Tools) y crear local.properties con sdk.dir |
android platform has not been added yet | El comando se ejecutó dentro de la carpeta android y no en la raíz | Ejecutar los comandos npx cap en la carpeta que contiene package.json |
Resultado: BUILD SUCCESSFUL y un APK de depuración que se instala sin firmar. Sigue siendo una simulación: no hay servidor, cuentas, pagos ni persistencia; el borrador vive en memoria y se borra al recargar.
Herramientas y versiones: Capacitor 6.x, Gradle 8.7, JDK 17 (Temurin 17.0.21), Android Studio y API 34.
4. Tres decisiones con IA
Aplicamos IA generativa en tres capacidades. El número de instrucciones importa menos que su calidad, así que documentamos una decisión por capacidad.
Decisión 1 · Texto: distinguir la propuesta de la simulación
- Necesidad: explicar dos estilos y una sugerencia de pack a adultos de 21 a 35 años, con mensajes coherentes y sin promesas de salud, certificaciones ni productores inventados.
- Prompt inicial: [PROMPT 1A · Anexo A]
- Resultado: mensaje «Dos estilos. Tu mezcla.», catálogo de tres productos y avisos en los tres canales. El encabezado salió como «CER VECERÍA LE SOACHA».
- Problema detectado: una separación accidental alteró el nombre de la marca, y el precio de 3 Golden + 3 Stout no coincidía con Probadora porque esta incluye vaso y tarifa de pack.
- Prompt mejorado: [PROMPT 1B · Anexo B]
- Resultado elegido: CERVECERÍA LE SOACHA; Golden $9.500, Stout $11.000, Probadora $72.000 con vaso; personalizado por suma, sin vaso.
Decisión 2 · Diseño y construcción: mantener precio, vaso y selección sincronizados
Análisis del Prompt 1 · inicial
Fragmento del prompt (texto completo en el Anexo A): «Necesito desarrollar una página web para una cervecería ficticia llamada Cervecería Le Soacha. La página debe presentar la empresa, mostrar sus productos y permitir que los usuarios consulten información y realicen una solicitud de compra simulada.»
- Qué pedía: una página para una cervecería ficticia que presente la empresa y los productos y permita una solicitud simulada, en HTML, CSS y JavaScript, con diseño moderno y adaptable a celular.
- Qué hacía bien: definía la empresa, el objetivo y la tecnología, pedía código fácil de modificar y declaraba la solicitud como simulada.
- Qué le faltaba: no incluía el catálogo, así que la herramienta debía inventar productos, nombres y precios. Tampoco definía público, eslogan ni paleta. Pedía un «formulario de contacto» y no un recorrido de selección, y no decía qué significa una solicitud (validación, resumen, confirmación). No había restricciones sobre datos ficticios, alcohol ni honestidad de las pruebas, y no mencionaba un prototipo móvil.
- Por qué había que mejorarlo: con tan poca información, el resultado esperable es una página genérica de cervecería, con datos inventados y un formulario desconectado del producto elegido.
Análisis del Prompt 2 · experimental
Fragmento del prompt (texto completo en el Anexo A): «Quiero mejorar el proyecto de Cervecería Le Soacha. Ya existe una primera versión de la página web, pero necesito que tenga una experiencia más completa y que el usuario pueda interactuar con los productos. […] Revisa la estructura existente antes de realizar cambios. No elimines funcionalidades que ya estén funcionando.»
- Qué pedía: mejorar la primera versión con los tres productos y sus datos (notas, alcohol, precio), tarjetas de catálogo, ventanas de detalle, selección y avance a una solicitud simulada.
- Qué mejoró frente al Prompt 1: entregó el catálogo, por lo que dejó de inventarse la oferta, y pasó de pedir una página a pedir una interacción. Además introdujo instrucciones de proceso: revisar la estructura antes de cambiar, no eliminar lo que ya funcionaba y explicar los cambios.
- Qué le faltaba: el IBU y los ingredientes, la validación y la confirmación, el prototipo móvil y las advertencias sobre alcohol. «Experimenta» era vago, porque permitía cambios sin criterio de éxito, y no pedía probar nada.
- Por qué había que mejorarlo: el catálogo y el flujo ya existían, pero no había forma de saber si la solicitud o la navegación funcionaban.
Análisis del Prompt 3 · final
Fragmento del prompt (texto completo en el Anexo A): «Actúa como un desarrollador full-stack y diseñador UX/UI con experiencia en la construcción de experiencias digitales para pequeñas empresas. […] Antes de modificar cualquier archivo, inspecciona la estructura completa del proyecto […]. No reemplaces el proyecto completo ni introduzcas tecnologías innecesarias. […] No afirmes que una prueba fue exitosa si no se ejecutó realmente.»
- Qué pedía: un rol (desarrollador full-stack y diseñador UX/UI), identidad de marca con eslogan y paleta, catálogo completo con IBU e ingredientes declarados como ficticios, cuatro secciones, un flujo de selección con validación, resumen y confirmación, y un prototipo móvil de cinco pantallas con estado de error o vacío.
- Qué mejoró frente al Prompt 2: convirtió los requisitos del proyecto en criterios verificables. Pidió inspeccionar antes de modificar y no reemplazar el proyecto, enumeró nueve escenarios de prueba y exigió: «No afirmes que una prueba fue exitosa si no se ejecutó realmente», además de un resumen de lo realmente probado. Incorporó las restricciones: no inventar certificaciones, reseñas ni conexiones, e incluir las dos advertencias sobre alcohol.
- Qué le seguía faltando: el selector de seis botellas, la regla del personalizado (suma de botellas, sin vaso), el rango de edad 21–35 y el paso de la mezcla de la web al móvil no aparecen en ninguno de los tres prompts. Esas reglas se definieron por separado.
Qué cambió de un prompt a otro
| Aspecto | Prompt 1 | Prompt 2 | Prompt 3 |
|---|---|---|---|
| Catálogo | No lo da; la IA inventa | Tres productos con notas, ABV y precio | Tres productos con IBU, ingredientes y aviso de ficticio |
| Recorrido de solicitud | Formulario de contacto | Selección y avance | Selección, validación, resumen y confirmación |
| Móvil | No lo menciona | No lo menciona | Cinco pantallas, error y estado vacío |
| Proceso | Ninguno | Revisar antes y explicar | Inspeccionar, conservar lo que funciona, entregar resumen |
| Pruebas | No pide | No pide | Nueve escenarios y prohibición de declarar pruebas no ejecutadas |
| Límites y alcohol | No los menciona | No los menciona | No inventar certificaciones; dos advertencias obligatorias |
- Problema detectado: Ya con el Prompt 3, la primera prueba de interfaz (W05) falló: al cambiar a personalizado en el formulario, el constructor seguía mostrando Probadora, vaso y $72.000. La modalidad se actualizaba solo en parte de la interfaz, y una revisión posterior encontró el mismo fallo desde los detalles de producto (W07, M03) y una confirmación anterior que reaparecía tras editar el borrador (M04).
- Resultado elegido: la versión del Prompt 3 con el motor compartido de reglas y dos interfaces. W05, W07, M03 y M04 pasaron tras haber fallado con los casos reproducidos. Hay 16 pruebas de lógica y 12 grupos de interacción DOM aprobados.
Decisión 3 · Video: enseñar la diferencia entre Probadora y personalizado
- Necesidad: una promoción de 20–30 s y un tutorial de 30–45 s, coherentes con el selector y con las dos advertencias sobre alcohol legibles.
- Herramienta : Para producir los archivos se usaron Pillow, PyMuPDF y FFmpeg.
- Prompt inicial: [PROMPT 3A · Anexo 3]
- Resultado: ilustraciones SVG originales y guion de las escenas. La vista previa administrada falló y no había capturas de navegador verificadas.
- Problema detectado: usar esquemas con aspecto de pantalla sin identificarlos podía hacer creer que eran capturas de una ejecución real.
- Prompt mejorado: [PROMPT 3B · Anexo 3]
- Resultado elegido: promoción de 25 s y uso de 36 s, rotulados como esquemas ilustrativos, con mezcla 4+2, total $60.000 sin vaso y ambas leyendas en todas las escenas. Se entregan guion (JSON), fotogramas PNG, subtítulos SRT y el generador.
5. Pruebas y conclusiones
Probamos web, móvil y la experiencia completa. Estos son los resultados registrados (todos de prueba automatizada salvo la última tabla):
| ID | Tarea | Resultado | Observado |
|---|---|---|---|
| W02 | Abrir detalle y cargar Probadora | Aprobada | Carga 3+3, $72.000 con vaso |
| W03 | Formulario: vacío, total y texto seguro | Aprobada | Vacío rechazado; 2 Golden = $19.000 |
| W04 | Constructor: vacío, faltan, sobran, variedad | Aprobada | 4+2 aceptado a $60.000 sin vaso |
| W05 | Cambiar modalidad desde el formulario | Aprobada tras corrección | Precio y vaso sincronizados en ambos lugares |
| W06 | Transferir mezcla de web a móvil | Aprobada | Pasan cantidades y modalidad; no el nombre ni el mensaje |
| M01 | Cinco pantallas, revisión, confirmación y regreso | Aprobada | 2 Probadora = $144.000; regresa al catálogo |
| M02 | Error de seis botellas y estado vacío | Aprobada | No permite packs incompletos; confirmación sin sesión muestra vacío |
| M03 | Elegir estilo tras Probadora en móvil | Aprobada tras corrección | Cambia a personalizado, $61.500 sin vaso |
| M04 | Editar borrador tras confirmar | Aprobada tras corrección | Invalida la confirmación anterior |
Correcciones documentadas: (1) sincronización de modalidad entre formulario y constructor (W05); (2) rutas desde los detalles de producto (W07 y M03); (3) confirmación anterior tras editar (M04); (4) separación accidental en el nombre de la marca. Cada una conserva su registro de antes y después.
Verificación visual: una revisión en navegador (Chromium a 390 px y 1366 px) no encontró desbordes horizontales ni errores de consola, y recorrió el flujo móvil y el formulario web. [COMPLETAR: indicar quién la ejecutó. Esta revisión la hizo el asistente de IA; ustedes deben repetirla y adjuntar sus propias capturas.]
6. Demostracion
Recorrido de la demostración: video promocional → web → catálogo → Probadora → «Cargar Probadora» → «Arma tu Six-Pack» → cambiar a 4 Golden + 2 Stout (debe mostrar $60.000 sin vaso) → «Continuar esta mezcla en móvil» → nombre ficticio, 1 pack y mensaje opcional → revisar → confirmar de forma simulada → volver al catálogo. Para el error se usa 2+2 y para el estado vacío, «Vaciar».
Cómo abrir todo: abrir ABRIR.html del paquete (o web/index.html y web/movil.html), reproducir los MP4 de la carpeta videos e instalar el APK LeSoacha_prototipo_movil.apk en un teléfono Android.
7. Responsabilidad, fuentes y límites
- Datos: todo es ficticio (empresa, productos, ingredientes, precios, pedidos y el nombre «Alex Demo»). No hay datos personales, contraseñas ni claves.
- Imágenes y diseño: ilustraciones SVG originales creadas en código, sin imágenes ni marcas de terceros. No se usan fotografías.
- Audio y video: sin voces, música ni rostros; no se clonó ninguna voz.
- Tipografía: Georgia, Arial o alternativas del sistema en la web; DejaVu (licencia incluida) en videos y documentos.
- Salida de IA: no certificamos derechos exclusivos sobre lo generado.
- Alcohol: las dos leyendas («El exceso de alcohol es perjudicial para la salud» y «Prohíbase el expendio de bebidas embriagantes a menores de edad») se contrastaron con INVIMA y se incluyeron en web, móvil y todas las escenas de los videos. No se afirman beneficios de salud, reseñas, certificaciones ni proveedores. El six-pack no se presenta como cantidad de consumo individual. No certificamos autorización de publicidad ni registro sanitario.
- Referencias: INVIMA (bebidas alcohólicas), Ley 124 de 1994 y Decreto 120 de 2010 (Función Pública).
Límites declarados: el APK y la web son simulaciones sin servidor ni pagos; ABV, IBU, cuerpo y maridajes son datos de ejemplo.
8. Aportes del equipo
| Integrante | Aporte real | Evidencia |
|---|---|---|
| Samuel Esteban Benjumea Beltran | Redactó los prompts de las tres versiones de la web (Prompt 1 inicial, Prompt 2 experimental y Prompt 3 final) y probó cada versión en Codex, comparando lo que cada una producía. | Anexo A (prompts completos) y capturas de la salida de cada versión. [COMPLETAR: fechas y nombres de los archivos] |
| Juan Oicata | Empaquetó el prototipo móvil como APK (Capacitor, JDK 17, Android SDK) y resolvió los errores de compilación; produjo el video de promoción y redactó la documentación del proyecto (brief, artículo y registro de fuentes). [COMPLETAR: quién hizo el video de uso] | APK (LeSoacha_prototipo_movil.apk), video de promoción (carpeta videos), brief y artículo. [COMPLETAR: fecha de compilación del APK y capturas del proceso] |
9. Conclusiones
- Una oferta clara reduce la confusión. Separar botella, pack sugerido con vaso y personalizado sin vaso hizo que el precio fuera explicable.
- Calcular bien no basta. El fallo más instructivo fue que el precio era correcto pero la interfaz conservaba un vaso o una modalidad anterior. La coherencia entre selección, precio y resumen exige pruebas de transición, no solo de cálculo.
- La IA acelera, pero hay que comprobar. Todo lo generado se probó antes de aceptarse; detectamos fallos de marca, de sincronización y de honestidad visual (esquemas que parecían capturas).
- Empaquetar una web como APK es viable cuando el prototipo no depende de un servidor, y el mayor obstáculo fue el entorno (versión de Java y Android SDK), no el código.
- Declarar los límites suma. Distinguir lo simulado, lo probado y lo pendiente nos permitió no inventar usuarios, ventas ni métricas.
Anexo A · Prompts completos (Decisión 2)
Textos tal como se enviaron a Codex.
Prompt 1 · inicial
Necesito desarrollar una página web para una cervecería ficticia llamada Cervecería Le Soacha. La página debe presentar la empresa, mostrar sus productos y permitir que los usuarios consulten información y realicen una solicitud de compra simulada.
Quiero un diseño moderno, atractivo y relacionado con la temática de la cerveza artesanal. Incluye una página principal, una sección de productos, información de la empresa y un formulario de contacto.
Utiliza una estructura sencilla, con HTML, CSS y JavaScript. Organiza el código para que sea fácil de modificar y asegúrate de que la página funcione correctamente en computador y dispositivos móviles.Prompt 2 · experimental
Quiero mejorar el proyecto de Cervecería Le Soacha. Ya existe una primera versión de la página web, pero necesito que tenga una experiencia más completa y que el usuario pueda interactuar con los productos.
La empresa ofrece tres opciones:
1. Golden Ale de Frutos Amarillos: cerveza clara, con notas de maracuyá y mango, 4,8% de alcohol y precio de $9.500.
2. Stout de Cacao y Café: cerveza oscura, con notas de cacao y café, 5,8% de alcohol y precio de $11.000.
3. Pack Mixto Probadora: incluye tres Golden Ale, tres Stout y un vaso, por $72.000.
Agrega un catálogo visual con tarjetas para cada producto, mostrando su nombre, descripción, precio y características. También quiero que el usuario pueda consultar los productos, seleccionar una opción y avanzar hacia una solicitud simulada.
Experimenta con una navegación más intuitiva, botones interactivos, ventanas de detalle y una presentación visual coherente con una cervecería artesanal.
Revisa la estructura existente antes de realizar cambios. No elimines funcionalidades que ya estén funcionando. Mantén el diseño adaptable a diferentes tamaños de pantalla y utiliza JavaScript para las interacciones necesarias.
Si encuentras problemas de organización o funcionamiento, propón soluciones y explica brevemente los cambios realizados.Prompt 3 · final
Actúa como un desarrollador full-stack y diseñador UX/UI con experiencia en la construcción de experiencias digitales para pequeñas empresas.
Necesito desarrollar y perfeccionar el proyecto Cervecería Le Soacha, una cervecería ficticia cuya propuesta comercial se basa en ofrecer dos estilos de cerveza y un paquete de degustación.
El objetivo es construir una experiencia digital conectada, en la que el usuario pueda conocer la marca, explorar el catálogo, consultar los productos, realizar una selección y completar una solicitud de compra simulada.
IMPORTANTE:
Antes de modificar cualquier archivo, inspecciona la estructura completa del proyecto, identifica las tecnologías utilizadas y comprende cómo se relacionan sus componentes. Conserva las funcionalidades existentes que estén correctamente implementadas. No reemplaces el proyecto completo ni introduzcas tecnologías innecesarias.
## 1. Identidad de marca
Nombre: Cervecería Le Soacha.
Eslogan: "Dos estilos. Tu mezcla."
La identidad visual debe transmitir una imagen artesanal, moderna y atractiva. Utiliza una combinación de colores relacionados con la cerveza, como tonos ámbar, dorados, marrones y oscuros.
El diseño debe mantener coherencia entre la página web y el prototipo móvil.
## 2. Catálogo de productos
La empresa cuenta con tres productos ficticios:
PRODUCTO 1 – GOLDEN ALE DE FRUTOS AMARILLOS
- Precio: $9.500 COP por botella.
- Alcohol: 4,8% ABV.
- Amargor: 20 IBU.
- Descripción: cerveza clara, de perfil suave, con notas de maracuyá y mango.
- Ingredientes de referencia: agua, malta de cebada, lúpulo, levadura, maracuyá y mango.
PRODUCTO 2 – STOUT DE CACAO Y CAFÉ
- Precio: $11.000 COP por botella.
- Alcohol: 5,8% ABV.
- Amargor: 32 IBU.
- Descripción: cerveza oscura, de cuerpo robusto, con notas de cacao y café.
- Ingredientes de referencia: agua, malta tostada, lúpulo, levadura, cacao y café.
PRODUCTO 3 – PACK MIXTO "PROBADORA"
- Precio: $72.000 COP.
- Contenido: tres Golden Ale, tres Stout y un vaso.
- Descripción: paquete diseñado para probar ambos estilos.
Todos los productos, precios y características son simulados y deben presentarse como información ficticia del proyecto académico.
## 3. Página web
La página debe contar con cuatro secciones principales:
- Inicio: presentación de la marca, eslogan e imagen principal.
- Catálogo: visualización de los tres productos.
- Experiencia: explicación de los estilos y guía para ayudar al usuario a elegir.
- Contacto o solicitud: formulario para realizar una solicitud simulada.
El catálogo debe mostrar tarjetas visualmente diferenciadas, con imágenes, nombres, descripciones, precios y características.
Cada producto debe permitir consultar más información mediante una vista de detalle o interacción equivalente.
## 4. Selección y solicitud de productos
Implementa un flujo sencillo para que el usuario pueda seleccionar productos y realizar una solicitud simulada.
El sistema debe:
- Permitir seleccionar el producto deseado.
- Mostrar claramente la selección realizada.
- Validar los campos obligatorios del formulario.
- Evitar el envío de formularios incompletos.
- Mostrar un resumen de la solicitud antes de finalizar.
- Presentar una confirmación visual cuando el proceso termine.
No es necesario integrar pasarelas de pago ni realizar transacciones reales. La solicitud debe ser completamente simulada y funcionar dentro del proyecto.
## 5. Prototipo móvil
Desarrolla o conserva un prototipo móvil navegable que complemente la experiencia de la página web.
Debe incluir cinco pantallas principales:
1. Pantalla de bienvenida o inicio.
2. Catálogo de productos.
3. Detalle del producto.
4. Selección y revisión de la solicitud.
5. Confirmación o resultado del proceso.
La navegación debe permitir completar el recorrido sin quedar atrapado en una pantalla. Incluye también un estado de error o vacío para representar situaciones en las que no existan productos seleccionados o falte información.
## 6. Experiencia de usuario y diseño
Aplica los siguientes criterios:
- Diseño responsive.
- Navegación intuitiva y consistente.
- Jerarquía visual clara.
- Tipografía legible.
- Contraste adecuado.
- Botones con estados visuales.
- Mensajes de validación comprensibles.
- Imágenes relacionadas con cada estilo de cerveza.
- Coherencia visual entre la versión web y móvil.
Evita sobrecargar las pantallas con información innecesaria.
## 7. Aspectos técnicos
- Respeta las tecnologías y dependencias que ya utiliza el proyecto.
- Mantén el código organizado y reutilizable.
- Evita duplicar componentes o funcionalidades.
- Implementa validaciones mediante JavaScript cuando corresponda.
- Verifica que los botones, enlaces y formularios tengan un comportamiento funcional.
- No agregues servicios externos ni integraciones que no sean necesarias.
- No inventes conexiones con bases de datos, pagos o servicios que no estén implementados.
## 8. Pruebas y control de calidad
Al finalizar, revisa el funcionamiento de los siguientes escenarios:
1. Navegación entre las secciones principales.
2. Visualización correcta de los tres productos.
3. Consulta de los detalles de cada producto.
4. Selección de un producto.
5. Validación de formularios incompletos.
6. Generación del resumen de solicitud.
7. Confirmación de una solicitud simulada.
8. Visualización en diferentes tamaños de pantalla.
9. Comportamiento de los estados vacíos y de error.
Si detectas errores, corrígelos sin afectar las funcionalidades existentes.
No afirmes que una prueba fue exitosa si no se ejecutó realmente. Al finalizar, entrega un resumen de los archivos modificados, las funcionalidades implementadas, los problemas encontrados y las pruebas que efectivamente se realizaron.
## 9. Restricciones y coherencia del proyecto
- No presentar los productos como cervezas reales disponibles para la venta.
- No inventar certificaciones, reseñas o beneficios para la salud.
- Incluir las advertencias correspondientes:
"El exceso de alcohol es perjudicial para la salud."
"Prohíbase el expendio de bebidas embriagantes a menores de edad."
- Mantener el eslogan y los datos comerciales consistentes en todas las secciones.
El resultado debe ser una experiencia digital funcional, visualmente coherente y adecuada para una presentación académica de un proyecto de innovación y uso de inteligencia artificial generativa.