Desarrollar con IA

Paso a paso

C

Claude

GPT

ChatGPT

G

Gemini

DS

DeepSeek

grok

Grok

Co

Copilot

1. Piensa bien antes de empezar. Haz bocetos en papel o escribe los puntos más importantes.
2. Crea un primer prompt largo, que te permita generar la estructura principal de tu página web.
   1. Añade aquello que sea relevante para tu web: estructura (ventanas, pestañas, botones), estilo, público objetivo…
   2. Puedes adjuntar imágenes para explicarlo mejor.
   3. Pide a la IA que lo genere con tecnologías HTML, CSS y JavaScript y que te dé un solo archivo de descarga.
3. Descarga el archivo (.html) que te dará la IA, llámalo index.html y con doble clic ábrelo en el navegador para ver cómo queda.
4. A partir de aquí, busca errores o mejoras y crea nuevas peticiones a la IA para ir haciendo las modificaciones.
5. Una vez tengas una primera versión que te guste, la publicamos en GitHub Pages.
6. Probamos ya la web desde fuera, vamos cambiando lo que haga falta y volviendo a subir a GitHub los archivos actualizados.

Publicando por primera vez en GitHub Pages

1. Crea una cuenta en https://github.com. Usa un nombre de usuario lógico, ya que tus páginas tendrán ese nombre en la URL (por ejemplo el mío es enaraartetxe).
2. Clica en el botón verde «New» para crear un nuevo repositorio.
   1. Rellena el nombre (que sea igualmente lógico, ya que también aparecerá en la URL).
   2. Comprueba que sea público para que puedas después publicar la web.
   3. Pulsa en Crear Repositorio.
3. Clica en subir un fichero existente.
   1. Arrastra tu index.html al recuadro.
   2. En el campo de commit, ponle de título «first commit».
   3. Pulsa en Commit Changes.
4. Para publicar, clica en la rueda de ajustes (o Settings).
   1. En el panel de la izquierda clica en Pages.
   2. A la derecha, donde pone Branch (rama), selecciona main y guárdalo.
   3. Vuelve a tu repositorio y, pasados unos segundos, verás el enlace de tu página web.
5. Para subir actualizaciones: clica en Add file / Upload files (añadir fichero / subir).
   1. Adjunta los archivos.
   2. Dale al commit un nuevo nombre descriptivo con los cambios que lleva esa versión (por ejemplo: «añadir datos de contacto»).
   3. Acuérdate de que, para que un fichero se actualice, el que subas y el que está en el repositorio tienen que llamarse igual (por ejemplo index.html).

Recuerda que…

• La IA funciona mejor con referencias visuales: pásale imágenes o vídeos de referencia además de instrucciones.
• Empieza grande (un prompt con mucho detalle) y luego ve haciendo cambios pequeños, para asegurarte de que no se generen errores por el camino y, en caso de fallo, localizarlo más rápido.
• Si te atascas en una conversación, abre una nueva, pásale tus últimos ficheros y continúa desde ahí. Puedes incluso cambiar de herramienta de IA si ves que no avanzas.
• Puedes mezclar estilos, estructuras, colores o animaciones de diferentes páginas. Ve paso a paso para comprobar que funciona como tú quieres.
• Puedes incluso utilizar bocetos tuyos hechos a mano o con herramientas de dibujo.
• Cuando haya errores o quieras cambios, puedes hacer capturas de pantalla y pasárselas de referencia a la IA.
• Para ver cómo queda la web en diferentes dispositivos (PC, tablet, móvil), abre las herramientas de desarrollo del navegador y activa la vista de dispositivos (o clica en el icono de PC-móvil):
  Windows: F12 y luego Ctrl + Shift + M
  Mac: Cmd + Option + I y luego Cmd + Shift + M (en Firefox, Cmd + Option + M)