Del prompt
al aire

La ruta de hoy

1. 0:00 Bienvenida · elige tu IA gratuita
2. 0:15 ¿Qué es un LLM? · la estructura del prompt
3. 0:40 Manos a la obra: crea tu página conversando
4. 1:25 Pausa breve ☕
5. 1:35 Tu carpeta local · ordenar el proyecto
6. 1:55 SEO: aparecer en Google y verse bien al compartir
7. 2:15 Publicar en Netlify · conectar tu dominio .cl
8. 2:40 Bonus: blog, NotebookLM, trabajar local · preguntas

¿Qué es un LLM?

LLM = Large Language Model (gran modelo de lenguaje). En el fondo, es un autocompletado gigante: leyó una parte enorme de internet y aprendió a predecir qué palabra viene después.

💡 «autocompletado gigante» no es un insulto: así funciona también el teclado de tu celular, pero entrenado con billones de palabras.

Elige tu IA

Todas estas son gratuitas y sirven para el taller. Elige una, crea tu cuenta y quédate con ella todo el día.

✋ Regla del taller: elige UNA y no cambies a mitad de camino — la conversación acumulada es tu mayor tesoro.

La estructura del prompt

Un buen prompt tiene cuatro partes. No es una fórmula mágica: es simplemente contarle bien las cosas.

Ejemplo: una tienda

Este prompt junta las cuatro partes. Cópialo, cámbialo por tu negocio y pégalo en tu IA.

CONTEXTO: Tengo una tienda llamada «La Yerbatera» en Valparaíso.
Vendo yerbas medicinales, tés e infusiones naturales. Mis clientas
son personas que buscan bienestar y productos locales.

TAREA: Créame una página web de una sola página con estas secciones:
navbar con el logo y menú, un hero con un título llamativo, un
catálogo de 6 productos con nombre, descripción corta y precio en
pesos chilenos, una sección «sobre nosotros», 3 testimonios de
clientas y un footer con botón de WhatsApp e Instagram.

FORMATO: Todo en UN solo archivo HTML, con el CSS y el JavaScript
incluidos dentro del mismo archivo. Textos en español de Chile.

ESTILO: Colores verdes y crema, tipografía elegante, botones grandes
y que se vea perfecto tanto en computador como en celular.

🔁 ¿No te gustó algo? No empieces de nuevo: dile «cámbiame el hero», «hazlo más colorido», «agrega otro producto». Es una conversación.

Diccionario web

Las partes de una página tienen nombre. Si los usas, la IA te entiende a la primera.

Navbar

La barra de navegación de arriba, con el logo y el menú.

Hero

La primera pantalla grande: título, frase y botón principal.

Slider / Carrusel

Fotos o tarjetas que pasan solas o con flechas.

Card (tarjeta)

Cajita con foto, título y texto. Ideal para productos.

CTA

«Llamado a la acción»: el botón que quieres que aprieten (comprar, escribir).

Testimonios

Opiniones de clientes. Dan confianza.

FAQ

Preguntas frecuentes con respuesta desplegable.

Footer

El pie de página: contacto, redes, dirección.

Responsive

Que se adapta y se ve bien en celular, tablet y computador.

Landing page

Página de una sola hoja pensada para convencer y convertir.

🗣 Ejemplo: «Agrégame un slider de fotos justo después del hero» — la IA sabe exactamente dónde ponerlo.

Tu proyecto, en tu computador

Lo que creaste vive en el chat. Ahora lo bajamos a tierra: una carpeta tuya, con tu archivo.

1. Crea una carpeta en tu Escritorio o Documentos. Nómbrala sin espacios ni tildes: mi-web
2. Pide el código: en tu IA, busca el botón de descargar o copiar el código. Si no aparece, dile: «dame el código completo del archivo para copiarlo».
3. Guárdalo como index.html dentro de tu carpeta. Ese nombre es sagrado: es la puerta de entrada de todo sitio web.
4. Ábrelo con doble clic → se abre en tu navegador. ¡Esa es tu página, viviendo en tu computador!

📝 Para pegar el código necesitas un editor de texto simple: Bloc de notas (Windows) o TextEdit en modo texto plano (Mac). Guardar → nombre: index.html

Ordena la casa: 3 archivos

Si tu IA te entregó todo en una sola hoja, la separamos. Un proyecto ordenado es más fácil de cambiar y de hacer crecer.

Sepárame este proyecto en tres archivos:
index.html, style.css y script.js.
Entrégame el contenido completo de cada
archivo y dime dónde va cada uno dentro
de mi carpeta.

✳ Dato: esta misma presentación está hecha exactamente así — index.html + style.css + script.js. Puro HTML, sin servidor.

SEO parte 1: verse bien al compartir

Cuando mandas tu link por WhatsApp o Instagram, debe aparecer una miniatura con imagen, título y descripción. Eso se logra con unas etiquetas invisibles llamadas Open Graph.

Agrégale a mi index.html todo el SEO básico:
un buen título, la meta descripción, las
etiquetas Open Graph para que al compartir
el link por WhatsApp aparezca una miniatura
con la imagen og-image.jpg (1200×630) que
pondré en mi carpeta, y un favicon.

SEO parte 2: aparecer en Google

Google necesita tres cosas para encontrarte y mostrarte: un mapa, un permiso y una verificación.

Genérame el sitemap.xml y el robots.txt para mi sitio
(la dirección es https://MI-SITIO.netlify.app) y dime
paso a paso cómo verificar mi sitio en Google Search
Console pegando la etiqueta de verificación en mi HTML.

🎯 Objetivo: dejar todo esto listo ANTES de subir el sitio, para publicar una sola vez y que quede completo.

Publica tu web: Netlify

Netlify publica sitios estáticos gratis y sin instalar nada: arrastras tu carpeta y ya estás en internet.

1. Crea tu cuenta gratis en netlify.com (puedes entrar con tu cuenta de Google).
2. Entra a app.netlify.com/drop y arrastra tu carpeta completa a la zona de carga.
3. En segundos tendrás una dirección tipo tu-sitio.netlify.app — ¡compártela al tiro!
4. Cámbiale el nombre en Site configuration → Change site name para que quede bonito.

🔁 ¿Hiciste cambios? Entra a tu sitio en Netlify → pestaña «Deploys» → arrastra la carpeta de nuevo. Así de simple se actualiza.

Tu dominio .cl

¿Ya tienes tu dominio en nic.cl? Conectarlo a Netlify son dos trámites: pedir las direcciones y anotarlas.

El blog: tu motor de SEO

Cada artículo que publicas son palabras nuevas que Google indexa. Más palabras indexadas = más puertas de entrada a tu negocio.

NotebookLM: tu asesor de negocio

notebooklm.google.com — gratis con tu cuenta de Google. Le subes hasta 50 fuentes (PDF, documentos, links, audios) y conversa solo sobre tus documentos.

Siguiente nivel: la IA en tu carpeta

Hasta ahora copiamos y pegamos. Estas herramientas gratuitas trabajan directo sobre tu carpeta: le pides cambios y edita los archivos por ti.

🖼 Tus fotos: guárdalas en la carpeta img/ y dile a la IA «usa la imagen img/local.jpg en el hero».