{"id":94238,"date":"2026-11-11T23:50:10","date_gmt":"2026-11-12T04:50:10","guid":{"rendered":"https:\/\/niixer.com\/?p=94238"},"modified":"2026-11-12T00:01:38","modified_gmt":"2026-11-12T05:01:38","slug":"cerveceria-le-soacha-dos-estilos-una-experiencia-digital","status":"publish","type":"post","link":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/","title":{"rendered":"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital"},"content":{"rendered":"\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"576\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1024x576.png\" alt=\"\" class=\"wp-image-94264\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1024x576.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-300x169.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-768x432.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1536x864.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image.png 1672w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><em>Samuel Esteban Benjumea Beltran y Juan Esteban Oicata Tibata\u00b7 Universidad Central \u00b7 Trabajando con la IA generativa \u00b7 Periodo 2026-2 \u00b7 Docente: Mag\u00edster Ingeniero Carlos Pinz\u00f3n<\/em><\/p>\n\n\n\n<p class=\"wp-block-paragraph\">Proyecto acad\u00e9mico. Marca, productos, precios, ingredientes y pedidos son ficticios. Demostraci\u00f3n: no env\u00eda pedidos ni guarda datos. El exceso de alcohol es perjudicial para la salud. Proh\u00edbase el expendio de bebidas embriagantes a menores de edad.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">Resumen<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Le Soacha es una cervecer\u00eda artesanal ficticia de Bogot\u00e1. 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\u00f1o y conectado: una p\u00e1gina web funcional, un prototipo m\u00f3vil de cinco pantallas (tambi\u00e9n empaquetado como APK instalable en Android) y dos videos. Usamos IA generativa en tres capacidades (texto, dise\u00f1o\/construcci\u00f3n y video) y documentamos qu\u00e9 gener\u00f3, qu\u00e9 fall\u00f3, c\u00f3mo lo mejoramos y qu\u00e9 cambiamos nosotros. Este art\u00edculo re\u00fane el brief, el proceso, las pruebas, la demostraci\u00f3n y las conclusiones.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">1. El reto<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Empresa: Cervecer\u00eda Le Soacha (ficticia, Bogot\u00e1). P\u00fablico simulado: adultos de 21 a 35 a\u00f1os que organizan reuniones o buscan un detalle. Ajustamos el rango de 18\u201335 de la gu\u00eda a 21\u201335 porque el producto es alcohol; la prohibici\u00f3n legal se refiere a menores de edad.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Tres necesidades y c\u00f3mo las resolvimos:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Necesidad<\/th><th>Soluci\u00f3n<\/th><\/tr><tr><td>1. Explicar la oferta<\/td><td>Cat\u00e1logo con perfiles de amargor (IBU), graduaci\u00f3n (ABV), color, cuerpo y maridajes de ejemplo<\/td><\/tr><tr><td>2. Ayudar a elegir<\/td><td>Gu\u00eda \u00abArma tu Six-Pack\u00bb: exactamente seis botellas, m\u00ednimo una de cada estilo<\/td><\/tr><tr><td>3. Preparar una solicitud sin perder informaci\u00f3n<\/td><td>Formulario con validaci\u00f3n, resumen y confirmaci\u00f3n simulada; la mezcla pasa de la web al m\u00f3vil por la URL<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">Catalogo simulado<\/h3>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Producto<\/th><th>Perfil<\/th><th>Precio (COP, simulado)<\/th><\/tr><tr><td>Golden Ale de Frutos Amarillos<\/td><td>4,8 % ABV \u00b7 20 IBU<\/td><td>$9.500 por botella<\/td><\/tr><tr><td>Stout de Cacao y Caf\u00e9<\/td><td>5,8 % ABV \u00b7 32 IBU<\/td><td>$11.000 por botella<\/td><\/tr><tr><td>Pack Mixto \u00abProbadora\u00bb<\/td><td>3 Golden + 3 Stout + vaso<\/td><td>$72.000 por pack<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">El personalizado es una modalidad, no un cuarto producto: seis botellas exactas, m\u00ednimo 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.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"565\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-2-1024x565.png\" alt=\"\" class=\"wp-image-94266\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-2-1024x565.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-2-300x165.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-2-767x423.png 767w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-2-1536x847.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-2.png 1545w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Recorrido previsto:<\/strong> video promocional \u2192 web (cat\u00e1logo y detalle) \u2192 gu\u00eda para elegir \u2192 m\u00f3vil (revisi\u00f3n) \u2192 confirmaci\u00f3n simulada \u2192 regreso al cat\u00e1logo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">2. Qu\u00e9 construimos<\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">2.1 P\u00e1gina web<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Cuatro secciones con navegaci\u00f3n real: inicio\/propuesta de valor, cat\u00e1logo de tres productos, gu\u00eda para elegir y solicitud simulada. Cada bot\u00f3n de producto abre su detalle o carga una selecci\u00f3n. El formulario valida campos vac\u00edos, cantidades y l\u00edmite del mensaje, muestra un resumen local y avisa \u00abDemostraci\u00f3n: no env\u00eda pedidos ni guarda datos\u00bb. No hay pagos, correos ni base de datos.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"762\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-3-1024x762.png\" alt=\"\" class=\"wp-image-94267\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-3-1024x762.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-3-300x223.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-3-767x571.png 767w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-3.png 1157w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"542\" height=\"905\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-4.png\" alt=\"\" class=\"wp-image-94268\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-4.png 542w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-4-180x300.png 180w\" sizes=\"auto, (max-width: 542px) 100vw, 542px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"529\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-5-1024x529.png\" alt=\"\" class=\"wp-image-94269\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-5-1024x529.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-5-300x155.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-5-766x396.png 766w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-5.png 1138w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2.2 Prototipo m\u00f3vil de cinco pantallas<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\">Bienvenida \u2192 cat\u00e1logo \u2192 detalle \u2192 \u00abArma tu Six-Pack\u00bb (con revisi\u00f3n integrada) \u2192 confirmaci\u00f3n, con regreso al cat\u00e1logo. Incluye mensaje de error (\u00abTe faltan 2 botellas para completar seis\u00bb) y estado vac\u00edo. Todo es simulado.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"895\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-6.png\" alt=\"\" class=\"wp-image-94270\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-6.png 480w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-6-161x300.png 161w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"850\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-7.png\" alt=\"\" class=\"wp-image-94271\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-7.png 480w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-7-169x300.png 169w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"801\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-8.png\" alt=\"\" class=\"wp-image-94272\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-8.png 480w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-8-180x300.png 180w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"480\" height=\"886\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-9.png\" alt=\"\" class=\"wp-image-94273\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-9.png 480w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-9-163x300.png 163w\" sizes=\"auto, (max-width: 480px) 100vw, 480px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"481\" height=\"898\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-10.png\" alt=\"\" class=\"wp-image-94274\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-10.png 481w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-10-161x300.png 161w\" sizes=\"auto, (max-width: 481px) 100vw, 481px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"403\" height=\"815\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-11.png\" alt=\"\" class=\"wp-image-94275\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-11.png 403w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-11-148x300.png 148w\" sizes=\"auto, (max-width: 403px) 100vw, 403px\" \/><\/figure>\n\n\n\n<h3 class=\"wp-block-heading\">2.3 Dos videos con prop\u00f3sito<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Video 1, promoci\u00f3n (30 s):<\/strong> presenta la marca y Probadora e invita a explorar el cat\u00e1logo.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/Video-promocion-.mp4\"><\/video><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Video 2:<\/strong> ense\u00f1a el recorrido m\u00f3vil: cargar Probadora, cambiar a 4 Golden + 2 Stout ($60.000 sin vaso), revisar y confirmar.<\/li>\n<\/ul>\n\n\n\n<figure class=\"wp-block-video\"><video height=\"1080\" style=\"aspect-ratio: 1920 \/ 1080;\" width=\"1920\" controls src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/VIDEO-EXPLICACION.mp4\"><\/video><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Ambos son MP4 H.264 a 1280\u00d7720 y 24 fps, con textos y subt\u00edtulos integrados y las dos leyendas de alcohol visibles en todas las escenas. No usan voces, m\u00fasica ni rostros.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"501\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-16-1024x501.png\" alt=\"\" class=\"wp-image-94383\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-16-1024x501.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-16-766x375.png 766w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-16-300x147.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-16.png 1441w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">3. De prototipo web a APK de Android<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">La gu\u00eda pidi\u00f3 entregar la versi\u00f3n m\u00f3vil como APK instalable. Como el prototipo es HTML, CSS y JavaScript sin servidor, lo empaquetamos con <strong>Capacitor<\/strong> (Android, WebView) en lugar de reescribirlo.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qu\u00e9 hicimos:<\/strong><\/p>\n\n\n\n<ol class=\"wp-block-list\">\n<li>Preparamos una carpeta <code>www<\/code> con el prototipo. El m\u00f3vil qued\u00f3 como p\u00e1gina de entrada (<code>index.html<\/code> abre <code>movil.html<\/code>) y la web completa pas\u00f3 a <code>web.html<\/code>; se corrigieron los enlaces cruzados.<\/li>\n\n\n\n<li>Creamos el proyecto con Capacitor 6 (<code>npm install<\/code>, <code>npx cap add android<\/code>, <code>npx cap sync android<\/code>) con id <code>com.lesoacha.demo<\/code> y nombre \u00abLe Soacha\u00bb.<\/li>\n\n\n\n<li>Compilamos con Gradle (<code>.\/gradlew assembleDebug<\/code>) y obtuvimos <code>app-debug.apk<\/code>.<\/li>\n<\/ol>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Problemas reales y c\u00f3mo se resolvieron:<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Problema<\/th><th>Causa<\/th><th>Soluci\u00f3n<\/th><\/tr><tr><td><code>Unsupported class file major version 70\/69<\/code><\/td><td>Gradle usaba Java 26\/25 del equipo y esas versiones no son compatibles<\/td><td>Instalar JDK 17 (Temurin) y fijar <code>org.gradle.java.home<\/code> en <code>gradle.properties<\/code><\/td><\/tr><tr><td><code>SDK location not found<\/code><\/td><td>El Android SDK no estaba instalado<\/td><td>Instalarlo desde Android Studio (API 34, Build-Tools, Platform-Tools) y crear <code>local.properties<\/code> con <code>sdk.dir<\/code><\/td><\/tr><tr><td><code>android platform has not been added yet<\/code><\/td><td>El comando se ejecut\u00f3 dentro de la carpeta <code>android<\/code> y no en la ra\u00edz<\/td><td>Ejecutar los comandos <code>npx cap<\/code> en la carpeta que contiene <code>package.json<\/code><\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\">Resultado: <code>BUILD SUCCESSFUL<\/code> y un APK de depuraci\u00f3n que se instala sin firmar. <strong>Sigue siendo una simulaci\u00f3n:<\/strong> no hay servidor, cuentas, pagos ni persistencia; el borrador vive en memoria y se borra al recargar.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Herramientas y versiones:<\/strong> Capacitor 6.x, Gradle 8.7, JDK 17 (Temurin 17.0.21), Android Studio y API 34. <\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"797\" height=\"498\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-12.png\" alt=\"\" class=\"wp-image-94276\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-12.png 797w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-12-300x187.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-12-767x479.png 767w\" sizes=\"auto, (max-width: 797px) 100vw, 797px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large is-resized\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"298\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-13-1024x298.png\" alt=\"\" class=\"wp-image-94277\" style=\"aspect-ratio:3.44;width:602px;height:auto\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-13-1024x298.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-13-300x87.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-13-767x223.png 767w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-13-1536x446.png 1536w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-13.png 1917w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"1024\" height=\"289\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-14-1024x289.png\" alt=\"\" class=\"wp-image-94278\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-14-1024x289.png 1024w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-14-300x85.png 300w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-14-766x216.png 766w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-14.png 1035w\" sizes=\"auto, (max-width: 1024px) 100vw, 1024px\" \/><\/figure>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"1024\" src=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15-461x1024.png\" alt=\"\" class=\"wp-image-94279\" srcset=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15-461x1024.png 461w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15-135x300.png 135w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15-768x1706.png 768w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15-691x1536.png 691w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15-922x2048.png 922w, https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-15.png 1080w\" sizes=\"auto, (max-width: 461px) 100vw, 461px\" \/><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\"><strong>4. Tres decisiones con IA<\/strong><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Aplicamos IA generativa en tres capacidades. El n\u00famero de instrucciones importa menos que su calidad, as\u00ed que documentamos una decisi\u00f3n por capacidad.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Decisi\u00f3n 1 \u00b7 Texto: distinguir la propuesta de la simulaci\u00f3n<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Necesidad:<\/strong> explicar dos estilos y una sugerencia de pack a adultos de 21 a 35 a\u00f1os, con mensajes coherentes y sin promesas de salud, certificaciones ni productores inventados.<\/li>\n\n\n\n<li><strong>Prompt inicial:<\/strong> <strong>[PROMPT 1A \u00b7 Anexo A]<\/strong><\/li>\n\n\n\n<li><strong>Resultado:<\/strong> mensaje \u00abDos estilos. Tu mezcla.\u00bb, cat\u00e1logo de tres productos y avisos en los tres canales. El encabezado sali\u00f3 como \u00abCER VECER\u00cdA LE SOACHA\u00bb.<\/li>\n\n\n\n<li><strong>Problema detectado:<\/strong> una separaci\u00f3n accidental alter\u00f3 el nombre de la marca, y el precio de 3 Golden + 3 Stout no coincid\u00eda con Probadora porque esta incluye vaso y tarifa de pack.<\/li>\n\n\n\n<li><strong>Prompt mejorado:<\/strong> <strong>[PROMPT 1B \u00b7 Anexo B]<\/strong><\/li>\n\n\n\n<li><strong>Resultado elegido:<\/strong> CERVECER\u00cdA LE SOACHA; Golden $9.500, Stout $11.000, Probadora $72.000 con vaso; personalizado por suma, sin vaso.<\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Decisi\u00f3n 2 \u00b7 Dise\u00f1o y construcci\u00f3n: mantener precio, vaso y selecci\u00f3n sincronizados<\/h3>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>An\u00e1lisis del Prompt 1 \u00b7 inicial<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Fragmento del prompt (texto completo en el Anexo A):<\/strong> \u00abNecesito desarrollar una p\u00e1gina web para una cervecer\u00eda ficticia llamada Cervecer\u00eda Le Soacha. La p\u00e1gina debe presentar la empresa, mostrar sus productos y permitir que los usuarios consulten informaci\u00f3n y realicen una solicitud de compra simulada.\u00bb<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Qu\u00e9 ped\u00eda:<\/strong> una p\u00e1gina para una cervecer\u00eda ficticia que presente la empresa y los productos y permita una solicitud simulada, en HTML, CSS y JavaScript, con dise\u00f1o moderno y adaptable a celular.<\/li>\n\n\n\n<li><strong>Qu\u00e9 hac\u00eda bien:<\/strong> defin\u00eda la empresa, el objetivo y la tecnolog\u00eda, ped\u00eda c\u00f3digo f\u00e1cil de modificar y declaraba la solicitud como simulada.<\/li>\n\n\n\n<li><strong>Qu\u00e9 le faltaba:<\/strong> no inclu\u00eda el cat\u00e1logo, as\u00ed que la herramienta deb\u00eda inventar productos, nombres y precios. Tampoco defin\u00eda p\u00fablico, eslogan ni paleta. Ped\u00eda un \u00abformulario de contacto\u00bb y no un recorrido de selecci\u00f3n, y no dec\u00eda qu\u00e9 significa una solicitud (validaci\u00f3n, resumen, confirmaci\u00f3n). No hab\u00eda restricciones sobre datos ficticios, alcohol ni honestidad de las pruebas, y no mencionaba un prototipo m\u00f3vil.<\/li>\n\n\n\n<li><strong>Por qu\u00e9 hab\u00eda que mejorarlo:<\/strong> con tan poca informaci\u00f3n, el resultado esperable es una p\u00e1gina gen\u00e9rica de cervecer\u00eda, con datos inventados y un formulario desconectado del producto elegido. <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>An\u00e1lisis del Prompt 2 \u00b7 experimental<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Fragmento del prompt (texto completo en el Anexo A):<\/strong> \u00abQuiero mejorar el proyecto de Cervecer\u00eda Le Soacha. Ya existe una primera versi\u00f3n de la p\u00e1gina web, pero necesito que tenga una experiencia m\u00e1s completa y que el usuario pueda interactuar con los productos. [\u2026] Revisa la estructura existente antes de realizar cambios. No elimines funcionalidades que ya est\u00e9n funcionando.\u00bb<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Qu\u00e9 ped\u00eda:<\/strong> mejorar la primera versi\u00f3n con los tres productos y sus datos (notas, alcohol, precio), tarjetas de cat\u00e1logo, ventanas de detalle, selecci\u00f3n y avance a una solicitud simulada.<\/li>\n\n\n\n<li><strong>Qu\u00e9 mejor\u00f3 frente al Prompt 1:<\/strong> entreg\u00f3 el cat\u00e1logo, por lo que dej\u00f3 de inventarse la oferta, y pas\u00f3 de pedir una p\u00e1gina a pedir una interacci\u00f3n. Adem\u00e1s introdujo instrucciones de proceso: revisar la estructura antes de cambiar, no eliminar lo que ya funcionaba y explicar los cambios.<\/li>\n\n\n\n<li><strong>Qu\u00e9 le faltaba:<\/strong> el IBU y los ingredientes, la validaci\u00f3n y la confirmaci\u00f3n, el prototipo m\u00f3vil y las advertencias sobre alcohol. \u00abExperimenta\u00bb era vago, porque permit\u00eda cambios sin criterio de \u00e9xito, y no ped\u00eda probar nada.<\/li>\n\n\n\n<li><strong>Por qu\u00e9 hab\u00eda que mejorarlo:<\/strong> el cat\u00e1logo y el flujo ya exist\u00edan, pero no hab\u00eda forma de saber si la solicitud o la navegaci\u00f3n funcionaban.<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>An\u00e1lisis del Prompt 3 \u00b7 final<\/strong><\/p>\n\n\n\n<blockquote class=\"wp-block-quote is-layout-flow wp-block-quote-is-layout-flow\">\n<p class=\"wp-block-paragraph\"><strong>Fragmento del prompt (texto completo en el Anexo A):<\/strong> \u00abAct\u00faa como un desarrollador full-stack y dise\u00f1ador UX\/UI con experiencia en la construcci\u00f3n de experiencias digitales para peque\u00f1as empresas. [\u2026] Antes de modificar cualquier archivo, inspecciona la estructura completa del proyecto [\u2026]. No reemplaces el proyecto completo ni introduzcas tecnolog\u00edas innecesarias. [\u2026] No afirmes que una prueba fue exitosa si no se ejecut\u00f3 realmente.\u00bb<\/p>\n<\/blockquote>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Qu\u00e9 ped\u00eda:<\/strong> un rol (desarrollador full-stack y dise\u00f1ador UX\/UI), identidad de marca con eslogan y paleta, cat\u00e1logo completo con IBU e ingredientes declarados como ficticios, cuatro secciones, un flujo de selecci\u00f3n con validaci\u00f3n, resumen y confirmaci\u00f3n, y un prototipo m\u00f3vil de cinco pantallas con estado de error o vac\u00edo.<\/li>\n\n\n\n<li><strong>Qu\u00e9 mejor\u00f3 frente al Prompt 2:<\/strong> convirti\u00f3 los requisitos del proyecto en criterios verificables. Pidi\u00f3 inspeccionar antes de modificar y no reemplazar el proyecto, enumer\u00f3 nueve escenarios de prueba y exigi\u00f3: \u00abNo afirmes que una prueba fue exitosa si no se ejecut\u00f3 realmente\u00bb, adem\u00e1s de un resumen de lo realmente probado. Incorpor\u00f3 las restricciones: no inventar certificaciones, rese\u00f1as ni conexiones, e incluir las dos advertencias sobre alcohol.<\/li>\n\n\n\n<li><strong>Qu\u00e9 le segu\u00eda faltando:<\/strong> el selector de seis botellas, la regla del personalizado (suma de botellas, sin vaso), el rango de edad 21\u201335 y el paso de la mezcla de la web al m\u00f3vil no aparecen en ninguno de los tres prompts. Esas reglas se definieron por separado. <\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Qu\u00e9 cambi\u00f3 de un prompt a otro<\/strong><\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Aspecto<\/th><th>Prompt 1<\/th><th>Prompt 2<\/th><th>Prompt 3<\/th><\/tr><tr><td>Cat\u00e1logo<\/td><td>No lo da; la IA inventa<\/td><td>Tres productos con notas, ABV y precio<\/td><td>Tres productos con IBU, ingredientes y aviso de ficticio<\/td><\/tr><tr><td>Recorrido de solicitud<\/td><td>Formulario de contacto<\/td><td>Selecci\u00f3n y avance<\/td><td>Selecci\u00f3n, validaci\u00f3n, resumen y confirmaci\u00f3n<\/td><\/tr><tr><td>M\u00f3vil<\/td><td>No lo menciona<\/td><td>No lo menciona<\/td><td>Cinco pantallas, error y estado vac\u00edo<\/td><\/tr><tr><td>Proceso<\/td><td>Ninguno<\/td><td>Revisar antes y explicar<\/td><td>Inspeccionar, conservar lo que funciona, entregar resumen<\/td><\/tr><tr><td>Pruebas<\/td><td>No pide<\/td><td>No pide<\/td><td>Nueve escenarios y prohibici\u00f3n de declarar pruebas no ejecutadas<\/td><\/tr><tr><td>L\u00edmites y alcohol<\/td><td>No los menciona<\/td><td>No los menciona<\/td><td>No inventar certificaciones; dos advertencias obligatorias<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Problema detectado:<\/strong>  Ya con el Prompt 3, la primera prueba de interfaz (W05) fall\u00f3: al cambiar a personalizado en el formulario, el constructor segu\u00eda mostrando Probadora, vaso y $72.000. La modalidad se actualizaba solo en parte de la interfaz, y una revisi\u00f3n posterior encontr\u00f3 el mismo fallo desde los detalles de producto (W07, M03) y una confirmaci\u00f3n anterior que reaparec\u00eda tras editar el borrador (M04).<\/li>\n\n\n\n<li><strong>Resultado elegido:<\/strong> la versi\u00f3n 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\u00f3gica y 12 grupos de interacci\u00f3n DOM aprobados. <\/li>\n<\/ul>\n\n\n\n<h3 class=\"wp-block-heading\">Decisi\u00f3n 3 \u00b7 Video: ense\u00f1ar la diferencia entre Probadora y personalizado<\/h3>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Necesidad:<\/strong> una promoci\u00f3n de 20\u201330 s y un tutorial de 30\u201345 s, coherentes con el selector y con las dos advertencias sobre alcohol legibles.<\/li>\n\n\n\n<li><strong>Herramienta :<\/strong> Para producir los archivos se usaron Pillow, PyMuPDF y FFmpeg.<\/li>\n\n\n\n<li><strong>Prompt inicial:<\/strong> <strong>[PROMPT 3A \u00b7 Anexo 3]<\/strong><\/li>\n\n\n\n<li><strong>Resultado:<\/strong> ilustraciones SVG originales y guion de las escenas. La vista previa administrada fall\u00f3 y no hab\u00eda capturas de navegador verificadas.<\/li>\n\n\n\n<li><strong>Problema detectado:<\/strong> usar esquemas con aspecto de pantalla sin identificarlos pod\u00eda hacer creer que eran capturas de una ejecuci\u00f3n real.<\/li>\n\n\n\n<li><strong>Prompt mejorado:<\/strong> <strong>[PROMPT 3B \u00b7 Anexo 3]<\/strong><\/li>\n\n\n\n<li><strong>Resultado elegido:<\/strong> promoci\u00f3n 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\u00edtulos SRT y el generador.<\/li>\n<\/ul>\n\n\n\n<h2 class=\"wp-block-heading\">5. Pruebas y conclusiones<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Probamos web, m\u00f3vil y la experiencia completa. Estos son los resultados registrados (todos de prueba automatizada salvo la \u00faltima tabla):<\/p>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>ID<\/th><th>Tarea<\/th><th>Resultado<\/th><th>Observado<\/th><\/tr><tr><td>W02<\/td><td>Abrir detalle y cargar Probadora<\/td><td>Aprobada<\/td><td>Carga 3+3, $72.000 con vaso<\/td><\/tr><tr><td>W03<\/td><td>Formulario: vac\u00edo, total y texto seguro<\/td><td>Aprobada<\/td><td>Vac\u00edo rechazado; 2 Golden = $19.000<\/td><\/tr><tr><td>W04<\/td><td>Constructor: vac\u00edo, faltan, sobran, variedad<\/td><td>Aprobada<\/td><td>4+2 aceptado a $60.000 sin vaso<\/td><\/tr><tr><td>W05<\/td><td>Cambiar modalidad desde el formulario<\/td><td>Aprobada tras correcci\u00f3n<\/td><td>Precio y vaso sincronizados en ambos lugares<\/td><\/tr><tr><td>W06<\/td><td>Transferir mezcla de web a m\u00f3vil<\/td><td>Aprobada<\/td><td>Pasan cantidades y modalidad; no el nombre ni el mensaje<\/td><\/tr><tr><td>M01<\/td><td>Cinco pantallas, revisi\u00f3n, confirmaci\u00f3n y regreso<\/td><td>Aprobada<\/td><td>2 Probadora = $144.000; regresa al cat\u00e1logo<\/td><\/tr><tr><td>M02<\/td><td>Error de seis botellas y estado vac\u00edo<\/td><td>Aprobada<\/td><td>No permite packs incompletos; confirmaci\u00f3n sin sesi\u00f3n muestra vac\u00edo<\/td><\/tr><tr><td>M03<\/td><td>Elegir estilo tras Probadora en m\u00f3vil<\/td><td>Aprobada tras correcci\u00f3n<\/td><td>Cambia a personalizado, $61.500 sin vaso<\/td><\/tr><tr><td>M04<\/td><td>Editar borrador tras confirmar<\/td><td>Aprobada tras correcci\u00f3n<\/td><td>Invalida la confirmaci\u00f3n anterior<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Correcciones documentadas:<\/strong> (1) sincronizaci\u00f3n de modalidad entre formulario y constructor (W05); (2) rutas desde los detalles de producto (W07 y M03); (3) confirmaci\u00f3n anterior tras editar (M04); (4) separaci\u00f3n accidental en el nombre de la marca. Cada una conserva su registro de antes y despu\u00e9s.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Verificaci\u00f3n visual:<\/strong> una revisi\u00f3n en navegador (Chromium a 390 px y 1366 px) no encontr\u00f3 desbordes horizontales ni errores de consola, y recorri\u00f3 el flujo m\u00f3vil y el formulario web. <strong>[COMPLETAR: indicar qui\u00e9n la ejecut\u00f3. Esta revisi\u00f3n la hizo el asistente de IA; ustedes deben repetirla y adjuntar sus propias capturas.]<\/strong><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">6. Demostracion<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Recorrido de la demostraci\u00f3n: video promocional \u2192 web \u2192 cat\u00e1logo \u2192 Probadora \u2192 \u00abCargar Probadora\u00bb \u2192 \u00abArma tu Six-Pack\u00bb \u2192 cambiar a 4 Golden + 2 Stout (debe mostrar $60.000 sin vaso) \u2192 \u00abContinuar esta mezcla en m\u00f3vil\u00bb \u2192 nombre ficticio, 1 pack y mensaje opcional \u2192 revisar \u2192 confirmar de forma simulada \u2192 volver al cat\u00e1logo. Para el error se usa 2+2 y para el estado vac\u00edo, \u00abVaciar\u00bb.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>C\u00f3mo abrir todo:<\/strong> abrir <code>ABRIR.html<\/code> del paquete (o <code>web\/index.html<\/code> y <code>web\/movil.html<\/code>), reproducir los MP4 de la carpeta <code>videos<\/code> e instalar el APK <code>LeSoacha_prototipo_movil.apk<\/code> en un tel\u00e9fono Android.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">7. Responsabilidad, fuentes y l\u00edmites<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Datos:<\/strong> todo es ficticio (empresa, productos, ingredientes, precios, pedidos y el nombre \u00abAlex Demo\u00bb). No hay datos personales, contrase\u00f1as ni claves.<\/li>\n\n\n\n<li><strong>Im\u00e1genes y dise\u00f1o:<\/strong> ilustraciones SVG originales creadas en c\u00f3digo, sin im\u00e1genes ni marcas de terceros. No se usan fotograf\u00edas.<\/li>\n\n\n\n<li><strong>Audio y video:<\/strong> sin voces, m\u00fasica ni rostros; no se clon\u00f3 ninguna voz.<\/li>\n\n\n\n<li><strong>Tipograf\u00eda:<\/strong> Georgia, Arial o alternativas del sistema en la web; DejaVu (licencia incluida) en videos y documentos.<\/li>\n\n\n\n<li><strong>Salida de IA:<\/strong> no certificamos derechos exclusivos sobre lo generado.<\/li>\n\n\n\n<li><strong>Alcohol:<\/strong> las dos leyendas (\u00abEl exceso de alcohol es perjudicial para la salud\u00bb y \u00abProh\u00edbase el expendio de bebidas embriagantes a menores de edad\u00bb) se contrastaron con INVIMA y se incluyeron en web, m\u00f3vil y todas las escenas de los videos. No se afirman beneficios de salud, rese\u00f1as, certificaciones ni proveedores. El six-pack no se presenta como cantidad de consumo individual. No certificamos autorizaci\u00f3n de publicidad ni registro sanitario.<\/li>\n\n\n\n<li><strong>Referencias:<\/strong> INVIMA (bebidas alcoh\u00f3licas), Ley 124 de 1994 y Decreto 120 de 2010 (Funci\u00f3n P\u00fablica).<\/li>\n<\/ul>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>L\u00edmites declarados:<\/strong> el APK y la web son simulaciones sin servidor ni pagos; ABV, IBU, cuerpo y maridajes son datos de ejemplo.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\">8. Aportes del equipo<\/h2>\n\n\n\n<figure class=\"wp-block-table\"><table class=\"has-fixed-layout\"><tbody><tr><th>Integrante<\/th><th>Aporte real<\/th><th>Evidencia<\/th><\/tr><tr><td>Samuel Esteban Benjumea Beltran<\/td><td>Redact\u00f3 los prompts de las tres versiones de la web (Prompt 1 inicial, Prompt 2 experimental y Prompt 3 final) y prob\u00f3 cada versi\u00f3n en Codex, comparando lo que cada una produc\u00eda.<\/td><td>Anexo A (prompts completos) y capturas de la salida de cada versi\u00f3n. [COMPLETAR: fechas y nombres de los archivos]<\/td><\/tr><tr><td>Juan Oicata<\/td><td>Empaquet\u00f3 el prototipo m\u00f3vil como APK (Capacitor, JDK 17, Android SDK) y resolvi\u00f3 los errores de compilaci\u00f3n; produjo el video de promoci\u00f3n y redact\u00f3 la documentaci\u00f3n del proyecto (brief, art\u00edculo y registro de fuentes). [COMPLETAR: qui\u00e9n hizo el video de uso]<\/td><td>APK (LeSoacha_prototipo_movil.apk), video de promoci\u00f3n (carpeta videos), brief y art\u00edculo. [COMPLETAR: fecha de compilaci\u00f3n del APK y capturas del proceso]<\/td><\/tr><\/tbody><\/table><\/figure>\n\n\n\n<h2 class=\"wp-block-heading\">9. Conclusiones<\/h2>\n\n\n\n<ol class=\"wp-block-list\">\n<li><strong>Una oferta clara reduce la confusi\u00f3n.<\/strong> Separar botella, pack sugerido con vaso y personalizado sin vaso hizo que el precio fuera explicable.<\/li>\n\n\n\n<li><strong>Calcular bien no basta.<\/strong> El fallo m\u00e1s instructivo fue que el precio era correcto pero la interfaz conservaba un vaso o una modalidad anterior. La coherencia entre selecci\u00f3n, precio y resumen exige pruebas de transici\u00f3n, no solo de c\u00e1lculo.<\/li>\n\n\n\n<li><strong>La IA acelera, pero hay que comprobar.<\/strong> Todo lo generado se prob\u00f3 antes de aceptarse; detectamos fallos de marca, de sincronizaci\u00f3n y de honestidad visual (esquemas que parec\u00edan capturas).<\/li>\n\n\n\n<li><strong>Empaquetar una web como APK es viable<\/strong> cuando el prototipo no depende de un servidor, y el mayor obst\u00e1culo fue el entorno (versi\u00f3n de Java y Android SDK), no el c\u00f3digo.<\/li>\n\n\n\n<li><strong>Declarar los l\u00edmites suma.<\/strong> Distinguir lo simulado, lo probado y lo pendiente nos permiti\u00f3 no inventar usuarios, ventas ni m\u00e9tricas.<\/li>\n<\/ol>\n\n\n\n<h2 class=\"wp-block-heading\">Anexo A \u00b7 Prompts completos (Decisi\u00f3n 2)<\/h2>\n\n\n\n<p class=\"wp-block-paragraph\">Textos tal como se enviaron a Codex.<\/p>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prompt 1 \u00b7 inicial<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Necesito desarrollar una p\u00e1gina web para una cervecer\u00eda ficticia llamada Cervecer\u00eda Le Soacha. La p\u00e1gina debe presentar la empresa, mostrar sus productos y permitir que los usuarios consulten informaci\u00f3n y realicen una solicitud de compra simulada.\n\nQuiero un dise\u00f1o moderno, atractivo y relacionado con la tem\u00e1tica de la cerveza artesanal. Incluye una p\u00e1gina principal, una secci\u00f3n de productos, informaci\u00f3n de la empresa y un formulario de contacto.\n\nUtiliza una estructura sencilla, con HTML, CSS y JavaScript. Organiza el c\u00f3digo para que sea f\u00e1cil de modificar y aseg\u00farate de que la p\u00e1gina funcione correctamente en computador y dispositivos m\u00f3viles.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prompt 2 \u00b7 experimental<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Quiero mejorar el proyecto de Cervecer\u00eda Le Soacha. Ya existe una primera versi\u00f3n de la p\u00e1gina web, pero necesito que tenga una experiencia m\u00e1s completa y que el usuario pueda interactuar con los productos.\n\nLa empresa ofrece tres opciones:\n\n1. Golden Ale de Frutos Amarillos: cerveza clara, con notas de maracuy\u00e1 y mango, 4,8% de alcohol y precio de $9.500.\n2. Stout de Cacao y Caf\u00e9: cerveza oscura, con notas de cacao y caf\u00e9, 5,8% de alcohol y precio de $11.000.\n3. Pack Mixto Probadora: incluye tres Golden Ale, tres Stout y un vaso, por $72.000.\n\nAgrega un cat\u00e1logo visual con tarjetas para cada producto, mostrando su nombre, descripci\u00f3n, precio y caracter\u00edsticas. Tambi\u00e9n quiero que el usuario pueda consultar los productos, seleccionar una opci\u00f3n y avanzar hacia una solicitud simulada.\n\nExperimenta con una navegaci\u00f3n m\u00e1s intuitiva, botones interactivos, ventanas de detalle y una presentaci\u00f3n visual coherente con una cervecer\u00eda artesanal.\n\nRevisa la estructura existente antes de realizar cambios. No elimines funcionalidades que ya est\u00e9n funcionando. Mant\u00e9n el dise\u00f1o adaptable a diferentes tama\u00f1os de pantalla y utiliza JavaScript para las interacciones necesarias.\n\nSi encuentras problemas de organizaci\u00f3n o funcionamiento, prop\u00f3n soluciones y explica brevemente los cambios realizados.<\/code><\/pre>\n\n\n\n<p class=\"wp-block-paragraph\"><strong>Prompt 3 \u00b7 final<\/strong><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>Act\u00faa como un desarrollador full-stack y dise\u00f1ador UX\/UI con experiencia en la construcci\u00f3n de experiencias digitales para peque\u00f1as empresas.\n\nNecesito desarrollar y perfeccionar el proyecto Cervecer\u00eda Le Soacha, una cervecer\u00eda ficticia cuya propuesta comercial se basa en ofrecer dos estilos de cerveza y un paquete de degustaci\u00f3n.\n\nEl objetivo es construir una experiencia digital conectada, en la que el usuario pueda conocer la marca, explorar el cat\u00e1logo, consultar los productos, realizar una selecci\u00f3n y completar una solicitud de compra simulada.\n\nIMPORTANTE:\nAntes de modificar cualquier archivo, inspecciona la estructura completa del proyecto, identifica las tecnolog\u00edas utilizadas y comprende c\u00f3mo se relacionan sus componentes. Conserva las funcionalidades existentes que est\u00e9n correctamente implementadas. No reemplaces el proyecto completo ni introduzcas tecnolog\u00edas innecesarias.\n\n## 1. Identidad de marca\n\nNombre: Cervecer\u00eda Le Soacha.\n\nEslogan: \"Dos estilos. Tu mezcla.\"\n\nLa identidad visual debe transmitir una imagen artesanal, moderna y atractiva. Utiliza una combinaci\u00f3n de colores relacionados con la cerveza, como tonos \u00e1mbar, dorados, marrones y oscuros.\n\nEl dise\u00f1o debe mantener coherencia entre la p\u00e1gina web y el prototipo m\u00f3vil.\n\n## 2. Cat\u00e1logo de productos\n\nLa empresa cuenta con tres productos ficticios:\n\nPRODUCTO 1 \u2013 GOLDEN ALE DE FRUTOS AMARILLOS\n- Precio: $9.500 COP por botella.\n- Alcohol: 4,8% ABV.\n- Amargor: 20 IBU.\n- Descripci\u00f3n: cerveza clara, de perfil suave, con notas de maracuy\u00e1 y mango.\n- Ingredientes de referencia: agua, malta de cebada, l\u00fapulo, levadura, maracuy\u00e1 y mango.\n\nPRODUCTO 2 \u2013 STOUT DE CACAO Y CAF\u00c9\n- Precio: $11.000 COP por botella.\n- Alcohol: 5,8% ABV.\n- Amargor: 32 IBU.\n- Descripci\u00f3n: cerveza oscura, de cuerpo robusto, con notas de cacao y caf\u00e9.\n- Ingredientes de referencia: agua, malta tostada, l\u00fapulo, levadura, cacao y caf\u00e9.\n\nPRODUCTO 3 \u2013 PACK MIXTO \"PROBADORA\"\n- Precio: $72.000 COP.\n- Contenido: tres Golden Ale, tres Stout y un vaso.\n- Descripci\u00f3n: paquete dise\u00f1ado para probar ambos estilos.\n\nTodos los productos, precios y caracter\u00edsticas son simulados y deben presentarse como informaci\u00f3n ficticia del proyecto acad\u00e9mico.\n\n## 3. P\u00e1gina web\n\nLa p\u00e1gina debe contar con cuatro secciones principales:\n\n- Inicio: presentaci\u00f3n de la marca, eslogan e imagen principal.\n- Cat\u00e1logo: visualizaci\u00f3n de los tres productos.\n- Experiencia: explicaci\u00f3n de los estilos y gu\u00eda para ayudar al usuario a elegir.\n- Contacto o solicitud: formulario para realizar una solicitud simulada.\n\nEl cat\u00e1logo debe mostrar tarjetas visualmente diferenciadas, con im\u00e1genes, nombres, descripciones, precios y caracter\u00edsticas.\n\nCada producto debe permitir consultar m\u00e1s informaci\u00f3n mediante una vista de detalle o interacci\u00f3n equivalente.\n\n## 4. Selecci\u00f3n y solicitud de productos\n\nImplementa un flujo sencillo para que el usuario pueda seleccionar productos y realizar una solicitud simulada.\n\nEl sistema debe:\n- Permitir seleccionar el producto deseado.\n- Mostrar claramente la selecci\u00f3n realizada.\n- Validar los campos obligatorios del formulario.\n- Evitar el env\u00edo de formularios incompletos.\n- Mostrar un resumen de la solicitud antes de finalizar.\n- Presentar una confirmaci\u00f3n visual cuando el proceso termine.\n\nNo es necesario integrar pasarelas de pago ni realizar transacciones reales. La solicitud debe ser completamente simulada y funcionar dentro del proyecto.\n\n## 5. Prototipo m\u00f3vil\n\nDesarrolla o conserva un prototipo m\u00f3vil navegable que complemente la experiencia de la p\u00e1gina web.\n\nDebe incluir cinco pantallas principales:\n1. Pantalla de bienvenida o inicio.\n2. Cat\u00e1logo de productos.\n3. Detalle del producto.\n4. Selecci\u00f3n y revisi\u00f3n de la solicitud.\n5. Confirmaci\u00f3n o resultado del proceso.\n\nLa navegaci\u00f3n debe permitir completar el recorrido sin quedar atrapado en una pantalla. Incluye tambi\u00e9n un estado de error o vac\u00edo para representar situaciones en las que no existan productos seleccionados o falte informaci\u00f3n.\n\n## 6. Experiencia de usuario y dise\u00f1o\n\nAplica los siguientes criterios:\n\n- Dise\u00f1o responsive.\n- Navegaci\u00f3n intuitiva y consistente.\n- Jerarqu\u00eda visual clara.\n- Tipograf\u00eda legible.\n- Contraste adecuado.\n- Botones con estados visuales.\n- Mensajes de validaci\u00f3n comprensibles.\n- Im\u00e1genes relacionadas con cada estilo de cerveza.\n- Coherencia visual entre la versi\u00f3n web y m\u00f3vil.\n\nEvita sobrecargar las pantallas con informaci\u00f3n innecesaria.\n\n## 7. Aspectos t\u00e9cnicos\n\n- Respeta las tecnolog\u00edas y dependencias que ya utiliza el proyecto.\n- Mant\u00e9n el c\u00f3digo organizado y reutilizable.\n- Evita duplicar componentes o funcionalidades.\n- Implementa validaciones mediante JavaScript cuando corresponda.\n- Verifica que los botones, enlaces y formularios tengan un comportamiento funcional.\n- No agregues servicios externos ni integraciones que no sean necesarias.\n- No inventes conexiones con bases de datos, pagos o servicios que no est\u00e9n implementados.\n\n## 8. Pruebas y control de calidad\n\nAl finalizar, revisa el funcionamiento de los siguientes escenarios:\n\n1. Navegaci\u00f3n entre las secciones principales.\n2. Visualizaci\u00f3n correcta de los tres productos.\n3. Consulta de los detalles de cada producto.\n4. Selecci\u00f3n de un producto.\n5. Validaci\u00f3n de formularios incompletos.\n6. Generaci\u00f3n del resumen de solicitud.\n7. Confirmaci\u00f3n de una solicitud simulada.\n8. Visualizaci\u00f3n en diferentes tama\u00f1os de pantalla.\n9. Comportamiento de los estados vac\u00edos y de error.\n\nSi detectas errores, corr\u00edgelos sin afectar las funcionalidades existentes.\n\nNo afirmes que una prueba fue exitosa si no se ejecut\u00f3 realmente. Al finalizar, entrega un resumen de los archivos modificados, las funcionalidades implementadas, los problemas encontrados y las pruebas que efectivamente se realizaron.\n\n## 9. Restricciones y coherencia del proyecto\n\n- No presentar los productos como cervezas reales disponibles para la venta.\n- No inventar certificaciones, rese\u00f1as o beneficios para la salud.\n- Incluir las advertencias correspondientes:\n  \"El exceso de alcohol es perjudicial para la salud.\"\n  \"Proh\u00edbase el expendio de bebidas embriagantes a menores de edad.\"\n- Mantener el eslogan y los datos comerciales consistentes en todas las secciones.\n\nEl resultado debe ser una experiencia digital funcional, visualmente coherente y adecuada para una presentaci\u00f3n acad\u00e9mica de un proyecto de innovaci\u00f3n y uso de inteligencia artificial generativa.<\/code><\/pre>\n\n\n\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<p class=\"wp-block-paragraph\"><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Samuel Esteban Benjumea Beltran y Juan Esteban Oicata Tibata\u00b7 Universidad Central \u00b7 Trabajando con la IA generativa \u00b7 Periodo 2026-2 \u00b7 Docente: Mag\u00edster Ingeniero Carlos Pinz\u00f3n Proyecto acad\u00e9mico. Marca, productos, precios, ingredientes y pedidos son ficticios. Demostraci\u00f3n: no env\u00eda pedidos ni guarda datos. El exceso de alcohol es perjudicial paraSeguir Leyendo<\/p>\n","protected":false},"author":2140,"featured_media":0,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"colormag_page_container_layout":"default_layout","colormag_page_sidebar_layout":"default_layout","video_url":"","footnotes":""},"categories":[30],"tags":[],"class_list":["post-94238","post","type-post","status-publish","format-standard","hentry","category-niixer"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v28.8 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital &#8211; Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento<\/title>\n<meta name=\"description\" content=\"En Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/\" \/>\n<meta property=\"og:locale\" content=\"es_ES\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital &#8211; Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento\" \/>\n<meta property=\"og:description\" content=\"En Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital\" \/>\n<meta property=\"og:url\" content=\"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/\" \/>\n<meta property=\"og:site_name\" content=\"Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/niixer\/\" \/>\n<meta property=\"article:published_time\" content=\"2026-11-12T04:50:10+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2026-11-12T05:01:38+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1024x576.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1024\" \/>\n\t<meta property=\"og:image:height\" content=\"576\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"joicatat\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Escrito por\" \/>\n\t<meta name=\"twitter:data1\" content=\"joicatat\" \/>\n\t<meta name=\"twitter:label2\" content=\"Tiempo de lectura\" \/>\n\t<meta name=\"twitter:data2\" content=\"16 minutos\" \/>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital &#8211; Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento","description":"En Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/","og_locale":"es_ES","og_type":"article","og_title":"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital &#8211; Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento","og_description":"En Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital","og_url":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/","og_site_name":"Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento","article_publisher":"https:\/\/www.facebook.com\/niixer\/","article_published_time":"2026-11-12T04:50:10+00:00","article_modified_time":"2026-11-12T05:01:38+00:00","og_image":[{"width":1024,"height":576,"url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1024x576.png","type":"image\/png"}],"author":"joicatat","twitter_card":"summary_large_image","twitter_misc":{"Escrito por":"joicatat","Tiempo de lectura":"16 minutos"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#article","isPartOf":{"@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/"},"author":{"name":"joicatat","@id":"https:\/\/niixer.com\/#\/schema\/person\/0fb42e77e96ada89c3eadae3d8ca4f18"},"headline":"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital","datePublished":"2026-11-12T04:50:10+00:00","dateModified":"2026-11-12T05:01:38+00:00","mainEntityOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/"},"wordCount":2858,"publisher":{"@id":"https:\/\/niixer.com\/#organization"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1024x576.png","articleSection":["Niixer"],"inLanguage":"es"},{"@type":"WebPage","@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/","url":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/","name":"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital &#8211; Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento","isPartOf":{"@id":"https:\/\/niixer.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#primaryimage"},"image":{"@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#primaryimage"},"thumbnailUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image-1024x576.png","datePublished":"2026-11-12T04:50:10+00:00","dateModified":"2026-11-12T05:01:38+00:00","description":"En Niixer | Carros, tecnolog\u00eda, ciencia y entretenimiento encuentra los mejores contenidos del mundo de la tecnolog\u00eda | Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital","breadcrumb":{"@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#breadcrumb"},"inLanguage":"es","potentialAction":[{"@type":"ReadAction","target":["https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/"]}]},{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#primaryimage","url":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2026\/11\/image.png","width":1672,"height":941},{"@type":"BreadcrumbList","@id":"https:\/\/niixer.com\/index.php\/2026\/11\/11\/cerveceria-le-soacha-dos-estilos-una-experiencia-digital\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Portada","item":"https:\/\/niixer.com\/"},{"@type":"ListItem","position":2,"name":"Cervecer\u00eda Le Soacha: dos estilos, una experiencia digital"}]},{"@type":"WebSite","@id":"https:\/\/niixer.com\/#website","url":"https:\/\/niixer.com\/","name":"Portal de noticias de tecnolog\u00eda, ciencia, Android, iOS, Realidad Virtual, Aumentada y Mixta, Videojuegos, computadores, todo lo mas reciente en tecnolog\u00eda","description":"Carros, tecnolog\u00eda, ciencia y entretenimiento","publisher":{"@id":"https:\/\/niixer.com\/#organization"},"alternateName":"Niixer","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/niixer.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"es"},{"@type":"Organization","@id":"https:\/\/niixer.com\/#organization","name":"Niixer","alternateName":"Niixer.com","url":"https:\/\/niixer.com\/","logo":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/","url":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","contentUrl":"https:\/\/niixer.com\/wp-content\/uploads\/2022\/08\/logo-niixer-sin-fondo-1.png","width":140,"height":140,"caption":"Niixer"},"image":{"@id":"https:\/\/niixer.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/niixer\/","https:\/\/www.instagram.com\/niixer.tecnologia\/"]},{"@type":"Person","@id":"https:\/\/niixer.com\/#\/schema\/person\/0fb42e77e96ada89c3eadae3d8ca4f18","name":"joicatat","image":{"@type":"ImageObject","inLanguage":"es","@id":"https:\/\/secure.gravatar.com\/avatar\/822ba24095e21da77f3f2e4cb38b901936786e393fde9e6847ad1ad949127552?s=96&d=mm&r=g","url":"https:\/\/secure.gravatar.com\/avatar\/822ba24095e21da77f3f2e4cb38b901936786e393fde9e6847ad1ad949127552?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/822ba24095e21da77f3f2e4cb38b901936786e393fde9e6847ad1ad949127552?s=96&d=mm&r=g","caption":"joicatat"},"url":"https:\/\/niixer.com\/index.php\/author\/joicatat\/"}]}},"_links":{"self":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/94238","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/users\/2140"}],"replies":[{"embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/comments?post=94238"}],"version-history":[{"count":10,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/94238\/revisions"}],"predecessor-version":[{"id":94489,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/posts\/94238\/revisions\/94489"}],"wp:attachment":[{"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/media?parent=94238"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/categories?post=94238"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/niixer.com\/index.php\/wp-json\/wp\/v2\/tags?post=94238"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}