# Habilidades Digitales Sesion 8
**Source:** https://ja.cursos.frogamesformacion.com/pages/habilidades-digitales-sesion-8
**Language:** Japanese

---

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: 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: 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é toy estilo:** colores, sensación (moderno, cálido, profesional) y una referencia si la tienes.

4

**Ejemplos concretos, 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

- Elegí el tipo de web y sus secciones
- Generé una primera versión describiéndola
- Pedí al menos un ajuste concreto
- Guardé el enlace de la vista previa

```
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: [moder/ 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: 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), 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 humapiensa, 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éfoo dirección si prefieres mantenerlos privados.

3

**Ortografía y marcadores:** revisa que 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 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, es el camioficial.

🌱 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

- Reemplacé el texto genérico por el mío
- Subí y coloqué mi propia imagen
- Revisé el toy el estilo en toda la página
- Verifiqué enlaces, datos y ortografía

```
Sustituye el texto de la sección [Sobre mí / Proyectos]
por este, escrito con mi estilo [cerca/ 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 camimá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, 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, 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

- Publiqué mi web
- Tengo mi URL propia
- La revisé en el móvil
- La compartí con alguien

📎 **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**, 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

- Mi web está publicada con URL propia
- Los textos e imágenes son míos
- Incluye algo del resto del programa (voz/asistente/contenidos)
- La revisé entera antes de compartirla

📎 **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: 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 humapiensa, 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 humapiensa, 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! 🚀