IA y Software: La Inteligencia Artificial como una aliada del desarrollo de software.

Imagen
¡Bienvenidos a una nueva publicación en Programación para Todos ! Hoy tenemos el honor de contar con la colaboración especial de la Mtra. Yareli Aburto Sánchez, especialista en Ciencias de la Computación y actual esta estudiando su doctorado en esta fascinante área. En esta entrega, Yareli nos comparte una mirada clara y actual sobre cómo la Inteligencia Artificial está revolucionando el desarrollo de software: desde herramientas que agilizan procesos hasta algoritmos que aprenden y evolucionan junto a nosotros. Si te interesa la programación y quieres entender cómo la IA puede convertirse en tu aliada, ¡este artículo es para ti!     En el mundo del desarrollo de software se está experimentando   una transformación digital impulsada por la Inteligencia Artificial (IA).   Desde la automatización de tareas hasta la mejora en la colaboración entre equipos, la incorporación de herramientas basadas en IA ha revolucionado la industria de desarrollo de software. En...

Generando Imágenes y Mensajes Aleatorios con JavaScript y Picsum Photos

 


Introducción


Si estás empezando con JavaScript y quieres practicar la manipulación del DOM, eventos y API externas, este proyecto es perfecto para ti. Vamos a crear una página web que muestre imágenes aleatorias usando Picsum Photos y frases temáticas para el 14 de febrero. 



En este artículo, explicaremos paso a paso cómo funciona el código y cómo puedes adaptarlo para otros proyectos.


Código Completo


Aquí está el código HTML y JavaScript que vamos a analizar:


<!DOCTYPE html>

<html lang="es">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Mensajes y Fotos Aleatorias para San Valentín</title>

    <meta name="description" content="Disfruta de imágenes aleatorias y frases románticas para el Día del Amor y la Amistad. Celebra el 14 de febrero con mensajes especiales y comparte el amor.">

    <style>

        body {

            text-align: center;

            font-family: Arial, sans-serif;

            background-color: #ffe6e6;

        }

        img {

            width: 400px;

            height: 300px;

            border-radius: 10px;

            margin-top: 20px;

        }

        #texto {

            margin-top: 20px;

            font-size: 20px;

            font-weight: bold;

            color: #d63384;

        }

        button {

            margin-top: 20px;

            padding: 10px 20px;

            font-size: 16px;

            cursor: pointer;

            background-color: #ff4d6d;

            color: white;

            border: none;

            border-radius: 5px;

        }

        button:hover {

            background-color: #e63950;

        }

    </style>

</head>

<body>

    <h1>💖 Feliz 14 de Febrero 💖</h1>

    <img id="imagen" src="https://picsum.photos/400/300" alt="Imagen aleatoria">

    <div id="texto"></div>

    <button onclick="cambiarImagenYTexto()">💘 Nuevo mensaje 💘</button>


    <script>

        function cambiarImagenYTexto() {

            // Frases temáticas para el 14 de febrero

            const textos = [

                "El amor se celebra todos los días, pero hoy con más 💕",

                "La amistad un regalo que dura para siempre. ¡Feliz San Valentín! 🎁",

                "Hoy es un buen día para recordar a la gente que quieres ❤️",

                "Un abrazo, un beso y una sonrisa... ¡Feliz valentin! 😘",

                "No hay amor más sincero que aquel que es sincero 💗"

            ];


            // Selecciona un mensaje aleatorio

            const textoAleatorio = textos[Math.floor(Math.random() * textos.length)];


            // Muestra el mensaje correctamente en la página

            document.getElementById("texto").innerHTML = textoAleatorio;


            // Cambia la imagen aleatoria de Picsum

            document.getElementById("imagen").src = `https://picsum.photos/400/300?t=${new Date().getTime()}`;

        }


        // Llamar la función al cargar la página

        cambiarImagenYTexto();

    </script>

</body>

</html>



Explicación del Código


1. HTML: Estructura de la Página


El documento HTML define la estructura de la página. Contiene:



Un título en <h1> con un mensaje especial.


Una imagen aleatoria cargada desde Picsum Photos.


Un div para mostrar el mensaje aleatorio.


Un botón que permite actualizar la imagen y el mensaje.




2. CSS: Estilos Básicos


El código CSS personaliza la apariencia de la página con:



Fondo rosado para dar un estilo romántico.


Botón estilizado con un color llamativo y efecto hover.


Texto en color rosa oscuro para destacar el mensaje.




3. JavaScript: Lógica de la Página


Función cambiarImagenYTexto()


Esta función se encarga de cambiar la imagen y el texto cuando se presiona el botón.




Seleccionamos un mensaje aleatorio


const textos = [

    "El amor se celebra todos los días, pero hoy con más razón. 💕",

    "La amistad es un regalo  dura para siempre. ¡Feliz San Valentín! 🎁",

    "Hoy es un buen día para recordarte el amor.❤️",

    "Un abrazo, un beso y una sonrisa... ¡Feliz Valentin day! 😘",

    "No hay amor más sincero que aquel que se comparte. 💗"

];

const textoAleatorio = textos[Math.floor(Math.random() * textos.length)];




Se crea un array con frases temáticas.


Se elige un mensaje aleatorio con Math.random().







Mostramos el mensaje en el div #texto


document.getElementById("texto").innerHTML = textoAleatorio;




Se usa innerHTML para mostrarlo correctamente sin errores con signos de exclamación.







Cambiamos la imagen aleatoria


document.getElementById("imagen").src = `https://picsum.photos/400/300?t=${new Date().getTime()}`;




La URL https://picsum.photos/400/300 carga una imagen aleatoria.


Se agrega ?t=${new Date().getTime()} para evitar que el navegador use la misma imagen en caché.







Ejecutamos la función al cargar la página


cambiarImagenYTexto();




Esto hace que la página cargue con una imagen y un mensaje desde el inicio.








Cómo Personalizarlo


Puedes adaptar este código para diferentes eventos, cambiando:

✅ Las frases para otro tema como motivación o chistes.

✅ Los colores en CSS para ajustarlo a otra festividad.

✅ El tamaño de las imágenes en la URL de Picsum Photos.


Conclusión


Este proyecto es una forma sencilla pero efectiva de practicar JavaScript. Aprendiste a manipular el DOM, generar valores aleatorios y trabajar con una API externa.

Prueba nuestra página en la siguiente url

https://www.programacionparatodos.com/p/mensajes-y-fotos-aleatorias-para-san.html




¡Anímate a modificarlo y compartir tu version!



Comentarios

🚀 Mantener este blog funcionando requiere tiempo y café. ¡Puedes contribuir con uno aquí!

Entradas más populares de este blog

Guía Práctica: Ejemplo Completo de ASPX para Desarrolladores Web

Macro de Excel para abrir archivo csv

📊 Automatiza tu trabajo: Convierte tablas de Word a Excel con una macro