Muro – Alejandro Antonio Guerrero Guzman

Alejandro Antonio Guerrero Guzman publicó una actualización

hace 3 meses
“Generador de Cuentos Cortos Aleatorios”

1. Elección del Problema/Necesidad:
- Problema: A veces quiero escribir algo creativo pero me cuesta empezar.
- Solución: Una aplicación web que genere ideas de cuentos cortos aleatorios.
2. Generación de Código con ChatGPT:
- Prompt: “Crea un archivo HTML con CSS y JavaScript para un generador de cuentos cortos aleatorios. La página tendrá un botón que diga ‘Generar cuento’ y al presionarlo, mostrará un cuento corto de 3-4 oraciones. Incluye estilos básicos y utiliza JavaScript para generar el cuento aleatorio con diferentes personajes, escenarios y tramas.”
- ChatGPT te dará un código similar a este (puedes copiarlo y pegarlo en un archivo HTML):
HTML
```
<!DOCTYPE html>
<html>
<head>
<title>Generador de Cuentos Cortos</title>
<style>
body { font-family: sans-serif; text-align: center; }
button { padding: 10px 20px; font-size: 16px; }
#cuento { margin-top: 20px; font-size: 18px; }
</style>
</head>
<body>
<h1>Generador de Cuentos Cortos</h1>
<button onclick="generarCuento()">Generar Cuento</button>
<div id="cuento"></div>
<script>
function generarCuento() {
  const personajes = ["un mago", "una princesa", "un robot", "un dragón"];
  const escenarios = ["en un bosque", "en un castillo", "en el espacio", "en una ciudad"];
  const tramas = ["encontró un tesoro", "resolvió un misterio", "salvó a alguien", "aprendió una lección"];
  const personaje = personajes[Math.floor(Math.random() * personajes.length)];
  const escenario = escenarios[Math.floor(Math.random() * escenarios.length)];
  const trama = tramas[Math.floor(Math.random() * tramas.length)];
  const cuento = `Un día, ${personaje} ${escenario} y ${trama}.`;
  document.getElementById("cuento").textContent = cuento;
}
</script>
</body>
</html>
```
3. Edición y Prueba en Visual Studio Code:
- Guarda el código: como un archivo llamado cuentos.html.
- Abre cuentos.html: con Visual Studio Code.
- Abre el archivo en tu navegador: Para ver la aplicación en funcionamiento.
- Puedes pedir a ChatGPT que modifique el código si lo necesitas: Por ejemplo, si quieres añadir más opciones para personajes, escenarios o tramas.
4. Publicación en GitHub Pages (Pasos Rápidos):
- Crea un repositorio en GitHub: Llamado, por ejemplo, “generador-cuentos”.
- Sube cuentos.html: a tu repositorio de GitHub.
- Activa GitHub Pages: * Ve a la pestaña “Settings” (Configuración) de tu repositorio.
  - Busca la sección “Pages” (Páginas).
  - Selecciona la rama “main” (o la rama donde tengas tu archivo) y guarda los cambios.
- Espera un poco: GitHub Pages tardará unos minutos en publicar tu aplicación.
- Obtén tu enlace: GitHub Pages te dará un enlace a tu página web, algo así como https://tunombredeusuario.github.io/generador-cuentos/.
5. Compartir en la Comunidad Top Learning (Puedes Usar Esta Plantilla):
```
Nombre de la aplicación: Generador de Cuentos Cortos Aleatorios

Descripción del problema: A veces me cuesta empezar a escribir cuentos cortos. Esta aplicación genera ideas aleatorias para inspirarme.

Enlace: [tu enlace de GitHub Pages]

Desarrollo: Usé ChatGPT para generar el código básico HTML, CSS y JavaScript. Luego, lo ajusté en Visual Studio Code para personalizarlo un poco.

[Puedes añadir una captura de pantalla de tu aplicación si quieres]
```
Dulce Montserrat Cruz Loza, Melissa Alzaga y otros 2

0 Comentarios