Práctica 4. Diseño y creación web con IA

Descripción de la práctica

Esta primera práctica se va a desarrollar en dos sesiones.

Al acabar la práctica serás capaz de utilizar la IA para:

  • Mejorar el contenido de páginas web.
  • Crear nuevo contenido en distintos idiomas, incluyendo texto e imágenes.
  • Diseñar un sitio web completo.

¿Qué debes entregar tras acabar la práctica y durante su desarrollo?

  • Un enlace a tu página web individual, incluyendo la nueva pagina creada usando IA.
  • El enlace al nuevo sitio creado con IA en los ejercicios del último apartado. Aunque no podáis publicar el sitio web creado con IA en el último apartado, debéis añadir a vuestro profesor de prácticas como administrador. Para ello seguid los pasos mostrados en el vídeo del último ejercicio.

Introducción

Existen múltiples formas de aprovechar las herramientas de Inteligencia Artificial (IA) para diseñar y crear páginas web. En los últimos años han surgido un sinfín de herramientas de IA que nos permiten generar texto, mejorar su redacción, generar imágenes, vídeos o audios, resumir documentos y mucho más. Todas estas herramientas pueden utilizarse en el diseño y creación de páginas web. Además, han surgido múltiples plugins que pueden integrarse en entornos como WordPress para aprovechar la IA. Finalmente, el propio wordpress.com está desarrollando e integrando nuevas funcionalidades que permiten incluso diseñar sitios web completos usando la IA. Todo esto lo veremos en esta práctica.

Jetpack es un conjunto de plugins integrados en una sola herramienta que abarca temas de seguridad, rendimiento, desarrollo, gestión y también creación de sitios web con IA. En esta práctica nos centraremos en el uso de la herramienta Jetpack AI Assistant. Esta herramienta está incluida en algunos de los planes de pago de wordpress.com, como el que tenemos disponible para realizar las prácticas de la asignatura.

En el siguiente enlace puedes encontrar la página de ayuda de Jepack AI assistant en la web de wordpress.com

Jetpack AI Assistant

Se trata de un asistente de creación y mejora de páginas web usando Inteligencia Artificial que nos ofrece distintas funciones. Iremos revisando las principales haciendo uso de distintos segmentos del siguiente webminar. Ten en cuenta que, aunque el vídeo tiene unos pocos meses la herramienta ha evolucionado y seguirá haciéndolo. Eso significa que pueden haber cambiado algunos detalles de la interfaz y que ahora permite hacer más cosas.

La mayoría de los ejercicios de está práctica se van a realizar en una o varias páginas creadas a tal efecto. Sin embargo, puedes aplicar todo lo aprendido a todas las páginas de tu sitio web.

  1. Visualiza hasta el minuto 6:20 del vídeo para conocer qué es Jetpack AI assistant y qué funciones ofrece.

Bloque de asistente IA

El bloque de asistente IA es un nuevo tipo de bloque que nos proporciona Jetpack, del mismo modo que disponemos de bloques de tipo párrafo, imagen, lista, etc. Este tipo de bloque nos permite generar nuevo texto a partir de unas indicaciones en forma de prompt, mejorar la redacción del texto existen o traducirlo a múltiples idiomas, entre otras cosas.

Obviamente, podemos utilizar otras herramientas de IA generativa como ChatGPT, Gemini, Deepseek, etc., para lograr resultados similares, pero, al no estar integradas en wordpress.com, tendremos que trabajar alternativamente con dos o más entornos.

2. Visualiza el segmento que empieza en el minuto 6:23 del vídeo para aprender a utilizar el bloque de asistente IA de Jetpack.

3. Crea una nueva página web y añade un nuevo bloque de tipo «AI Assistant». Escribe un prompt para que añada un texto sobre un tema que te interese y que permita escribir suficiente información. Pídele que añada varios apartados de primer y segundo nivel. Si te gusta el texto resultante, puedes indicarle que te ha gustado.

4. Por defecto la IA habrá escrito el texto en tono «Formal». Añade un nuevo bloque del mismo tipo y escribe el mismo prompt, pero esta vez pídele que cambie bastante el tono del texto. Por ejemplo, puedes probar con un tono cómico o con uno provocador. Compara los resultados de los textos obtenidos.

5. Colócate ahora en alguno de los párrafos y pídele que te lo amplíe. Ahora pide que te resuma el párrafo más largo que haya generado.

6. También puedes pedirle que te cambie el tono de un solo párrafo, en lugar de todo el texto generado. Prueba con distintos tonos y compara los resultados.

7. Finalmente, pídele que te traduzca el texto a inglés.

Asistente para la redacción

El asistente para la redacción nos permite corregir errores ortográficos del texto o mejorar su redacción. Desgraciadamente, en el momento de redactar este enunciado, solo funciona con textos en inglés. Esperemos que en breve también funcione con textos en español. No obstante, como en el último ejercicio hemos traducido nuestro texto al inglés, podremos aprovechar el asistente.

8 Visualiza el segmento que empieza en el minuto 11:09 del vídeo para aprender a utilizar asistente para la redacción de Jetpack.

9. Activa la opción de asistencia para la redacción de Jetpack y observa como, a pesar de que el texto se ha redactado con la IA del mismo plugin, subraya una parte importante del texto como mecanismo para sugerirte posibles mejoras.

10. Corrige los posibles errores ortográficos que te marca la herramienta, si estás de acuerdo con su criterio.

11. Revisa las posibles palabras complejas que te haya marcado y sustituye algunas de ellas por otras que te sugiera.

12. Acorta algunas de las frases más largas que te marque aceptando sus sugerencias y compara el resultado con el texto original. Puedes aceptarlo o no.

13. Traduce algún párrafo al español y observa cómo te lo subraya casi todo como erróneo. Vuelve a traducirlo al inglés para evitar este problema.

Generación de imágenes

Una de las opciones más llamativas del asiste IA de Jetpack es la posibilidad de generar imágenes con distintos estilos siguiendo las instrucciones que le des a la herramienta.

14. Visualiza el segmento que empieza en el minuto 14:00 del vídeo para aprender a generar imágenes con IA usando el asistente IA de Jetpack.

15. Usa la IA para generar tres de imágenes para ilustrar el texto que has creado en los ejercicios anteriores e insértalas en las posiciones que te parezcan más adecuadas. Si quieres puedes crear un bloque con varias columnas para combinar texto con alguna de las imágenes. Utiliza estilos muy distintos con cada imagen para comparar los resultados obtenidos.

16. Accede a la biblioteca de medios en el Escritorio para confirmar que se han añadido todas las nuevas imágenes generadas con IA.

17. Visualiza el segmento que empieza en el minuto 23:32 del vídeo para a añadir una leyenda y texto alternativo a las imágenes usando el asistente IA de Jetpack.

18. Utiliza la herramienta para generar las leyendas y textos alternativos de las imágenes generadas en los ejercicios anteriores. Revisa lo bien (o mal) que describen las imágenes y cambia los resultados a tu gusto.

Generación de la imagen destacada

Una función similar a la anterior es la posibilidad de generar la imagen destacada de una página o entrada de blog usando IA. Para ello la herramienta revisa el contenido de la página o entrada, genera de modo automático un resumen del mismo y lo utiliza como instrucciones para generar una imagen representativa con IA.

19. Visualiza el segmento que empieza en el minuto 19:50 del vídeo para aprender a generar la imagen destacada de una página o entrada de blog usando el asistente IA de Jetpack.

20. Aunque el vídeo muestra cómo generar la imagen destacada de una entrada de un blog, puedes generar también la imagen destacada de una página web de modo similar. Accede a la pestaña «Página» del panel derecho de «Ajustes» de tu página y elige establecer la imagen destacada generándola con IA. Observa lo bien (o mal) que resume el contenido de tu página y lo utiliza como instrucciones para generar la imagen, así como lo bien (o mal) que la imagen ilustra dicho contenido. Puedes modificar el resumen generado y regenerar la imagen.

Generación de logos del sitio

El asistente IA de Jetpack también permite generar un logo ilustrativo de todo un sitio web, teniendo en cuenta el contenido de todas sus páginas o entradas.

21. Visualiza el segmento que empieza en el minuto 21:18 del vídeo aprender a generar el logo de tu sitio usando el asistente IA de Jetpack.

22. Añade un nuevo bloque de tipo «logo del sitio» y usa la IA para generar un logo para tu sitio web. Si no te parece bien el resumen/petición generado por la IA, puedes modificarlo. Antes de aceptar el logo, prueba a generar distintos logos cambiando el estilo de la imagen y selecciona el que más te guste.

Títulos con gancho

La IA también nos permite generar títulos atractivos para las páginas o entradas de un blog.

23. Visualiza el segmento que empieza en el minuto 26:22 del vídeo aprender a generar un título para tu sitio usando el asistente IA de Jetpack

24. Utiliza el botón «Generar opciones de títulos» del asistente a la redacción de Jetpack para generar un título que te guste. Compara las opciones ofrecidas por la herramienta y añade alguna palabra clave opcional para modificar los títulos generados. Quédate con el que más te guste.

Comentarios de la IA

El asistente IA de Jetpack también puede revisar el contenido de una página de entrada y ofrecernos sugerencias y comentarios para mejorarlo. No nos referimos a mejorar su sintaxis, como hemos visto antes con al asistente a la redacción, sino su contenido.

25. Visualiza el segmento que empieza en el minuto 34:42 del vídeo aprender a obtener comentarios para mejorar tu sitio usando el asistente IA de Jetpack.

26. Utiliza el botón «Generar opiniones» del asistente a la redacción de Jetpack para obtener sugerencias de mejora sobre el contenido de la página web.

27. Añade un nuevo bloque de asistente IA en cualquier parte de tu texto y copia una o varias de las sugerencias obtenidas para mejorar el contenido de tu página. Vuelve a generar comentarios con la IA y comprueba si han cambiado y si ya han desaparecido las sugerencias utilizadas para generar el nuevo bloque.

Creación de una web completa con IA

El siguiente vídeo te permitirá ver como la hija de Jamie WP usa el constructor de webs con AI (AI Website Builder) para construir y personalizar su sitio web en 5 minutos,… o no.

También puedes ver el siguiente vídeo «más formal» para ver cómo funciona esa herramienta.

El siguiente enlace contiene la documentación oficial de wordpress.com sobre cómo acceder y utilizar el creador de webs con IA.

28 Accede al creador de webs con IA integrado en wordpress.com para poder utilizarlo.

29. Sigue el ejemplo del vídeo y los pasos que te va indicando la herramienta para generar un nuevo sitio web sobre el mismo tema del sitio que estás creando en las prácticas.

  1. En este punto lo más importante es escribir un buen prompt de petición inicial para describir el contenido y tono de tu nuevo sitio.
  2. Compara los distintos diseños que ofrece la herramienta y elige el que más te guste.
  3. Compara el efecto de usar distintas paletas de colores y elige la que más te guste.
  4. Compara las distintas tipografías ofrecidas y elige la que más te guste.
  5. Utiliza el chat para pedirle que modifique el diseño o contenido del sitio o añada nuevo contenido. Ten en cuenta que la prueba gratuita de la herramienta solo incluye 30 solicitudes.
  6. Una vez satisfecho con la web obtenida, comprueba que puedes acceder a su contenido y modificarlo.
  7. Elige alguna de las imágenes del sitio y pide que la regenere en base a una nueva petición sobre su aspecto y contenido.

Ahora tendrás varios sitios asociados a tu cuenta de wordpress. El sitio que has estado creando durante las prácticas y el nuevo sitio creado en el ejercicio anterior usando IA.

Por defecto tu nuevo sitio tendrá un nombre de dominio generado en parte aleatoriamente y acabado en .wordpress.com.

30. Vamos a cambiar el nombre de dominio del nuevo sitio, pero manteniendo el final del mismo.

  1. Accede a la lista de tus sitios en wordpress.com/sites.
  2. Usa el icono con los tres puntos verticales asociado al nuevo sitio y accede a la opción sobre Dominios.
  3. Usa el icono con los tres puntos bajo la columna «ACCIONES» y cambia el principio del nombre de dominio con un texto que te parezca más adecuado y que esté disponible.

31. Visita el nuevo sitio y recorre todas sus páginas y su contenido. Puedes editarlo y modificarlo como cualquier otro sitio web.

Ahora ya estás en condiciones de aplicar todo lo aprendido en esta práctica a todas las páginas de tu sitio web.

32. Como solo es posible publicar sitios creados con IA usando un plan de pago de WordPress, no vamos a publicarlo, aunque vosotros siempre podréis verlo y modificarlo. Para que el profesorado pueda acceder al sitio, aunque no esté publicado, debéis añadir a vuestro profesor de prácticas como administrador de vuestro nuevo sitio. Para saber cómo acceder al Escritorio del nuevo sitio y añadir usuarios, seguid los pasos del siguiente vídeo sin audio.