Tu web personal con IA
Primera fase del proyecto: una landing de marca personal. La construyes directamente desde el chat con los modelos del centro, gestionando tú los ficheros. Sin API todavía: tú diriges, la IA ejecuta. Esta fase puede ocupar más de una clase —la próxima seguimos mejorando la web—: avanzamos a vuestro ritmo.
mi-web en tu cuenta. Ahí irán los tres ficheros. Todo lo que te responda la IA lo tú copias, pegas, guardas y pruebas en el navegador. Si sale raro, no es culpa de la IA: vuelve a pedirlo mejor. Eso también es programar.¿Qué vamos a montar?
Una web real = una carpeta con ficheros. Lo mínimo:
mi-web/ ├── index.html ← la estructura (qué hay) ├── style.css ← el estilo (cómo se ve) └── script.js ← la interacción (qué hace)
Una web compleja, además, base de datos. Eso llegará con el proyecto final en grupo. Hoy dominan el trío: estructura, estilo, comportamiento.
1Pensar antes de pedir
La IA no sabe quién eres. Rellena esta ficha en un notas.txt dentro de mi-web (la usarás en el paso 2):
- Nombre y apellidos + una frase que diga quién eres
- 3-5 «cosas que he hecho» (curso, hobby, proyecto, viaje, deporte)
- 3 cosas que me gustan (música, series, videojuegos, tecnología…)
- Qué quiero ser / qué me interesa de la programación
- 3 colores o estilo que te va (minimalista, gamer, retro, oscuro…)
2El HTML: pedirlo con condiciones
Copia este prompt, pégalo en el chat del centro y complétalo con tu ficha (eso es lo que lo convierte en tu web, no en la de nadie):
Quiero crear mi web personal de marca con HTML, CSS y JS puros. Voy a gestionar yo los ficheros, así que dame el código completo de cada fichero en un bloque, sin explicaciones largas. Ficha: soy ___, del ciclo de 1º DAM del IES Simarro. Cosas que he hecho: ___ Me gusta: ___ Quiero ser / me interesa: ___ Colores/estilo: ___ Haz el index.html con: cabecera (nombre + frase), "Sobre mí", "Lo que he hecho", "Me gusta", un pie de página con contacto. HTML semántico, etiquetas comentadas.
3Compruébala antes de seguir
Abre el index.html en el navegador. ¿Están los bloques en orden? ¿Se ve tu nombre? ¿Y al achicar la ventana (modo móvil)? Si algo no cuadra, se lo describes a la IA y pides el arreglo concreto.
En mi web falta / se ve mal: ___ (describe lo que ves, no lo que crees). Dame el HTML corregido de ese bloque y por qué pasaba.
4CSS: que se vea tuyo
Genera el style.css para mi web personal. - Paleta basada en los colores que te dije: ___ - Cabecera con fondo de color, texto legible, tipografía limpia - Contenido centrado, ancho máx 900px, espaciado generoso - Cuadrícula de 2 columnas para "Me gusta", adaptada a móvil (1 columna) - Estilo de enlaces y botones coherente con la marca Sin frameworks. Solo CSS puro, comentado.
Prueba a cambiar un color o una medida tú directamente: lo que editas a mano lo entiendes doble.
5JS: interactividad a elegir
Pide una (luego otra si te sobra tiempo). Elige tú, no la IA:
- Modo oscuro con botón (guardando la preferencia en
localStorage) - Efecto máquina de escribir en tu frase de presentación
- Menú responsive (hamburguesa en móvil)
- Contador de «cosas que he hecho» que se despliega al hacer clic
- Fondo de partículas sutil
Añade a mi web personal (tengo index.html y style.css, te pego el HTML): [pega aquí tu index.html] Quiero ___ (ej: un botón de modo oscuro que recuerde la elección con localStorage). Dame el script.js completo y las líneas exactas que debo añadir al HTML y al CSS, indicando dónde van. Comenta el código.
6Iterar: la parte que te hace programador
Tu web ya funciona. Ahora la mejoras con 3 iteraciones cortas (peticiones concretas, no «arregla todo»):
Iteración: en la sección "Sobre mí", añade una foto con estilo ___ y que la frase de cabecera use un degradado de mis colores. No cambies nada más.
Iteración: en el móvil el menú se apila mal: ___(describe lo que ves). Dame solo el CSS que lo arregla y por qué pasaba.
7Entrega
Sube la carpeta mi-web al sitio que indique el profe. En la sesión 2 aprenderás a tenerla además en GitHub, tu copia de seguridad del curso. Checklist:
- ☐ Se abre y se ve bien en escritorio y en móvil
- ☐ Tiene mis datos reales (nombre, hechos, gustos)
- ☐ He editado al menos una cosa a mano y lo sé explicar
- ☐ Al menos una interacción JS funciona
- ☐ Sé contar qué bloques tiene mi web y cómo cambiarlos
Kit de rescate
«No sé cómo pedir lo que quiero»
Prompt: «Quiero que mi web se parezca a ___ (describe sensaciones: sobria, colorida, tipo portfolio…). Pregúntame 5 cosas una por una y luego diséñame el estilo.» — que la IA te entreviste.
«La IA me da el código en trozos y no sé dónde va»
Prompt: «Dame el fichero completo, no fragmentos, e indica con comentarios qué parte es nueva.» Y si no: «dime exactamente la línea donde insertar esto».
«Se me ha roto algo al tocar el CSS»
Prompt: «Mi web estaba así: [pega el CSS]. Al añadir ___ dejó de funcionar ___. ¿Qué está mal y por qué?» — Pegar el código roto es el 90 % del debugging.
«¿Puedo usar cualquier IA?»
Puedes usar la que quieras —incluidos los agentes del centro—, pero el trabajo de revisar, comprender y decidir es tuyo, no de la herramienta. Si en clase no lo sabes explicar, no cuenta.