DROPCODING BLOG

Cómo Crear una Página Web con IA (Chat GPT4)

por:

Categoría:

CSS, HTML, IA

¡Pero cómo nos gusta ChatGPT y la Inteligencia artificial en general! Se podría decir que ha explotado el uso de este tipo de tecnologías.

Y nosotros, lejos de quedarnos atrás, aprovecharemos esta tecnología para hacernos la vida más fácil como diseñadores web freelance o desarrolladores web. 

Así que eso es justo lo que haremos en esta ocasión, aprovechar esta tecnología, para crear una página web responsive utilizando Chat GPT4.

Si os acordáis, hace poco hice un vídeo donde explicaba como crear una página web usando solamente la IA (con chat gpt3).

Además, también fue un vídeo muy revelador. Ya que vimos por primera vez como la IA generaba código (HTML y CSS) de manera automática y de forma bastante precisa.

Como fue un vídeo que gustó mucho, aquí traigo su versión 2.0, que creo que va a dejar “boquiabierto” a más de uno (nunca había utilizado esta expresión).

Recuerda que si tienes cualquier duda o cualquier sugerencia, puedes dejarla en los comentarios.

Y por si esto fuera poco, vamos a ir viendo más cosas interesantes que todo buen diseñador o desarrollador debería conocer.

Crear una página web con ChatGPT4

Lo que haremos en esta ocasión es crear una página web para una “Agencia de marketing digital” utilizando la Inteligencia artificial con ChatGPT, en su última versión GPT4.

De hecho, no vamos a escribir ni una línea de código. Ni si quiera vamos a picar una sola tecla para crear el código. Lo haremos TODO con IA, a través de promts (instrucciones).

Voy a dejar por aquí el vídeo también, para que le eches una ojeada.

Vamos a realizar todo el proceso paso a paso y vamos a ir creando la página web por secciones.

Vamos a crear:

¡OJO Spoiler! He modificado algunas cosas yo mismo que no me gustaban, para que el diseño quedara un poco mejor.

Bueno, basta ya de introducciones. Vamos ya al lío.

Vamos a empezar con el Header.

Para hacer el Header de la página web vamos a hacer el típico diseño de “logo + menú de navegación”.

Es algo muy recurrente, pero como se suele decir en esta ocasiones, si algo funciona bien no lo toques mucho.

Para crear el <header> vamos a escribir el siguiente promt:

Crea un Header en HTML que contenga el logo de la empresa a la izquierda y un menú de navegación con 4 enlaces a las diferentes secciones (Inicio, Quien Soy, Blog y Contacto).

<!DOCTYPE html>
<html lang="es">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi Página</title>
    <link rel="stylesheet" href="style.css">
</head>

<body>

  <header>
        <img src="img/dropcoding-logo.svg" alt="Logo Empresa" width="100">
        <nav>
            <a href="#inicio">Inicio</a>
            <a href="#quien-soy">Quién Soy</a>
            <a href="#blog">Blog</a>
            <a href="#contacto">Contacto</a>
        </nav>
  </header>

Luego le he pedido que haga los estilos CSS:

Ahora crea los estilos CSS, utiliza colores que combinen entre sí, usando también el color Tranquil Blue.

/* Estilos General */

:root {
  --tranquil-blue: #6A8DA3;
  --background-color: #F4F4F4;
  --text-color: #2C2C2C;
}

body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
  background-color: var(--background-color);
  color: var(--text-color);
}

/* Header */

header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1rem;
  background-color: var(--tranquil-blue);
}

img {
  width: 100px;
  height: auto;
}

nav {
  display: flex;
}

nav a {
  text-decoration: none;
  color: var(--background-color);
  padding: 0.5rem;
  margin-left: 1rem;
}

nav a:hover {
  color: var(--text-color);
}

/* Estilos responsivos */
@media screen and (max-width: 768px) {
  header {
      flex-wrap: wrap;
  }

  nav {
      width: 100%;
      justify-content: space-around;
      margin-top: 1rem;
  }
}

No sé si te has fijado, pero a este modelo de IA le encanta picar código ¡No veas como se enrolla!

Sección Hero

Ahora vamos a empezar con las secciones <section> valga la redundancia. Empezaremos por el Hero y le diremos que nos haga un título h1, una breve descripción de la página y que ponga una llamada a la acción.

Estas son las 3 cosas que pondría “casi” siempre en una página web.

Vamos con el promt:

Empieza la sección del body con su etiqueta y crea una sección Hero en HTML con:

Un título H1

Una breve descripción de la página web

Una llamada a la acción hacia la página de Contacto.

Para hacer la parte de estilos de esta sección, le diremos que queremos una imagen de fondo (la típica imágen que aparece de fondo en el hero), pero con una cierta peculiaridad. Le diremos que queremos una sombra en el background para que quede el texto flotante sobre la imagen.

Ahora crea los estilos CSS, utiliza colores que combinen entre si usando también el color «Tranquil Blue». Coloca una imagen de fondo en la sección Hero con la propiedad background (haz que la imagen de fondo quede sombreada y contraste con la fuente.)

/* Hero */
.hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  background-image: url('img/portada-hero-web.jpeg');
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  background-color: rgba(106, 141, 163, 0.7);
  background-blend-mode: multiply;
  color: var(--background-color);
  text-align: center;
}

.hero h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

.hero p {
  font-size: 1.25rem;
  margin-bottom: 2rem;
}

.hero .cta {
  text-decoration: none;
  padding: 0.75rem 1.5rem;
  background-color: var(--background-color);
  color: var(--tranquil-blue);
  border-radius: 4px;
  font-weight: bold;
}

.hero .cta:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

Aquí he tenido que hacer un par de modificaciones (por el bien estético de la página).

Sección de Categorías

Vamos con la sección de categorías. Normalmente me gusta crear una sección de este tipo en la home, porque ayuda a potenciar el enlazado interno y transmiten “link juice” a las propias categorías. Estas son cuestiones de SEO que son importantes.

Para crear el promt le diremos lo siguiente:

Crea una sección en HTML mostrando las siguiente categorías: “Diseño Web, Desarrollo Web, Desarrollo de apps, Desarrollo WordPress y Marketing Digital”. Crea una tarjeta clicable con un enlace para cada una de las categorías.

    <section class="categorias">
        <div class="categoria">
            <a href="diseno-web.html">Diseño Web</a>
        </div>
        <div class="categoria">
            <a href="desarrollo-web.html">Desarrollo Web</a>
        </div>
        <div class="categoria">
            <a href="desarrollo-apps.html">Desarrollo de Apps</a>
        </div>
        <div class="categoria">
            <a href="desarrollo-wordpress.html">Desarrollo WordPress</a>
        </div>
        <div class="categoria">
            <a href="marketing-digital.html">Marketing Digital</a>
        </div>
        <div class="categoria">
          <a href="marketing-digital.html">Otros</a>
      </div>
    </section>

En el propio HTML ya nos ha creado los estilos (que listo es). Así que no hace crear otro promt pidiendo la maquetación con CSS de la sección.

/* Sección Categorías */
.categorias {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  padding: 2rem;
  gap: 1rem;
}

.categoria {
  flex: 1;
  max-width: 300px;
  background-color: var(--background-color);
  border: 1px solid var(--tranquil-blue);
  border-radius: 5px;
  padding: 1rem;
  text-align: center;
  transition: transform 0.3s;
}

.categoria:hover {
  transform: scale(1.05);
}

.categoria a {
  text-decoration: none;
  color: var(--text-color);
  font-weight: bold;
}

.categoria a:hover {
  color: var(--tranquil-blue);
}

Lo he modificado un poco, que conste.

Así que vamos a pasar directamente a la siguiente sección.

Sección de Galería de Imágenes

Esta es la última sección, y como hemos comentado, se mostrará una pequeña galería de imágenes de los proyectos que hemos realizado. Además, vamos a colocar un enlace debajo de cada una de las imágenes.

El promt que he usado es el siguiente:

Ahora crea otra sección HTML donde se muestre una galería de imágenes en formato de rejilla y coloca un enlace debajo de cada imagen con el nombre de un proyecto.

    <section class="galeria">
      <div class="proyecto">
          <img src="img/proyecto_1.jpg" alt="Proyecto 1">
          <a href="proyecto-1.html">Proyecto 1</a>
      </div>
      <div class="proyecto">
          <img src="img/proyecto_2.jpg" alt="Proyecto 2">
          <a href="proyecto-2.html">Proyecto 2</a>
      </div>
      <div class="proyecto">
          <img src="img/proyecto_3.jpg" alt="Proyecto 3">
          <a href="proyecto-3.html">Proyecto 3</a>
      </div>
      <div class="proyecto">
        <img src="img/proyecto_4.jpg" alt="Proyecto 3">
        <a href="proyecto-3.html">Proyecto 4</a>
      </div>
      <div class="proyecto">
        <img src="img/proyecto_5.jpg" alt="Proyecto 3">
        <a href="proyecto-3.html">Proyecto 5</a>
      </div>
      <div class="proyecto">
        <img src="img/proyecto_6.jpg" alt="Proyecto 3">
        <a href="proyecto-3.html">Proyecto 6</a>
      </div>
      <!-- Añade más proyectos según sea necesario -->
    </section>

En este caso, nos ha creado también la parte de CSS ¡Nos ha creado la galería en formato Grid y además la ha hecho responsiva! En dos palabras “im-presionante”.

Así que no hace falta decirle que maquete esta sección, ya está hecho.

/* Galería de Imágenes */

.galeria {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 1rem;
  padding: 2rem;
}

.proyecto {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.proyecto img {
  width: 100%;
  height: auto;
  object-fit: cover;
  border-radius: 5px;
}

.proyecto a {
  text-decoration: none;
  color: var(--text-color);
  margin-top: 0.5rem;
  font-weight: bold;
}

.proyecto a:hover {
  color: var(--tranquil-blue);
}

Ahora vamos con la traca final, la creación del footer de la página.

Tenía pensado crear un promt de 800 líneas de texto, pero he pensado que sería mejor hacer una instrucción más cortita y dejar volar la imaginación de la IA.

Aquí va el promt, que por cierto, es similar al que vimos en el otro vídeo, pero el resultado es bastante diferente, véase a continuación.

Promt usado:

Crea un footer en HTML para la página web anterior con cuatro columnas.

En la primera columna coloca el nombre de la página (o de la empresa) y debajo un pequeño párrafo haciendo una pequeña descripción de la empresa, de unas 70 palabras.

En la segunda columna coloca una lista con todos los enlaces de los servicios.

En la tercera columna coloca una lista con todos los enlaces de los proyectos.

En la cuarta columna crea una rejilla con 2 columnas que muestre 4 iconos de las redes sociales de la empresa: Youtube, Facebook, Instagram y Twitter. 

  <footer class="footer">
    <div class="footer-container">
        <div class="footer-column">
            <h3>Nombre de la Empresa</h3>
            <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Voluptate deserunt quod, temporibus illo amet consectetur minima nesciunt atque ipsum laborum eveniet, modi mollitia id ullam quos voluptas. Eligendi, iste repellendus.</p>
        </div>
        <div class="footer-column">
            <h4>Servicios</h4>
            <ul>
                <li><a href="diseno-web.html">Diseño Web</a></li>
                <li><a href="desarrollo-web.html">Desarrollo Web</a></li>
                <li><a href="desarrollo-apps.html">Desarrollo de Apps</a></li>
                <li><a href="desarrollo-wordpress.html">Desarrollo WordPress</a></li>
                <li><a href="marketing-digital.html">Marketing Digital</a></li>
            </ul>
        </div>
        <div class="footer-column">
            <h4>Proyectos</h4>
            <ul>
                <li><a href="proyecto-1.html">Proyecto 1</a></li>
                <li><a href="proyecto-2.html">Proyecto 2</a></li>
                <li><a href="proyecto-3.html">Proyecto 3</a></li>
            </ul>
        </div>
        <div class="footer-column">
            <h4>Redes Sociales</h4>
            <div class="redes-sociales">
                <a href="https://www.youtube.com" target="_blank">YouTube</a>
                <a href="https://www.facebook.com" target="_blank">Facebook</a>
                <a href="https://www.instagram.com" target="_blank">Instagram</a>
                <a href="https://www.twitter.com" target="_blank">Twitter</a>
            </div>
        </div>
    </div>
  </footer>

</body>

</html>

Otra vez nos vuelve a hacer todo el CSS sin que se lo pidamos, pero que amable que es este ChatGPT4…

/* Footer */

.footer {
  background-color: var(--tranquil-blue);
  padding: 2rem;
  color: var(--background-color);
}

.footer-container {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1rem;
}

.footer-column {
  display: flex;
  flex-direction: column;
}

.footer ul {
  list-style: none;
  padding: 0;
}

.footer a {
  color: var(--background-color);
  text-decoration: none;
  transition: color 0.3s;
}

.footer a:hover {
  color: var(--text-color);
}

.redes-sociales {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.redes-sociales a {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: var(--background-color);
  color: var(--tranquil-blue);
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.redes-sociales a:hover {
  background-color: var(--text-color);
  color: var(--background-color);
}

Y ya tendríamos todo el código hecho para nuestro sitio web de nuestra agencia de marketing digital. Si no tienes una Agencia de Marketing digital (cosas muy rara por cierto) ya puedes aprovechar este diseño para montarte una.

Es broma, no lo hagas. Es difícil de narices. Quedas advertido.

Ahora vamos con algunas conclusiones que creo que son “necesarias” después de hacer un post como el de hoy.

Conclusiones

Antes de la conclusión, también voy a dejarte el anterior vídeo que hicimos también una página usando el mismo mecanismo, por si quieres comparar.

Este apartado se lo dedico a todas aquellas personas que me han escrito a través de los comentarios preguntándome sobre el futuro del diseño/desarrollo web y la Inteligencia artificial.

Para hacer esta pequeña conclusión, voy a empezar con una obviedad, pido disculpas de antemano. Ya que el futuro es completamente incierto y aunque podamos prever algunas cosas que parecen obvias, está claro que no se pueden predecir.

Entonces, ahí va lo que pienso yo.

Creo que a día de hoy, estamos bastante lejos de que una persona, sin tener ni idea de diseño o desarrollo, pueda crear toda una página web que sea estética y esté optimizada, como lo haría un profesional.

Además, pienso que el diseño y desarrollo web es tan complejo hoy en día, especialmente cuando hablamos de proyectos comerciales o en un ámbito profesional, que dudo mucho que alguien que no tiene ni idea pueda hacer la misma página que puede hacer un front-end.

También creo que los diseñadores que no están especializados en crear diseños web “profesionales” o competitivos son los que pueden ser sustitutos con mayor rapidez. 

Dicho todo esto, no me voy a mojar más sobre el tema. No vaya a ser que luego me equivoque.

Espero que te haya gustado este post/video, creo que ha sido uno con los que más he disfrutado haciendo.

Y ya sabes que si tienes alguna pregunta o sugerencia puedes dejarla en los comentarios.

Nos vemos en el proximo post.

Apúntate a la Newsletter y Mejora tus Habilidades

Conoce los secretos mejor guardados sobre el Diseño y el Desarrollo Web.

Suscríbete

4 thoughts on “Cómo Crear una Página Web con IA (Chat GPT4)”

  2. Se puede hacer muchas cosas, pero tienes que revisar el código porque a veces se va por otro lado, jajaja, me tomó varios días hacer un custom_post_type con sus propios metaboxes para mi página en WordPress, un post-form para publicar desde el front-end incluyendo el metabox del custom_post_type y, que digo, pues quedó de lujo. Pero como dije, hay que revisar el código y hacer algunas modificaciones.

    Responder

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

También te puede interesar: