Con la llegada de la inteligencia artificial todos estamos buscando nuevas formas de aprovechar esta tecnología para hacernos la vida más fácil. Y para automatizar todas aquellas tareas que hasta ahora, tenías que hacer a mano o contratar a alguien para que las hiciera, como tareas de creación de contenido, traducciones (bastante fiables), creación de imágenes y un montón de cosas más.
Pero lo que aún no hemos visto es si esta misma Inteligencia artificial nos puede ayudar a crear una página web.
Entonces la pregunta que me he hecho es ¿Podemos crear toda una página web utilizando la IA?
Y bueno, si has visto el título del post no hace responder a esta pregunta. Lo mejor será que lo veas tu mismo.
¿Cómo crear una página web con IA?
Lo primero, te dejo el vídeo por aquí donde hago todo el experimento.
Para ver si la inteligencia artificial es capaz de crear toda una página web, vamos a utilizar la herramienta de Chat GPT de Open AI.
Si no sabes lo que es, te dejo por aquí un post (y un vídeo) donde explico qué es y como funciona Chat GPT, en mi otro blog.
Puedes aprovechar la herramienta de Chat GPT de muchas maneras, pero en este caso nosotros vamos a lo que nos importa, crear un sitio web en html y css (a ver si es capaz).
Creación de página web usando Chat GPT
Lo que vamos a hacer a continuación será darle una serie de instrucciones a Chat GPT para que haga las distintas partes de el sitio web.
Para empezar la página le vamos a pedir que nos haga el Header de la página web con un pequeño logo a la izquierda y en la parte derecha un menú de navegación. Es decir, le vamos a pedir que nos haga el típico encabezado, vamos.
Luego le vamos a pedir que nos haga la parte del <body> y varias secciones, incluida una sección hero y una galería de imágenes.
Para completar la página web, vamos a crear la sección del <footer>.
Cuando hayamos acabado el experimento, vamos a copiar todo el código que nos ha proporcionado el Chat y lo vamos a pegar en nuestro editor. Y para finalizar, veremos que tal ha quedado en el navegador.
Y ahora, vamos a empezar a crear el código a través de la IA, sin picar ni una sola línea.
Header
Estructura html del encabezado de la página. He utilizado la siguiente instrucción o «promt» en el chat:
Crea una sección header en HTML con: Un enlace con el logo de la empresa. Un menú de navegación con 3 elementos para la página web de una empresa.
El resultado:
<!-- Header -->
<header>
<div id="logo">
<a href="/">
<img src="img.png" alt="Logo de la empresa">
</a>
</div>
<div id="nav">
<nav>
<ul>
<li><a href="/">Inicio</a></li>
<li><a href="/acerca-de">Acerca de</a></li>
<li><a href="/contacto">Contacto</a></li>
</ul>
</nav>
</div>
</header>Estilos del header, con el siguiente promt:
Crea los estilos CSS de: la sección header. El logo y el menú de navegación.
/* Header */
header {
display: flex;
justify-content: space-between;
align-items: center;
background-color: #333;
color: #fff;
padding: 20px;
}
#logo a {
display: block;
}
#logo img {
width: 70px;
height: auto;
}
#nav {
display: flex;
}
#nav ul {
display: flex;
list-style: none;
margin: 0;
padding: 0;
}
#nav li {
margin: 0 10px;
}
#nav a {
color: #fff;
text-decoration: none;
}
#nav a:hover {
color: #ccc;
}Cuerpo de la página (Body)
Ahora empezaremos la parte del Body con la sección Hero. Vamos con la estructura html del Hero, que va a ser la primera sección del cuerpo de la página.
Sección Hero
Promt usado:
Crea una sección Hero en HTML con:
Un título h1
Una etiqueta con una breve descripción de la página web.
Una llamada a la acción a la página de servicios.
<!-- Hero -->
<section id="hero">
<h1>Bienvenido a nuestra empresa</h1>
<p>Ofrecemos servicios de alta calidad para mejorar su negocio</p>
<a href="/servicios" class="btn">Ver servicios</a>
</section>Maquetación del body con CSS:
CREA ESTILOS CSS DE:
La sección Hero de la página web.
La llamada a la acción dentro de la sección hero.
/* HERO */
#hero {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
min-height: 300px;
background-color: #333;
color: #fff;
text-align: center;
padding: 50px 20px;
}
#hero h1 {
font-size: 3em;
margin: 0;
}
#hero p {
font-size: 1.5em;
margin: 10px 0;
}
#hero .btn {
display: inline-block;
font-size: 1.2em;
padding: 15px 30px;
border: 2px solid #fff;
border-radius: 5px;
color: #fff;
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
}
#hero .btn:hover {
background-color: #fff;
color: #333;
}Sección de dos columnas
Ahora iremos con la siguiente sección, en este caso un <section> con dos columnas. Vamos a crear la típica sección donde en una columna tendremos una imagen y en otra columna, estará compuesta por un subtitulo (h2), un párrafo y un botón.
Instrucción usada para crear sección:
CREA UNA SECCIÓN EN HTML CON DOS COLUMNAS:
Que la primera columna de la sección contenga un contenedor y dentro haya una imagen.
Que en la segunda columna haya un:
Título h2 presentando la sección.
Una pequeña descripción de la página web y sus servicios sobre diseño web.
Un enlace hacia la sección de servicios.
<!-- 2Columnas -->
<section id="features">
<div class="container">
<div class="left-column">
<img src="img/img-column.jpg" alt="Imagen de ejemplo">
</div>
<div class="right-column">
<h2>Nuestros servicios de diseño web</h2>
<p>Ofrecemos servicios de diseño web de alta calidad para ayudar a nuestros clientes a tener una presencia online atractiva y efectiva.</p>
<a href="/servicios" class="btn">Ver servicios</a>
</div>
</div>
</section>Y le vamos a decir que nos maquete esta sección, con la siguiente instrucción:
CREA LOS ESTILOS CSS DE LA ANTERIOR SECCIÓN Y SUS DOS COLUMNAS.
/* Sección Columnas (2) */
#features {
display: flex;
align-items: center;
justify-content: space-between;
background-color: #f5f5f5;
padding: 50px 20px;
}
#features .container {
display: flex;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
#features .left-column {
width: 50%;
text-align: center;
}
#features .left-column img {
width: 60%;
height: auto;
margin-bottom: 20px;
}
#features .right-column {
width: 50%;
text-align: left;
padding: 0 20px;
}
#features h2 {
font-size: 2em;
margin: 0 0 20px;
}
#features p {
font-size: 1.2em;
line-height: 1.5;
margin: 0;
}
#features .btn {
display: inline-block;
font-size: 1em;
padding: 15px 30px;
border: 2px solid #333;
border-radius: 5px;
color: #333;
text-decoration: none;
transition: background-color 0.2s, color 0.2s;
}
#features .btn:hover {
background-color: #333;
color: #fff;
}Galería de imágenes
Como todas (o casi todas) las páginas web, vamos a crear una pequeña galería de imágenes, a ver que hace con la siguiente instrucción.
CREA UNA SECCIÓN EN HTML CON:
Una galería con 6 imágenes.
<!-- Galería -->
<section id="galeria">
<h2>Galería de imágenes</h2>
<div class="galeria">
<img src="img/img1.jpg" alt="Imagen 1">
<img src="img/img2.jpg" alt="Imagen 2">
<img src="img/img3.jpg" alt="Imagen 3">
<img src="img/img4.jpg" alt="Imagen 4">
<img src="img/img5.jpg" alt="Imagen 5">
<img src="img/img6.jpg" alt="Imagen 6">
</div>
</section>Y ahora los estilos por aquí de la galería de imágenes. La instrucción que he usado es la siguiente:
/* Galería */
#galeria {
text-align: center;
padding: 50px 20px;
}
#galeria h2 {
font-size: 2em;
margin: 0 0 20px;
}
#galeria .galeria {
display: flex;
flex-wrap: wrap;
justify-content: space-between;
margin: 0 -5px;
}
#galeria .galeria img {
width: 30%;
height: auto;
margin: 0 5px 20px;
object-fit: cover;
border-radius: 5px;
transition: transform 0.2s;
}
#galeria .galeria img:hover {
transform: scale(1.1);
}Y ahora, vamos con la parte final, la creación del footer de la página.
Footer html y css
Parte de HTML del footer, hecha con el siguiente promt:
CREA UNA SECCIÓN FOOTER PARA LA PÁGINA WEB EN HTML CON 4 COUMNAS:
En la primera columna añade el logo de la empresa.
En la segunda columna crea una lista con 4 servicios de diseño web.
En la tercera columna crea una lista con las pestañas legales que ha de tener la página web.
En la cuarta columna añade 4 botones de las redes sociales más comunes.
<!-- Footer -->
<footer id="footer">
<div class="container">
<div class="left-column">
<img src="img/Dropcoding_Darkmode-logo.svg" alt="Logo de la empresa" width="150" height="150">
</div>
<div class="center-column">
<h3>Servicios de diseño web</h3>
<ul>
<li>Diseño de sitios web</li>
<li>Diseño de tiendas en línea</li>
<li>Diseño de landing pages</li>
<li>Diseño de aplicaciones móviles</li>
</ul>
</div>
<div class="right-column">
<h3>Pestañas legales</h3>
<ul>
<li>Política de privacidad</li>
<li>Términos y condiciones</li>
<li>Cookies</li>
<li>Declaración de accesibilidad</li>
</ul>
</div>
<div class="social-column">
<h3>Redes sociales</h3>
<a href="#" class="fa fa-facebook"></a>
<a href="#" class="fa fa-twitter"></a>
<a href="#" class="fa fa-instagram"></a>
<a href="#" class="fa fa-linkedin"></a>
</div>
</div>
</footer>Para maquetar el footer y sus cuatro columnas hemos utilizado el siguiente promt.
CREA LOS ESTILOS DE LA ANTERIOR SECCIÓN FOOTER Y SUS COLUMNAS.
/* Footer */
#footer {
background-color: #333;
color: #fff;
text-align: center;
padding: 50px 20px;
}
#footer .container {
display: flex;
align-items: flex-start;
justify-content: space-between;
width: 100%;
max-width: 1200px;
margin: 0 auto;
}
#footer h3 {
font-size: 1.2em;
margin: 0 0 20px;
}
#footer ul {
list-style: none;
margin: 0;
padding: 0;
}
#footer li {
font-size: 0.9em;
line-height: 1.5;
}
#footer a {
color: #fff;
text-decoration: none;
transition: color 0.2s;
}
#footer a:hover {
color: #333;
}
#footer .fa {
font-size: 1.5em;
margin: 0 5px;
}Y bueno, hasta aquí el resultado del código que nos ha arrojado la Inteligencia artificial a través de Chat GPT.
Recordemos que para hacer este experimento no he tocado ni una tecla de código.
Ahora solo faltaría plasmar la página entera en el sitio web. Pero esto te lo voy a dejar a ti, para que lo pruebes tu mismo/a :D.
Espero que te haya gustado este experimento y si quieres que continúe haciendo cosas de este tipo o relacionadas con la IA solo tienes que dejarme un comentario.
Muchas gracias, para los que no estamos familiarizados con esto, la explicación es fabulosa, solo espero que nos enseñes como plasmar en la pagina y sobre todo el vaciado de la información para esto. soy de más de la tercera edad, deseoso siempre de aprender algo, si bien me gusta este tipo de videos » TODOS LOS DÍAS, SE APRENDE ALGO NUEVO» gracias
PD: desde hoy te seguiré….
Hola Mario, muchas gracias por el comentario. Tengo previsto hacer más vídeos con ChatGPT, espero que os gusten. PD: Muchas gracias por seguirme, un saludo!!
Tengo dudas he seguidos los pasos y pues para asceder a la pagina web a donde tendría que ir o seleccionar para entrar ¿?
Hola Salvador, en el post sobre Cómo crear una página web con IA/ lo explico!
puedes hacer un video pegando los codigos generados en chatgpt, muchas felicitaciones por los videos y el esfuerzo realizado, màs aquellos son neofitos en el tema, eres un referente…muchas gracias.
Hola Alfonso, muchísimas gracias por el comentario, de verdad. Dentro de poco voy a lanzar un vídeo sobre el tema. Un saludo!!