Skip to content

Gener-AI WEBapps

Código de la actividad: cw24-Zi39h

El uso de los Chatbot ligados a grandes modelos de lenguaje de inteligencia artificial lleva a poder crear aplicaciones sin teclear código, eso sí, indicando al sistema inteligente lo que quieres que genere.

En esta actividad vamos a, en una hora, aprender a cómo pedirle a una IA que nos haga aplicaciones sencillas que se puedan ejecutar en un navegador desde cualquier dispositivo conectado.

Generación de WEBapps en JavaScript, empleando:

  • Visor online de código HTML (pulsa en el enlace anterior y prepárate para la actividad)
  • Chatbot: (pulsa en el enlace del chatbot que vayas a emplear)
    • Gemini (2.0 FLASH), para alumnado con cuenta de Google
    • Perplexity, para alumnado sin cuenta de Google o menor de edad que no requiera acreditarse.

Los pasos a seguir son, cada vez:

  1. Escribir el prompt en el chatbot.
  2. Pasar el código de la respuesta del chatbot al visor online de HTML.
  3. Comprobar el funcionamiento en el visor online de HTML.
  4. Afinar el prompt en el chatbot y volver al paso 2 hasta que el resultado en el visor sea el deseado.

Módulo 1: Introducción a HTML (Duración estimada: 10 minutos)

  • Conceptos básicos:
    • ¿Qué es HTML? Lenguaje de marcado para la estructura del contenido web.
    • Etiquetas, elementos y atributos. Las etiquetas suelen estar formadas por pares una de comienzo y otra que indica el final con «/». Por ejemplo: <TITLE>Título de mi página</TITLE>
    • Estructura básica de un documento HTML:
      • <html> indica que es un fichero en código HTML, 
      • <head> indica que es el encabezado no visible de la página, 
      • <title> indica el título de la página visible en la pestaña del navegador, 
      • <body> zona de contenido visible de la página web.
  • Prompts: (copia el texto entrecomillado con CTRL+C y pégalo en el Chatbot con CTRL+V)
    1. «Crea un documento HTML básico con un título que diga ‘Mi primera página’.»
    2. «Agrega un encabezado de nivel 1 (h1) con el texto ‘Bienvenido’.»
    3. «Añade un párrafo con la frase ‘Este es mi primer párrafo en HTML’.»
  • Ejemplo de código generado (respuesta al prompt 3):
    • Mira qué es lo que hace la etiqueta <h1>

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
</head>
<body>
    <h1>Bienvenido</h1>
    <p>Este es mi primer párrafo en HTML.</p>
</body>
</html>
  • Contenido adicional:
    • Etiquetas de formato de texto (<b>, <i>, <u>, etc.).
    • Listas (<ul>, <ol>, <li>).
    • Enlaces (<a>).
    • Imágenes (<img>).
  • Prompt avanzado: (copia el texto entrecomillado con CTRL+C y pégalo en el Chatbot con CTRL+V)
    • «Crea una página con una imagen de tu elección, un título, un encabezado y una lista de tus tres sitios web favoritos con enlaces a ellos.»

Módulo 2: Introducción a CSS (Duración estimada: 10 minutos)

  • Conceptos básicos:
    • ¿Qué es CSS? Lenguaje de estilos para la presentación visual.
    • Selectores (elemento, clase, ID).
    • Propiedades CSS (color, fuente, tamaño, márgenes, padding, etc.).
    • Cómo enlazar CSS a un documento HTML (en línea, interno, externo).
  • Prompts: (copia el texto entrecomillado con CTRL+C y pégalo en el Chatbot con CTRL+V)
    1. «Aplica color rojo al encabezado h1 de la página anterior usando CSS interno.»
    2. «Crea una clase llamada ‘resaltado’ que ponga el texto en negrita y color azul. Aplica esta clase al párrafo.»
    3. «Crea un archivo CSS externo llamado ‘estilos.css’ y enlaza el documento HTML. Dentro, define estilos para el cuerpo (body) con un fondo gris claro.»
  • Ejemplo de código generado (respuesta al prompt 2):

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
    <style>
        .resaltado {
            font-weight: bold;
            color: blue;
        }
    </style>
</head>
<body>
    <h1>Bienvenido</h1>
    <p class="resaltado">Este es mi primer párrafo en HTML.</p>
</body>
</html>
  • Contenido adicional:
    • Modelo de caja (Box Model).
    • Display (block, inline, inline-block, flex).
    • Posicionamiento (static, relative, absolute, fixed).
  • Prompt avanzado: (copia el texto entrecomillado con CTRL+C y pégalo en el Chatbot con CTRL+V)
    • «Dale estilo a la página del módulo anterior utilizando un archivo CSS interno. Quita los subrayados de los enlaces, cambia los colores, añade márgenes y padding para mejorar la presentación.»

Módulo 3: Introducción a JavaScript (Duración estimada: 10 minutos)

  • Conceptos básicos:
    • ¿Qué es JavaScript? Lenguaje de programación para la interactividad.
    • Variables, tipos de datos, operadores.
    • Funciones, eventos, DOM.
    • Cómo enlazar JavaScript a un documento HTML.
  • Prompts: (copia el texto entrecomillado con CTRL+C y pégalo en el Chatbot con CTRL+V)
    1. «Muestra una alerta en el navegador que diga ‘Hola Mundo’ usando JavaScript.»
    2. «Crea una función que calcule la suma de dos números.»
    3. «Agrega un botón a la página que, al hacer clic, muestre un mensaje diferente en una alerta.»
  • Ejemplo de código generado (respuesta al prompt 3):

HTML

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Mi primera página</title>
</head>
<body>
    <button onclick="mostrarMensaje()">Haz clic aquí</button>

    <script>
        function mostrarMensaje() {
            alert("¡Has hecho clic en el botón!");
        }
    </script>
</body>
</html>
  • Contenido adicional:
    • Manipulación del DOM (seleccionar elementos, modificar contenido, añadir/quitar elementos).
    • Eventos (click, mouseover, submit, etc.).
    • Introducción a frameworks/librerías (opcional, pero recomendable más adelante).
  • Prompt avanzado: (copia el texto entrecomillado con CTRL+C y pégalo en el Chatbot con CTRL+V)
    • «Crea un formulario con un campo de texto y un botón. Al enviar el formulario, muestra el texto ingresado en un nuevo párrafo debajo del formulario. Utiliza JavaScript para esto.»

Módulo 4: Ahora te toca a ti idear proyectos prácticos

  • Ideas de proyectos (con prompts guía):
    • Calculadora básica. (Prompts: «Crea una interfaz con botones para números y operaciones básicas.», «Implementa la lógica de las operaciones usando JavaScript.»)
    • Lista de tareas (To-Do List). (Prompts: «Crea un campo para ingresar tareas y un botón para agregarlas a una lista.», «Permite marcar las tareas como completadas.», «Permite eliminar tareas.»)
    • Juego sencillo (ej. Piedra, Papel o Tijera). (Prompts: «Crea botones para las opciones del jugador.», «Implementa la lógica del juego para determinar el ganador.», «Muestra el resultado en la página.»)

Consideraciones importantes:

  • Progresión: La dificultad de los prompts debe aumentar gradualmente. Empieza por un prompt sencillo y claro.
  • Explicaciones: Después de cada prompt, se proporciona una explicación detallada del código generado.
  • Errores de código: indica al chatbot cuando no funcione el código que lo arregle.

TAREA (duración estimada: 10 minutos)

Volver a la hora del código

Ajustes