Hace unos días comentaba en la red social X sobre como logré crear una página home para un sitio web utilizando casi en un 100% la Inteligencia Artificial, en este caso ChatGPT.
Acabo de hacer una home muy currada con ChatGPT en un 100%, con diseño, efectos CSS3 e imágenes. ¿Te gustaría verla?
— LuisVegaSEO.com (@fodsite) November 17, 2024
Si recibo cariño, puede ser.
Y como lo prometido es deuda, hoy daré a conocer la famosa web que hice con ChatGPT en un 100%, en realidad, un 95% porque la otra parte la hice a mano. Además mostraré algunas imágenes de GSC porque ya está teniendo impresiones y clics.
Proceso de creación de la página web
La verdad es que el proceso no es complicado si se sabe perdir correctamente cada una de las instrucciones. No se trata de generar una página web en una sola instrucción, sino más bien, se debe ir creando por partes.
A continuación, te detallo cada paso que seguí para llegar a la creación de una página web sobre Diagnósticos NANDA, desde la conceptualización inicial hasta la implementación de los elementos visuales y funcionales.
1. Definición del tema y objetivos
Inicialmente, establecí que la web estaría dedicada a los Diagnósticos NANDA, con el objetivo de ofrecer información completa, estructurada y accesible para estudiantes y profesionales de la salud.
Esta temática la encontré buscando nichos informativos que pudiera posicionar rápidamete. Es por esto que le pregunté a ChatGPT si conocía sobre esta temática.
Luego le pedí detallar los puntos claves basándonos en una web de la "competencia". Esto incluyó:
- Explicar qué son los Diagnósticos NANDA, Historia y Evolución.
- Detallar su Taxonomía II, Dominios, Clases.
- Listar los diagnósticos con sus descripciones.
- Ejemplos de aplicación de estos diagnósticos.
- Crear un recurso educativo para mejorar la experiencia de usuario.
2. Estructuración del contenido y arquitectura web
Siempre basándonos en el resultado anterior, le pedí a ChatGPT que me creara una posible arquitectura web y ubicara los contenidos por orden de importancia.
Un punto clave es pedir investigar en las SERPs el tipo de intención de búsqueda más adecuado para la web y de esta forma estructarla para atender de la mejor forma esa intención.
En resumen, el contenido quedó organizado en secciones claras:
- ¿Qué es NANDA: Explicación sobre NANDA, historia, evolución y su importancia.
- Clasificaciones: Detalles sobre la Taxonomía II, incluyendo los dominios y clases.
- Listado Completo: Los 267 diagnósticos, agrupados y organizados en listas fáciles de navegar.
- Ejemplos: ejemplos prácticos sobre la aplicación de NANDA.
- Recursos: documento PDF creado con ChatGPT y Google Drive para descargar.
Este esquema fue la base del diseño y funcionalidad de la web.
3. Creación del listado completo de diagnósticos
Para lograr una representación exhaustiva, trabajamos con el texto proporcionado del listado oficial de NANDA (documento PDF descargado) y lo organizamos en partes manejables.
- Agrupamos los diagnósticos en bloques de 50 para una lectura más fácil.
- Creamos un listado completo con los 267 diagnósticos, asegurándonos de no omitir ninguno.
- Ofrecimos opciones para representar los datos en formato HTML.
4. Desarrollo del diseño visual y otros recursos
El diseño visual se centró en la simplicidad, claridad y profesionalismo.
- Colores: ChatGPT se encargó de buscar los colores acordes a la temática.
- Encabezados: estilos diferenciados para
h1,h2,h3 y h4 asegurando una jerarquía visual clara. - Listas y Tablas: diseño de listas y tablas para adaptarse a pantallas pequeñas y grandes.
- Recursos: imágenes conceptuales que representan la taxonomía, los diagnósticos, entre otros.
- CSS responsivo: para garantizar que la web se vea y funcione correctamente en dispositivos móviles.
- Iconos: creamos un favicon para el navegador y un icono de aplicación para dispositivos móviles.
- Botones y enlaces interactivos: Para facilitar la navegación (jump links) y descarga de recursos.
- Menú adaptable: Colapsable en dispositivos móviles para maximizar el espacio visual.
- Recursos descargables: Opciones para incluir PDFs con información estructurada sobre NANDA.
5. Pruebas y resultado final
Luego de varias iteraciones probando tanto el HTML como el CSS hemos logrado una diseño que cumple con todos los requisitos para ser publicada en Internet. El resultado es una web profesional, completa y funcional sobre los Diagnósticos NANDA, que incluye:
- Información clara y estructurada.
- Listados completos con los 267 diagnósticos.
- Recursos con material de apoyo para descargar.
- Ejemplos de aplicación de diferentes dominios y clases.
- Un diseño responsivo que se adapta a cualquier dispositivo.
Presentación del sitio web
La web en cuestión se llama "Diagnósticos de Enefermería NANDA" cuya URL es https://guiananda.com y está enfocada principalmente en México, España, Colombia, Argentina y Perú.
Es una temática random que me encontré buscando nichos para hacer. Se trata sobre un estándar para diagnósticos de enfermería y tiene mucha búsqueda a través de palabras claves de tipo long tail.
Publicación de la web
Una vez terminada la página, con un poco de ansiedad la he indexado en Google a través de Google Search Console. GSC me permite ver el comportamiento orgánico de mis sitios web, es una herramienta de uso diario para los amantes del SEO. También he integrado Google Analytics 4 para monitorear las visitas.
La página ya ha recibido sus primeras visitas y deces de impresiones para algunos términos de búsqueda específicos de la temática.
Tareas por hacer
Esta web se puede expandir perfectamente, es posible generar cientos de contenidos para cada una de las clases asociadas a los dominios de NANDA.
También podría generar secciones internas para cada item del menú principal en vez de tener todo en la misma home. Este lo veré más adelante según la evolución que tenga la web.
Es posible generar una nueva sección con material de descarga referente al tema o guías de ejemplos para estudiantes o recién egresado de la carrera de enfermería.
En conclusión, en 2024 es totalmente posible generar un sitio web funcional en un par de horas. La IA te puede ayudar en todos los aspectos, desde el diseño hasta la maquetación, tan solo debes saber como pedir cada cosa.
¿Qué es el diseño responsive y por qué es esencial para tu sitio web?