Creación de Páginas Web con IA Qwen

La idea que tengo la plasmo en un papel en blanco. Análogo a la construcción de un edificio, planeo todo el contenido que tendrá la web.

p1.png - Boceto en papel

Por ejemplo, voy a hacer el mismo curso de "Vamos a hacer una página web con inteligencia artificial Qwen" de tres clases.

p1b.png - Planeación del contenido

Tomo una foto con mi celular en WhatsApp y me la envío a mí mismo.

p2.png - Foto del boceto en WhatsApp

Si no sabes cómo hacerlo, aquí te lo explico.

p2.mp4 - Video explicativo

Recuerda grabar el archivo en la carpeta descargas.

Creo la carpeta de nombre "web"

p3.png - Carpeta web creada (clic para ver carpeta creada del ejemplo)

Aquí pondremos todos los elementos como PDF y otros documentos.

Te lo explico en este video.

p3.mp4 - Video explicativo

Voy a https://chat.qwen.ai

Hago clic en el símbolo más y allí subir archivos y adjuntamos el boceto de la carpeta descargas.

p6.png - Interfaz de Qwen con botón de subir archivos

Hacemos nuevamente clic en el más, seleccionamos desarrollo web.

Una vez terminado, debe parecer algo así:

p8.png - Wireframe generado por IA

Si la propuesta hecha por la IA se parece a nuestro boceto.

Si no sale algo parecido es porque tenemos un modo en Qwen diferente al desarrollo web. Si ha hecho otro diseño se lo decimos para que lo corrija.

p9.png - Comparación boceto vs wireframe

p10.png - Código HTML copiado

Ponemos de nombre "web1.htm" y No olvidar que es en el tipo "todos los archivos".

p11.png - Guardando archivo web1.htm

Hacemos doble clic en el archivo web1.htm que debe estar dentro de la carpeta web y observamos. Tenemos hecha nuestra primera página web. El video explica el proceso.

p6-12.mp4 - Video del proceso completo

Reconocer la sintaxis para la inserción de imágenes es crucial. Aquí un ejemplo:

Esto significa que la imagen se encuentra en la carpeta imágenes y su nombre es x.png con ancho de 100 píxeles. Debemos reemplazar la letra x por la del nombre de la imagen que queremos insertar.

No olvidar la extensión, si no es "png", todo en minúsculas y evitando las tildes, espacios vacíos y ñs.

p14.png - Ejemplo de sintaxis de imagen

Abro con el bloc de notas el archivo web1.htm y me ubico después de la posición <body> del código.

Reemplazo "Cliiee Academy" por:

Veamos el video:

Para el ejemplo web2.htm. Puedo hacerlo con guardar como o abriendo otro bloc de notas.

p15.png - Guardando como web2.htm

Vemos la imagen en el sitio y está bien el tamaño, voy al paso 17.

p16.png - Imagen correctamente mostrada

Si la imagen no se ve, o sale así:

p17.png - Error de imagen no cargada

Hay algo que no funciona. Primero debemos verificar si web1.htm y web2.htm se encuentran dentro de la carpeta "web".

Hemos escrito mal el nombre (hasta una letra en mayúscula basta para que no funcione) o hay una con tilde o espacios vacíos. La imagen no se encuentra en la carpeta imágenes.

Si la imagen no es muy chica o es muy grande:

Ahí solo queda ir jugando con width="200" o width="60"

p18.png - Ajuste de tamaño de imagen

Análogamente repetimos esto ubicando las casillas donde se va a reemplazar las imágenes y poniendo su respectivo nombre y extensión.

p19.png - Múltiples imágenes insertadas

Análogamente a la sintaxis de imágenes, los enlaces internos apuntan a documentos PDF u otras extensiones que se encuentran en la carpeta web y tienen la siguiente forma:

p20.png - Sintaxis de enlace interno

Nota: No se acostumbra poner archivos Word, Excel ni PowerPoint porque se suele confundir en los navegadores. Lo mejor es convertirlos a PDF.

El texto del enlace es lo que vemos. En el ejemplo, buscaremos "PPT" y lo ingresaremos con el archivo "s3.pdf" el cual ya debe estar en nuestra carpeta web.

p21.png - Búsqueda de palabra clave

Debemos observar que por lo menos existe la palabra subrayada del enlace y está en letra azul.

Si existen errores, debemos ver si el archivo está en la carpeta web.

p22.png - Enlace interno verificado

Es similar a los enlaces internos pero esta vez son precedidos con las siglas https://

La sintaxis es la siguiente:

Para el ejemplo lo haremos con nuestro vídeo subido a YouTube.

Antes de nada debemos saber en dónde se encuentra nuestro enlace del video YouTube subido.

Voy al enlace de YouTube, hago clic en la flecha compartir y copio el enlace.

p23.png - Compartir video de YouTube

De este enlace externo:

Lo reemplazamos por la sintaxis:

No olvidar reemplazar texto de enlace por "video".

p24.png - Enlace de YouTube implementado

p25.png - Verificación final

p24.mp4 - Video de verificación

p26.png - Prompt final para embellecimiento