Lo que aprenderás
- Cómo describir una tarea del usuario en lugar de «haz una web»
- Cómo construir la página por partes: estructura, estilos, comportamiento
- Cómo revisar la página en el teléfono y con el teclado
- Qué no se debe poner en el código de la página
Conceptos clave
- HTML
- La estructura de la página: títulos, texto, botones, formularios.
- CSS
- El aspecto: colores, fuentes, márgenes, adaptación a la pantalla.
- JavaScript
- El comportamiento: qué ocurre al pulsar, envío de formularios, animaciones.
- Diseño adaptable
- La página es igual de cómoda en el teléfono, en la tableta y en el ordenador.
01Describe un solo escenario
Elige un usuario y una acción: encontrar un material, dejar una solicitud, abrir un catálogo. Anota qué ve la persona antes de la acción y qué obtiene después. Esa es la tarea de la primera versión.
Ejemplo. «Un streamer entra en la página, en 10 segundos entiende que las donaciones llegan directamente a su billetera y pulsa „Crear enlace“».
02Construye por partes
Pide a la IA primero solo la estructura HTML: un título, una descripción, tres ventajas y un botón. Después los estilos y luego el comportamiento. Comprueba cada parte en el navegador antes de pasar a la siguiente: así es fácil encontrar un error.
Consejo. Pide comentarios breves en el código: así es más fácil mantenerlo.
03Revisa en el teléfono y con el teclado
Abre la página en una pantalla estrecha: nada debe salirse por el borde y los botones deben poder pulsarse con el dedo. Recorre la página con la tecla Tab: cada enlace y cada botón debe recibir un foco bien visible.
- Ancho de 360 píxeles sin desplazamiento horizontal
- Fuente principal de al menos 16 píxeles
- Los campos del formulario tienen etiqueta
- Todos los enlaces funcionan
04Seguridad
Todo lo que está en el código de la página lo ve cualquier visitante. Las claves de API, las contraseñas y los tokens no se ponen nunca en el código de la página: se guardan en el servidor.
- No pegues claves ni contraseñas en HTML ni en JavaScript
- No conectes scripts de sitios desconocidos
05Prepárala para publicar
Añade un título de página (title) y una descripción (description) claros: los muestran los buscadores. Comprueba que las imágenes tienen descripción (alt) y que la página se abre rápido con internet móvil.
Antes de publicar
- La página resuelve un escenario claro
- En el teléfono no hay desplazamiento horizontal
- Todos los botones y enlaces funcionan y son accesibles con el teclado
- En el código no hay claves, contraseñas ni tokens
- Hay title, description y descripciones de las imágenes
Errores frecuentes y cómo evitarlos
Pedir a la IA «hazme toda la web» de una vez
Empieza con un escenario y construye por partes.
Revisar solo en el ordenador
La mayoría de los visitantes llega desde el teléfono.
Una clave de API directamente en el código de la página
Los secretos se guardan solo en el servidor.
Publicar sin title ni description
Sin ellos, la página se encuentra peor en las búsquedas.
Pruébalo tú
Monta la página de tu proyecto: un título, una descripción, tres funciones y una acción que funcione.
- Describe el escenario del usuario en una frase
- Pide a la IA la estructura HTML y revísala en el navegador
- Añade estilos y comprueba a 360 píxeles de ancho
- Recorre la página con la tecla Tab y anota lo que encuentres
Resultado. Una página que funciona y una lista de las comprobaciones que ha superado.
Ponte a prueba
Primero responde mentalmente y después abre la respuesta.
1¿Por qué es mejor construir la página por partes?Respuesta
Cada parte se comprueba enseguida y es fácil encontrar el error. Un código grande y completo es difícil de depurar.
2¿Se puede guardar una clave de API en el JavaScript de la página?Respuesta
No. El código de la página lo ve cualquier visitante; las claves se guardan en el servidor.
3¿Cómo comprobar rápido la accesibilidad de la página?Respuesta
Recorrerla con la tecla Tab: todos los botones y enlaces deben recibir un foco visible.
En resumen
Un escenario, construcción por partes con revisión en el navegador, teléfono y teclado, ningún secreto en el código, y title y description claros. Así la primera página funciona, y no solo es bonita.