Introducción a la IA.
Introducción a la IA.
Donado 320, 02.03.2024.
Como crear sitios web con ChatGpt
Como crear sitios web con ChatGpt
Ayudando al proceso de diseño a un costo asequible. Las herramientas de IA suelen ser menos costosas que la asistencia humana. Por ejemplo, los generadores de imágenes de IA pueden proporcionar imágenes casi realistas para tu sitio web, reemplazando la necesidad de contratar a un ilustrador o comprar imágenes de archivo.
Hoy en día, muchos diseñadores web profesionales utilizan varias herramientas de inteligencia artificial para automatizar tareas manuales, ahorrando tiempo y esfuerzo. Esto les permite centrarse en aspectos más creativos de su trabajo.
Simplificando el diseño web para principiantes, las plataformas, como los creadores de sitios web gratuitos con IA, te permiten diseñar un sitio web completamente funcional sin conocer ningún lenguaje de programación.
Belgrano & San Martin, 17.02.2024
Galeria Peuser, 17.02.2024
ChatGPT utiliza una técnica de aprendizaje automático llamada modelo de procesamiento del lenguaje natural (NLP) . Permite a las computadoras comprender, interpretar y generar el lenguaje humano combinando aspectos de la lingüística y la informática.
Sin embargo, este no es un modelo nuevo. De hecho, la mayoría de las herramientas, como Google Translate y Siri, que ofrecen funciones como sugerencia de palabras, detección de plagio y revisión, también utilizan el modelo NLP.
Lo que hace que OpenAI sea diferente es que entrena ChatGPT utilizando el método de aprendizaje por refuerzo a partir de la retroalimentación humana (RLHF) . Implica retroalimentación humana para medir y clasificar las respuestas en función de su calidad
Ejemplo > le pedimos a AI que escribiera líneas de código HTML para crear algunas de las páginas que necesitábamos. El primer mensaje es crear una página de inicio utilizando el diseño responsivo Bootstrap .
Mensaje: Crea una plantilla de página de inicio utilizando el diseño responsivo Bootstrap. Incluí el menú de la página de inicio, servicios, portafolio, blog y sobre nosotros en el encabezado.
Texto sin formato
Copiar al portapapeles
Abrir código en nueva ventana
Resaltador de sintaxis de EnlighterJS 3
< !DOCTYPE html >
<html>
< cabeza >
< título > Mi sitio web < / título >
< enlace rel= "hoja de estilo" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
< script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >< /script >
< script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" >< /script >
< script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" >< /script >
< /cabeza >
< cuerpo >
<encabezado>
< clase de navegación = "barra de navegación barra de navegación-expandir-lg barra de navegación-luz bg-luz" >
< a class = "navbar-brand" href = "#" > Mi sitio web < /a >
< clase de botón = "navbar-toggler" tipo = "botón" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Alternar navegación " >
< abarcan clase = "icono de alternancia de barra de navegación" >< /span >
< /botón >
< div class = "contraer barra de navegación-colapso" id = "navbarNav" >
< ul clase = "navbar-nav" >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "index.html" > Inicio < /a >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "services.html" > Servicios < /a >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "portfolio.html" > Portafolio < /a >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "blog.html" > Blog < /a >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "about.html" > Acerca de nosotros < /a >
< /li >
< /ul >
< /div >
< /nav >
< /encabezado >
< clase div = "contenedor" >
< div class = "centro de texto jumbotron" >
< h1 > Bienvenido a Mi sitio web < /h1 >
< p > Esta es una plantilla para un sitio web sencillo que utiliza Bootstrap. < /p >
< /div >
< /div >
< /cuerpo >
< /html >
<!DOCTYPE html> <html> <head> <title>Mi sitio web</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap. min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https:// cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0. 0/js/bootstrap.min.js"></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar -brand" href="#">Mi sitio web</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav " aria-expanded="false" aria-label="Alternar navegación"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id=" navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="index.html">Inicio</a> </li> < li class="nav-item"> <a class="nav-link" href="services.html">Servicios</a> </li> <li class="nav-item"> <a class=" nav-link" href="portfolio.html">Portafolio</a> </li> <li class="nav-item"> <a class="nav-link" href="blog.html">Blog< /a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">Acerca de nosotros</a> </li> </ul> </ div> </nav> </header> <div class="container"> <div class="jumbotron text-center"> <h1>Bienvenido a mi sitio web</h1> <p>Esta es una plantilla para un sitio web usando Bootstrap.</p> </div> </div> </body> </html>
<!DOCTYPE html>
<html>
<cabeza>
<título>Mi sitio web</título>
<enlace rel="hoja de estilo" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</cabeza>
<cuerpo>
<encabezado>
<nav class="barra de navegación barra de navegación-expandir-lg barra de navegación-luz bg-luz">
<a class="navbar-brand" href="#">Mi sitio web</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Alternar navegación ">
<span class="navbar-toggler-icon"></span>
</botón>
<div class="contraer barra de navegación-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Inicio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portafolio</a>
</li>
<li class="nav-item">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Acerca de nosotros</a>
</li>
</ul>
</div>
</nav>
</encabezado>
<div class="contenedor">
<div class="centro de texto jumbotron">
<h1>Bienvenido a mi sitio web</h1>
<p>Esta es una plantilla para un sitio web sencillo que utiliza Bootstrap.</p>
</div>
</div>
</cuerpo>
</html>
El chatbot respondió con líneas de código para una página de inicio según lo solicitado.
A veces, el chatbot puede dejar de funcionar a mitad de camino al intentar escribir un guión más largo. Cuando esto sucede, tienes tres opciones:
Continúe el script : ingrese este mensaje de seguimiento para que ChatGPT continúe desde donde lo dejó. Recomendamos utilizar este método si es posible para ahorrar tiempo.
Regenerar respuesta : haga clic en este botón encima del cuadro de chat. Esto hará que el chatbot reescriba la respuesta anterior desde el principio. Sin embargo, es posible que obtenga el mismo error.
Nuevo chat : presione este botón en la parte superior izquierda de la página si los métodos anteriores no funcionan. Tenga en cuenta que al utilizar este método, no puede confiar en preguntas de seguimiento y debe comenzar desde el principio.
A continuación, le pedimos a ChatGPT que creara una plantilla de página de blog con un diseño de tarjeta utilizando el mismo método.
Omitimos intencionalmente los detalles sobre el diseño responsivo de Bootstrap para verificar si puede comprender el contexto del mensaje anterior.
Mensaje: cree otro para una página de blog. Esto debería enumerar todas las publicaciones de blog en el sitio web con un diseño de tarjeta.
Texto sin formato
Copiar al portapapeles
Abrir código en nueva ventana
Resaltador de sintaxis de EnlighterJS 3
< !DOCTYPE html >
<html>
< cabeza >
< título > Mi blog < / título >
< enlace rel= "hoja de estilo" href= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" >
< script src= "https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js" >< /script >
< script src= "https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" >< /script >
< script src= "https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" >< /script >
< /cabeza >
< cuerpo >
<encabezado>
< clase de navegación = "barra de navegación barra de navegación-expandir-lg barra de navegación-luz bg-luz" >
< a class = "navbar-brand" href = "#" > Mi sitio web < /a >
< clase de botón = "navbar-toggler" tipo = "botón" data-toggle = "collapse" data-target = "#navbarNav" aria-controls = "navbarNav" aria-expanded = "false" aria-label = "Alternar navegación " >
< abarcan clase = "icono de alternancia de barra de navegación" >< /span >
< /botón >
< div class = "contraer barra de navegación-colapso" id = "navbarNav" >
< ul clase = "navbar-nav" >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "index.html" > Inicio < /a >
< /li >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "services.html" > Servicios < /a >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "portfolio.html" > Portafolio < /a >
< /li >
< li clase = "elemento de navegación" >
< li class = "elemento de navegación activo" >
< a class = "nav-link" href = "blog.html" > Blog < /a >
< /li >
< li clase = "elemento de navegación" >
< a class = "nav-link" href = "about.html" > Acerca de nosotros < /a >
< /li >
< /ul >
< /div >
< /nav >
< /encabezado >
< clase div = "contenedor" >
< clase div = "fila" >
< clase div = "col-md-4" >
< clase div = "tarjeta" >
< img class = "card-img-top" src= "https://via.placeholder.com/350x150" alt= "Límite de imagen de tarjeta" >
< clase div = "cuerpo de tarjeta" >
< h4 class = "card-title" > Título de la publicación del blog 1 < /h4 >
< p class = "card-text" > Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta. < /p >
< a href= "#" class = "btn btn-primary" > Leer más < /a >
< /div >
< /cuerpo >
< /html >
<!DOCTYPE html> <html> <head> <title>Mi blog</title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap. min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https:// cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0. 0/js/bootstrap.min.js"></script> </head> <body> <header> <nav class="navbar navbar-expand-lg navbar-light bg-light"> <a class="navbar -brand" href="#">Mi sitio web</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav " aria-expanded="false" aria-label="Alternar navegación"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id=" navbarNav"> <ul class="navbar-nav"> <li class="nav-item"> <a class="nav-link" href="index.html">Inicio</a> </li> < /li> <li class="nav-item"> <a class="nav-link" href="services.html">Servicios</a> </li> <li class="nav-item"> < a class="nav-link" href="portfolio.html">Portafolio</a> </li> <li class="nav-item"> <li class="nav-item active"> <a class= "nav-link" href="blog.html">Blog</a> </li> <li class="nav-item"> <a class="nav-link" href="about.html">Acerca de Nosotros</a> </li> </ul> </div> </nav> </header> <div class="container"> <div class="row"> <div class="col-md- 4"> <div class="card"> <img class="card-img-top" src="https://via.placeholder.com/350x150" alt="Límite de imagen de tarjeta"> <div class=" card-body"> <h4 class="card-title">Título de la publicación de blog 1</h4> <p class="card-text">Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del texto. contenido de la tarjeta.</p> <a href="#" class="btn btn-primary">Leer más</a> </div> </body> </html>
<!DOCTYPE html>
<html>
<cabeza>
<título>Mi blog</título>
<enlace rel="hoja de estilo" href="">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
</cabeza>
<cuerpo>
<encabezado>
<nav class="barra de navegación barra de navegación-expandir-lg barra de navegación-luz bg-luz">
<a class="navbar-brand" href="#">Mi sitio web</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Alternar navegación ">
<span class="navbar-toggler-icon"></span>
</botón>
<div class="contraer barra de navegación-collapse" id="navbarNav">
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link" href="index.html">Inicio</a>
</li>
</li>
<li class="nav-item">
<a class="nav-link" href="services.html">Servicios</a>
</li>
<li class="nav-item">
<a class="nav-link" href="portfolio.html">Portafolio</a>
</li>
<li class="nav-item">
<li class="elemento de navegación activo">
<a class="nav-link" href="blog.html">Blog</a>
</li>
<li class="nav-item">
<a class="nav-link" href="about.html">Acerca de nosotros</a>
</li>
</ul>
</div>
</nav>
</encabezado>
<div class="contenedor">
<div clase="fila">
<div clase="col-md-4">
<div clase="tarjeta">
<img class="card-img-top" src="https://via.placeholder.com/350x150" alt="Límite de imagen de tarjeta">
<div class="cuerpo-tarjeta">
<h4 class="card-title">Título de la publicación del blog 1</h4>
<p class="card-text">Un texto de ejemplo rápido para desarrollar el título de la tarjeta y constituir la mayor parte del contenido de la tarjeta.</p>
<a href="#" class="btn btn-primary">Leer más</a>
</div>
</cuerpo>
</html>
El chatbot respondió con éxito a una pregunta de seguimiento y generó líneas de código cuando se le solicitó. Este código también funciona cuando lo cargamos en un navegador.
Además de escribir código para plantillas de páginas web, el chatbot también puede generar elementos específicos. A continuación se muestra un ejemplo de cómo el chatbot crea un formulario de contacto simple. Los usuarios también pueden utilizar el modelo de IA para generar código CSS para ajustar elementos de diseño específicos, como fuentes, combinaciones de colores del sitio web y tamaños de elementos.
Debido a sus capacidades de procesamiento de lenguaje, el uso de ChatGPT para la generación de contenido de sitios web es uno de sus usos más comunes. Esta herramienta de inteligencia artificial puede ayudarlo a generar ideas y borradores para páginas estáticas, publicaciones de blogs e incluso guiones de video en segundos.
© 2022-2024 Bah-ia.Org
Fundado el 11 de noviembre de 2022.
Bah-IA.Org
