Sesión 8 · Tu Primera Web/Portafolio con IA
Habilidades Prácticas con IA · Parte 2 · Sesión 8 de 8

Tu Web / Portafolio
con IA

Hoy cerramos las ocho sesiones del programa: describes tu web en lenguaje natural, la IA la construye, tú la personalizas con lo que ya creaste — y la publicas con una URL propia para compartir con el mundo.

⏱️ 2 horas 🎯 Metodología 30 / 70 🏁 Cierre del programa
🧱 v0 / Lovable 🎨 Framer AI 📄 GitHub Pages

Trabajamos con las capas gratuitas de v0, Lovable o Framer AI para generar, y con hosting gratis (GitHub Pages u otro) para publicar. No hace falta tarjeta ni saber programar.

Qué haremos hoy

Agenda de la sesión

💬

1 · De la idea a la web

Eliges el enfoque y generas el sitio describiéndolo en lenguaje natural.

≈ 30 min

🎨

2 · Personaliza

Textos e imágenes propios, reutilizando lo creado en toda la Parte 1.

≈ 40 min

🚀

3 · Publica y comparte

Publicación gratuita con una URL propia, lista para compartir.

≈ 40 min

🎁
Tu entregable de hoy (y del programa completo)

Una web o portafolio propio, publicado y con URL, donde reúnes tu voz, tu asistente y los contenidos de las 8 sesiones. El cierre tangible de todo el programa.

Antes de cerrar, mira lo recorrido

Todo lo que ya construiste en la Parte 2

🎙️

Sesión 5 · Tu voz

Texto a voz y clonación responsable: convertiste cualquier texto en audio con tu propio timbre.

🤖

Sesión 6 · Tu asistente

Configuraste un asistente propio, con tu conocimiento y tu personalidad.

⚙️

Sesión 7 · Automatización

Cowork con Claude y tu primera automatización de una tarea repetitiva.

🌐

Sesión 8 · Tu web

Hoy: la pieza que reúne todo lo anterior y le pone una dirección propia.

🏁 El cierre de hoy: no es una herramienta más — es el lugar donde vive todo lo que ya construiste: tu voz, tu asistente y tus contenidos, en un solo sitio.
El mapa de hoy

¿Quién hace qué?

🧱 v0 (Vercel)

Genera el sitio desde un chat y te deja ver el código si quieres tocarlo. Buena opción si luego quieres publicar en GitHub Pages.

💡 Lovable

Describe tu web en lenguaje natural y la publica con un clic en su propia URL gratuita, sin pasos técnicos.

🎨 Framer AI

Muy visual: genera un sitio tipo portafolio/landing y lo edita como un lienzo, arrastrando elementos.

📄 GitHub Pages

Hosting gratuito para publicar el código de tu web con una URL propia (tu-usuario.github.io).

⭐ Recomendación por defecto: si es tu primera vez, empieza por Lovable o Framer AI — generan la web y te dan una URL en un clic. v0 es una alternativa potente si además quieres ver y tocar el código antes de publicarlo en GitHub Pages.
Tema 1 de 3

De la idea a una web publicada

Sin escribir una sola línea de código: describes en lenguaje natural lo que quieres y la IA construye el sitio por ti.

La base de todo

Genera un sitio describiéndolo, sin código

💬

Escribes qué quieres

Quién eres, qué quieres mostrar y a quién va dirigido — en un chat, como con ChatGPT.

🏗️

La IA arma la estructura

Propone secciones (Inicio, Sobre mí, Proyectos, Contacto) y un menú de navegación.

🎨

Aplica un diseño coherente

Colores, tipografía y espacios ya combinados, sin que tengas que elegir nada de diseño.

🔁

Iteras pidiendo cambios

"Cambia el color", "añade una sección" — la web se actualiza en segundos.

🎯 La idea: no necesitas saber de diseño ni de código. La IA propone una primera versión completa; tú afinas con instrucciones simples.
Elige el enfoque antes de generar

¿Qué tipo de web tiene sentido para ti?

🎓

Estudiante

Un portafolio con tus proyectos del programa, un CV corto y tus intereses.

🧑‍🏫

Docente

Una página de recursos para tu alumnado, o un portafolio profesional docente.

💼

Administrativo / profesional

Una página "sobre mí" con tus servicios o proyectos, tipo tarjeta de presentación digital.

❤️

Algo tuyo

Un hobby, una causa o un proyecto personal que te importe de verdad.

💡 No hay una única forma correcta: elige el enfoque que mejor muestre lo que has aprendido y lo que quieres compartir.
4 cosas que conviene contar

Cómo describir bien tu web para que la IA acierte

1
Qué eres y qué ofreces: 1-2 frases claras, sin rodeos ("soy estudiante de X y quiero mostrar Y").
2
Qué secciones necesitas: Inicio, Sobre mí, Proyectos, Contacto — pídelas explícitamente.
3
Qué tono y estilo: colores, sensación (moderno, cálido, profesional) y una referencia si la tienes.
4
Ejemplos concretos, no genéricos: "azul y blanco, minimalista, como un portafolio de diseñador" en vez de "que se vea bien".
⭐ Cuanto más concreto, mejor: la misma regla del prompting de la Sesión 1 aplica aquí — contexto, tarea y formato claros.
El enfoque más simple, primero

Una sola página o varias secciones

📄

Una sola página (one-pager)

Todo el contenido en una página con scroll y accesos rápidos (Inicio, Sobre mí, Proyectos, Contacto). Se comparte con un único enlace.

🗂️

Varias páginas

Secciones separadas, cada una con su propio enlace. Útil si tienes mucho contenido o quieres una página por tema.

💡 Para hoy: empieza por una sola página. Es más rápida de generar, revisar y publicar — siempre puedes ampliarla más adelante.
Demostración · sigue los pasos

Demo: genera tu primera versión de la web

Describes en lenguaje natural → la IA genera el sitio → pides un ajuste. Avanza paso a paso.

💡 Lovable
Tú
Paso 1 · Describe tu web
"Quiero un portafolio de una página para mostrar mis proyectos de este curso: quién soy, qué he creado y cómo contactarme. Estilo simple y moderno, colores azules."
AI
Primera versión generada
🌐 Un sitio con Inicio, Sobre mí, Proyectos y Contacto, con paleta azul y diseño limpio, listo para ver en vista previa.
Tú
Paso 2 · Pide un ajuste
"Cambia el color principal a verde y añade una sección de Habilidades entre Sobre mí y Proyectos."
AI
Cambios aplicados
🎨 Paleta actualizada a verde y nueva sección "Habilidades" añadida al sitio, sin perder el resto del diseño.
AI
Vista previa lista
👀 El sitio está listo para revisar y personalizar con tu propio contenido.
🔁 No busques la perfección a la primera: genera una versión base y ajusta con instrucciones concretas, una a una.
Práctica guiada · 15 min · 70%

🛠️ Ejercicio 1: genera la primera versión de tu web

手順

1
Elige tu enfoque: qué tipo de web y qué secciones necesitas.
2
Abre v0, Lovable o Framer AI y describe tu web en un mensaje.
3
Revisa la primera versión y pide un ajuste concreto.
4
Guarda el enlace de la vista previa para seguir trabajando después.

Tu checklist

Genera una web de una sola página para mí: soy [tu perfil]
y quiero mostrar [qué quieres mostrar].
Incluye las secciones: Inicio, Sobre mí, [Proyectos/Servicios] y Contacto.
Estilo: [moderno / cálido / profesional], colores [tus colores].
📎 Recurso: recursos/prompts.md · recursos/guia-web-portafolio.md
Tema 2 de 3

Hazla tuya

Tu web tiene la estructura; ahora le pones tu voz, tus palabras y tus imágenes — todo lo que ya creaste en el programa.

No empieces de cero

Reutiliza lo que ya construiste

📄

Tu documento (S2)

Usa fragmentos como texto de "Sobre mí" o la descripción de un proyecto.

🖼️

Tu imagen (S3)

Tu avatar, foto o pieza visual, como imagen de cabecera o de un proyecto.

🎬

Tu vídeo (S4)

Embébelo o enlázalo como pieza destacada dentro de tu web.

🎙️

Tu audio (S5)

Un audio de bienvenida narrado con tu propia voz, en la página de inicio.

🔗 La idea de hoy: no generas contenido nuevo desde cero — montas lo que ya tienes en un solo lugar coherente.
Lo que marca la diferencia

Buena vs mala personalización

✅ Bien
  • Texto escrito con tu voz (Sesión 2), no la plantilla genérica
  • Imágenes coherentes con tu marca personal
  • Cada sección cuenta algo real y verificado sobre ti
⛔ Mal
🚫 Dejar el texto genérico que puso la IA por defecto
🚫 Imágenes de stock aleatorias, sin relación contigo
🚫 Mezclar estilos y colores sin criterio entre secciones
🌱 La regla de siempre: el humano piensa, la máquina ayuda. La IA genera la base; tú decides qué dice de verdad tu web.
El repaso de 5 minutos que evita sustos

Verifica todo antes de publicar

1
Enlaces: que el correo, redes y proyectos funcionen de verdad.
2
Datos que compartes: cuidado con teléfono o dirección si prefieres mantenerlos privados.
3
Ortografía y marcadores: revisa que no queden textos tipo "[tu nombre aquí]" sin rellenar.
4
Vista en el móvil: la mayoría de quien visite tu web entrará desde el teléfono.
🛡️ Regla de oro: lo que publicas es público. Un último repaso evita compartir algo que no querías mostrar.
Seguridad digital · como en la Sesión 5

Publica seguro

Una web pública también es una puerta para que alguien intente suplantarte o estafarte a ti. Dos cosas a vigilar:

🕵️

No des pistas de más

Con tu voz (Sesión 5), tu cara y tu forma de hablar ya públicas, evita sumar tu dirección, tu horario o datos que faciliten suplantarte.

💸

Desconfía de "publicación premium"

Publicar en las herramientas de hoy es gratis. Si algo te pide pagar o dar tus claves para "activar" tu web, no es el camino oficial.

🌱 Regla de oro: publica con orgullo lo que creaste — y con el mismo criterio con el que protegiste tu voz en la Sesión 5.
Demostración · sigue los pasos

Demo: personaliza textos e imágenes

De la web genérica a una web que suena y se ve a ti. Avanza paso a paso.

💡 Lovable
Tú
Paso 1 · Reemplaza el texto genérico
"Sustituye el texto de 'Sobre mí' por este, escrito con mi estilo: [pego un párrafo de mi documento de la Sesión 2]."
AI
Texto actualizado
✍️ La sección "Sobre mí" ahora usa tu propio texto, manteniendo el diseño de la página.
Tú
Paso 2 · Sube tu imagen
Subo mi imagen de la Sesión 3 y pido: "Usa esta imagen como cabecera de la sección Proyectos."
AI
Imagen aplicada
🖼️ Imagen colocada en la cabecera, con el texto reajustado alrededor.
Tú
Paso 3 · Revisa el conjunto
Reviso toda la página: ¿mismo tono?, ¿mismo estilo visual en todas las secciones?
🎯 La clave: cada cambio se pide con una instrucción concreta, igual que en el resto del programa.
Práctica guiada · 20 min · 70%

🛠️ Ejercicio 2: personaliza tu web con tu material

手順

1
Reúne un fragmento de tu documento (S2) y una imagen (S3).
2
Pide reemplazar el texto genérico por el tuyo, con tu voz.
3
Sube tu imagen y colócala donde tenga sentido.
4
Revisa el conjunto: enlaces, datos y ortografía (checklist 12b).

Tu checklist

Sustituye el texto de la sección [Sobre mí / Proyectos]
por este, escrito con mi estilo [cercano / profesional]:
[pega tu texto]
Usa esta imagen como [cabecera / foto de perfil].
📎 Recurso: recursos/prompts.md · recursos/ejercicio-guiado.md
Tema 3 de 3 · el broche

De tu pantalla al mundo

Tu web ya es tuya. El último paso: publicarla gratis y conseguir una URL propia para compartirla con quien quieras.

Sin jerga técnica

Publica gratis, en unos minutos

1
Busca el botón "Publish" / "Deploy" en tu herramienta (Lovable y Framer AI publican con un clic).
2
Si usas GitHub Pages: crea una cuenta gratuita en GitHub (solo la primera vez).
3
Sube los archivos de tu web a un repositorio y activa "Pages" en su configuración.
4
En minutos tienes una URL propia (tu-usuario.github.io o la de tu herramienta).
💡 El camino más corto: si usas Lovable o Framer AI, el botón "Publish" ya te da una URL sin pasar por GitHub. Úsalo si quieres ir más rápido.
Para más adelante, no para hoy

¿Y un dominio propio?

🔗

URL gratuita de hoy

La que te da GitHub Pages, Lovable o Framer AI. Suficiente para compartir tu portafolio ya mismo.

🌐

Dominio propio (opcional)

ア tunombre.com se compra aparte y se conecta a tu web en unos minutos, cuando lo necesites.

👉 Para hoy: quédate con la URL gratuita. Un dominio propio es un paso opcional para el día que quieras darle un aire más profesional.
De nada sirve publicada si nadie la ve

Comparte tu URL

💼

LinkedIn / CV

Añádela a tu perfil o a tu currículum como "portafolio" o "sitio web".

💬

WhatsApp / redes

Compártela directamente con compañeros, familia o en tus redes.

✉️

Firma de correo

Añade el enlace a tu firma de email para que cualquiera pueda verla.

🎯 El objetivo: que tu web viva en el mundo real, no solo en tu navegador. Compártela con al menos una persona hoy mismo.
Práctica guiada · 15 min · 70%

🛠️ Ejercicio 3: publica tu web y consigue tu URL

手順

1
Pulsa "Publish" en tu herramienta, o sube tu web a GitHub Pages.
2
Abre tu URL en una pestaña nueva y compruébala.
3
Revísala también desde tu móvil.
4
Comparte el enlace con alguien del grupo.

Tu checklist

📎 Recurso: pasos detallados en recursos/guia-web-portafolio.md
Tu entregable final · el cierre de las 8 sesiones

🎁 Tu web / portafolio, el cierre del programa

Qué debe incluir

  • Una web publicada, con una URL propia y funcionando
  • Textos e imágenes tuyos, no la plantilla genérica
  • Al menos una pieza de tu voz, tu asistente o tus contenidos del programa
  • Revisada: enlaces, datos, ortografía y vista en móvil

Checklist de entrega

📎 Recurso: recursos/ejercicio-guiado.md
Comprueba lo aprendido · 2 preguntas
1️⃣ Para generar tu primera versión de la web con herramientas como v0, Lovable o Framer AI necesitas sobre todo…
✅ ¡Exacto! Con una descripción clara en lenguaje natural la IA genera la primera versión completa.
🤔 Lo esencial es describir bien qué quieres: no hace falta saber código ni contratar a nadie.
2️⃣ Al publicar tu web con GitHub Pages (o el "Publish" de tu herramienta), obtienes…
✅ ¡Eso es! Publicar te da una URL propia y gratuita, accesible para quien quieras compartirla.
🤔 Publicar significa conseguir una URL propia y gratuita, lista para compartir con cualquiera.
🏁 Has completado el programa completo

Lo que te llevas de las 8 sesiones

🧠

Piensas con criterio (S1)

Sabes cómo "piensa" la IA, le hablas con R·C·T·F y verificas lo importante.

✍️

Creas contenido con tu voz (S2-4)

Documentos, presentaciones, imágenes y vídeo — sin sonar genérico.

⚙️

Construyes tu ecosistema (S5-7)

Tu voz digital, tu asistente propio y tu primera automatización.

🌐

Lo publicas todo (S8)

Hoy: tu web reúne todo lo anterior y le pone una URL propia al mundo.

El hilo que conecta las 8 sesiones: el humano piensa, la máquina ayuda.
El programa acaba, tu práctica no

Cómo seguir mejorando

🔁

Actualiza tu web

Añade tu próximo proyecto o contenido cada vez que crees algo nuevo.

⚙️

Guarda tu estilo

Configura tus instrucciones personalizadas en las herramientas que uses a diario.

🤖

Sigue usando tu ecosistema

Tu voz (S5), tu asistente (S6) y tus automatizaciones (S7) siguen ahí para usarlos.

📚

Crea tu colección

Guarda tus mejores prompts (los prompts.md del programa son un buen inicio).

🤝

Comparte tu web

Pide feedback a alguien y sigue mejorándola con lo que aprendas.

🧪

Experimenta

Prueba herramientas nuevas con calma: el flujo que aprendiste se traslada a todas.

Fin del programa · Sesión 8 de 8

De consumir IA a producir con ella

Llegaste hasta el final: tienes tu voz digital, un asistente propio, una primera automatización y una web publicada. Un pequeño ecosistema personal de IA, listo para seguir creciendo.

🌱 El mantra de las ocho sesiones: el humano piensa, la máquina ayuda. Tus ideas, tu criterio y tu voz están en cada pieza que creaste. Gracias por completar el programa — ¡a seguir creando! 🚀