La creación de un sitio web puede representar un desafío en la actualidad, dado que se considera que todos necesitarán la capacidad de construir y presentarse a través de uno. Afortunadamente, existen herramientas que facilitan la elaboración de sitios web sin la necesidad de conocimientos en programación. No obstante, también es recomendable comprender lo que sucede detrás de escena para tener un mejor entendimiento y la posibilidad de replicarlo.
Una excelente herramienta para generar nuestro sitio web y profundizar en nuestro aprendizaje a medida que la utilizamos es la inteligencia artificial, en particular ChatGPT. Todo se basa en formular las preguntas adecuadas para lograrlo de manera efectiva.
Utiliza los siguiente prompts.
A continuación te describo los pasos o prompts a seguir para la elbarocación de tu sitio web.
Para desarrollar un sitio web, generalmente se cuenta con una noción de la temática que se quiere abordar. Sin embargo, en el caso de carecer de una idea clara, siempre puedes recurrir a ChatGPT para obtener recomendaciones, con el siguiente prompt:
Que temás me recomiendas para hacer mi primera página web.
En este caso tomaremos como ejemplo la elaboración de tu portafolio personal.
Una vez que tengas clara tu idea, el siguiente paso es consultar qué información se recomienda incluir. Como referencia, puedes utilizar el siguiente prompt:
¿Qué información consideras importante incluir en mi Portafolio Personal?
¿Qué titulo le puedo poner a mi portafolio personal?
¿Cómo puedo hacer una breve presentación sobre mí y lo que hago en mi portafolio personal?
Nota: En este paso, ten en cuenta que la IA solo puede proporcionarte una guía sobre qué incluir en tu presentación personal, ya que no te conoce tan bien como tú mismo. Sin embargo, puedes pedirle que te ayude a mejorar la descripción, en el siguiente paso; te explicaré cómo hacerlo.
Una vez que ya tengas tu presentación sobre tí puedes pedirle que la mejore con el siguiente prompt:
Eres reclutador y me estas ayudando a mejorar mi presntación para mi portafolio personal. Espera a que escribe mi presentación. Antes de empezar presentate y explica lo que tienes que hacer.
Nota: Puede agregarle más contexto a este prompt dependiendo de tu perfil, del puesto que quieras conseguir. Ejemplo: Community Manager, Analista de sistemas, Programador Backend, Maquetador, etc.
Cuando cuentes con la descripción mejorada, estaremos preparados para exportar la información a un lenguaje de desarrollo web.
Con el siguiente prompt:
Nota: Yo prefiero en Markdown por la costumbre pero tú puedes usar el que quieras.
Para darle un aspecto más atractivo y evitar que todo se vea en blanco y negro, te recomiendo utilizar el siguiente prompt:
¿Podrías proporcionarme el código CSS para el código anterior?
Después pregúntale, ¿en qué etiqueta HTML puedo insertar este CSS?
Nuestra siguiente pregunta. ¿Cómo cambiar el color de fondo de las secciones?
Si deseas incorporar imágenes, a continuación, ejecuta la siguiente solicitud:
¿Cuáles son algunos sitios web donde puedo obtener imágenes de forma gratuita?
Además, es posible emplear técnicas de Meta Ingeniería de Prompts para generar imágenes mediante inteligencia artificial de Text-to-Image.
Para obtener información adicional, por favor, consulta la página mencionada.
Meta Ingeniería de PromptsHe aquí un ejemplo de aplicar la Meta Ingeniería de prompts.
Esta es el prompt que yo creé.
Logotipo de un robot futurista de Star Wars. Con los colores negros y rojos.
Y este es el prompt que me generó.
Por supuesto, aquí tienes un prompt mejorado para generar un logotipo de un robot futurista de Star Wars con colores negros y rojos utilizando DALL-E:
En español:
"Genera un logotipo que represente un robot futurista en el estilo de Star Wars. El diseño debe ser principalmente de color negro y rojo, con un enfoque en la elegancia y la tecnología avanzada."
In English:
"Generate a logo representing a futuristic robot in the style of Star Wars. The design should primarily feature black and red colors, with an emphasis on elegance and advanced technology."
Puedes utilizar este prompt con modelos generativos como DALL-E para obtener una imagen que se ajuste a tu descripción. Si necesitas más detalles o ajustes específicos, no dudes en decírmelo.
Lo ejecuté en Stable Diffusion y he aquí la imagen que me generó.
Puedes utilizar este prompt para ayudarte en el diseño de tu sitio web.
Eres experto en desarrollo de páginas web atractivas con conocimientos de UX. Tu trabajo es darme combinaciones de colores según el color que yo te indique. Me los das en formato hexadecimal para incluirlo.
Otro prompt para ayudarte en ideas del diseño de tu sitio web ejecutando el siguiente prompt:
"¿Dónde puedo mirar referentes web para crear el mío?"
Sigue aprendiendo y evolucionando, y tal vez en el futuro, tus próximos pasos involucren la creación de proyectos más complejos e impactantes. ¡El mundo de las posibilidades está abierto!