Ya conoce ChatGPT, el modelo de lenguaje avanzado diseñado por OpenAI que utiliza el aprendizaje automático para comprender el lenguaje natural y generar respuestas similares a las humanas. Posee una vasta base de conocimientos y, con su sofisticado "entendimiento" del lenguaje, puede actuar como un poderoso compañero para cualquier persona que busque información. Puede responder a una amplia gama de preguntas, brindar consejos, entablar conversaciones sobre varios temas y ha demostrado su valía en una gran cantidad de áreas.
Pero, ¿ChatGPT puede crear páginas web? Pongámoslo en práctica y averigüémoslo.
Tenga en cuenta que esto se escribió con ChatGPT 3.5, antes del lanzamiento de la última versión.
Comencemos con algo de HTML básico. Dado que ChatGPT ya ha demostrado ser un codificador talentoso y un asistente de programación, esto no debería ser una gran prueba.
Este es el mensaje que usamos con ChatGPT para crear con éxito una página HTML "Hola, mundo":
Crea un simple "¡Hola, mundo!" página web usando HTML
ChatGPT generó el siguiente HTML básico que, como era de esperar, hizo lo que estaba destinado a hacer.
<!DOCTYPE html>
<html> <head> <title>Hello, World!</title> </head> <body> <h1>Hello, World!</h1> </body>
</html>ChatGPT nos aconseja colocar esto en un archivo con la extensión “.html” y abrirlo con nuestro navegador. Misión cumplida.
No me molestaré con una captura de pantalla; todos ustedes han visto antes una salida HTML sin formato.
Pidámosle a ChatGPT que haga que las cosas se vean mejor.
¿Puedes hacer que esta página se vea mucho mejor con el uso de CSS?
ChatGPT escupe en lo siguiente:
Este ejemplo usa CSS para cambiar el color de fondo de la página web a azul claro, centrar el texto en la página, cambiar el color del encabezado a azul marino y aumentar el tamaño de fuente del encabezado a 4 em.
Puedes jugar con css y diseñar tu página web.
También es una buena práctica colocar css en un archivo separado y vincularlo a su archivo index.html.
Que se ve así:
Una página web simple creada por ChatGPT usando HTML y CSS
Una mejora, sin duda, pero esto sigue siendo un juego de niños. Sin embargo, antes de continuar, sigamos el consejo de ChatGPT y separemos nuestro HTML y CSS.
¿Cómo colocaría el CSS en un archivo separado y lo vincularía a mi archivo index.html?
Puede crear un archivo CSS separado y vincularlo a su archivo HTML usando el elemento de enlace dentro del
headsección de su archivo HTML. Aquí hay un ejemplo de cómo harías esto:
- Cree un nuevo archivo llamado "styles.css" en el mismo directorio que su archivo "index.html".
- Agregue su código CSS al archivo "styles.css".
- En su archivo "index.html", agregue la siguiente línea dentro del
headsección:
<link rel="stylesheet" type="text/css" href="styles.css">La
relatributo especifica la relación entre el documento actual y el documento vinculado, eltypeEl atributo especifica el tipo del documento vinculado y elhrefEl atributo especifica la ubicación del documento vinculado.- Guarde ambos archivos y abra "index.html" en su navegador web. Los estilos de "styles.css" ahora deberían aplicarse a la página web.
También puede incluir archivos css de enlaces en línea, como "https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css".
También se aplicará a su página web y no necesita incluirlo en su directorio local.
Cree una página web al estilo de Craigslist que haga lo siguiente:
– me permite agregar un nuevo anuncio
– me permite eliminar los anuncios existentes
– me permite enumerar todos los anuncios existentes
– me permite editar un anuncio existente
La creación de una página web al estilo de Craigslist implicaría usar una combinación de HTML, CSS, JavaScript y un lenguaje de back-end como PHP o Node.js para manejar los aspectos dinámicos de la página web. Aquí hay un ejemplo de cómo se vería la estructura básica de la página web:
<!DOCTYPE html>
<html> <head> <title>Craigslist-style Webpage</title> <link rel="stylesheet" type="text/css" href="styles.css"> </head> <body> <h1>Craigslist-style Webpage</h1> <form id="add-ad-form"> <label for="title">Title:</label> <input type="text" id="title" name="title"> <br> <label for="description">Description:</label> <textarea id="description" name="description"></textarea> <br> <button type="submit">Add Ad</button> </form> <table id="ads-table"> <thead> <tr> <th>Title</th> <th>Description</th> <th>Actions</th> </tr> </thead> <tbody> <!-- This section will be populated with ads using JavaScript --> </tbody> </table> <script src="script.js"></script> </body>
</html>La página de inicio resultante sin funcionalidad de fondo no se ve muy bien. Entonces pregunto:
¿Podría hacer que el sitio web se vea más profesional con el uso de un archivo CSS? Me gustaría que la paleta de colores fueran los colores nacionales de Italia.
Y ChatGPT cumple (el botón "agregar" incluso se vuelve rojo cuando pasa el mouse sobre él).
Formulario HTML simple con estilo creado por ChatGPT
Pero, ¿qué pasa con el JavaScript? Veamos si ChatGPT puede agregar eso.
¿Puede agregar el javascript para agregar un nuevo anuncio a la lista y mostrarlo?
// Get references to the form and table
const addAdForm = document.querySelector("#add-ad-form");
const adsTable = document.querySelector("#ads-table tbody"); // Handle the form submit event
addAdForm.addEventListener("submit", function(event) { event.preventDefault(); // Get the values from the form inputs const title = document.querySelector("#title").value; const description = document.querySelector("#description").value; // Create a new table row and add the ad data const newRow = document.createElement("tr"); newRow.innerHTML = ` <td>${title}</td> <td>${description}</td> <td> <button>Edit</button> <button>Delete</button> </td> `; // Add the new row to the table adsTable.appendChild(newRow); // Clear the form inputs addAdForm.reset();
});Y los resultados:
Formulario HTML semifuncional con el uso de JavaScript creado por ChatGPT
Nada mal. Con unas pocas indicaciones, pasamos de la nada a HTML feo, a HTML más agradable, a JavaScript que no algo.
Probemos algo útil. A continuación se muestra el mensaje para crear una página de inicio simple (pero potencialmente útil) para un blog, con algunos requisitos específicos.
Vamos a crear una página web. Me gustaría que escribieras HTML y CSS y todo lo que sea necesario para generar una página de inicio de blog que cumpla con estos requisitos:
– la página usará un ancho de 1024px
– en la parte superior de la página estará el título en letra grande
– debajo de esto debe haber una fila de enlaces a 3 páginas útiles en el blog
– debajo de esto habrá un anuncio de banner en el que se puede hacer clic que se ajusta al tamaño estándar de la industria
– debajo de esto hay una sección de los últimos blogs, que debe mostrar las 6 últimas entradas en un diseño de mosaico con 2 filas de 3 mosaicos
- debajo de las últimas entradas del blog debe haber una sección "acerca de" que enumere información sobre el fundador del sitio web junto con su foto
– debajo de esto debe haber un pie de página típico, incluyendo
– usa lorem ipsum para completar el texto
– la página debe ser atractiva, con un estilo moderno
– debería haber un efecto de desplazamiento de CSS en los últimos mosaicos del blog
Aquí está el HTML y CSS generado por ChatGPT:
<!DOCTYPE html>
<html lang="en">
<head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>My Blog</title> <style> body { font-family: Arial, sans-serif; max-width: 1024px; margin: 0 auto; padding: 1rem; } h1 { font-size: 2.5rem; text-align: center; margin-bottom: 1rem; } nav { display: flex; justify-content: center; margin-bottom: 1rem; } nav a { text-decoration: none; color: #333; margin: 0 1rem; } .banner { display: block; width: 728px; height: 90px; background-color: #ccc; margin: 0 auto 1rem; text-align: center; line-height: 90px; } .blogs { display: flex; flex-wrap: wrap; justify-content: space-between; margin-bottom: 1rem; } .blog { width: 32%; background-color: #f0f0f0; padding: 1rem; box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); transition: transform 0.3s ease; cursor: pointer; } .blog:hover { transform: translateY(-10px); } .about { display: flex; margin-bottom: 1rem; } .about img { width: 150px; height: 150px; object-fit: cover; border-radius: 50%; margin-right: 1rem; } .about p { flex: 1; } footer { background-color: #333; color: #fff; padding: 1rem; text-align: center; font-size: 0.875rem; } </style>
</head> <body> <h1>My Awesome Blog</h1> <nav> <a href="#">Useful Page 1</a> <a href="#">Useful Page 2</a> <a href="#">Useful Page 3</a> </nav> <a href="#" class="banner">Ad - 728x90</a> <div class="blogs"> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> <div class="blog"> <h2>Lorem Ipsum</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis...</p> </div> </div> <div class="about"> <img src="founder.jpg" alt="Founder's Photo"> <div> <h2>About the Founder</h2> <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Cras venenatis mauris id facilisis. Integer sit amet tincidunt turpis, a lacinia ligula.</p> </div> </div> <footer> © 2023 My Awesome Blog. All Rights Reserved. </footer> </body>
</html>Y aquí está el producto final:
Página de inicio de blog simple creada por ChatGPT
Se ve bastante bien. Quiero decir, podría verse mejor con alguna guía adicional de CSS en el indicador, estoy seguro, pero en general no es un mal comienzo. Incluso tiene un efecto de desplazamiento sobre los mosaicos, visible en el mosaico superior izquierdo (se eleva ligeramente al pasar el mouse).
Una nota es que pedí "las 6 últimas entradas en un diseño en mosaico con 2 filas de 3 mosaicos", pero ChatGPT generó este mosaico en 2 columnas preferiblemente.
Parece que con algunas indicaciones simples y directas, ChatGPT ciertamente muestra algunas capacidades para poder generar páginas web. Me pregunto cómo se desempeñaría cuando se le pidiera que generara algo dinámico, y cómo instruiría al ser humano para entrelazar los diferentes componentes. Una prueba para la próxima.
Mateo Mayo (@mattmayo13) es científico de datos y editor en jefe de KDnuggets, el recurso en línea fundamental de ciencia de datos y aprendizaje automático. Sus intereses radican en el procesamiento del lenguaje natural, el diseño y la optimización de algoritmos, el aprendizaje no supervisado, las redes neuronales y los enfoques automatizados para el aprendizaje automático. Matthew tiene una maestría en ciencias de la computación y un diploma de posgrado en minería de datos. Se le puede contactar en editor1 en kdnuggets[dot]com.
- Distribución de relaciones públicas y contenido potenciado por SEO. Consiga amplificado hoy.
- Platoblockchain. Inteligencia del Metaverso Web3. Conocimiento amplificado. Accede Aquí.
- Fuente: https://www.kdnuggets.com/2023/03/chatgpt-webpage-construction.html?utm_source=rss&utm_medium=rss&utm_campaign=using-chatgpt-for-webpage-construction
