Crear páginas web con ChatGPT desde 0

ChatGPT es una Inteligencia artificial creada por open AI, que está entrenada con millones de datos alojados ya en internet. Básicamente, es un chatbot que conversa con nosotros, un chatbot que sabe de todo. La puedes encontrar en su sitio principal de OpenIA. ChatGPT no crea proyectos grandes, sino que responde preguntas concretas. Si le dijéramos que nos cree una página web nos brindaría código HTML simple con algunos títulos y párrafos, porque como sabemos, eso es una página web (no un sitio web).

Cabe recalcar que yo si tengo conocimientos básicos en desarrollo web Front-End (he realizado cursos básicos, bastante básicos). Podría también decir que tener conocimientos en otros lenguajes de programación, como Python, ayuda a que se desempeñe mejor esta experiencia.
Así y todo creo que cualquier persona podría crear una página web copada y subirla públicamente a la internet.

PRIMERO: (Prototipo web) ◄
Lo primero que realice para crear esta página web con HTML, CSS y JavaScript fue lo básico que se necesita para crear una. Cree un prototipo web para ya tener mis imágenes y contenido del que se va a tratar, en este caso es contenido para un asesor financiero (Fake).
El contenido en texto fake lo generé con esta IA, solo tuve que pedirle que me generase una historia de una empresa que se fundó en 2014, que se llama Tu Asesor Financiero y que se dedica a la asesoría personal y empresarial…

Esta redacción de biografía e historia que me genero rápidamente en segundos me parece fascinante.
Como explique en mi Blog, chatGpt está diseñado principalmente para el procesamiento de datos y no para compartir archivos multimedia, videos o imágenes.

SEGUNDO: (Estructura web)◄
Una vez que tuve el prototipo web, empece con la estructura HTML. Le pedí que me generase la estructura de una web con código HTML (etiquetas html, head, header, body, footer), que acepte UTF-8 y que sea responsive (metaetiqueta viewport).
Le fui dando instrucciones en diferentes preguntas como quería separar mi contenido, cuáles iban a ser los títulos, cuáles los textos y donde iban a estar las imágenes…

Instrucciones como:
“Quiero un logo en texto llamado TAF dentro del header. Luego quiero una barra de navegación con links que digan; Quienes somos, servicios, contactos y una imagen que me lleve al inicio” “Quiero una imagen y por debajo un subtítulo con un párrafo” “Quiero un título principal en la imagen, con un párrafo por debajo y cuatro imágenes”, etc.

TERCERO: (Diseño web)◄
Con CSS creamos todo el diseño de la web. Para que ChatGPT diseñe cada elemento y etiqueta de nuestro HTML debemos ser muy claros en las instrucciones. Esta es la parte más difícil de realizar la web.
Es complicado que ChatGPT nos brinde el código que estemos pensando, porque como sabremos, CSS define los estados en cascada, por eso su nombre “hojas de estilo de cascada”. Esto hace que cuando le demos una instrucción a un solo bloque de código HTML, se generen las preferencias que existen en el lenguaje, es decir, hay estilos y jerarquías que son más importantes, entonces cuando mezclamos diferentes estilos surgen complicaciones de implementación, ocasionando que no quede como esperábamos.

Esto lo solucionamos de la siguiente manera:
1- Informándonos y leyendo como es la funcionalidad de css; preferencias, propiedades, etc. *2- Practicar e implementar la metodología BEM *; ayudara a crear y modificar los estilos de una manera más rápida, y ayudara a que ChatGPT entienda mejor nuestro código. 3- Dándole buenas instrucciones a ChatGPT; Compartirle nuestro código para que lo verifique y nos brinde el error.** 4- Por último** y no menos importante: Practicar la prueba y error. ¿Qué nos impide probar, verificar y borrar?

Le pregunté al ChatBot si es posible generar una página web solo con su ayuda y esto me respondió…
❝ Sí, es posible crear una página web desde cero con HTML, CSS y JavaScript utilizando solo la ayuda de un modelo de lenguaje como ChatGPT. Sin embargo, es importante tener en cuenta que la creación de una página web desde cero requiere una comprensión básica de los lenguajes mencionados y de cómo funcionan juntos. Además, es recomendable tener alguna experiencia previa en el desarrollo web antes de comenzar a trabajar en un proyecto desde cero.

Puedo proporcionar información y ejemplos de código para ayudarlo a crear su página web, pero es importante que tenga alguna experiencia previa en el desarrollo web y esté dispuesto a aprender y practicar por su cuenta.

Además, es importante que tenga una herramienta de edición de código como Sublime Text, Atom, Visual Studio Code, entre otras, para poder editar el código fuente de su página.
¿En qué puedo ayudarte?❞

⬇Así es como quise probar que tanto nos podría ayudar ChatGPT para la creación de páginas web.

Todo lo realizado anteriormente fue puramente con la ayuda de esta inteligencia artificial en tan solo 3 días. Cabe recalcar nuevamente que tengo conocimientos demasiados básicos con el diseño-desarrollo, nunca realizó una web de esta dimensión y complejidad anteriormente.

Es muy interesante como esto funciona y como puede hacer que las tareas sean más fáciles.
Muchas personas ven a esta IA desde el miedo, miedo a que suplante su trabajo, más que nada los programadores (principiantes). Yo soy un programador principiante, pero veo esta IA como una herramienta de ayuda, herramientas como muchas otras que nos hacen el trabajo más rápido, fácil y divertido.

Desde que conocí ChatGPT, despejo mis dudas de momento con ella. Me da pereza hacer una pregunta en Google y tener millas de enlaces con publicidad, largas columnas de texto para explicar cosas que solo me apetecen saberlas en el momento. Es bastante obvio que si deseo y necesito buscar información compleja y extensa, utilizaré toda la internet.
Creo que es un gran cambio para el trabajo y el aprendizaje.
Me hace acordar a cuando era niño y usaba Wikipedia para leer y curiosear sobre temas en específico. Hoy veo a este chatbot como mi Wikipedia de niño.

Me gustaría que este chatbot siga siendo de uso gratuito y que siga avanzando, ya que es claro que tiene muchas cosas para mejorar.

⋆ Lo que CusanoTech aprende, tú lo puedes aprender ⋆
⮕ Medium / Instagram / Facebook / TikTok / Twitter / Github / Linkedin

© Cusanotech. 2023