IA para Desarrollo Web
Cómo usar inteligencia artificial como herramienta real de trabajo: generar, corregir y mejorar código con criterio.
0 / 10 lecciones completadas (0%)
Qué es la IA aplicada a programación
Lección 02Prompt engineering básico
Lección 03Generación de código con IA
Lección 04Corrección de errores con IA
Lección 05Refactorización con IA
Lección 06IA para generar plantillas completas
Lección 07IA para generar funciones PHP
Lección 08IA para generar consultas MySQL
Lección 09IA para generar contenido web
Lección 10IA para crear estructuras completas de proyectos
Qué es la IA aplicada a programación
Una IA de programación es un modelo entrenado con enormes cantidades de código real que puede escribir, explicar o corregir código a partir de instrucciones en lenguaje natural. No «piensa» como una persona: predice qué código tiene sentido según patrones aprendidos, por eso siempre hay que revisar lo que genera.
Tu escribes (prompt):
"Crea una funcion en JavaScript que sume dos numeros"
La IA genera:
function sumar(a, b) {
return a + b;
}
Tu trabajo: leerlo, entenderlo y comprobar que hace lo que pediste.¿Por qué es importante revisar siempre el código que genera una IA?
Prompt engineering básico
Un prompt es la instrucción que le das a la IA. Cuanto más claro y específico seas —qué lenguaje usar, qué debe hacer exactamente, qué formato de salida quieres—, mejor será el resultado. Es una habilidad que se entrena, igual que aprender a hacer una buena búsqueda en internet.
Prompt flojo:
"hazme una web"
Prompt bueno:
"Crea una pagina HTML con un formulario de contacto que tenga
campos nombre, email y mensaje, validados con JavaScript,
y con estilo de colores azul oscuro y cian."
La diferencia: contexto, lenguaje, requisitos y estilo concretos.Reescribe este prompt flojo para que sea específico: «hazme un botón bonito». Indica lenguaje, color, tamaño y qué debe pasar al hacer clic. Escribe tu prompt mejorado en el cuadro.
Escribe tu solución arriba. No hay una única respuesta correcta: lo importante es razonar el porqué.
Generación de código con IA
Pedir a una IA que genere código completo (una función, un componente, una página entera) puede ahorrar mucho tiempo en tareas repetitivas. Es especialmente útil para plantillas, estructuras iniciales o código «de fontanería» que sigue patrones conocidos.
// Prompt: "Genera una funcion PHP que valide si un email es correcto"
function validarEmail($email) {
return filter_var($email, FILTER_VALIDATE_EMAIL) !== false;
}
if (validarEmail("hola@digitosystems.es")) {
echo "Email valido";
}¿Para qué tipo de tareas suele ser más útil pedir código generado por IA?
Corrección de errores con IA
Cuando un programa falla, se puede pegar el código y el mensaje de error exacto a una IA y pedirle que explique qué está fallando. Es como tener a alguien con mucha experiencia leyendo el error contigo, pero la decisión final de aplicar el arreglo siempre es tuya.
// Codigo con error:
function calcularArea(base, altura) {
return base * altura
}
console.log(calcularArea(5));
// Error en consola: el resultado es "NaN" (Not a Number)
// porque falta el segundo argumento "altura".
// Prompt a la IA: "Este codigo da NaN, por que?"
// Respuesta esperada: falta pasar el segundo parametro.
console.log(calcularArea(5, 3)); // 15Cuando pides a una IA que corrija un error, ¿qué información es más útil darle?
Refactorización con IA
Refactorizar significa reorganizar código para que sea más claro o eficiente sin cambiar lo que hace. Una IA puede sugerir nombres de variables más claros, dividir una función larga en varias pequeñas, o eliminar código repetido.
// Antes:
function f(a,b,c){ if(c==1){return a+b}else{return a-b} }
// Despues de refactorizar (misma funcion, mas claro):
function calcular(numeroA, numeroB, operacionEsSuma) {
return operacionEsSuma ? numeroA + numeroB : numeroA - numeroB;
}¿Qué NO debería cambiar al refactorizar código?
IA para generar plantillas completas
Se puede pedir a una IA una plantilla completa de página —estructura HTML, CSS y JS básicos— como punto de partida, para luego personalizarla con contenido y diseño propios en lugar de empezar de una página en blanco.
<!-- Plantilla base generada a partir de un prompt -->
<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<title>Plantilla</title>
<link rel="stylesheet" href="estilos.css">
</head>
<body>
<header><h1>Titulo del sitio</h1></header>
<main><p>Contenido principal aqui.</p></main>
<footer><p>© 2026</p></footer>
<script src="script.js"></script>
</body>
</html>Al recibir una plantilla generada por IA, revisa:
- La estructura HTML es semánticamente correcta (header, main, footer)
- Los enlaces a CSS y JS apuntan a los archivos correctos
- No hay contenido de ejemplo genérico que olvidaste personalizar
- El diseño se adapta a dispositivos móviles
IA para generar funciones PHP
Igual que con JavaScript, se puede pedir a la IA funciones PHP concretas: calcular un precio con descuento, formatear una fecha, generar una contraseña aleatoria. Es buena práctica pedir siempre que la función incluya comprobaciones básicas de los datos de entrada.
function precioConDescuento($precio, $porcentaje) {
if ($precio < 0 || $porcentaje < 0 || $porcentaje > 100) {
return null; // datos no validos
}
return $precio - ($precio * $porcentaje / 100);
}
echo precioConDescuento(50, 20); // 40Pide (mentalmente o por escrito) una función PHP que calcule el precio CON IVA en lugar de con descuento. Escríbela tú mismo en el cuadro, inspirándote en la estructura anterior.
Escribe tu solución arriba. No hay una única respuesta correcta: lo importante es razonar el porqué.
IA para generar consultas MySQL
Escribir SQL a mano puede ser tedioso, especialmente con varias tablas relacionadas. Se puede describir en lenguaje natural qué datos se necesitan («todos los alumnos que aprobaron el módulo 3») y pedir a la IA la consulta SQL correspondiente, revisando después que sea correcta.
-- Prompt: "alumnos que completaron el modulo 3, ordenados por nombre"
SELECT nombre, apellidos
FROM alumnos
JOIN progreso ON alumnos.id = progreso.alumno_id
WHERE progreso.modulo = 3 AND progreso.completado = 1
ORDER BY nombre ASC;¿Por qué conviene revisar una consulta SQL generada por IA antes de ejecutarla en una base de datos real?
IA para generar contenido web
Además de código, la IA puede ayudar a redactar textos: descripciones de producto, artículos, textos legales básicos. Es importante revisar que la información sea correcta y verificarla con fuentes reales, especialmente en temas legales, de salud o de seguridad.
Prompt: "Escribe una descripcion breve para un producto:
zapatillas deportivas de running, ligeras y transpirables"
Resultado a revisar y adaptar al tono real de la marca antes
de publicarlo, comprobando que no haya datos inventados
(medidas, materiales o precios que no sean reales).¿Qué riesgo existe al publicar directamente un texto generado por IA sin revisarlo?
IA para crear estructuras completas de proyectos
Se puede pedir a una IA que proponga la organización de carpetas y archivos de un proyecto nuevo según su tipo (una web informativa, una tienda, un blog), ahorrando tiempo de planificación inicial y siguiendo buenas prácticas conocidas del sector.
Prompt: "Estructura de carpetas para una tienda online sencilla con PHP"
tienda/
|-- index.php
|-- /productos
| |-- listado.php
| `-- detalle.php
|-- /admin
| `-- panel.php
|-- /includes
| |-- conexion.php
| `-- funciones.php
|-- /css
|-- /js
`-- /imagenesAl recibir una estructura de proyecto generada por IA, comprueba:
- Separa claramente el código de conexión a base de datos en su propio archivo
- Tiene una carpeta diferenciada para administración si el proyecto la necesita
- Sigue una convención de nombres consistente en todo el proyecto