Utilidades IACómo crear una web sencilla con ayuda de la IA
| Para quién | Para quien quiere una página personal, de un pequeño negocio o de una asociación y tiene nociones mínimas o nulas de programación, o para quien programa y quiere ahorrar tiempo en el esqueleto inicial. |
|---|---|
| Tiempo estimado | Entre 45 y 90 minutos para una página de una sola pantalla, incluida la revisión. |
| Categoría | Programación y datos |
Paso a paso
- Define el objetivo y el contenido real
Antes de pedir nada, escribe en un papel qué quieres que haga la página: presentar tu actividad, mostrar un horario, dar un teléfono de contacto. Reúne los textos definitivos, el nombre, las secciones que necesitas y las imágenes que tienes derecho a usar. Si no das contenido real, el asistente rellenará con texto inventado que luego olvidarás cambiar. Decide también cuántas secciones habrá: para empezar, una cabecera, un bloque de presentación, uno de servicios o información y un pie con los datos de contacto son suficientes y fáciles de revisar. - Pide una estructura HTML semántica
Solicita primero solo el HTML, sin estilos, y pide que use etiquetas con significado: header, nav, main, section, footer, y una jerarquía de títulos ordenada, con un único h1. Pídele que añada el atributo de idioma en español, una etiqueta de viewport para móviles y un título de página descriptivo. Separar la estructura del diseño te permite entender cada parte. Pide además que comente brevemente qué hace cada bloque, para que puedas modificarlo después sin depender de nuevas consultas al asistente. - Añade el CSS en una segunda petición
Con el HTML aprobado, pide los estilos en un archivo aparte, con una paleta de pocos colores, una tipografía del sistema y márgenes generosos. Indica que el diseño debe adaptarse a pantallas pequeñas usando unidades relativas y una sola consulta de medios como mucho. Pide que explique el significado de cada regla importante. Evita pedir efectos vistosos, animaciones o librerías externas: cuantas menos piezas tenga la página, menos puntos de fallo y menos dependencias que mantener cuando pase el tiempo. - Revisa la accesibilidad punto por punto
Una página bonita que no se puede usar no sirve. Comprueba que todas las imágenes con contenido tengan texto alternativo útil, que el contraste entre texto y fondo sea suficiente, que los enlaces describan su destino y no digan solo «pulsa aquí», y que puedas recorrer toda la página con el teclado, viendo siempre dónde está el foco. Pide al asistente que audite su propio código con esa lista, pero no te fíes únicamente de su respuesta: haz tú mismo la prueba con el tabulador y con el zoom ampliado. - Valida el código y pruébalo en distintos entornos
Pasa el HTML y el CSS por un validador oficial del estándar y corrige los errores que señale. Abre la página en al menos dos navegadores y en un móvil real o en el modo de dispositivo del navegador. Desactiva las imágenes para ver si la página sigue siendo comprensible. Si el asistente incluyó código que no entiendes, pídele que lo explique línea a línea o elimínalo. Todo lo que no puedas explicar con tus palabras es una pieza que no deberías publicar. - Publica con cautela y mantén una copia
Antes de subir la página, comprueba que no contiene datos personales tuyos o de terceros que no quieras mostrar, que los textos y las imágenes tienen licencia adecuada y que los datos de contacto son correctos. Guarda una copia local del proyecto completo y anota qué partes generó la IA. Si la web va a recoger datos de visitantes, usará cookies o mostrará anuncios, consulta los requisitos legales aplicables con un profesional, porque un asistente de IA no puede garantizar que cumplas la normativa.
Prompt de ejemplo
Cambia lo que está entre corchetes por tu situación:
Actúa como desarrollador web que enseña a un principiante. Necesito una página de una sola pantalla para [NOMBRE DEL NEGOCIO O PROYECTO], que se dedica a [ACTIVIDAD]. Secciones: cabecera con el nombre, presentación de [NÚMERO] líneas, lista de [SERVICIOS O DATOS] y pie con [DATOS DE CONTACTO]. Entrégame primero solo el HTML5 semántico en español, con un único h1, etiqueta viewport, título de página y comentarios breves. No uses librerías externas ni scripts. Cuando lo apruebe te pediré el CSS. Al final enumera qué partes debo comprobar yo a mano en accesibilidad y avísame de cualquier suposición que hayas hecho sobre mi contenido.
Qué esperar
Recibirás un archivo HTML ordenado y comentado, y en una segunda ronda una hoja de estilos sencilla. Es un buen punto de partida, no un producto terminado: suelen faltar textos alternativos adecuados, ajustes de contraste y comprobaciones en móvil. Espera tener que iterar entre dos y cuatro veces y corregir algún detalle a mano.
Cómo verificar el resultado
- Pasa el HTML y el CSS por un validador oficial y confirma que no quedan errores graves.
- Recorre la página solo con el teclado y comprueba que el foco es visible y el orden es lógico.
- Abre la página en dos navegadores y en una pantalla estrecha para verificar que nada se corta ni se superpone.
- Lee el código buscando enlaces, scripts o direcciones que no hayas pedido y elimina lo que no entiendas.
Errores comunes
- Pedir la página entera de golpe, sin contenido real, y recibir un resultado genérico y difícil de revisar.
- Publicar el código sin validarlo ni probarlo en móvil, dando por buena la primera respuesta del asistente.
- Aceptar imágenes, textos o datos de contacto de ejemplo y olvidarse de sustituirlos antes de publicar.
- Añadir librerías o scripts externos innecesarios que complican el mantenimiento y pueden abrir problemas de seguridad.
Riesgos y límites
El asistente puede producir código con errores de sintaxis, etiquetas mal usadas o soluciones de accesibilidad solo aparentes. También puede inventar propiedades que no existen o mezclar prácticas anticuadas con otras actuales. No conoce tu servidor ni tu normativa: si la página recoge datos personales, usa cookies o vende algo, necesitarás textos legales y configuración adecuados, y conviene consultar a un profesional. No pegues en la conversación contraseñas, datos de clientes ni información confidencial. Considera siempre el resultado como un borrador que tú eres responsable de entender, probar y mantener.
Preguntas frecuentes
¿Necesito saber programar para hacer una web así?
No para una página muy sencilla, pero sí conviene aprender lo básico de HTML y CSS para poder revisar y corregir lo que genera el asistente. Si publicas código que no entiendes, no sabrás arreglarlo cuando falle ni detectar si incluye algo no deseado.
¿Puedo publicar directamente lo que me devuelve la IA?
No es recomendable. Primero valida el código, pruébalo en varios dispositivos, revisa la accesibilidad y comprueba textos, imágenes y datos de contacto. Un asistente puede equivocarse o dejar contenido de ejemplo, y la responsabilidad de lo que se publica es tuya.
¿Qué hago si la página necesita formulario de contacto o tienda?
Eso implica tratar datos y, en el caso de la tienda, pagos, con requisitos técnicos y legales más exigentes. Un asistente puede ayudarte a entender conceptos, pero es mejor apoyarse en un servicio especializado o en un profesional antes de ponerlo en marcha.