En este nivel construyes una campaña WebAR básica para una marca: QR, imagen target, archivo .mind, escena MindAR, mensaje aumentado y botón de WhatsApp.
Marketing básico
Fundamentos para crear una experiencia WebAR de marketing
Antes de crear una campaña para una marca, necesitas entender qué piezas participan. Una experiencia WebAR no es solamente código: combina una pieza física, una URL, cámara, reconocimiento de imagen, contenido aumentado y una acción comercial.
Conceptos base
Realidad aumentada: agrega contenido digital encima del mundo real visto por la cámara.
WebAR: realidad aumentada desde el navegador, sin instalar una app.
MindAR: librería que reconoce imágenes target y permite anclar contenido encima de ellas.
A-Frame: framework HTML para crear escenas 3D y WebAR de forma más sencilla.
JavaScript: lenguaje que permite reaccionar a eventos como targetFound y targetLost.
CTA: botón o acción final, por ejemplo escribir por WhatsApp o ver una oferta.
Lo que construye el estudiante
Una persona escanea un QR, entra a una página, acepta la cámara, apunta al poster o empaque, MindAR reconoce la imagen y aparece contenido de la campaña con un botón comercial.
Mapa completo de la experienciaFlujo
1. Crear la pieza fisica: poster, empaque o flyer
2. Crear el QR que abre la URL del proyecto
3. Compilar la imagen target en un archivo .mind
4. Crear index.html con A-Frame y MindAR
5. Crear styles.css para la interfaz de marca
6. Crear app.js para eventos e interactividad
7. Publicar en HTTPS y probar desde celular
Explicación del flujo
Las líneas 1 y 2 conectan el mundo físico con la web. La línea 3 prepara el reconocimiento visual. Las líneas 4, 5 y 6 crean la experiencia. La línea 7 es indispensable porque la cámara móvil necesita HTTPS en producción.
Marketing básico
Instalar Visual Studio Code y trabajar con servidor local
Para programar el proyecto usaremos Visual Studio Code. También usaremos Live Server para abrir el HTML desde una URL local parecida a un sitio real.
Instalar VS Code
Entra a https://code.visualstudio.com/.
Descarga la versión para Windows, macOS o Linux.
Instala con las opciones por defecto.
En Windows, si aparece la opción, activa abrir carpetas con clic derecho.
Abre VS Code y crea una ventana nueva.
Instalar Live Server
Abre la sección de extensiones en VS Code.
Busca Live Server.
Instala la extensión de Ritwick Dey.
Haz clic derecho sobre index.html y elige Open with Live Server.
Por qué no abrir con doble clicImportante
file:///C:/mi-proyecto/index.html -> puede bloquear archivos y camara
http://127.0.0.1:5500/index.html -> mejor para pruebas locales
https://tudominio.com/campania/ -> necesario para publicar y usar camara movil
Explicación
Cuando abres un HTML con doble clic, el navegador usa file://. Ese modo suele causar problemas con scripts, modelos, cámara y archivos externos. Live Server usa http://127.0.0.1, que se parece más a un sitio real y permite probar mejor durante el desarrollo.
Marketing básico
Crear tus primeros archivos HTML, CSS y JavaScript
La experiencia se divide en tres responsabilidades: HTML para estructura, CSS para diseño y JavaScript para comportamiento.
Qué hace cada archivo
index.html: contiene la escena WebAR y los elementos visibles.
styles.css: controla colores, tamaños, posiciones y botones.
app.js: escucha eventos y cambia la interfaz cuando se detecta el marcador.
Usa una URL parecida a esta cuando el proyecto ya esté publicado:
https://tudominio.com/campania-cafe/
No generes un QR con file:/// ni con rutas de tu computador, porque otras personas no podrán abrirlo.
URLs para QRCorrecto / incorrecto
Correcto: https://tudominio.com/campania-cafe/
Temporal: http://127.0.0.1:5500/ -> solo funciona en tu computador
Incorrecto: file:///C:/Users/TuNombre/campania/index.html
Consejo de marketing
Acompaña el QR con una instrucción clara, por ejemplo: "Escanea y apunta al poster para ver la experiencia". Si el usuario no entiende qué hacer después de escanear, la campaña pierde interacción.
Marketing básico
Qué vamos a crear en este nivel
Vamos a crear una campaña WebAR sencilla para un poster, empaque o flyer. El usuario escanea un QR, abre una página web, apunta la cámara a la imagen de campaña y ve un mensaje aumentado con un botón para escribir por WhatsApp.
Resultado del proyecto
Una carpeta de proyecto lista para publicar.
Un marcador visual compilado en formato .mind.
Una escena WebAR con MindAR y A-Frame.
Una interfaz de campaña con estado y llamada a la acción.
Un checklist para probar antes de imprimir el QR.
Escenario de práctica
Imagina una marca de café que quiere que las personas escaneen un poster en una cafetería. Al detectar la imagen del poster, aparece el mensaje "Cafe premium detectado" y un botón para pedir información por WhatsApp.
Brief inicialDocumento de campaña
Marca: Cafe Aurora
Soporte fisico: poster o empaque
Entrada del usuario: QR impreso
Target: imagen principal del poster
Contenido aumentado: panel de oferta
CTA: hablar por WhatsApp
Por qué empezamos con estrategia
En marketing no basta con que el tracking funcione. La experiencia debe responder una pregunta comercial: que quiero que haga la persona despues de escanear. Por eso definimos primero soporte fisico, mensaje y CTA.
Marketing básico
Conceptos clave antes de escribir código
Estos conceptos te ayudan a pensar una campaña WebAR como una pieza de comunicación, no solamente como una prueba técnica.
Definiciones esenciales
WebAR: realidad aumentada que corre desde el navegador, sin instalar una app nativa.
QR: puerta de entrada. Lleva a la URL publicada de la experiencia.
Target: imagen que MindAR reconoce para anclar contenido aumentado.
.mind: archivo compilado que contiene los datos de tracking de uno o varios targets.
CTA: llamada a la acción, por ejemplo comprar, escribir, registrarse o ver catálogo.
KPI: métrica para evaluar la campaña, como escaneos, clics o leads.
Decisión importante
El QR y el target no son lo mismo. El QR abre la web. El target es la imagen que la cámara reconoce dentro de la experiencia. Puedes poner ambos en el mismo poster, pero cumplen funciones diferentes.
Flujo de usuarioMapa
1. Usuario ve el poster
2. Usuario escanea el QR
3. El navegador abre la experiencia HTTPS
4. Usuario acepta permiso de camara
5. Usuario apunta al target
6. MindAR muestra contenido aumentado
7. Usuario toca el CTA
Explicación del flujo
Las líneas 1 y 2 pertenecen al mundo físico: poster, empaque, stand o catálogo.
Las líneas 3 y 4 son críticas porque la cámara móvil necesita HTTPS.
Las líneas 5 y 6 son la parte WebAR: reconocimiento de imagen y contenido anclado.
La línea 7 conecta la experiencia con un objetivo de marketing.
Marketing básico
Crear la estructura del proyecto
Antes de programar, organiza los archivos. Esto evita perder modelos, targets, imagenes o scripts cuando el proyecto crece.
Archivos que crearemos
index.html para la estructura principal.
styles.css para la interfaz de marca.
app.js para eventos de tracking y CTA.
targets/poster.mind para el marcador compilado.
assets/poster.jpg como imagen de referencia para imprimir o probar.
targets/poster.mind es leído por MindAR para saber qué imagen debe detectar.
styles.css no afecta el tracking, pero hace que la campaña se sienta profesional.
app.js permite reaccionar cuando el target aparece o desaparece.
Marketing básico
Elegir imagen, compilar target y generar .mind
La estabilidad de una campaña WebAR empieza en la imagen. Un target con textura, contraste y detalles funciona mejor que una imagen plana o repetitiva.
Buen target para marketing
Debe tener detalles reconocibles: texto, bordes, producto, ilustraciones o textura.
Evita fondos lisos, logos muy simples o patrones repetidos.
No uses solo un QR como target. El QR sirve para abrir la URL, pero no suele ser el mejor marcador visual.
Actividad
Carga la imagen del poster o empaque.
Analiza su calidad.
Compila el archivo .mind.
Guárdalo como targets/poster.mind.
Herramienta integrada
Compilador de targets MindAR
Usa esta herramienta para generar el archivo .mind de tu campaña sin salir del curso.
Selecciona una imagen para comenzar.
No hay imágenes seleccionadas.
Prueba de cámara
Escanea tu imagen objetivo
Cuando MindAR reconozca el target, verás un panel azul sobre la imagen.
Ruta que usaremos en el códigoMindAR
targets/poster.mind
Explicación
Cuando más adelante escribamos imageTargetSrc: targets/poster.mind, MindAR buscará exactamente ese archivo. Si el nombre o carpeta no coincide, la cámara puede abrir, pero el target nunca será reconocido.
Marketing básico
Crear el HTML de la experiencia WebAR
Ahora creamos la página que abrirá el QR. Este primer bloque importa A-Frame, MindAR, tu CSS, tu JavaScript y define la escena de realidad aumentada.
Líneas 1 a 3: hacen que el tamaño de cajas sea más predecible.
Líneas 11 a 22: fijan el panel sobre la cámara en la parte inferior.
z-index: 10 hace que la UI quede encima de la escena WebAR.
rgba(255,255,255,0.92) permite ver una tarjeta clara sin perder totalmente el contexto de cámara.
Líneas 36 a 44: convierten el enlace en un botón táctil para móvil.
Buenas prácticas de marketing
En punto de venta la persona decide rápido. El texto debe ser corto, el botón evidente y el diseño debe mantener contraste incluso con fondos de cámara cambiantes.
Marketing básico
Agregar JavaScript para detectar targetFound y targetLost
El JavaScript nos permite cambiar el estado de la campaña cuando MindAR reconoce o pierde la imagen target.
app.js acumuladoJavaScript
const target = document.querySelector("#target-poster");
const statusText = document.querySelector("#status");
const cta = document.querySelector("#cta");
target.addEventListener("targetFound", () => {
statusText.textContent = "Poster detectado: oferta activa";
cta.textContent = "Quiero la oferta por WhatsApp";
console.log("target_found");
});
target.addEventListener("targetLost", () => {
statusText.textContent = "Apunta la cámara al poster";
cta.textContent = "Hablar por WhatsApp";
console.log("target_lost");
});
Explicación línea por línea
Línea 1: selecciona la entidad que tiene mindar-image-target.
Línea 2: selecciona el texto de estado visible para el usuario.
Línea 3: selecciona el botón de WhatsApp para cambiar su mensaje.
Línea 5: escucha el evento targetFound, que ocurre cuando MindAR reconoce el poster.
Líneas 6 y 7: actualizan la interfaz para indicar que la oferta está activa.
Línea 8: deja una marca en consola. En niveles avanzados esto se convertirá en analítica.
Línea 11: escucha targetLost, cuando la imagen sale de cámara o pierde tracking.
Prueba
Abre el proyecto con Live Server o en un hosting HTTPS. Cuando muestres el poster, el texto debe cambiar a "Poster detectado". Cuando lo retires, debe volver al estado de búsqueda.
Marketing básico
Código completo y entrega del proyecto básico
Al final de este nivel debes tener una campaña WebAR básica funcional. Estos son los tres archivos completos que forman el proyecto.